/* Ecza Dolabı — site stili
   Renkler, tipografi ve ölçüler uygulamadaki Tasarim.swift ile birebir. */

@font-face{font-family:"Literata";src:url("fontlar/Literata-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("fontlar/Literata-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fontlar/Figtree-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fontlar/Figtree-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --zemin:#F7F4EC; --yuzey:#FDFBF6; --simge-zemin:#F2EDDF;
  --murekkep:#1A1F1C; --murekkep2:#5C6259; --murekkep3:#6F756C;
  --cizgi:#E2DCCC; --cizgi-koyu:#CFC7B2;
  --muhur:#14624A; --muhur-yumusak:#E4EDE7;
  --gecmis:#A8341F; --gecmis-yumusak:#F2E2DC;
  --yaklasan:#8A6414; --yaklasan-yumusak:#F1E7CF;
  --bilgi:#35566B; --bilgi-yumusak:#E1E8EC;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --yaricap:10px;
}
@media (prefers-color-scheme:dark){
  :root{
    --zemin:#1A1A18; --yuzey:#232320; --simge-zemin:#22261F;
    --murekkep:#F2EFE7; --murekkep2:#B0AEA3; --murekkep3:#8A887E;
    --cizgi:#33332E; --cizgi-koyu:#46463F;
    --muhur:#4FB58F; --muhur-yumusak:#1E3830;
    --gecmis:#E8735A; --gecmis-yumusak:#3A241E;
    --yaklasan:#D9A84A; --yaklasan-yumusak:#332913;
    --bilgi:#7FA8C0; --bilgi-yumusak:#1E2B33;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--zemin);color:var(--murekkep);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:48px 20px 64px}
img{max-width:100%;height:auto}

a{color:var(--muhur);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

h1{font:500 clamp(32px,6.4vw,46px)/1.12 var(--serif);margin:0 0 14px;letter-spacing:-.01em}
h2{font:400 26px/1.25 var(--serif);margin:0 0 6px}
h3{font:500 17px/1.35 var(--serif);margin:0 0 6px}
p{margin:0 0 14px;color:var(--murekkep2)}
strong{color:var(--murekkep);font-weight:500}

.etiket{
  display:block;font:500 11px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--murekkep3);margin-bottom:10px;
}
.bolum{margin-top:56px;padding-top:32px;border-top:1px solid var(--cizgi)}
.bolum-giris{max-width:56ch}

/* Kapsül rozet ve düğme */
.rozet{
  display:inline-block;font:500 11px/1 var(--sans);border-radius:999px;
  padding:6px 12px;background:var(--muhur-yumusak);color:var(--muhur);
}
.rozet-uyari{background:var(--yaklasan-yumusak);color:var(--yaklasan)}
.dugme{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:999px;border:1px solid var(--muhur);background:var(--muhur);
  color:var(--yuzey);font:500 15px/1 var(--sans);text-decoration:none;
  transition:transform .15s ease-out,filter .15s ease-out;
}
.dugme:hover{filter:brightness(1.06);text-decoration:none}
.dugme:active{transform:scale(.98)}
.dugme-cerceve{background:transparent;color:var(--muhur)}

/* Hero */
.hero{text-align:center;padding-bottom:8px}
.hero .slogan{font-size:18px;max-width:48ch;margin:0 auto 20px}
.kunye{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  font:400 12px/1 var(--sans);color:var(--murekkep3);margin-top:18px;
}
.kunye span{border:1px solid var(--cizgi-koyu);border-radius:999px;padding:6px 12px}

/* Dolap işareti: kapaklar bir kez aralanır */
.dolap{
  width:132px;height:132px;margin:0 auto 22px;position:relative;
  background:var(--simge-zemin);border-radius:26px;
  display:grid;place-items:center;
}
.dolap-ic{
  position:relative;width:76px;height:76px;
  border:3px solid var(--muhur);border-radius:8px;
  perspective:520px;
}
.raf{position:absolute;left:8px;right:8px;height:2px;background:var(--muhur);opacity:.45}
.raf:nth-of-type(1){top:20px}
.raf:nth-of-type(2){top:37px}
.raf:nth-of-type(3){top:54px}
.kapak{
  position:absolute;top:0;height:100%;width:50%;
  background:var(--simge-zemin);
  transition:transform .4s ease-out;
}
.kapak-sol{left:0;border-right:1.5px solid var(--muhur);transform-origin:left center}
.kapak-sag{right:0;border-left:1.5px solid var(--muhur);transform-origin:right center}
.kapak::after{
  content:"";position:absolute;top:50%;width:3px;height:14px;
  margin-top:-7px;background:var(--muhur);border-radius:999px;
}
.kapak-sol::after{right:5px}
.kapak-sag::after{left:5px}
.acik .kapak-sol{transform:rotateY(-72deg)}
.acik .kapak-sag{transform:rotateY(72deg)}

.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.hero .cta{justify-content:center}
.dugme.indir{gap:2px}
.dugme.indir svg{margin-right:6px}

/* Üst indirme şeridi (indir.js yerleştirir) */
.serit{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:var(--yuzey);border-bottom:1px solid var(--cizgi);
}
.serit img{border-radius:8px;flex:none}
.serit-metin{display:flex;flex-direction:column;font:400 12px/1.35 var(--sans);color:var(--murekkep3);min-width:0}
.serit-metin b{font:500 14px/1.3 var(--serif);color:var(--murekkep)}
.serit-dugme{
  margin-left:auto;flex:none;border-radius:999px;background:var(--muhur);color:var(--yuzey);
  font:500 13px/1 var(--sans);padding:9px 16px;text-decoration:none;
}
.serit-dugme:hover{text-decoration:none;filter:brightness(1.06)}
.serit-kapat{
  flex:none;border:0;background:none;color:var(--murekkep3);font-size:20px;line-height:1;
  padding:4px 2px 6px;cursor:pointer;
}

/* Kartlar */
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:12px;margin-top:22px}
.kart{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--yaricap);
  padding:18px 18px 16px;transition:border-color .15s ease-out;
}
.kart:hover{border-color:var(--cizgi-koyu)}
.kart p{margin:0;font-size:15px;line-height:1.55}
.kart p + p{margin-top:8px;font-size:13.5px;color:var(--murekkep3)}
.durum{display:flex;gap:6px;margin-bottom:10px}
.durum i{width:9px;height:9px;border-radius:999px;display:block}

/* Liste */
.satirlar{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--cizgi)}
.satirlar li{padding:14px 0;border-bottom:1px solid var(--cizgi);font-size:15px;color:var(--murekkep2)}
.satirlar b{color:var(--murekkep);font-weight:500;font-family:var(--serif)}

/* Ekran görüntüleri */
.ekranlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:24px}
.ekran img{border:1px solid var(--cizgi);border-radius:var(--yaricap);display:block;width:100%}
.ekran figcaption{font:400 12px/1.45 var(--sans);color:var(--murekkep3);margin-top:8px}

/* Vurgu kutusu */
.kutu{
  background:var(--yuzey);border:1px solid var(--cizgi);border-left:3px solid var(--muhur);
  border-radius:var(--yaricap);padding:20px;margin-top:20px;
}
.kutu p:last-child{margin-bottom:0}
.uyari{
  margin-top:32px;padding:18px 20px;border:1px dashed var(--cizgi-koyu);
  border-radius:var(--yaricap);
}
.uyari p{font-size:14px;line-height:1.6;margin:0}
.uyari p + p{margin-top:10px}

/* SSS */
.sss{border-top:1px solid var(--cizgi);margin-top:24px}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{
  cursor:pointer;padding:16px 28px 16px 0;position:relative;list-style:none;
  font:500 16px/1.4 var(--serif);color:var(--murekkep);
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{
  content:"";position:absolute;right:6px;top:22px;width:8px;height:8px;
  border-right:1.5px solid var(--murekkep3);border-bottom:1.5px solid var(--murekkep3);
  transform:rotate(45deg);transition:transform .15s ease-out;
}
.sss details[open] summary::after{transform:rotate(-135deg);top:25px}
.sss .cevap{padding:0 0 18px}
.sss .cevap p:last-child{margin-bottom:0}

/* Yasal sayfalar */
.yasal h2{font-size:22px;margin-top:36px}
.yasal p,.yasal li{color:var(--murekkep2)}
.yasal ul{padding-left:20px}
.yasal li{margin-bottom:8px}
.geri{font:400 14px/1 var(--sans);display:inline-block;margin-bottom:28px}
.tarih{font:400 12px/1 var(--sans);color:var(--murekkep3)}

footer{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--cizgi);
  font-size:14px;color:var(--murekkep3);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
}
footer nav a{margin-left:14px}
footer nav a:first-child{margin-left:0}

@media (max-width:520px){
  .wrap{padding:36px 18px 52px}
  footer{flex-direction:column;align-items:flex-start}
  footer nav a{margin:0 14px 0 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* Ekran görüntüsü büyütme (lightbox, buyut.js) */
.ekran img{cursor:zoom-in}
.buyutec{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:24px;
  background:rgba(20,20,18,.93);animation:buyutec-ac .18s ease-out;
}
.buyutec img{
  max-width:min(92vw,560px);max-height:80vh;width:auto;height:auto;
  border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);
}
.buyutec-baslik{font:400 15px/1.4 var(--sans);color:#F2EFE7;text-align:center;max-width:80ch}
.buyutec-ipucu{font:400 12px/1 var(--sans);color:#B0AEA3}
@keyframes buyutec-ac{from{opacity:0}to{opacity:1}}
body.buyutec-acik{overflow:hidden}