/* --- fonts.css --- */
/* Cormorant Garamond 400/500 - latin + latin-ext alt kumeleri.
   Kendi sunucumuzda barindiriliyor: ucuncu taraf istegi yok, CSP'de font-src 'self' yeterli.
   Turkce icin latin-ext sart (g-breve, s-cedilla, dotless i).
   Lisans: SIL Open Font License 1.1 */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-400-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-400-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-500-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-500-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;
}

/* --- tokens.css --- */
/* Sartname §2.1 - renk ve olcu tokenlari. Bu dosyadaki degerler degistirilmez. */

:root{
  --paper:      #FBF8F3;  /* beyaza kacan krem - ana zemin */
  --paper-2:    #F4EEE4;  /* ikincil zemin, bolum ayrimi */
  --paper-3:    #EDE5D8;  /* gorsel placeholder / hover */
  --ink:        #14213D;  /* lacivert - ana metin, baslik, buton */
  --ink-2:      #24365C;  /* ikincil lacivert */
  --ink-3:      #4A5A7D;  /* pasif metin */
  --line:       #E0D6C4;  /* hairline cizgi */
  --line-ink:   rgba(20,33,61,.14);
  --muted:      #6E6759;  /* aciklama metni */
  --brass:      #9A8355;  /* cok az kullanilacak vurgu (indirim, yeni) */
  --white:      #FFFFFF;
  --ok:#2F6B4F; --warn:#8A6A1F; --err:#8C2F2F;

  --r:2px;                /* kose yaricapi - neredeyse koseli */
  --shadow: 0 1px 2px rgba(20,33,61,.06);
  --ease: cubic-bezier(.2,.7,.3,1);

  /* §2.2 tipografi olcegi - clamp ile akiskan */
  --t-11: 11px;
  --t-13: 13px;
  --t-15: 15px;
  --t-17: 17px;
  --t-21: clamp(19px, 1.2vw + 15px, 21px);
  --t-27: clamp(23px, 1.8vw + 17px, 27px);
  --t-36: clamp(28px, 3vw + 18px, 36px);
  --t-48: clamp(34px, 4.4vw + 20px, 48px);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* §2.3 yerlesim */
  --container: 1240px;
  --gutter: 20px;
  --header-h: 56px;
}

@media (min-width: 768px){
  :root{ --gutter: 40px; --header-h: 64px; }
}

/* --- base.css --- */
/* Sifirlama + tipografi temeli. Sartname §2.2 ve §2.5. */

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

html { -webkit-text-size-adjust: 100%; }

/* Sayfa asla yatay kaymaz; uzun kelime/baslik tasarsa kirilir. */
html, body { overflow-x: clip; }
h1,h2,h3,h4,p,li,a { overflow-wrap: break-word; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-15);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px){ body{ font-size: var(--t-17); } }

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

/* hidden niteligi her zaman kazanmali: display veren bir sinif (or. inline-flex)
   aksi halde onu eziyor ve gizlenmesi gereken oge gorunur kaliyor. */
[hidden] { display: none !important; }
img { height:auto; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .002em;
  margin: 0;
}

h1{ font-size: var(--t-48); }
h2{ font-size: var(--t-36); }
h3{ font-size: var(--t-21); }

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* §2.5 - klavye ile tam gezinilebilirlik, gorunur odak */
:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:focus:not(:focus-visible){ outline: none; }

/* Ekran okuyucuya gorunur, gozle gorunmez */
.gizli{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Klavye kullanicisi icin icerige atlama */
.atla{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background: var(--ink); color: var(--paper);
  padding:12px 18px; font-size: var(--t-13);
}
.atla:focus{ top:12px; }

/* §2.3 konteyner */
.kap{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

/* §2.2 etiket (kicker) */
.etiket{
  font-size: var(--t-11);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-body);
  margin:0;
}

/* Hairline ayraclar - kutu golgesi degil (§2.3) */
.cizgi{ border:0; border-top:1px solid var(--line); margin:0; }

/* Yalnizca genis ekranda gecerli satir kirilimi */
.br-genis{ display:none; }
@media (min-width: 900px){ .br-genis{ display:inline; } }

/* --- Butonlar: sayfada en fazla 3 stil (§2.4 #11) ---
   1) .btn         : dolu lacivert, birincil eylem
   2) .btn-cizgi   : cerceveli, ikincil eylem
   3) .btn-yazi    : alt cizgili metin, ucuncul
*/
.btn, .btn-cizgi{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;                   /* §2.5 dokunma hedefi */
  padding: 0 22px;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: var(--t-13);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration:none;
  cursor:pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease);
}

.btn{ background: var(--ink); color: var(--paper); border:1px solid var(--ink); }
.btn:hover{ background: var(--ink-2); border-color: var(--ink-2); }

.btn-cizgi{ background: transparent; color: var(--ink); border:1px solid var(--line-ink); }
.btn-cizgi:hover{ border-color: var(--ink); }

.btn-yazi{
  display:inline-flex; align-items:center; min-height:44px;
  font-size: var(--t-13); letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink); background:none; border:0; padding:0; cursor:pointer;
  text-decoration: underline; text-underline-offset:.35em;
  text-decoration-color: var(--line-ink);
  transition: text-decoration-color .16s var(--ease);
}
.btn-yazi:hover{ text-decoration-color: var(--ink); }

/* Devre disi butonlar her yerde ayni gorunur - yalnizca form icinde degil.
   Basilabilir gibi duran ama calismayan buton kullaniciyi yaniltir. */
.btn[disabled], .btn-cizgi[disabled], .btn-yazi[disabled], button[disabled]{
  opacity: .45;
  cursor: not-allowed;
}
.btn[disabled]:hover{ background: var(--ink); border-color: var(--ink); }
.btn-cizgi[disabled]:hover{ border-color: var(--line-ink); }

/* §2.5 - hareket azaltma tercihi tum gecisleri kapatir */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ---------- Formlar ----------
   Buraya tasindi (site.css'ten): yonetim paneli site.css'i YUKLEMIYOR
   (kendi paketi fonts+tokens+base+admin). Bu kurallar site.css'te
   kaldigi surece /admin/login sayfasindaki alanlar tamamen stilsiz
   kaliyordu - tarayicinin varsayilan kutulari. Formlar her iki tarafta
   da ayni gorunsun diye ortak dosyada duruyorlar. */
.form{ display:block; }
.alan{ margin-bottom: 18px; }
.alan label{
  display:block; margin-bottom:6px;
  font-size: var(--t-13); letter-spacing:.04em; color: var(--ink-2);
}
.alan input[type="text"], .alan input[type="email"],
.alan input[type="tel"], .alan input[type="password"], .alan textarea{
  width:100%;
  min-height:44px;
  padding: 10px 12px;
  border:1px solid var(--line-ink);
  border-radius: var(--r);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-15);
  transition: border-color .16s var(--ease);
}
.alan textarea{ resize: vertical; line-height:1.6; }
.alan input:focus, .alan textarea:focus{ border-color: var(--ink); }
.alan-ipucu{ font-size: var(--t-11); color: var(--muted); margin: 6px 0 0; }
.istege-bagli{ color: var(--muted); }

.alan.onay{ display:flex; gap:10px; align-items:flex-start; }
.alan.onay input{ margin-top:4px; width:18px; height:18px; flex:0 0 auto; }
.alan.onay label{ margin:0; font-size: var(--t-13); line-height:1.55; }

.form-alt{ margin-top: 18px; font-size: var(--t-13); color: var(--muted); }

/* --- site.css --- */
/* Vitrin bilesenleri. Sartname §2.3 yerlesim, §2.4 yasaklar. */

/* ---------- Onizleme seridi: gercek tasarimin parcasi DEGIL ---------- */
.onizleme-serit{
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-11);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align:center;
  padding: 7px var(--gutter);
}

/* ---------- Baslik cubugu (§2.3: 64px / mobil 56px, sabit) ---------- */
.ust{
  position: sticky; top:0; z-index:50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .16s var(--ease);
}
.ust[data-kaydi="evet"]{ border-bottom-color: var(--line); }

.ust-ic{
  height: var(--header-h);
  display:flex; align-items:center; gap:8px;
}
@media (min-width: 768px){ .ust-ic{ gap:18px; } }

.marka{
  font-family: var(--font-display);
  font-size: var(--t-17);
  letter-spacing: .12em;
  text-decoration:none;
  white-space:nowrap;
  margin-right:auto;
  min-width:0;
}
@media (min-width: 768px){
  .marka{ font-size: var(--t-21); letter-spacing: .22em; }
}
.marka span{
  display:block;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--muted);
  margin-top: -2px;
}

.ust-menu{ display:none; gap:26px; }
@media (min-width: 900px){ .ust-menu{ display:flex; } }

.ust-menu a{
  font-size: var(--t-13);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--ink-2);
  display:inline-flex; align-items:center; min-height:44px;
  border-bottom:1px solid transparent;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.ust-menu a:hover{ color: var(--ink); border-bottom-color: var(--ink); }

.ust-eylem{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  justify-content:center;
  font-size: var(--t-11); letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color: var(--ink); white-space:nowrap;
}
@media (min-width: 768px){ .ust-eylem{ font-size: var(--t-13); letter-spacing:.08em; } }

/* ---------- Acilis: asimetrik editoryal (§2.4 #5) ---------- */
.acilis{ padding-top: 26px; }

.acilis-ic{
  display:grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .acilis-ic{
    grid-template-columns: 2fr 3fr;   /* solda 2/5 metin, sagda 3/5 gorsel */
    gap: 48px;
    align-items: start;
  }
  .acilis{ padding-top: 40px; }
}

/* Mobil: metin blogu grid'e "seffaflasir", boylece buyuk gorsel basligin hemen
   altina girer - kullanici uzun metni asmadan fotografi gorur.
   Masaustunde blok yeniden toparlanip sol sutunda kalir. */
.acilis-metin{ display: contents; }
.acilis-metin > .etiket{ order: 1; }
.acilis-metin > h1{ order: 2; }
.acilis-ic > .acilis-gorsel{ order: 3; }
.acilis-metin > .acilis-govde{ order: 4; }

@media (min-width: 900px){
  .acilis-metin{ display: block; }
  .acilis-ic > .acilis-gorsel{ order: 0; }
}

.acilis-metin h1{ margin: 12px 0 18px; }
.acilis-ic{ row-gap: 20px; }

.acilis-ozet{
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 22px;
}

/* Gercek bilgi listesi - slogan degil (§2.4 #4) */
.kunye{ list-style:none; margin:0 0 24px; padding:0; }
.kunye li{
  display:flex; gap:14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-13);
}
.kunye li:last-child{ border-bottom: 1px solid var(--line); }
.kunye dt, .kunye b{
  flex: 0 0 76px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing:.04em;
}

.acilis-btnler{ display:flex; flex-wrap:wrap; gap:10px; }

.acilis-gorsel{
  position:relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-3);
  overflow:hidden;
  border-radius: var(--r-kart);   /* §12.6: kartlarla ayni dil */
}
/* Masaustunde gorsel viewport'a gore sinirlanir: acilis blogu ekrani doldurmaz,
   ilk urun sirasi kaydirmadan gorunmeye baslar (§2.4 #5). */
@media (min-width: 900px){
  .acilis-gorsel{
    aspect-ratio: auto;
    height: clamp(380px, 58vh, 560px);
  }
}
.acilis-gorsel img{ width:100%; height:100%; object-fit: cover; }

.gorsel-not{
  position:absolute; left:0; bottom:0;
  background: var(--paper);
  color: var(--muted);
  font-size: var(--t-11);
  letter-spacing:.12em;
  text-transform: uppercase;
  padding: 8px 14px;
}

/* ---------- Bolum basligi ---------- */
.bolum{ padding: 54px 0; }
@media (min-width: 768px){ .bolum{ padding: 72px 0; } }

/* Acilistan hemen sonraki bolum daha dar bosluklu: urunler yukari gelsin */
.acilis + .bolum{ padding-top: 34px; }
@media (min-width: 768px){ .acilis + .bolum{ padding-top: 44px; } }

.bolum-ust{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom: 22px;
}
.bolum-ust h2{ font-size: var(--t-27); }

/* ---------- Urun grid ----------
   §12.6 (2026-08-26, Ali): mobilde TEK SUTUN, alt alta, oval koseli buyuk
   kartlar - uygulama akisi gibi. 640+ uc, 1024+ dort sutun (§2.3) korunuyor.
   Kose yaricapi tokens.css'e dokunmadan burada tanimli: --r (2px) sartnamenin
   genel kosesi, --r-kart yalnizca gorsel kutulari icin. Golge YOK (§2.4 #6). */
:root{ --r-kart: 14px; }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 640px){ .grid{ grid-template-columns: repeat(3,1fr); gap: 22px 20px; } }
@media (min-width: 1024px){ .grid{ grid-template-columns: repeat(4,1fr); gap: 30px 28px; } }

.urun{ display:block; text-decoration:none; color:inherit; min-width:0; }

.urun-gorsel{
  aspect-ratio: 4 / 5;                /* §2.3 portre */
  background: var(--paper-3);
  overflow:hidden;
  border-radius: var(--r-kart);
  margin-bottom: 10px;
}
/* Tek sutunda kart buyuk; ad da ona gore */
@media (max-width: 639px){ .urun-ad{ font-size: var(--t-21); } }
.urun-gorsel img{
  width:100%; height:100%; object-fit: cover;
  transition: opacity .16s var(--ease);
}
.urun:hover .urun-gorsel img{ opacity: .9; }

.urun-kat{
  font-size: var(--t-11);
  letter-spacing:.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.urun-ad{
  font-family: var(--font-display);
  font-size: var(--t-17);
  line-height:1.25;
  margin-bottom: 4px;
}
@media (min-width:768px){ .urun-ad{ font-size: var(--t-21); } }

.urun-alt{
  display:flex; align-items:baseline; gap:10px;
  font-size: var(--t-13);
}
.urun-fiyat{ font-variant-numeric: tabular-nums; }
.urun-gram{ color: var(--muted); }

/* ---------- Kategori seridi ---------- */
.katlar{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line);
}
.katlar a{
  flex: 1 1 50%;
  display:flex; align-items:center;
  min-height:56px; padding: 8px 4px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size: var(--t-13);
  letter-spacing:.08em;
  text-transform: uppercase;
  transition: color .16s var(--ease);
}
/* --brass metin rengi olarak kullanilamaz: paper uzerinde 3.45:1, AA'nin altinda.
   Yalnizca metin disi vurgu (cizgi, rozet kenari) icin ayrilmistir. */
.katlar a:hover{ color: var(--ink); box-shadow: inset 0 -1px 0 var(--brass); }
@media (min-width: 700px){ .katlar a{ flex: 1 1 auto; padding-right: 34px; } }

/* ---------- Subeler ---------- */
.subeler{ background: var(--paper-2); }

.sube-ic{
  display:grid; gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .sube-ic{ grid-template-columns: 3fr 2fr; gap: 48px; align-items:center; }
}

.sube-gorsel{ aspect-ratio: 4/3; background: var(--paper-3); overflow:hidden; border-radius: var(--r-kart); }
.sube-gorsel img{ width:100%; height:100%; object-fit:cover; }

.sube-kart{ padding: 16px 0; border-top:1px solid var(--line); }
.sube-kart h3{ font-size: var(--t-21); margin-bottom:4px; }
.sube-kart p{ font-size: var(--t-13); color: var(--muted); margin:0; }

/* ---------- Alt bilgi ---------- */
.alt{ border-top:1px solid var(--line); padding: 40px 0 30px; }

.alt-ic{
  display:grid; gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px){ .alt-ic{ grid-template-columns: repeat(3, 1fr); } }

/* Alt bilgi sutun basliklari. Seviye h2/h3 (basliklar atlanmasin diye);
   gorunum kucuk ve buyuk harf - sayfa basligiyla yarismasin. */
.alt h2,
.alt .alt-ara-baslik{
  font-family: var(--font-body);
  font-size: var(--t-11);
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--muted);
  font-weight:400;
  margin: 0 0 12px;
}
.alt ul{ list-style:none; margin:0; padding:0; }
.alt li{ margin-bottom: 2px; }
.alt li a{
  display:inline-flex; align-items:center; min-height:32px;
  font-size: var(--t-13); text-decoration:none;
}
.alt li a:hover{ text-decoration: underline; text-underline-offset:.25em; }

.alt-son{
  margin-top: 30px; padding-top: 18px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap: 14px 24px;
  align-items:center; justify-content:space-between;
  font-size: var(--t-11); color: var(--muted);
}

/* Ali'nin kendi projeleri - "sponsor"/"sertifika" degil, ne olduklari yaziyor */
/* Logolarin en-boy orani farkli; yukseklikle degil genislikle sinirlaniyor,
   yoksa dikey olan (ekintera) okunamayacak kadar kuculuyor. */
.projeler{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.projeler > span{ white-space:nowrap; }
.projeler a{ display:inline-flex; align-items:center; min-height:44px; }
.projeler img{ width:auto; max-width:76px; max-height:44px; opacity:.78;
               transition: opacity .16s var(--ease); }
.projeler a:hover img{ opacity:1; }


/* ================= Ic sayfalar ================= */

/* Mobil gezinme seridi - 900px ustunde ust menu devraldigi icin gizlenir */
.mobil-menu{ border-bottom:1px solid var(--line); }
@media (min-width: 900px){ .mobil-menu{ display:none; } }

.mobil-menu-ic{
  display:flex; gap:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mobil-menu-ic::-webkit-scrollbar{ display:none; }
.mobil-menu-ic a{
  flex:0 0 auto;
  display:inline-flex; align-items:center;
  min-height:44px; padding: 0 14px 0 0;
  margin-right:14px;
  font-size: var(--t-13); letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color: var(--ink-2); white-space:nowrap;
}
.mobil-menu-ic a[aria-current="page"]{ color: var(--ink); }

/* Sayfa basligi blogu */
.sayfa-ust{ padding: 30px 0 0; }
@media (min-width:768px){ .sayfa-ust{ padding: 44px 0 0; } }
.sayfa-ust h1{ font-size: var(--t-36); margin: 10px 0 14px; }
.sayfa-ust .etiket a{ color: inherit; text-decoration:none; }
.sayfa-ust .etiket a:hover{ text-decoration: underline; text-underline-offset:.25em; }
.sayfa-ozet{ color: var(--muted); max-width: 62ch; margin:0; }

.sayfa-ust + .bolum{ padding-top: 30px; }
@media (min-width:768px){ .sayfa-ust + .bolum{ padding-top: 40px; } }

/* Dar ve okuma genisligi konteynerleri */
.kap.dar{ max-width: 560px; }
.yazi{ max-width: 68ch; }
.yazi h2{ font-size: var(--t-27); margin: 34px 0 10px; }
.yazi h2:first-child{ margin-top:0; }
.yazi p{ color: var(--ink-2); }

/* Kategori suzgeci */
.suzgec{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom:1px solid var(--line);
}
.suzgec a{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding: 0 14px;
  border:1px solid var(--line-ink);
  border-radius: var(--r);
  font-size: var(--t-13); letter-spacing:.05em;
  text-decoration:none; color: var(--ink-2);
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.suzgec a:hover{ border-color: var(--ink); color: var(--ink); }
.suzgec a.secili{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.suzgec-adet{ color: var(--muted); font-size: var(--t-11); }
.suzgec a.secili .suzgec-adet{ color: var(--paper-3); }

.sonuc-sayisi{ font-size: var(--t-13); color: var(--muted); margin-bottom: 16px; }

/* Bos durumlar (§2.5) */
.bos{ padding: 46px 0; max-width: 52ch; }
.bos h2{ font-size: var(--t-27); margin-bottom: 10px; }
.bos p{ color: var(--muted); }
.hata-sayfa{ padding: 70px 0 90px; }

/* ---------- Urun detay ---------- */
.urun-detay{ padding: 26px 0 0; }
@media (min-width:768px){ .urun-detay{ padding: 40px 0 0; } }

.urun-detay-ic{
  display:grid; gap: 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .urun-detay-ic{ grid-template-columns: 3fr 2fr; gap: 52px; align-items:start; }
}

.galeri-buyuk{
  margin:0;
  aspect-ratio: 4 / 5;
  background: var(--paper-3);
  overflow:hidden; border-radius: var(--r-kart);
}
.galeri-buyuk img{ width:100%; height:100%; object-fit: cover; }

.galeri-kucuk{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.galeri-dugme{
  width:72px; height:90px; padding:0;
  border:1px solid transparent; background: var(--paper-3);
  cursor:pointer; overflow:hidden;
  transition: border-color .16s var(--ease); border-radius: 8px;
}
.galeri-dugme img{ width:100%; height:100%; object-fit:cover; }
.galeri-dugme:hover{ border-color: var(--line-ink); }
.galeri-dugme.secili{ border-color: var(--ink); }

.urun-bilgi h1{ font-size: var(--t-36); margin: 10px 0 8px; }
.urun-detay-fiyat{
  font-size: var(--t-27);
  font-variant-numeric: tabular-nums;
  margin: 0 0 18px;
}
.urun-not{ font-size: var(--t-13); color: var(--muted); margin-top: 18px; }
.urun-bilgi .etiket a{ color:inherit; text-decoration:none; }
.urun-bilgi .etiket a:hover{ text-decoration:underline; text-underline-offset:.25em; }

/* ---------- Magazalar ---------- */

.sube-liste{ display:grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .sube-liste{ grid-template-columns: repeat(2,1fr); gap: 44px; } }
.sube-blok h2{ font-size: var(--t-21); margin-bottom: 12px; }

/* Taslak/uyari kutusu - yasal metinlerde */
.uyari{
  border-left: 2px solid var(--brass);
  padding: 10px 0 10px 16px;
  color: var(--muted);
  font-size: var(--t-13);
  margin-bottom: 30px;
}
.vurgu{ color: var(--muted); }

/* Gram esasli fiyatin nasil hesaplandigi - urun detayinda fiyatin altinda */
.fiyat-aciklama{
  font-size: var(--t-13);
  color: var(--muted);
  margin: -12px 0 18px;
  font-variant-numeric: tabular-nums;
}

/* Arama formu */
.ara-form{ display:flex; gap:10px; margin-top:18px; max-width:520px; }
.ara-form input[type="search"]{
  flex:1 1 auto; min-width:0; min-height:44px;
  padding: 10px 12px;
  border:1px solid var(--line-ink); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-15);
  transition: border-color .16s var(--ease);
}
.ara-form input[type="search"]:focus{ border-color: var(--ink); }

/* Video medyasi - fotografla ayni cerceveye oturur */
.acilis-gorsel video,
.sube-gorsel video,
.sube-genis video{ width:100%; height:100%; object-fit: cover; display:block; }


.alt-ara-baslik{ margin-top: 22px; }
.iletisim-kunye{ margin-top: 22px; max-width: 46ch; }
.iletisim-kunye a{ color: inherit; }

/* ================= Sepet ================= */

.sepet-duzen{
  display:grid; gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .sepet-duzen{ grid-template-columns: 1fr 340px; gap: 48px; align-items:start; }
}

.sepet-kalem{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top:1px solid var(--line);
}
.sepet-kalem:last-of-type{ border-bottom:1px solid var(--line); }

@media (min-width: 560px){
  .sepet-kalem{ grid-template-columns: 104px 1fr auto; gap: 20px; align-items:start; }
}

.sepet-gorsel{
  display:block;
  aspect-ratio: 4/5;
  background: var(--paper-3);
  overflow:hidden;
}
.sepet-gorsel img{ width:100%; height:100%; object-fit:cover; }

.sepet-bilgi{ min-width:0; }
.sepet-ad{
  font-family: var(--font-display);
  font-size: var(--t-21);
  line-height:1.2;
  margin: 2px 0 4px;
}
.sepet-ad a{ text-decoration:none; }
.sepet-ad a:hover{ text-decoration: underline; text-underline-offset:.2em; }
.sepet-kunye{ font-size: var(--t-13); color: var(--muted); margin: 0 0 12px; }

.sepet-eylem{ display:flex; flex-wrap:wrap; align-items:center; gap: 6px 18px; }
.adet-form{ display:flex; align-items:center; gap:8px; }
.adet-girdi{
  width: 68px; min-height:44px;
  padding: 8px 10px;
  border:1px solid var(--line-ink); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-15);
  text-align:center;
}
.adet-girdi:focus{ border-color: var(--ink); }
.btn-cikar{ color: var(--muted); }
.btn-cikar:hover{ color: var(--err); }

/* Fiyat mobilde kalemin altina, genis ekranda saga gecer */
.sepet-fiyat{
  grid-column: 2;
  margin: 0;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
@media (min-width: 560px){
  .sepet-fiyat{ grid-column: 3; align-items:flex-end; text-align:right; }
}
.sepet-tutar{ font-variant-numeric: tabular-nums; font-size: var(--t-17); }
.sepet-birim{ font-size: var(--t-13); color: var(--muted); font-variant-numeric: tabular-nums; }

.sepet-bosalt{ margin-top: 18px; }

.sepet-ozet{
  background: var(--paper-2);
  padding: 24px 22px;
  border: 1px solid var(--line);
}
@media (min-width: 900px){ .sepet-ozet{ position: sticky; top: calc(var(--header-h) + 20px); } }
.sepet-ozet h2{ font-size: var(--t-21); margin-bottom: 16px; }
.sepet-ozet .kunye li{ border-color: var(--line); }

.sepet-toplam{
  display:flex; justify-content:space-between; align-items:baseline;
  gap: 12px;
  padding: 16px 0 20px;
  font-size: var(--t-17);
}
.sepet-toplam strong{
  font-family: var(--font-display);
  font-size: var(--t-27);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.btn-tam, .sepet-gonder{ width:100%; }

.uyari-liste{
  list-style:none; margin: 0 0 24px; padding: 14px 18px;
  border-left: 2px solid var(--brass);
  background: var(--paper-2);
  font-size: var(--t-13);
}
.uyari-liste li + li{ margin-top: 6px; }

/* Urun sayfasi: sepete ekle */
.sepete-ekle{ margin-top: 4px; }
.adet-secim{ display:flex; align-items:center; gap:12px; margin-bottom: 14px; }
.adet-secim label{ font-size: var(--t-13); color: var(--muted); }
.adet-secim input{
  width: 76px; min-height:44px; padding: 8px 10px;
  border:1px solid var(--line-ink); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-15); text-align:center;
}
.adet-secim input:focus{ border-color: var(--ink); }

.sepet-bildirim{
  margin-top: 14px; padding: 10px 14px;
  border-left: 2px solid var(--ok);
  background: var(--paper-2);
  font-size: var(--t-13);
}
.tukendi{
  padding: 12px 0; margin: 0 0 8px;
  color: var(--err); font-size: var(--t-15);
}

/* Basliktaki sepet rozeti */
.sepet-baglanti{ gap: 6px; }
.sepet-rozet{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--ink); color: var(--paper);
  border-radius: 10px;
  font-size: 11px; line-height:1;
  font-variant-numeric: tabular-nums;
}

/* ================= Hesap sayfalari ================= */

.hesap{ padding: 26px 0 0; }
@media (min-width: 768px){ .hesap{ padding: 44px 0 0; } }

.hesap-ic{
  display:grid; gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .hesap-ic{ grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
}

.hesap-form{ max-width: 460px; }
.hesap-form h1{ font-size: var(--t-36); margin: 10px 0 14px; }
.hesap-ozet{ color: var(--muted); margin-bottom: 26px; }
.hesap-ozet strong{ color: var(--ink); font-weight: 400; }
.hesap-form .etiket a{ color:inherit; text-decoration:none; }

.uyelik-fayda{ margin-bottom: 28px; }

.form-not{ font-size: var(--t-13); color: var(--muted); margin: 12px 0 0; }

.hesap-gecis{
  margin-top: 30px; padding-top: 22px;
  border-top:1px solid var(--line);
}
.hesap-gecis p{ font-size: var(--t-13); color: var(--muted); margin-bottom: 10px; }

/* Gorsel mobilde gizli: kucuk ekranda formun onunu tikamasin */
.hesap-gorsel{ display:none; margin:0; }
@media (min-width: 900px){
  .hesap-gorsel{
    display:block;
    aspect-ratio: 4/5;
    max-height: 72vh;
    background: var(--paper-3);
    overflow:hidden;
  }
  .hesap-gorsel img{ width:100%; height:100%; object-fit:cover; }
}

/* ================= Magazalar ================= */

.sube-liste{ display:grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .sube-liste{ grid-template-columns: repeat(2,1fr); gap: 48px; } }

.sube-blok{ padding-top: 18px; border-top: 1px solid var(--line); }
.sube-blok h2{ font-size: var(--t-27); margin: 8px 0 16px; }

.tur-duzen{
  display:grid; gap: 26px;
  grid-template-columns: 1fr;
  align-items:center;
}
@media (min-width: 900px){
  .tur-duzen{ grid-template-columns: 360px 1fr; gap: 48px; }
}

.sube-video{ margin:0; background: var(--paper-3); overflow:hidden; border-radius: var(--r-kart); }
.sube-video video{
  width:100%; height:auto;
  max-height: 78vh;
  object-fit: contain;
  display:block;
}
.tur-metin p{ color: var(--ink-2); }

.sepet-bildirim-hata{ border-left-color: var(--err); }

/* Ana sayfadaki şube bloğu portre görselle çalışıyor */
.sube-ic .sube-gorsel{ aspect-ratio: 4/5; }
@media (min-width: 900px){
  .sube-ic{ grid-template-columns: 2fr 3fr; }
  .sube-ic .sube-gorsel{ aspect-ratio: auto; height: clamp(360px, 52vh, 520px); }
}

/* ---------- Mobil düzen toparlaması ---------- */
@media (max-width: 559px){
  /* Butonlar mobilde tam genişlik: tek elle basması kolay olsun */
  .acilis-btnler .btn,
  .acilis-btnler .btn-cizgi{ flex: 1 1 100%; }

  /* Bölüm boşlukları mobilde sıkışsın, sayfa uzamasın */
  .bolum{ padding: 40px 0; }
  .acilis + .bolum{ padding-top: 28px; }

  .sayfa-ust h1{ font-size: var(--t-27); }
  .bolum-ust h2{ font-size: var(--t-21); }
  .urun-detay-fiyat{ font-size: var(--t-21); }

  /* Ürün kartı başlığı iki satırı geçmesin, grid hizası bozulmasın */
  .urun-ad{
    font-size: var(--t-15);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .urun-alt{ flex-wrap: wrap; gap: 2px 8px; }

  /* Alt bilgi sütunları arasına ayraç */
  .alt-ic > div + div{ padding-top: 22px; border-top: 1px solid var(--line); }

  .alt-son{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .projeler{ gap: 14px; }
}

/* ================= Sipariş sonrası ================= */

.ref-kod{
  font-family: var(--font-display);
  font-size: var(--t-27);
  letter-spacing: .08em;
  font-weight: 500;
  white-space: nowrap;
}

.siparis-duzen{
  display:grid; gap: 34px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .siparis-duzen{ grid-template-columns: 1fr 320px; gap: 52px; align-items:start; }
}
.siparis-duzen h2{ font-size: var(--t-21); margin-bottom: 14px; }

.siparis-kalemler{ list-style:none; margin:0; padding:0; }
.siparis-kalemler li{
  display:grid;
  grid-template-columns: 24px 1fr auto;
  gap: 4px 12px;
  padding: 14px 0;
  border-top:1px solid var(--line);
  font-size: var(--t-15);
}
.siparis-kalemler li:last-child{ border-bottom:1px solid var(--line); }
.siparis-sira{ color: var(--muted); font-variant-numeric: tabular-nums; }
.siparis-ad{ min-width:0; }
.siparis-sku{
  display:block; font-size: var(--t-11); color: var(--muted);
  letter-spacing:.1em; text-transform: uppercase;
}
.siparis-adet{ grid-column: 2; font-size: var(--t-13); color: var(--muted); }
.siparis-tutar{
  grid-column: 3; grid-row: 1 / span 2;
  text-align:right; font-variant-numeric: tabular-nums;
}

.siparis-not{ margin-top: 26px; padding-top: 18px; border-top:1px solid var(--line); }
.siparis-not h3{ font-size: var(--t-17); margin-bottom: 6px; }
.siparis-not p{ color: var(--ink-2); }

.siparis-yan{
  background: var(--paper-2);
  border:1px solid var(--line);
  padding: 24px 22px;
}
.siparis-yan p{ font-size: var(--t-13); color: var(--muted); }
.siparis-yan .btn{ margin-bottom: 14px; }

.sepet-ozet textarea{
  width:100%; padding: 10px 12px;
  border:1px solid var(--line-ink); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-15);
  line-height:1.6; resize: vertical;
}
.sepet-ozet textarea:focus{ border-color: var(--ink); }
.sepet-ozet .alan{ margin-bottom: 14px; }

/* Fotoğrafı henüz eklenmemiş ürün */
.gorsel-yok{
  display:flex; align-items:center; justify-content:center;
  height:100%; margin:0; padding: 20px;
  color: var(--muted); font-size: var(--t-13); text-align:center;
}

/* Sade alt bilgi — giriş ve üye ol sayfalarında */
.alt-sade { background: var(--paper); }
.alt-sade .alt-son { margin-top: 0; border-top: 0; }
.alt-sade-baglantilar { display: flex; gap: 18px; flex-wrap: wrap; }
.alt-sade-baglantilar a { color: inherit; text-decoration: none; }
.alt-sade-baglantilar a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Hesap bölümleri */
.hesap-bolum {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 560px;
}
.hesap-bolum h2 { font-size: var(--t-21); margin-bottom: 14px; }
.hesap-bolum .form { max-width: 100%; }

/* --- Favori dugmesi (urun detay) ---
   Dugme de baglanti da ayni gorunur: giris yoksa <a>, varsa <button>.
   Dokunma hedefi 44px - telefonda parmakla isabet etsin. */
.favori-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--t-14);
  text-decoration: none;
  cursor: pointer;
}
.favori-btn:hover{ color: var(--ink); }
.favori-btn:disabled{ opacity: .55; cursor: default; }
.favori-kalp{ color: var(--ink-3); flex: none; }
/* Favorideyken kalp doluyor: renk ve dolgu tek nitelikten (aria-pressed)
   surulur, JS yalnizca o niteligi degistirir. */
.favori-btn[aria-pressed="true"]{ color: var(--ink); }
.favori-btn[aria-pressed="true"] .favori-kalp{ color: var(--err); fill: currentColor; }

/* --- Indirim kodu (sepet) --- */
.kupon-form{ margin: 16px 0; }
.kupon-satir{ display:flex; gap:8px; align-items:stretch; }
.kupon-satir input{ flex:1 1 auto; min-width:0; text-transform:uppercase; }
.kupon-satir .btn-cizgi{ flex:0 0 auto; white-space:nowrap; }
.kupon-uygulandi{ margin:0 0 6px; font-size: var(--t-13); }
/* Indirim satiri: tutarin eksi oldugu tek bakista anlasilsin */
.sepet-indirim{ color: var(--ok); }