/* ===== TEMEL ===== */
:root{
  --lacivert:#16243D; --indigo:#2C4B7C; --acik:#F7F5F1; --kagit:#FFFFFF;
  --metin:#1C1C1C; --soluk:#6B6B6B; --cizgi:#E6E2DC;
  --vurgu:#C8763C; --yesil:#2E7D57;
  --golge:0 2px 12px rgba(22,36,61,.07); --golge2:0 8px 28px rgba(22,36,61,.13);
  --r:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--acik);color:var(--metin);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.sarmal{max-width:1200px;margin:0 auto;padding:0 18px}

/* ===== USTBAR ===== */
.ustbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--cizgi)}
.ustbar-ic{display:flex;align-items:center;justify-content:space-between;
  height:64px;max-width:1200px;margin:0 auto;padding:0 18px}
.logo{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-size:24px;font-weight:600;letter-spacing:1.5px;color:var(--lacivert);line-height:1.05}
.logo small{display:block;font-family:'Inter',sans-serif;font-size:9px;font-weight:600;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--soluk);margin-top:-3px}
.ustbar nav{display:flex;gap:26px;font-size:14px;font-weight:600}
.ustbar nav a:hover{color:var(--indigo)}
.sepet-btn{position:relative;display:flex;align-items:center;gap:7px;
  background:var(--lacivert);color:#fff;padding:10px 17px;border-radius:99px;
  font-size:13.5px;font-weight:700;border:0;cursor:pointer}
.sepet-sayi{background:var(--vurgu);color:#fff;border-radius:99px;
  min-width:19px;height:19px;font-size:11px;font-weight:800;
  display:grid;place-items:center;padding:0 5px}
@media(max-width:860px){.ustbar nav{display:none}}

/* ===== HERO ===== */
.hero{background:linear-gradient(135deg,var(--lacivert),var(--indigo));
  color:#fff;padding:52px 0 56px;text-align:center}
.hero h1{font-size:clamp(27px,5vw,42px);margin:0 0 12px;font-weight:800;letter-spacing:-.8px}
.hero p{margin:0 auto;max-width:520px;opacity:.88;font-size:16px}
.hero-rozet{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.hero-rozet span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  padding:7px 15px;border-radius:99px;font-size:12.5px;font-weight:600}

/* ===== URUN IZGARASI ===== */
.bolum-bas{display:flex;align-items:baseline;justify-content:space-between;
  margin:44px 0 20px;gap:14px;flex-wrap:wrap}
.bolum-bas h2{font-size:23px;margin:0;font-weight:800;letter-spacing:-.4px}
.bolum-bas span{color:var(--soluk);font-size:14px}
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:20px;padding-bottom:56px}
.kart{background:var(--kagit);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--golge);transition:transform .18s,box-shadow .18s;display:block}
.kart:hover{transform:translateY(-4px);box-shadow:var(--golge2)}
.kart-foto{position:relative;aspect-ratio:2/3;background:#EFECE7;overflow:hidden}
.kart-foto img{width:100%;height:100%;object-fit:cover}
.kart-foto img.ikinci{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.kart:hover .kart-foto img.ikinci{opacity:1}
.kart-govde{padding:13px 14px 16px}
.kart-kod{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--soluk);text-transform:uppercase}
.kart-ad{font-size:14.5px;font-weight:700;margin:4px 0 9px;line-height:1.35}
.kart-fiyat{font-size:17px;font-weight:800;color:var(--lacivert)}
.kart-fiyat.yok{font-size:13px;font-weight:700;color:var(--vurgu)}
.renk-noktalar{display:flex;gap:5px;margin-top:9px}
.renk-nokta{width:15px;height:15px;border-radius:50%;border:1.5px solid #fff;
  box-shadow:0 0 0 1px var(--cizgi)}

/* ===== URUN DETAY ===== */
.urun-duzen{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding:32px 0 60px}
@media(max-width:900px){.urun-duzen{grid-template-columns:1fr;gap:26px;padding-top:18px}}
.galeri-buyuk{aspect-ratio:2/3;background:#EFECE7;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--golge)}
.galeri-buyuk img{width:100%;height:100%;object-fit:cover}
.galeri-kucuk{display:flex;gap:9px;margin-top:11px;overflow-x:auto;padding-bottom:4px}
.galeri-kucuk img{width:68px;aspect-ratio:2/3;object-fit:cover;border-radius:9px;
  cursor:pointer;opacity:.55;border:2px solid transparent;flex:0 0 auto;transition:opacity .15s}
.galeri-kucuk img.secili{opacity:1;border-color:var(--lacivert)}
.urun-kod{font-size:11.5px;font-weight:700;letter-spacing:1.6px;color:var(--soluk);text-transform:uppercase}
.urun-ad{font-size:27px;font-weight:800;margin:7px 0 14px;letter-spacing:-.6px;line-height:1.25}
.urun-fiyat{font-size:29px;font-weight:800;color:var(--lacivert);margin-bottom:22px}
.urun-fiyat.yok{font-size:17px;color:var(--vurgu)}
.secim-bas{font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.1px;color:var(--soluk);margin:20px 0 9px}
.secenekler{display:flex;gap:8px;flex-wrap:wrap}
.secenek{padding:9px 16px;border:1.5px solid var(--cizgi);background:#fff;
  border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .14s}
.secenek:hover{border-color:var(--indigo)}
.secenek.secili{background:var(--lacivert);color:#fff;border-color:var(--lacivert)}
.buyuk-btn{width:100%;margin-top:26px;padding:16px;background:var(--lacivert);
  color:#fff;border:0;border-radius:11px;font-size:15.5px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .15s}
.buyuk-btn:hover{background:var(--indigo)}
.buyuk-btn.wa{background:var(--yesil);margin-top:11px}
.buyuk-btn.wa:hover{background:#25604A}
.buyuk-btn:disabled{background:#C4C4C4;cursor:not-allowed}
.guven{display:flex;flex-direction:column;gap:9px;margin-top:24px;
  padding-top:22px;border-top:1px solid var(--cizgi);font-size:13.5px;color:var(--soluk)}
.guven div{display:flex;gap:9px;align-items:flex-start}
.katlanir{margin-top:26px;border-top:1px solid var(--cizgi)}
.katlanir details{border-bottom:1px solid var(--cizgi)}
.katlanir summary{padding:15px 0;font-weight:700;cursor:pointer;font-size:14.5px;list-style:none}
.katlanir summary::-webkit-details-marker{display:none}
.katlanir summary::after{content:"+";float:right;font-size:19px;color:var(--soluk);font-weight:400}
.katlanir details[open] summary::after{content:"\2212"}
.katlanir .icerik{padding:0 0 17px;font-size:14px;color:#444}
.katlanir .icerik ul{margin:0;padding-left:19px}
.katlanir .icerik li{margin-bottom:5px}

/* ===== SEPET ===== */
.sepet-duzen{display:grid;grid-template-columns:1fr 340px;gap:28px;padding:28px 0 60px}
@media(max-width:860px){.sepet-duzen{grid-template-columns:1fr}}
.sepet-satir{display:grid;grid-template-columns:82px 1fr auto;gap:15px;
  background:#fff;border-radius:var(--r);padding:13px;margin-bottom:11px;
  box-shadow:var(--golge);align-items:center}
.sepet-satir img{width:82px;aspect-ratio:2/3;object-fit:cover;border-radius:9px}
.sepet-ad{font-weight:700;font-size:14.5px;margin-bottom:3px}
.sepet-detay{font-size:12.5px;color:var(--soluk)}
.adet{display:flex;align-items:center;gap:11px;margin-top:8px}
.adet button{width:27px;height:27px;border:1.5px solid var(--cizgi);background:#fff;
  border-radius:7px;cursor:pointer;font-size:15px;font-family:inherit;line-height:1}
.sil{background:none;border:0;color:#B03030;font-size:12.5px;cursor:pointer;
  font-family:inherit;padding:0;margin-top:7px;text-decoration:underline}
.ozet{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--golge);
  position:sticky;top:84px}
.ozet-satir{display:flex;justify-content:space-between;margin-bottom:11px;font-size:14.5px}
.ozet-satir.toplam{font-size:19px;font-weight:800;padding-top:14px;
  border-top:1px solid var(--cizgi);margin-top:16px;color:var(--lacivert)}
.bos{text-align:center;padding:70px 20px;color:var(--soluk)}

/* ===== METIN SAYFALARI ===== */
.metin{background:#fff;border-radius:var(--r);padding:34px;margin:28px 0 56px;
  box-shadow:var(--golge);max-width:820px}
@media(max-width:600px){.metin{padding:22px}}
.metin h1{font-size:26px;margin:0 0 6px;letter-spacing:-.5px}
.metin h2{font-size:17px;margin:28px 0 9px;color:var(--lacivert)}
.metin p,.metin li{font-size:14.5px;color:#333}
.metin .tarih{color:var(--soluk);font-size:13px;margin-bottom:22px}

/* ===== ALTBILGI ===== */
footer{background:var(--lacivert);color:#fff;padding:42px 0 26px;margin-top:auto}
.footer-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:30px;max-width:1200px;margin:0 auto;padding:0 18px}
footer h4{font-size:13px;text-transform:uppercase;letter-spacing:1.3px;
  margin:0 0 13px;opacity:.65;font-weight:700}
footer a,footer p{color:rgba(255,255,255,.82);font-size:14px;
  display:block;margin-bottom:7px}
footer a:hover{color:#fff}
.footer-alt{text-align:center;margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;opacity:.6}

/* ===== BILDIRIM ===== */
.bildirim{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--lacivert);color:#fff;padding:14px 26px;border-radius:99px;
  font-size:14px;font-weight:600;z-index:200;transition:transform .3s;box-shadow:var(--golge2)}
.bildirim.gor{transform:translateX(-50%) translateY(0)}

/* ===== WHATSAPP YUZEN BUTON ===== */
.wa-yuzen{position:fixed;right:18px;bottom:18px;width:54px;height:54px;
  background:#25D366;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--golge2);z-index:90}
.wa-yuzen svg{width:29px;height:29px;fill:#fff}

html,body{min-height:100%}
body{display:flex;flex-direction:column}
main{flex:1}