:root {
  --mavi: #2F4BD6; --mavi-acik: #3A5BE8; --mavi-koyu: #1C35B8; --mavi-zemin: #EEF1FB;
  --lacivert: #0B1020; --metin: #111827; --metin2: #374151; --soluk: #6B7280; --cizgi: #E5E7EB; --zemin: #F6F7FA;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--metin); background: #fff;
       -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
.kap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Üst menü: ana sayfadaki yüzen cam hap */
.ust { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 12px 0 0; pointer-events: none; }
.ust .kap { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
       height: 62px; max-width: 980px; padding: 0 8px 0 10px; border-radius: 999px;
       background: rgba(255,255,255,.72); border: 1px solid rgba(17,24,39,.07);
       backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
       box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 30px -12px rgba(30,45,120,.18); transition: box-shadow .25s ease, background .25s ease; }
.ust.kaydi .kap { background: rgba(255,255,255,.88); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 14px 40px -12px rgba(30,45,120,.3); }
.marka { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.4px; color: var(--lacivert); }
.marka img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 4px 12px rgba(47,75,214,.3); }
.menu { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--metin2); }
.menu .baglantilar { display: flex; gap: 6px; margin-right: 6px; }
.menu .baglantilar a { padding: 10px 16px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.menu .baglantilar a:hover { color: var(--lacivert); background: rgba(17,24,39,.05); }
.menu .indir-kucuk { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 16px; border-radius: 999px;
       color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--mavi-acik), var(--mavi-koyu));
       box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -6px rgba(47,75,214,.6); transition: transform .15s ease, box-shadow .15s ease; }
.menu .indir-kucuk:hover { transform: translateY(-1px); }
.menu .indir-kucuk svg { width: 17px; height: 17px; }
.menu .indir-kucuk .ik { display: none; }
.cihaz-ios .menu .indir-kucuk .ik-apple, .cihaz-android .menu .indir-kucuk .ik-play { display: block; }
.menu .indir-kucuk .ok { width: 15px; height: 15px; opacity: .8; transition: transform .15s ease; }
.menu .indir-kucuk:hover .ok { transform: translateX(2px); }
/* Masaüstü: İndir düğmesinin üzerine gelince App Store QR kodu */
.indir-sar { position: relative; display: inline-flex; }
.qr-pop { position: absolute; right: 0; top: calc(100% + 14px); width: 236px; padding: 16px; border-radius: 20px; background: #fff;
          border: 1px solid rgba(17,24,39,.08); box-shadow: 0 24px 60px -18px rgba(30,45,120,.4); display: none; gap: 12px;
          text-align: center; color: #0B1020; opacity: 0; translate: 0 -6px; transition: opacity .2s ease, translate .2s ease; pointer-events: none; }
.qr-pop::before { content: ""; position: absolute; top: -7px; right: 38px; width: 12px; height: 12px; background: #fff; rotate: 45deg;
                  border-left: 1px solid rgba(17,24,39,.08); border-top: 1px solid rgba(17,24,39,.08); }
.qr-pop::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.qr-pop svg { width: 150px; height: 150px; margin: 4px auto 0; display: block; color: #0B1020; }
.qr-pop b { display: block; font-size: 14.5px; font-weight: 800; }
.qr-pop small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #6B7280; font-weight: 500; }
@media (hover: hover) and (min-width: 961px) {
  html:not(.cihaz-ios):not(.cihaz-android) .qr-pop { display: grid; }
  .indir-sar:hover .qr-pop, .indir-sar:focus-within .qr-pop { opacity: 1; translate: 0 0; pointer-events: auto; }
}
/* iPhone'da düğme siteden çıkıp App Store'a gider: ok çapraz */
.cihaz-ios .menu .indir-kucuk .ok { rotate: -45deg; }

/* Sayfa başı */
.bas { position: relative; overflow: hidden; contain: paint; padding: 150px 0 56px; text-align: center;
       background: radial-gradient(50% 80% at 15% 0%, rgba(125,162,255,.35), transparent 70%),
                   radial-gradient(45% 80% at 90% 10%, rgba(196,181,253,.35), transparent 70%), #fff; }
.bas::after { content: ""; position: absolute; inset: 0; pointer-events: none;
       background-image: radial-gradient(rgba(17,24,39,.08) 1px, transparent 1px); background-size: 22px 22px;
       -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 30%, #000 20%, transparent 75%); }
.bas .kap { position: relative; z-index: 1; }
.hap { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
       color: var(--mavi); background: rgba(255,255,255,.75); border: 1px solid rgba(47,75,214,.15); }
.bas h1 { margin: 18px auto 0; max-width: 760px; font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -2px; color: var(--lacivert); }
.bas p { margin: 16px auto 0; max-width: 580px; font-size: 18px; color: var(--soluk); text-wrap: balance; }
.bas .tarih { margin-top: 14px; font-size: 14px; color: var(--soluk); }

/* Belge: solda içindekiler, sağda metin */
.belge { padding: 24px 0 110px; }
.belge .kap { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; max-width: 1040px; }
.icindekiler { position: sticky; top: 100px; padding: 18px; border-radius: 20px; background: var(--zemin); border: 1px solid var(--cizgi); font-size: 14px; }
.icindekiler b { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--soluk); }
.icindekiler a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--metin2); font-weight: 500; }
.icindekiler a:hover { background: #fff; color: var(--mavi); }
.metin { max-width: 720px; font-size: 16.5px; color: var(--metin2); }
.metin h2 { margin: 44px 0 12px; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.5px; color: var(--lacivert); scroll-margin-top: 100px; }
.metin h2:first-child { margin-top: 0; }
.metin h3 { margin: 24px 0 8px; font-size: 17.5px; font-weight: 700; color: var(--metin); }
.metin p { margin-top: 12px; }
.metin ul { margin: 12px 0 0 0; padding-left: 0; list-style: none; }
.metin li { position: relative; margin-top: 8px; padding-left: 22px; }
.metin li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--mavi); opacity: .7; }
.metin strong { color: var(--metin); }
.metin a { color: var(--mavi); font-weight: 600; }
.metin a:hover { text-decoration: underline; }
.kutu { margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: var(--mavi-zemin); border: 1px solid rgba(47,75,214,.12); color: var(--metin2); }
.kutu strong { color: var(--lacivert); }
.tablo { width: 100%; margin-top: 16px; border-collapse: separate; border-spacing: 0; font-size: 15px; border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; }
.tablo th, .tablo td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); }
.tablo th { background: var(--zemin); font-size: 13px; font-weight: 700; color: var(--metin); }
.tablo tr:last-child td { border-bottom: 0; }

/* İletişim */
.iletisim { padding: 24px 0 110px; }
.iletisim .kap { max-width: 1040px; }
.kanallar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kanal { position: relative; overflow: hidden; padding: 28px; border-radius: 26px; background: #fff; border: 1px solid var(--cizgi);
         box-shadow: 0 20px 50px -30px rgba(30,45,120,.35); }
.kanal .sim { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff;
         background: linear-gradient(135deg, var(--mavi-acik), var(--mavi-koyu)); box-shadow: 0 10px 22px -8px rgba(47,75,214,.6); }
.kanal .sim svg { width: 23px; height: 23px; }
.kanal h2 { margin-top: 18px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--lacivert); }
.kanal p { margin-top: 6px; color: var(--soluk); font-size: 15.5px; }
.kanal .deger { margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--metin); }
.kanal .dugme { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
         font-size: 14.5px; font-weight: 600; color: #fff; background: var(--lacivert); transition: transform .15s ease; }
.kanal .dugme:hover { transform: translateY(-1px); }
.kanal .dugme.acik { color: var(--lacivert); background: var(--zemin); border: 1px solid var(--cizgi); }
.sorular { margin-top: 16px; display: grid; gap: 10px; }
.sorular details { border-radius: 18px; background: var(--zemin); border: 1px solid var(--cizgi); transition: background .2s ease; }
.sorular details[open] { background: #fff; box-shadow: 0 14px 36px -24px rgba(30,45,120,.35); }
.sorular summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
         padding: 18px 20px; font-weight: 700; color: var(--metin); }
.sorular summary::-webkit-details-marker { display: none; }
.sorular summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
         font-size: 18px; font-weight: 500; color: var(--mavi); background: var(--mavi-zemin); transition: transform .2s ease; }
.sorular details[open] summary::after { transform: rotate(45deg); }
.sorular details div { padding: 0 20px 18px; color: var(--metin2); font-size: 15.5px; }
.sorular details div p + p { margin-top: 8px; }

/* SSS sayfası */
.sss-sayfa { padding: 8px 0 110px; }
.sss-sayfa .kap { max-width: 800px; }
.sekmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 8px; }
.sekmeler a { padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--metin2);
         background: var(--zemin); border: 1px solid var(--cizgi); transition: background .2s ease, color .2s ease; }
.sekmeler a:hover { background: #fff; color: var(--mavi); }
.grup { margin-top: 48px; scroll-margin-top: 100px; }
.grup h2 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--lacivert); }
.sorular a { color: var(--mavi); font-weight: 600; }
.yardim { margin-top: 64px; display: flex; align-items: center; gap: 18px; padding: 26px 28px; border-radius: 26px; color: #fff;
         background: linear-gradient(135deg, var(--mavi-acik), var(--mavi-koyu)); box-shadow: 0 24px 60px -30px rgba(28,53,184,.7); }
.yardim .sim { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.15); }
.yardim .sim svg { width: 26px; height: 26px; }
.yardim h2 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.yardim p { margin-top: 2px; color: rgba(255,255,255,.8); }
.yardim .dugme { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px;
         font-weight: 600; color: var(--lacivert); background: #fff; transition: transform .15s ease; }
.yardim .dugme:hover { transform: translateY(-1px); }

/* İletişim formu */
.iletisim .duzen { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
.iletisim .kanallar { grid-template-columns: 1fr; }
.form { padding: 32px; border-radius: 26px; background: #fff; border: 1px solid var(--cizgi); box-shadow: 0 20px 50px -30px rgba(30,45,120,.35); }
.form h2 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--lacivert); }
.form .aciklama { margin-top: 6px; color: var(--soluk); font-size: 15px; }
.form .satir { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--metin); }
.form input[type=text], .form select, .form textarea { display: block; width: 100%; margin-top: 7px; padding: 13px 14px; border-radius: 14px;
         font: inherit; font-size: 16px; font-weight: 400; color: var(--metin); background: var(--zemin); border: 1px solid var(--cizgi);
         outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; -webkit-appearance: none; appearance: none; }
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.form textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.form input:focus, .form select:focus, .form textarea:focus { background: #fff; border-color: var(--mavi); box-shadow: 0 0 0 4px rgba(47,75,214,.12); }
.form .onay { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--metin2); cursor: pointer; }
.form .onay input { width: 20px; height: 20px; flex: none; accent-color: var(--mavi); }
.form .onay a, .form .not a { color: var(--mavi); font-weight: 600; }
.form .hata { min-height: 0; margin-top: 12px; font-size: 14px; font-weight: 600; color: #DC2626; }
.form .hata:empty { margin-top: 0; }
.form .gonder { margin-top: 20px; width: 100%; height: 52px; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center;
         justify-content: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 700; color: #fff;
         background: linear-gradient(135deg, var(--mavi-acik), var(--mavi-koyu)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 26px -10px rgba(47,75,214,.7);
         transition: transform .15s ease; }
.form .gonder:hover { transform: translateY(-1px); }
.form .not { margin-top: 14px; text-align: center; font-size: 14px; color: var(--soluk); }

/* Alt bilgi */
footer { border-top: 1px solid var(--cizgi); padding: 36px 0 44px; color: var(--soluk); font-size: 14px; }
footer .kap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.alt-marka { display: flex; align-items: center; gap: 12px; }
.alt-marka img { width: 34px; height: 34px; border-radius: 10px; }
.alt-marka b { display: block; color: var(--lacivert, #0B1020); font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.alt-marka small { display: block; font-size: 13px; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a:hover, footer nav a.aktif { color: var(--mavi); }

@media (max-width: 960px) {
  .menu .baglantilar { display: none; }
  .belge .kap { grid-template-columns: 1fr; gap: 28px; }
  .icindekiler { position: static; }
  .iletisim .duzen { grid-template-columns: 1fr; }
  .bas h1 { font-size: 40px; letter-spacing: -1.4px; }
}
@media (max-width: 600px) {
  .ust { padding-top: 10px; } .ust .kap { width: calc(100% - 24px); height: 58px; padding: 0 6px 0 8px; }
  .marka img { width: 36px; height: 36px; border-radius: 11px; }
  .menu .indir-kucuk { height: 44px; padding: 0 16px 0 14px; }
  .bas { padding: 116px 0 36px; }
  .bas h1 { font-size: 34px; letter-spacing: -1.2px; }
  .bas p { font-size: 16.5px; }
  .metin { font-size: 16px; }
  .metin h2 { font-size: 21px; margin-top: 36px; }
  .tablo { font-size: 14px; } .tablo th, .tablo td { padding: 10px; }
  .tablo.yigin, .tablo.yigin tbody, .tablo.yigin tr, .tablo.yigin td { display: block; }
  .tablo.yigin { border: 0; border-radius: 0; overflow: visible; }
  .tablo.yigin tr:first-child { display: none; }
  .tablo.yigin tr { margin-top: 12px; border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; }
  .tablo.yigin td { border-bottom: 1px solid var(--cizgi); }
  .tablo.yigin td:first-child { background: var(--zemin); font-weight: 700; color: var(--metin); }
  .tablo.yigin td:last-child { border-bottom: 0; }
  .tablo.yigin td:not(:first-child)::before { content: attr(data-etiket); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--soluk); }
  .kanallar { grid-template-columns: 1fr; }
  .kanal { padding: 24px; }
  .iletisim .duzen { grid-template-columns: 1fr; }
  .form { padding: 24px 20px; }
  .form .satir { grid-template-columns: 1fr; gap: 0; }
  .yardim { flex-direction: column; text-align: center; }
  .yardim .dugme { margin-left: 0; }
  .grup h2 { font-size: 21px; }
}