/* ==========================================================================
   notebookservisi.net — TEMEL TASARIM SİSTEMİ  (Konsept B · "Pastel Editoryal")
   Blok stilleri bu dosyaya YAZILMAZ → assets/css/bloklar-<grup>.css
   Kılavuz: _proje/TASARIM.md

   TOKEN LİSTESİ (adlar Konsept B ile birebir aynıdır)
   ─ Renk · marka      --c-brand  --c-brand-deep  --c-brand-soft
   ─ Renk · zemin      --c-bg (krem sayfa)  --c-surface (kart yüzeyi)  --c-paper
   ─ Renk · pastel     --c-mist/-deep (sis)  --c-sage/-deep (adaçayı)  --c-powder/-deep (pudra)  --c-sand/-deep (kum)
   ─ Renk · metin      --c-text  --c-muted  --c-muted-strong  --c-line  --c-line-strong  --c-on-dark  --c-on-dark-muted
   ─ Renk · işlev      --c-wa  --c-wa-deep  --c-white  --c-star  --c-error  --c-error-line  --c-ok  --c-placeholder
   ─ BAĞLAMSAL (koyu zeminde kendiliğinden döner — bileşenlerde BUNLARI kullan)
                       --renk-metin  --renk-soluk  --renk-baslik  --renk-vurgu  --renk-cizgi  --renk-cizgi-guclu
                       --renk-yuzey  --renk-yuzey-yari  --renk-odak
   ─ Tipografi         --f-serif  --f-sans  --fs-xs  --fs-sm  --fs-base  --fs-lg  --fs-h3  --fs-h2  --fs-h1  --ls-etiket
   ─ Boşluk (8px)      --s-1 … --s-6  --s-8  --s-10  --s-12  --s-section  --gutter  --container  --container-dar
   ─ Yarıçap           --r-sm  --r-md  --r-lg  --r-xl  --r-pill
   ─ Gölge             --sh-soft  --sh-lift
   ─ Hareket           --ease  --t-fast  --t-med
   ─ Düzen             --header-h  --cubuk-h  --z-cubuk  --z-cerez  --z-ust  --z-atla
   ========================================================================== */

/* ==========================================================================
   1. YAZI TİPLERİ — kendi sunucumuzdan (değişken woff2, latin + latin-ext)
   ========================================================================== */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  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"; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url("../fonts/fraunces-italik-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url("../fonts/fraunces-italik-latin.woff2") format("woff2");
  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: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  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;
}

/* ==========================================================================
   2. TOKEN'LAR
   ========================================================================== */
:root {
  /* Renk — marka */
  --c-brand: #1F4E66;
  --c-brand-deep: #163A4C;
  --c-brand-soft: #3B6A82;
  /* Renk — zemin */
  --c-bg: #F7F3EC;
  --c-surface: #FFFDF8;
  --c-paper: #FBF8F2;
  /* Renk — pastel */
  --c-sage: #DDE6D5;
  --c-sage-deep: #B9CBAE;
  --c-powder: #F2DED8;
  --c-powder-deep: #E4BDB3;
  --c-mist: #D8E5EB;
  --c-mist-deep: #B3CCD7;
  --c-sand: #EDE1CB;
  --c-sand-deep: #D9C5A0;
  /* Renk — metin */
  --c-text: #22333B;
  --c-muted: #4E5F67;
  --c-muted-strong: #42525A;          /* pastel zeminde ikincil metin (AA) */
  --c-line: rgba(31, 78, 102, .18);
  --c-line-strong: rgba(31, 78, 102, .38);
  --c-alan-cizgi: rgba(31, 78, 102, .62);   /* form alanı kenarlığı — yüzeye karşı ≥3:1 (WCAG 1.4.11) */
  --c-on-dark: #F7F3EC;
  --c-on-dark-muted: #C9D8DF;
  --c-on-dark-line: rgba(247, 243, 236, .18);
  --c-on-dark-line-strong: rgba(247, 243, 236, .4);
  /* Renk — işlev */
  --c-wa: #1D6B50;
  --c-wa-deep: #15543E;
  --c-white: #fff;
  --c-star: #9A6F1C;
  --c-error: #8C3421;
  --c-error-line: #A3442F;
  --c-ok: #2F7D5B;
  --c-placeholder: #5F6E75;
  --c-perde: rgba(16, 38, 50, .9);      /* büyüteç (lightbox) perdesi */
  --c-cam: rgba(247, 243, 236, .92);    /* yarı saydam üst bar / sabit çubuk */
  /* Dekor — kutu köşelerindeki yarı saydam daire/halka süsleri + görsel üstü yazı perdesi */
  --c-dekor-daire: rgba(255, 253, 248, .45);         /* pastel kutuda dolu daire */
  --c-dekor-halka: rgba(255, 253, 248, .4);          /* pastel kutuda halka */
  --c-dekor-parlak: rgba(255, 253, 248, .5);         /* rozet süsü */
  --c-dekor-koyu-halka: rgba(216, 229, 235, .1);     /* koyu kutuda halka (sis) */
  --c-dekor-koyu-daire: rgba(242, 222, 216, .12);    /* koyu kutuda daire (pudra) */
  --c-gorsel-perde-0: rgba(22, 58, 76, 0);           /* görsel altı yazı perdesi — başlangıç */
  --c-gorsel-perde-1: rgba(22, 58, 76, .88);         /* görsel altı yazı perdesi — bitiş */

  /* Bağlamsal renkler — .bolum--koyu / .koyu-zemin içinde kendiliğinden döner */
  --renk-metin: var(--c-text);
  --renk-soluk: var(--c-muted);
  --renk-baslik: var(--c-brand);
  --renk-vurgu: var(--c-brand);
  --renk-cizgi: var(--c-line);
  --renk-cizgi-guclu: var(--c-line-strong);
  --renk-yuzey: var(--c-surface);
  --renk-yuzey-yari: rgba(255, 253, 248, .7);
  --renk-odak: var(--c-brand);

  /* Tipografi */
  --f-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
  --fs-h1: clamp(2.375rem, 1.5rem + 4.2vw, 4.75rem);
  --ls-etiket: .14em;

  /* Boşluk — 8px ızgara */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem;
  --s-12: 6rem;
  --s-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, .5rem + 3.2vw, 3rem);
  --container: 1240px;
  --container-dar: 760px;

  /* Yarıçap */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Gölge */
  --sh-soft: 0 1px 2px rgba(22, 58, 76, .05), 0 8px 24px -12px rgba(22, 58, 76, .14);
  --sh-lift: 0 2px 4px rgba(22, 58, 76, .06), 0 20px 40px -20px rgba(22, 58, 76, .25);

  /* Hareket */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .18s;
  --t-med: .35s;

  /* Düzen */
  --header-h: 72px;
  --cubuk-h: 72px;
  --z-cubuk: 90;
  --z-cerez: 95;
  --z-ust: 100;
  --z-atla: 200;
}

/* ==========================================================================
   3. RESET + TEMEL
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--renk-metin);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
  counter-reset: bolum;
}
main { display: block; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
iframe { border: 0; }
a { color: inherit; text-decoration: none; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
strong, b { font-weight: 600; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-serif); font-weight: 400; font-optical-sizing: auto;
  color: var(--renk-baslik);
  line-height: 1.08; letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 300; letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: 1.1875rem; line-height: 1.25; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; }
h1 strong, h2 strong { font-weight: inherit; font-style: italic; }   /* başlıkta **vurgu** → editoryal italik */

:focus-visible { outline: 3px solid var(--renk-odak); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--c-brand); color: var(--c-on-dark); }

/* ==========================================================================
   4. TİPOGRAFİ YARDIMCILARI
   ========================================================================== */
.giris { font-size: var(--fs-lg); line-height: 1.55; color: var(--renk-soluk); max-width: 56ch; }
.soluk { color: var(--renk-soluk); }
.kucuk { font-size: var(--fs-sm); }
.minik { font-size: var(--fs-xs); }
.serif { font-family: var(--f-serif); }
.etiket {
  font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--ls-etiket); text-transform: uppercase; color: var(--renk-vurgu);
}
.rakam { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--renk-soluk); font-variant-numeric: lining-nums; }

/* Akan metin (uzun yazı): paragraflar arası ritim + metin içi bağlantılar */
.metin-akis > * + * { margin-top: 1em; }
.metin-akis { max-width: 68ch; }

/* Metin içi bağlantı — bicim() çıktısındaki <a> öğeleri için */
p a, li a:not([class]), dd a:not([class]), .bag {
  color: var(--renk-vurgu); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--renk-cizgi-guclu);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
p a:hover, li a:not([class]):hover, dd a:not([class]):hover, .bag:hover { text-decoration-color: currentColor; }
p a[class], .alt a, .ust a, .ekmek a { text-decoration: none; font-weight: inherit; }

/* ==========================================================================
   5. DÜZEN — konteyner, bölüm, zeminler
   ========================================================================== */
.kap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.kap--dar { max-width: calc(var(--container-dar) + var(--gutter) * 2); }

.bolum { position: relative; padding-block: var(--s-section); background: var(--c-bg); color: var(--renk-metin); }
.bolum--siki { padding-block: calc(var(--s-section) * .6); }
.bolum--beyaz { background: var(--c-bg); }
.bolum--sis { background: var(--c-mist); }
.bolum--kum { background: var(--c-sand); }
.bolum--adacayi { background: var(--c-sage); }
.bolum--pudra { background: var(--c-powder); }
.bolum--koyu { background: var(--c-brand); }

/* Pastel zeminde ikincil metin bir ton koyulaşır, çizgiler belirginleşir */
.bolum--sis, .bolum--kum, .bolum--adacayi, .bolum--pudra {
  --renk-soluk: var(--c-muted-strong);
  --renk-cizgi: rgba(31, 78, 102, .24);
}

/* Aynı zeminli iki bölüm art arda gelirse boşluk ikiye katlanmasın */
.bolum--beyaz + .bolum--beyaz, .bolum--sis + .bolum--sis, .bolum--kum + .bolum--kum,
.bolum--adacayi + .bolum--adacayi, .bolum--pudra + .bolum--pudra, .bolum--koyu + .bolum--koyu { padding-top: 0; }

/* KOYU BAĞLAM — bölüm ya da tek bir kart (.koyu-zemin). Bağlamsal token'lar döner. */
.bolum--koyu, .koyu-zemin {
  --renk-metin: var(--c-on-dark);
  --renk-soluk: var(--c-on-dark-muted);
  --renk-baslik: var(--c-on-dark);
  --renk-vurgu: var(--c-on-dark);
  --renk-cizgi: var(--c-on-dark-line);
  --renk-cizgi-guclu: var(--c-on-dark-line-strong);
  --renk-yuzey: rgba(22, 58, 76, .45);
  --renk-yuzey-yari: rgba(247, 243, 236, .12);
  --renk-odak: var(--c-on-dark);
  color: var(--renk-metin);
}
.koyu-zemin { background: var(--c-brand); }
/* AÇIK BAĞLAM — koyu bölüm içindeki açık renkli kart için token'ları geri alır */
.acik-zemin {
  --renk-metin: var(--c-text);
  --renk-soluk: var(--c-muted);
  --renk-baslik: var(--c-brand);
  --renk-vurgu: var(--c-brand);
  --renk-cizgi: var(--c-line);
  --renk-cizgi-guclu: var(--c-line-strong);
  --renk-yuzey: var(--c-surface);
  --renk-yuzey-yari: rgba(255, 253, 248, .7);
  --renk-odak: var(--c-brand);
  color: var(--renk-metin);
}

/* Pastel döngüsü — kart/ikon zeminleri (sıra: sis → adaçayı → pudra → kum) */
.pastel--sis { background: var(--c-mist); }
.pastel--adacayi { background: var(--c-sage); }
.pastel--pudra { background: var(--c-powder); }
.pastel--kum { background: var(--c-sand); }
.pastel-dongu > :nth-child(4n+1) { --pastel: var(--c-mist); --pastel-koyu: var(--c-mist-deep); }
.pastel-dongu > :nth-child(4n+2) { --pastel: var(--c-sage); --pastel-koyu: var(--c-sage-deep); }
.pastel-dongu > :nth-child(4n+3) { --pastel: var(--c-powder); --pastel-koyu: var(--c-powder-deep); }
.pastel-dongu > :nth-child(4n+4) { --pastel: var(--c-sand); --pastel-koyu: var(--c-sand-deep); }

/* Basit ızgara kalıbı */
.izgara { display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .izgara--2, .izgara--3, .izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 2 sütunlu ara aralıkta tek kalan son kart tam satıra yayılır */
@media (min-width: 640px) and (max-width: 1039px) {
  .izgara--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .izgara--3 > .kartlar__kart--pastel:last-child:nth-child(odd) { min-height: 0; }
}

/* ==========================================================================
   6. BÖLÜM BAŞLIĞI — editoryal, numaralı (numara CSS sayacından)
   ========================================================================== */
.bolum-bas { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); }
.bolum-bas:last-child { margin-bottom: 0; }
.bolum-bas__ust {
  display: flex; align-items: center; gap: var(--s-2); margin: 0;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--ls-etiket); text-transform: uppercase; color: var(--renk-vurgu);
}
.bolum-bas__no {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.125rem;
  letter-spacing: 0; text-transform: none; font-variant-numeric: lining-nums;
}
.bolum-bas--numarali .bolum-bas__no { counter-increment: bolum; }
.bolum-bas--numarali .bolum-bas__no::before { content: counter(bolum, decimal-leading-zero); }
.bolum-bas__cizgi { flex: 1; height: 1px; max-width: 120px; background: var(--renk-cizgi-guclu); }
.bolum-bas__baslik { font-size: var(--fs-h2); max-width: 24ch; }
h1.bolum-bas__baslik { font-size: var(--fs-h1); max-width: 18ch; }
h3.bolum-bas__baslik { font-size: var(--fs-h3); }
.bolum-bas__metin { display: grid; gap: .75em; max-width: 56ch; color: var(--renk-soluk); font-size: var(--fs-lg); line-height: 1.55; }

/* sol (varsayılan): geniş ekranda başlık solda, giriş metni sağda — B'deki "split" */
@media (min-width: 900px) {
  .bolum-bas--sol.bolum-bas--metinli { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s-8); }
  .bolum-bas--sol.bolum-bas--metinli .bolum-bas__ust { grid-column: 1 / -1; }
}
/* orta */
.bolum-bas--orta { justify-items: center; text-align: center; }
.bolum-bas--orta .bolum-bas__ust { justify-content: center; }
.bolum-bas--orta .bolum-bas__cizgi { flex: none; width: 40px; }
.bolum-bas--orta .bolum-bas__baslik, .bolum-bas--orta .bolum-bas__metin { margin-inline: auto; }
/* tek sütun (dar alanlarda / ikili blok içinde) */
.bolum-bas--yigin { grid-template-columns: minmax(0, 1fr) !important; margin-bottom: var(--s-4); }

/* ==========================================================================
   7. BUTONLAR
   ========================================================================== */
.butonlar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-5); }
.butonlar--orta { justify-content: center; }
.butonlar--siki { margin-top: var(--s-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 52px; padding: .75rem 1.5rem; max-width: 100%;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  font-family: var(--f-sans); font-weight: 600; font-size: var(--fs-base); line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .ikon { width: 20px; height: 20px; }

.btn--wa { background: var(--c-wa); color: var(--c-white); }
.btn--wa:hover { background: var(--c-wa-deep); box-shadow: var(--sh-lift); }
.btn--birincil { background: var(--c-brand); color: var(--c-on-dark); }
.btn--birincil:hover { background: var(--c-brand-deep); box-shadow: var(--sh-lift); }
.btn--ikincil { border-color: var(--c-brand); color: var(--c-brand); background: transparent; }
.btn--ikincil:hover { background: var(--c-brand); color: var(--c-on-dark); }
.btn--acik { background: var(--c-on-dark); color: var(--c-brand-deep); }
.btn--acik:hover { background: var(--c-white); }

/* yazı butonu — oklu, altı çizgili bağlantı (B: link-arrow) */
.btn--yazi {
  min-height: 44px; padding: .5rem 0 .375rem; gap: .5rem;
  border: 0; border-radius: 0; color: var(--renk-vurgu); background: transparent;
  box-shadow: inset 0 -1px 0 var(--renk-cizgi-guclu);
  transition: box-shadow var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.btn--yazi:hover { transform: none; gap: .75rem; box-shadow: inset 0 -1.5px 0 currentColor; }

/* koyu zeminde butonlar */
.bolum--koyu .btn--wa, .koyu-zemin .btn--wa,
.bolum--koyu .btn--birincil, .koyu-zemin .btn--birincil { background: var(--c-on-dark); color: var(--c-brand-deep); }
.bolum--koyu .btn--wa:hover, .koyu-zemin .btn--wa:hover,
.bolum--koyu .btn--birincil:hover, .koyu-zemin .btn--birincil:hover { background: var(--c-white); }
.bolum--koyu .btn--ikincil, .koyu-zemin .btn--ikincil { border-color: rgba(247, 243, 236, .6); color: var(--c-on-dark); }
.bolum--koyu .btn--ikincil:hover, .koyu-zemin .btn--ikincil:hover { background: var(--c-on-dark); color: var(--c-brand-deep); }
/* …koyu içindeki açık kartta normale döner */
.acik-zemin .btn--wa { background: var(--c-wa); color: var(--c-white); }
.acik-zemin .btn--wa:hover { background: var(--c-wa-deep); }
.acik-zemin .btn--birincil { background: var(--c-brand); color: var(--c-on-dark); }
.acik-zemin .btn--birincil:hover { background: var(--c-brand-deep); }
.acik-zemin .btn--ikincil { border-color: var(--c-brand); color: var(--c-brand); }
.acik-zemin .btn--ikincil:hover { background: var(--c-brand); color: var(--c-on-dark); }

.btn--kucuk { min-height: 44px; padding: .5rem 1.125rem; font-size: var(--fs-sm); }
.btn--blok { width: 100%; }
@media (max-width: 479px) {
  .butonlar > .btn:not(.btn--yazi) { width: 100%; }
}

/* Oklu bağlantı (kart altı "Sayfaya gidin →") */
.ok-bag {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-weight: 600; font-size: var(--fs-sm); color: var(--renk-vurgu); text-decoration: none;
}
.ok-bag .ikon { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.ok-bag:hover .ikon, a:hover > .ok-bag .ikon { transform: translateX(4px); }
/* tüm kartı tıklanır yapar: kart position:relative olmalı */
.ok-bag--kapla::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ==========================================================================
   8. ÇİP · ROZET · DURUM
   ========================================================================== */
.cipler { display: flex; flex-wrap: wrap; gap: .5rem; }
.cip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem; border-radius: var(--r-pill);
  background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi);
  font-size: var(--fs-sm); line-height: 1.35; color: var(--renk-metin);
}
.cip--cizgi { background: transparent; border-color: var(--renk-cizgi-guclu); font-size: var(--fs-xs); font-weight: 500; padding: .25rem .625rem; color: var(--renk-vurgu); }
.cip .ikon { width: 16px; height: 16px; color: var(--renk-vurgu); }

.rozet {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--sh-soft);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--c-brand);
}
.rozet::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pastel-koyu, var(--c-sage-deep)); }
.rozet--sade::before { display: none; }

/* "Şu an açık / kapalı" çipi — acik_mi_cipi() */
.cip--durum { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; padding: .375rem .75rem; }
.cip__nokta { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c-muted); }
.cip--acik .cip__nokta { background: var(--c-ok); }
.cip--acik .cip__nokta::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--c-ok); opacity: 0;
  animation: nabiz 2.4s var(--ease) infinite;
}
.cip--kapali .cip__nokta { background: var(--c-powder-deep); }
@keyframes nabiz { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }

/* Yıldızlar — yildizlar() */
.yildizlar { display: inline-flex; gap: 3px; color: var(--c-star); }
.yildizlar .ikon { width: 20px; height: 20px; }
.bolum--koyu .yildizlar, .koyu-zemin .yildizlar { color: var(--c-sand-deep); }

/* ==========================================================================
   9. İKON
   ========================================================================== */
.ikon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon--k { width: 20px; height: 20px; }
.ikon--b { width: 32px; height: 32px; stroke-width: 1.35; }
.ikon--cb { width: 40px; height: 40px; stroke-width: 1.25; }
.ikon--dolu { fill: currentColor; stroke: none; }

/* İkon balonu — pastel/yarı saydam daire içinde ikon */
.ikon-balon {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: var(--pastel, var(--renk-yuzey-yari)); color: var(--renk-vurgu);
}
.ikon-balon--kare { width: 64px; height: 64px; border-radius: var(--r-md); }

/* ==========================================================================
   10. KART (temel kalıp — bloklar genişletir)
   ========================================================================== */
.kart {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border-radius: var(--r-lg); background: var(--renk-yuzey); color: var(--renk-metin);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.kart--cizgi { border: 1px solid var(--renk-cizgi); }
.kart--pastel { background: var(--pastel, var(--c-mist)); --renk-yuzey-yari: rgba(255, 253, 248, .7); }
.kart--tiklanir:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.kart__baslik { font-size: var(--fs-h3); }
.kart__metin { color: var(--renk-metin); max-width: 46ch; }

/* ==========================================================================
   11. FORM ALANLARI
   ========================================================================== */
.alan { display: grid; gap: .375rem; }
.alan__etiket { font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-deep); }
.alan__ipucu { font-weight: 400; color: var(--c-muted); }
.alan__girdi {
  width: 100%; min-height: 52px; padding: .75rem 1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--c-alan-cizgi); background: var(--c-paper); color: var(--c-text);
  font-size: max(1rem, var(--fs-base));   /* iOS odak yakınlaştırmasını önler */
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
.alan__girdi::placeholder { color: var(--c-placeholder); opacity: 1; }
.alan__girdi:hover { border-color: var(--c-brand); }
.alan__girdi:focus { outline: none; border-color: var(--c-brand); background: var(--c-white); box-shadow: 0 0 0 3px rgba(31, 78, 102, .2); }
.alan__girdi[aria-invalid="true"] { border-color: var(--c-error-line); box-shadow: 0 0 0 3px rgba(163, 68, 47, .14); }
textarea.alan__girdi { min-height: 128px; resize: vertical; line-height: 1.5; }
.alan__hata { font-size: var(--fs-xs); color: var(--c-error); min-height: 1.2em; }

/* ==========================================================================
   12. YARDIMCILAR
   ========================================================================== */
.gorsel-gizli {
  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;
}
.ortala { text-align: center; margin-inline: auto; }
.orta-hizala { display: flex; align-items: center; gap: var(--s-1); }
.kaydirma-yok { overflow: hidden; }
.ust-bosluk { margin-top: var(--s-5); }
.ust-bosluk--b { margin-top: var(--s-8); }
.cizgi-ust { border-top: 1px solid var(--renk-cizgi-guclu); }
.oran--dikey { aspect-ratio: 4 / 5; }
.oran--yatay { aspect-ratio: 3 / 2; }
.oran--kare { aspect-ratio: 1; }
.oran--reel { aspect-ratio: 9 / 16; }
.gorsel-kap { overflow: hidden; border-radius: var(--r-md); background: var(--c-brand-deep); }
.gorsel-kap > img { width: 100%; height: 100%; object-fit: cover; }

.atla {
  position: absolute; left: var(--s-2); top: -100px; z-index: var(--z-atla);
  background: var(--c-brand); color: var(--c-on-dark); font-weight: 600;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm);
}
.atla:focus { top: var(--s-2); }
main:focus, .cerez:focus { outline: none; }

/* Yuvarlak ok düğmesi (şerit okları vb.) */
.yuvarlak-dugme {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--renk-cizgi-guclu); background: transparent; color: var(--renk-vurgu);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.yuvarlak-dugme:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-dark); }
.bolum--koyu .yuvarlak-dugme:hover, .koyu-zemin .yuvarlak-dugme:hover { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-brand); }
.acik-zemin .yuvarlak-dugme:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-dark); }
.yuvarlak-dugme[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.yuvarlak-dugme--geri .ikon { transform: scaleX(-1); }

/* ==========================================================================
   13. SCROLL'DA BELİRME — yalnız html.js + [data-belir]; hero ASLA gizlenmez
   JS gelmezse / patlarsa: 1,2 sn sonra CSS animasyonu her şeyi görünür kılar.
   JS gözlemciyi kurunca html'e .belir-hazir ekler → emniyet animasyonu devreden çıkar.
   Kademeli gecikme: style="--gecikme:.08s"
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-belir] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--gecikme, 0s);
  }
  .js:not(.belir-hazir) [data-belir] { animation: belir-emniyet .6s var(--ease) 1.2s forwards; }
  .js [data-belir].gorundu { opacity: 1; transform: none; }
  @keyframes belir-emniyet { to { opacity: 1; transform: none; } }

  /* ilk ekran güvencesi */
  .js .hero [data-belir], .js .sayfa-hero [data-belir], .js .hero[data-belir], .js .sayfa-hero[data-belir],
  .js [data-belir-yok] [data-belir], .js .ust [data-belir] {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* ==========================================================================
   14. ÜST BAR
   ========================================================================== */
.ust {
  position: sticky; top: 0; z-index: var(--z-ust);
  background: var(--c-cam);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.ust--kaydi { border-bottom-color: var(--c-line); box-shadow: 0 6px 24px -18px rgba(22, 58, 76, .35); }
.ust__ic { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--header-h); }
.ust__logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding-block: var(--s-1); }
.ust__logo img { height: 28px; width: auto; }
.ust__eylemler { display: flex; align-items: center; gap: var(--s-1); flex: none; }

.ust-menu__liste { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem); }
.ust-menu__bag {
  position: relative; display: inline-block; padding: .75rem 0;
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); white-space: nowrap;
}
.ust-menu__bag::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; background: var(--c-brand);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease);
}
.ust-menu__bag:hover, .ust-menu__bag[aria-current="page"] { color: var(--c-brand); }
.ust-menu__bag:hover::after, .ust-menu__bag[aria-current="page"]::after { transform: scaleX(1); }
.ust-menu__alt { display: none; }

.menu-dugme {
  display: none; width: 48px; height: 48px; flex: none;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--c-brand); align-items: center; justify-content: center;
}
.menu-dugme__cizgiler { position: relative; display: block; width: 18px; height: 12px; }
.menu-dugme__cizgiler span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--t-med) var(--ease), opacity var(--t-fast); }
.menu-dugme__cizgiler span:nth-child(1) { top: 0; }
.menu-dugme__cizgiler span:nth-child(2) { top: 5.25px; }
.menu-dugme__cizgiler span:nth-child(3) { top: 10.5px; }
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] .menu-dugme__cizgiler span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* Mobil menü — üst barın altından açılan tam yükseklikte panel (B'deki gibi serif, numaralı) */
@media (max-width: 1099px) {
  .js .menu-dugme { display: inline-flex; }
  .js .ust-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--c-bg); border-top: 1px solid var(--c-line);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .js .ust-menu.acik { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .ust-menu__liste { counter-reset: menu; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-1) var(--gutter) 0; }
  .js .ust-menu__oge { border-bottom: 1px solid var(--c-line); counter-increment: menu; }
  .js .ust-menu__bag {
    display: flex; justify-content: space-between; align-items: baseline; padding: 1.125rem 0;
    font-family: var(--f-serif); font-size: 1.5rem; line-height: 1.2; color: var(--c-brand); white-space: normal;
  }
  .js .ust-menu__bag::after {
    content: counter(menu, decimal-leading-zero); position: static; height: auto; background: none; transform: none;
    font-style: italic; font-size: var(--fs-sm); color: var(--c-muted);
  }
  .js .ust-menu__bag[aria-current="page"] { font-style: italic; }
  .js .ust-menu__alt {
    display: grid; gap: var(--s-2); padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    font-size: var(--fs-sm); color: var(--c-muted);
  }
  .js .ust-menu__alt .butonlar { margin-top: 0; }
  .js .ust-menu__alt .cip { justify-self: start; }

  /* JS yoksa: menü üst barın altında yatay kaydırılabilir şerit olarak kalır */
  html:not(.js) .ust__ic { flex-wrap: wrap; row-gap: 0; }
  html:not(.js) .ust-menu { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html:not(.js) .ust-menu__liste { gap: var(--s-3); padding-bottom: var(--s-1); }
}
html.menu-acik, html.menu-acik body { overflow: hidden; }
@media (max-width: 479px) {
  .ust__wa-yazi { display: none; }
  .ust__wa { width: 48px; min-height: 48px; padding: 0; }
  .ust__logo img { height: 24px; }
}

/* ==========================================================================
   15. BREADCRUMB (sayfa-hero bloğu basar)
   ========================================================================== */
.ekmek { font-size: var(--fs-xs); font-weight: 500; color: var(--renk-soluk); }
.ekmek__liste { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.ekmek__oge { display: inline-flex; align-items: center; gap: .5rem; }
.ekmek__oge + .ekmek__oge::before { content: "/"; font-family: var(--f-serif); font-style: italic; color: var(--renk-cizgi-guclu); }
.ekmek__oge a { display: inline-block; padding-block: .75rem; color: var(--renk-vurgu); box-shadow: inset 0 -1px 0 transparent; transition: box-shadow var(--t-fast); }
.ekmek__oge a:hover { text-decoration: underline; text-underline-offset: .2em; }
.ekmek__oge [aria-current="page"] { color: var(--renk-soluk); }

/* ==========================================================================
   16. ALT BİLGİ
   ========================================================================== */
.alt {
  --renk-metin: var(--c-on-dark-muted); --renk-baslik: var(--c-on-dark); --renk-vurgu: var(--c-on-dark);
  --renk-soluk: var(--c-on-dark-muted); --renk-odak: var(--c-on-dark);
  --renk-cizgi: var(--c-on-dark-line); --renk-cizgi-guclu: var(--c-on-dark-line-strong);
  background: var(--c-brand-deep); color: var(--c-on-dark-muted);
  padding-top: var(--s-10); font-size: var(--fs-sm);
}
.alt__izgara { display: grid; gap: var(--s-6); padding-bottom: var(--s-8); }
.alt__logo { display: inline-flex; min-height: 44px; align-items: center; }
.alt__logo img { height: 32px; width: auto; }
.alt__tanim { margin-top: var(--s-3); max-width: 38ch; line-height: 1.65; }
.alt__baslik {
  font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--ls-etiket); text-transform: uppercase; color: var(--c-on-dark); margin-bottom: var(--s-2);
}
.alt__baslik--ara { margin-top: var(--s-4); }
.alt__liste { display: grid; gap: 0; justify-items: start; }
.alt__liste a, .alt__bag { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding-block: .375rem; color: inherit; transition: color var(--t-fast); }
.alt__liste a:hover, .alt__bag:hover { color: var(--c-white); }
.alt__liste a[aria-current="page"] { color: var(--c-on-dark); }
.alt__saatler { display: grid; gap: .375rem; margin: 0; }
.alt__saatler div { display: flex; justify-content: space-between; gap: var(--s-2); max-width: 260px; }
.alt__saatler dd { font-variant-numeric: tabular-nums; color: var(--c-on-dark); }
.alt__adres { margin-top: var(--s-2); line-height: 1.6; }
.alt__durum { margin-top: var(--s-2); }
.alt .cip--durum { background: rgba(247, 243, 236, .08); border-color: var(--c-on-dark-line); color: var(--c-on-dark); }
.alt .cip--acik .cip__nokta, .alt .cip--acik .cip__nokta::after { background-color: var(--c-sage-deep); border-color: var(--c-sage-deep); }
.alt .cip--acik .cip__nokta::after { background: none; }
.sosyal { display: flex; gap: var(--s-1); margin-top: var(--s-3); }
.sosyal a {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--renk-cizgi-guclu);
  display: grid; place-items: center; color: var(--renk-vurgu);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sosyal__harf { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.sosyal a:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-dark); }
.alt .sosyal a:hover, .bolum--koyu .sosyal a:hover, .koyu-zemin .sosyal a:hover { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-brand-deep); }
.alt__kardes { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-on-dark-line); max-width: 38ch; font-size: var(--fs-xs); line-height: 1.6; }
.alt__kardes a { color: var(--c-on-dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-on-dark-line-strong); text-underline-offset: .2em; }
.alt__kardes a:hover { text-decoration-color: currentColor; }
.alt__yasal { border-top: 1px solid var(--c-on-dark-line); padding-block: var(--s-4); display: grid; gap: var(--s-2); font-size: var(--fs-xs); line-height: 1.6; }
.alt__yasal-not { max-width: 90ch; }
.alt__telif { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); color: var(--c-on-dark); }
.alt__telif a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--c-on-dark-line-strong); text-underline-offset: .2em; }
.alt__telif a:hover { text-decoration-color: currentColor; }
@media (min-width: 700px) { .alt__izgara { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .alt__izgara { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--s-8); } }

/* ==========================================================================
   17. MOBİL SABİT ÇUBUK
   ========================================================================== */
.sabit-cubuk { display: none; }
@media (max-width: 767px) {
  .alt { padding-bottom: calc(var(--cubuk-h) + env(safe-area-inset-bottom, 0px)); }
  .sabit-cubuk {
    position: fixed; z-index: var(--z-cubuk); left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-1);
    padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
    background: var(--c-cam); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-line);
  }
  .sabit-cubuk .btn { min-height: 52px; padding-inline: 1rem; }
  .sabit-cubuk .btn:hover { transform: none; }
  .sabit-cubuk .btn--ikincil { background: var(--c-surface); }
  .sabit-cubuk .btn--ikincil:hover { background: var(--c-brand); }
}

/* ==========================================================================
   18. ÇEREZ BANDI — altta, mobil sabit çubuğun ÜSTÜNDE; sayfayı kilitlemez
   ========================================================================== */
.cerez {
  position: fixed; z-index: var(--z-cerez);
  left: var(--s-2); right: var(--s-2); bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  max-width: 760px; margin-inline: auto;
  max-height: calc(100vh - var(--header-h) - var(--cubuk-h) - 2rem); overflow-y: auto;
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-lift);
  padding: var(--s-3);
}
.cerez__ic { display: grid; gap: var(--s-2); }
.cerez__baslik { font-family: var(--f-serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.015em; color: var(--c-brand); }
.cerez__metin { font-size: var(--fs-sm); line-height: 1.55; color: var(--c-muted); }
.cerez__dugmeler { display: grid; gap: var(--s-1); grid-template-columns: 1fr; }
.cerez__dugmeler .btn { width: 100%; }
.cerez__dugmeler .btn:hover { transform: none; }
@media (min-width: 560px) { .cerez__dugmeler { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .cerez { padding: var(--s-3) var(--s-4); }
}
@media (max-width: 767px) {
  .cerez { left: var(--s-1); right: var(--s-1); bottom: calc(var(--cubuk-h) + var(--s-1) + env(safe-area-inset-bottom, 0px)); padding: var(--s-2); border-radius: var(--r-md); }
  .cerez__baslik { font-size: 1.125rem; }
  .cerez__metin { font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: no-preference) {
  .cerez:not([hidden]) { animation: cerez-gir .45s var(--ease) both; }
  @keyframes cerez-gir { from { opacity: 0; transform: translateY(16px); } }
}

/* ==========================================================================
   19. BÜYÜTEÇ (lightbox) — tek <dialog data-lightbox-kutu>
   ========================================================================== */
.buyutec {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--c-on-dark); overflow: hidden;
}
.buyutec::backdrop { background: var(--c-perde, rgba(16, 38, 50, .9)); }   /* yedek: eski tarayıcıda ::backdrop :root değişkenini miras almaz */
.buyutec[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; }
.buyutec__sahne { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; padding: calc(var(--s-8) + env(safe-area-inset-top, 0px)) var(--s-2) var(--s-2); }
.buyutec__gorsel { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); box-shadow: var(--sh-lift); }
.buyutec__alt { display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; min-height: 56px; padding: 0 var(--s-8) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--fs-sm); color: var(--c-on-dark-muted); }
.buyutec__sayac { font-family: var(--f-serif); font-style: italic; color: var(--c-on-dark); white-space: nowrap; }
.buyutec__dugme {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(247, 243, 236, .12); border: 1px solid var(--c-on-dark-line-strong); color: var(--c-on-dark);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.buyutec__dugme:hover { background: var(--c-on-dark); color: var(--c-brand-deep); }
.buyutec__dugme:focus-visible { outline-color: var(--c-on-dark); }
.buyutec__dugme--kapat { top: calc(var(--s-2) + env(safe-area-inset-top, 0px)); right: var(--s-2); }
.buyutec__dugme--geri { left: var(--s-2); top: 50%; transform: translateY(-50%); }
.buyutec__dugme--ileri { right: var(--s-2); top: 50%; transform: translateY(-50%); }
.buyutec__dugme--geri .ikon { transform: scaleX(-1); }
.buyutec__dugme[disabled] { opacity: .4; cursor: default; }
.buyutec__carpi { position: relative; display: block; width: 18px; height: 18px; }
.buyutec__carpi::before, .buyutec__carpi::after { content: ""; position: absolute; left: 0; top: 8.25px; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.buyutec__carpi::after { transform: rotate(-45deg); }
html.buyutec-acik { overflow: hidden; }
[data-lightbox] { cursor: zoom-in; }

/* ==========================================================================
   20. HARİTA YER TUTUCU ([data-harita]) — iskelet; blok stili genişletir
   ========================================================================== */
[data-harita] { position: relative; }
[data-harita] > iframe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* ==========================================================================
   21. HAREKET AZALTMA
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ==========================================================================
   22. YAZDIRMA
   ========================================================================== */
@media print {
  :root { --s-section: 1.5rem; }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; font-size: 11pt; overflow: visible; }
  .ust, .sabit-cubuk, .cerez, .atla, .buyutec, .menu-dugme, .sosyal, [data-kaydir-geri], [data-kaydir-ileri], [data-harita] button, iframe { display: none !important; }
  [data-belir] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .bolum, .bolum--koyu, .koyu-zemin, .alt {
    background: #fff !important; color: #000 !important;
    --renk-metin: #000; --renk-soluk: #333; --renk-baslik: #000; --renk-vurgu: #000; --renk-cizgi: #bbb; --renk-cizgi-guclu: #888;
  }
  .alt { padding: 1rem 0 0; border-top: 1px solid #888; }
  .alt__logo, .alt__izgara nav { display: none; }
  .btn { border: 1px solid #888 !important; background: none !important; color: #000 !important; box-shadow: none !important; min-height: 0; padding: .25rem .75rem; }
  .kart, .bolum-bas, figure, li, details { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; font-weight: 400; word-break: break-all; }
  main a[href^="https://wa.me"]::after, main a[data-lightbox]::after { content: ""; }
  details > * { display: block !important; }
}