@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(/f/cormorant-300.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/f/cormorant-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/f/cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url(/f/inter-300.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/f/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/f/inter-500.woff2) format("woff2")}

:root{
  --zemin:#F5F2EB;
  --wash:#EBE6DC;
  --kart:#FFFDFA;
  --ink:#2A2D32;
  --ink-2:#4A4E56;
  --mut:#61656B;   /* ekru zeminde 5.1:1 — WCAG AA */
  --cizgi:rgba(42,45,50,.20);
  --cizgi-2:rgba(42,45,50,.10);
  --koyu:#2A2D32;
  --ekru:#F5F2EB;
  --baslik-font:"Cormorant Garamond";
  --govde-font:"Inter";
  color-scheme:light;

}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--zemin); color:var(--ink);
  font-family:var(--govde-font),system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; font-weight:400; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
a:focus-visible{outline:1.5px solid var(--ink); outline-offset:5px; border-radius:2px}

.serif{font-family:var(--baslik-font),Georgia,serif; font-weight:400}
.kilit{font-family:var(--baslik-font),Georgia,serif; font-weight:400;
  letter-spacing:.34em; text-indent:.34em; white-space:nowrap}
.et{font-size:11px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--mut)}
/* Dokunma alanı: görsel boyut değişmeden tıklanabilir alanı büyütüyoruz.
   44px, WCAG 2.5.5 ve Apple/Google kılavuzlarının ortak alt sınırı. */
.dokun{position:relative}
.dokun::after{content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); min-width:44px; min-height:44px;
  width:100%; height:100%}

.kat{--pad:clamp(20px,5vw,56px); padding-inline:var(--pad)}
.ic{max-width:1180px; margin:0 auto}

/* giriş — sayfa yüklenince bir kez, gözlemci beklemez */
.gir{animation:gir .85s cubic-bezier(.22,.7,.3,1) both}
.gir-2{animation-delay:.10s} .gir-3{animation-delay:.20s} .gir-4{animation-delay:.30s}
@keyframes gir{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gir{animation:none}
  *{transition:none!important}
}

/* Ekranda görünmeyen ama ekran okuyucunun gördüğü başlık. Sayfanın
   başlık sırasında boşluk kalmasın diye kullanılıyor; anasayfada hero
   bloğu yokken h1, kategori sayfasında ürün ızgarasının h2'si. */
.gizli-baslik{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ══ ÜST ══ */
.ust{position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:rgba(245,242,235,.90); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi-2)}
.ust .ic{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:9px clamp(16px,5vw,56px); max-width:1180px}
.ust .kilit,.ust .logo{justify-self:center}
/* Logo bir görsel olduğunda kendi genişliğini dayatıyordu: orta sütun
   1fr olsa bile min-content'i görselin en'i kadar oluyor ve 375 px
   telefonda satır taşıp "Giriş" bağlantısı ekranın dışında kalıyordu.
   min-width:0 sütunun küçülmesine izin veriyor, max-width:100% görselin
   de onunla birlikte daralmasını sağlıyor. */
.ust .logo{min-width:0; max-width:100%}
.ust .logo img{max-width:100%; height:auto}
.ust .kilit{font-size:14.5px}
.ust .ust-sol{display:flex; align-items:center; gap:10px}
.ust nav{display:flex; gap:clamp(14px,2.2vw,28px); font-size:13.5px; color:var(--ink-2)}
.ust .ust-sag{justify-self:end; display:flex; align-items:center;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase}
.ust nav a,.ust .ust-sag a{display:inline-flex; align-items:center; min-height:44px;
  padding:0 2px; border-bottom:1px solid transparent; transition:border-color .18s}
.ust .ust-sag a{padding:0 9px}
.ust nav a:hover,.ust .ust-sag a:hover{border-color:var(--ink)}

/* ── hamburger ── */
.mob-ac{display:none; width:44px; height:44px; padding:0; border:0; background:none;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.mob-ac span{display:block; width:20px; height:1.5px; background:var(--ink);
  transition:transform .3s, opacity .3s}
.mob-perde{position:fixed; inset:0; z-index:70; background:rgba(42,45,50,.45);
  opacity:0; transition:opacity .3s ease}
.mob-perde.acik{opacity:1}
.mob-ic{position:absolute; inset:0 auto 0 0; width:min(84vw,340px); background:var(--zemin);
  padding:18px 22px calc(22px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.22,1,.36,1);
  overflow-y:auto}
.mob-perde.acik .mob-ic{transform:none}
.mob-kapat{align-self:flex-end; width:44px; height:44px; border:0; background:none;
  font-size:19px; color:var(--ink); cursor:pointer; line-height:1}
.mob-ic nav{display:flex; flex-direction:column; margin-top:6px}
.mob-ic nav a{display:flex; align-items:center; min-height:52px;
  font-family:var(--baslik-font),Georgia,serif; font-size:24px; line-height:1.2;
  border-bottom:1px solid var(--cizgi-2)}
.mob-ic nav a:first-child{border-top:1px solid var(--cizgi-2)}
.mob-dip{margin-top:auto; padding-top:22px; display:flex; gap:20px; flex-wrap:wrap;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.mob-dip a{display:inline-flex; align-items:center; min-height:44px}

@media (max-width:860px){
  .ust .ic{grid-template-columns:auto 1fr auto}
  .ust .ust-nav{display:none}
  .mob-ac{display:flex}
}
/* Dar telefonda üst bar üç sütunun da sığabilmesi için sıkışıyor:
   boşluk ve yatay dolgu azalıyor, dokunma alanı (44 px yükseklik)
   olduğu gibi kalıyor. */
@media (max-width:480px){
  .ust .ic{gap:8px; padding-inline:14px}
  .ust .ust-sag a{padding:0 6px}
  /* Logo bir görsel olduğunda kendi en'ini dayatıyor (max-width:100%
     burada bağlamıyor, çünkü kapsayıcının eni de görselden geliyor).
     375 px'te hamburger + logo + Sepet + Giriş sığmıyor ve Giriş
     ekranın dışında kalıyordu. Giriş telefonun üst barından kalkıyor;
     hamburger panelinin altında Sepet'le birlikte zaten duruyor. */
  .ust .ust-sag .ust-uye{display:none}
}
@media (max-width:660px){
  .bbas{flex-wrap:wrap}
  .bbas h2{flex:1 1 auto; min-width:0}
  .bbas .c{display:none}
  .bbas .et:last-of-type{flex:0 0 100%; margin-top:6px}
}

/* ══ HERO — katmanlı ══ */
.hero{padding-block:clamp(44px,8vw,86px) clamp(56px,9vw,104px); position:relative}
.hero::before{content:""; position:absolute; inset:0 auto 22% 0; width:min(62vw,720px);
  background:radial-gradient(120% 90% at 10% 20%, var(--wash), transparent 70%);
  pointer-events:none; z-index:0}
.hero .ic{position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(26px,5vw,66px); align-items:center}
.hero-yazi{display:flex; flex-direction:column; gap:clamp(18px,3vw,30px)}
.hero-yazi .kilit{font-size:clamp(34px,7.4vw,78px); line-height:.98; display:block}
.hero-yazi .cumle{font-family:var(--baslik-font),Georgia,serif; font-weight:300;
  font-size:clamp(19px,2.5vw,26px); line-height:1.44; color:var(--ink-2); max-width:24ch}
.hero-yazi .satir{display:flex; align-items:center; gap:14px}
.hero-yazi .satir .c{flex:1; height:1px; background:var(--cizgi)}

/* katmanlı görsel */
.kolaj{position:relative; aspect-ratio:1/1.35; min-width:0}
.kolaj figure{position:absolute; margin:0; overflow:hidden; background:var(--wash);
  transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.kolaj .buyuk{inset:0 22% 14% 0}
.kolaj .kucuk{inset:auto 0 0 56%; height:60%; box-shadow:-14px -14px 34px rgba(42,45,50,.10)}
.kolaj figure i{position:absolute; inset:0; display:block}
.kolaj figure img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; display:block}
.kolaj:hover .buyuk{transform:translateY(-5px)}
.kolaj:hover .kucuk{transform:translateY(5px)}
.kolaj figcaption{position:absolute; left:0; bottom:-26px; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
@media (max-width:820px){
  .hero .ic{grid-template-columns:1fr; gap:34px}
  .kolaj{aspect-ratio:1/1.25}
  .kolaj .buyuk{inset:0 30% 16% 0}
  .kolaj .kucuk{inset:auto 0 0 60%; height:58%}
}

/* ══ BÖLÜM BAŞLIĞI ══ */
.bbas{display:flex; align-items:baseline; gap:16px; padding-bottom:14px;
  border-bottom:1px solid var(--cizgi); margin-bottom:clamp(34px,5vw,58px)}
.bbas h2{font-family:var(--baslik-font),Georgia,serif; font-size:clamp(24px,3.6vw,34px);
  letter-spacing:.01em}
.bbas .c{flex:1; height:1px; background:var(--cizgi-2)}

/* ══ ÜRÜN GALERİSİ ══ */
.galeri{padding-block:clamp(50px,8vw,96px)}
/* ── katalog ızgarası: her renk ayrı kart ── */
/* auto-fill değil auto-fit: üç ürün varken dördüncü sütun boş kalıyordu.
   auto-fit boş kolonları toplayıp kalan kartları genişletiyor. */
.kartlar{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,3vw,34px) clamp(14px,2vw,24px)}
@media(max-width:560px){
  .kartlar{grid-template-columns:repeat(2,1fr); gap:22px 10px}
  /* Tek kart kaldığında yarım genişlikte asılı durmasın. */
  .kartlar > :only-child{grid-column:1 / -1}
  .kart-bilgi h3{font-size:17px}
  .kart-bilgi .renk-adi,.kart-bilgi .fiyat{font-size:13px}
}
.kart-urun .kare{position:relative; display:block; aspect-ratio:var(--kart-oran,3/4);
  background:var(--wash);
  overflow:hidden; border-radius:2px}
.kart-urun .kare .f{position:absolute; inset:0; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
/* Görsel artık gerçek <img>: object-fit, background-size'ın birebir
   karşılığı — kırpma ve konumlanma değişmiyor. */
.kart-urun .kare img.f{width:100%; height:100%; object-fit:cover;
  object-position:center 50%}
.kart-urun .kare:hover .f{transform:scale(1.04)}
.kart-urun .tukendi{position:absolute; left:10px; top:10px; background:rgba(247,245,240,.94);
  padding:5px 10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase}
/* Kartın tamamı zaten tek bir bağlantı; bilgi bloğuna alt boşluk vererek
   dokunma alanını 44px'in üzerine çıkarıyoruz. */
.kart-bilgi{padding:12px 0 14px}
.kart-bilgi h3{font-family:var(--baslik-font),Georgia,serif; font-size:19px;
  font-weight:400; margin:3px 0 0; line-height:1.25}
.kart-bilgi .renk-adi{font-size:13.5px; color:var(--ink-2); margin-top:4px}
.kart-bilgi .fiyat{font-size:14.5px; margin-top:7px}
/* Koyu zeminli bölümde (Abaya) kartın renk adı gri kalıyordu: antrasit
   üstünde 1.65:1 — okunmuyordu. Bölüm geneli için yazılmış
   .zemin-koyu p kuralı buraya yetişemiyor, çünkü .kart-bilgi .renk-adi
   daha güçlü bir seçici. Ekruya çevirip biraz soluklaştırıyoruz:
   8.5:1 civarı, AA'nın epey üstü. */
.zemin-koyu .kart-bilgi .renk-adi{color:var(--ekru); opacity:.72}

/* ── etiket rozetleri ── */
/* Kartta kategori yazısının ÜSTÜNDE, yan yana. Fotoğrafın üstüne
   basıldığında ürünü kapatıyor ve koyu görsellerde okunmuyordu. */
.rozet-e{display:inline-block; padding:3px 10px; border-radius:99px; border:1px solid;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.5; white-space:nowrap}
.rozet-sira{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.rozet-sira.kucuk{gap:5px; margin-bottom:7px}
.rozet-sira.kucuk .rozet-e{font-size:11px; padding:3px 9px; letter-spacing:.09em}

/* ── yatay kaydırmalı ürün şeridi ── */
.serit{padding-block:clamp(34px,5vw,60px); border-top:1px solid var(--cizgi-2)}
.serit-bas{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:clamp(16px,2.5vw,26px)}
.serit-bas h2{font-family:var(--baslik-font),Georgia,serif; font-size:clamp(24px,3.2vw,32px);
  font-weight:400; margin:0; line-height:1.1}
.serit-ok{display:flex; gap:7px; flex-shrink:0}
.serit-ok button{width:36px; height:36px; border:1px solid var(--cizgi); background:transparent;
  border-radius:50%; cursor:pointer; color:var(--ink); font-size:14px; line-height:1;
  display:grid; place-items:center; transition:border-color .15s, opacity .15s; padding:0}
.serit-ok button:hover:not(:disabled){border-color:var(--ink)}
.serit-ok button:disabled{opacity:.28; cursor:default}
@media(max-width:700px){ .serit-ok{display:none} }
/* Kaydırma alanı sayfanın kenarına kadar taşıyor: telefonda kartın
   kenardan kesilmesi "devamı var" hissini veriyor. */
.serit-ray{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(184px,206px);
  justify-content:start; gap:clamp(14px,2vw,24px); overflow-x:auto;
  scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:none;
  padding-bottom:4px}
.serit-ray::-webkit-scrollbar{display:none}
.serit-ray > *{scroll-snap-align:start}
@media(min-width:700px){ .serit-ray{grid-auto-columns:minmax(206px,236px)} }
@media(max-width:520px){
  .serit-ray{grid-auto-columns:minmax(150px,168px); margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad); scroll-padding-inline:var(--pad)}
}

.urun{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4.5vw,64px); align-items:end; padding-block:clamp(28px,4.5vw,56px)}
.urun:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.urun:nth-of-type(even) > div:first-child{order:2}
.urun + .urun{border-top:1px solid var(--cizgi-2)}
.kare{aspect-ratio:9/5; display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  overflow:hidden; background:var(--wash);
  transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.kare i{display:block; min-width:0}

/* fotoğraflar — her görsel tek sefer :root'ta tanımlı */
.f{background-size:cover; background-repeat:no-repeat; background-position:center 50%;
   background-color:var(--wash)}
.kolaj .f{background-position:center 42%}
.f-hcz-kahve{background-image:var(--im-hcz-kahve)}
.f-hcz-ekru {background-image:var(--im-hcz-ekru)}
.f-hcz-siyah{background-image:var(--im-hcz-siyah)}
.f-frh-tas  {background-image:var(--im-frh-tas)}
.f-frh-mint {background-image:var(--im-frh-mint)}
.f-frh-siyah{background-image:var(--im-frh-siyah)}
.kare:hover{transform:translateY(-6px)}
.kare-alt{margin-top:12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}

.bilgi{display:flex; flex-direction:column; gap:16px; min-width:0; padding-bottom:6px}
.bilgi h3{font-family:var(--baslik-font),Georgia,serif; font-size:clamp(38px,6.6vw,64px);
  line-height:.96; letter-spacing:.02em}
.slogan{font-family:var(--baslik-font),Georgia,serif; font-size:clamp(18px,2.4vw,23px);
  color:var(--ink-2); line-height:1.36; max-width:22ch}
dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:14px;
  padding-top:14px; border-top:1px solid var(--cizgi-2)}
dt{font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); align-self:center; padding-top:2px}
dd{margin:0; color:var(--ink-2)}
.satir-fiyat{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:4px}
.fiyat{font-size:21px; font-weight:400; letter-spacing:-.01em}
.al{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; padding-bottom:5px;
  border-bottom:1px solid var(--ink); transition:gap .2s, opacity .2s}
.al:hover{gap:16px; opacity:.6}
@media (max-width:760px){
  .urun,.urun:nth-of-type(even){grid-template-columns:1fr; gap:20px; align-items:start}
  .urun:nth-of-type(even) > div:first-child{order:0}
  .kare{aspect-ratio:9/5}
}

/* ══ ŞERİT ══ */
.serit{background:var(--wash); border-block:1px solid var(--cizgi-2);
  padding-block:clamp(52px,8vw,92px)}
.uc{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(28px,4.5vw,56px)}
.uc article{display:flex; flex-direction:column; gap:10px}
.uc h3{font-family:var(--baslik-font),Georgia,serif; font-size:24px; line-height:1.18}
.uc p{font-size:14.5px; color:var(--ink-2); line-height:1.76}

/* ══ BEDEN ══ */
.beden{padding-block:clamp(52px,8vw,96px)}
.tablo{overflow-x:auto; border:1px solid var(--cizgi); background:var(--kart)}
table{border-collapse:collapse; width:100%; min-width:430px; font-size:14.5px}
th{text-align:left; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); padding:14px 18px; border-bottom:1px solid var(--cizgi); white-space:nowrap}
td{padding:14px 18px; border-bottom:1px solid var(--cizgi-2); color:var(--ink-2)}
td:first-child{color:var(--ink)}
tr:last-child td{border-bottom:none}
.yardim{margin-top:22px; font-size:14.5px; color:var(--ink-2); max-width:58ch}
.yardim a{border-bottom:1px solid var(--cizgi); padding-bottom:1px}
.yardim a:hover{border-color:var(--ink)}
.bakim{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:28px; margin-top:clamp(38px,5vw,58px); padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--cizgi-2)}
.bakim article{display:flex; flex-direction:column; gap:9px}
.bakim ul{margin:0; padding-left:16px; font-size:14px; color:var(--ink-2);
  display:flex; flex-direction:column; gap:5px}

/* ══ İLETİŞİM ══ */
.iletisim{background:var(--koyu); color:var(--ekru); text-align:center;
  padding-block:clamp(56px,9vw,104px)}
.iletisim .kilit{font-size:clamp(25px,4.6vw,40px); display:block; margin-bottom:24px}
.iletisim p{color:rgba(245,242,235,.62); max-width:44ch; margin:0 auto 32px; font-size:15px}
.baglanti{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.baglanti a{padding:11px 22px; border:1px solid rgba(245,242,235,.22); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; transition:border-color .18s}
.baglanti a:hover{border-color:var(--ekru)}
footer{background:var(--koyu); color:rgba(245,242,235,.44);
  border-top:1px solid rgba(245,242,235,.12);
  padding:24px clamp(20px,5vw,56px) calc(24px + env(safe-area-inset-bottom,0px));
  text-align:center; font-size:11.5px; letter-spacing:.04em}
footer p{margin:0 0 5px}

/* Hareketi azaltma tercihi: giriş animasyonları ve yumuşak kaydırma
   kapanıyor. İçerik aynı yerde, yalnız yolu kısa. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gir,.gir-2,.gir-3,.gir-4{animation:none !important; opacity:1 !important; transform:none !important}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}


.dar .ic{max-width:760px}

/* duyuru bandı */
.duyuru{color:#fff; text-align:center; padding:8px 14px; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase}

/* açılır alt menü */
.menu-grup{position:relative; display:inline-block}
.menu-grup .menu-alt{position:absolute; top:100%; left:0; padding-top:8px;
  display:none; flex-direction:column; gap:8px; background:var(--ekru);
  border:1px solid var(--cizgi-2); padding:12px 16px; min-width:160px; z-index:12}
.menu-grup:hover .menu-alt,.menu-grup:focus-within .menu-alt{display:flex}

/* üst bar */
.ust{position:sticky; top:0; z-index:9; background:rgba(247,245,240,.88);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--cizgi-2);
  padding-block:12px}
.ust .ic{display:flex; align-items:center; justify-content:space-between; gap:18px}
.ust nav{display:flex; align-items:center; gap:22px; font-size:13px; color:var(--ink-2)}
/* Dokunma hedefi: yazı 13px ama tıklanabilir alan parmakla rahat
   vurulacak kadar yüksek. Dikey dolgu üst barın kendi boşluğunu
   yemesin diye negatif dış boşlukla dengeleniyor. */
.ust nav a{display:inline-flex; align-items:center; padding-block:11px; margin-block:-11px}
.ust nav a:hover{color:var(--ink)}
/* Logo: yazı kilidi mobilde de okunur kalsın diye küçülmüyor, yalnız
   harf aralığı daralıyor — tamamen küçültülünce marka kayboluyordu. */
.logo{display:inline-flex; align-items:center; flex:none}
.logo img{display:block; width:auto}
.logo-yazi{font-size:19px; flex:none}
.ust-uye{white-space:nowrap}
@media (max-width:640px){
  .ust nav{gap:14px; font-size:12px}
  .logo-yazi{font-size:17px; letter-spacing:.3em; text-indent:.3em}
}
@media (max-width:400px){
  .ust nav{gap:11px; font-size:11.5px}
  .logo-yazi{font-size:15.5px; letter-spacing:.24em; text-indent:.24em}
}
.metin h2{font-family:var(--baslik-font),Georgia,serif; font-size:clamp(22px,3.4vw,30px); margin:34px 0 10px}
.metin h3{font-size:15px; font-weight:500; margin:22px 0 6px}
.metin p,.metin li{color:var(--ink-2); font-size:15px; line-height:1.72}
.metin ul{padding-left:20px; margin:8px 0}
.rozet{display:inline-block; padding:3px 9px; border-radius:99px; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--cizgi)}
.rozet.bekliyor{color:#8A6D3B; border-color:#D8C9A8; background:#FBF6EA}
.rozet.odendi{color:#2E6B4F; border-color:#AFD3BF; background:#EEF7F1}
.rozet.kargoda{color:#3A5A8A; border-color:#B4C6DF; background:#EFF4FA}
.rozet.teslim{color:#4A4D52; border-color:var(--cizgi); background:var(--wash)}
.rozet.iptal,.rozet.iade{color:#8A3A3A; border-color:#DFB4B4; background:#FAEFEF}
.tukendi{opacity:.42; pointer-events:none}
.uyari{padding:12px 16px; border:1px solid #D8C9A8; background:#FBF6EA;
  color:#8A6D3B; font-size:14px; margin-bottom:18px}
.hata{padding:12px 16px; border:1px solid #DFB4B4; background:#FAEFEF;
  color:#8A3A3A; font-size:14px; margin-bottom:18px}
.tamam{padding:12px 16px; border:1px solid #AFD3BF; background:#EEF7F1;
  color:#2E6B4F; font-size:14px; margin-bottom:18px}
.alan{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.alan label{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
.alan input,.alan textarea,.alan select{
  font:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--cizgi);
  background:var(--kart); color:var(--ink); border-radius:2px; width:100%}
.alan input:focus,.alan textarea:focus,.alan select:focus{
  outline:none; border-color:var(--ink)}
.ikili{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:560px){ .ikili{grid-template-columns:1fr} }
.dugme{font:inherit; font-size:11px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; padding:14px 26px; border:1px solid var(--ink);
  background:var(--ink); color:var(--ekru); cursor:pointer; border-radius:2px}
.dugme.sade{background:transparent; color:var(--ink)}
.dugme:disabled{opacity:.4; cursor:not-allowed}
table.liste{width:100%; border-collapse:collapse; font-size:14px}
table.liste th{text-align:left; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mut); font-weight:500;
  padding:0 10px 10px; border-bottom:1px solid var(--cizgi)}
table.liste td{padding:12px 10px; border-bottom:1px solid var(--cizgi-2); vertical-align:top}


.alt{background:var(--koyu); color:var(--ekru); padding-block:clamp(34px,5vw,58px);
  margin-top:auto; text-align:left; letter-spacing:0}
.alt a{color:var(--ekru); opacity:.84}
.alt a:hover{opacity:1}
.alt-ust{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr);
  gap:30px 40px; align-items:start}
.alt-marka .kilit{font-size:13px; display:inline-block}
.alt-marka p{margin:12px 0 0; font-size:14px; line-height:1.75; opacity:.78; max-width:34ch}
.alt-sosyal{display:flex; gap:12px; margin-top:16px}
.alt-sosyal a{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(245,242,235,.22); border-radius:50%;
  opacity:.78; transition:opacity .18s, border-color .18s}
.alt-sosyal a:hover{opacity:1; border-color:rgba(245,242,235,.5)}
.alt-nav{display:flex; flex-direction:column; align-items:flex-start; gap:0; font-size:14px}
.alt-nav a{display:flex; align-items:center; min-height:44px; padding:2px 0}
.alt-bulten .et{color:var(--ekru); opacity:.62; line-height:1.6}
.alt-bulten form{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.alt-bulten input{flex:1; min-width:150px; font:inherit; font-size:15px; padding:13px 14px; min-height:44px;
  background:transparent; border:1px solid rgba(245,242,235,.28); color:var(--ekru);
  border-radius:2px}
.alt-bulten input::placeholder{color:rgba(245,242,235,.45)}
.alt-bulten input:focus{outline:none; border-color:rgba(245,242,235,.65)}
.alt-bulten button{font:inherit; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 20px; min-height:44px; background:var(--ekru); color:var(--koyu); border:0; border-radius:2px;
  cursor:pointer}
.alt-cevap{margin:10px 0 0; font-size:13px}
.alt-cevap.iyi{color:#A8D5BA}
.alt-cevap.kotu{color:#E9B7B7}
.alt-son{display:flex; align-items:center; justify-content:space-between; gap:16px 28px;
  flex-wrap:wrap; margin-top:30px; padding-top:20px; border-top:1px solid rgba(245,242,235,.14)}
.alt-not{margin:0; font-size:13px; opacity:.72}
.alt-odeme{display:flex; gap:8px; flex-wrap:wrap}
.alt-odeme span{font-size:12px; letter-spacing:.06em;
  padding:6px 11px; border:1px solid rgba(245,242,235,.24); border-radius:3px; opacity:.84}
@media (max-width:860px){
  .alt-ust{grid-template-columns:1fr 1fr}
  .alt-bulten{grid-column:1 / -1}
}
@media (max-width:560px){
  .alt-ust{grid-template-columns:1fr; gap:26px}
  .alt-son{flex-direction:column; align-items:flex-start}
}


.rozet-e{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:5px}
.rozet-e .rz-yazi{position:relative; z-index:2}

/* ── kum saati ── */
.rz-kum svg,.rozet-e .rz-kum{flex:none; position:relative; z-index:2;
  animation:rz-cevir 4.2s cubic-bezier(.7,0,.3,1) infinite}
.rz-kum-cerceve{stroke:currentColor; stroke-width:1.1; stroke-linecap:round; fill:none}
.rz-kum-ust,.rz-kum-alt{fill:currentColor; opacity:.75}
.rz-kum-ust{transform-origin:6px 2.6px; animation:rz-bosal 4.2s linear infinite}
.rz-kum-alt{transform-origin:6px 13.4px; animation:rz-dolsun 4.2s linear infinite}
.rz-kum-tane{stroke:currentColor; stroke-width:1; stroke-linecap:round;
  animation:rz-tane .5s linear infinite}
@keyframes rz-cevir{0%,88%{transform:rotate(0)}100%{transform:rotate(180deg)}}
@keyframes rz-bosal{0%{transform:scaleY(1)}85%,100%{transform:scaleY(.06)}}
@keyframes rz-dolsun{0%{transform:scaleY(.06)}85%,100%{transform:scaleY(1)}}
@keyframes rz-tane{0%{opacity:0; transform:translateY(-1px)}
  40%{opacity:.9}100%{opacity:0; transform:translateY(1.5px)}}

/* ── parlama ── */
.rz-parla{animation:rz-nabiz 2.6s ease-in-out infinite}
.rz-parla .rz-isik{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%); animation:rz-kay 2.6s ease-in-out infinite}
@keyframes rz-nabiz{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
  50%{box-shadow:0 0 0 3px rgba(169,50,50,.13)}}
@keyframes rz-kay{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

/* ── kar ── */
.rz-kar .rz-kar,.rozet-e .rz-kar{position:absolute; inset:0; z-index:1; pointer-events:none}
.rz-kar i{position:absolute; top:-4px; width:3px; height:3px; border-radius:50%;
  background:currentColor; opacity:.5; animation:rz-dus 3.4s linear infinite}
.rz-kar i:nth-child(1){left:12%; animation-duration:3.1s}
.rz-kar i:nth-child(2){left:30%; animation-duration:4.2s; animation-delay:-1.2s}
.rz-kar i:nth-child(3){left:52%; animation-duration:3.6s; animation-delay:-.6s}
.rz-kar i:nth-child(4){left:71%; animation-duration:4.6s; animation-delay:-2.1s}
.rz-kar i:nth-child(5){left:88%; animation-duration:3.3s; animation-delay:-1.7s}
@keyframes rz-dus{0%{transform:translate3d(0,0,0); opacity:0}
  12%{opacity:.55}80%{opacity:.4}
  100%{transform:translate3d(-4px,26px,0); opacity:0}}

/* ── güneş ── */
.rozet-e .rz-gunes{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.rz-gunes b{position:absolute; left:50%; bottom:-9px; width:18px; height:18px; margin-left:-9px;
  border-radius:50%; background:currentColor; opacity:.16;
  animation:rz-dogsun 6s ease-in-out infinite}
.rz-gunes::after{content:''; position:absolute; inset:0;
  background:radial-gradient(60% 120% at 50% 118%,rgba(255,255,255,.55),transparent 70%);
  animation:rz-isilti 6s ease-in-out infinite}
@keyframes rz-dogsun{0%,100%{transform:translateY(8px) scale(.7); opacity:.05}
  50%{transform:translateY(-3px) scale(1); opacity:.22}}
@keyframes rz-isilti{0%,100%{opacity:.2}50%{opacity:.75}}

/* ── yağmur ve esinti ── */
.rozet-e .rz-yagmur{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.rz-yagmur i{position:absolute; top:-6px; width:1px; height:6px; background:currentColor;
  opacity:.4; animation:rz-damla 1.5s linear infinite}
.rz-yagmur i:nth-child(1){left:18%}
.rz-yagmur i:nth-child(2){left:40%; animation-delay:-.45s}
.rz-yagmur i:nth-child(3){left:63%; animation-delay:-.9s}
.rz-yagmur i:nth-child(4){left:84%; animation-delay:-.25s}
.rz-yagmur u{position:absolute; left:-30%; height:1px; width:26%; background:currentColor;
  opacity:.22; border-radius:1px; animation:rz-esinti 4.4s ease-in-out infinite}
.rz-yagmur u:nth-child(5){top:34%}
.rz-yagmur u:nth-child(6){top:62%; animation-delay:-2.2s; width:18%}
@keyframes rz-damla{0%{transform:translate3d(0,0,0); opacity:0}
  20%{opacity:.45}100%{transform:translate3d(-3px,24px,0); opacity:0}}
@keyframes rz-esinti{0%{transform:translateX(0); opacity:0}
  25%{opacity:.28}60%{opacity:.16}100%{transform:translateX(460%); opacity:0}}

@media (prefers-reduced-motion:reduce){
  .rozet-e *,.rozet-e{animation:none !important}
  .rozet-e .rz-kar,.rozet-e .rz-yagmur,.rozet-e .rz-gunes,.rz-parla .rz-isik{display:none}
}


.cek-perde{position:fixed; inset:0; background:rgba(26,26,26,.38); opacity:0;
  visibility:hidden; transition:opacity .22s ease, visibility .22s; z-index:60}
.cek-perde.acik{opacity:1; visibility:visible}
.cekmece{position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw);
  background:var(--ekru); z-index:61; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:-18px 0 44px rgba(26,26,26,.13)}
.cekmece.acik{transform:none}
.cek-bas{display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 16px; border-bottom:1px solid var(--cizgi-2); flex:none}
.cek-bas h2{font-family:var(--baslik-font),Georgia,serif; font-size:23px; margin:0}
.cek-kapat{border:0; background:none; font:inherit; font-size:24px; line-height:1;
  cursor:pointer; color:var(--ink-2); width:44px; height:44px; margin:-10px -12px -10px 0}
.cek-ic{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch}
.cek-bos{padding:48px 22px; text-align:center; color:var(--ink-2)}
.cek-bos .dugme{margin-top:18px; display:inline-block}
.cek-kargo{padding:14px 22px; background:var(--wash); border-bottom:1px solid var(--cizgi-2)}
.cek-kargo-yazi{font-size:13px; color:var(--ink-2)}
.cek-kargo-yazi b{color:var(--ink)}
.cek-yol{height:3px; background:var(--cizgi-2); margin-top:9px; overflow:hidden}
.cek-yol span{display:block; height:100%; background:var(--ink); transition:width .3s ease}
.cek-liste{padding:4px 22px}
.cek-satir{display:grid; grid-template-columns:62px 1fr auto; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--cizgi-2)}
.cek-gorsel{aspect-ratio:3/4; background-color:var(--wash); display:block}
.cek-bilgi{min-width:0}
.cek-bilgi b{font-weight:500; font-size:14.5px}
.cek-alt{font-size:13px; color:var(--ink-2); margin-top:3px}
.cek-adet{display:flex; align-items:center; gap:2px; margin-top:9px}
.cek-adet button{width:26px; height:26px; border:1px solid var(--cizgi); background:var(--kart);
  font:inherit; font-size:14px; line-height:1; cursor:pointer; color:var(--ink); border-radius:2px}
.cek-adet button:disabled{opacity:.35; cursor:not-allowed}
.cek-adet span{min-width:26px; text-align:center; font-size:14px}
.cek-adet .cek-sil{width:auto; padding:0 9px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut); border-color:transparent; margin-left:6px}
.cek-adet .cek-sil:hover{color:var(--ink); border-color:var(--cizgi)}
.cek-tutar{font-size:14.5px; white-space:nowrap}
.cek-toplam{flex:none; padding:18px 22px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--cizgi-2); background:var(--ekru)}
.cek-satir-toplam{display:flex; justify-content:space-between; font-size:14.5px;
  color:var(--ink-2); margin-bottom:6px}
.cek-satir-toplam.iyi{color:#2E6B4F}
.cek-satir-toplam.buyuk{color:var(--ink); font-size:17px; margin:10px 0 16px}
.cek-toplam .dugme{display:block; text-align:center; width:100%}
.cek-link{display:block; text-align:center; margin-top:12px; font-size:13px;
  color:var(--ink-2); text-decoration:underline; text-underline-offset:3px}
.cek-yukleniyor{opacity:.45; pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .cekmece,.cek-perde,.cek-yol span{transition:none}
}


.cerez{position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--kart,#fff); border-top:1px solid var(--cizgi,#e3ded4);
  padding:12px clamp(14px,4vw,32px); box-shadow:0 -6px 24px rgba(0,0,0,.06);
  max-height:25vh; overflow-y:auto}
.cerez-ic{max-width:1180px; margin:0 auto; display:flex; gap:14px 22px;
  align-items:center; justify-content:space-between; flex-wrap:wrap}
.cerez p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2,#5a5650);
  max-width:64ch}
.cerez a{color:inherit}
.cerez-dugmeler{display:flex; gap:8px; flex-wrap:wrap}
.cerez button{font:inherit; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:12px 18px; min-height:44px; border-radius:2px;
  cursor:pointer; border:1px solid var(--ink,#23211f); white-space:nowrap}
.cerez button[value="1"]{background:var(--ink,#23211f); color:var(--ekru,#f5f2eb)}
.cerez button[value="0"]{background:transparent; color:var(--ink,#23211f)}
/* Telefonda bant ekranın üçte birini kaplıyordu. Metin kısaldı, düğmeler
   yan yana kaldı ve bandın yüksekliği görüntü alanının %25'iyle sınırlı. */
@media (max-width:560px){
  .cerez{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .cerez-ic{flex-direction:column; align-items:stretch; gap:10px}
  .cerez p{font-size:13px; line-height:1.5}
  .cerez-dugmeler{display:flex; gap:8px}
  .cerez button{flex:1; padding:12px 6px; font-size:12px; letter-spacing:.08em}
}