/* ArkaYüz ana sayfa düzeni. Renkler, temel yazı, başlık/menü, düğme ve alt bilgi assets/ortak.css'te.
   Tek gösteriş noktası: hero'daki çevrilen ambalaj (ön yüz → arka yüz). Geri kalan bölümler sade tutulur. */
:root{
  --paket:#4A2A1A; --paket-2:#2F1A10; --altin:#FFC43D; --etiket:#F5F5F0;
  --cevir-sure:.9s; --cevir-egri:cubic-bezier(.2,.75,.25,1);
}
h1{font-weight:900;font-size:clamp(2rem,10.6vw,3.9rem);line-height:1.02}
@media (min-width:901px){h1{font-size:clamp(2.6rem,4.6vw,3.9rem)}}
h2{font-weight:900;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.1}
h3{font-weight:700;font-size:1.2rem;line-height:1.25}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:34rem;text-wrap:pretty}

/* ---------- Hero: başlık + ambalaj + kayıt formu ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"giris sahne" "kayit sahne";column-gap:clamp(2rem,5vw,4.5rem);row-gap:2rem;align-items:start;padding-top:3rem;padding-bottom:5.5rem}
.giris{grid-area:giris;display:flex;flex-direction:column;gap:1.4rem;align-self:end}
.sahne{grid-area:sahne;margin:0;align-self:center;display:flex;flex-direction:column;gap:1.1rem}
.kayit{grid-area:kayit;display:flex;flex-direction:column;gap:1.2rem;min-width:0}

/* Ambalaj: iki yüz aynı ızgara hücresinde üst üste; yükseklik büyük yüze göre */
.paket{position:relative;perspective:1700px;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 28px 34px rgba(0,0,0,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.paket-ic{display:grid;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform var(--cevir-sure) var(--cevir-egri)}
.paket.cevrik .paket-ic{transform:rotateY(180deg)}
.yuz{grid-area:1/1;position:relative;min-height:clamp(250px,30vw,330px);border-radius:6px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* Kıvrık uç kaynakları: iki yanda dişli kenar */
  --dis:9px;
  clip-path:polygon(var(--dis) 0,calc(100% - var(--dis)) 0,100% 4%,calc(100% - var(--dis)) 8%,100% 12%,calc(100% - var(--dis)) 16%,100% 20%,calc(100% - var(--dis)) 24%,100% 28%,calc(100% - var(--dis)) 32%,100% 36%,calc(100% - var(--dis)) 40%,100% 44%,calc(100% - var(--dis)) 48%,100% 52%,calc(100% - var(--dis)) 56%,100% 60%,calc(100% - var(--dis)) 64%,100% 68%,calc(100% - var(--dis)) 72%,100% 76%,calc(100% - var(--dis)) 80%,100% 84%,calc(100% - var(--dis)) 88%,100% 92%,calc(100% - var(--dis)) 96%,calc(100% - var(--dis)) 100%,var(--dis) 100%,0 96%,var(--dis) 92%,0 88%,var(--dis) 84%,0 80%,var(--dis) 76%,0 72%,var(--dis) 68%,0 64%,var(--dis) 60%,0 56%,var(--dis) 52%,0 48%,var(--dis) 44%,0 40%,var(--dis) 36%,0 32%,var(--dis) 28%,0 24%,var(--dis) 20%,0 16%,var(--dis) 12%,0 8%,var(--dis) 4%)}
/* Kaynak şeritleri (dikey yivler) */
.yuz::before,.yuz::after{content:"";position:absolute;top:0;bottom:0;width:30px;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,rgba(255,255,255,.07) 2px 5px)}
.yuz::before{left:0} .yuz::after{right:0}

/* Ön yüz: hayali bir atıştırmalık ambalajı (gerçek marka değildir) */
.on{background:radial-gradient(120% 90% at 78% 70%,#6A3C22 0,var(--paket) 55%,var(--paket-2) 100%);color:var(--altin)}
.on-icerik{position:relative;z-index:1;height:100%;padding:1.6rem 2.6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.on-marka{font-weight:800;font-size:.8rem;color:#E9C9A6;opacity:.85}
.on-ad{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:.95;letter-spacing:-.03em;color:var(--altin);text-shadow:0 3px 0 #2A170C;transform:skewX(-6deg);margin-top:.2rem}
.on-tat{font-weight:800;font-size:1.05rem;color:#F7E3C8;font-style:italic}
.on-iddia{font-weight:800;font-size:.85rem;color:#F7E3C8;border:1.5px solid rgba(247,227,200,.55);border-radius:999px;padding:.15rem .6rem;margin-top:.45rem}
.on-iddia + .on-iddia{margin-top:.3rem}
.on-gramaj{position:absolute;left:2.6rem;bottom:1.1rem;font-weight:800;font-size:.85rem;color:#E9C9A6}
.on-yildiz{position:absolute;z-index:3;top:1.1rem;right:2.4rem;width:96px;height:96px;display:grid;place-items:center;text-align:center;padding:0 12px;background:#C62F23;color:#fff;font-weight:900;font-size:.82rem;line-height:1.1;transform:rotate(12deg);
  clip-path:polygon(50% 0,59% 12%,73% 6%,75% 21%,90% 21%,85% 35%,98% 43%,87% 53%,96% 66%,81% 69%,80% 84%,66% 81%,59% 95%,50% 86%,41% 95%,34% 81%,20% 84%,19% 69%,4% 66%,13% 53%,2% 43%,15% 35%,10% 21%,25% 21%,27% 6%,41% 12%)}
.on-gorsel{position:absolute;z-index:1;right:1.4rem;bottom:.6rem;width:58%;max-width:300px;height:auto}

/* Arka yüz: etiket kâğıdı, içindekiler, besin tablosu, barkod */
.arka{background:var(--etiket);color:var(--light-ink);transform:rotateY(180deg)}
.arka::before,.arka::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,rgba(255,255,255,.5) 2px 5px)}
.arka-icerik{height:100%;padding:1.3rem 2.5rem 1.2rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.3rem;align-items:start}
.arka-sol{display:flex;flex-direction:column;gap:1rem;height:100%}
.icindekiler{font-size:.8rem;line-height:1.5;color:#2B2B26}
.icindekiler b{font-weight:800;color:var(--light-ink)}
.icindekiler mark,.besin .vurgu{background:var(--lime);color:var(--light-ink)}
.icindekiler mark{padding:0 .15em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.barkod{margin-top:auto;width:96px;height:40px;background:#fff;padding:4px 6px}
.besin{width:100%;border-collapse:collapse;border:2px solid var(--light-ink);font-size:.74rem;line-height:1.2;font-variant-numeric:tabular-nums}
.besin caption{caption-side:top;text-align:left;font-weight:900;font-size:.8rem;padding:.3rem .45rem;border:2px solid var(--light-ink);border-bottom:6px solid var(--light-ink);background:var(--etiket)}
.besin th,.besin td{padding:.22rem .45rem;border-top:1px solid #8A8A80;text-align:left;font-weight:600}
.besin td{text-align:right;white-space:nowrap}
.besin .alt-satir th{padding-left:1.1rem;font-weight:500}
.besin tr:first-child th,.besin tr:first-child td{border-top:0}
.besin .vurgu th,.besin .vurgu td{font-weight:800}

/* ArkaYüz puan etiketi: arka yüze yapıştırılmış yuvarlak etiket */
.puan-etiketi{position:absolute;z-index:3;left:calc(2.5rem + 108px);bottom:1.1rem;margin:0;transform:rotate(-9deg)}
.puan-etiketi .score{width:86px;height:86px;font-size:1.9rem;background:var(--orange);box-shadow:0 0 0 4px var(--etiket),0 6px 14px rgba(0,0,0,.28)}
.paket.cevrik .puan-etiketi{animation:yapistir .45s calc(var(--cevir-sure) - .05s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes yapistir{from{opacity:0;transform:rotate(-9deg) scale(1.5)}to{opacity:1;transform:rotate(-9deg) scale(1)}}

/* JS yoksa yalnız arka yüz (bilgi veren yüz) görünür */
html:not(.js) .on{display:none}
html:not(.js) .arka{transform:none}
html:not(.js) .paket{cursor:default}

.sahne figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;padding:0 .2rem}
.cevir{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.1rem 0 .85rem;border:1.5px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;transition-property:border-color,background-color,transform;transition-duration:.15s;transition-timing-function:ease-out}
.cevir:hover{border-color:var(--lime)}
.cevir:active{transform:scale(.96)}
.cevir svg{color:var(--lime);transition:transform var(--cevir-sure) var(--cevir-egri)}
.cevir[aria-pressed=true] svg{transform:scaleX(-1)}
.sahne-not{flex:1 1 16rem;font-size:.9rem;color:var(--ink-2);text-wrap:pretty}

/* Kayıt formu */
.kayit-baslik{font-weight:700;color:var(--ink);max-width:34rem}
form.join{display:flex;flex-direction:column;gap:1.1rem;max-width:34rem}
.row{display:flex;flex-wrap:wrap;gap:.75rem}
.row input[type=email]{flex:1 1 240px;min-width:0;min-height:54px;padding:0 1.1rem;border:1.5px solid var(--line-2);border-radius:10px;font:inherit;background:var(--card);color:var(--ink);transition:border-color .15s ease-out}
.row input[type=email]:hover{border-color:#55554E}
.row input::placeholder{color:#8F8F86}
.btn{transition-property:background-color,transform;transition-duration:.15s;transition-timing-function:ease-out}
.btn:active{transform:scale(.97)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2)}
.consent input{margin:.25rem 0 0;width:18px;height:18px;accent-color:var(--lime);flex:0 0 auto}
.note{font-size:.9rem;color:var(--ink-2);display:flex;align-items:center;gap:.5rem}
.msg{display:none;padding:.9rem 1rem;border-radius:10px;font-weight:700}
.msg.ok{display:block;background:#1F2D12;color:var(--lime)}
.msg.err{display:block;background:#2D1515;color:#FF9C9C}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.counter{font-size:.95rem;color:var(--ink-2);min-height:1.5em}
.counter strong{color:var(--lime);font-family:'Unbounded',sans-serif;font-weight:900;font-variant-numeric:tabular-nums}

fieldset.cats{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:.6rem}
fieldset.cats legend{font-weight:800;font-size:.95rem;padding:0;margin-bottom:.6rem;color:var(--ink)}
fieldset.cats .opt{font-weight:400;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1.5px solid var(--line-2);border-radius:999px;font-weight:700;font-size:.92rem;color:var(--ink-2);cursor:pointer;transition-property:border-color,color,background-color;transition-duration:.15s;transition-timing-function:ease-out}
.chip:hover{border-color:var(--lime);color:var(--ink)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip:has(input:checked){background:var(--lime);border-color:var(--lime);color:var(--light-ink)}
.chip:has(input:focus-visible){outline:3px solid var(--lime);outline-offset:3px}

.thanks{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.5rem;max-width:34rem}
.thanks h2{font-size:1.4rem}
.thanks p{color:var(--ink-2)}
.thanks:focus{outline:none}
.thanks > div{display:flex;flex-direction:column;gap:.5rem;flex:1 1 220px;min-width:0}
.mascot-thanks{width:96px;height:auto;flex:0 0 auto}

/* ---------- Bölümler ---------- */
main > section:not(.hero){padding:5rem 0}
.iki-kolon{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.kolon-metin{display:flex;flex-direction:column;gap:1.1rem}

/* Nasıl çalışır: gerçek bir sıra, numaralar sırayı gösterir */
.adimlar{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.adimlar h2{margin-bottom:2.5rem}
.adim-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.adim-liste li{display:flex;flex-direction:column;gap:.7rem;padding-top:1.2rem;border-top:2px solid var(--line-2)}
.adim-liste li:first-child{border-top-color:var(--lime)}
.adim-no{font-family:'Unbounded',sans-serif;font-weight:900;font-size:2.6rem;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.adim-liste p{color:var(--ink-2);max-width:22rem;text-wrap:pretty}

/* Bağımsızlık: ambalajdaki "içermez" beyanı biçiminde */
.icermez{background:var(--etiket);color:var(--light-ink);border:3px solid var(--light-ink);outline:6px solid var(--etiket);border-radius:4px;padding:1.1rem 1.3rem 1.2rem;max-width:36rem}
.icermez-baslik{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1;letter-spacing:-.02em;padding-bottom:.6rem;border-bottom:10px solid var(--light-ink)}
.icermez dl{margin:0}
.icermez dl > div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;padding:.75rem 0;border-bottom:1px solid #8A8A80}
.icermez dl > div:last-child{border-bottom:5px solid var(--light-ink)}
.icermez dt{font-weight:900;font-size:1.05rem}
.icermez dd{margin:0;color:var(--light-ink-2);text-wrap:pretty}
.icermez-not{padding-top:.8rem;font-size:.95rem;color:var(--light-ink-2);text-wrap:pretty}
.icermez-not b{color:var(--light-ink)}

/* Formül + örnek puan dökümü */
.formul{border-top:1px solid var(--line)}
a.more{color:var(--ink);font-weight:800;text-decoration:none;border-bottom:3px solid var(--lime);padding-bottom:2px;align-self:flex-start}
a.more:hover{color:var(--lime)}
.gofret{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr)}
.gofret-top{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.gofret-top .score{width:96px;height:96px;font-size:2rem;background:var(--orange)}
.gofret-top .meta{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.gofret-top .meta span{color:var(--ink-2);font-size:.95rem}
.stack{display:flex;height:26px;border-radius:6px;overflow:hidden;background:var(--line);margin:0}
.stack span{display:block;height:100%;transition-property:opacity,filter;transition-duration:.2s;transition-timing-function:ease}
.stack span.dim{opacity:.3}
.stack span.hot{filter:brightness(1.15) saturate(1.1)}
.stack-legend{font-size:.9rem;color:var(--ink-2);margin:0}
.acc-liste{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.acc + .acc{border-top:1px solid var(--line)}
.acc{transition:background-color .15s ease-out}
.acc.hot{background:#232323}
.acc h4{margin:0;font:inherit}
.acc button{width:100%;display:flex;align-items:center;gap:.8rem;min-height:56px;padding:1rem 1.2rem;background:none;border:0;color:var(--ink);font:inherit;font-weight:800;font-size:1rem;text-align:left;cursor:pointer}
.acc button:hover .ad{color:var(--lime)}
.acc button:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.acc .sw{width:12px;height:12px;border-radius:3px;background:var(--c);flex:0 0 auto}
.acc .ad{flex:1 1 auto;min-width:0;transition:color .15s ease-out}
.acc .ad small{font-weight:700;color:var(--ink-2);font-size:.85rem;margin-left:.3rem}
.acc .pts{font-family:'Unbounded',sans-serif;font-weight:900;font-size:.95rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.acc .pts small{font-family:'Manrope',sans-serif;font-weight:700;color:var(--ink-2);font-size:.8rem}
.acc .bar{height:6px;margin:0 1.2rem 1rem;border-radius:3px;background:var(--line);overflow:hidden}
.acc .bar i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:3px}
.acc .panel{padding:0 1.2rem 1.2rem;color:var(--ink-2);font-size:.95rem;display:flex;flex-direction:column;gap:.5rem}

/* SSS: tek yüzey, satırlar çizgiyle ayrılır */
.sss{border-top:1px solid var(--line)}
.sss h2{margin-bottom:2rem}
.faq{max-width:52rem;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 0;font-weight:800;font-size:1.1rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq summary::after{content:"+";font-family:'Unbounded',sans-serif;font-weight:700;color:var(--lime);flex:0 0 auto;font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1.4rem;color:var(--ink-2);max-width:44rem;text-wrap:pretty}

.cta{margin:1rem 0 0;background:var(--lime);color:var(--light-ink);border-radius:20px;padding:3rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.cta .t{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.cta p{font-weight:600;font-size:1.05rem}

/* ---------- Hareket azaltma: dönme yerine yumuşak geçiş ---------- */
@media (prefers-reduced-motion:reduce){
  .paket-ic{transition:none;transform:none!important}
  .yuz{transition:opacity .25s ease;backface-visibility:visible;-webkit-backface-visibility:visible}
  .arka{transform:none;opacity:0}
  .paket.cevrik .arka{opacity:1}
  .paket.cevrik .on{opacity:0}
  .paket.cevrik .puan-etiketi{animation:none}
  .cevir svg,.stack span{transition:none}
  html:not(.js) .arka{opacity:1}
}

/* ---------- Dar ekranlar ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"giris" "sahne" "kayit";padding-top:1.5rem;row-gap:2rem}
  .iki-kolon{grid-template-columns:minmax(0,1fr)}
  .adim-liste{grid-template-columns:minmax(0,1fr);gap:1.6rem}
}
@media (max-width:520px){
  main > section:not(.hero){padding:3.5rem 0}
  .yuz{min-height:230px;--dis:7px}
  .yuz::before,.yuz::after{width:22px}
  .on-icerik{padding:1.2rem 1.9rem}
  .on-gramaj{left:1.9rem;bottom:.8rem}
  .on-yildiz{width:80px;height:80px;font-size:.72rem;right:1.5rem;top:.8rem}
  .on-gorsel{width:62%;right:1rem}
  .arka-icerik{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:1rem 2.1rem;gap:.7rem}
  .icindekiler{font-size:.72rem}
  .besin{font-size:.68rem}
  .besin th,.besin td{padding:.16rem .3rem}
  .besin .alt-satir th{padding-left:.6rem}
  .barkod{display:none}
  .puan-etiketi{position:static;margin-top:auto;align-self:flex-start}
  .puan-etiketi .score{width:70px;height:70px;font-size:1.5rem}
  .gofret-top .score{width:80px;height:80px;font-size:1.7rem}
  .cta{padding:2rem 1.5rem}
  .icermez dl > div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .thanks{padding:1.2rem}
}