/* ==========================================================================
   Akkaya Aspava - genel stil dosyasi (mobil oncelikli)
   Iki katman: KRITIK (satir ici verilebilir) + geri kalan.
   Fontlar: Fraunces (baslik, degisken) + Karla (metin, degisken) - OFL, self-host.
   ========================================================================== */

/* === KRITIK:BASLA === */

/* ---------- Fontlar ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Token'lar ---------- */
:root {
  /* Marka */
  --lacivert: #2b2420;
  --lacivert-koyu: #1e1814;
  --lacivert-acik: #4a3f37;
  --altin: #c8884f;
  --altin-koyu: #8a4f22;      /* sayfa zemini uzerinde bakir tonlu metin/ikon: 5.7:1 */
  --altin-acik: #e6bf99;      /* koyu yuzey uzerinde metin: 8.7:1 */
  --altin-yildiz: #94571f;    /* grafik nesne: 5.2:1 */
  --krem: #f7f0e4;
  --krem-koyu: #ede3d2;
  --kagit: #fdf9f1;           /* kart zemini */

  /* Metin */
  --metin: #221f1c;           /* krem uzerinde 14.5:1 */
  --mürekkep: var(--metin);
  --metin-soluk: #55504a;     /* krem uzerinde 7.1:1 */
  --cizgi: #ded3bf;
  --cizgi-koyu: #c8baa2;

  /* Durum */
  --hata: #a12a2a;
  --hata-zemin: #f8e4e1;
  --basari: var(--taze);
  --basari-zemin: var(--taze-zemin);



  /* Kozlenmis palet: kiremit (ana vurgu) + zeytin (taze detay) */
  --vurgu: #a8432b;                   /* birincil dolgu, ana vurgu */
  --vurgu-uzerinde: #fff8ee;          /* vurgu dolgusu uzerinde metin: 5.7:1 */
  --vurgu-hover: #8e3520;
  --vurgu-metin: #a8432b;             /* sayfa zemininde vurgu rengi metin: 5.3:1 */
  --taze: #5b6b3a;                    /* zeytin: acik rozeti, onay, sinirsiz */
  --taze-uzerinde: #fff8ee;           /* 5.5:1 */
  --taze-zemin: #e9edd9;
  --taze-yazi: #3d4a24;               /* taze-zemin uzerinde 8.0:1 */
  --taze-acik: #b5c78a;               /* koyu yuzey uzerinde */
  --alt-zemin: var(--lacivert);       /* alt bilgi */

  /* Anlamsal token'lar (tema bunlari yeniden tanimlar) */
  --baslik: var(--lacivert);          /* baslik, baglanti, cizgi rengi */
  --yuzey: var(--lacivert);           /* koyu bolum / hero zemini */
  --yuzey-koyu: var(--lacivert-koyu); /* alt bilgi, sabit cubuk */
  --yuzey-acik: var(--lacivert-acik);
  --on-yuzey: #f7f0e4;                /* koyu yuzey uzerinde metin (her iki modda acik) */
  --on-yuzey-soluk: #eae2d3;
  --on-yuzey-silik: #c9bfae;
  --on-yuzey-ters: #1e1814;           /* acik dolgu uzerindeki metin */
  --on-altin: #1e1814;                /* altin dolgu uzerindeki metin: 5.9:1 */
  --dugme-bg: var(--lacivert);
  --dugme-metin: #f7f0e4;
  --dugme-hover: var(--lacivert-acik);
  --odak: var(--lacivert-acik);
  --odak-halka: rgba(74, 63, 55, 0.3);
  --girdi-kenar: #85796c;
  --girdi-hata-zemin: #fffafa;
  --medya-zemin: var(--krem-koyu);
  --hover-hafif: rgba(43, 36, 32, 0.08);
  --cubuk-bg: rgba(247, 240, 228, 0.96);
  --cubuk-bg-blur: rgba(247, 240, 228, 0.86);
  --vurgu-10: rgba(247, 240, 228, 0.1);
  --vurgu-18: rgba(247, 240, 228, 0.18);
  --vurgu-20: rgba(247, 240, 228, 0.2);
  --vurgu-25: rgba(253, 249, 241, 0.25);
  --vurgu-70: rgba(247, 240, 228, 0.7);
  --altin-halka: rgba(200, 136, 79, 0.28);
  --acik-yazi: var(--taze-yazi);
  --acik-cerceve: #c4cf9f;
  --kapali-yazi: #8a2222;
  --kapali-cerceve: #e6bcb7;
  color-scheme: light;

  /* Bosluk (4px taban) */
  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 0.75rem;
  --bosluk-4: 1rem;
  --bosluk-5: 1.5rem;
  --bosluk-6: 2rem;
  --bosluk-7: 3rem;
  --bosluk-8: 4.5rem;

  /* Yaricap */
  --yaricap-s: 6px;
  --yaricap-m: 12px;
  --yaricap-b: 22px;

  /* Golge (sicak kahve tonlu) */
  --golge-1: 0 1px 2px rgba(43, 39, 36, 0.08), 0 3px 10px rgba(43, 39, 36, 0.06);
  --golge-cubuk: 0 -6px 24px rgba(28, 25, 23, 0.25);
  --golge-cubuk-ust: 0 6px 14px -12px rgba(43, 39, 36, 0.45);
  --golge-2: 0 2px 4px rgba(43, 39, 36, 0.08), 0 12px 30px rgba(43, 39, 36, 0.14);

  /* Tipografi */
  --font-baslik: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-metin: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Yerlesim */
  --kenar: 1.25rem;           /* kap yan bosluk */
  --kap-maks: 72rem;
  --okuma: 40rem;
  --dokunma: 2.75rem;         /* 44px */
  --cubuk-yuk: 4.25rem;       /* sabit alt cubuk yuksekligi */
  --kat-yuk: 3.5rem;          /* kategori cubugu yuksekligi */
  --gecis: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 40em) {
  :root { --kenar: 2rem; }
}

/* ---------- Koyu tema ---------- */
:root[data-tema="dark"] {
  --krem: #1c1815;
  --krem-koyu: #241f1b;
  --kagit: #2b2520;
  --metin: #f1e9dc;
  --metin-soluk: #bdb1a2;
  --cizgi: #3a322b;
  --cizgi-koyu: #50463d;
  --altin-koyu: #e0a46f;
  --altin-yildiz: #d99a5e;
  --hata: #f0948a;
  --hata-zemin: #3a1f1c;
  --vurgu: #d2674c;
  --vurgu-uzerinde: #1c1815;
  --vurgu-hover: #e07e63;
  --vurgu-metin: #e58a70;
  --taze: #a8b97e;
  --taze-uzerinde: #1c1815;
  --taze-zemin: #26301a;
  --taze-yazi: #bfd093;
  --taze-acik: #b5c78a;
  --alt-zemin: #0d0a08;
  --baslik: #f5eee2;
  --yuzey: #2e2621;
  --yuzey-koyu: #0d0a08;
  --yuzey-acik: #4a3f37;
  --dugme-bg: #ece3d3;
  --dugme-metin: #1e1814;
  --dugme-hover: #ffffff;
  --odak: #e6bf99;
  --odak-halka: rgba(230, 191, 153, 0.35);
  --girdi-kenar: #8d8073;
  --girdi-hata-zemin: #2d1c1a;
  --medya-zemin: #e6dfd3;
  --hover-hafif: rgba(247, 240, 228, 0.09);
  --cubuk-bg: rgba(28, 24, 21, 0.96);
  --cubuk-bg-blur: rgba(28, 24, 21, 0.86);
  --acik-yazi: var(--taze-yazi);
  --acik-cerceve: #4f6035;
  --kapali-yazi: #f4a39b;
  --kapali-cerceve: #7a3a35;
  --golge-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.35);
  --golge-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.55);
  --golge-cubuk: 0 -6px 24px rgba(0, 0, 0, 0.6);
  --golge-cubuk-ust: 0 6px 14px -12px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --krem: #1c1815;
    --krem-koyu: #241f1b;
    --kagit: #2b2520;
    --metin: #f1e9dc;
    --metin-soluk: #bdb1a2;
    --cizgi: #3a322b;
    --cizgi-koyu: #50463d;
    --altin-koyu: #e0a46f;
    --altin-yildiz: #d99a5e;
    --hata: #f0948a;
    --hata-zemin: #3a1f1c;
    --vurgu: #d2674c;
    --vurgu-uzerinde: #1c1815;
    --vurgu-hover: #e07e63;
    --vurgu-metin: #e58a70;
    --taze: #a8b97e;
    --taze-uzerinde: #1c1815;
    --taze-zemin: #26301a;
    --taze-yazi: #bfd093;
    --taze-acik: #b5c78a;
    --alt-zemin: #0d0a08;
    --baslik: #f5eee2;
    --yuzey: #2e2621;
    --yuzey-koyu: #0d0a08;
    --yuzey-acik: #4a3f37;
    --dugme-bg: #ece3d3;
    --dugme-metin: #1e1814;
    --dugme-hover: #ffffff;
    --odak: #e6bf99;
    --odak-halka: rgba(230, 191, 153, 0.35);
    --girdi-kenar: #8d8073;
    --girdi-hata-zemin: #2d1c1a;
    --medya-zemin: #e6dfd3;
    --hover-hafif: rgba(247, 240, 228, 0.09);
    --cubuk-bg: rgba(28, 24, 21, 0.96);
    --cubuk-bg-blur: rgba(28, 24, 21, 0.86);
    --acik-yazi: var(--taze-yazi);
    --acik-cerceve: #4f6035;
    --kapali-yazi: #f4a39b;
    --kapali-cerceve: #7a3a35;
    --golge-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.35);
    --golge-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.55);
    --golge-cubuk: 0 -6px 24px rgba(0, 0, 0, 0.6);
    --golge-cubuk-ust: 0 6px 14px -12px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kat-yuk) + var(--bosluk-3));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--krem);
  color: var(--metin);
  font-family: var(--font-metin);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* sabit alt cubuk icerigin ustunu kapatmasin */
  padding-bottom: calc(var(--cubuk-yuk) + env(safe-area-inset-bottom, 0px));
}
body:not(:has(.sabit-cubuk)) { padding-bottom: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--baslik); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--odak);
  outline-offset: 3px;
  border-radius: var(--yaricap-s);
}
.bolum--lacivert :focus-visible,
.hero :focus-visible,
.sabit-cubuk :focus-visible,
.alt :focus-visible {
  outline-color: var(--altin-acik);
}

/* ---------- Tipografi ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--bosluk-3);
  color: var(--baslik);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7.5vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.65rem, 4.8vw, 2.45rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 var(--bosluk-4); max-width: var(--okuma); text-wrap: pretty; }
strong { font-weight: 700; }
small { font-size: 0.875rem; }

/* ---------- Yerlesim ---------- */
.kap {
  width: 100%;
  max-width: var(--kap-maks);
  margin-inline: auto;
  padding-inline: var(--kenar);
}
.bolum {
  padding-block: clamp(2.75rem, 8vw, 5.5rem);
}
.bolum--krem { background: var(--krem-koyu); }
.bolum--lacivert {
  background: var(--yuzey);
  color: var(--on-yuzey);
}
.bolum--lacivert h1, .bolum--lacivert h2, .bolum--lacivert h3, .bolum--lacivert h4 { color: var(--on-yuzey); }
.bolum--lacivert a:not(.btn) { color: var(--altin-acik); }
.bolum--lacivert p { color: var(--on-yuzey-soluk); }
.metin-orta { text-align: center; }
.metin-orta p { margin-inline: auto; }
.gorunmez {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.atla {
  position: absolute;
  left: var(--bosluk-3);
  top: -4rem;
  z-index: 100;
  padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--yuzey-koyu);
  color: var(--on-yuzey);
  border-radius: var(--yaricap-s);
  font-weight: 700;
  transition: top var(--gecis);
}
.atla:focus { top: var(--bosluk-3); }

/* ---------- Ust bar ---------- */
.ust {
  position: relative;
  z-index: 40;
  display: flex;
  background: var(--krem);
  border-bottom: 1px solid var(--cizgi);
  padding-inline: 0;
}
.ust > .kap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bosluk-2) var(--bosluk-4);
  min-height: 4.25rem;
  padding-block: var(--bosluk-2);
}
.ust__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--baslik);
  text-decoration: none;
}
.ust__logo img { height: 2.75rem; width: auto; }
.ust__menu-ac {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-width: var(--dokunma);
  min-height: var(--dokunma);
  padding: 0 var(--bosluk-3);
  background: transparent;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yaricap-m);
  color: var(--baslik);
  font-weight: 700;
  transition: background-color var(--gecis), border-color var(--gecis);
}
.ust__menu-ac:hover { background: var(--krem-koyu); }
.ust__menu-ac[aria-expanded="true"] { background: var(--dugme-bg); border-color: var(--dugme-bg); color: var(--dugme-metin); }
.ust__menu-ac svg { width: 1.375rem; height: 1.375rem; }
.ust__menu { flex-basis: 100%; order: 3; }
.ust__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bosluk-1) var(--bosluk-2); }
.ust__menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 var(--bosluk-3);
  border-radius: var(--yaricap-m);
  color: var(--baslik);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--gecis);
}
.ust__menu a:hover { background: var(--krem-koyu); }
.ust__menu a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--altin);
  border-radius: var(--yaricap-s) var(--yaricap-s) 0 0;
}

/* Tema dugmesi (JS yoksa gizli) */
.tema-dugme {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--dokunma);
  height: var(--dokunma);
  padding: 0;
  background: transparent;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 50%;
  color: var(--baslik);
  transition: background-color var(--gecis), transform var(--gecis);
}
.js .tema-dugme { display: inline-flex; order: 1; margin-left: auto; }
.tema-dugme:hover { background: var(--krem-koyu); }
.tema-dugme:active { transform: scale(0.94); }
.tema-dugme .ikon { width: 1.375rem; height: 1.375rem; }
.tema-dugme .tema-dugme__gunes { display: none; }
:root[data-tema="dark"] .tema-dugme .tema-dugme__gunes { display: block; }
:root[data-tema="dark"] .tema-dugme .tema-dugme__ay { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .tema-dugme .tema-dugme__gunes { display: block; }
  :root:not([data-tema="light"]) .tema-dugme .tema-dugme__ay { display: none; }
}
.ust__menu-ac { order: 2; }
@media (min-width: 56em) {
  .js .tema-dugme { order: 2; margin-left: 0; }
}

/* JS varsa dar ekranda menu acilir-kapanir; JS yoksa yatay liste olarak gorunur */
@media (max-width: 55.99em) {
  .js .ust__menu-ac { display: inline-flex; }
  .js .ust__menu { display: none; }
  .js .ust--acik .ust__menu {
    display: block;
    animation: ac-menu 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
    padding-bottom: var(--bosluk-3);
  }
  .js .ust__menu ul { flex-direction: column; }
  .js .ust__menu a { width: 100%; font-size: 1.125rem; border-bottom: 1px solid var(--cizgi); border-radius: 0; }
  .js .ust__menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--altin); }
}
@keyframes ac-menu {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 56em) {
  .ust > .kap { flex-wrap: nowrap; }
  .ust__menu { flex: 1; order: 0; display: block; }
  .ust__menu ul { justify-content: center; }
  .ust__menu-ac { display: none !important; }
}

/* Sube secici: parcali kontrol */
.sube-secici {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--krem-koyu);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
}
.sube-secici a,
.sube-secici button,
.sube-secici__bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dokunma);
  min-width: 5rem;
  padding: 0 var(--bosluk-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--baslik);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis), box-shadow var(--gecis);
}
.sube-secici a:hover,
.sube-secici button:hover { background: var(--hover-hafif); }
.sube-secici [aria-current]:not([aria-current="false"]),
.sube-secici [aria-pressed="true"],
.sube-secici .is-aktif {
  background: var(--dugme-bg);
  color: var(--dugme-metin);
  box-shadow: var(--golge-1);
}
.sube-secici select {
  min-height: var(--dokunma);
  padding: 0 var(--bosluk-4);
  border: 0;
  background: transparent;
  font-weight: 700;
  color: var(--baslik);
}

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  min-height: 3rem;
  padding: 0.625rem 1.375rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-metin);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn__ikon, .btn .ikon { width: 1.25rem; height: 1.25rem; flex: none; }
.ikon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.2em; }
.btn--birincil { background: var(--vurgu); color: var(--vurgu-uzerinde); border-color: var(--vurgu); }  /* kiremit, 5.7:1 */
.btn--birincil:hover { background: var(--vurgu-hover); border-color: var(--vurgu-hover); box-shadow: var(--golge-1); }
.btn--lacivert { background: var(--dugme-bg); color: var(--dugme-metin); border-color: var(--dugme-bg); }
.btn--lacivert:hover { background: var(--dugme-hover); border-color: var(--dugme-hover); box-shadow: var(--golge-1); }
.btn--hayalet { background: transparent; color: var(--baslik); border-color: var(--baslik); }
.btn--hayalet:hover { background: var(--baslik); color: var(--krem); }
.hero .btn--hayalet, .bolum--lacivert .btn--hayalet, .alt .btn--hayalet {
  color: var(--on-yuzey);
  border-color: var(--vurgu-70);
}
.hero .btn--hayalet:hover, .bolum--lacivert .btn--hayalet:hover, .alt .btn--hayalet:hover {
  background: var(--on-yuzey);
  color: var(--on-yuzey-ters);
}
.hero .btn--lacivert, .bolum--lacivert .btn--lacivert, .alt .btn--lacivert { background: var(--on-yuzey); border-color: var(--on-yuzey); color: var(--on-yuzey-ters); }
.hero .btn--lacivert:hover, .bolum--lacivert .btn--lacivert:hover, .alt .btn--lacivert:hover { background: var(--altin-acik); border-color: var(--altin-acik); }
.btn--buyuk { min-height: 3.5rem; padding: 0.875rem 1.75rem; font-size: 1.1875rem; }
.btn--tam { display: flex; width: 100%; }
.btn[disabled], .btn[aria-busy="true"], .btn[aria-disabled="true"] {
  opacity: 0.65;
  cursor: progress;
  pointer-events: none;
}

/* ---------- Rozetler ---------- */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 1.875rem;
  padding: 0.125rem 0.875rem;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 999px;
  background: var(--kagit);
  color: var(--baslik);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}
.rozet--sinirsiz { background: var(--taze); border-color: var(--taze); color: var(--taze-uzerinde); }
.rozet--acik { background: var(--basari-zemin); border-color: var(--acik-cerceve); color: var(--acik-yazi); }
.rozet--kapali { background: var(--hata-zemin); border-color: var(--kapali-cerceve); color: var(--kapali-yazi); }
.rozet--acik::before, .rozet--kapali::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--yuzey);
  color: var(--on-yuzey);
  padding-block: var(--bosluk-7) var(--bosluk-8);
}
.hero > .kap {
  display: grid;
  gap: var(--bosluk-5) var(--bosluk-7);
  align-items: center;
}
.hero__icerik { display: grid; gap: var(--bosluk-4); align-content: center; justify-items: start; }
.hero__baslik {
  margin: 0;
  color: var(--on-yuzey);
  font-size: clamp(2.3rem, 9vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.hero__baslik::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-top: var(--bosluk-4);
  background: var(--altin);
  transform-origin: left center;
}
.hero__alt {
  margin: 0;
  max-width: 34rem;
  font-size: 1.1875rem;
  color: var(--on-yuzey-soluk);
}
.hero .rozet { background: transparent; border-color: var(--altin); color: var(--altin-acik); }
.hero .rozet--acik { background: var(--basari-zemin); border-color: var(--acik-cerceve); color: var(--acik-yazi); }
.hero .rozet--kapali { background: var(--hata-zemin); border-color: var(--kapali-cerceve); color: var(--kapali-yazi); }
.hero .akis, .hero__butonlar { margin-top: var(--bosluk-2); }

/* kemer cercevesi: lokanta nisi */
.hero__medya {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--yaricap-b) var(--yaricap-b);
  overflow: hidden;
  background: var(--yuzey-koyu);
  box-shadow: 0 0 0 3px var(--yuzey), 0 0 0 5px var(--altin), var(--golge-2);
}
.hero__medya img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 56em) {
  .hero { padding-block: var(--bosluk-8); }
  .hero > .kap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .hero__medya { width: min(100%, 26rem); margin-inline: 0 0; justify-self: end; }
}

/* Tek orkestre edilmis acilis: yalnizca .hero, bir kez */
@media (prefers-reduced-motion: no-preference) {
  .hero .rozet,
  .hero__baslik,
  .hero__alt,
  .hero .akis,
  .hero__butonlar { animation: ac-yuksel 640ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .hero .rozet { animation-delay: 60ms; }
  .hero__baslik { animation-delay: 160ms; }
  .hero__alt { animation-delay: 300ms; }
  .hero .akis, .hero__butonlar { animation-delay: 420ms; }
  .hero__baslik::after { animation: ac-cizgi 700ms 520ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .hero__medya { animation: ac-kemer 950ms 120ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
}
@keyframes ac-yuksel {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes ac-cizgi {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes ac-kemer {
  from { clip-path: inset(100% 0 0 0 round 999px 999px 22px 22px); opacity: 0.4; }
  to { clip-path: inset(0 0 0 0 round 999px 999px 22px 22px); opacity: 1; }
}

/* ---------- Sabit alt cubuk: Ara / Yol Tarifi / WhatsApp ---------- */
.sabit-cubuk {
  position: fixed;
  z-index: 50;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-3) calc(var(--bosluk-2) + env(safe-area-inset-bottom, 0px));
  background: var(--yuzey-koyu);
  border-top: 2px solid var(--altin);
  box-shadow: var(--golge-cubuk);
}
.sabit-cubuk a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 3.25rem;
  padding: var(--bosluk-1) var(--bosluk-2);
  border-radius: var(--yaricap-m);
  background: var(--vurgu-10);
  color: var(--on-yuzey);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--gecis), transform var(--gecis);
  -webkit-tap-highlight-color: transparent;
}
.sabit-cubuk a:first-child { background: var(--vurgu); color: var(--vurgu-uzerinde); }
.sabit-cubuk a:hover { background: var(--vurgu-20); }
.sabit-cubuk a:first-child:hover { background: var(--vurgu-hover); }
.sabit-cubuk a:active { transform: scale(0.97); }
.sabit-cubuk svg { width: 1.375rem; height: 1.375rem; flex: none; }
@media (min-width: 56em) {
  .sabit-cubuk {
    left: 50%; right: auto;
    bottom: var(--bosluk-4);
    width: min(32rem, calc(100% - 2rem));
    transform: translateX(-50%);
    border: 2px solid var(--altin);
    border-radius: 999px;
    padding: var(--bosluk-2);
  }
  .sabit-cubuk a { flex-direction: row; gap: var(--bosluk-2); border-radius: 999px; }
}

/* === KRITIK:BITIS === */

/* ==========================================================================
   Kritik olmayan katman
   ========================================================================== */

/* ---------- Duzen yardimcilari ---------- */
.izgara {
  display: grid;
  gap: var(--bosluk-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.yigin { display: flex; flex-direction: column; gap: var(--yigin-bosluk, var(--bosluk-4)); }
.yigin > * { margin-block: 0; }
.akis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-3); }

.bolum__baslik { margin-bottom: var(--bosluk-2); }
.bolum__giris { max-width: var(--okuma); margin-bottom: var(--bosluk-6); color: var(--metin-soluk); font-size: 1.125rem; }
.bolum--lacivert .bolum__giris { color: var(--on-yuzey-soluk); }
.bolum > .kap > h2:first-child { margin-bottom: var(--bosluk-5); }

/* ---------- Sube karti ---------- */
.sube-karti {
  display: flex;
  flex-direction: column;
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-top: 4px solid var(--altin);
  border-radius: var(--yaricap-b);
  box-shadow: var(--golge-1);
  overflow: hidden;
}
.sube-karti__medya { aspect-ratio: 16 / 9; background: var(--yuzey); overflow: hidden; }
.sube-karti__medya img { width: 100%; height: 100%; object-fit: cover; }
.sube-karti__govde, .sube-karti > *:not(.sube-karti__medya):not(.sube-karti__govde) { padding-inline: var(--bosluk-5); }
.sube-karti__govde { display: flex; flex-direction: column; gap: var(--bosluk-3); padding-block: var(--bosluk-5); flex: 1; }
.sube-karti > h2, .sube-karti > h3, .sube-karti__baslik { margin: var(--bosluk-5) 0 0; }
.sube-karti__baslik { margin: 0; }
.sube-karti__adres, .sube-karti__satir {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  margin: 0;
  color: var(--metin-soluk);
  font-style: normal;
}
.sube-karti__adres svg, .sube-karti__satir svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; color: var(--altin-koyu); }
.sube-karti__butonlar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-2); margin-top: auto; padding-top: var(--bosluk-2); }
.sube-karti__butonlar .btn { padding-inline: var(--bosluk-3); }
.sube-karti > .akis, .sube-karti > .yigin { padding-block: var(--bosluk-4) var(--bosluk-5); }

/* ---------- Kategori cubugu (yapiskan) ---------- */
.kategori-cubugu {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: var(--kat-yuk);
  padding: var(--bosluk-2) var(--kenar);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background: var(--cubuk-bg);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge-cubuk-ust);
  -webkit-overflow-scrolling: touch;
}
@supports (backdrop-filter: blur(6px)) {
  .kategori-cubugu { background: var(--cubuk-bg-blur); backdrop-filter: blur(10px); }
}
.kategori-cubugu::-webkit-scrollbar { display: none; }
.kategori-cubugu__liste { display: contents; }
.kategori-cubugu__bag {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--dokunma);
  padding: 0 var(--bosluk-4);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--baslik);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: center;
  transition: background-color var(--gecis), color var(--gecis);
}
.kategori-cubugu__bag:hover { background: var(--krem-koyu); }
.kategori-cubugu__bag[aria-current]:not([aria-current="false"]) {
  background: var(--dugme-bg);
  color: var(--dugme-metin);
}
@media (min-width: 64em) {
  .kategori-cubugu { justify-content: center; }
}

.kategori-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  margin: var(--bosluk-7) 0 var(--bosluk-4);
  scroll-margin-top: calc(var(--kat-yuk) + var(--bosluk-3));
}
.kategori-baslik::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cizgi-koyu);
}
.kategori-baslik h2, .kategori-baslik h3 { margin: 0; }
section[id], [id].kategori { scroll-margin-top: calc(var(--kat-yuk) + var(--bosluk-3)); }

/* ---------- Urun karti ---------- */
.urun-karti {
  display: flex;
  flex-direction: row-reverse;      /* gorsel sagda, metin solda */
  align-items: stretch;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3);
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-m);
  box-shadow: var(--golge-1);
}
.urun-karti__medya {
  position: relative;
  flex: none;
  width: 6.5rem;
  height: 6.5rem;
  align-self: flex-start;
  border-radius: var(--yaricap-s);
  overflow: hidden;
  background: var(--medya-zemin);
}
.urun-karti__medya img { width: 100%; height: 100%; object-fit: cover; }
.urun-karti__govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--bosluk-1); }
.urun-karti__ad {
  margin: 0;
  font-family: var(--font-baslik);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--baslik);
}
.urun-karti__aciklama { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--metin-soluk); }
.urun-karti__fiyat {
  margin: auto 0 0;
  padding-top: var(--bosluk-2);
  font-family: var(--font-baslik);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--baslik);
  font-variant-numeric: lining-nums tabular-nums;
}
/* fotografi olmayan urun: marka renginde tabak yer tutucusu */
.urun-karti--yer-tutucu .urun-karti__medya,
.urun-karti__medya:empty {
  background:
    radial-gradient(circle at center, var(--yuzey) 0 32%, transparent 33%),
    repeating-radial-gradient(circle at center, var(--altin) 0 1.5px, var(--yuzey-koyu) 1.5px 9px);
}
.urun-karti--yer-tutucu .urun-karti__medya img { display: none; }
@media (min-width: 40em) {
  .urun-karti__medya { width: 7.5rem; height: 7.5rem; }
}

/* ---------- Sinirsiz ikramlar ---------- */
.sinirsiz-karti {
  position: relative;
  padding: var(--bosluk-5);
  background: var(--yuzey);
  color: var(--on-yuzey);
  border-radius: var(--yaricap-b);
  box-shadow: var(--golge-2);
  outline: 1px solid var(--altin);
  outline-offset: -8px;
}
.sinirsiz-karti h2, .sinirsiz-karti h3, .sinirsiz-karti__baslik { color: var(--on-yuzey); margin-bottom: var(--bosluk-3); }
.sinirsiz-karti p { color: var(--on-yuzey-soluk); }
.sinirsiz-karti ul, .sinirsiz-karti__liste {
  list-style: none;
  margin: var(--bosluk-4) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--bosluk-2) var(--bosluk-5);
}
.sinirsiz-karti li, .sinirsiz-karti__oge {
  position: relative;
  padding-left: 1.5rem;
  font-weight: 700;
}
.sinirsiz-karti li::before, .sinirsiz-karti__oge::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  background: var(--taze-acik);
  box-shadow: 0 0 0 3px var(--vurgu-18);
}
.sinirsiz-karti .rozet { margin-bottom: var(--bosluk-3); }
.sinirsiz-karti small, .sinirsiz-karti__not { display: block; color: var(--altin-acik); }

/* ---------- Instagram ---------- */
.ig-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bosluk-2);
}
@media (min-width: 48em) {
  .ig-izgara { grid-template-columns: repeat(4, 1fr); gap: var(--bosluk-3); }
}
.ig-kart {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--yaricap-m);
  background: var(--yuzey);
}
.ig-kart img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1); }
a.ig-kart:hover img { transform: scale(1.04); }
.ig-kart::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--vurgu-25);
  pointer-events: none;
}

/* ---------- SSS ---------- */
.sss { display: grid; gap: var(--bosluk-2); max-width: 48rem; }
.sss__oge {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-m);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.sss__oge[open] { border-color: var(--altin); box-shadow: var(--golge-1); }
.sss__oge summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
  min-height: 3.25rem;
  padding: var(--bosluk-3) var(--bosluk-4);
  font-family: var(--font-baslik);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--baslik);
  cursor: pointer;
  list-style: none;
  border-radius: var(--yaricap-m);
}
.sss__oge summary::-webkit-details-marker { display: none; }
.sss__oge summary::after {
  content: "";
  flex: none;
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--altin-koyu);
  border-bottom: 2px solid var(--altin-koyu);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--gecis);
}
.sss__oge[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sss__oge > :not(summary) { margin: 0; padding: 0 var(--bosluk-4) var(--bosluk-4); max-width: none; color: var(--metin); }
.sss__oge[open] > :not(summary) { animation: ac-sss 240ms ease-out; }
@keyframes ac-sss {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Galeri ---------- */
.galeri {
  display: flex;
  gap: var(--bosluk-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--bosluk-2);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.galeri > * {
  flex: none;
  width: min(80%, 22rem);
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--yaricap-m);
  scroll-snap-align: start;
  background: var(--krem-koyu);
}
.galeri img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 56em) {
  .galeri { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .galeri > * { width: auto; }
}

/* ---------- Form ---------- */
.form { display: grid; gap: var(--bosluk-5); max-width: 36rem; }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { padding: 0; font-weight: 700; margin-bottom: var(--bosluk-2); }
.form__alan { display: grid; gap: var(--bosluk-2); }
.form__etiket { font-weight: 700; color: var(--baslik); }
.form__girdi {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.875rem;
  background: var(--kagit);
  border: 1.5px solid var(--girdi-kenar);
  border-radius: var(--yaricap-m);
  line-height: 1.4;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
textarea.form__girdi { min-height: 8rem; resize: vertical; }
select.form__girdi { appearance: auto; }
.form__girdi:hover { border-color: var(--odak); }
.form__girdi:focus { outline: none; border-color: var(--baslik); box-shadow: 0 0 0 3px var(--odak-halka); }
.form__girdi[aria-invalid="true"] { border-color: var(--hata); background: var(--girdi-hata-zemin); }
.form__hata {
  margin: 0;
  color: var(--hata);               /* krem uzerinde 6.7:1 */
  font-size: 0.9375rem;
  font-weight: 700;
}
.form__hata:empty { display: none; }
.form__basari {
  margin: 0;
  padding: var(--bosluk-4);
  background: var(--basari-zemin);
  border: 1px solid var(--acik-cerceve);
  border-left: 5px solid var(--basari);
  border-radius: var(--yaricap-m);
  color: var(--acik-yazi);
  font-weight: 700;
  max-width: none;
}
.form__basari:focus { outline: none; }
.form .btn[aria-busy="true"]::before {
  content: "";
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: don 700ms linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }
/* bal tuzagi: gorunmez, erisilebilirlik agacinda da yok */
.bal {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Puan: radyo yildiz grubu */
.puan { display: flex; flex-wrap: wrap; gap: var(--bosluk-1); border: 0; margin: 0; padding: 0; }
.puan legend { width: 100%; }
.puan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puan label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dokunma);
  height: var(--dokunma);
  border-radius: var(--yaricap-m);
  color: var(--cizgi-koyu);
  cursor: pointer;
  transition: color var(--gecis), transform var(--gecis);
}
.puan label svg { width: 2rem; height: 2rem; fill: currentColor; stroke: var(--altin-yildiz); stroke-width: 1.5; }
.puan label:hover { transform: scale(1.1); }
.puan label.is-dolu, .puan input:checked + label { color: var(--altin); }
.puan input:focus-visible + label { outline: 3px solid var(--odak); outline-offset: 2px; }
.puan__deger { align-self: center; margin-left: var(--bosluk-2); color: var(--metin-soluk); font-weight: 700; }

/* ---------- Reklam acilis sayfasi ---------- */
.reklam { padding-block: var(--bosluk-5) var(--bosluk-6); }
.reklam h1 { font-size: clamp(1.9rem, 7vw, 3rem); }
.reklam__butonlar { display: grid; gap: var(--bosluk-3); margin-block: var(--bosluk-5); }
.reklam__butonlar .btn { min-height: 3.75rem; font-size: 1.25rem; }
.reklam__urunler { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bosluk-2); margin-block: var(--bosluk-5); }
.reklam__urunler > * { margin: 0; overflow: hidden; border-radius: var(--yaricap-m); background: var(--medya-zemin); }
.reklam__urunler img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.reklam__urunler figcaption, .reklam__urunler p { margin: 0; padding: var(--bosluk-2); font-size: 0.875rem; font-weight: 700; text-align: center; max-width: none; }
@media (min-width: 40em) {
  .reklam__butonlar { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Alt bilgi ---------- */
.alt {
  background: var(--alt-zemin);
  color: var(--on-yuzey-soluk);
  padding-block: var(--bosluk-7) var(--bosluk-6);
  border-top: 4px solid var(--altin);
}
.alt h2, .alt h3, .alt h4, .alt__baslik { color: var(--on-yuzey); font-size: 1.25rem; }
.alt a { color: var(--altin-acik); }
.alt a:hover { color: var(--on-yuzey); }
.alt p { color: var(--on-yuzey-soluk); }
.alt__izgara { display: grid; gap: var(--bosluk-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bosluk-1); }
.alt li a { display: inline-flex; align-items: center; min-height: var(--dokunma); }
.alt address { font-style: normal; }
.alt__alt {
  margin-top: var(--bosluk-6);
  padding-top: var(--bosluk-4);
  border-top: 1px solid var(--vurgu-18);
  font-size: 0.9375rem;
  color: var(--on-yuzey-silik);
}

/* ---------- B ajani view'lerinden gelen ek sinifler ---------- */
.ust__ic { width: 100%; }
.ust__logo-gorsel { height: 2.75rem; width: auto; max-width: 11rem; object-fit: contain; }
.ust__marka { font-family: var(--font-baslik); font-weight: 700; font-size: 1.3rem; color: var(--baslik); letter-spacing: -0.01em; }
.ust__menu-ac[hidden] { display: none !important; }

.form__ipucu { margin: 0; color: var(--metin-soluk); font-size: 0.9375rem; }
.form__ipucu strong { color: var(--baslik); }

.kategori-baslik__kapak {
  width: 100%;
  max-height: 14rem;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--yaricap-m);
  margin-bottom: var(--bosluk-2);
}
.bolum[aria-labelledby] > .kap > .kategori-baslik { margin-top: 0; }
.bolum > .kap > .kategori-baslik { scroll-margin-top: calc(var(--kat-yuk) + var(--bosluk-3)); }

.bilgi { display: grid; grid-template-columns: auto 1fr; gap: var(--bosluk-3) var(--bosluk-4); margin: 0; }
.bilgi dt { display: flex; align-items: flex-start; gap: var(--bosluk-2); font-weight: 700; color: var(--baslik); white-space: nowrap; }
.bilgi dt svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--altin-koyu); flex: none; }
.bilgi dd { margin: 0; }
@media (max-width: 29.99em) {
  .bilgi { grid-template-columns: 1fr; gap: 0; }
  .bilgi dd { margin-bottom: var(--bosluk-3); padding-left: 1.75rem; }
}
.harita { min-height: 18rem; border-radius: var(--yaricap-b); overflow: hidden; border: 1px solid var(--cizgi); box-shadow: var(--golge-1); background: var(--krem-koyu); }
.harita iframe { display: block; width: 100%; height: 100%; min-height: 18rem; border: 0; }

.sube-karti__yer { display: flex; align-items: flex-start; gap: var(--bosluk-2); margin: 0; color: var(--metin-soluk); }
.sube-karti__yer svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; color: var(--altin-koyu); }

.galeri__oge { }
.sss__baslik { margin-bottom: var(--bosluk-3); }
.sss > .sss__baslik { margin-top: 0; }

.alt__marka { margin-bottom: var(--bosluk-6); }
.alt__logo { height: 3rem; width: auto; max-width: 12rem; margin-bottom: var(--bosluk-2); }
.alt__ad { display: block; font-family: var(--font-baslik); font-size: 1.5rem; font-weight: 700; color: var(--on-yuzey); margin-bottom: var(--bosluk-2); }
.alt__marka p { margin: 0; }
.alt__sube { min-width: 0; }
.alt__sube h2 { margin-bottom: var(--bosluk-2); }
.alt__adres { margin-bottom: var(--bosluk-2); }
.alt__saat { font-size: 0.9375rem; color: var(--on-yuzey-silik); }
.alt__sube .akis { gap: var(--bosluk-1) var(--bosluk-4); }
.alt__sube .akis a { display: inline-flex; align-items: center; min-height: var(--dokunma); }
.alt__menu { display: flex; flex-wrap: wrap; gap: 0 var(--bosluk-5); margin-top: var(--bosluk-6); padding-top: var(--bosluk-3); border-top: 1px solid var(--vurgu-18); }
.alt__menu a { display: inline-flex; align-items: center; min-height: var(--dokunma); }

.sabit-cubuk__oge { min-width: 0; }
.sabit-cubuk__oge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Yazdirma ---------- */
@media print {
  .ust, .sabit-cubuk, .kategori-cubugu, .hero__medya, .ig-izgara, .btn, .sube-secici, .atla { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; font-size: 11pt; }
  .hero, .bolum--lacivert, .bolum--krem, .alt, .sinirsiz-karti { background: #fff !important; color: #000 !important; box-shadow: none !important; outline: 0; border: 0; }
  .hero *, .bolum--lacivert *, .alt *, .sinirsiz-karti * { color: #000 !important; }
  h1, h2, h3, h4 { color: #000; }
  .urun-karti, .sss__oge { box-shadow: none; break-inside: avoid; }
  .urun-karti__medya { display: none; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Azaltilmis hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Icerik baglantilari: kiremit vurgu (koyu yuzeylerde bakir-acik) */
p a:not(.btn), dd a, .sss__oge a { color: var(--vurgu-metin); }
.alt p a:not(.btn), .hero p a:not(.btn), .bolum--lacivert p a:not(.btn), .sinirsiz-karti p a { color: var(--altin-acik); }

/* Koyu modda logo seffaf PNG ise acik plakada okunur */
:root[data-tema="dark"] .ust__logo-gorsel { background: var(--medya-zemin); border-radius: var(--yaricap-s); padding: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .ust__logo-gorsel { background: var(--medya-zemin); border-radius: var(--yaricap-s); padding: 2px; }
}