/* HostGemy stil.css
   Sira: belirtecler, koyu tema, sifirlama, tipografi, yerlesim, bilesenler, hareket, azaltilmis hareket.
   Kural: hover yalniz renk, kenar ve opaklik degistirir. Golge patlamasi, glow, buyume yok. */

/* 1. Belirtecler */
:root {
  color-scheme: light;
  --zemin: #F4F6F6;
  --yuzey: #FFFFFF;
  --yuzey-2: #EAF0EE;
  --metin: #14201E;
  --metin-2: #56645F;
  --metin-3: #64726D;
  --kenar: #D5DCDA;
  --kenar-guclu: #7F8D89;
  --vurgu: #0C6B64;
  --vurgu-hover: #095750;
  --vurgu-yumusak: #DCEFEB;
  --vurgu-ustu: #FFFFFF;
  --basari: #1B7A3A;
  --basari-yumusak: #DDF2E3;
  --uyari: #8F5400;
  --uyari-yumusak: #FBEBD0;
  --hata: #B3261E;
  --hata-yumusak: #F9DEDC;
  --golge: 0 1px 2px rgba(20, 32, 30, .06), 0 6px 20px rgba(20, 32, 30, .08);
  --perde: rgba(20, 32, 30, .4);

  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --yazi-kod: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --yazi-xs: .75rem;
  --yazi-s: .875rem;
  --yazi-m: 1rem;
  --yazi-l: 1.25rem;
  --yazi-xl: 1.625rem;
  --yazi-2xl: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);
  --satir-siki: 1.15;
  --satir-normal: 1.55;

  --b-1: .25rem;
  --b-2: .5rem;
  --b-3: .75rem;
  --b-4: 1rem;
  --b-6: 1.5rem;
  --b-8: 2rem;
  --b-12: 3rem;
  --b-16: 4rem;
  --b-24: 6rem;

  --kose-s: 6px;
  --kose-m: 10px;
  --kose-l: 16px;
  --kose-tam: 999px;

  --genislik: 1200px;
  --genislik-dar: 480px;
  --genislik-orta: 760px;
  --olcu: 62ch;
  --kenar-bosluk: var(--b-4);
  --ust-yukseklik: 64px;

  --sure-hizli: 150ms;
  --sure-normal: 250ms;
  --sure-yavas: 400ms;
  --egri: cubic-bezier(.2, 0, 0, 1);
  --egri-cikis: cubic-bezier(.4, 0, 1, 1);
}

/* 2. Koyu tema: sistem tercihi ya da data-tema */
[data-tema="koyu"] {
  color-scheme: dark;
  --zemin: #0E1413;
  --yuzey: #161D1C;
  --yuzey-2: #1E2725;
  --metin: #E6ECEA;
  --metin-2: #9DAAA6;
  --metin-3: #7E8C88;
  --kenar: #263230;
  --kenar-guclu: #5F706C;
  --vurgu: #4CC9BC;
  --vurgu-hover: #6AD6CB;
  --vurgu-yumusak: #143430;
  --vurgu-ustu: #08211E;
  --basari: #5CCB7E;
  --basari-yumusak: #12301B;
  --uyari: #E8B04B;
  --uyari-yumusak: #3A2A0A;
  --hata: #F28B82;
  --hata-yumusak: #3D1714;
  --golge: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .4);
  --perde: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;
    --zemin: #0E1413;
    --yuzey: #161D1C;
    --yuzey-2: #1E2725;
    --metin: #E6ECEA;
    --metin-2: #9DAAA6;
    --metin-3: #7E8C88;
    --kenar: #263230;
    --kenar-guclu: #5F706C;
    --vurgu: #4CC9BC;
    --vurgu-hover: #6AD6CB;
    --vurgu-yumusak: #143430;
    --vurgu-ustu: #08211E;
    --basari: #5CCB7E;
    --basari-yumusak: #12301B;
    --uyari: #E8B04B;
    --uyari-yumusak: #3A2A0A;
    --hata: #F28B82;
    --hata-yumusak: #3D1714;
    --golge: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .4);
    --perde: rgba(0, 0, 0, .6);
  }
}

@media (min-width: 640px) { :root { --kenar-bosluk: var(--b-6); } }
@media (min-width: 900px) { :root { --kenar-bosluk: var(--b-8); } }

/* 3. Sifirlama */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font: 400 var(--yazi-m) / var(--satir-normal) var(--yazi);
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 600; }
small { font-size: var(--yazi-s); }
hr { border: 0; border-top: 1px solid var(--kenar); margin: 0; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
::selection { background: var(--vurgu-yumusak); color: var(--metin); }
[hidden] { display: none !important; }

/* 4. Tipografi */
h1, .baslik-1 {
  font-size: var(--yazi-2xl);
  font-weight: 700;
  line-height: var(--satir-siki);
  letter-spacing: -.02em;
  text-wrap: balance;
}
h2, .baslik-2 {
  font-size: var(--yazi-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h3, .baslik-3 { font-size: var(--yazi-l); font-weight: 600; line-height: 1.3; }
h4, .baslik-4 { font-size: var(--yazi-m); font-weight: 600; line-height: 1.4; }
p { text-wrap: pretty; }
.ustyazi {
  font-size: var(--yazi-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vurgu);
}
.kucuk { font-size: var(--yazi-s); }
.ince { color: var(--metin-2); }
.soluk { color: var(--metin-3); }
.kod { font-family: var(--yazi-kod); font-variant-numeric: tabular-nums; }
.fiyat {
  font-family: var(--yazi-kod);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.02em;
}
.fiyat--buyuk { font-size: var(--yazi-xl); line-height: 1; }
.olcu { max-width: var(--olcu); }

/* 5. Yerlesim */
.kapsayici {
  width: 100%;
  max-width: var(--genislik);
  margin-inline: auto;
  padding-inline: var(--kenar-bosluk);
}
.kapsayici--dar { max-width: calc(var(--genislik-dar) + 2 * var(--kenar-bosluk)); }
.kapsayici--orta { max-width: calc(var(--genislik-orta) + 2 * var(--kenar-bosluk)); }
.yigin > * + * { margin-top: var(--aralik, var(--b-4)); }
.yigin--siki { --aralik: var(--b-2); }
.yigin--genis { --aralik: var(--b-8); }
.satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aralik, var(--b-3)); }
.satir--ayir { justify-content: space-between; }
.satir--sag { justify-content: flex-end; }
.izgara {
  display: grid;
  gap: var(--aralik, var(--b-6));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sutun, 280px)), 1fr));
}
.izgara--2 { --sutun: 340px; }
.izgara--4 { --sutun: 220px; }
.bolum { padding-block: var(--b-12); }
.bolum--dolgu { background: var(--yuzey); border-block: 1px solid var(--kenar); }
.bolum__bas { max-width: var(--olcu); margin-bottom: var(--b-8); }
.bolum__bas h2 + p { margin-top: var(--b-2); color: var(--metin-2); }
.merkez { text-align: center; margin-inline: auto; }
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.yalniz-dar { display: none; }
@media (min-width: 900px) {
  .bolum { padding-block: var(--b-16); }
  .yalniz-genis { display: revert; }
  /* !important sart: .dugme (sonraki kaynak sirasi, ayni ozgulluk) display'i ezip menu dugmesini masaustunde gosteriyordu (olculdu). */
  .yalniz-dar { display: none !important; }
}
@media (max-width: 899px) {
  .yalniz-genis { display: none !important; }
  .yalniz-dar { display: revert; }
}
.atla {
  position: absolute; left: var(--b-4); top: var(--b-2); z-index: 110;
  padding: var(--b-2) var(--b-4); border-radius: var(--kose-s);
  background: var(--vurgu); color: var(--vurgu-ustu); font-weight: 600;
  transform: translateY(-200%);
}
.atla:focus { transform: none; text-decoration: none; }

/* 6. Ikonlar */
.ikon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ikon--s { width: 16px; height: 16px; }
.ikon--l { width: 24px; height: 24px; }
.ikon--xl { width: 32px; height: 32px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 7. Dugme */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2);
  min-height: 40px; padding: 0 var(--b-4);
  border: 1px solid transparent; border-radius: var(--kose-m);
  font-size: var(--yazi-s); font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--metin);
  transition: background-color var(--sure-hizli) var(--egri), border-color var(--sure-hizli) var(--egri),
    color var(--sure-hizli) var(--egri), opacity var(--sure-hizli) var(--egri);
}
.dugme:hover { text-decoration: none; }
.dugme--birincil { background: var(--vurgu); color: var(--vurgu-ustu); }
.dugme--birincil:hover { background: var(--vurgu-hover); }
.dugme--ikincil { background: var(--yuzey); border-color: var(--kenar-guclu); }
.dugme--ikincil:hover { border-color: var(--metin-2); background: var(--yuzey-2); }
.dugme--sade { color: var(--metin-2); }
.dugme--sade:hover { color: var(--metin); background: var(--yuzey-2); }
.dugme--tehlike { color: var(--hata); border-color: var(--kenar); }
.dugme--tehlike:hover { background: var(--hata-yumusak); border-color: var(--hata); }
.dugme--kucuk { min-height: 32px; padding: 0 var(--b-3); font-size: var(--yazi-xs); border-radius: var(--kose-s); }
.dugme--buyuk { min-height: 48px; padding: 0 var(--b-6); font-size: var(--yazi-m); }
.dugme--ikon { width: 40px; padding: 0; }
.dugme--ikon.dugme--kucuk { width: 32px; }
.dugme--tam { width: 100%; }
.dugme[disabled], .dugme[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.dugme[data-yukleniyor="true"] { pointer-events: none; }
.dugme[data-yukleniyor="true"] .ikon { animation: don 800ms linear infinite; }

/* 8. Form */
.form { display: flex; flex-direction: column; gap: var(--b-6); }
.form-alan { display: flex; flex-direction: column; gap: var(--b-2); }
.form-etiket { font-size: var(--yazi-s); font-weight: 600; }
.form-etiket .ince { font-weight: 400; }
.form-ipucu { font-size: var(--yazi-xs); color: var(--metin-2); }
.form-hata {
  display: none; align-items: flex-start; gap: var(--b-1);
  font-size: var(--yazi-xs); color: var(--hata);
}
.form-hata .ikon { width: 14px; height: 14px; margin-top: 2px; }
.form-alan[data-hata] .form-hata { display: flex; }
.girdi {
  width: 100%; min-height: 44px; padding: 0 var(--b-3);
  background: var(--yuzey); color: var(--metin);
  border: 1px solid var(--kenar-guclu); border-radius: var(--kose-m);
  transition: border-color var(--sure-hizli) var(--egri);
}
.girdi::placeholder { color: var(--metin-3); }
.girdi:hover { border-color: var(--metin-2); }
.girdi:focus { outline: 2px solid var(--vurgu); outline-offset: 0; border-color: var(--vurgu); }
.girdi[aria-invalid="true"], .form-alan[data-hata] .girdi { border-color: var(--hata); }
.girdi[disabled] { opacity: .6; background: var(--yuzey-2); }
.girdi--kod { font-family: var(--yazi-kod); }
.girdi--cok { min-height: 140px; padding: var(--b-3); resize: vertical; line-height: 1.6; }
select.girdi { padding-right: var(--b-8); }
.secenek { display: flex; align-items: flex-start; gap: var(--b-2); font-size: var(--yazi-s); cursor: pointer; }
.secenek input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--vurgu); flex: none; }

/* Sorgu kutusu: manset ve alan adi sayfasinin ana girdisi */
.girdi-grup {
  display: flex; align-items: stretch;
  background: var(--yuzey); border: 1px solid var(--kenar-guclu); border-radius: var(--kose-l);
  overflow: hidden;
  transition: border-color var(--sure-hizli) var(--egri);
}
.girdi-grup:hover { border-color: var(--metin-2); }
.girdi-grup:focus-within { border-color: var(--vurgu); outline: 2px solid var(--vurgu); outline-offset: 0; }
.girdi-grup__ek { display: flex; align-items: center; padding-inline: var(--b-4) 0; color: var(--metin-3); }
.girdi-grup .girdi {
  flex: 1; min-width: 0; min-height: 56px; padding-inline: var(--b-3);
  border: 0; border-radius: 0; font-size: var(--yazi-l); font-family: var(--yazi-kod);
}
.girdi-grup .girdi:focus { outline: none; }
.girdi-grup .dugme { border-radius: 0; min-height: auto; padding-inline: var(--b-6); }
@media (max-width: 639px) {
  .girdi-grup .girdi { font-size: var(--yazi-m); }
  .girdi-grup .dugme { padding-inline: var(--b-4); }
}

/* 9. Kart */
.kart {
  background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--kose-l);
  padding: var(--b-6);
}
.kart--tikla { display: block; color: inherit; transition: border-color var(--sure-hizli) var(--egri); }
.kart--tikla:hover { text-decoration: none; border-color: var(--kenar-guclu); }
.kart--paket { display: flex; flex-direction: column; gap: var(--b-4); }
.kart--one { border-color: var(--vurgu); }
.kart__bas { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--b-2); }
.kart__bas p { color: var(--metin-2); font-size: var(--yazi-s); margin-top: var(--b-1); }
.kart__fiyat { display: flex; align-items: baseline; gap: var(--b-1); }
.kart__fiyat .ince { font-size: var(--yazi-s); }
.kart__ozellikler { display: flex; flex-direction: column; gap: var(--b-2); font-size: var(--yazi-s); color: var(--metin-2); }
.kart__ozellikler li { display: flex; align-items: flex-start; gap: var(--b-2); }
.kart__ozellikler .ikon { width: 18px; height: 18px; color: var(--vurgu); margin-top: 2px; }
.kart__alt { margin-top: auto; padding-top: var(--b-2); }
.ozellik { display: flex; gap: var(--b-3); }
.ozellik__ikon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--kose-m); background: var(--vurgu-yumusak); color: var(--vurgu);
}
.ozellik p { font-size: var(--yazi-s); color: var(--metin-2); margin-top: var(--b-1); }

/* 10. Rozet ve cip */
.rozet {
  display: inline-flex; align-items: center; gap: var(--b-1);
  padding: 2px var(--b-2); border-radius: var(--kose-tam);
  font-size: var(--yazi-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--vurgu-yumusak); color: var(--vurgu);
}
.rozet--basari { background: var(--basari-yumusak); color: var(--basari); }
.rozet--uyari { background: var(--uyari-yumusak); color: var(--uyari); }
.rozet--hata { background: var(--hata-yumusak); color: var(--hata); }
.rozet--notr { background: var(--yuzey-2); color: var(--metin-2); }
.cipler { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.cip {
  display: inline-flex; align-items: center; gap: var(--b-2);
  min-height: 32px; padding: 0 var(--b-3);
  border: 1px solid var(--kenar-guclu); border-radius: var(--kose-tam);
  background: var(--yuzey); color: var(--metin);
  font-size: var(--yazi-s); font-family: var(--yazi-kod);
  transition: background-color var(--sure-hizli) var(--egri), border-color var(--sure-hizli) var(--egri), color var(--sure-hizli) var(--egri);
}
.cip:hover { border-color: var(--metin-2); }
.cip[aria-pressed="true"] { background: var(--vurgu-yumusak); border-color: var(--vurgu); color: var(--vurgu); }
.cip .fiyat { font-weight: 500; color: var(--metin-2); }
.cip[aria-pressed="true"] .fiyat { color: inherit; }

/* 11. Sekme */
.sekmeler { display: flex; gap: var(--b-1); border-bottom: 1px solid var(--kenar); }
.sekme {
  padding: var(--b-3) var(--b-4); margin-bottom: -1px;
  font-size: var(--yazi-s); font-weight: 600; color: var(--metin-2);
  border-bottom: 2px solid transparent;
  transition: color var(--sure-hizli) var(--egri), border-color var(--sure-hizli) var(--egri);
}
.sekme:hover { color: var(--metin); }
.sekme[aria-selected="true"] { color: var(--vurgu); border-bottom-color: var(--vurgu); }
.sekme-panel { padding-top: var(--b-6); animation: belir var(--sure-normal) var(--egri); }

/* 12. Tablo */
/* contain: paint sart. Chromium'da collapse tablo, kaydirilan saricinin disina 7 px tasma sizdiriyor (olculdu). */
.tablo-kaydir { overflow-x: auto; contain: paint; border: 1px solid var(--kenar); border-radius: var(--kose-l); background: var(--yuzey); }
.tablo { width: 100%; border-collapse: collapse; font-size: var(--yazi-s); }
.tablo th, .tablo td { padding: var(--b-3) var(--b-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--kenar); }
.tablo th {
  font-size: var(--yazi-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--metin-2); background: var(--yuzey-2); white-space: nowrap;
}
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.tablo .kod { white-space: nowrap; }
.tablo--karsilastirma td:first-child { font-weight: 500; white-space: nowrap; }
.tablo--karsilastirma th:not(:first-child), .tablo--karsilastirma td:not(:first-child) { text-align: center; }
.tablo--karsilastirma .ikon { display: inline-block; vertical-align: middle; color: var(--vurgu); }

/* 13. Durum ve sonuc listesi */
.durum { display: inline-flex; align-items: center; gap: var(--b-2); font-size: var(--yazi-s); font-weight: 600; white-space: nowrap; }
.durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.durum--uygun { color: var(--basari); }
.durum--alinmis { color: var(--metin-3); }
.durum--bekliyor { color: var(--uyari); }
/* Nabiz yalniz istek yoldayken (JS durum--canli ekler); kalici bekliyor durumlari sabittir: sonsuz dekor yok. */
.durum--canli::before { animation: nabiz 1.2s var(--egri) infinite; }
.durum--hata { color: var(--hata); }
.sonuc { border: 1px solid var(--kenar); border-radius: var(--kose-l); background: var(--yuzey); overflow: hidden; }
.sonuc__satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2) var(--b-4);
  padding: var(--b-3) var(--b-4); border-bottom: 1px solid var(--kenar);
  animation: belir var(--sure-normal) var(--egri) both;
  animation-delay: var(--gecikme, 0ms);
}
.sonuc__satir:last-child { border-bottom: 0; }
.sonuc__ad { flex: 1 1 200px; font-family: var(--yazi-kod); overflow-wrap: anywhere; }
.sonuc__ad b { color: var(--vurgu); font-weight: 600; }
.sonuc__eylem { display: flex; align-items: center; gap: var(--b-3); margin-inline-start: auto; }
.sonuc__not { font-size: var(--yazi-xs); color: var(--metin-2); flex-basis: 100%; }

/* 14. Bildirim: satir ici ve kayan (toast) */
.bildirim {
  display: flex; align-items: flex-start; gap: var(--b-3);
  padding: var(--b-3) var(--b-4);
  border: 1px solid var(--kenar); border-radius: var(--kose-m);
  background: var(--yuzey); color: var(--metin); font-size: var(--yazi-s);
}
.bildirim .ikon { flex: none; margin-top: 1px; }
.bildirim__govde { flex: 1; min-width: 0; }
.bildirim__govde strong { display: block; }
.bildirim__kapat { margin: -4px -6px -4px 0; color: var(--metin-2); }
.bildirim--bilgi { background: var(--vurgu-yumusak); border-color: transparent; }
.bildirim--bilgi .ikon { color: var(--vurgu); }
.bildirim--basari { background: var(--basari-yumusak); border-color: transparent; }
.bildirim--basari .ikon { color: var(--basari); }
.bildirim--uyari { background: var(--uyari-yumusak); border-color: transparent; }
.bildirim--uyari .ikon { color: var(--uyari); }
.bildirim--hata { background: var(--hata-yumusak); border-color: transparent; }
.bildirim--hata .ikon { color: var(--hata); }
.bildirimler {
  position: fixed; right: var(--b-4); bottom: var(--b-4); z-index: 60;
  display: flex; flex-direction: column; gap: var(--b-2);
  width: min(360px, calc(100vw - 2 * var(--b-4)));
}
.bildirimler .bildirim { box-shadow: var(--golge); animation: belir-sag var(--sure-normal) var(--egri); }
.bildirimler .bildirim[data-kapaniyor="true"] { animation: sol var(--sure-hizli) var(--egri-cikis) forwards; }

/* 15. Yukleme ekrani, donen ikon, iskelet */
.yukleme {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: var(--zemin); color: var(--vurgu);
}
html.yukleniyor .yukleme { display: flex; animation: yukleme-bitir var(--sure-normal) var(--egri) 700ms forwards; }
html.yukleme-bitti .yukleme { display: none; }
.yukleme__marka { width: 56px; height: 56px; }
.yukleme__govde { transform-origin: 50% 100%; animation: yukleme-govde 320ms var(--egri) both; }
.yukleme__yelken, .yukleme__flok { animation: yukleme-yelken 320ms var(--egri) 180ms both; }
.yukleme__flok { animation-delay: 260ms; }
html.yukleniyor main { animation-delay: 620ms; }
.donen { animation: don 800ms linear infinite; }
.iskelet { display: block; min-height: 1em; border-radius: var(--kose-s); background: var(--yuzey-2); animation: nabiz 1.4s ease-in-out infinite; }
.bos { text-align: center; padding: var(--b-12) var(--b-4); color: var(--metin-2); }
.bos .ikon { width: 32px; height: 32px; margin: 0 auto var(--b-3); color: var(--metin-3); }

/* 16. Ust cubuk */
.ust {
  position: sticky; top: 0; z-index: 40;
  background: var(--zemin);
  border-bottom: 1px solid var(--kenar);
}
.ust__ic { display: flex; align-items: center; gap: var(--b-4); height: var(--ust-yukseklik); }
.ust__logo {
  display: inline-flex; align-items: center; gap: var(--b-2);
  color: var(--metin); font-weight: 700; font-size: var(--yazi-l); letter-spacing: -.02em;
}
.ust__logo:hover { text-decoration: none; }
.ust__logo .ikon { color: var(--vurgu); }
.ust__gezinme { display: none; gap: var(--b-1); margin-inline-start: var(--b-2); }
.ust__gezinme a, .ust__panel a:not(.dugme) {
  display: block; padding: var(--b-2) var(--b-3); border-radius: var(--kose-s);
  color: var(--metin-2); font-weight: 500; font-size: var(--yazi-s);
  transition: color var(--sure-hizli) var(--egri), background-color var(--sure-hizli) var(--egri);
}
.ust__gezinme a:hover, .ust__panel a:not(.dugme):hover { color: var(--metin); background: var(--yuzey-2); text-decoration: none; }
.ust__gezinme a[aria-current="page"], .ust__panel a[aria-current="page"] { color: var(--vurgu); }
.ust__eylemler { display: flex; align-items: center; gap: var(--b-2); margin-inline-start: auto; }
.ust__oturum { display: inline-flex; gap: var(--b-2); }
.ust__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; gap: var(--b-1);
  padding: var(--b-3) var(--kenar-bosluk) var(--b-4);
  background: var(--zemin); border-bottom: 1px solid var(--kenar);
  animation: belir var(--sure-normal) var(--egri);
}
.ust__panel a:not(.dugme) { font-size: var(--yazi-m); padding-block: var(--b-3); }
.ust__panel .ust__oturum { margin-top: var(--b-2); padding-top: var(--b-3); border-top: 1px solid var(--kenar); }
.ust__panel .ust__oturum .dugme { flex: 1; }
html:not(.js) .tema-dugme { display: none; }
.tema-dugme .ikon--gunes { display: none; }
[data-tema="koyu"] .tema-dugme .ikon--ay { display: none; }
[data-tema="koyu"] .tema-dugme .ikon--gunes { display: block; }
.ust__menu[aria-expanded="true"] .ikon--menu { display: none; }
.ust__menu[aria-expanded="false"] .ikon--kapat { display: none; }
@media (min-width: 900px) { .ust__gezinme { display: flex; } }

/* 17. Alt bilgi */
.alt { margin-top: auto; border-top: 1px solid var(--kenar); padding-block: var(--b-8); font-size: var(--yazi-s); color: var(--metin-2); }
.alt__ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-4) var(--b-8); }
.alt__marka { display: inline-flex; align-items: center; gap: var(--b-2); color: var(--metin); font-weight: 700; }
.alt__marka .ikon { color: var(--vurgu); }
.alt__baglantilar { display: flex; flex-wrap: wrap; gap: var(--b-2) var(--b-4); }
.alt__baglantilar a { color: var(--metin-2); }
.alt__baglantilar a:hover { color: var(--metin); }
.alt__not { flex-basis: 100%; font-size: var(--yazi-xs); color: var(--metin-3); }

/* 18. Sayfa bolumleri */
.manset { padding-block: var(--b-12) var(--b-8); }
.manset__ic { max-width: var(--genislik-orta); margin-inline: auto; text-align: center; }
.manset h1 { margin-bottom: var(--b-4); }
.manset__alt { color: var(--metin-2); font-size: var(--yazi-l); max-width: 40ch; margin-inline: auto; }
.manset__sorgu { margin-top: var(--b-8); text-align: left; }
.manset__sorgu .cipler { margin-top: var(--b-3); justify-content: center; }
.manset__sorgu .sonuc { margin-top: var(--b-4); }
@media (min-width: 900px) { .manset { padding-block: var(--b-24) var(--b-16); } }
.adimlar { counter-reset: adim; display: grid; gap: var(--b-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.adimlar li { counter-increment: adim; display: flex; flex-direction: column; gap: var(--b-2); }
.adimlar li::before {
  content: counter(adim);
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--vurgu); color: var(--vurgu-ustu);
  font-family: var(--yazi-kod); font-weight: 600; font-size: var(--yazi-s);
}
.adimlar p { font-size: var(--yazi-s); color: var(--metin-2); }
.cagri { text-align: center; padding: var(--b-12) var(--b-6); border: 1px solid var(--kenar); border-radius: var(--kose-l); background: var(--yuzey); }
.cagri h2 { margin-bottom: var(--b-3); }
.cagri .satir { justify-content: center; margin-top: var(--b-6); }
.hesap-durum { display: flex; flex-direction: column; gap: var(--b-3); }
.hesap-durum .durum { font-size: var(--yazi-m); }
.veri { display: grid; grid-template-columns: max-content 1fr; gap: var(--b-2) var(--b-6); font-size: var(--yazi-s); }
.veri dt { color: var(--metin-2); }
.veri dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.form-kart { padding: var(--b-8) var(--b-6); }
.form-kart h1 { font-size: var(--yazi-xl); margin-bottom: var(--b-2); }
.form-kart > p { color: var(--metin-2); font-size: var(--yazi-s); margin-bottom: var(--b-6); }
.form-kart .form-alt { text-align: center; font-size: var(--yazi-s); color: var(--metin-2); margin-top: var(--b-6); }
.kampanya { display: flex; align-items: center; justify-content: center; gap: var(--b-2); padding: var(--b-2) var(--kenar-bosluk); background: var(--vurgu); color: var(--vurgu-ustu); font-size: var(--yazi-s); font-weight: 500; text-align: center; }
.kampanya a { color: inherit; text-decoration: underline; }

/* 18b. Sayfa ekleri: sayfa basi, anahtar (aylik/yillik), SSS, secilen listesi */
.sayfa-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--b-4) var(--b-8); margin-bottom: var(--b-8); }
.sayfa-bas h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); }
.sayfa-bas h1 + p { margin-top: var(--b-2); max-width: var(--olcu); }
.sayfa-bas__yan { display: flex; flex-direction: column; align-items: flex-start; gap: var(--b-2); }
.manset__eylemler { justify-content: center; margin-top: var(--b-6); }
.anahtar { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--kenar); border-radius: var(--kose-m); background: var(--yuzey); }
.anahtar__secenek {
  min-height: 32px; padding: 0 var(--b-4); border-radius: var(--kose-s);
  font-size: var(--yazi-s); font-weight: 600; color: var(--metin-2);
  transition: background-color var(--sure-hizli) var(--egri), color var(--sure-hizli) var(--egri);
}
.anahtar__secenek:hover { color: var(--metin); }
.anahtar__secenek[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-ustu); }
.sss { border-top: 1px solid var(--kenar); }
.sss__madde { border-bottom: 1px solid var(--kenar); }
.sss__soru {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b-4);
  padding: var(--b-4) 0; font-weight: 600; cursor: pointer; list-style: none;
}
.sss__soru::-webkit-details-marker { display: none; }
.sss__soru .ikon { color: var(--metin-3); transition: transform var(--sure-normal) var(--egri); }
.sss__madde[open] .sss__soru .ikon { transform: rotate(180deg); }
.sss__cevap { padding-bottom: var(--b-4); color: var(--metin-2); max-width: var(--olcu); animation: belir var(--sure-normal) var(--egri); }
.secilen__alt { margin-top: var(--b-4); }
.dugme--ikincil[aria-pressed="true"] { background: var(--vurgu-yumusak); border-color: var(--vurgu); color: var(--vurgu); }
.iskelet--metin { width: 12ch; }
.bos h1, .bos h2 { color: var(--metin); margin-bottom: var(--b-2); }
.bos .dugme { margin-top: var(--b-4); }

/* 19. Hareket */
main { animation: belir var(--sure-yavas) var(--egri) both; }
html.js [data-belir] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--sure-yavas) var(--egri), transform var(--sure-yavas) var(--egri);
  transition-delay: var(--gecikme, 0ms);
}
html.js [data-belir="goster"] { opacity: 1; transform: none; }
/* Kademeli gecikme: CSP satir ici style'i engeller, sira CSS'ten gelir. JS style.setProperty ile ezebilir. */
.izgara > :nth-child(2), .adimlar > :nth-child(2), .sonuc > :nth-child(2) { --gecikme: 60ms; }
.izgara > :nth-child(3), .adimlar > :nth-child(3), .sonuc > :nth-child(3) { --gecikme: 120ms; }
.izgara > :nth-child(4), .sonuc > :nth-child(4) { --gecikme: 180ms; }
.izgara > :nth-child(n+5), .sonuc > :nth-child(n+5) { --gecikme: 240ms; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: var(--sure-hizli); }
::view-transition-new(root) { animation-duration: var(--sure-normal); }
@keyframes belir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes belir-sag { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes sol { to { opacity: 0; } }
@keyframes don { to { transform: rotate(360deg); } }
@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes yukleme-govde { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes yukleme-yelken { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes yukleme-bitir { to { opacity: 0; visibility: hidden; } }

/* 20. Azaltilmis hareket */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto; }
  html.js [data-belir] { opacity: 1; transform: none; }
  .durum--canli::before { animation: none; opacity: .7; }
  @view-transition { navigation: none; }
}