/* Mini Dakhl tanıtım sitesi — bütün sayfaların ortak stili.
   Dawayar'ın tanıtım sayfasıyla aynı aile: çerçeve yok, derleme yok, CDN yok.
   Yalnız mantıksal yön özellikleri: aynı CSS Dari/Peştuca (sağdan sola) ve
   İngilizce (soldan sağa) için çalışır (`npm run kontrol` denetler).
   HTML'de style="" yok: _headers'taki CSP satır içi stile izin vermiyor. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../yazi/vazirmatn.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokenlar ----------
   Marka: gece mavisi + çivit, vurgu altın (logodaki sikke). Dakhlak'ın
   yeşilinden bilerek uzak. İkincil yazılar kendi zeminlerinde 4,5:1'in
   üstünde (tools/tarayici.mjs ölçüyor). */
:root {
  color-scheme: light;
  --zemin: #f5f6fb;
  --yuzey: #ffffff;
  --yuzey-2: #eef0f8;
  --cizgi: rgb(15 23 42 / .09);
  --cizgi-2: rgb(15 23 42 / .16);
  --metin: #0f172a;
  --metin-2: #475569;
  --metin-3: #566074;
  --vurgu: #4f46e5;
  --vurgu-koyu: #4338ca;      /* üstünde beyaz yazı: 7,9:1 */
  --vurgu-metin: #4338ca;
  --vurgu-soluk: rgb(79 70 229 / .08);
  --vurgu-cizgi: rgb(79 70 229 / .3);
  --altin: #b45309;           /* açık zeminde altın YAZI: 5:1 */
  --altin-metin: #92400e;     /* altın rozet yazısı, soluk altın zeminde 6:1 */
  --altin-soluk: rgb(217 119 6 / .12);
  --arti: #15803d;
  --eksi: #b91c1c;
  --golge: 0 1px 2px rgb(15 23 42 / .05), 0 10px 30px rgb(15 23 42 / .07);
  --golge-ekran: 0 2px 8px rgb(8 12 40 / .16), 0 40px 90px rgb(8 12 40 / .3);
  /* Kahraman ve kapanış bandı her temada koyu: logonun gece mavisi. */
  --koyu-1: #0b1028;
  --koyu-2: #1b1f52;
  --r: 16px;
  --r-b: 24px;
  --en: 1180px;
  --ust: 64px;
  --egri: cubic-bezier(.2, .8, .2, 1);
  --yazi: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="aydinlik"]) {
    color-scheme: dark;
    --zemin: #090c18; --yuzey: #10142a; --yuzey-2: #161b36;
    --cizgi: rgb(226 232 240 / .08); --cizgi-2: rgb(226 232 240 / .15);
    --metin: #e2e8f0; --metin-2: #a9b3c8; --metin-3: #939db4;
    --vurgu: #818cf8; --vurgu-koyu: #4f46e5; --vurgu-metin: #a5b4fc;
    --vurgu-soluk: rgb(129 140 248 / .12); --vurgu-cizgi: rgb(165 180 252 / .3);
    --altin: #fbbf24; --arti: #4ade80; --eksi: #f87171;
    --altin-metin: #fcd34d; --altin-soluk: rgb(251 191 36 / .12);
    --golge: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .3);
    --golge-ekran: 0 2px 8px rgb(0 0 0 / .4), 0 40px 90px rgb(0 0 0 / .55);
  }
}
:root[data-tema="karanlik"] {
  color-scheme: dark;
  --zemin: #090c18; --yuzey: #10142a; --yuzey-2: #161b36;
  --cizgi: rgb(226 232 240 / .08); --cizgi-2: rgb(226 232 240 / .15);
  --metin: #e2e8f0; --metin-2: #a9b3c8; --metin-3: #939db4;
  --vurgu: #818cf8; --vurgu-koyu: #4f46e5; --vurgu-metin: #a5b4fc;
  --vurgu-soluk: rgb(129 140 248 / .12); --vurgu-cizgi: rgb(165 180 252 / .3);
  --altin: #fbbf24; --arti: #4ade80; --eksi: #f87171;
  --altin-metin: #fcd34d; --altin-soluk: rgb(251 191 36 / .12);
  --golge: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .3);
  --golge-ekran: 0 2px 8px rgb(0 0 0 / .4), 0 40px 90px rgb(0 0 0 / .55);
}

/* Bölüm tonları: her bölümün karosu ve etiketi kendi renginde (Dawayar'ın
   denetlenmiş üçlüleri). -a: koyu zeminde açık ton; -m: açık zeminde YAZI
   tonu (hepsi beyazda 4,5:1'in üstünde). */
.ton-hesap { --ton: 79 70 229; --ton-a: 129 140 248; --ton-m: 67 56 202; }
.ton-ruzname { --ton: 8 145 178; --ton-a: 34 211 238; --ton-m: 14 116 144; }
.ton-stok { --ton: 217 119 6; --ton-a: 251 191 36; --ton-m: 168 80 8; }
.ton-satis { --ton: 22 163 74; --ton-a: 74 222 128; --ton-m: 21 128 61; }
.ton-havale { --ton: 124 58 237; --ton-a: 167 139 250; --ton-m: 109 40 217; }
.ton-doviz { --ton: 225 29 72; --ton-a: 251 113 133; --ton-m: 190 18 60; }
.ton-rapor { --ton: 2 132 199; --ton-a: 56 189 248; --ton-m: 3 105 161; }
.ton-ayar { --ton: 71 85 105; --ton-a: 148 163 184; --ton-m: 71 85 105; }
.ton-turuncu { --ton: 234 88 12; --ton-a: 251 146 60; --ton-m: 194 65 12; }

/* ---------- Temel ---------- */
.dil-bekle body { visibility: hidden; }
* { box-sizing: border-box; }
/* hidden her zaman kazanır: display veren bileşenler JS'nin gizlediğini
   yine gösteriyordu (Dawayar'da yaşandı). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-block-start: calc(var(--ust) + 16px); }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: var(--yazi); font-size: 16.5px; line-height: 1.85;
  text-rendering: optimizeLegibility;
}
:lang(en) body, body:lang(en) { line-height: 1.65; }
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: var(--vurgu-metin); }
h1, h2, h3, h4 { line-height: 1.35; margin: 0; }
:lang(en) h1, :lang(en) h2, :lang(en) h3 { letter-spacing: -.015em; line-height: 1.2; }
p, ul, ol, figure, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.kap { max-inline-size: var(--en); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .kap { padding-inline: 24px; } }
.bolum { padding-block: clamp(60px, 9vw, 112px); }
main { overflow-x: hidden; overflow-x: clip; }
.bolum--yuzey { background: var(--yuzey); border-block: 1px solid var(--cizgi); }
.gorunmez {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.simge { inline-size: 20px; block-size: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; border-radius: 6px; }
.atla {
  position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 10px; background: var(--yuzey); color: var(--metin);
  font-weight: 700; text-decoration: none; box-shadow: var(--golge);
}
.atla:focus { inset-block-start: 10px; }
/* Tutar ve kod gibi soldan sağa parçalar cümlenin yönünü bozmasın. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.say { font-variant-numeric: tabular-nums; }

/* ---------- Düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-block-size: 48px; padding: 11px 22px; border-radius: 12px;
  border: 1px solid var(--cizgi-2); background: var(--yuzey); color: var(--metin);
  font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s var(--egri), box-shadow .2s var(--egri), background-color .2s var(--egri), border-color .2s var(--egri);
}
.dugme:hover { border-color: var(--vurgu-cizgi); }
.dugme:active { transform: scale(.97); }
.dugme--asil { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); color: #fff; box-shadow: 0 6px 18px rgb(67 56 202 / .28); }
.dugme--asil:hover { background: #3730a3; border-color: #3730a3; }
.dugme--buyuk { min-block-size: 54px; padding: 13px 28px; font-size: 17px; }
.dugme--kucuk { min-block-size: 40px; padding: 7px 15px; font-size: 14.5px; border-radius: 10px; }
.dugme--tam { inline-size: 100%; }
/* Koyu bantta asıl düğme altın: gece mavisi üstünde çivit düğme kayboluyor.
   Yazı 12:1. */
.koyu .dugme--asil { background: #fcd34d; border-color: #fcd34d; color: #1f1300; box-shadow: 0 8px 26px rgb(252 211 77 / .25); }
.koyu .dugme--asil:hover { background: #fde68a; border-color: #fde68a; }
.koyu .dugme:not(.dugme--asil) { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .26); color: #fff; }
.koyu .dugme:not(.dugme--asil):hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .45); }

/* ---------- Koyu bant ---------- */
.koyu {
  color: #fff;
  background:
    radial-gradient(900px 520px at 85% -12%, rgb(129 140 248 / .28), transparent 62%),
    radial-gradient(700px 420px at 0% 30%, rgb(252 211 77 / .08), transparent 60%),
    linear-gradient(165deg, var(--koyu-1), var(--koyu-2) 58%, #0d1238);
}

/* ---------- Üst çubuk ---------- */
.ust {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: rgb(11 16 40 / .9); color: #fff;
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-block-end: 1px solid rgb(255 255 255 / .08);
}
.ust > .kap { display: flex; align-items: center; gap: 10px; min-block-size: var(--ust); }
.marka { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-inline-size: 0; }
.marka img { inline-size: 36px; block-size: 36px; border-radius: 9px; }
.marka b { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; }
.marka small { display: none; font-size: 12px; color: rgb(255 255 255 / .72); line-height: 1.2; white-space: nowrap; }
@media (min-width: 420px) { .marka small { display: block; } }
.ust__arac { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
/* Menü: genişte çubuğun içinde; darda «منو» düğmesiyle açılan çekmece.
   JS'siz menü her genişlikte çubuğun altında satır satır görünür. */
.menu { display: flex; flex-wrap: wrap; gap: 2px; order: 9; inline-size: 100%; padding-block-end: 8px; }
.menu a { padding: 8px 11px; border-radius: 10px; color: rgb(255 255 255 / .82); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.menu a:hover, .menu a[aria-current="page"] { background: rgb(255 255 255 / .08); color: #fff; }
.ust > .kap { flex-wrap: wrap; }
.menu-dugme { display: none; }
.js .menu { display: none; }
.js .menu.acik { display: flex; flex-direction: column; padding-block: 6px 14px; }
.js .menu.acik a { padding: 11px 12px; font-size: 16px; }
.js .menu-dugme {
  display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px; cursor: pointer;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); color: #fff;
}
@media (min-width: 1080px) {
  .ust > .kap { flex-wrap: nowrap; }
  .menu, .js .menu { display: flex; order: 0; inline-size: auto; padding: 0; margin-inline-start: 14px; flex-wrap: nowrap; }
  .js .menu-dugme { display: none; }
}
.ust .dugme--asil { display: none; }
@media (min-width: 600px) { .ust .dugme--asil { display: inline-flex; } }
/* JS'siz çalışmayan düğmeler JS'siz görünmez. */
.dil, .tema-dugme { display: none; }
.js .dil { display: inline-flex; }
.js .tema-dugme { display: inline-grid; }
.dil {
  padding: 3px; gap: 2px; border-radius: 11px;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12);
}
.dil button {
  min-block-size: 34px; min-inline-size: 40px; padding: 2px 9px; border: 0; border-radius: 8px;
  background: transparent; color: rgb(255 255 255 / .8); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.dil button:hover { color: #fff; background: rgb(255 255 255 / .08); }
.dil button[aria-pressed="true"] { background: #fcd34d; color: #1f1300; }
.tema-dugme {
  place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px; cursor: pointer;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); color: #fff;
}
.tema-dugme:hover, .menu-dugme:hover { background: rgb(255 255 255 / .14); }
.tema-dugme .gunes { display: none; }
:root[data-tema="karanlik"] .tema-dugme .gunes { display: block; }
:root[data-tema="karanlik"] .tema-dugme .ay { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="aydinlik"]) .tema-dugme .gunes { display: block; }
  :root:not([data-tema="aydinlik"]) .tema-dugme .ay { display: none; }
}
@media (max-width: 380px) { .dil button { min-inline-size: 34px; padding-inline: 6px; } }

/* ---------- Kahraman ---------- */
.kahraman { position: relative; overflow: hidden; padding-block: clamp(44px, 7vw, 84px) 0; }
.kahraman::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: clamp(56px, 13vw, 190px); background: var(--zemin);
}
.kahraman > .kap { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.rozet {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: 999px;
  background: rgb(252 211 77 / .1); border: 1px solid rgb(252 211 77 / .3); color: #fde68a;
  font-size: 13.5px; font-weight: 700;
}
.rozet::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 0 4px rgb(252 211 77 / .18); }
.kahraman h1 { margin-block-start: 22px; display: grid; gap: 4px; }
.kahraman h1 .ad { font-size: clamp(46px, 9vw, 84px); font-weight: 900; line-height: 1.15; }
.kahraman h1 .slogan {
  font-size: clamp(22px, 3.6vw, 34px); font-weight: 800; line-height: 1.4;
  background: linear-gradient(90deg, #c7d2fe, #fde68a 60%, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kahraman__alt { margin-block-start: 18px; max-inline-size: 62ch; color: rgb(255 255 255 / .82); font-size: clamp(16.5px, 2vw, 19px); }
.eylemler { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 30px; }
.kahraman__not { margin-block-start: 16px; font-size: 14px; color: rgb(255 255 255 / .72); max-inline-size: 60ch; }
.kahraman__gorsel { position: relative; inline-size: 100%; margin-block-start: clamp(36px, 6vw, 60px); padding-block-end: clamp(18px, 4vw, 44px); }
.gorsel-not { margin-block: -8px 22px; color: var(--metin-3); font-size: 13px; text-align: center; }

/* ---------- Pencere: uygulama taslağının çerçevesi ---------- */
.pencere {
  position: relative; border-radius: clamp(10px, 1.6vw, 18px); overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--cizgi-2); box-shadow: var(--golge-ekran);
  padding-block-start: clamp(20px, 2.6vw, 30px); text-align: start; color: var(--metin);
}
.pencere::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: clamp(20px, 2.6vw, 30px);
  background: var(--yuzey-2); border-block-end: 1px solid var(--cizgi);
}
.pencere::after {
  content: ''; position: absolute; inset-block-start: calc(clamp(20px, 2.6vw, 30px) / 2 - 4px); inset-inline-end: 14px;
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: #f87171;
  box-shadow: 14px 0 0 #fbbf24, 28px 0 0 #34d399;
}
[dir="ltr"] .pencere::after { inset-inline-end: auto; inset-inline-start: 14px; }
.koyu .pencere { border-color: rgb(255 255 255 / .14); }

/* Taslak ekran: gerçek görüntü değil, HTML ile çizilmiş ve çevrilen bir
   önizleme (uygulama henüz yok). role="img" + aria-label: ekran okuyucu
   içindeki sahte satırları tek tek okumaz. */
.ekran { display: grid; grid-template-columns: 1fr; font-size: 13px; line-height: 1.6; }
@media (min-width: 760px) { .ekran { grid-template-columns: 188px 1fr; } }
.ekran__yan { display: none; padding: 14px 10px; background: var(--yuzey-2); border-inline-end: 1px solid var(--cizgi); }
@media (min-width: 760px) { .ekran__yan { display: block; } }
.ekran__logo { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; font-weight: 800; font-size: 14px; }
.ekran__logo img { inline-size: 26px; block-size: 26px; border-radius: 7px; }
.ekran__yan ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.ekran__yan li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; color: var(--metin-2); font-weight: 600; white-space: nowrap; }
.ekran__yan li .simge { inline-size: 16px; block-size: 16px; color: rgb(var(--ton)); }
.ekran__yan li.aktif { background: var(--yuzey); color: var(--metin); box-shadow: var(--golge); }
.ekran__ana { padding: clamp(12px, 2vw, 20px); display: grid; gap: 12px; min-inline-size: 0; }
.ekran__ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ekran__ust b { font-size: 15px; font-weight: 800; }
.ekran__ust span { color: var(--metin-3); font-size: 12px; }
.kpiler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 980px) { .kpiler { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 10px 12px; border-radius: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); min-inline-size: 0; }
.kpi span { display: block; color: var(--metin-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { display: block; font-size: clamp(15px, 1.6vw, 19px); font-weight: 900; line-height: 1.35; color: rgb(var(--ton-m)); }
.kpi small { color: var(--metin-3); font-size: 11px; }
.ekran__satir { display: grid; gap: 12px; }
@media (min-width: 980px) { .ekran__satir { grid-template-columns: 1.15fr 1fr; } }
.ekran__kutu { padding: 12px; border-radius: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); min-inline-size: 0; }
.ekran__kutu > b { display: block; font-size: 12.5px; font-weight: 800; margin-block-end: 6px; }
.grafik { inline-size: 100%; block-size: auto; display: block; }
/* Zaman ekseni sağdan sola yazıda ters: bugün solda değil, başta (sağda). */
[dir="rtl"] .grafik--zaman { transform: scaleX(-1); }
.grafik .alan { fill: rgb(79 70 229 / .14); }
.grafik .cizgi-g { fill: none; stroke: var(--vurgu); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.grafik .cizgi-k { fill: none; stroke: #f59e0b; stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; }
.grafik .izgara-c { stroke: var(--cizgi); stroke-width: 1; }
.grafik .sutun { fill: rgb(var(--ton, 79 70 229) / .8); }
.grafik .sutun--b { fill: rgb(var(--ton, 79 70 229) / .3); }
.liste { list-style: none; padding: 0; display: grid; }
.liste li { display: flex; align-items: center; gap: 10px; padding-block: 7px; border-block-start: 1px solid var(--cizgi); min-inline-size: 0; }
.liste li:first-child { border-block-start: 0; }
.liste .nokta { inline-size: 26px; block-size: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: rgb(var(--ton) / .12); color: rgb(var(--ton-m)); }
.liste .nokta .simge { inline-size: 14px; block-size: 14px; }
.liste .ad { flex: 1; min-inline-size: 0; }
.liste .ad b { display: block; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .ad small { display: block; color: var(--metin-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tutar { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tutar--arti { color: var(--arti); }
.tutar--eksi { color: var(--eksi); }
.kur { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--yuzey-2); color: var(--metin-2); font-size: 10.5px; font-weight: 700; margin-inline-start: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="aydinlik"]) .kpi b, :root:not([data-tema="aydinlik"]) .liste .nokta { color: rgb(var(--ton-a)); }
}
:root[data-tema="karanlik"] .kpi b, :root[data-tema="karanlik"] .liste .nokta { color: rgb(var(--ton-a)); }
@media (max-width: 759px) { .ekran .gizle-dar { display: none; } }

/* Telefon taslağı: kahramanda pencerenin köşesine biner. */
.telefon {
  position: absolute; z-index: 2; inset-block-end: 0; inset-inline-end: -1%;
  inline-size: clamp(150px, 24%, 270px); padding: clamp(4px, .55vw, 7px);
  border-radius: clamp(18px, 2.6vw, 34px); background: #070a18;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), var(--golge-ekran);
}
@media (max-width: 759px) { .telefon { display: none; } }
.telefon__ekran {
  border-radius: clamp(14px, 2.1vw, 28px); overflow: hidden; background: var(--zemin);
  font-size: 11.5px; line-height: 1.55; text-align: start; color: var(--metin);
}
.telefon__bas { padding: 16px 12px 12px; background: linear-gradient(160deg, #312e81, #1b1f52); color: #fff; }
.telefon__bas small { display: block; color: rgb(255 255 255 / .72); font-size: 10.5px; }
.telefon__bas b { display: block; font-size: 13.5px; font-weight: 800; }
.bakiyeler { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-block-start: 10px; }
.bakiyeler div { padding: 6px 8px; border-radius: 9px; background: rgb(255 255 255 / .1); }
.bakiyeler span { display: block; font-size: 9.5px; color: rgb(255 255 255 / .75); }
.bakiyeler strong { font-size: 13px; font-weight: 900; }
.telefon .liste { padding: 4px 12px; }
.telefon .liste li { padding-block: 6px; }
.telefon__dugme { margin: 6px 12px 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; border-radius: 10px; background: #15803d; color: #fff; font-weight: 800; font-size: 11px; }
.telefon__dugme .simge { inline-size: 14px; block-size: 14px; }

/* ---------- Güvence şeridi ---------- */
.guven { padding-block: clamp(36px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.guven ul { list-style: none; padding: 0; display: grid; gap: 14px; }
@media (min-width: 620px) { .guven ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .guven ul { grid-template-columns: repeat(3, 1fr); } }
.guven li {
  display: flex; gap: 14px; padding: 20px; border-radius: var(--r);
  background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge);
}
.guven .karo { flex-shrink: 0; }
.guven b { display: block; font-size: 16.5px; font-weight: 800; line-height: 1.5; }
.guven p { margin-block-start: 4px; color: var(--metin-2); font-size: 14.5px; line-height: 1.75; }

.karo {
  display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 13px;
  background: rgb(var(--ton, 79 70 229) / .12); color: rgb(var(--ton-m, 67 56 202));
  border: 1px solid rgb(var(--ton, 79 70 229) / .2);
}
.karo .simge { inline-size: 23px; block-size: 23px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="aydinlik"]) .karo { background: rgb(var(--ton-a, 129 140 248) / .13); color: rgb(var(--ton-a, 129 140 248)); border-color: rgb(var(--ton-a, 129 140 248) / .22); }
}
:root[data-tema="karanlik"] .karo { background: rgb(var(--ton-a, 129 140 248) / .13); color: rgb(var(--ton-a, 129 140 248)); border-color: rgb(var(--ton-a, 129 140 248) / .22); }

/* ---------- Bölüm başlığı ---------- */
.bas { max-inline-size: 64ch; margin-block-end: clamp(32px, 5vw, 48px); }
.bas--orta { margin-inline: auto; text-align: center; }
.etiket { display: inline-block; color: var(--vurgu-metin); font-weight: 800; font-size: 14px; }
:lang(en) .etiket { letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; }
.bas h2, .vitrin h2 { margin-block-start: 6px; font-size: clamp(26px, 4vw, 40px); font-weight: 900; }
.bas p { margin-block-start: 12px; color: var(--metin-2); font-size: 17.5px; }

/* ---------- Özellik ızgarası ---------- */
.izgara { list-style: none; padding: 0; display: grid; gap: 14px; }
@media (min-width: 620px) { .izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .izgara { grid-template-columns: repeat(4, 1fr); } }
.kart {
  position: relative; padding: 22px; border-radius: var(--r);
  background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge);
  transition: translate .25s var(--egri), border-color .25s var(--egri), box-shadow .25s var(--egri);
}
.kart:hover { translate: 0 -3px; border-color: rgb(var(--ton) / .45); }
.kart h3 { margin-block-start: 14px; font-size: 18px; font-weight: 800; }
.kart p { margin-block-start: 6px; color: var(--metin-2); font-size: 14.5px; line-height: 1.8; }
@media (max-width: 619px) {
  .kart { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px; }
  .kart .karo { grid-row: span 2; }
  .kart h3 { margin-block-start: 2px; }
}

/* ---------- Vitrin: metin + taslak ekran ---------- */
.vitrinler { display: grid; gap: clamp(72px, 10vw, 120px); }
.vitrin { display: grid; gap: 34px; align-items: center; }
@media (min-width: 980px) {
  .vitrin { grid-template-columns: 5fr 6fr; gap: 56px; }
  .vitrin--ters { grid-template-columns: 6fr 5fr; }
  .vitrin--ters .vitrin__metin { order: 2; }
}
.vitrin .etiket { color: rgb(var(--ton-m)); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="aydinlik"]) .vitrin .etiket { color: rgb(var(--ton-a)); } }
:root[data-tema="karanlik"] .vitrin .etiket { color: rgb(var(--ton-a)); }
.vitrin__metin > p { margin-block-start: 12px; color: var(--metin-2); font-size: 17px; }
.tikler { list-style: none; padding: 0; margin-block-start: 22px; display: grid; gap: 12px; }
.tikler li { display: flex; gap: 12px; align-items: flex-start; color: var(--metin-2); font-size: 15.5px; }
.tikler .simge { inline-size: 18px; block-size: 18px; margin-block-start: 6px; color: var(--vurgu); stroke-width: 2.6; }
.tikler b { color: var(--metin); font-weight: 800; }
.vitrin .pencere .ekran__ana { padding: clamp(14px, 2.2vw, 22px); }
.tablo { inline-size: 100%; border-collapse: collapse; font-size: 12.5px; }
.tablo th { color: var(--metin-3); font-weight: 700; font-size: 11.5px; text-align: start; padding: 6px 8px; border-block-end: 1px solid var(--cizgi-2); white-space: nowrap; }
.tablo td { padding: 7px 8px; border-block-end: 1px solid var(--cizgi); white-space: nowrap; }
.tablo tr:last-child td { border-block-end: 0; }
.tablo .sayi { text-align: end; }
.tablo .soluk { color: var(--metin-3); }
.soluk { color: var(--metin-3); }
/* Yön oku (→): sağdan sola yazıda sola bakar. */
.yon-ok { inline-size: 14px; block-size: 14px; vertical-align: -2px; margin-inline: 5px; color: var(--metin-3); }
[dir="rtl"] .yon-ok { transform: scaleX(-1); }
.dugme .yon-ok { inline-size: 18px; block-size: 18px; margin: 0; color: inherit; }
.cip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: linear-gradient(rgb(var(--ton) / .12), rgb(var(--ton) / .12)) var(--yuzey); color: rgb(var(--ton-m)); white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="aydinlik"]) .cip { color: rgb(var(--ton-a)); } }
:root[data-tema="karanlik"] .cip { color: rgb(var(--ton-a)); }
.kaydir { overflow-x: auto; scrollbar-width: thin; }
.paralar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.para-kart { padding: 12px; border-radius: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.para-kart span { display: flex; align-items: center; gap: 6px; color: var(--metin-3); font-size: 11.5px; font-weight: 700; }
.para-kart b { display: block; font-size: 17px; font-weight: 900; line-height: 1.4; }
.bayrak { min-inline-size: 22px; block-size: 20px; padding-inline: 5px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 900; font-style: normal; letter-spacing: .03em; color: #fff; background: rgb(var(--ton-m)); }
.islem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--yuzey-2); border: 1px dashed var(--cizgi-2); flex-wrap: wrap; }
.islem b { font-weight: 800; }
.islem .ok { color: var(--metin-3); }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; }
.disa { display: flex; flex-wrap: wrap; gap: 8px; }
.disa > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--cizgi-2); background: var(--yuzey); font-weight: 700; font-size: 11.5px; }
.disa > span .simge { inline-size: 14px; block-size: 14px; }
.disa .yesil { background: #15803d; border-color: #15803d; color: #fff; }

/* ---------- Kimler için ---------- */
.kimler { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kimler li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--yuzey); border: 1px solid var(--cizgi); font-weight: 700; }
.kimler .karo { inline-size: 40px; block-size: 40px; border-radius: 11px; }
.kimler .karo .simge { inline-size: 20px; block-size: 20px; }
.kardes {
  margin-block-start: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 18px 22px; border-radius: var(--r-b); background: var(--vurgu-soluk); border: 1px solid var(--vurgu-cizgi);
}
.kardes p { flex: 1 1 320px; color: var(--metin-2); }
.kardes b { color: var(--metin); }

/* ---------- Adımlar ---------- */
.adimlar { list-style: none; padding: 0; display: grid; gap: 16px; counter-reset: adim; }
@media (min-width: 680px) { .adimlar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .adimlar { grid-template-columns: repeat(4, 1fr); } }
.adimlar > li { counter-increment: adim; position: relative; padding: 26px 22px 24px; border-radius: var(--r); background: var(--zemin); border: 1px solid var(--cizgi); }
.bolum:not(.bolum--yuzey) .adimlar > li { background: var(--yuzey); }
.adimlar > li::before {
  content: counter(adim, persian); display: grid; place-items: center;
  inline-size: 42px; block-size: 42px; border-radius: 12px; margin-block-end: 14px;
  background: var(--vurgu-koyu); color: #fff; font-weight: 900; font-size: 18px;
}
:lang(en) .adimlar > li::before { content: counter(adim); }
.adimlar h3 { font-size: 17.5px; font-weight: 800; }
.adimlar p { margin-block-start: 6px; color: var(--metin-2); font-size: 15px; }
.bolum-alt { margin-block-start: 26px; text-align: center; }

/* ---------- Videolar ---------- */
.videolar { list-style: none; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .videolar { grid-template-columns: repeat(3, 1fr); } }
.video {
  display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); color: inherit; text-decoration: none;
}
.video__afis {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background:
    radial-gradient(260px 160px at 80% 0%, rgb(129 140 248 / .4), transparent 70%),
    linear-gradient(160deg, var(--koyu-1), var(--koyu-2));
  color: #fff;
}
.video__afis b { position: absolute; inset-block-start: 12px; inset-inline-start: 14px; font-size: 13px; font-weight: 800; color: rgb(255 255 255 / .8); }
.video__oynat { display: grid; place-items: center; inline-size: 58px; block-size: 58px; border-radius: 50%; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .3); }
.video__oynat .simge { inline-size: 24px; block-size: 24px; fill: #fff; stroke: none; margin-inline-start: 3px; }
[dir="rtl"] .video__oynat .simge { margin-inline-start: 0; margin-inline-end: 3px; transform: scaleX(-1); }
.video__metin { padding: 16px 18px 18px; display: grid; gap: 6px; flex: 1; }
.video__metin h3 { font-size: 16.5px; font-weight: 800; }
.video__metin p { color: var(--metin-2); font-size: 14.5px; }
.video__durum { justify-self: start; margin-block-start: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--yuzey-2); color: var(--metin-3); }
a.video[href]:hover { border-color: var(--vurgu-cizgi); }
a.video[href] .video__durum { background: var(--vurgu-soluk); color: var(--vurgu-metin); }

/* ---------- Kurulum sekmeleri ---------- */
.kurulum { border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); overflow: hidden; }
.sekmeler { display: none; gap: 6px; padding: 8px; overflow-x: auto; background: var(--yuzey-2); border-block-end: 1px solid var(--cizgi); scrollbar-width: none; }
.sekmeler::-webkit-scrollbar { display: none; }
.js .sekmeler { display: flex; }
.sekme {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 46px; padding: 8px 16px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--metin-2); font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.sekme:hover { color: var(--metin); background: var(--yuzey); }
@media (max-width: 520px) { .sekme { padding-inline: 10px; } .sekme .simge { display: none; } }
.sekme[aria-selected="true"] { background: var(--yuzey); color: var(--vurgu-metin); border-color: var(--vurgu-cizgi); box-shadow: var(--golge); }
.pano { padding: clamp(24px, 4vw, 44px); display: grid; gap: 26px; }
@media (min-width: 860px) { .pano { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 44px; } }
.pano + .pano { border-block-start: 1px solid var(--cizgi); }
.pano h3 { font-size: clamp(20px, 2.6vw, 24px); font-weight: 900; }
.pano__aciklama { margin-block-start: 8px; color: var(--metin-2); }
.pano .dugme { margin-block-start: 20px; }
.pano__not { margin-block-start: 14px; color: var(--metin-3); font-size: 13.5px; }
.sirali { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.sirali li { counter-increment: s; position: relative; padding-inline-start: 42px; color: var(--metin-2); font-size: 15.5px; min-block-size: 30px; }
.sirali li::before {
  content: counter(s, persian); position: absolute; inset-inline-start: 0; inset-block-start: 1px;
  inline-size: 30px; block-size: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--vurgu-soluk); color: var(--vurgu-metin); border: 1px solid var(--vurgu-cizgi);
  font-weight: 800; font-size: 14px;
}
:lang(en) .sirali li::before { content: counter(s); }
.durum-not {
  display: flex; gap: 10px; align-items: flex-start; margin-block-start: 22px; padding: 14px 18px;
  border-radius: var(--r); background: var(--vurgu-soluk); border: 1px solid var(--vurgu-cizgi); color: var(--metin-2); font-size: 15px;
}
.durum-not .simge { margin-block-start: 5px; color: var(--vurgu-metin); }

/* ---------- Fiyat ----------
   Ücretli beş plan tek listede. Satır dar ekranda iki katlı (ad ve fiyat
   alt alta, düğme yanda), genişte tek sıra. */
.tarife { display: grid; gap: 16px; }
@media (min-width: 900px) { .tarife { grid-template-columns: 1fr 1.5fr; } }
.plan, .planlar-kutu { border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.plan { display: flex; flex-direction: column; padding: 26px; }
.plan--deneme { border-color: var(--vurgu); background: linear-gradient(180deg, var(--vurgu-soluk), var(--yuzey) 70%); }
.plan h3, .planlar-kutu h3 { font-size: 21px; font-weight: 900; }
.plan__sure { margin-block-start: 4px; color: var(--metin-2); font-size: 15px; }
.plan__fiyat { margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px dashed var(--cizgi-2); }
.plan .tikler { flex-grow: 1; align-content: start; margin-block: 14px 24px; }
.plan__fiyat b { display: block; color: var(--vurgu-metin); font-size: 30px; font-weight: 900; line-height: 1.3; }
.planlar-kutu { padding: 26px 26px 12px; }
.planlar-kutu > p { margin-block-start: 4px; color: var(--metin-2); font-size: 15px; }
.planlar { list-style: none; padding: 0; margin-block-start: 14px; }
.plan-satir {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad dugme" "fiyat dugme";
  align-items: center; gap: 4px 14px; padding-block: 14px; border-block-start: 1px solid var(--cizgi);
}
.plan-satir__ad { grid-area: ad; }
.plan-satir__ad b { font-size: 17px; font-weight: 800; line-height: 1.5; }
.plan-satir__ad span { display: block; color: var(--metin-2); font-size: 14px; line-height: 1.6; }
.plan-rozet {
  display: inline-block; margin-inline-start: 8px; padding-inline: 9px; border-radius: 999px;
  background: var(--altin-soluk); color: var(--altin-metin); font-size: 12.5px; font-weight: 800; line-height: 1.75; vertical-align: 1px;
}
.plan-satir__fiyat { grid-area: fiyat; }
.plan-satir__fiyat b { display: block; color: var(--vurgu-metin); font-size: 18px; font-weight: 900; line-height: 1.45; white-space: nowrap; }
.plan-satir__fiyat small { display: block; color: var(--metin-2); font-size: 13px; line-height: 1.5; white-space: nowrap; }
.plan-satir > .dugme { grid-area: dugme; }
@media (min-width: 560px) {
  .plan-satir { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "ad fiyat dugme"; }
  .plan-satir__fiyat { text-align: end; }
}
.ortak {
  margin-block-start: 22px; padding: 22px 24px; border-radius: var(--r-b);
  background: var(--yuzey); border: 1px solid var(--cizgi);
}
.ortak h3 { font-size: 17px; font-weight: 800; }
.ortak ul { list-style: none; padding: 0; margin-block-start: 12px; display: grid; gap: 8px 22px; }
@media (min-width: 720px) { .ortak ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ortak ul { grid-template-columns: repeat(3, 1fr); } }
.ortak li { display: flex; gap: 10px; align-items: flex-start; color: var(--metin-2); font-size: 15px; }
.ortak .simge { inline-size: 18px; block-size: 18px; margin-block-start: 5px; color: var(--vurgu); stroke-width: 2.6; }
.ortak__not { margin-block-start: 14px; color: var(--metin-2); font-size: 14.5px; }

/* ---------- Sorular ---------- */
.sorular { max-inline-size: 860px; margin-inline: auto; display: grid; gap: 12px; }
details.soru { border-radius: var(--r); background: var(--zemin); border: 1px solid var(--cizgi); }
.bolum:not(.bolum--yuzey) details.soru { background: var(--yuzey); }
details.soru[open] { border-color: var(--vurgu-cizgi); }
details.soru summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  min-block-size: 60px; padding: 14px 20px; font-weight: 800; font-size: 16.5px; border-radius: var(--r);
}
details.soru summary::-webkit-details-marker { display: none; }
details.soru summary .arti {
  margin-inline-start: auto; flex-shrink: 0; display: grid; place-items: center;
  inline-size: 30px; block-size: 30px; border-radius: 9px; background: var(--yuzey); color: var(--metin-2);
  border: 1px solid var(--cizgi); transition: transform .25s var(--egri);
}
details.soru[open] summary .arti { transform: rotate(45deg); color: var(--vurgu-metin); }
.cevap { padding: 0 20px 20px; color: var(--metin-2); font-size: 15.5px; }
.cevap p + p { margin-block-start: 10px; }

/* ---------- Ekip ---------- */
.ekip { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); max-inline-size: 980px; margin-inline: auto; }
.uye { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 24px; border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
/* Fotoğraflar altın halkalı kare kesimler (img/ekip-*.webp, 288 px): daire kırpılınca
   halkanın dışındaki siyah köşeler kalkar; zemin yalnız yüklenene kadar görünür. */
.uye__foto {
  inline-size: 96px; block-size: 96px; border-radius: 50%; object-fit: cover;
  background: #0b1028; box-shadow: 0 8px 24px rgb(15 23 42 / .18);
}
.uye h3 { font-size: 19px; font-weight: 900; }
.uye__rol { color: var(--vurgu-metin); font-weight: 700; font-size: 14.5px; }
.uye p { margin-block-start: 6px; color: var(--metin-2); font-size: 15px; }
.uye__bag { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.uye__bag a {
  display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px;
  border: 1px solid var(--cizgi-2); color: var(--metin-2);
}
.uye__bag a:hover { color: var(--vurgu-metin); border-color: var(--vurgu-cizgi); }
@media (max-width: 480px) { .uye { grid-template-columns: 1fr; justify-items: center; text-align: center; } .uye__bag { justify-content: center; } }

/* ---------- İletişim ---------- */
.iletisim-izgara { display: grid; gap: 18px; }
@media (min-width: 900px) { .iletisim-izgara { grid-template-columns: 1fr 1.25fr; align-items: start; } }
.kanallar { display: grid; gap: 10px; }
.kanal {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r);
  background: var(--yuzey); border: 1px solid var(--cizgi); color: inherit; text-decoration: none; box-shadow: var(--golge);
}
.kanal:hover { border-color: var(--vurgu-cizgi); }
.kanal b { display: block; font-weight: 800; }
.kanal [data-iletisim-deger] { display: block; color: var(--metin-2); font-size: 14.5px; }
.kanal .karo { inline-size: 44px; block-size: 44px; }
.form { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.form h3 { font-size: 19px; font-weight: 900; }
.form > p { color: var(--metin-2); font-size: 14.5px; }
.alan { display: grid; gap: 6px; }
.alan label { font-weight: 700; font-size: 14.5px; }
.alan input, .alan textarea, .alan select {
  inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--cizgi-2); background: var(--zemin); color: var(--metin);
}
.alan textarea { min-block-size: 110px; resize: vertical; }
.alan input:focus, .alan textarea:focus, .alan select:focus { outline: 3px solid var(--vurgu-cizgi); border-color: var(--vurgu); }
.iki-alan { display: grid; gap: 14px; }
@media (min-width: 560px) { .iki-alan { grid-template-columns: 1fr 1fr; } }
.form__not { color: var(--metin-3); font-size: 13px; }
.form-js { display: none; }
.js .form-js { display: grid; }

/* ---------- Kapanış ---------- */
.kapanis { border-radius: var(--r-b); padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 56px); text-align: center; overflow: hidden; }
.kapanis h2 { font-size: clamp(27px, 4.2vw, 42px); font-weight: 900; }
.kapanis p { margin-block-start: 12px; color: rgb(255 255 255 / .82); max-inline-size: 58ch; margin-inline: auto; font-size: 17px; }

/* ---------- Alt bilgi ---------- */
footer { background: var(--yuzey); border-block-start: 1px solid var(--cizgi); }
.ayak { display: grid; gap: 28px; padding-block: 40px 28px; }
@media (min-width: 860px) { .ayak { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.ayak .marka { color: var(--metin); }
.ayak .marka small { color: var(--metin-3); display: block; }
.ayak__metin { margin-block-start: 12px; color: var(--metin-2); font-size: 14.5px; max-inline-size: 40ch; }
.ayak h2 { font-size: 15px; font-weight: 800; margin-block-end: 8px; }
.ayak ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.ayak ul a { display: inline-block; padding-block: 5px; color: var(--metin-2); text-decoration: none; font-size: 14.5px; }
.ayak ul a:hover { color: var(--vurgu-metin); }
.sosyal { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 14px; }
.sosyal a { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px; border: 1px solid var(--cizgi-2); color: var(--metin-2); }
.sosyal a:hover { color: var(--vurgu-metin); border-color: var(--vurgu-cizgi); }
.ayak__alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 18px 26px; border-block-start: 1px solid var(--cizgi); color: var(--metin-3); font-size: 13.5px; }

/* ---------- Alt sayfalar: başlık bandı ---------- */
.sayfa-bas { padding-block: clamp(40px, 6vw, 72px); text-align: center; }
.sayfa-bas h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 900; margin-block-start: 12px; }
.sayfa-bas p { margin: 14px auto 0; max-inline-size: 62ch; color: rgb(255 255 255 / .82); font-size: clamp(16px, 2vw, 18.5px); }
.kirinti { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 14px; color: rgb(255 255 255 / .7); }
.kirinti a { color: rgb(255 255 255 / .85); }

/* ---------- Rehber ---------- */
.rehber { display: grid; gap: 32px; }
@media (min-width: 980px) { .rehber { grid-template-columns: 250px 1fr; align-items: start; } }
.icindekiler { padding: 18px; border-radius: var(--r); background: var(--yuzey); border: 1px solid var(--cizgi); }
@media (min-width: 980px) { .icindekiler { position: sticky; inset-block-start: calc(var(--ust) + 20px); } }
.icindekiler h2 { font-size: 15px; font-weight: 800; margin-block-end: 6px; }
.icindekiler ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 2px; color: var(--metin-3); list-style: persian; }
:lang(en) .icindekiler ol { list-style: decimal; }
.icindekiler a { display: inline-block; padding-block: 4px; color: var(--metin-2); text-decoration: none; font-size: 14.5px; }
.icindekiler a:hover { color: var(--vurgu-metin); }
.belge { display: grid; gap: 22px; min-inline-size: 0; }
.belge-kart { padding: clamp(20px, 3vw, 30px); border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); }
.belge-kart > .karo { margin-block-end: 12px; }
.belge-kart h2 { font-size: clamp(21px, 2.8vw, 26px); font-weight: 900; }
.belge-kart > p { margin-block-start: 8px; color: var(--metin-2); }
.belge-kart .sirali { margin-block-start: 16px; }
.belge-kart h3 { margin-block-start: 18px; font-size: 16.5px; font-weight: 800; }
.ipucu { margin-block-start: 16px; padding: 12px 16px; border-radius: 12px; background: var(--vurgu-soluk); border-inline-start: 4px solid var(--vurgu); color: var(--metin-2); font-size: 15px; }
.ipucu b { color: var(--metin); }

/* ---------- Araçlar ---------- */
.araclar { display: grid; gap: 18px; }
@media (min-width: 980px) { .araclar { grid-template-columns: 1fr 1fr; } .arac--genis { grid-column: 1 / -1; } }
.arac { padding: clamp(20px, 3vw, 28px); border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); min-inline-size: 0; }
.arac__bas { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.arac__bas h2 { font-size: 19px; font-weight: 900; }
.arac__bas small { display: block; color: var(--metin-3); font-size: 13px; }
.saat { font-size: clamp(40px, 7vw, 64px); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.saat-alt { margin-block-start: 6px; color: var(--metin-2); }
.takvimler { list-style: none; padding: 0; margin-block-start: 18px; display: grid; gap: 10px; }
.takvimler li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--zemin); border: 1px solid var(--cizgi); }
.takvimler span { color: var(--metin-3); font-size: 13.5px; font-weight: 700; }
.takvimler b { font-size: 16.5px; font-weight: 800; text-align: end; }
.arac__not { margin-block-start: 12px; color: var(--metin-3); font-size: 13px; }
.arac__not a { color: inherit; }
.kurlar { inline-size: 100%; border-collapse: collapse; }
.kurlar th { color: var(--metin-3); font-weight: 700; font-size: 13px; text-align: start; padding: 8px 10px; border-block-end: 1px solid var(--cizgi-2); }
.kurlar td { padding: 10px; border-block-end: 1px solid var(--cizgi); }
.kurlar .sayi { text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.kurlar .kod { color: var(--metin-3); font-size: 12.5px; font-weight: 700; }
.cevirici { display: grid; gap: 12px; margin-block-start: 18px; padding: 16px; border-radius: var(--r); background: var(--zemin); border: 1px solid var(--cizgi); }
@media (min-width: 640px) { .cevirici { grid-template-columns: 1fr 1fr 1fr; align-items: end; } }
.cevirici__sonuc { grid-column: 1 / -1; font-size: 19px; font-weight: 900; }
.yukleniyor { color: var(--metin-3); }
.hata-kutu { padding: 14px 16px; border-radius: 12px; background: rgb(225 29 72 / .07); border: 1px solid rgb(225 29 72 / .25); color: var(--metin-2); display: grid; gap: 10px; justify-items: start; }
.hava-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hava-simdi { display: flex; align-items: center; gap: 14px; }
.hava-simdi .hava-simge { inline-size: 64px; block-size: 64px; }
.hava-derece { font-size: 44px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.hava-durum { color: var(--metin-2); font-weight: 700; }
.hava-ayrinti { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--metin-2); font-size: 14.5px; }
.gunler { list-style: none; padding: 0; margin-block-start: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.gunler li { padding: 12px 8px; border-radius: 12px; background: var(--zemin); border: 1px solid var(--cizgi); text-align: center; display: grid; gap: 4px; justify-items: center; }
.gunler b { font-size: 14px; font-weight: 800; }
.gunler .hava-simge { inline-size: 34px; block-size: 34px; }
.gunler span { font-size: 13.5px; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.hava-simge { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hava-simge .gunes-y { stroke: #f59e0b; fill: rgb(251 191 36 / .25); }
.hava-simge .bulut-y { stroke: var(--metin-2); fill: var(--yuzey); }
.hava-simge .yagis-y { stroke: #0284c7; }
.hava-simge .kar-y { stroke: #38bdf8; }
.hava-simge .simsek-y { stroke: #eab308; fill: rgb(234 179 8 / .3); }
.hava-simge .sis-y { stroke: var(--metin-3); }
.hava-simge .ay-y { stroke: #6366f1; fill: rgb(129 140 248 / .2); }
.programlar { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.program { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--zemin); border: 1px solid var(--cizgi); }
.program > div { flex: 1; min-inline-size: 0; }
.program b { display: block; font-weight: 800; }
.program span { display: block; color: var(--metin-2); font-size: 13.5px; }
.js-yok { padding: 14px 16px; border-radius: 12px; background: var(--vurgu-soluk); color: var(--metin-2); }
.js .js-yok { display: none; }

/* ---------- Hukuki metin ---------- */
.metin { max-inline-size: 760px; margin-inline: auto; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-b); background: var(--yuzey); border: 1px solid var(--cizgi); }
.metin h2 { font-size: 20px; font-weight: 900; margin-block-start: 26px; }
.metin h2:first-of-type { margin-block-start: 0; }
.metin p, .metin li { color: var(--metin-2); }
.metin p { margin-block-start: 10px; }
.metin ul { margin-block-start: 10px; padding-inline-start: 22px; display: grid; gap: 6px; }
.metin__tarih { color: var(--metin-3); font-size: 14px; margin-block-end: 18px; }

/* ---------- 404 ---------- */
.yok { min-block-size: 100vh; display: grid; place-items: center; text-align: center; padding-block: 60px; }
.yok h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 900; }
.yok p { margin-block-start: 10px; color: rgb(255 255 255 / .8); }
.yok .eylemler { justify-content: center; }

/* ---------- Kaydırınca beliren ----------
   Gizleme yalnız `hareket` sınıfıyla: o sınıfı betik gözlemciyi kurduktan
   SONRA koyar. Betik düşerse ya da az hareket isteniyorsa hiçbir şey
   gizlenmez — içerik hiçbir durumda kaybolmaz. */
.hareket .bit { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--egri), transform .6s var(--egri), translate .25s var(--egri), border-color .25s var(--egri); }
.hareket .bit.gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hareket .bit { opacity: 1; transform: none; }
  .kart:hover { translate: none; }
  .dugme:active { transform: none; }
}
@media print {
  .ust, .sekmeler, .tema-dugme, .dil, .menu-dugme { display: none !important; }
  .pano[hidden] { display: grid !important; }
  .hareket .bit { opacity: 1; transform: none; }
  .koyu { color: #000; background: none; }
}
.yok__logo { margin: 0 auto 18px; border-radius: 18px; }