/* Yazı tipi: Hanken Grotesk (SIL Open Font License, fonts/OFL.txt), sitenin kendi sunucusundan — üçüncü taraf (Google) bağlantısı yok */
@font-face{font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/hanken-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/hanken-grotesk-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}

/* ============================================================
   KAILO — ortak stiller (ana sayfa + ürün sayfaları)
   Palet kilitli: yalnızca aşağıdaki 5 renk. Diğer tüm tonlar
   bu beş rengin color-mix() ile karıştırılmasından türetilir.
   ============================================================ */
:root{
  --herb:#182720; --paper:#EDEFE6; --amber:#C98A3A; --living:#6F9A58; --berry:#8A4356;

  /* türetilmiş tonlar */
  --ink:var(--herb);
  --ink-soft:color-mix(in srgb, var(--herb) 75%, var(--paper));
  --on-dark:var(--paper);
  --on-dark-soft:color-mix(in srgb, var(--paper) 68%, var(--herb));
  --line:color-mix(in srgb, var(--herb) 16%, var(--paper));
  --herb-2:color-mix(in srgb, var(--herb) 90%, var(--paper));
  --grey:color-mix(in srgb, var(--herb) 68%, var(--paper));
  --grey-line:color-mix(in srgb, var(--herb) 22%, var(--paper));

  /* hat vurgusu — varsayılan: garnitür (amber) */
  --accent:var(--amber);
  --accent-ink:color-mix(in srgb, var(--amber) 55%, var(--herb));
  --on-accent:var(--herb);

  --maxw:76rem;
  --space:clamp(104px, 12vw, 168px);
  --radius:10px;

  /* Yazı ölçü cetveli (~1,25 oran). Değerler 1440 px ekranda (kök 18 px):
     display 67 · display-2 52 · h2 48 · h3 42 · lead 19,5 · gövde 18 · arayüz 16 · etiket 13,5 */
  --fs-display:clamp(2.4rem, 4.6vw, 3.75rem);
  --fs-display-2:clamp(2.2rem, 3.8vw, 2.9rem);
  --fs-h2:clamp(1.9rem, 3.4vw, 2.67rem);
  --fs-h3:clamp(1.65rem, 2.9vw, 2.33rem);
  --fs-lead:1.08rem;
  --fs-ui:16px;
  --fs-label:13px;
}
.fruit {--accent:var(--amber);  --accent-ink:color-mix(in srgb, var(--amber) 55%, var(--herb));  --on-accent:var(--herb)}
.rimmer{--accent:var(--berry);  --accent-ink:var(--berry);                                         --on-accent:var(--paper)}
.micro {--accent:var(--living); --accent-ink:color-mix(in srgb, var(--living) 60%, var(--herb)); --on-accent:var(--herb)}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:112px}
/* Geniş ekranlarda tüm site orantılı büyür (rem tabanlı ölçüler + içerik genişliği) */
@media(min-width:1280px){html{font-size:17px}}
@media(min-width:1440px){html{font-size:18px}}
@media(min-width:1800px){html{font-size:19px}}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:max(16px, 1rem); line-height:1.65;
  padding-top:env(safe-area-inset-top,0px)}
h1,h2,h3{font-family:"Hanken Grotesk",system-ui,sans-serif; font-weight:600; line-height:1.08; letter-spacing:-.025em; margin:0; text-wrap:balance}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:28px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.section{padding-block:var(--space)}
.label{display:block; font-size:var(--fs-label); letter-spacing:.22em; font-weight:700; color:var(--accent-ink); margin-bottom:22px}
.h2{font-size:var(--fs-h2); max-width:18ch}
.sub{color:var(--ink-soft); font-size:1.06rem; max-width:52ch}

/* ============ NAV ============ */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--herb) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 10%, transparent)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:76px; padding-block:12px}
.brand{font-family:"Hanken Grotesk",system-ui,sans-serif; font-weight:600; font-size:1.67rem; line-height:1; color:var(--on-dark); letter-spacing:.1em; display:flex; align-items:center; gap:12px}
/* logo rozeti: koyu zeminde yeşil yapraklar kaybolmasın diye kâğıt renginde daire */
.brand-mark{flex:none; width:3.5rem; height:3.5rem; object-fit:contain}
.foot .brand-mark{width:4.25rem; height:4.25rem}
.brand small{font-family:"Hanken Grotesk",system-ui,sans-serif; font-weight:500; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; display:block; color:var(--on-dark-soft); margin-top:6px}
.navlinks{display:flex; gap:30px; align-items:center}
.navlinks a{color:var(--on-dark-soft); font-size:var(--fs-ui); font-weight:500; transition:color .2s}
.navlinks a:hover{color:var(--on-dark)}
.navlinks .btn{color:var(--herb)}

.nav-cart{position:relative; display:inline-flex; align-items:center; color:var(--on-dark); padding:6px}
.nav-cart:hover{color:var(--amber)}
.cart-count{position:absolute; top:-2px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--amber); color:var(--herb); font-size:.7rem; font-weight:700; line-height:18px; text-align:center}

/* ============ BUTONLAR ============ */
.btn{display:inline-block; white-space:nowrap; background:var(--amber); color:var(--herb); font-weight:600; font-size:var(--fs-ui);
  padding:13px 24px; border-radius:2px; border:none; cursor:pointer; transition:filter .2s}
.btn:hover{filter:brightness(1.08)}
.btn-accent{background:var(--accent); color:var(--on-accent)}
.btn-ghost{display:inline-block; background:transparent; color:var(--herb); border:1.5px solid var(--herb); border-radius:2px;
  padding:12px 24px; font-weight:600; font-size:var(--fs-ui); transition:background .2s, color .2s}
.btn-ghost:hover{background:var(--herb); color:var(--paper)}
.link-soft{color:var(--on-dark-soft); font-weight:500; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s}
.link-soft:hover{color:var(--on-dark); border-color:var(--accent)}
.more{display:inline-flex; gap:10px; align-items:center; font-weight:600; font-size:var(--fs-ui); color:var(--accent-ink);
  border-bottom:1.5px solid currentColor; padding-bottom:3px}
.more:hover{color:var(--ink)}

/* ============ FOTOĞRAF ALANI ============
   Yapı:  <figure class="photo"> <img …> <div class="ph">…</div> </figure>
   img/ klasörüne dosya konunca fotoğraf yer tutucunun üstünü kaplar;
   dosya yoksa img kendini kaldırır ve yer tutucu görünür. */
.photo{position:relative; margin:0; width:100%; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 10%, var(--paper)),
    color-mix(in srgb, var(--accent) 26%, var(--paper)))}
.photo>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1}
.ph{position:absolute; inset:14px; border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius:calc(var(--radius) - 4px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:24px; text-align:center}
.ph svg{width:clamp(40px,18%,72px); height:auto}
.ph-name{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:clamp(1.2rem,2.1vw,1.65rem); line-height:1.2; color:var(--accent-ink); max-width:14ch}

/* ============ ANA SAYFA: HERO ============ */
.hero{background:var(--herb); color:var(--on-dark)}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(48px,7vw,104px); align-items:center; padding-block:clamp(88px,10vw,144px)}
.kicker{font-size:var(--fs-label); letter-spacing:.24em; color:var(--living); font-weight:600; margin-bottom:28px}
.kicker a{border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s}
.kicker a:hover, .kicker a:focus-visible{color:var(--paper); border-color:var(--living)}
.hero h1{font-size:var(--fs-display); max-width:18ch; color:var(--paper)}
.hero h1 em{color:var(--amber)}
.hero .lead{font-size:var(--fs-lead); max-width:46ch; margin:34px 0 42px; color:var(--on-dark-soft)}
.cta-row{display:flex; gap:16px 26px; flex-wrap:wrap; align-items:center}
.hero .photo{max-width:440px; justify-self:end}

/* ŞERİT */
.marquee{background:var(--herb-2); color:var(--on-dark-soft); border-top:1px solid color-mix(in srgb, var(--paper) 8%, transparent)}
.stats{display:flex; align-items:center; justify-content:space-between; gap:20px 48px; flex-wrap:wrap; padding-block:26px}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,4vw,56px); margin:0; width:100%}
.stat-row > div{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px}
.stat-row dt{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:clamp(1.4rem,2.2vw,1.75rem); line-height:1; color:var(--paper)}
.stat-row dd{margin:0; font-size:max(15px, .95rem); line-height:1.35; letter-spacing:.04em; color:color-mix(in srgb, var(--paper) 88%, var(--herb))}
.stat-note{font-size:max(15px, .95rem); font-weight:600; color:var(--living); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s}
.stat-note:hover{border-color:var(--living)}

/* YAKLAŞIM */
.philo .grid{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px,7vw,104px); align-items:start}
.philo .body p{font-size:var(--fs-lead); color:var(--ink-soft); max-width:58ch}
.philo .body strong{color:var(--ink); font-weight:600}

/* ÜRÜNLER (ana sayfa) */
.products{padding-bottom:var(--space)}
.products-head{padding-top:var(--space); margin-bottom:clamp(8px,2vw,24px); max-width:760px}
.products-head .sub{margin-top:18px}
.product{display:grid; grid-template-columns:.85fr 1fr; gap:clamp(48px,8vw,128px); align-items:center;
  padding-block:clamp(80px,9vw,128px); border-top:1px solid var(--line)}
.product.rev{grid-template-columns:1fr .85fr}
.product.rev .photo{order:2; justify-self:end}
.product .photo{max-width:470px}
.idx{font-size:var(--fs-label); letter-spacing:.2em; font-weight:700; color:var(--accent-ink)}
.product h3{font-size:var(--fs-h3); margin:16px 0 24px}
.en{font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--ink-soft); font-size:1.05rem; margin-bottom:26px}
.product .text{color:var(--ink-soft); max-width:50ch}
.feat{list-style:none; padding:0; margin:30px 0; display:grid; gap:12px}
.feat li{position:relative; padding-left:24px; font-size:1rem}
.feat li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.who{font-size:max(15px, .95rem); color:var(--ink-soft); margin-bottom:34px; max-width:50ch}
.who strong{color:var(--ink); font-weight:600}

/* NASIL ÜRETİYORUZ */
.process{background:color-mix(in srgb, var(--living) 9%, var(--paper))}
.process .grid{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(48px,8vw,128px); align-items:start}
.process .head{position:sticky; top:120px}
.steps-list{list-style:none; margin:0; padding:0}
.steps-list li{display:grid; grid-template-columns:clamp(64px,8vw,112px) 1fr; gap:20px; padding-block:40px; border-top:1px solid var(--line)}
.steps-list li:last-child{border-bottom:1px solid var(--line)}
.steps-list .no{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:clamp(2.2rem,3.6vw,3rem); line-height:.9; color:var(--accent-ink)}
.steps-list h3{font-size:clamp(1.4rem,2.2vw,1.75rem); margin:4px 0 12px}
.steps-list p{color:var(--ink-soft); margin:0; max-width:46ch}
.steps-list li:has(.step-photo){grid-template-columns:clamp(64px,8vw,112px) 1fr clamp(110px,12vw,150px); align-items:start}
.step-photo{border-radius:6px}

/* FARK */
.diff{background:var(--herb); color:var(--on-dark)}
.diff .label{color:var(--living)}
.diff .h2{color:var(--paper); max-width:18ch}
.diff-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:56px; margin-top:72px}
.diff-item{border-top:2px solid var(--amber); padding-top:24px}
.diff-item.g{border-color:var(--living)} .diff-item.b{border-color:var(--berry)}
.diff-item h3{font-size:1.4rem; color:var(--paper); margin:0 0 10px}
.diff-item p{color:var(--on-dark-soft); font-size:.98rem; margin:0}

/* KİMLER İÇİN */
.aud-head{display:grid; grid-template-columns:1.1fr 1fr; gap:24px clamp(40px,7vw,104px); align-items:end}
.aud-head .sub{margin:0}
.aud-list{display:grid; grid-template-columns:repeat(4,1fr); margin-top:72px; border-top:1px solid var(--line)}
.aud-list > div{padding:34px 28px 0}
.aud-list > div:first-child{padding-left:0}
.aud-list > div + div{border-left:1px solid var(--line)}
.aud-list h3{font-size:1.35rem; margin-bottom:10px}
.aud-list p{margin:0; font-size:max(15px, .95rem); color:var(--ink-soft)}

/* BİZİ TERCİH EDENLER */
.refs{border-top:1px solid var(--line)}
.refs .grid{display:grid; grid-template-columns:1fr 1.6fr; gap:48px clamp(40px,7vw,104px); align-items:start}
.logos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; list-style:none; margin:0; padding:0}
.logos li{aspect-ratio:3/2; display:grid; place-items:center; border:1px solid var(--grey-line); border-radius:6px;
  background:color-mix(in srgb, var(--herb) 3%, var(--paper)); color:var(--grey); font-size:max(15px, .95rem); letter-spacing:.04em}
.quote{grid-column:2; margin:8px 0 0; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline}
.quote p{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.4rem; margin:0; color:var(--ink)}
.quote cite{font-style:normal; font-size:max(15px, .95rem); color:var(--grey)}

/* İşletme notu (ürün sayfaları) */
.b2b-note{margin:22px 0 0; font-size:max(15px, .95rem); color:var(--on-dark-soft)}
.b2b-note a{color:var(--on-dark); border-bottom:1px solid var(--accent); padding-bottom:1px}
.b2b-note a:hover{color:var(--accent)}

/* Talep formu (isletmeler.html) */
.talep{border-top:1px solid var(--line)}
.talep .grid{display:grid; grid-template-columns:1fr 1.4fr; gap:40px clamp(40px,7vw,104px); align-items:start}
.talep .h2{margin-bottom:20px}
.talep .h2 em{color:var(--accent-ink)}
.form{display:grid; gap:22px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.field{display:grid; gap:8px; margin:0; padding:0; border:0; min-width:0}
.field > span, .field legend{font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--ink); padding:0}
.field small{font-weight:400; color:var(--ink-soft)}
.field input, .field select, .field textarea{width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--grey-line); border-radius:4px; padding:12px 14px}
.field textarea{resize:vertical}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:2px solid var(--herb); outline-offset:1px; border-color:var(--herb)}
.choices{display:flex; flex-wrap:wrap; gap:10px}
.choice{display:inline-flex; flex:none; white-space:nowrap; align-items:center; gap:8px; border:1px solid var(--grey-line); border-radius:999px; padding:8px 16px; font-size:max(15px, .95rem); cursor:pointer}
.choice:has(input:checked){border-color:var(--accent-ink); color:var(--accent-ink)}
.choice input, .consent input{accent-color:var(--herb); margin:0}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:max(15px, .95rem); color:var(--ink-soft)}
.consent input{margin-top:4px}
.form .btn{justify-self:start}
.hp{position:absolute; left:-9999px}

/* ============ SATIN ALMA (ürün sayfası, koyu hero içinde) ============ */
.buy{max-width:460px; margin-top:6px}
.buy-form{display:grid; gap:14px}
.buy-field span{font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--on-dark-soft)}
.buy select{width:100%; font:inherit; font-size:1rem; color:var(--paper); background:color-mix(in srgb, var(--paper) 7%, var(--herb));
  border:1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius:4px; padding:12px 14px}
.buy select option, .buy select optgroup{color:var(--herb); background:var(--paper)}
.buy-detail{margin:-4px 0 0; font-size:max(15px, .95rem); color:var(--on-dark-soft)}
.buy-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.buy-price{margin:0; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.6rem; color:var(--paper)}
.buy-price small{font-family:"Hanken Grotesk",sans-serif; font-size:.78rem; color:var(--on-dark-soft)}
.buy-submit{justify-self:start; min-width:180px; text-align:center}
.buy-status{margin:0; min-height:1.4em; font-size:max(15px, .95rem); color:var(--on-dark)}
.buy-status a{color:var(--paper); border-bottom:1px solid var(--accent)}
.buy-date{margin:-4px 0 0; font-size:max(15px, .95rem); color:var(--on-dark)}
.buy-date strong{color:var(--paper)}
.cart-date{color:var(--accent-ink); font-weight:600}
.buy-note{margin:0; font-size:max(15px, .95rem); color:var(--on-dark-soft)}
.buy-fresh{border-left:2px solid var(--living); padding-left:12px}
.buy-placeholder{font-style:normal}

/* Adet seçici (koyu ve açık zeminde) */
.qty{display:inline-flex; align-items:center; border:1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius:4px}
.qty-btn{width:40px; height:44px; background:none; border:0; color:inherit; font-size:1.2rem; cursor:pointer}
.qty-btn:hover{color:var(--accent)}
.qty input{width:48px; height:44px; text-align:center; font:inherit; font-weight:600; color:inherit; background:none; border:0;
  border-inline:1px solid color-mix(in srgb, currentColor 20%, transparent); -moz-appearance:textfield; appearance:textfield}
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.p-hero .qty{color:var(--paper)}

/* ============ SEPET / ÖDEME ============ */
.shop-page{padding-block:clamp(64px,8vw,112px) var(--space)}
.shop-page > .h2{margin-bottom:40px}
.cart-grid, .checkout-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(32px,5vw,72px); align-items:start}
.cart-lines{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.cart-line{display:grid; grid-template-columns:72px 1fr auto auto auto; gap:12px 20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line)}
.cart-thumb img{display:block; width:72px; height:90px; object-fit:cover; border-radius:6px}
.cart-info p{margin:0}
.cart-product{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--accent-ink)}
.cart-line.micro{--accent:var(--living); --accent-ink:color-mix(in srgb, var(--living) 60%, var(--herb))}
.cart-name{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.2rem; margin:4px 0 !important}
.cart-name a:hover{color:var(--accent-ink)}
.cart-meta{font-size:max(15px, .95rem); color:var(--ink-soft)}
.cart-total{margin:0; font-weight:600; min-width:96px; text-align:right}
.cart-remove{background:none; border:0; padding:6px; font:inherit; font-size:max(15px, .95rem); color:var(--ink-soft); text-decoration:underline; cursor:pointer}
.cart-remove:hover{color:var(--berry)}
.cart-empty{display:grid; gap:24px; justify-items:start; max-width:52ch}
.cart-empty p{color:var(--ink-soft); font-size:1.08rem; margin:0}

.summary{background:color-mix(in srgb, var(--amber) 8%, var(--paper)); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:grid; gap:16px; position:sticky; top:100px}
.summary h2{font-size:1.4rem}
.sum-items{list-style:none; margin:0; padding:0 0 12px; border-bottom:1px solid var(--line); display:grid; gap:10px}
.sum-items li, .sum-rows > div{display:flex; justify-content:space-between; gap:16px; font-size:max(15px, .95rem)}
.sum-items li > span:last-child, .sum-rows dd{white-space:nowrap}
.sum-items small{display:block; font-size:max(15px, .95rem); color:var(--ink-soft)}
.sum-rows{margin:0; display:grid; gap:10px}
.sum-rows dt{color:var(--ink-soft)} .sum-rows dd{margin:0; font-weight:600}
.sum-total{padding-top:12px; border-top:1px solid var(--line); font-size:1.15rem}
.sum-total dt{color:var(--ink); font-weight:600}
.sum-note{margin:0; font-size:max(15px, .95rem); color:var(--ink-soft)}
.sum-fresh{border-left:2px solid var(--living); padding-left:12px; color:var(--ink)}
.summary-cta{text-align:center}
.summary .more{justify-self:start}

.form-block{border:0; margin:0; padding:0 0 8px; display:grid; gap:18px}
.form-block legend{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.35rem; font-weight:500; margin-bottom:12px; padding:0}
.form-errors{border:1px solid var(--berry); border-radius:6px; padding:18px 20px; background:color-mix(in srgb, var(--berry) 6%, var(--paper))}
.form-errors h2{font-size:1.1rem; margin-bottom:8px; color:var(--berry)}
.form-errors ul{margin:0; padding-left:1.1em}
.form-errors a{color:var(--berry); text-decoration:underline}
.field [aria-invalid="true"], .consent input[aria-invalid="true"]{border-color:var(--berry); outline:1px solid var(--berry)}
.consent a{text-decoration:underline; color:var(--ink)}
.test-panel{border:1px dashed var(--accent-ink); border-radius:var(--radius); padding:22px; display:grid; gap:10px}
.test-panel .label{margin:0}
.test-panel p{margin:0}

.result .h2{margin-bottom:24px}
.result-no{font-size:1.05rem; margin-bottom:6px}
.result-summary{position:static; max-width:520px; margin:32px 0}
.result .cta-row{margin-top:32px}

/* Mikrofiliz programları + kenar tozu setleri */
.programs h3{margin-bottom:6px}
.program-price{margin:0 0 16px; font-weight:600; color:var(--accent-ink)}
.programs ul{margin-bottom:18px}
.program-desc{margin:0; font-size:max(15px, .95rem); color:var(--ink-soft)}
.sets{margin-top:40px}

/* Ödeme paneli (PayTR iframe) ve test ödeme ekranı */
.form-status{margin:0; min-height:1.2em; font-size:max(15px, .95rem); color:var(--ink-soft)}
.pay-panel{display:grid; gap:10px}
.pay-panel .label{margin:0}
.pay-panel iframe{width:100%; min-height:640px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper)}
.mock-card{position:static; max-width:480px; margin-top:28px}
.mock-pay .h2 em{color:var(--accent-ink)}
button.btn-ghost{font:inherit; font-weight:600; cursor:pointer}
.btn[disabled], .btn-ghost[disabled]{opacity:.55; cursor:progress}

/* Yasal sayfalar */
.legal{max-width:78ch}
.legal .h2{margin-bottom:28px}
.legal h2:not(.h2){font-size:1.35rem; margin:48px 0 14px}
.legal p, .legal li{color:var(--ink); font-size:max(15px, .95rem)}
.legal .sub{color:var(--ink-soft)}
.legal ul, .legal ol{padding-left:1.2em; margin:0 0 1rem}
.legal li{margin-bottom:8px}
.legal a{text-decoration:underline; text-underline-offset:2px}
.legal-draft{display:inline-block; font-size:.8rem; letter-spacing:.04em; color:var(--accent-ink); border:1px solid var(--accent-ink); border-radius:999px; padding:4px 12px; margin-bottom:18px}
.legal-facts{margin:0 0 1rem; border-top:1px solid var(--line)}
.legal-facts > div{display:grid; grid-template-columns:minmax(150px,.4fr) 1fr; gap:4px 20px; padding:10px 0; border-bottom:1px solid var(--line)}
.legal-facts dt{color:var(--ink-soft); font-size:max(15px, .95rem)} .legal-facts dd{margin:0}
.legal-table{width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:max(15px, .95rem)}
.legal-table th, .legal-table td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--line)}
.legal-table th{font-weight:600; color:var(--ink-soft)}
.legal-form{border:1px dashed var(--grey-line); border-radius:var(--radius); padding:20px 24px; background:var(--paper)}
.legal-blanks{list-style:none; padding:0 !important}
.legal-blanks li{padding:6px 0}
footer .legal-links{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:40px; padding-top:22px; border-top:1px solid color-mix(in srgb, var(--paper) 12%, transparent)}
footer .legal-links a{font-size:max(15px, .95rem)}
footer .legal-links + .fine{margin-top:18px}
@media(max-width:560px){ .legal-facts > div{grid-template-columns:1fr} }

/* SSS */
.faq{border-top:1px solid var(--line)}
.faq .grid{display:grid; grid-template-columns:1fr 1.6fr; gap:40px clamp(40px,7vw,104px); align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:24px 0; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:clamp(1.15rem,1.8vw,1.35rem); font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; font-family:"Hanken Grotesk",sans-serif; font-size:1.4rem; font-weight:400; color:var(--accent-ink); flex:none}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{color:var(--ink-soft); max-width:60ch; margin:-6px 0 26px}

/* Garnitür eşleşmeleri */
.pairs{margin:0; border-top:1px solid color-mix(in srgb, var(--herb) 20%, transparent)}
.pairs > div{display:grid; grid-template-columns:minmax(120px,.35fr) 1fr; gap:8px 32px; padding:18px 0;
  border-bottom:1px solid color-mix(in srgb, var(--herb) 20%, transparent)}
.pairs dt{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.3rem; color:var(--accent-ink)}
.pairs dd{margin:0; color:var(--ink); align-self:center}

/* CTA */
.cta{background:color-mix(in srgb, var(--amber) 10%, var(--paper)); text-align:center}
.cta h2{font-size:var(--fs-h2); max-width:18ch; margin:0 auto 24px}
.cta h2 em{color:var(--accent-ink)}
.cta p{color:var(--ink-soft); max-width:50ch; margin:0 auto 40px; font-size:1.06rem}
.cta .cta-row{justify-content:center}

/* FOOTER */
footer{background:var(--herb); color:var(--on-dark-soft); padding:72px 0 44px; padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
.foot{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start}
.foot .brand{font-size:1.5rem}
.foot p{max-width:34ch; margin-top:12px}
.foot a{color:var(--on-dark-soft); font-size:max(15px, .95rem); transition:color .2s}
.foot a:hover{color:var(--on-dark)}
.foot a.brand{color:var(--on-dark)}
.foot .col{display:grid; gap:10px}
.foot .col h2{font-family:"Hanken Grotesk",sans-serif; color:var(--on-dark); font-weight:600; font-size:var(--fs-label); letter-spacing:.14em; margin-bottom:4px}
footer .fine{margin-top:48px; font-size:max(15px, .95rem); opacity:.75}

/* ============ ÜRÜN SAYFALARI ============ */
.p-hero{background:var(--herb); color:var(--on-dark)}
.p-hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(48px,7vw,104px); align-items:center; padding-top:64px}
.p-hero-text{padding-bottom:112px}
.crumb{display:inline-flex; gap:8px; font-size:max(15px, .95rem); color:var(--on-dark-soft); margin-bottom:44px; transition:color .2s}
.crumb:hover{color:var(--on-dark)}
.p-hero .idx{color:var(--accent)}
.rimmer .p-hero .idx{color:color-mix(in srgb, var(--berry) 45%, var(--paper))}
.p-hero h1{font-size:var(--fs-display-2); color:var(--paper); margin:18px 0 28px; max-width:14ch}
.p-hero .en{color:var(--on-dark-soft); font-size:1.1rem}
.p-hero .lead{font-size:var(--fs-lead); max-width:50ch; margin-bottom:40px; color:var(--on-dark-soft)}
.p-hero .photo{max-width:460px; justify-self:end; margin-bottom:-120px; box-shadow:0 40px 70px -40px color-mix(in srgb, var(--herb) 70%, transparent)}

.p-intro{padding-top:calc(var(--space) + 40px)}
.p-intro .grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,7vw,104px); align-items:start}
.statement{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.18; font-weight:400; max-width:17ch; margin:0}
.statement em{color:var(--accent-ink)}
.nums{list-style:none; margin:0; padding:0; counter-reset:n}
.nums li{counter-increment:n; display:grid; grid-template-columns:56px 1fr; gap:8px; padding:20px 0; border-top:1px solid var(--line); font-size:1.02rem}
.nums li:last-child{border-bottom:1px solid var(--line)}
.nums li::before{content:counter(n, decimal-leading-zero); font-family:"Hanken Grotesk",system-ui,sans-serif; color:var(--accent-ink); font-size:1.15rem; line-height:1.4}

.p-band{background:color-mix(in srgb, var(--accent) 12%, var(--paper))}
.p-band .h2{margin-bottom:18px; max-width:20ch}
.p-band .sub{margin-bottom:56px}
.p-band .block + .block{margin-top:clamp(88px,10vw,128px)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:48px}
.steps > div{border-top:2px solid var(--accent); padding-top:24px}
.steps .no{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:2.4rem; color:var(--accent-ink); line-height:1}
.steps h3{font-size:1.5rem; margin:16px 0 10px}
.steps p{color:var(--ink-soft); margin:0; font-size:1rem}
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:28px 0 0}
.chips li{border:1.5px solid var(--accent-ink); color:var(--accent-ink); padding:8px 18px; border-radius:999px; font-weight:600; font-size:max(15px, .95rem)}
.recipes{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); list-style:none; margin:0; padding:0}
.recipes li{background:var(--paper); padding:28px 22px; display:grid; gap:6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.recipes .no{font-size:var(--fs-label); letter-spacing:.18em; font-weight:700; color:var(--accent-ink)}
.recipes h3{font-size:1.3rem}
.recipes .tag{font-size:max(15px, .95rem); color:var(--ink-soft)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.split > div{background:var(--paper); padding:36px 34px; border-radius:var(--radius)}
.split h3{font-size:1.45rem; margin-bottom:16px}
.split ul{margin:0; padding-left:1.1em; color:var(--ink-soft)}
.split li{margin-bottom:6px}
.split li::marker{color:var(--accent-ink)}

.gallery{display:grid; grid-template-columns:1.2fr 1fr .9fr; gap:24px; align-items:start}
.gallery .photo:nth-child(2){margin-top:88px}
.gallery .photo:nth-child(3){margin-top:36px}

.p-who{display:grid; grid-template-columns:1fr 1.2fr; gap:32px clamp(40px,7vw,104px); align-items:start; padding-bottom:var(--space)}
.p-who .h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.who-list{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.who-list li{padding:20px 0; border-bottom:1px solid var(--line); font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.3rem}

.others{padding-bottom:var(--space)}
.others h2{font-family:"Hanken Grotesk",sans-serif; font-size:var(--fs-label); font-weight:700; letter-spacing:.2em; color:var(--ink-soft); margin-bottom:22px}
.others-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.other{display:flex; align-items:center; gap:22px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); transition:border-color .2s}
.other:hover{border-color:var(--accent)}
.other .photo{width:88px; flex:none; border-radius:6px}
.other .ph{inset:6px; border-radius:3px; padding:6px}
.other .ph svg{width:60%}
.other h3{font-size:1.35rem; margin-top:6px}
.other .arr{margin-left:auto; font-size:1.3rem; color:var(--accent-ink); padding-right:8px}

/* ============ ERİŞİLEBİLİRLİK + HAREKET ============ */
:focus-visible{outline:2px solid currentColor; outline-offset:4px}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--amber); color:var(--herb); padding:10px 16px; font-weight:600}
.skip:focus{top:12px}

/* tek açılış hareketi — yalnızca hero */
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.reveal>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.reveal>*:nth-child(2){animation-delay:.1s}
.reveal>*:nth-child(3){animation-delay:.2s}
.reveal>*:nth-child(4){animation-delay:.3s}
.reveal>*:nth-child(5){animation-delay:.4s}
.reveal>*:nth-child(6){animation-delay:.5s}

/* ============ ANA SAYFA: başlık vurgusu, deneme bandı ============ */
.h2 em{color:var(--accent-ink)}
.diff .h2 em, .trial .h2 em{color:var(--living)}
.programs-more{margin:32px 0 0}
.trial{background:var(--herb); color:var(--on-dark)}
.trial .label{color:var(--living)}
.trial .h2{color:var(--paper)}
.trial .sub{color:var(--on-dark-soft); margin-top:20px}
.diff-grid.diff-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.diff-grid.diff-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.diff-grid.diff-grid-4{grid-template-columns:1fr}}
.trial-inner{display:grid; grid-template-columns:1fr 1fr; gap:32px clamp(40px,7vw,104px); align-items:start}
.trial .buy{max-width:none}
.abo-new{font-style:normal; font-family:"Hanken Grotesk",sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-left:8px; padding:3px 6px; border-radius:3px; background:var(--living); color:var(--herb); vertical-align:middle}
.aud-list a{color:var(--accent-ink); border-bottom:1px solid currentColor}

.powder-teaser{display:grid; grid-template-columns:.8fr 1.2fr; gap:32px clamp(40px,7vw,104px); align-items:center}
.powder-teaser .photo{max-width:420px}
.powder-teaser .sub{margin:18px 0 24px}
@media(max-width:860px){.powder-teaser{grid-template-columns:1fr} .powder-teaser .photo{max-width:320px}}

/* Neden abonelik? */
.why-sub{background:color-mix(in srgb, var(--living) 9%, var(--paper)); padding-bottom:clamp(64px,7vw,104px)}
.why-sub + .abo{border-top:0; padding-top:clamp(64px,7vw,104px)}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px); margin-top:48px}
.why-item{border-top:1px solid color-mix(in srgb, var(--living) 45%, var(--paper)); padding-top:24px}
.why-ico{width:44px; height:44px; color:color-mix(in srgb, var(--living) 75%, var(--herb)); display:block; margin-bottom:18px}
.why-item h3{font-size:1.35rem; margin:0 0 10px}
.why-item p{margin:0; color:var(--ink-soft); font-size:.98rem}
@media(max-width:960px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr}}

/* Program setleri ve içerik profili */
.set-no{display:block; font-size:var(--fs-label); letter-spacing:.2em; font-weight:700; color:var(--accent-ink); margin-bottom:6px}
.nutri-title{font-size:1.35rem; margin:36px 0 12px}
.nutri-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.nutri{width:100%; min-width:640px; border-collapse:collapse; font-size:max(15px, .95rem); background:var(--paper); border-radius:var(--radius)}
.nutri th, .nutri td{text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line)}
.nutri thead th{font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft); font-weight:600}
.nutri tbody th{font-family:"Hanken Grotesk",system-ui,sans-serif; font-weight:500; font-size:1.02rem; white-space:nowrap}
.nutri td{color:var(--ink-soft)}
.nutri td strong{color:var(--ink)}
.nutri-note{font-size:max(15px, .95rem); color:var(--ink-soft); max-width:80ch; margin:12px 0 0}
.nutri-more{margin-top:36px; border-top:1px solid var(--line); padding-top:20px}
.nutri-more summary{cursor:pointer; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.3rem; color:var(--ink)}
.nutri-more summary::marker{color:var(--accent-ink)}
.nutri-more > p, .nutri-more ul{color:var(--ink-soft); max-width:80ch}
.nutri-more .nutri{min-width:480px; margin:12px 0 18px}

/* ============ ABONELİK (mikrofiliz) ============ */
.abo{border-top:1px solid var(--line)}
.abo .h2 em{color:var(--accent-ink)}
.abo .sub{margin:18px 0 48px}
.abo-link a{color:var(--on-dark)}
.abo-form{display:grid; gap:36px}
.abo-set{border:0; margin:0; padding:0; min-width:0}
.abo-set legend{font-size:var(--fs-label); letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--accent-ink); margin-bottom:16px; padding:0}
.abo-progs{display:flex; flex-wrap:wrap; gap:12px}
.abo-prog, .abo-pkg{position:relative; cursor:pointer}
.abo-prog input, .abo-pkg input{position:absolute; opacity:0; width:1px; height:1px}
.abo-prog span{display:block; padding:14px 22px; border:1.5px solid var(--grey-line); border-radius:var(--radius);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.2rem; transition:border-color .2s, background .2s}
.abo-prog small{font-family:"Hanken Grotesk",sans-serif; font-size:.8rem; color:var(--ink-soft); margin-left:6px}
.abo-pkgs{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.abo-pkg-in{display:grid; gap:6px; height:100%; box-sizing:border-box; padding:22px 20px; border:1.5px solid var(--grey-line);
  border-radius:var(--radius); background:var(--paper); transition:border-color .2s, background .2s}
.abo-pkg-name{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.3rem}
.abo-pkg-meta, .abo-pkg-per{font-size:max(15px, .95rem); color:var(--ink-soft)}
.abo-pkg-price{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.9rem; margin-top:10px}
.abo-pkg-save{font-size:max(15px, .95rem); font-weight:600; color:var(--accent-ink)}
.abo-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.abo-badge{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:3px;
  background:color-mix(in srgb, var(--accent) 16%, var(--paper)); color:var(--accent-ink)}
.abo-prog input:checked + span, .abo-pkg input:checked + .abo-pkg-in{border-color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 10%, var(--paper))}
.abo-prog input:focus-visible + span, .abo-pkg input:focus-visible + .abo-pkg-in{outline:2px solid var(--accent-ink); outline-offset:3px}
.abo-prog:hover span, .abo-pkg:hover .abo-pkg-in{border-color:var(--accent)}
.abo-sum{display:grid; grid-template-columns:1fr 1.4fr; gap:18px 48px; align-items:start; background:var(--herb); color:var(--on-dark);
  border-radius:var(--radius); padding:clamp(24px,4vw,40px)}
.abo-sel{margin:0 0 6px; color:var(--on-dark-soft); font-size:max(15px, .95rem)}
.abo-total{margin:0; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:clamp(1.8rem,3vw,2.2rem); color:var(--paper)}
.abo-total small{font-family:"Hanken Grotesk",sans-serif; font-size:.8rem; color:var(--on-dark-soft)}
.abo-facts{margin:0; padding-left:1.1em; display:grid; gap:8px; font-size:max(15px, .95rem); color:var(--on-dark-soft)}
.abo-facts strong{color:var(--paper); font-weight:600}
.abo-facts li::marker{color:var(--living)}
.abo-freq-note{margin:12px 0 0; font-size:max(15px, .95rem); color:var(--ink-soft); font-family:"Hanken Grotesk",system-ui,sans-serif}
.abo-cal-title{margin:22px 0 8px; font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--living)}
.abo-cal{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.abo-cal li{font-size:.84rem; padding:4px 9px; border-radius:3px; background:color-mix(in srgb, var(--paper) 10%, var(--herb)); color:var(--paper)}
.abo-why{margin-top:14px; font-size:max(15px, .95rem); color:var(--on-dark-soft)}
.abo-why summary{cursor:pointer; color:var(--paper); width:max-content; max-width:100%; border-bottom:1px dotted color-mix(in srgb, var(--paper) 50%, transparent)}
.abo-why summary::marker{color:var(--living)}
.abo-why p{margin:8px 0 0; max-width:52ch}
.abo-submit{justify-self:start; font-family:inherit; border:0; cursor:pointer}
.abo-status{grid-column:1 / -1}
.abo-status a{color:var(--paper); border-bottom:1px solid var(--accent)}
.qty-fixed{margin:0; padding:10px 14px; border-color:transparent; font-weight:600; font-size:max(15px, .95rem)}
/* Abonelik yönetim sayfası */
.manage-head{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; margin-bottom:28px}
.manage-status{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:3px;
  background:color-mix(in srgb, var(--living) 18%, var(--paper)); color:color-mix(in srgb, var(--living) 60%, var(--herb))}
.manage-status.off{background:color-mix(in srgb, var(--berry) 14%, var(--paper)); color:var(--berry)}
.deliv{list-style:none; margin:0 0 32px; padding:0; border-top:1px solid var(--line)}
.deliv li{display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line)}
.deliv p{margin:0}
.deliv .d-meta{margin-top:4px}
.deliv .d-date{font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:1.2rem}
.deliv .d-meta{font-size:max(15px, .95rem); color:var(--ink-soft)}
.deliv .d-state{font-size:.84rem; font-weight:600; color:var(--ink-soft)}
.deliv li.is-skipped .d-date, .deliv li.is-cancelled .d-date{text-decoration:line-through; color:var(--ink-soft)}
.btn-small{padding:8px 14px; font-size:.86rem}
.manage-cancel{padding-top:8px; display:grid; gap:14px; max-width:60ch}
.manage-cancel .btn-ghost{justify-self:start; border-color:var(--berry); color:var(--berry)}
.manage-cancel .btn-ghost:hover{background:var(--berry); color:var(--paper)}
.manage-msg{margin:0 0 20px; padding:12px 16px; border-left:2px solid var(--living); background:color-mix(in srgb, var(--living) 8%, var(--paper))}
.result-sub{margin-top:24px}
.sub-hint{margin:0; font-size:max(15px, .95rem)}
.sub-hint p{margin:0 0 6px} .sub-hint ul{margin:0 0 8px; padding-left:1.1em}
.result-sub p{margin:0 0 6px}
.manage .h2{margin-bottom:28px}
.h3{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.manage-msg.err{border-color:var(--berry); background:color-mix(in srgb, var(--berry) 8%, var(--paper))}

/* ============ DUYARLI ============ */
@media(max-width:960px){
  .recipes{grid-template-columns:repeat(2,1fr)}
  .aud-list{grid-template-columns:1fr 1fr}
  .aud-list > div, .aud-list > div:first-child{padding:32px 24px 32px 0}
  .aud-list > div + div{border-left:0}
  .aud-list > div:nth-child(even){border-left:1px solid var(--line); padding-left:24px}
  .aud-list > div:nth-child(n+3){border-top:1px solid var(--line)}
  .logos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .trial-inner, .hero-inner, .p-hero-inner, .product, .product.rev, .philo .grid, .process .grid,
  .aud-head, .refs .grid, .faq .grid, .talep .grid, .p-intro .grid, .p-who, .cart-grid, .checkout-grid{grid-template-columns:1fr}
  .summary{position:static}
  .hero .photo, .p-hero .photo, .product .photo, .product.rev .photo{justify-self:start; max-width:420px}
  .hero .photo{max-width:360px}
  .product.rev .photo{order:0}
  .product{gap:40px}
  .process .head{position:static}
  .quote{grid-column:1}
  .p-hero-text{padding-bottom:56px}
  .p-hero .photo{margin-bottom:-88px}
  .steps, .split{grid-template-columns:1fr; gap:32px}
  .abo-pkgs{grid-template-columns:1fr 1fr}
  .abo-sum{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery .photo:nth-child(n){margin-top:0}
  .gallery .photo:nth-child(3){display:none}
  .others-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .navlinks a:not(.btn):not(.nav-cart):not(.nav-b2b){display:none}
  .navlinks{gap:18px}
  .diff-grid{grid-template-columns:1fr; gap:40px}
  .stat-row{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; width:100%}
}
@media(max-width:560px){
  .wrap{padding-inline:20px}
  .brand{gap:10px; font-size:1.4rem}
  .brand small{font-size:.62rem}
  .brand-mark{width:46px; height:46px}
  .navlinks .btn{padding:10px 14px; font-size:.86rem}
  .steps-list li:has(.step-photo){grid-template-columns:52px 1fr}
  .step-photo{grid-column:2; aspect-ratio:16/7; max-width:none}
  .aud-list{grid-template-columns:1fr}
  .aud-list > div:nth-child(n){border-left:0; padding-left:0; border-top:1px solid var(--line)}
  .aud-list > div:first-child{border-top:0}
  .recipes{grid-template-columns:repeat(2,1fr)}
  .recipes li{padding:20px 16px}
  .form-row{grid-template-columns:1fr}
  .cart-line{grid-template-columns:64px 1fr auto; grid-template-areas:'t i i' 't q s' 'r r r'}
  .cart-thumb{grid-area:t} .cart-info{grid-area:i} .cart-line .qty{grid-area:q; justify-self:start} .cart-total{grid-area:s} .cart-remove{grid-area:r; justify-self:start; padding-left:0}
  .cart-thumb img{width:64px; height:80px}
  .abo-pkg-in{padding:18px 14px} .abo-pkg-price{font-size:1.5rem}
  .deliv li{grid-template-columns:1fr}
  .recipes h3{font-size:1.1rem}
  .pairs > div{grid-template-columns:1fr; gap:2px}
  .gallery{grid-template-columns:1fr}
  .gallery .photo:nth-child(3){display:block}
}
@media(max-width:400px){
  .brand{font-size:1.3rem; letter-spacing:.1em}
  .brand small{font-size:.56rem}
  .navlinks{gap:14px}
  .brand-mark{width:40px; height:40px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}

/* Tek yazı ailesi (Hanken Grotesk): başlıklardaki vurgu italik değil, yalnızca renkle */
h1 em,h2 em,h3 em,.statement em{font-style:normal}

/* ---------- Satış kapalı: "Çok yakında" bandı ve ön kayıt formu ---------- */
.soon-bar{background:var(--amber); color:var(--herb); font-size:.92rem; letter-spacing:.02em}
.soon-bar p{margin:0; padding-block:8px; text-align:center}
.soon-bar a{color:inherit; font-weight:600; border-bottom:1px solid currentColor; margin-left:6px; white-space:nowrap}
.onkayit{display:grid; gap:14px; max-width:560px; margin-top:4px}
.onkayit-title{margin:0; font-weight:600}
.onkayit-row{display:grid; grid-template-columns:1fr 1.4fr; gap:12px}
.onkayit-field{display:grid; gap:6px; font-size:.82rem; font-weight:600; letter-spacing:.04em}
.onkayit-field small{font-weight:400; opacity:.75}
.onkayit-field input{width:100%; font:inherit; font-size:1rem; font-weight:400; letter-spacing:0; color:inherit; background:transparent;
  border:1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius:6px; padding:11px 12px}
.onkayit-field input:focus-visible{outline:2px solid currentColor; outline-offset:1px}
.onkayit-onay{display:flex; gap:10px; align-items:flex-start; font-size:max(15px, .95rem); line-height:1.5; opacity:.9; cursor:pointer}
.onkayit-onay input{margin:3px 0 0; accent-color:var(--living); flex:none}
.onkayit-onay a{color:inherit; border-bottom:1px solid currentColor}
.onkayit .btn{justify-self:start}
.onkayit-status{margin:0; font-size:max(15px, .95rem); min-height:1.2em}
.onkayit-status:empty{display:none}
.onkayit-done{margin:0; padding:14px 16px; border-left:2px solid var(--living); background:color-mix(in srgb, var(--living) 12%, transparent)}
.abo-onkayit{margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.sales-closed{display:grid; gap:18px; max-width:620px; margin-top:12px}
.sales-closed .sub{margin:0}
.buy .onkayit{margin-top:22px; padding-top:20px; border-top:1px solid color-mix(in srgb, currentColor 18%, transparent)}
@media(max-width:520px){ .onkayit-row{grid-template-columns:1fr} .soon-bar{font-size:.86rem} }
/* Ön kayıt pop-up'ı */
.onkayit-modal{width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:0; border-radius:var(--radius);
  padding:clamp(28px,5vw,44px); background:var(--paper); color:var(--ink); box-shadow:0 30px 80px -30px rgba(0,0,0,.55)}
.onkayit-modal::backdrop{background:color-mix(in srgb, var(--herb) 70%, transparent); backdrop-filter:blur(2px)}
.onkayit-modal .label{margin-bottom:14px}
.onkayit-modal .h2{font-size:clamp(1.7rem,4vw,2.2rem)}
.onkayit-modal .sub{margin:14px 0 20px}
.onkayit-close{position:absolute; top:12px; right:14px; width:40px; height:40px; border:0; background:transparent; color:var(--ink-soft);
  font-size:1.8rem; line-height:1; cursor:pointer; border-radius:50%}
.onkayit-close:hover, .onkayit-close:focus-visible{background:var(--line); color:var(--ink)}
.onkayit-modal .onkayit{margin-top:0}