/* ============================================================
   ARDARİUM — TEMEL
   Renkler, yazı tipleri, iskelet, header/menü, imleç, bileşenler.
   Animasyonlar ayrı dosyada: stil/animasyon.css

   ÖLÇÜLER REFERANSIN KENDİ KAYNAĞINDAN. caffegilli.com'un CSS kaynak
   haritası açık bırakılmış; aşağıdaki kırılma noktaları, konteyner
   genişlikleri, satır yükseklikleri ve başlık ölçeği o sitenin
   _config.scss ve _typography.scss dosyalarından birebir alındı.
   Renkler ve yazı tipleri BİZİM — onlarınki ücretli (Cosen,
   greycliff-cf) ve markası onların.

   Envanter numaraları (B3, D1, F1 …) ANIMASYON-ENVANTERI.md'ye
   gönderme yapar. Her animasyonun karşılığı numarasıyla işaretli.
   ============================================================ */

/* ---------- 1) DEĞİŞKENLER ---------- */

:root {
  /* Renkler — burayı değiştirirsen bütün site değişir */
  --colZemin:      #FAF8F5;   /* sıcak kırık beyaz */
  --colMurekkep:   #18191B;   /* ana yazı ve çizgiler */
  --colSonuk:      #6E6A64;   /* ikincil yazı */
  --colVurgu:      #B4543A;   /* kiremit — düğme, vurgu, seçili hâl */
  --colVurguAcik:  #E4D9CF;
  --colGri:        #D6D2CC;
  --colBeyaz:      #FAF8F5;
  --colSiyah:      #0C0C0C;

  --colBg:         var(--colZemin);
  --colText:       var(--colMurekkep);
  --colLink:       var(--colMurekkep);
  --colLinkHover:  var(--colVurgu);

  /* Ölçüler — referansın _config.scss'inden */
  --fontSize: 1;
  --lineHeight: 1.4;
  --titleSize: 3.4em;
  /* ARALIK MERDİVENİ REFERANSIN KENDİSİNDEN.
     caffegilli.com'un satır içi <style>'ında aynen şu duruyor:
       html            --vpad: 3rem    --container-pad: vpad/2
       ≥36em           --vpad: 2.1rem  --container-pad: vpad/1.5
       ≥50em           --vpad: 2.8rem
       ≥60em           --vpad: 3.08rem
     Bizimki 2.5rem / 1.5rem'di; ölçüp gördük (arac/olcum-karsilastir.cjs:
     iç boşluk 32.85 px yerine 26.67 px çıkıyordu). Artık birebir. */
  --vpad: 3rem;                      /* bölüm iç boşluğunun birimi */
  --container-maxWidth: 75rem;       /* 1200px */
  --container-maxWidth-dar: 60rem;   /* 960px */
  --container-pad: calc(var(--vpad) / 2);

  /* Geçiş reçeteleri (envanter B3 / B4) */
  --aniTime: .3s;
  --aniEgri: cubic-bezier(.445, .05, .55, .95);
  --aniTimeUzun: 1.2s;
  --aniEgriUzun: cubic-bezier(.645, .045, .355, 1);

  /* JS'in yazdığı ölçüler */
  --header-height: 0;
  --hH: 0;
  --menuPage-height: 0px;
  --breadcrumbs-height: 0px;
}

@media screen and (min-width: 36em) {
  :root { --vpad: 2.1rem; --container-pad: calc(var(--vpad) / 1.5); }
}
@media screen and (min-width: 50em) { :root { --vpad: 2.8rem; } }
@media screen and (min-width: 60em) { :root { --vpad: 3.08rem; } }

/* Yazı tipleri: referansın Cosen (başlık) + greycliff-cf (gövde)
   ikilisinin ücretsiz en yakın karşılıkları.
   - Archivo: kondens ayarlanabilen grotesk — Cosen'in dar, köşeli
     yuvarlaklı büyük harf dilini karşılıyor.
   - Jost: geometrik gövde yazısı — greycliff-cf'in karşılığı. */
:root {
  --fontBaslik: 'Archivo', 'Arial Narrow', sans-serif;
  --fontGovde:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2) SIFIRLAMA ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: none;
  scroll-behavior: auto;           /* yumuşak kaydırmayı JS yapıyor */
}

body {
  margin: 0;
  background: var(--colBg);
  color: var(--colText);
  font-family: var(--fontGovde);
  font-size: calc(var(--fontSize) * 1rem);
  line-height: var(--lineHeight);
  font-weight: 400;
  /* clip, hidden DEĞİL: hidden bir kaydırma kabı yaratıyor ve
     içerideki position:sticky ölüyor. clip kırpıyor ama kap
     yaratmıyor. */
  overflow-x: clip;
}

/* Menü açıkken sayfa kaymasın (referans: .m-open body) */
html.m-acik body { overflow: hidden; }

img, video, picture, svg { display: block; max-width: 100%; }
img, video { height: auto; }

/* Referansta bağlantı da genel geçiş reçetesini kullanıyor
   (.3s cubic-bezier(.445,.05,.55,.95), özellik: all). Bizde yoktu:
   ölçümde bağlantı geçişi 0s çıkıyordu. */
a { color: var(--colLink); text-decoration: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  a {
    transition: var(--aniTime, .3s) var(--aniEgri);
    transition-property: var(--aniProp, all);
  }
}
a:hover { color: var(--colLinkHover); }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { padding-left: 1.5em; }
nav ul, nav ol { list-style: none; padding-left: 0; margin: 0; }

hr { border: 0; border-top: 1px solid var(--colGri); margin: calc(var(--vpad) / 2) 0; }

:focus-visible { outline: 2px solid var(--colVurgu); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* Ekran okuyucuya görünür, göze görünmez */
.gizli-yazi {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* İçeriğe atla bağlantısı */
.atla {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.atla:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: auto;
  clip: auto; margin: 0; padding: .6em 1em; z-index: 99999;
  background: var(--colMurekkep); color: var(--colZemin);
}

/* ---------- 3) TİPOGRAFİ (referansın _typography.scss ölçüleri) ---------- */

.bolum__baslik1, .bolum__baslik2, .bolum__baslik3,
.bolum__baslik4, .bolum__baslik5 {
  font-family: var(--fontBaslik);
  font-variation-settings: 'wdth' 88;
  font-weight: 500;
  font-size: var(--fontSize, 1em);
  line-height: 1;
  text-transform: uppercase;
  color: var(--colBaslik, inherit);
  text-wrap: balance;
  margin: calc(var(--vpad) / 2) 0 calc(var(--vpad) / 4);
}
.bolum__baslik1:first-child, .bolum__baslik2:first-child,
.bolum__baslik3:first-child, .bolum__baslik4:first-child,
.bolum__baslik5:first-child,
.bolum__ustbaslik + [class*="bolum__baslik"] { margin-top: 0; }
.bolum__baslik1:last-child, .bolum__baslik2:last-child,
.bolum__baslik3:last-child { margin-bottom: 0; }

.bolum__baslik1 { --fontSize: clamp(calc(var(--titleSize) / 1.5), 4vw,   var(--titleSize)); }
.bolum__baslik2 { --fontSize: clamp(calc(var(--titleSize) / 1.8), 3.4vw, calc(var(--titleSize) / 1.4)); }
.bolum__baslik3 { --fontSize: clamp(calc(var(--titleSize) / 2),   3vw,   calc(var(--titleSize) / 1.6)); }
.bolum__baslik4 { --fontSize: clamp(calc(var(--titleSize) / 2.5), 1.5vw, calc(var(--titleSize) / 2.2)); }
.bolum__baslik5 { --fontSize: clamp(calc(var(--titleSize) / 2.8), 1.2vw, calc(var(--titleSize) / 2.5)); }

@media screen and (max-width: 48em) {
  .bolum__baslik1, .bolum__baslik2, .bolum__baslik3 {
    word-wrap: break-word; hyphens: auto;
  }
}

.bolum__ustbaslik {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(calc(var(--titleSize) / 3.4), 1.1vw, calc(var(--titleSize) / 3));
  color: var(--colSonuk);
  margin: 0 0 .8em;
}

.bolum__altbaslik {
  font-size: clamp(calc(var(--titleSize) / 2.5), 2vw, calc(var(--titleSize) / 2));
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 .5em;
}

.bolum__yazi p { margin: 0 0 1em; max-width: 62ch; }
.bolum__yazi p:last-child { margin-bottom: 0; }

/* İtalik başlıklarda yazı tipi değişmiyor (referansta da öyle) */
.bolum__baslik1 em, .bolum__baslik1 i { font-style: inherit; }

/* ---------- 4) KONTEYNER VE İSKELET ---------- */

.kap {
  width: 100%;
  max-width: calc(var(--container-maxWidth) + var(--container-pad) * 2);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.kap--dar { max-width: calc(var(--container-maxWidth-dar) + var(--container-pad) * 2); }
.kap--tam { max-width: none; }

.sayfa {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
  overflow-x: clip;      /* bkz. body — sticky icin hidden olamaz */
}

.sayfa__icerik { flex: 1 0 auto; }
.sayfa__footer  { flex: 0 0 auto; margin-top: auto; }

/* Açılışta içerik saydam başlıyor, perde kalkınca beliriyor (envanter B2) */
.sayfa__icerik, .sayfa__footer { opacity: 0; }
.yuklendi .sayfa__icerik { opacity: 1; transition: opacity .3s ease-in; }
.yuklendi .sayfa__footer  { opacity: 1; transition: opacity .3s ease-in; }

/* ---------- 5) YÜKLEME PERDESİ (envanter B1) ---------- */

.perde {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--colBg);
  display: grid; place-items: center;
  transition: opacity .5s var(--aniEgri), visibility .5s;
}
.perde.kapali { opacity: 0; visibility: hidden; }

/* Üç çubuklu dalga — referansın l4 kare dizisi birebir */
.perde__gosterge {
  width: 45px; aspect-ratio: 1;
  --c: no-repeat linear-gradient(var(--colMurekkep) calc(50% - 10px), transparent 0 calc(50% + 10px), var(--colMurekkep) 0);
  background: var(--c) 0 100%, var(--c) 50% 100%, var(--c) 100% 100%;
  background-size: 20% calc(200% + 20px);
  animation: perde-dalga 1s linear infinite;
}
@keyframes perde-dalga {
  33% { background-position: 0 50%,  50% 100%, 100% 100%; }
  50% { background-position: 0 0,    50% 50%,  100% 100%; }
  66% { background-position: 0 0,    50% 0,    100% 50%;  }
  to  { background-position: 0 0,    50% 0,    100% 0;    }
}

/* ---------- 6) ÖZEL İMLEÇ (envanter C1–C5) ---------- */

.imlec {
  --size: 5em;
  --iconSize: 1.5em;
  position: fixed; left: 0; top: 0;
  width: var(--size); height: var(--size);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  color: var(--imlecYazi, var(--colMurekkep));
}
.dokunmatik .imlec { display: none; }

.imlec::before, .imlec::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  transform: var(--transform, scale3d(.3, .3, 1));
  opacity: 0;
  transition: var(--aniTime) var(--aniEgri);
  transition-property: transform, opacity;
  z-index: 1;
}
.imlec::before { background: var(--imlecZemin, var(--colVurgu)); }
.imlec::after  { border: 1px solid var(--imlecKenar, var(--colMurekkep)); transition-delay: .1s; }

/* Üstüne gelince iki katman peş peşe açılıyor (::after .1 sn geç) */
.imlec.uzerinde::before, .imlec.uzerinde::after,
.imlec[class*="imlec-"]::before, .imlec[class*="imlec-"]::after {
  --transform: scale3d(1, 1, 1);
  opacity: var(--imlecAlfa, .6);
}

.imlec__yazi {
  position: absolute; left: 50%; top: 50%;
  transform: translate3d(-50%, -50%, 0);
  max-width: 7.5em;
  font-size: .85rem; line-height: 1.2; text-align: center;
  color: var(--imlecYazi, var(--colMurekkep));
  opacity: 0;
  transition: opacity var(--aniTime) var(--aniEgri);
  z-index: 2;
}
.imlec.uzerinde .imlec__yazi,
.imlec[class*="imlec-"] .imlec__yazi { opacity: 1; }

.imlec.beyaz { --imlecZemin: #fff; --imlecKenar: #fff; --imlecYazi: var(--colMurekkep); }
.imlec.koyu  { --imlecZemin: #fff; --imlecKenar: var(--colMurekkep); --imlecYazi: var(--colMurekkep); }
.imlec.siyah { --imlecZemin: var(--colSiyah); --imlecKenar: var(--colMurekkep); --imlecYazi: #fff; --imlecAlfa: 1; }
.imlec.buyuk { --size: 8em; }
.imlec.gizle::before, .imlec.gizle::after,
.imlec.kapali::before, .imlec.kapali::after {
  opacity: 0 !important; transform: scale3d(0, 0, 1) !important;
}

/* ---------- 7) HEADER (envanter D1–D6) ---------- */

.sayfa__header {
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 101;
  background: transparent;
  color: var(--colText);
  --colBurger: var(--colText);
  font-size: calc(var(--fontSize) * 1em);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .sayfa__header {
    transition: var(--aniTime) var(--aniEgri);
    transition-property: transform;
  }
}

/* D1 — kaydırınca zemin beliriyor */
.sayfa__header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--colBg);
  opacity: 0;
  transition: opacity var(--aniTime) var(--aniEgri);
}
.mat .sayfa__header::before,
.sayfa--bannersiz .sayfa__header::before { opacity: 1; }

/* D2 — aşağı kaydırınca header yukarı kaçıyor */
.header-yukari .sayfa__header { transform: translate3d(0, -100%, 0); }

/* Menü açıkken header rengi dönüyor */
.m-acik .sayfa__header { --colBurger: var(--colBeyaz); color: var(--colBeyaz); }
/* ve yerinde duruyor: D2 yukarı kaçırmış olsa bile menü açıkken
   geri iniyor, yoksa çarpıya dönüşen burger ekran dışında kalıyor. */
.m-acik .sayfa__header { transform: none; }
/* SIRALAMA. Üç şey aynı yerde: menü perdesi (.menu__kap, header'ın
   İÇİNDE, z-index 100), header şeridi (z-index 6) ve menüyü açan koyu
   daire (burger'ın ::before'u, yani şeridin içinde).
     - Şerit perdenin üstüne çıkmazsa çarpıya basılamıyor.
     - Şerit üste çıkınca bu sefer koyu daire menü yazılarının üstünü
       örtüyor ve menü hiç görünmüyor.
   Çözüm: liste en üstte (120), şerit ortada (110), daire onun altında.
   Perde tıklamayı yutmasın diye pointer-events kapalı; yalnız listenin
   kendisi tıklanabilir, böylece çarpı da altındaki şeride ulaşıyor. */
.m-acik .header__kap { z-index: 110; }
/* html.m-acik: aşağıdaki ".m-acik .menu__kap { pointer-events: auto }"
   kuralı dosyada daha sonra geldiği için eşit özgüllükte olan kuralı
   eziyordu; bu seçici (0,2,1) onu geçiyor. */
html.m-acik .menu__kap   { z-index: 120; pointer-events: none; }
html.m-acik .menu__liste { pointer-events: auto; }
.m-acik .sayfa__header::before { opacity: 0; }

.header__kap {
  position: relative; z-index: 6;
  display: flex; flex-flow: row nowrap;
  align-items: center; justify-content: space-between;
  padding: .5em var(--container-pad);
}
@media screen and (min-width: 36em) {
  .header__kap { padding-top: 1em; padding-bottom: 1em; }
}

.header__araclar {
  display: flex; align-items: center; gap: 1em;
  min-width: 26%;
  list-style: none; margin: 0; padding: 0;
  line-height: 1.1;
}
.header__araclar--sag { justify-content: flex-end; gap: .5em; }
@media screen and (min-width: 340px) { .header__araclar { min-width: 35%; } }
@media screen and (min-width: 36em)  { .header__araclar { min-width: 20%; } .header__araclar--sag { gap: .75em; } }

/* İkinci araç 340px altında gizli (referanstaki davranış) */
.header__arac + .header__arac { display: none; }
@media screen and (min-width: 340px) { .header__arac + .header__arac { display: block; } }

/* Sol gruptaki "Koleksiyon" butonu 30em'e kadar kapalı. Referans burada
   "Shop" yazıyor (55 px) ve 340px'te açıyor; bizim kelimemiz 110 px,
   375 px ekranda burger+buton 154 px istiyor ve ortadaki logonun 38 px
   altına giriyordu. Kural yalnız SOL gruba: sağdaki hesap ve sepet
   ikonları telefonda durmalı. */
@media screen and (max-width: 29.99em) {
  .header__kap > .header__araclar:first-child .header__arac + .header__arac { display: none; }
}

/* D6 — logo. Tek SVG; rengi currentColor olduğu için menü açılınca
   header'ın rengiyle birlikte dönüyor, iki ayrı dosyaya gerek yok. */
.header__logo { display: flex; }
.header__logo a {
  display: flex; flex-direction: column; align-items: center; gap: .35em;
  color: inherit;
}
.header__logo svg { width: 74px; height: auto; }
.header__logo__ad {
  font-family: var(--fontBaslik);
  font-variation-settings: 'wdth' 88;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-indent: .28em;   /* harf aralığının son boşluğunu ortala */
}
@media screen and (min-width: 36em) {
  .header__logo svg { width: 104px; }
  .header__logo__ad { font-size: .95rem; }
}

/* ---------- 8) BURGER VE MENÜ (envanter D3–D5, D7) ---------- */

.menu__acici {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
.menu__acici__kap { position: relative; flex: 0 0 auto; }

/* D5 — menüyü açan daire perdesi */
.menu__acici__kap::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10vmax; height: 10vmax;
  margin: 0; border-radius: 50%;
  background: var(--colMurekkep);
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  opacity: 0;
  z-index: -1;
  transition: transform .6s var(--aniEgriUzun), opacity .4s var(--aniEgri);
}
.m-acik .menu__acici__kap::before {
  transform: translate3d(-50%, -50%, 0) scale3d(40, 40, 1);
  opacity: 1;
}

/* D3 — burger */
.burger {
  display: block; position: relative;
  width: 2em; margin: 8px 0;
  user-select: none;
}
@media only screen and (min-width: 430px) { .burger { width: 3em; } }
.burger u, .burger::before, .burger::after {
  display: block; width: 100%; height: 2px;
  background-color: var(--colBurger);
  border-radius: 1px;
  transform-origin: 50% 50%;
  text-decoration: none;
  transition-duration: .3s;
  transition-property: all;
}
.burger::before, .burger::after { content: ""; position: absolute; }
.burger::before { top: -8px; }
.burger::after  { top: 8px; }

/* Menü açık: orta çubuk sönüyor, ötekiler 15° eğik çarpıya gidiyor.
   45 DEĞİL 15 — referansın kendi değeri, kasıtlı yumuşak çarpı. */
.m-acik .burger u { opacity: 0; }
.m-acik .burger::before { transform: translate3d(0, 8px, 0) rotate(-15deg); }
.m-acik .burger::after  { transform: translate3d(0, -8px, 0) rotate(15deg); }

/* D4 — fareli cihazda hover'da çubuklar birbirine yaklaşıyor */
.fareli:not(.m-acik) .menu__acici:hover .burger::before { transform: translate3d(0, 2px, 0); }
.fareli:not(.m-acik) .menu__acici:hover .burger::after  { transform: translate3d(0, -2px, 0); }

.menu__etiket {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  margin-left: .9em;
}

/* Açılan tam ekran menü */
.menu__kap {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s var(--aniEgri), visibility .45s;
}
.m-acik .menu__kap { opacity: 1; visibility: visible; pointer-events: auto; }

.menu__liste {
  list-style: none; margin: 0; padding: 0;
  text-align: center;
  color: var(--colBeyaz);
}
.menu__liste > li { overflow: hidden; }
.menu__liste a {
  display: block;
  font-family: var(--fontBaslik);
  font-variation-settings: 'wdth' 88;
  font-weight: 500;
  font-size: clamp(1.8rem, 6vw, 4rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--colBeyaz);
  padding: .06em 0;
  transform: translate3d(0, 110%, 0);
  transition: transform .8s var(--aniEgriUzun), color var(--aniTime) var(--aniEgri);
}
.m-acik .menu__liste a { transform: none; }
.menu__liste a:hover { color: var(--colVurgu); }
.menu__liste li.aktif > a { color: var(--colVurgu); }
/* Sırayla giriyorlar */
.menu__liste > li:nth-child(1) a { transition-delay: .08s; }
.menu__liste > li:nth-child(2) a { transition-delay: .16s; }
.menu__liste > li:nth-child(3) a { transition-delay: .24s; }
.menu__liste > li:nth-child(4) a { transition-delay: .32s; }
.menu__liste > li:nth-child(5) a { transition-delay: .40s; }
.menu__liste > li:nth-child(6) a { transition-delay: .48s; }
.menu__liste > li:nth-child(7) a { transition-delay: .56s; }
.menu__liste > li:nth-child(8) a { transition-delay: .64s; }

.menu__dil { position: relative; z-index: 10; }
.menu__dil a {
  display: block; padding: .3em;
  text-transform: uppercase; font-size: .8rem; letter-spacing: .1em;
  color: inherit;
  transition: var(--aniTime) var(--aniEgri);
}

.menu__magaza { z-index: 10; }
.menu__magaza ul { display: flex; align-items: center; gap: .75em; }
.menu__magaza a { display: flex; align-items: center; justify-content: center; color: inherit; }
.menu__magaza svg { width: 1.25em; height: 1.25em; }

/* Sepet sayacı */
.sepet-sayi {
  display: inline-grid; place-items: center;
  min-width: 1.35em; height: 1.35em; padding: 0 .3em;
  margin-left: .35em;
  border-radius: 1em;
  background: var(--colVurgu); color: var(--colBeyaz);
  font-size: .62rem; font-weight: 600; line-height: 1;
}

/* ---------- 9) YAN PANEL / SEPET ÇEKMECESİ (envanter D8, I9) ---------- */

.yan__kap {
  position: fixed; right: 0; bottom: 0;
  top: calc(var(--header-height, 0) * 1px);
  width: 90%; z-index: 100;
  transform: translate3d(100%, 0, 0);
  transition: transform .5s var(--aniEgriUzun);
  background: var(--colZemin);
  border-left: 1px solid var(--colGri);
  display: flex; flex-direction: column;
}
@media screen and (min-width: 37.5em) { .yan__kap { max-width: 36em; } }
.yan-acik .yan__kap { transform: none; }

.yan__perde {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(12, 12, 12, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--aniEgri), visibility .4s;
}
.yan-acik .yan__perde { opacity: 1; visibility: visible; }

.yan__ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2em var(--container-pad);
  border-bottom: 1px solid var(--colGri);
}
.yan__icerik { flex: 1 1 auto; overflow-y: auto; padding: var(--container-pad); }
.yan__alt { border-top: 1px solid var(--colGri); padding: var(--container-pad); }

/* I9 — yükleniyor göstergesi (üç nokta) */
.zipla { display: inline-flex; gap: .35em; }
.zipla i {
  width: .5em; height: .5em; border-radius: 50%;
  background: var(--colMurekkep);
  animation: zipla-gecikme 1.4s infinite ease-in-out both;
}
.zipla i:nth-child(1) { animation-delay: -.32s; }
.zipla i:nth-child(2) { animation-delay: -.16s; }
@keyframes zipla-gecikme {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ---------- 10) DÜĞMELER (envanter I1) ---------- */

.dugme {
  --p: .9em; --ph: 1.6em; --pr: 1.4em;
  position: relative;
  display: inline-flex; align-items: center;
  padding: var(--p) var(--ph);
  border: 1px solid var(--colMurekkep);
  border-radius: 2em;
  overflow: hidden;
  font-family: var(--fontBaslik);
  font-variation-settings: 'wdth' 92;
  font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--colMurekkep);
  background: transparent;
  cursor: pointer;
  transition: all var(--aniTime) var(--aniEgri), font-style 1ms;
}
.dugme::before {
  content: "→";
  position: absolute; left: 0; top: 50%;
  transform: translate3d(-100%, -50%, 0);
  opacity: 0;
  padding-left: var(--ph);
  transition: opacity var(--aniTime) var(--aniEgri);
}
.dugme:hover, a:hover > .dugme {
  color: var(--colBeyaz);
  background: var(--colMurekkep);
  padding-left: calc(var(--p) + var(--ph) + var(--pr));
  padding-right: calc(var(--p) + var(--ph));
}
.dugme:hover::before, a:hover > .dugme::before {
  opacity: 1;
  animation: dugme-ok .8s forwards;
}
/* Ok sağdan çıkıp SOLDAN geri giriyor — referansın kendi reçetesi */
@keyframes dugme-ok {
  50%     { left: 100%; transform: translate3d(0, -50%, 0); }
  50.001% { left: 0;    transform: translate3d(-100%, -50%, 0); }
  100%    { left: 0;    transform: translate3d(0, -50%, 0); }
}

.dugme--dolu { background: var(--colMurekkep); color: var(--colBeyaz); }
.dugme--dolu:hover { background: var(--colVurgu); border-color: var(--colVurgu); }
.dugme--vurgu { background: var(--colVurgu); border-color: var(--colVurgu); color: var(--colBeyaz); }
.dugme--kucuk { --p: .6em; --ph: 1.1em; font-size: .7rem; }

/* I2 — "devamını oku" bağlantısı: aynı ok reçetesi, sadece fareli cihazda */
.oku {
  position: relative;
  display: inline-block;
  padding-right: 2em;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  border-bottom: 2px solid;
  transition: all var(--aniTime) var(--aniEgri);
}
.oku::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  opacity: 0;
  transition: opacity var(--aniTime) var(--aniEgri);
}
.fareli .oku:hover, .fareli a:hover > .oku {
  padding-left: 2em; padding-right: 0;
  color: inherit;
}
.fareli .oku:hover::before, .fareli a:hover > .oku::before {
  opacity: 1;
  animation: oku-ok .8s forwards;
}
@keyframes oku-ok {
  50%     { left: 100%; transform: translate3d(0, 0, 0); }
  50.001% { left: 0;    transform: translate3d(-100%, 0, 0); }
  100%    { left: 0;    transform: translate3d(0, 0, 0); }
}

/* ---------- 11) ANAHTAR (envanter I14) ---------- */

.anahtar {
  display: block; position: relative;
  width: 3em; height: 1.5em;
  border-radius: 2em;
  background: var(--colSiyah);
  font-size: .7em;
  cursor: pointer;
}
@media screen and (min-width: 36em) { .anahtar { font-size: 1em; } }
.anahtar u {
  display: block; width: .8em; height: .8em;
  margin-left: .35em;
  border-radius: 50%;
  background: var(--colBeyaz);
  position: absolute; top: 50%; transform: translateY(-50%);
  transition: margin-left var(--aniTime) var(--aniEgri);
  pointer-events: none;
}
input:checked + .anahtar u { margin-left: 1.85em; }
.anahtar__etiket { font-size: .6em; font-weight: 600; text-transform: uppercase; }
@media screen and (min-width: 36em) { .anahtar__etiket { font-size: .75em; margin-left: .75em; } }

/* ---------- 12) YUKARI ÇIK (envanter G9) ---------- */

.yukari-cik {
  position: fixed; right: calc(var(--container-pad)); bottom: var(--container-pad);
  z-index: 90;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--aniEgri), visibility .4s;
}
.mat .yukari-cik { opacity: .8; visibility: visible; }
.yukari-cik a {
  display: grid; place-items: center;
  width: 3.4em; height: 3.4em;
  border-radius: 50%;
  background: var(--colVurguAcik);
  color: var(--colMurekkep);
  transition: opacity var(--aniTime) var(--aniEgri);
}
.yukari-cik a:hover { opacity: 1; }

/* ---------- 13) FOOTER ---------- */

.sayfa__footer {
  background: var(--colMurekkep);
  color: var(--colBeyaz);
  padding: calc(var(--vpad) * 2) 0 calc(var(--vpad));
}
.sayfa__footer a { color: var(--colBeyaz); }
.sayfa__footer a:hover { color: var(--colVurgu); }
.footer__ust {
  display: grid; gap: var(--vpad);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 50em) {
  .footer__ust { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer__baslik {
  font-family: var(--fontBaslik); font-variation-settings: 'wdth' 88;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; font-weight: 600;
  margin: 0 0 1em; color: var(--colGri);
}
.footer__alt {
  display: flex; flex-wrap: wrap; gap: 1em var(--vpad);
  align-items: center; justify-content: space-between;
  margin-top: calc(var(--vpad) * 1.5);
  padding-top: var(--vpad);
  border-top: 1px solid rgba(250, 248, 245, .18);
  font-size: .78rem; color: var(--colGri);
}
.footer__logo svg { width: 90px; color: var(--colBeyaz); }

/* Harita kutusu (envanter I16) */
.harita-kutu {
  height: 600px;
  background: var(--colGri);
  position: relative;
  overflow: hidden;
}
.harita-kutu iframe {
  width: 100%; height: 100%; border: 0; display: block;
  /* Haritayı sitenin sıcak paletine çekiyoruz: renkli Google haritası
     kırık beyaz sayfada leke gibi duruyordu. */
  filter: grayscale(1) sepia(.18) contrast(.92) brightness(1.04);
}

/* Rozetler: referanstaki ödül logolarının yerine markanın kendi sözü.
   Sahte sertifika logosu üretmek gerçek bir kurumun işareti gibi durur;
   o yüzden Gemini'ye çizdirilmedi, elle yazıldı. */
.rozetler {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--vpad);
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 36em) { .rozetler { grid-template-columns: repeat(4, 1fr); } }
.rozet {
  display: grid; gap: .2em; place-items: center;
  padding: 1.2em .6em;
  border: 1px solid var(--colGri);
  border-radius: .4em;
}
.rozet b {
  font-family: var(--fontBaslik); font-variation-settings: 'wdth' 88;
  font-size: 1.5rem; font-weight: 600; text-transform: uppercase; line-height: 1;
}
.rozet span {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--colSonuk); text-align: center;
}

/* ---------- 14) FORM (envanter I13) ---------- */

.alan { position: relative; margin-bottom: 1.4em; }
.alan input, .alan textarea, .alan select {
  width: 100%;
  padding: 1.5em .9em .6em;
  border: 1px solid var(--colGri);
  border-radius: .35em;
  background: transparent;
  color: inherit;
  font: inherit;
  transition: border-color var(--aniTime) var(--aniEgri);
}
.alan input:focus, .alan textarea:focus { border-color: var(--colMurekkep); }
.alan label {
  position: absolute; left: .95em; top: 1.1em;
  color: var(--colSonuk);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--aniTime) var(--aniEgri), color var(--aniTime) var(--aniEgri);
}
.alan.dolu label, .alan.odakta label {
  transform: translate3d(0, -.75em, 0) scale(.72);
  color: var(--colVurgu);
}
.sayac { display: block; text-align: right; font-size: .72rem; color: var(--colSonuk); margin-top: .3em; }

/* Sayı alanı (+ / −) */
.sayi { display: inline-flex; align-items: center; border: 1px solid var(--colGri); border-radius: 2em; }
.sayi button { width: 2.2em; height: 2.2em; display: grid; place-items: center; }
.sayi input { width: 2.5em; text-align: center; border: 0; background: none; padding: 0; }