/* ============================================================
   Olivio: tasarım sistemi
   ============================================================ */
:root{
  /* Tasarım dili referansı: hermus.com.tr
     Beyaz zemin, tek sans ailesi (Rubik), sage yeşili aksan,
     koyu zeytin tam genişlikte bloklar, altın vurgu.
     Bilerek tek temalı (açık): gıda vitrini bağlamı; her renk açıkça boyanır. */
  --paper:#FFFFFF;
  --paper-2:#FAFAF9;
  --card:#FFFFFF;
  --shade:#F2F2F0;
  --ink:#111511;
  --ink-2:#3B403A;
  --ink-3:#777D75;
  --line:#E4E4E1;
  --line-2:#F0F0EE;

  --dark:#1A2314;         /* koyu zeytin blok zemini */
  --olive:#2C3A20;        /* birincil: düğme, başlık vurgusu */
  --olive-2:#89B68F;      /* sage aksan */
  --olive-soft:#EAF3EB;
  --gold:#B08A22;         /* semantik: beyan / doğrulanmamış */
  --gold-soft:#F6EFDD;
  --clay:#9E3B22;         /* semantik: eksik / risk */
  --clay-soft:#F7E3DC;
  --ink-inv:#F4F7EE;

  --r-s:4px; --r-m:8px; --r-l:10px; --r-xl:12px; --r-btn:6px;
  --sh-1:0 1px 2px rgba(17,21,17,.05);
  --sh-2:0 2px 8px rgba(17,21,17,.06), 0 12px 28px -16px rgba(17,21,17,.18);
  --sh-3:0 26px 64px -30px rgba(17,21,17,.4);
  --maxw:1220px;

  /* Rubik arayüzü taşır; Newsreader Defter'in okuma registeri;
     IBM Plex Mono yalnızca ölçüm değerleri için. */
  --display:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;   /* tek font: hiyerarşi punto, kalınlık ve aralıkla kuruluyor */
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;   /* logodaki geometrik, zarif çizgi */
  --read:var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:var(--display);}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* Akış bloğundaki duraklara tarayıcının kendisi otursun; "proximity" zorlamaz,
     sayfanın geri kalanında durak olmadığı için normal kaydırma etkilenmez. */
  scroll-snap-type:y proximity}
@media(prefers-reduced-motion:reduce){ html{scroll-snap-type:none} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  /* Jost geometrik ve doğal olarak sıkı: taban punto ve harf aralığı bir tık açıldı */
  font-family:var(--sans); font-size:16px; line-height:1.64; letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--olive);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.16;letter-spacing:-.018em;margin:0;text-wrap:balance}
/* Jost'ta sıkılık puntoya bağlı: büyük başlık daha sıkı, küçük başlık daha ferah okunur */
h3,h4{letter-spacing:-.008em}
h1{font-size:clamp(30px,4.4vw,50px)}
h2{font-size:clamp(23px,2.7vw,33px)}
h3{font-size:19px}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- utilities ---------- */
.eyebrow{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;display:block
}
.muted{color:var(--ink-3)}
.stack-s>*+*{margin-top:8px}
.row{display:flex;align-items:center;gap:10px}
.row-b{display:flex;align-items:center;justify-content:space-between;gap:16px}
.grow{flex:1}
.hr{height:1px;background:var(--line);border:0;margin:26px 0}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r-btn);border:1px solid transparent;
  font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  background:var(--olive);color:#fff;transition:.16s ease;white-space:nowrap
}
.btn:hover{background:#1F2A16}
.btn:active{transform:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--card);border-color:var(--ink-3);transform:none}
.btn.gold{background:var(--gold);}
.btn.gold:hover{background:#96741B}
.btn.ghost.inv{color:#F4F7EE;border-color:rgba(244,247,238,.35)}
.btn.ghost.inv:hover{background:rgba(244,247,238,.08);border-color:#F4F7EE}
.btn.block{width:100%}
.btn.sm{padding:9px 15px;font-size:11.5px}
.btn.lg{padding:15px 28px;font-size:13.5px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.stack{flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px 24px 13px}
.btn.stack small{font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.72}
.link{display:inline;padding:0;background:none;border:0;border-bottom:1px solid rgba(44,58,32,.3);
  color:var(--olive);font-weight:600;font-size:inherit;cursor:pointer}
.link:hover{border-color:var(--olive)}

/* ---------- badges / chips ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-s);
  font-size:11px;font-weight:600;letter-spacing:.01em;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink-2);white-space:nowrap
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.ev-beyan{background:#fff;color:#7C7259;border-color:#E4DCC6}
.badge.ev-belge{background:var(--gold-soft);color:#8A6516;border-color:#EBDCB6}
.badge.ev-sertifika{background:var(--olive-soft);color:#3E5230;border-color:#D3E0C4}
.badge.warn{background:var(--clay-soft);color:var(--clay);border-color:#EFD3C8}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:var(--paper-2);font-size:12.5px;font-weight:500;
  cursor:pointer;transition:.14s
}
.chip:hover{border-color:var(--ink-3)}
.chip.on{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:14px;height:70px}
/* Marka yazısındaki Ü: logodaki gibi iki nokta yerine, U'nun bacaklarıyla üstte
   hizalanıp aşağı inen tek dikey çentik. Ölçüler logonun pikselinden alındı:
   çentik boyu büyük harf yüksekliğinin %17,3'ü, kalınlığı gövdenin %61'i, tam ortada.
   Konum satır kutusuna göre değil taban çizgisine göre kurulur; bunun için .mu'nun
   kendi satır yüksekliği 1'dir (taban çizgisi kutu altından .155em yukarıda,
   büyük harf çizgisi .855em). Harf aralığı geniş yerlerde --mu-kay ile ortalanır. */
.mu{position:relative;display:inline-block;line-height:1;vertical-align:baseline}
.mu::after{content:'';position:absolute;left:calc(50% - var(--mu-kay, .006em));transform:translateX(-50%);
  bottom:.734em;width:.052em;height:.121em;background:currentColor}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:28px;font-weight:600;letter-spacing:-.045em}
.logo svg{flex:none;width:1.22em;height:1.22em}
/* Yaprak yazının üstünden taştığı için görselin geometrik merkezi yazının merkezinden
   yukarıda değil, aşağıdadır; yazı (O..o) menü ve ikonlarla aynı eksene gelsin diye
   görsel yüksekliğinin ~%19'u kadar yukarı kaydırılır. */
.logo img{display:block;height:34px;width:auto}   /* ödükkan logosu: 5:1 yatay kilit */
@media(max-width:620px){ .logo img{height:26px} }
/* Menü başlıkta tam ortada; kalemler eşit genişlikte ve "|" ile ayrılır.
   Izgara sütunları en geniş kaleme göre eşitlenir (grid-auto-columns:1fr). */
.hdr-in{position:relative}
.nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}
.nav a{position:relative;padding:8px 22px;text-align:center;font-size:16px;font-weight:500;
  color:var(--ink-2);transition:color .14s;white-space:nowrap}
.nav a+a::before{content:'|';position:absolute;left:0;top:50%;transform:translate(-50%,-52%);
  color:var(--line);font-weight:300;font-size:18px;pointer-events:none}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--olive)}
/* 940 px altında menü çekmeceye taşınır; üstünde hamburger gizlenir (kural dosya sonunda) */
@media(max-width:940px){ .nav{display:none} }
.hdr-act{margin-left:auto;display:flex;align-items:center;gap:8px}
.icobtn{
  position:relative;width:40px;height:40px;border-radius:var(--r-btn);border:1px solid var(--line);
  background:var(--paper);display:grid;place-items:center;transition:.14s
}
.icobtn:hover{border-color:var(--olive);color:var(--olive)}
.icobtn .count{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--clay);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center
}
.menubtn{display:none}

/* ---------- footer ---------- */
.ftr{margin-top:70px;background:#1A2314;color-scheme:dark;color:#BFCAB4;padding:56px 0 30px}
.ftr .ftr-h{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#89B68F;margin-bottom:14px}
.ftr a{display:block;padding:4px 0;font-size:14px;color:#BFCAB4}
.ftr a:hover{color:#fff}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.ftr-bot{margin-top:38px;padding-top:22px;border-top:1px solid #2E3A26;font-size:12.5px;color:#78846C;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- hero: tam genişlikte görsel, solda soluklaşan metin ---------- */
/* Görsel bantlı sayfalarda (ana sayfa, üreticiler) başlık görselin üstüne biner: sabit ve şeffaf
   başlar, 24 px kaydırınca beyaz zemine döner. Hero'nun üst boşluğu başlık yüksekliği kadar artar. */
body.hdr-over .hdr{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .25s,border-color .25s}
body.hdr-over.past-top .hdr{background:rgba(255,255,255,.94);border-bottom-color:var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.home .hero-in{padding-top:126px}
body.home .hero::before{background:linear-gradient(90deg,
    var(--paper) 0%, var(--paper) 16%,
    rgba(255,255,255,.92) 30%, rgba(255,255,255,.55) 42%,
    rgba(255,255,255,.14) 54%, transparent 64%),
  linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 110px)}
.hero{position:relative;overflow:hidden;background:var(--paper)}
/* Görselin alt ve üst kenarı keskin bitmesin: iki uçta da kağıda erir (üstte başlık
   şeridiyle, altta beyaz ürün kutusuyla aynı yumuşaklıkta) */
.hero-img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 120px,#000 calc(100% - 130px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 120px,#000 calc(100% - 130px),transparent 100%)}
.hero-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:56% 42%}
.hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    var(--paper) 0%, var(--paper) 16%,
    rgba(255,255,255,.92) 30%, rgba(255,255,255,.55) 42%,
    rgba(255,255,255,.14) 54%, transparent 64%);
  /* Perde hiç sönmüyor: görselin göründüğü her yükseklikte sol sütun beyaz kalır.
     Son pikselde sönerse görselin alt şeridi oradan sızıp gri bir bant bırakıyordu;
     altındaki zemin de beyaz olduğu için perdenin alt ucu zaten görünmez. */}
/* Geniş ekranda beyaz kutunun sol kenarı, perdenin tam beyaz bölgesinin dışına taşabiliyor;
   görselin söndüğü alt bantta oradan gri bir şerit sızıyordu. Bu katman yalnız o bandı,
   yalnız solda kapatır: görsel orada zaten erimiş olduğu için kompozisyon değişmez. */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:190px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg, var(--paper) 0, var(--paper) 34%, transparent 58%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 60px)}
@media(max-width:900px){ .hero::after{display:none} }
/* Görselin alt kenarı kağıda erir; üstüne binen beyaz kutunun yan kenarları iki tarafta da yumuşak kalır */

.hero-in{position:relative;z-index:3;display:flex;align-items:center;
  min-height:clamp(460px,54vw,88vh);padding:56px 22px}   /* üreticiler banner'ıyla aynı yükseklik */
.hero-copy{max-width:min(34rem,40%)}   /* metin yağ damlasının üstüne taşmasın */
.hero h1{margin-bottom:22px;font-size:clamp(34px,4.9vw,60px);font-weight:400;letter-spacing:-.025em;line-height:1.06;text-wrap:initial}
/* dar ekranda zorunlu satır sonları kaldırılır, metin kendi akışına döner */
@media(max-width:1040px){ .hero-copy{max-width:min(34rem,60%)} }
@media(max-width:560px){ .hero h1 br{display:none} .hero-copy{max-width:none} }
/* Ana sayfa başlığındaki vurgu; satır satır kırılabilsin diye inline öğeye uygulanır */
.hl{font-style:normal;
  background:linear-gradient(180deg,transparent 66%,rgba(137,182,143,.45) 66%,rgba(137,182,143,.45) 94%,transparent 94%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero h1 em{font-style:normal;
  background:linear-gradient(180deg,transparent 66%,rgba(137,182,143,.45) 66%,rgba(137,182,143,.45) 94%,transparent 94%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-lead{font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--ink-2);max-width:36ch;margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.hero-cta .btn.ghost{background:rgba(255,255,255,.72);backdrop-filter:blur(6px)}

/* Dar ekranda maske dikeye döner; metin üstte, fotoğraf altta kalır. */
@media(max-width:900px){
  .hero-img{object-position:52% 50%}
  .hero::before,body.home .hero::before{background:linear-gradient(180deg,
    var(--paper) 0%, rgba(255,255,255,.96) 34%, rgba(255,255,255,.7) 52%,
    rgba(255,255,255,.14) 74%, transparent 100%)}
  .hero-in{min-height:0;padding:44px 22px 300px;align-items:flex-start}
  body.home .hero-in{padding-top:114px}
  .hero-copy{max-width:none}
}

/* ---------- section headers ---------- */
/* yalnız dikey: .wrap ile birlikte kullanıldığında yan boşluğu silmesin */
.sec{padding-top:58px;padding-bottom:58px}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.sec-hd p{margin:8px 0 0;color:var(--ink-3);max-width:56ch}

/* ---------- product card ---------- */
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s ease;cursor:pointer
}
.pcard:hover{box-shadow:var(--sh-2);border-color:var(--olive-2)}
.pcard-img{position:relative;aspect-ratio:1/1.08;display:grid;place-items:center;border-bottom:1px solid var(--line-2);overflow:hidden}
.pcard-img svg{height:82%}
.pcard-tags{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pcard-score{position:absolute;top:11px;right:11px}
.scorebug{
  width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;box-shadow:var(--sh-1);font-weight:500;font-size:16.5px;line-height:1;
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em
}
.pcard-b{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.pcard-prod{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--olive);margin-bottom:5px}
.pcard-name{font-family:var(--display);font-size:17px;font-weight:500;line-height:1.26;letter-spacing:-.004em;margin-bottom:7px}
.pcard-meta{font-size:12.5px;color:var(--ink-3);margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* tek satır; kart yükseklikleri eşit kalsın */
.pcard-foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid var(--line-2)}
.pcard-foot .price{flex:none;white-space:nowrap}   /* fiyat asla kırılmaz */
.pcard-boy{font-size:11.5px;font-weight:500;color:var(--ink-3);text-align:right;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}   /* boy ve litre fiyatı sağa dayalı; uzun etiket üç noktayla kesilir */
.pcard-img .pcard-cmp{position:absolute;top:11px;right:11px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px)}   /* karşılaştır: kartın sağ üstü */
.price{font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price small{font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--ink-3);display:block;margin-top:1px}
/* kartta karşılaştır: yalnız terazi ikonu; listedeyse koyu zemin ve küçük tik */
.cmp-ico{position:relative;width:40px;height:40px;padding:0;justify-content:center;flex:none}
.cmp-ico svg{width:19px;height:19px}
.cmp-ico .tick{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;
  background:var(--olive-2);color:#fff;font-size:10px;font-style:normal;font-weight:700;display:grid;place-items:center}
/* kartta adet + sepete ekle */
.pcard-buy{display:flex;align-items:stretch;gap:8px;margin-top:10px}
.pcard-buy .btn.sm{padding:0 12px;min-height:36px;font-size:11.5px;justify-content:center}
.pcard-buy .btn svg{width:15px;height:15px}
.qty.sm button{width:30px;height:34px;font-size:15px}
.qty.sm span{min-width:22px;font-size:13px}

/* ---------- radar ---------- */
.radar-wrap{display:flex;flex-direction:column;align-items:center}
.radar-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:12px;color:var(--ink-2)}
.radar-legend i{display:inline-block;width:15px;height:0;border-top:2px solid;margin-right:6px;vertical-align:middle}
.rl-doc i{border-color:var(--olive);border-top-width:9px;border-radius:2px;opacity:.55}
.rl-dec i{border-color:var(--gold);border-top-style:dashed;border-top-width:2px}

/* ---------- karne panel ---------- */
.karne{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px}
.karne-grid{display:grid;grid-template-columns:320px 1fr;gap:30px;align-items:start}
.karne-list{display:flex;flex-direction:column;gap:2px}
.krow{
  display:grid;grid-template-columns:22px 1fr auto;gap:11px;align-items:center;
  padding:9px 10px;border-radius:10px;cursor:pointer;transition:.12s;border:1px solid transparent
}
.krow:hover{background:var(--paper);border-color:var(--line-2)}
.krow.on{background:var(--olive-soft);border-color:#D3E0C4}
.krow .kno{width:22px;height:22px;border-radius:6px;background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-3)}
.krow.on .kno{background:var(--olive);border-color:var(--olive);color:#fff}
.krow .knm{display:block;font-size:14px;font-weight:600}
.krow .kbar{display:block;height:5px;border-radius:3px;background:var(--line-2);margin-top:5px;overflow:hidden}
.krow .kbar i{display:block;height:100%;border-radius:3px;background:var(--olive)}
.krow .kval{font-family:var(--mono);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}

.kdetail{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.kdetail h4{font-family:var(--serif);font-size:19px;margin-bottom:4px}
.kfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden;margin-top:14px}
.kfact{background:var(--card);padding:12px 14px}
.kfact dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.kfact dd{margin:0;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- callout ---------- */
.callout{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r-m);padding:15px 17px;font-size:13.5px;color:var(--ink-2)}
.callout strong{color:var(--ink)}
.callout.olive{background:var(--olive-soft);border-color:#D3E0C4}
.callout.ev-row{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.callout.ev-row .ev-tags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.callout.gold{background:var(--gold-soft);border-color:#EBDCB6}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:34px 0 10px;align-items:start}
.pdp-vis{position:sticky;top:88px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:26px;display:grid;place-items:center;min-height:400px;
  background-image:radial-gradient(520px 300px at 50% 8%, #F1F5EF 0%, transparent 70%)}
.pdp-vis svg{height:330px}
.crumbs{font-size:12.5px;color:var(--ink-3);padding:18px 0 0}
.crumbs a:hover{color:var(--ink)}
.pdp h1{font-size:clamp(27px,3.4vw,38px);margin:6px 0 10px}
.card-link{color:inherit;text-decoration:none}
.card-link:hover{text-decoration:none}
.pdp-h1-tip{display:block;font-size:.5em;font-weight:400;color:var(--ink-2);letter-spacing:.01em;margin-top:2px}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.size{
  border:1px solid var(--line);background:var(--paper-2);border-radius:12px;padding:9px 14px;text-align:left;transition:.14s
}
.size:hover{border-color:var(--ink-3)}
.size.on{border-color:var(--olive);background:var(--olive-soft);box-shadow:0 0 0 1px var(--olive) inset}
.size b{display:block;font-size:14px}
.size span{font-size:12px;color:var(--ink-3)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper-2)}
.qty button{width:36px;height:38px;background:none;border:0;font-size:17px;color:var(--ink-2)}
.qty span{min-width:26px;text-align:center;font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:34px 0 22px;overflow-x:auto}
.tabs button{
  background:none;border:0;padding:11px 15px;font-size:14px;font-weight:600;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap
}
.tabs button.on{color:var(--ink);border-color:var(--olive)}

.analiz-row{display:grid;grid-template-columns:132px 1fr 96px;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line-2)}
.gauge{height:8px;border-radius:4px;background:linear-gradient(90deg,#8FB56A,#D9C46A,#D99A6A);position:relative}
.gauge .mk{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px #fff}
.gauge.rev{background:linear-gradient(90deg,#D99A6A,#D9C46A,#8FB56A)}
.gauge-sc{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:5px}

.sens{display:flex;flex-direction:column;gap:14px}
.sens-row{display:grid;grid-template-columns:96px 1fr 34px;gap:12px;align-items:center}
.dots{display:flex;gap:5px}
.dots i{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.dots i.f{background:var(--olive)}
.dots i.h{background:linear-gradient(90deg,var(--olive) 50%,var(--line) 50%)}

/* ---------- producer ---------- */
.prod-hero{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;padding:34px 0}
.prod-mark{width:100%;aspect-ratio:16/11;border-radius:var(--r-xl);border:1px solid var(--line);
  display:grid;place-items:center;background:linear-gradient(140deg,#E9F2EA,#F6F3E7)}
.prod-mark span{font-family:var(--display);font-size:64px;font-weight:700;color:var(--olive);opacity:.5}

/* ---------- filters (pazar) ---------- */
.shop{display:grid;grid-template-columns:246px 1fr;gap:32px;padding:26px 0}
.filters{position:sticky;top:86px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;padding-right:4px}
.fgroup{border-bottom:1px solid var(--line);padding:16px 0}
.fgroup:first-child{padding-top:0}
.fgroup h4{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.fopt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;cursor:pointer}
.fopt input{accent-color:var(--olive);width:15px;height:15px}
.fopt .n{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.kom-list{display:flex;flex-direction:column;gap:6px}
.kom-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px;flex-wrap:wrap}
.kom-in{width:74px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);font:inherit;font-size:13.5px;text-align:right}

/* ---------- compare ---------- */
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px;font-variant-numeric:tabular-nums}
table.cmp th,table.cmp td{padding:12px 15px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
table.cmp thead th{background:var(--paper);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
/* başlık hücresi: görsel, ad, üretici ve düğme aynı sol eksende */
.cmp-vis{height:96px;width:96px;display:flex;align-items:flex-end;justify-content:flex-start;margin-bottom:10px}
.cmp-vis img{max-height:96px;max-width:96px;object-fit:contain;border-radius:6px}
.cmp-vis svg{height:82px}
table.cmp tbody th{font-weight:600;color:var(--ink-2);width:190px;background:var(--paper-2)}
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#1A2314;color-scheme:dark;color:var(--ink-inv);
  padding:11px 0;box-shadow:0 -10px 30px -18px rgba(0,0,0,.5)}
.cmp-bar .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cmp-mini{display:flex;align-items:center;gap:7px;background:#26311D;border-radius:var(--r-btn);padding:5px 6px 5px 12px;font-size:12.5px}
.cmp-mini button{background:none;border:0;color:#98A38C;font-size:15px;line-height:1;padding:0 4px}

/* ---------- defter ---------- */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;
  display:flex;flex-direction:column;cursor:pointer;transition:.18s;min-height:200px}
.acard:hover{box-shadow:var(--sh-2);border-color:var(--olive-2)}
.acard .cat{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.acard h3{font-family:var(--read);font-weight:600;font-size:20px;margin-bottom:8px;line-height:1.24}
.acard p{font-size:13.5px;color:var(--ink-3);margin:0}
.acard .rt{margin-top:auto;padding-top:14px;font-size:12px;color:var(--ink-3)}
.acard.big{grid-column:span 2;background:linear-gradient(150deg,#E9F2EA,#F6F3E7);border-color:#DCE5DC}
.article{max-width:704px;margin:0 auto;padding:30px 0 20px}
.article h1{font-family:var(--read);font-weight:600;letter-spacing:-.018em;margin:10px 0 14px}
.article .lead{font-family:var(--read);font-size:20px;color:var(--ink-2);line-height:1.6;letter-spacing:.004em;margin-bottom:26px}
.article h2{font-family:var(--read);font-weight:600;font-size:26px;margin:36px 0 12px}
.article h3{font-family:var(--read);font-weight:600;font-size:19px;margin:26px 0 8px}
.article p{font-family:var(--read);font-size:17.5px;line-height:1.76;letter-spacing:.014em;color:var(--ink-2)}
.article ul{padding-left:20px;color:var(--ink-2);font-family:var(--read);font-size:17.5px;line-height:1.76;letter-spacing:.014em}
.article li{margin-bottom:7px}
.article .callout{font-size:15px;margin:26px 0}
.article table{width:100%;border-collapse:collapse;font-size:14.5px;margin:22px 0;font-variant-numeric:tabular-nums}
.article th,.article td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.article th{background:var(--paper-2);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}

/* label decoder */
.label-tool{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.lblcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px}
.lhot{display:block;width:100%;text-align:left;border:1px dashed var(--line);background:var(--paper-2);
  border-radius:10px;padding:10px 13px;margin-bottom:8px;transition:.14s}
.lhot:hover{border-color:var(--olive);background:var(--olive-soft)}
.lhot.on{border-style:solid;border-color:var(--olive);background:var(--olive-soft)}
.lhot b{display:block;font-size:14.5px}
.lhot span{font-size:12px;color:var(--ink-3)}

/* ---------- cart / checkout ---------- */
.two{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;align-items:start;padding:26px 0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px}
.panel+.panel{margin-top:16px}
.panel h3{font-size:19px;margin-bottom:14px}
.summary{position:sticky;top:88px}
.sline{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;font-variant-numeric:tabular-nums}
.sline.tot{border-top:1px solid var(--line);margin-top:9px;padding-top:13px;font-size:17px;font-weight:700}
.citem{display:grid;grid-template-columns:66px 1fr auto;gap:14px;padding:15px 0;border-top:1px solid var(--line-2);align-items:center}
.citem:first-of-type{border-top:0}
.citem .th{background:var(--paper);border:1px solid var(--line-2);border-radius:12px;display:grid;place-items:center;height:76px}
.citem .th svg{height:62px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);font-size:14.5px
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--olive);box-shadow:0 0 0 3px rgba(76,98,56,.12)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.radio-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px;margin-bottom:10px;cursor:pointer;transition:.14s;background:var(--paper-2)}
.radio-card:hover{border-color:var(--ink-3)}
.radio-card.on{border-color:var(--olive);background:var(--olive-soft);box-shadow:0 0 0 1px var(--olive) inset}
.radio-card input{margin-top:3px;accent-color:var(--olive)}
.radio-card b{display:block;font-size:14.5px}
.radio-card span{font-size:12.5px;color:var(--ink-3)}
.steps{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);padding:22px 0 4px;flex-wrap:wrap}
.steps b{color:var(--ink);font-weight:600}
.steps .sp{opacity:.4}
.demo-note{display:flex;gap:9px;align-items:flex-start;background:var(--gold-soft);border:1px solid #EBDCB6;
  border-radius:var(--r-m);padding:12px 14px;font-size:12.5px;color:#7A5A17;margin-bottom:16px}

.ok-hero{text-align:center;padding:58px 0 22px}
.ok-badge{width:70px;height:70px;border-radius:50%;background:var(--olive-soft);border:1px solid #D3E0C4;
  display:grid;place-items:center;margin:0 auto 20px}
.track{display:flex;gap:0;margin:26px 0}
.track div{flex:1;text-align:center;position:relative;font-size:12px;color:var(--ink-3);padding-top:26px}
.track div::before{content:'';position:absolute;top:6px;left:50%;width:13px;height:13px;border-radius:50%;
  background:var(--line);transform:translateX(-50%);z-index:2}
.track div::after{content:'';position:absolute;top:12px;left:0;right:0;height:1px;background:var(--line)}
.track div.on::before{background:var(--olive)}
.track div.on{color:var(--ink);font-weight:600}
.track div:first-child::after{left:50%}
.track div:last-child::after{right:50%}

/* ---------- producer panel (placeholder) ---------- */
.pp{display:grid;grid-template-columns:214px 1fr;gap:28px;padding:26px 0}
.pp-nav{border-right:1px solid var(--line);padding-right:16px}
.pp-nav a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink-2)}
.pp-nav a.on{background:var(--olive-soft);color:var(--olive);font-weight:600}
.pp-nav a:hover{background:var(--line-2)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.kpi div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.kpi b{display:block;font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.04em}
.kpi span{font-size:12px;color:var(--ink-3)}
.ghost-box{border:1.5px dashed var(--line);border-radius:var(--r-l);padding:26px;background:var(--paper-2)}
.skel{height:11px;border-radius:6px;background:var(--line-2);margin:9px 0}

/* ---------- empty ---------- */
.empty{text-align:center;padding:64px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--shade)}
.empty h3{margin-bottom:8px}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  background:#1A2314;color:var(--ink-inv);padding:12px 20px;border-radius:999px;font-size:14px;font-weight:500;
  opacity:0;pointer-events:none;transition:.22s;box-shadow:var(--sh-3)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .pdp,.prod-hero,.karne-grid,.label-tool,.two{grid-template-columns:1fr}
  .pdp-vis,.filters,.summary{position:static;max-height:none}
  .shop{grid-template-columns:1fr}
  .filters{display:none}
  .filters.open{display:block}
  .pp{grid-template-columns:1fr}
  .pp-nav{border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px;display:flex;gap:6px;overflow:auto}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .acard.big{grid-column:span 1}
}
@media(max-width:720px){
  /* 6 kriter tek satıra sığmıyor: 3x2 ızgara */
  .k6{grid-template-columns:repeat(3,1fr)!important}
  .k6 button{padding:12px 6px}
  .k6 .v{font-size:11.5px}
  .tabs{flex-wrap:wrap;gap:0 2px}
  .tabs button{padding:10px 11px;font-size:13.5px}
  .hdr-in{gap:10px}
  .sec{padding-top:40px;padding-bottom:40px}
  .f3,.f2{grid-template-columns:1fr}
  .analiz-row{grid-template-columns:110px 1fr;}
  .analiz-row .av{grid-column:2}
}

@media(max-width:940px){ .toolbar [data-act="togglef"]{display:inline-flex !important} }

/* ============================================================
   Hamburger + çekmece menü  (hermus.com.tr düzeni: solda menü,
   yanında logo, sağda hesap/sepet ikonları)
   ============================================================ */
.burger{
  display:flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 11px;
  border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);
  font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;transition:.14s
}
.burger:hover{border-color:var(--olive);color:var(--olive)}
.burger .bars{display:grid;gap:4px;width:17px;justify-items:end}
.burger .bars i{display:block;width:17px;height:1.5px;background:currentColor;border-radius:1px;transition:.2s}
.burger .bars i:nth-child(2){width:11px}
.burger:hover .bars i:nth-child(2){width:17px}
.burger .btxt{display:inline}

.drawer{position:fixed;inset:0;z-index:120;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(17,21,17,.55);opacity:0;
  transition:opacity .42s cubic-bezier(.4,0,.2,1)}
.drawer .panel-nav{
  position:absolute;top:0;bottom:0;left:0;width:min(440px,86vw);
  background:#1A2314;color:#F4F7EE;color-scheme:dark;
  transform:translateX(-100%);will-change:transform;
  transition:transform .42s cubic-bezier(.32,.72,.24,1), box-shadow .42s;
  display:flex;flex-direction:column;padding:24px 30px 30px;overflow:auto
}
.drawer.on{pointer-events:auto}
.drawer.on .scrim{opacity:1}
.drawer.on .panel-nav{transform:none;box-shadow:26px 0 60px -30px rgba(17,21,17,.6)}
.drawer-x{background:none;border:0;color:#89B68F;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:6px 0}
.drawer-x:hover{color:#fff}
.dnav{display:flex;flex-direction:column;margin:26px 0 6px}
.dnav a{
  padding:15px 0;border-bottom:1px solid #2E3A26;font-size:26px;font-weight:400;
  letter-spacing:-.03em;color:#F4F7EE;display:flex;align-items:baseline;gap:12px;transition:.16s
}
.dnav a:hover{color:#89B68F;padding-left:8px}
.dnav a small{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7E8C72;font-weight:500}
.dnav a.on{color:#89B68F}
body.menu-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){ .drawer .panel-nav,.drawer .scrim{transition:none} }

/* ============================================================
   Rakam şeridi: hero'nun altında açık sage bant (koyu "Neden Olivio?" bloğundan ayrışsın)
   ============================================================ */
.statband{background:var(--olive-soft);color:var(--ink);padding:48px 0 50px;position:relative;overflow:hidden;
  border-top:1px solid #D3E0C4;border-bottom:1px solid #D3E0C4}
.statband::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(760px 300px at 84% 120%, rgba(137,182,143,.28) 0%, transparent 70%);
  pointer-events:none
}
.statband .wrap{position:relative}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:0 26px;border-left:1px solid #CFDDC6;position:relative}
.stat:first-child{border-left:0;padding-left:0}
.stat b{
  display:block;font-family:var(--mono);font-weight:400;letter-spacing:-.05em;line-height:.92;color:var(--olive);
  font-size:clamp(46px,5.6vw,74px);font-variant-numeric:tabular-nums
}
.stat .stat-l{display:block;margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#4E6A3E}
.stat .sub{display:block;margin-top:5px;font-size:13px;color:var(--ink-3);max-width:26ch}
@media(max-width:820px){
  .statgrid{grid-template-columns:1fr 1fr;gap:4px 0}
  .stat{padding:0 18px 10px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid #CFDDC6;padding-top:24px}
}

/* üretici sayfasındaki sayı satırı */
.hero-stats{display:flex;gap:30px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.hero-stats b{display:block;font-family:var(--mono);font-size:25px;font-weight:400;letter-spacing:-.04em}
.hero-stats span{font-size:12.5px;color:var(--ink-3)}

/* ============================================================
   Üreticiler: liste sayfası ve kartlar
   (yapı referansı: fillco.com/producers)
   ============================================================ */
/* Üreticiler sayfası: fotoğraf bandı. Yükseklik genişliğin ~%54'ü (görsel 16:9'a yakın),
   88vh ile sınırlı; görsel sağa dayalı (object-position 100%), kırpma solda, maskenin altında
   kalır. Metin ana sayfadaki gibi .wrap içinde, ekran kenarına yapışmaz. */
.uhero{position:relative;overflow:hidden;background:var(--paper);min-height:clamp(440px,54vw,88vh);display:flex}
.uhero-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:100% 45%}
/* Üst şerit: başlık şeffaf başladığı için menü yazıları zeytin dalının üstüne geliyordu;
   140 px'lik beyaz geçiş menü bandını okunur tutar, dal altta olduğu gibi kalır. */
.uhero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 28%,
    rgba(255,255,255,.7) 42%, rgba(255,255,255,.3) 54%, transparent 64%),
  linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.55) 70px, transparent 150px)}
.uhero-in{position:relative;z-index:3;flex:1 1 auto;width:100%;padding:110px 22px 130px;display:flex;flex-direction:column;justify-content:center}
#uretici-liste{scroll-margin-top:86px}
/* Liste bloğu banner'ın üstüne biner: beyaz "kağıt" yukarı çekilir, görsel iki yandan taşar */
.usheet{position:relative;z-index:4;margin-top:-96px;background:var(--paper);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding-left:36px;padding-right:36px;
  box-shadow:0 -14px 40px -24px rgba(17,21,17,.45)}
.usheet .shop{padding-top:34px}
@media(max-width:1280px){ .usheet{margin-left:22px;margin-right:22px} }
@media(max-width:900px){ .usheet{margin-top:-48px;padding-left:20px;padding-right:20px;margin-left:12px;margin-right:12px} }
.uhero .eyebrow{color:var(--olive);margin-bottom:18px}
.uhero h1{font-family:var(--read);font-weight:500;font-size:clamp(38px,5.2vw,74px);line-height:1.06;letter-spacing:-.02em;max-width:15ch;color:var(--olive)}
.uhero p{margin:22px 0 0;max-width:44ch;font-size:clamp(15.5px,1.25vw,18px);color:var(--ink-2);line-height:1.6}
/* Üretici çağrısı ikincil düğme: fotoğraf üstünde okunsun diye ana sayfa hero'suyla aynı yarı saydam zemin */
.uhero .btn{margin-top:30px;align-self:flex-start;background:rgba(255,255,255,.72);backdrop-filter:blur(6px)}
.btn.plain{text-transform:none;letter-spacing:0;font-size:16px;font-weight:400;padding:14px 26px}
/* rakamların yerine ilkeler: dört kısa ifade, noktayla ayrılmış */
.uhero-tags{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid rgba(17,21,17,.14);max-width:640px;
  display:flex;flex-wrap:wrap;gap:8px 0;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.uhero-tags li{white-space:nowrap}
.uhero-tags li+li::before{content:'·';margin:0 10px;color:var(--ink-3)}
.uhero .btn.ghost{margin-top:26px;align-self:flex-start}
@media(max-width:900px){
  .uhero{min-height:0}
  .uhero-img{object-position:70% 40%}
  .uhero::before{background:linear-gradient(180deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 40%, rgba(255,255,255,.7) 62%, rgba(255,255,255,.2) 85%, transparent 100%)}
  .uhero-in{height:auto;padding:114px 22px 240px;justify-content:flex-start}
}


.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:22px}
.ucard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:.18s}
.ucard:hover{box-shadow:var(--sh-2);border-color:var(--olive-2)}
/* Kart başlığı: üreticinin kapak fotoğrafı, üstüne koyu geçiş ve logosu; hover'da fotoğraf
   hafifçe yaklaşır. Kapak/logo yoksa eski koyu zemin + monogram. */
.ucard-top{position:relative;min-height:176px;display:flex;align-items:flex-end;padding:18px 20px;overflow:hidden;
  background:linear-gradient(160deg,#26311D,#1A2314);color:#F4F7EE}
.ucard-top::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(320px 190px at var(--sx,30%) -20%, rgba(137,182,143,.34) 0%, transparent 72%)}
.ucard-top.has-cover::before{background:linear-gradient(180deg, rgba(14,20,10,.12) 0%, rgba(14,20,10,.32) 50%, rgba(14,20,10,.82) 100%)}
.ucard-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ucard:hover .ucard-cover{transform:scale(1.08)}
.ucard-logo{position:relative;z-index:2;display:block;max-width:min(52%,220px);max-height:64px;width:auto;height:auto;
  margin-right:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.ucard-top.has-cover{align-items:flex-end;gap:14px;flex-wrap:wrap}
.ucard-id{position:relative;z-index:2;flex:1 1 100%}
.ucard-id h3{font-size:22px;font-weight:500;letter-spacing:-.025em;color:#F4F7EE}
.ucard-id span{display:block;margin-top:4px;font-size:11px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:#9EB394}
.seal{position:absolute;z-index:2;top:16px;right:18px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(137,182,143,.55);display:grid;place-items:center;
  font-family:var(--mono);font-size:15px;letter-spacing:.02em;color:#B7CDB8;background:rgba(26,35,20,.35)}
.ucard-b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.ucard-b p{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0 0 14px}

.uperson{margin-bottom:14px}
.uav{width:38px;height:38px;flex:none;border-radius:50%;background:var(--olive-soft);border:1px solid #D5E3D6;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--olive)}
.uav.lg{width:52px;height:52px;font-size:17px}
.uperson b{display:block;font-size:14.5px;font-weight:600}
.uperson span{display:block;font-size:12px;color:var(--ink-3)}

.umeta{font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 0 13px;border-top:1px solid var(--line-2);margin-bottom:12px;line-height:1.7}
.utags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.utag{display:inline-flex;padding:4px 10px;border:1px solid var(--line);border-radius:999px;
  font-size:11.5px;color:var(--ink-2);background:var(--paper-2)}
.ucard-f{margin-top:auto;padding-top:15px;display:flex;align-items:flex-end;gap:20px;
  border-top:1px solid var(--line-2)}
.ucard-f>div b{display:block;font-size:20px;line-height:1}
.ucard-f>div span{display:block;margin-top:3px;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ulink{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--olive);white-space:nowrap}
.ucard:hover .ulink{text-decoration:underline;text-underline-offset:3px}
.ulink-s{cursor:pointer}
.ulink-s:hover{text-decoration:underline;text-underline-offset:2px}

.uquote{margin:0;padding:0 0 0 16px;border-left:2px solid var(--olive-2);
  font-family:var(--read);font-size:19px;line-height:1.5;color:var(--ink)}

@media(max-width:820px){ .ugrid{grid-template-columns:1fr} }

/* ürün sayfasındaki üretici geçişi */
.pdp-prod{display:flex;align-items:center;gap:13px;margin-top:18px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper-2);transition:.14s}
.pdp-prod:hover{border-color:var(--olive-2);background:var(--olive-soft)}
.pdp-prod b{display:block;font-size:15.5px;font-weight:600;line-height:1.25}
.pdp-prod-m{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3)}
.pdp-prod .grow{min-width:0}
.pdp-prod .ulink{flex:none}

/* ============================================================
   Üretici künyesi: Olivio'nun her üreticiye sorduğu standart
   sorular. Numaralandırma bir sıra bildirir: bahçeden şişeye.
   ============================================================ */
.kunye{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.kbox{background:var(--card);padding:20px 22px 22px}
.kbox header{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.kbox h4{font-size:17px;font-weight:500;letter-spacing:-.02em}
.knum{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--olive);
  background:var(--olive-soft);border-radius:var(--r-s);padding:3px 7px;letter-spacing:.02em}

.kv{margin:0;display:grid;gap:1px;background:var(--line-2)}
.kv>div{background:var(--card);display:grid;grid-template-columns:152px 1fr;gap:14px;padding:9px 0}
.kv dt{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.kv dd{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.kv .miss{color:var(--ink-3);font-size:13px}
.knote{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);
  padding-top:12px;border-top:1px solid var(--line-2)}

/* ödüller */
.odul{margin-top:34px;padding:24px 26px 26px;border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(150deg,#FBF6E9,#FFFFFF 60%)}
.odul-hd{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid #EADFC4;margin-bottom:18px}   /* "Ödüller" solda, derece sayısı sağda, dikeyde ortalı */
.odul-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.odul-k{display:flex;align-items:center;gap:14px;padding:13px 15px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);transition:.14s}
.odul-k:hover{border-color:var(--t);box-shadow:var(--sh-1)}
.medal{width:44px;height:44px;flex:none;border-radius:50%;border:2px solid var(--t);
  display:grid;place-items:center;background:var(--paper-2)}
.medal b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--t);letter-spacing:-.02em}
.odul-k b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.odul-k .oc{display:block;margin-top:2px;font-size:12px;color:var(--ink-3);line-height:1.35}
.odul-k .op{display:block;margin-top:4px;font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--olive)}

@media(max-width:820px){
  .kunye{grid-template-columns:1fr}
  .kv>div{grid-template-columns:1fr;gap:2px;padding:8px 0}
}

/* 6 kriter kartları (ana sayfa) */
.sec-hd.center{justify-content:center;text-align:center}
.sec-hd.center p{margin-left:auto;margin-right:auto}
.krit6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.krit{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px 18px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:.16s}
.krit:hover{border-color:var(--olive-2);box-shadow:var(--sh-1)}
.krit-i{width:40px;height:40px;color:var(--olive);margin-bottom:14px;display:block}
.krit-i svg{width:100%;height:100%}
.krit b{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.krit p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-3)}
@media(max-width:1080px){ .krit6{grid-template-columns:repeat(3,1fr)} }
@media(max-width:620px){ .krit6{grid-template-columns:repeat(2,1fr)} .krit{padding:18px 14px} }

/* ---------- menü sağda ---------- */
.burger{padding:0 12px 0 16px}
.hdr-act .burger{margin-left:4px}
.drawer .panel-nav{left:auto;right:0;transform:translateX(100%)}
.drawer.on .panel-nav{transform:none;box-shadow:-26px 0 60px -30px rgba(17,21,17,.6)}

/* ---------- kalıcı alışveriş düğmesi ---------- */
.scta{position:fixed;right:24px;bottom:24px;z-index:80;display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border-radius:8px;background:var(--gold);color:#fff;white-space:nowrap;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 16px 36px -16px rgba(17,21,17,.6);
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
  transition:opacity .28s ease, transform .28s ease, background .16s}
body.scrolled .scta{opacity:1;transform:none;pointer-events:auto}
body.at-footer .scta{opacity:0;transform:translateY(16px) scale(.97);pointer-events:none}
.scta:hover{background:#96741A}
body.has-cmp .scta{bottom:86px}
@media(max-width:620px){
  .scta{right:14px;bottom:14px;padding:12px 18px;font-size:11.5px}
  body.has-cmp .scta{bottom:94px}
  .burger .btxt{display:none}
  .burger{padding:0 11px}
}

/* ---------- ürün sayfası: 6 kriterin sade şeridi ---------- */
.k6{display:grid;grid-template-columns:repeat(6,1fr);justify-content:start;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden;margin-bottom:22px}
.k6 button{background:var(--card);border:0;padding:16px 10px 15px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;transition:.14s;cursor:pointer}
.k6 button:hover{background:var(--paper-2)}
.k6 button.on{background:var(--olive-soft);box-shadow:inset 0 -2px 0 var(--olive)}
.k6 .i{width:24px;height:24px;color:var(--olive);display:block}
.k6 .i svg{width:100%;height:100%}
.k6 .n{font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.k6 .v{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);line-height:1.3}
.k6 .v i{width:6px;height:6px;border-radius:50%;flex:none}
.k6 button.on .v{color:var(--olive)}
/* dolu kriter sayısı kadar eşit sütun: 3 kriter → 3 eşit parça, tam genişlik; az kriterde ikon ve yazı biraz büyür */
.k6{grid-template-columns:repeat(var(--kn,6),1fr)}
.k6-1 button,.k6-2 button,.k6-3 button{padding:20px 14px 18px;gap:9px}
.k6-1 .i,.k6-2 .i,.k6-3 .i{width:28px;height:28px}
.k6-1 .n,.k6-2 .n,.k6-3 .n{font-size:14px}
.k6-1 .v,.k6-2 .v,.k6-3 .v{font-size:12.5px}
@media(max-width:900px){ .k6{grid-template-columns:repeat(3,1fr)} .k6-1,.k6-2{grid-template-columns:repeat(var(--kn),1fr)} }
@media(max-width:520px){ .k6-4,.k6-5,.k6-6{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .k6{grid-template-columns:repeat(2,1fr)} }

/* ---------- geri düğmesi ve kırıntı yolu ---------- */
.crumbs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 0 0}
.crumb-list{color:var(--ink-3)}
.backbtn{
  display:inline-flex;align-items:center;gap:7px;padding:0 0 3px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.022em;text-transform:uppercase;
  color:var(--ink-2);transition:.16s
}
.backbtn::before{content:'←';transition:transform .16s}
.backbtn:hover::before{transform:translateX(-2px)}
.backbtn:hover{color:var(--olive);border-bottom-color:var(--olive)}
/* koyu kapak üstünde aynı düğme */
.backbtn.acik{color:rgba(244,247,238,.86);border-bottom-color:rgba(244,247,238,.34)}
.backbtn.acik:hover{color:#fff;border-bottom-color:#fff}
.steps .backbtn{margin-right:10px}
/* kırıntı yolu olmayan sayfalarda tek başına geri şeridi */
.geri-serit{padding-top:22px}
.wrap > .backbtn{margin-top:22px}
.hero-geri{margin-bottom:18px}
@media(max-width:600px){ .geri-serit,.wrap > .backbtn{padding-top:16px;margin-top:16px} .hero-geri{margin-bottom:14px} }
.steps a:hover b{color:var(--olive)}

/* ---------- ana sayfa üretici kartları ----------
   12 sütunluk ızgara; satır kompozisyonu elle kurgulandı:
   tam genişlik → 30/70 → 60/40 → üçlü. Görsel arkada, maske
   solda opak olup sağa doğru açılıyor. */
.hgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.hcard{
  position:relative;overflow:hidden;display:flex;cursor:pointer;grid-column:span 4;min-height:232px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);transition:.18s
}
.hcard:hover{box-shadow:var(--sh-2);border-color:var(--olive-2)}
.hcard[data-c="12"]{grid-column:span 12;min-height:340px}
.hcard[data-c="8"] {grid-column:span 8; min-height:268px}
.hcard[data-c="7"] {grid-column:span 7; min-height:268px}
.hcard[data-c="5"] {grid-column:span 5; min-height:268px}
.hcard[data-c="4"] {grid-column:span 4}

.hcard-art{position:absolute;inset:0}
.hcard-art svg,.hcard-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hcard-fade{position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,#fff 20%,rgba(255,255,255,.92) 34%,
    rgba(255,255,255,.48) 50%,rgba(255,255,255,.1) 68%,transparent 80%)}
.hcard[data-c="12"] .hcard-fade,
.hcard[data-c="8"] .hcard-fade,
.hcard[data-c="7"] .hcard-fade{
  background:linear-gradient(90deg,#fff 0%,#fff 15%,rgba(255,255,255,.9) 25%,
    rgba(255,255,255,.42) 38%,rgba(255,255,255,.07) 54%,transparent 68%)}

.hcard-body{position:relative;padding:22px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:6px;max-width:70%}
.hcard[data-c="12"] .hcard-body{max-width:36%;padding:28px}
.hcard[data-c="8"]  .hcard-body{max-width:46%}
.hcard[data-c="7"]  .hcard-body{max-width:48%}
.hcard[data-c="5"]  .hcard-body{max-width:60%}
.hcard-region{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hcard-body b{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.22}
.hcard[data-c="12"] .hcard-body b{font-size:30px}
.hcard[data-c="8"] .hcard-body b,
.hcard[data-c="7"] .hcard-body b{font-size:23px}
.hcard-meta{font-size:13px;color:var(--ink-2)}
.hcard-story{font-size:12.5px;color:var(--ink-3)}
.hcard-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.hcard-cta{margin-top:10px;transition:.16s}
.hcard:hover .hcard-cta{padding-left:4px}

@media(max-width:980px){
  .hgrid{grid-template-columns:repeat(2,1fr)}
  .hcard,.hcard[data-c]{grid-column:span 1;min-height:230px}
  .hcard[data-c="12"]{grid-column:span 2;min-height:290px}
  .hcard[data-c="12"] .hcard-body{max-width:52%}
  .hcard[data-c] .hcard-body{max-width:70%}
}
@media(max-width:600px){
  .hgrid{grid-template-columns:1fr}
  .hcard,.hcard[data-c],.hcard[data-c="12"]{grid-column:span 1;min-height:196px}
  .hcard[data-c] .hcard-body,.hcard[data-c="12"] .hcard-body{max-width:74%;padding:20px}
  .hcard[data-c="12"] .hcard-body b{font-size:22px}
}

/* ============================================================
   Üreticiye özel landing sayfası (Özdemir)
   Standart üretici şablonundan bilinçli olarak ayrışır.
   ============================================================ */
.lp-cover{position:relative;height:clamp(360px,52vw,560px);overflow:hidden;margin-bottom:8px}
.lp-cover img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.lp-cover-in{position:absolute;left:0;right:0;bottom:0;padding-bottom:36px;color:#fff}
.lp-cover::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,24,14,.28) 0%,transparent 34%,rgba(18,24,14,.72) 100%)}
.lp-cover-in{z-index:2}
.lp-eyebrow{display:block;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#BFD4B7;margin-bottom:14px}
.lp-cover h1{font-family:var(--read);font-weight:400;font-size:clamp(34px,5.4vw,64px);
  line-height:1.06;letter-spacing:-.02em;color:#fff;margin:0}
.lp-name{display:block;margin-top:16px;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#E4EEDD}

.lp-story{display:grid;grid-template-columns:1.18fr .82fr;gap:48px;align-items:start;padding:44px 0 8px}
.lp-story p{font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.lp-story .lp-lead{font-family:var(--read);font-size:20.5px;line-height:1.55;color:var(--ink)}
.lp-portre{margin:0}
.lp-portre img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:var(--r-l);display:block}
.lp-portre figcaption{margin-top:12px}
.lp-portre b{display:block;font-size:15px}
.lp-portre span{display:block;font-size:12.5px;color:var(--ink-3)}

.lp-quote{background:#1A2314;color-scheme:dark;color:#F4F7EE;margin:52px 0;padding:56px 0}
.lp-quote blockquote{margin:0;max-width:22ch;font-family:var(--read);font-weight:400;
  font-size:clamp(24px,3.4vw,40px);line-height:1.32;letter-spacing:-.015em}
.lp-quote cite{display:block;margin-top:22px;font-style:normal;font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#89B68F}

.lp-nums{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-bottom:52px}
.lp-nums div{background:var(--card);padding:22px 18px}
.lp-nums b{display:block;font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.03em}
.lp-nums span{display:block;margin-top:7px;font-size:12px;line-height:1.45;color:var(--ink-3)}

.lp-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:52px}
.lp-gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--shade)}
.lp-gal img{width:100%;height:100%;object-fit:cover;display:block}
.lp-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  font-size:11.5px;line-height:1.4;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(18,24,14,.78))}
.lp-gal .g0{grid-column:span 2;grid-row:span 2}
.lp-gal .g1{grid-column:span 2}
.lp-gal .g2,.lp-gal .g3{grid-column:span 1}
.lp-gal .g4{grid-column:span 2}
.lp-gal .g5{grid-column:span 2}
.lp-gal figure:not(.g0){aspect-ratio:16/10}

.lp-contact{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:24px 26px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper-2)}
.lp-contact b{display:block;font-size:16px;margin-bottom:4px}
.lp-contact span{font-size:13.5px;color:var(--ink-3)}
.lp-contact p{margin:0;max-width:44ch;font-size:13px}

@media(max-width:900px){
  .lp-story{grid-template-columns:1fr;gap:28px}
  .lp-nums{grid-template-columns:repeat(2,1fr)}
  .lp-gal{grid-template-columns:repeat(2,1fr)}
  .lp-gal .g0,.lp-gal .g1,.lp-gal .g4,.lp-gal .g5{grid-column:span 2}
  .lp-gal .g0{grid-row:auto;aspect-ratio:16/10}
}

/* Özdemir landing: hakkımızda blokları */
.lp-sub{display:block;margin-top:16px;font-size:15px;color:#DCE8D5;letter-spacing:.01em}
.lp-intro{padding:46px 0 8px;max-width:62ch}
.lp-intro .lp-name{display:block;margin:0 0 12px;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lp-intro p{font-family:var(--read);font-size:22px;line-height:1.55;color:var(--ink);margin:0}
.lp-h2{font-family:var(--read);font-weight:500;font-size:clamp(25px,3vw,34px);
  line-height:1.2;letter-spacing:-.015em;margin:6px 0 18px}

.lp-values{padding:8px 0 48px}
.lp-values header{max-width:58ch;margin-bottom:10px}
.lp-values-lead{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0}
.lp-value{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;
  padding:30px 0;border-top:1px solid var(--line)}
.lp-vno{font-family:var(--mono);font-size:34px;font-weight:400;letter-spacing:-.05em;
  color:var(--olive-2);line-height:1}
.lp-value h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.lp-vlead{font-family:var(--read);font-size:18.5px;line-height:1.5;color:var(--ink);margin:0 0 14px}
.lp-value p{font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:68ch}
.lp-value p:last-child{margin-bottom:0}

.lp-ci{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;
  padding:44px 0;border-top:1px solid var(--line);margin-bottom:44px}
.lp-ci p{font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.lp-ci p:last-child{margin-bottom:0}

@media(max-width:900px){
  .lp-value{grid-template-columns:1fr;gap:8px}
  .lp-vno{font-size:26px}
  .lp-ci{grid-template-columns:1fr;gap:16px}
  .lp-intro p{font-size:19px}
}

/* ---------- üretici paneli formu ---------- */
.pf-set{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px 18px;margin:0 0 14px}
.pf-set legend{padding:0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--olive)}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.pf-grid .field{margin:0}
.pf-check{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:8px 0}
.pf-check input{accent-color:var(--olive);width:16px;height:16px}
#urunForm{margin-top:16px}
.pp-nav a{cursor:pointer}
@media(max-width:620px){ .pf-grid{grid-template-columns:1fr} }

/* ---------- arama kutusu ---------- */
.search{display:inline-flex;align-items:center;gap:8px;padding:0 10px 0 12px;
  border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper-2);
  min-width:min(320px,100%);transition:.14s}
.search:focus-within{border-color:var(--olive);box-shadow:0 0 0 3px rgba(44,58,32,.1);background:var(--card)}
.search svg{flex:none;color:var(--ink-3)}
.search input{flex:1;min-width:0;border:0;background:none;padding:9px 0;font-size:13.5px;outline:0}
.search input::-webkit-search-cancel-button{display:none}
.search button{border:0;background:none;color:var(--ink-3);font-size:17px;line-height:1;padding:0 4px}
.search button:hover{color:var(--ink)}
@media(max-width:620px){ .search{min-width:100%} }


/* ---------- Olikarnas landing sayfası ----------
   Üreticinin kendi rozet rengi (turkuaz) burada aksan olarak kullanılır;
   sitenin zeytin yeşili paleti bu sayfada arka plana çekilir. */
.olk{--t:#57A39E;--deep:#17403D;--cream:#F6F1E4}

/* Tam genişlikte açılan üretici sayfalarında kırıntı yolu ile kapak arasına
   nefes payı; .crumbs yalnız üstten padding aldığı için kapak butona bitişiyordu. */
.crumbs-lp .crumbs{padding-bottom:clamp(16px,1.8vw,24px)}

.olk-hero{--t:#57A39E;--deep:#17403D;--cream:#F6F1E4;
  background:var(--cream);text-align:center}
.olk-hero-copy{max-width:940px;margin:0 auto;
  padding:clamp(52px,7vw,112px) 22px clamp(56px,7vw,116px)}
.olk-badge{display:block;width:clamp(190px,21vw,300px);height:auto;
  margin:0 auto clamp(26px,3.4vw,44px)}
.olk-eyebrow{display:block;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#2E6C67;margin-bottom:18px}
.olk-eyebrow-inv{color:#8FC7C1}
.olk-h1{font-family:var(--read);font-weight:400;font-size:clamp(32px,5vw,64px);
  line-height:1.06;letter-spacing:-.018em;color:#12211F;margin:0 0 22px}
.olk-h1::before{content:'\201C'}
.olk-h1::after{content:'\201D'}
.olk-hero-sub{font-size:clamp(16.5px,1.7vw,21px);line-height:1.55;color:#3E5A57;
  max-width:44ch;margin:0 auto}

.olk-lede{background:var(--paper)}
/* Tek sürekli sütun. İki paragraf yan yana konduğunda büyük serif ile küçük
   sans birbiriyle çakışıyordu; aynı ailede, azalan puntoyla akmaları daha doğru. */
.olk-lede-in{padding:clamp(52px,6vw,96px) 22px clamp(48px,5vw,84px)}
.olk-rule{display:block;width:54px;height:2px;background:#57A39E;margin-bottom:clamp(26px,3vw,40px)}
.olk-lede p{margin:0}
/* Giriş serif ve dar ölçüde; devamı arayüz fontuyla ve daha geniş ölçüde. */
/* Aynı vurgu, gövde puntosunda: Rubik'in em kutusu daha yüksek olduğu için
   başlıktaki yüzdeler bandı satırın altına düşürüyordu. */
.olk-lede .hl{background:linear-gradient(180deg,transparent 50%,rgba(137,182,143,.45) 50%,
  rgba(137,182,143,.45) 84%,transparent 84%)}
.olk-lede p + p{margin-top:clamp(22px,2.4vw,32px);
  font-family:var(--sans);font-size:clamp(18px,1.8vw,25px);
  line-height:1.66;color:var(--ink-2);max-width:980px}
.olk-lead{font-family:var(--read);font-size:clamp(21px,2.6vw,31px);
  line-height:1.4;color:#16241F;letter-spacing:-.008em;max-width:680px}

.olk-band{position:relative;overflow:hidden;
  height:clamp(360px,50vw,600px);display:flex;align-items:flex-end}
.olk-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.olk-band::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(10,30,28,.72) 0%,rgba(10,30,28,.28) 42%,transparent 72%)}
.olk-band-in{position:relative;z-index:2;width:100%;padding:0 22px clamp(30px,4vw,56px)}
.olk-band-in p{margin:0;max-width:20ch;font-family:var(--read);font-style:italic;
  font-weight:400;font-size:clamp(24px,3.4vw,44px);line-height:1.2;color:#F6F1E4;
  text-shadow:0 2px 22px rgba(0,0,0,.28)}

.olk-manifesto{background:#17403D;color:#E6EFEC;
  display:grid;grid-template-columns:1.04fr .96fr;align-items:stretch}
.olk-manifesto-in{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,6vw,100px) clamp(22px,4vw,64px) clamp(60px,6vw,104px)
          max(22px,calc((100vw - var(--maxw)) / 2 + 22px))}
.olk-h2{font-family:var(--read);font-weight:400;font-size:clamp(24px,3.2vw,40px);
  line-height:1.18;letter-spacing:-.012em;color:#F6F1E4;margin:0 0 30px;max-width:20ch}
.olk-mp{margin:0 0 20px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.78;color:#BBD2CE;max-width:54ch}
.olk-mp:last-child{margin-bottom:0}
/* Kapanış bandı: üretim bölümünün altında, tam genişlikte ve ortalı */
.olk-imza-band{background:#17403D;text-align:center;
  padding:clamp(52px,6vw,88px) 0 clamp(48px,5.4vw,80px);margin-top:clamp(44px,5vw,76px)}
.olk-imza{margin:0 auto;font-family:var(--read);font-style:italic;
  font-size:clamp(19px,2.4vw,30px);line-height:1.45;color:#F6F1E4;max-width:38ch}
.olk-imza-badge{display:block;width:clamp(150px,15vw,210px);height:auto;
  margin:clamp(28px,3.2vw,44px) auto 0;opacity:.72}
/* Fotoğraf dikey (900x1200); blok alçak kaldığında kadraj kadını kesiyordu.
   Blok yükseltildi ve kadraj aşağıya çekildi. */
.olk-manifesto-fig{position:relative;margin:0;overflow:hidden;
  min-height:clamp(460px,44vw,680px)}
.olk-manifesto-fig img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:56% 74%}
.olk-manifesto-fig figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px 20px 14px;font-size:12px;letter-spacing:.04em;color:#fff;
  background:linear-gradient(0deg,rgba(6,20,19,.62),transparent)}

.olk-uretim{background:var(--paper)}
.olk-uretim-in{padding:clamp(56px,6vw,92px) 22px 0}
.olk-uretim-hd{max-width:640px;margin-bottom:clamp(32px,3.6vw,52px)}
.olk-h2-ink{color:#16241F;margin-bottom:14px}
.olk-uretim-note{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-3);max-width:52ch}
.olk-uretim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.olk-u{padding-top:20px;border-top:2px solid #57A39E}
.olk-u-no{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:#2E6C67;margin-bottom:12px}
.olk-u h3{font-family:var(--read);font-weight:400;font-size:clamp(19px,1.9vw,24px);
  line-height:1.24;letter-spacing:-.01em;color:#16241F;margin:0 0 12px}
.olk-u p{margin:0;font-size:15px;line-height:1.74;color:var(--ink-2)}

.olk-soon{border:1px dashed var(--line);border-radius:var(--r-l);background:var(--paper-2);
  padding:34px 26px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.olk-soon b{font-size:15.5px}
.olk-soon span{font-size:13.5px;color:var(--ink-3);max-width:56ch}

@media(max-width:1000px){
  .olk-uretim-grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:820px){
  .olk-manifesto{grid-template-columns:1fr}
  .olk-manifesto-in{padding:clamp(40px,7vw,60px) 22px 44px}
  .olk-manifesto-fig{min-height:clamp(300px,68vw,440px)}
  .olk-lead{font-size:20px}
}

/* Üreticinin kendi rozeti varsa en büyük kartta adın yerine o kullanılır */
.hcard-logo{display:block;width:clamp(132px,13vw,176px);height:auto;margin:2px 0 8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:640px){ .hcard-logo{width:118px} }

/* ---------- gerçek ürün fotoğrafı ---------- */
.pcard-photo{width:100%;height:100%;object-fit:cover;display:block}
.pdp-vis-photo{padding:14px;display:block;min-height:0;background-image:none}
.pdp-frame{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(165deg,#F3F6F2,#FFFFFF)}
/* Görsellerin bir kısmı ürün föyü; kırpmak bilgi kaybettirir, tamamı gösterilir.
   Geçişte iki görsel üst üste bindiği için konumlandırma mutlak. */
.pdp-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .36s cubic-bezier(.22,.61,.36,1)}
.pdp-frame>img.giren.sagdan{transform:translateX(100%)}
.pdp-frame>img.giren.soldan{transform:translateX(-100%)}
.pdp-frame>img.cikan.soldan{transform:translateX(-100%)}
.pdp-frame>img.cikan.sagdan{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){ .pdp-frame>img{transition:none} }
.pdp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--sh-1);transition:.14s}
.pdp-nav:hover{background:#fff;border-color:var(--ink-3)}
/* .pdp-vis svg{height:330px} kuralı şişe çizimi için; ok ikonlarını da büyütüyordu */
.pdp-vis .pdp-nav svg{height:17px;width:17px}
.pdp-prev{left:12px}
.pdp-next{right:12px}
.pdp-count{position:absolute;right:12px;bottom:12px;z-index:3;
  padding:4px 9px;border-radius:999px;background:rgba(17,21,17,.58);
  font-family:var(--mono);font-size:11.5px;color:#fff}
.pdp-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pdp-badges:empty{display:none}
.pdp-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pdp-thumb{width:58px;height:58px;padding:0;border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-s);overflow:hidden;background:#fff;opacity:.72;transition:.14s;cursor:pointer}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumb:hover{opacity:1}
.pdp-thumb.on{opacity:1;border-color:var(--olive);box-shadow:0 0 0 2px rgba(44,58,32,.35)}
@media(max-width:620px){ .pdp-thumb{width:48px;height:48px} }

/* ürün sayfası: karşılaştır / favori düğmeleri eşit genişlikte */
.pdp-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pdp-acts .chip{justify-content:center;padding:11px 12px}

/* ---------- telefon: ürün kartları iki sütun ----------
   Tek sütunda her kart ekranın tamamını kaplıyor, liste gereksiz uzuyordu. */
@media(max-width:560px){
  .grid-p{grid-template-columns:1fr 1fr;gap:10px}
  .pcard-img{aspect-ratio:1/1.08}
  .pcard-img svg{height:70%;margin-top:18px}   /* rozetlerin altına insin */
  .pcard-tags{top:8px;left:8px;gap:4px}
  .pcard-tags .badge{font-size:10px;padding:3px 7px}
  .pcard-b{padding:11px 12px 13px}
  .pcard-name{font-size:14.5px;margin-bottom:5px}
  .pcard-meta{font-size:11.5px;margin-bottom:9px}
  .pcard-prod{font-size:10.5px}
  .pcard-foot{flex-direction:column;align-items:stretch;gap:9px;padding-top:9px}
  .pcard-foot .chip{justify-content:center;padding:8px 10px}
  .price{font-size:17px}
  .price small{font-size:10.5px}
}

/* fiyatı paylaşılmamış ürün */
.price-yok{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.btn[disabled]{opacity:.55;cursor:not-allowed}


/* ============================================================
   "Neden Olivio?" bloğu: koyu zemin, kaydırınca kademeli beliren
   metin, sırayla vurgulanan sorular. Hareket azaltma tercihinde
   her şey hemen görünür (global kural animasyonları kapatır,
   .rv başlangıç durumu yalnız no-preference'ta uygulanır).
   ============================================================ */
.neden{position:relative;overflow:hidden;background:var(--dark);color:#F4F7EE;color-scheme:dark;
  padding:clamp(56px,6.5vw,84px) 0}
/* ---------- Neden Olivio: kaydırmayla ilerleyen akış (sol sabit, sağ panel değişir) ---------- */
.neden-akis{padding:0;overflow:visible}
/* Akışın durakları: tarayıcının kendi kaydırma yakalaması bunlara oturur.
   Sayfanın kalanında durak yok, proximity de zorlamadığı için normal kaydırma bozulmaz.
   Bkz. MDN CSS scroll snap — kaydırmayı ele geçirmeden (scrolljacking) adım hissi. */
.nd-durak{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.neden-yol{position:relative}
.neden-ekran{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--dark)}
.nd-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,88px);align-items:start;padding:72px 22px 0}
.nd-sol{max-width:46ch}
.nd-bas{grid-column:1/-1;margin-bottom:clamp(22px,3vw,38px)}
.nd-h2{font-size:clamp(21px,2.2vw,30px);line-height:1.3;font-weight:400;color:#DCE6D2;margin:14px 0 0;max-width:none;text-wrap:nowrap}
@media(max-width:1100px){ .nd-h2{text-wrap:balance} }
.nd-in .nd-liste{margin:0}   /* üst çizgi sağdaki panelin üst kenarıyla hizalı */
.nd-liste li{opacity:.45;transition:opacity .4s,color .4s}
.nd-liste li.on{opacity:1;color:#fff}
.nd-liste li.gecti{opacity:.7}
.nd-liste li::before{transform:scaleY(0);transition:transform .4s}
.nd-liste li.on::before{transform:scaleY(1)}
.nd-alt{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
  padding:0 22px 72px;margin-top:clamp(26px,3vw,44px)}
.nd-kapanis{font-size:clamp(19px,1.9vw,25px);line-height:1.45;color:#DCE6D2;margin:0;max-width:44ch}
.nd-alt .btn{align-self:center}
.nd-sag{position:relative;min-height:340px;display:grid;align-items:start}
/* Paneller arası geçiş: Material "fade through" — kayma yok, yalnız opaklık.
   Çıkan panel önce söner (200 ms), giren 90 ms sonra başlar; böylece iki panel üst üste
   binip bulanık görünmez ve aşağıdan sıçrama olmaz. Easing: M3 emphasized. */
.nd-panel{grid-area:1/1;align-self:start;background:rgba(244,247,238,.055);border:1px solid rgba(137,182,143,.22);border-radius:var(--r-xl);
  padding:26px 28px;opacity:0;visibility:hidden;will-change:opacity;
  transition:opacity 200ms cubic-bezier(.2,0,0,1),visibility 200ms allow-discrete}
.nd-panel.on{opacity:1;visibility:visible;transition-delay:90ms}
.nd-panel-ust{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.nd-panel-ust .eyebrow{color:var(--olive-2);margin:0}
.nd-satirlar{margin:0 0 20px}
.nd-sat{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid rgba(137,182,143,.16);font-size:14.5px}
.nd-sat:last-child{border-bottom:0}
.nd-sat dt{color:#A9B89C;flex:none}
.nd-sat dd{margin:0;text-align:right;color:#F4F7EE}
.nd-urun{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-l);background:rgba(244,247,238,.06);
  text-decoration:none;color:inherit;transition:background .16s}
.nd-urun:hover{background:rgba(244,247,238,.12)}
.nd-urun img{width:44px;height:52px;object-fit:contain;background:#fff;border-radius:6px;flex:none}
.nd-urun b{display:block;font-size:14px}
.nd-urun span span{font-size:12px;color:#A9B89C}
@media(max-width:900px){
  .nd-durak{display:none}   /* dar ekranda blok sabitlenmiyor, durak da olmamalı */
  .neden-ekran{min-height:auto}
  .nd-in{grid-template-columns:1fr;gap:26px;padding:56px 22px}
  .nd-sag{min-height:300px}
  .neden-yol{height:auto!important}
}
@media(prefers-reduced-motion:reduce){
  .neden-yol{height:auto!important}
  .neden-ekran{position:static}
  .nd-sag{display:flex;flex-direction:column;gap:14px;min-height:0}
  .nd-panel{grid-area:auto;opacity:1;visibility:visible;transition-duration:1ms;transition-delay:0ms}
  .nd-liste li{opacity:1}
}
.neden-glow{position:absolute;inset:-20%;pointer-events:none;
  background:
    radial-gradient(640px 420px at 18% 30%, rgba(137,182,143,.22) 0%, transparent 70%),
    radial-gradient(560px 380px at 84% 78%, rgba(176,138,34,.20) 0%, transparent 70%);
  animation:nedenGlow 18s ease-in-out infinite alternate}
@keyframes nedenGlow{from{transform:translate(0,0) rotate(0)}to{transform:translate(4%,-3%) rotate(6deg)}}
.neden-mark{position:absolute;right:-4vw;top:50%;width:clamp(260px,32vw,520px);aspect-ratio:1;
  color:rgba(137,182,143,.07);pointer-events:none;transform:translateY(-50%) rotate(-12deg);
  animation:nedenMark 40s linear infinite}
.neden-mark svg{width:100%;height:100%}
.neden-mark svg path{fill:rgba(137,182,143,.16)}
@keyframes nedenMark{from{transform:translateY(-50%) rotate(-12deg)}to{transform:translateY(-50%) rotate(348deg)}}
.neden-in{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(48px,8vw,128px);align-items:center}
.neden-eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#89B68F;padding-bottom:10px;margin-bottom:30px;border-bottom:1px solid rgba(137,182,143,.35)}
.neden-lead{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.4;
  font-size:clamp(21px,2.2vw,29px);max-width:30ch;text-wrap:pretty;margin:0}
.neden-p{font-size:17px;line-height:1.72;color:#BFCAB4;max-width:44ch;margin:0 0 26px}
/* Bu bloğun tamamı düz (sans) yazı tipiyle: başlıklar, sorular, paragraflar */
.neden,.neden *{font-family:var(--sans)}
.neden .neden-qn{font-family:var(--mono)}   /* yalnız sıra numaraları tabular */
.neden-q{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid #2E3A26;max-width:46ch}
.neden-q li{display:flex;align-items:baseline;gap:18px;padding:17px 0 17px 14px;border-bottom:1px solid #2E3A26;
  font-size:clamp(16px,1.35vw,18.5px);font-weight:400;letter-spacing:-.005em;color:#DDE5D2;
  position:relative;transition:color .5s}
.neden-q li::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .5s}
.neden-qn{font-family:var(--mono);font-size:11.5px;color:#7E8C72;letter-spacing:.06em;flex:none;width:22px}
/* sorular tek tek "yanar": her li 5 × 2.4 sn'lik döngüde kendi sırasında */
.neden.in .neden-q li{animation:nedenPulse 12s ease-in-out infinite;animation-delay:calc(var(--i) * 2.4s + 1.6s)}
.neden.in .neden-q li::before{animation:nedenBar 12s ease-in-out infinite;animation-delay:calc(var(--i) * 2.4s + 1.6s)}
@keyframes nedenPulse{0%,16%{color:#fff}20%,100%{color:#DDE5D2}}
@keyframes nedenBar{0%{transform:scaleY(0)}4%,16%{transform:scaleY(1)}20%,100%{transform:scaleY(0)}}
.neden-r{padding-top:0}
/* alt kat: alıntı solda, gövde metni ve çağrı sağda; ince bir çizgiyle üst kattan ayrılır */
.neden-b{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;
  margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(137,182,143,.22)}
.neden-quote{font-weight:500;letter-spacing:-.015em;line-height:1.34;
  font-size:clamp(24px,2.6vw,36px);margin:0;max-width:24ch;text-wrap:pretty}
.hl-gold{color:#E3C766;
  background:linear-gradient(180deg,transparent 78%,rgba(176,138,34,.55) 78%,rgba(176,138,34,.55) 94%,transparent 94%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.neden-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* kademeli beliriş */
@media(prefers-reduced-motion:no-preference){
  .neden .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .neden.in .rv{opacity:1;transform:none;transition-delay:var(--d,0s)}
  .neden.in .neden-q li{opacity:0;animation:nedenIn .6s cubic-bezier(.2,.7,.2,1) forwards,nedenPulse 12s ease-in-out infinite;
    animation-delay:calc(.45s + var(--i) * .12s),calc(var(--i) * 2.4s + 1.6s)}
  @keyframes nedenIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
}
@media(max-width:900px){
  .neden-in,.neden-b{grid-template-columns:1fr;gap:34px}
  .neden-r{padding-top:0}
  .neden-mark{display:none}
}

/* ============================================================
   Nasıl çalışır? sayfası: numaralı üç adım
   ============================================================ */
.nasil-step{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:40px 0 36px;border-top:1px solid var(--line)}
.nasil-step:first-of-type{margin-top:26px}
.nasil-no{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--olive);background:var(--olive-soft);
  border-radius:var(--r-s);padding:6px 0;text-align:center;height:max-content}
.nasil-step h2{font-size:clamp(21px,2.3vw,28px);margin-bottom:8px}
.nasil-step>div>p{color:var(--ink-2);max-width:62ch;margin-bottom:22px}
.nasil-ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.nasil-ev-i{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.nasil-ev-i p{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
@media(max-width:620px){ .nasil-step{grid-template-columns:1fr;gap:12px} .nasil-no{width:48px} }



/* ============================================================
   Pencere (modal) ve zeytin çeşidi künyesi
   ============================================================ */
.modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;pointer-events:none}
.modal .scrim{position:absolute;inset:0;background:rgba(17,21,17,.55);opacity:0;transition:opacity .25s}
.modal-box{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:34px 36px 30px;
  opacity:0;transform:translateY(14px) scale(.985);transition:opacity .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.modal.on{pointer-events:auto}
.modal.on .scrim{opacity:1}
.modal.on .modal-box{opacity:1;transform:none}
.modal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);font-size:14px;display:grid;place-items:center}
.modal-x:hover{border-color:var(--olive);color:var(--olive)}
body.modal-open{overflow:hidden}
@media(max-width:620px){ .modal{padding:0;align-items:end} .modal-box{border-radius:var(--r-xl) var(--r-xl) 0 0;padding:26px 20px 24px;max-height:92vh} }

.badge-btn{cursor:pointer;gap:5px;transition:.14s}
.badge-btn svg{width:12px;height:12px;opacity:.7}
.badge-btn:hover{border-color:var(--olive);color:var(--olive)}

.ck-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:2px solid var(--gold);margin-bottom:18px}
.ck-name{font-size:clamp(34px,5vw,50px);letter-spacing:-.035em;line-height:1;margin-top:8px}
.ck-alias{margin-top:6px;font-size:14px;color:var(--ink-2)}
.ck-alias em{font-family:var(--read);font-style:italic;color:var(--gold);font-size:17px}
.ck-mark{width:64px;height:64px;color:var(--olive);flex:none;margin-right:36px}
.ck-mark svg{width:100%;height:100%}
.ck-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.ck-meta div{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:11px 14px}
.ck-meta b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.ck-meta span{font-size:14px}
.ck-sec{padding:18px 0;border-top:1px solid var(--line)}
.ck-sec h3{font-size:18px;margin-bottom:12px}
.ck-sec p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.ck-prof{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:center}
.ck-row{display:grid;grid-template-columns:96px auto 1fr;gap:12px;align-items:center;padding:6px 0;font-size:14px}
.ck-row small{font-size:11.5px}
.ck-char{border-left:1px solid var(--line);padding-left:22px}
.ck-char b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.ck-char p{font-family:var(--display);font-size:17px;color:var(--ink);margin:0}
.ck-use{display:flex;gap:8px;flex-wrap:wrap}
.ck-two{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.ck-quote{margin:0;padding:18px 22px;background:var(--olive-soft);border-radius:var(--r-m);
  font-family:var(--read);font-style:italic;font-size:22px;color:var(--olive);line-height:1.3}
.ck-quote .eyebrow{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px}
.ck-note{margin:14px 0 0;font-size:12px;color:var(--ink-3);display:flex;gap:6px;align-items:flex-start}
.ck-note svg{flex:none;margin-top:2px}
@media(max-width:620px){
  .ck-meta,.ck-prof,.ck-two{grid-template-columns:1fr}
  .ck-char{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
  .ck-mark{display:none}
}

/* Rehber'deki çeşit kartları */
.ck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ck-card{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:6px;transition:.16s}
.ck-card:hover{border-color:var(--olive-2);box-shadow:var(--sh-2)}
.ck-card-tag{font-family:var(--read);font-style:italic;font-size:13.5px;color:var(--gold)}
.ck-card b{font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.08}
.ck-card small{font-size:12.5px;color:var(--ink-3);margin-top:-4px}
.ck-card-prof{display:flex;flex-direction:column;gap:5px;margin:10px 0 12px;font-size:11.5px;color:var(--ink-3)}
.ck-card-prof>span{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ck-card-prof .dots i{width:8px;height:8px}

/* ============================================================
   Hesap, sipariş takibi, üretici paneli (API sürümü), yasal sayfalar
   ============================================================ */
.icobtn.on{border-color:var(--olive);color:var(--olive);background:var(--olive-soft)}
.inp{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--paper);font-size:13px}
.count-in{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--clay);color:#fff;font-size:10.5px;font-weight:700;vertical-align:middle;margin-left:4px}
.porder{padding:16px 0;border-top:1px solid var(--line-2)}
.porder-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:10px}
@media(max-width:720px){ .porder-grid{grid-template-columns:1fr} }
.pf-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){ .pf-grid-3{grid-template-columns:1fr} }
.ftr-legal{display:flex;gap:4px 22px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid #2E3A26}
.ftr-legal a{display:inline;font-size:12.5px;color:#98A38C;padding:2px 0}
.ftr-legal a:hover{color:#fff}
.article h2{font-size:19px;margin:22px 0 8px}

/* ============================================================
   Paiga Olea landing: siyah zemin + etiketin asit yeşili, kalın başlıklar,
   döngülü videolar. Diğer üreticilerden bilerek farklı bir ses.
   ============================================================ */
:root{ --pg-acid:#D9F24B; --pg-ink:#0E0F0C; --pg-paper:#F5F6EE; }
.pg-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--pg-acid);margin-bottom:14px}
.pg-eyebrow.ink{color:var(--olive)}
.pg-h1{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.98;font-size:clamp(40px,7vw,96px);color:#fff;margin:0}
.pg-h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-size:clamp(28px,3.6vw,48px);margin:0 0 22px}
.pg-wordmark{display:block;width:clamp(180px,22vw,300px);height:auto}
.pg-wordmark.sm{width:150px;opacity:.9}

/* hero: video tam ekran, alttan siyah geçiş, metin sol altta */
.pg-hero{position:relative;overflow:hidden;background:var(--pg-ink);color:#fff;min-height:clamp(520px,82vh,860px);display:flex;align-items:flex-end}
.pg-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.pg-hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(14,15,12,.45) 0%, rgba(14,15,12,.05) 35%, rgba(14,15,12,.55) 70%, rgba(14,15,12,.92) 100%)}
.pg-hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:120px 22px 64px}
.pg-hero .pg-wordmark{margin-bottom:26px}
.pg-hero-sub{margin:20px 0 0;font-size:clamp(16px,1.4vw,20px);color:rgba(255,255,255,.82);max-width:40ch}

/* merhaba: metin + kare ekip fotoğrafı */
.pg-merhaba{background:var(--pg-paper);padding:clamp(60px,8vw,110px) 0}
.pg-merhaba-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,90px);align-items:center}
.pg-merhaba-txt p{font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:52ch}
.pg-merhaba-txt .pg-lead{font-family:var(--read);font-size:clamp(20px,2vw,26px);line-height:1.4;color:var(--ink)}
.pg-fig{margin:0;position:relative;overflow:hidden;border-radius:22px;background:#e8e9df}
.pg-fig img{display:block;width:100%;height:100%;object-fit:cover}
.pg-fig figcaption{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:rgba(14,15,12,.72);color:#fff;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.pg-fig-ekip{aspect-ratio:1;transform:rotate(1.5deg)}

/* hikâye: siyah blok, uzun metin, sonda asit yeşili vurgu */
.pg-hikaye{background:var(--pg-ink);color:#E9EADF;padding:clamp(70px,9vw,120px) 0}
.pg-hikaye-in{max-width:760px}
.pg-hikaye p{font-family:var(--read);font-size:clamp(19px,1.9vw,25px);line-height:1.5;margin:0 0 26px}
.pg-hikaye-son{color:#fff;font-weight:500}
.pg-hikaye-son em{display:block;margin-top:18px;font-style:normal;color:var(--pg-acid);font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(24px,2.6vw,36px)}

/* ekip videosu: ultra geniş şerit (1920x324) */
.pg-band{background:var(--pg-ink);line-height:0}
.pg-band-video{display:block;width:100%;height:auto;aspect-ratio:1920/324;object-fit:cover}

/* üretim: fotoğraf + numaralı adımlar */
.pg-uretim{background:var(--paper);padding:clamp(60px,8vw,110px) 0}
.pg-uretim-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:38px}
.pg-uretim-hd .pg-h2{max-width:16ch;margin:0}
.pg-uretim-note{margin:0;font-size:12.5px;color:var(--ink-3)}
.pg-uretim-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:start}
.pg-fig-hasat{aspect-ratio:1;transform:rotate(-1.5deg);position:sticky;top:96px}
.pg-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pg-steps li{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.pg-steps li:first-child{border-top:0;padding-top:0}
.pg-step-no{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.04em;line-height:1;color:var(--pg-ink);
  background:var(--pg-acid);border-radius:12px;width:64px;height:64px;display:grid;place-items:center}
.pg-steps h3{font-size:22px;font-weight:700;letter-spacing:-.025em;margin-bottom:8px}
.pg-steps p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-2)}

/* kapanış */
.pg-kapanis{background:var(--pg-acid);color:var(--pg-ink);padding:clamp(60px,8vw,100px) 0}
.pg-kapanis-in{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.pg-kapanis-q{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-size:clamp(30px,4.4vw,60px);max-width:16ch}
.pg-btn{background:var(--pg-ink);color:#fff}
.pg-btn:hover{background:#000}
.pg-kapanis .pg-wordmark{filter:invert(1);opacity:.85}

@media(max-width:900px){
  .pg-merhaba-in,.pg-uretim-grid{grid-template-columns:1fr}
  .pg-fig-hasat{position:static}
  .pg-hero{min-height:70vh}
  .pg-hero-in{padding:100px 22px 44px}
}
@media(prefers-reduced-motion:reduce){ .pg-fig-ekip,.pg-fig-hasat{transform:none} }

/* yazı künyesi: yazar ve tarih */
.byline{display:flex;align-items:center;gap:12px;margin:18px 0 26px;padding:12px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-size:13px}
.byline .uav{color:var(--olive);display:grid;place-items:center}
.byline .uav svg{width:20px;height:20px}

/* ürün sayfası: üreticinin kendi açıklaması, açılır blok */
.pdp-anlatim{margin:14px 0 4px;border:1px solid var(--line);border-radius:var(--r-m);padding:0 16px;background:var(--paper-2)}
.pdp-anlatim summary{cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:600;color:var(--olive);list-style:none;display:flex;align-items:center;gap:8px}
.pdp-anlatim summary::before{content:'+';font-family:var(--mono);width:16px;color:var(--ink-3)}
.pdp-anlatim[open] summary::before{content:'−'}
.pdp-anlatim p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 12px}
.pdp-anlatim[open]{padding-bottom:4px}

/* set/sabun: etiketli boy düğmesi (uzun ad), içerik listesi */
.size.size-lbl{max-width:100%}
.size.size-lbl b{font-size:13.5px;display:block;white-space:normal;line-height:1.35}
.icerik-list{margin:6px 0 4px 18px;padding:0;color:var(--ink-2);font-size:15px;line-height:1.7}
.icerik-list li{margin:0 0 4px}
.icerik-list a{color:var(--olive);font-weight:600}

/* hesap: giriş <-> kayıt geçiş satırı */
.hesap-gecis{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-2)}
.hesap-gecis .link{font-weight:600;color:var(--olive);text-decoration:underline;text-underline-offset:3px}

/* hesap: bilgi satırları */
.bilgi-satir{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.bilgi-satir:last-child{border-bottom:0}
.bilgi-l{color:var(--ink-3);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.bilgi-v{color:var(--ink);overflow-wrap:anywhere}
.bilgi-satir .link{font-size:13px;color:var(--olive);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Tüm select'ler tek görünüm: girdi kutusuyla aynı çerçeve, sağda ince ok; tarayıcı varsayılanı kapalı */
select.sel,.field select{
  -webkit-appearance:none;appearance:none;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
  border-radius:10px;padding:9px 36px 9px 13px;font:inherit;font-size:13.5px;line-height:1.3;cursor:pointer;min-height:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555B52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center
}
.field select{font-size:14.5px;padding-top:10px;padding-bottom:10px}
select.sel:hover,.field select:hover{border-color:var(--ink-3)}
select.sel:focus,.field select:focus{outline:0;border-color:var(--olive);box-shadow:0 0 0 3px rgba(76,98,56,.12)}
select.sel.sm{padding:6px 30px 6px 10px;font-size:12.5px;min-height:32px;background-position:right 9px center}

/* ============ Üretici sayfası, şablon 2 (/<handle>-2) ============ */
.u2-hero{position:relative;min-height:clamp(380px,46vw,520px);display:flex;align-items:flex-end;overflow:hidden;background:#1F2A17;color:#F4F7EE;margin-top:-1px}
.u2-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.u2-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,28,14,.86) 0%,rgba(20,28,14,.62) 42%,rgba(20,28,14,.12) 75%,rgba(20,28,14,0) 100%),linear-gradient(0deg,rgba(20,28,14,.5),rgba(20,28,14,0) 45%)}
.u2-hero-in{position:relative;padding:34px 22px 40px;max-width:1160px;width:100%;margin:0 auto}
.u2-crumbs{font-size:12.5px;color:rgba(244,247,238,.7);margin-bottom:22px}
.u2-crumbs a{color:rgba(244,247,238,.85)}
.u2-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#C9D8B6;margin-bottom:10px}
.u2-h1{font-size:clamp(34px,5vw,56px);line-height:1.02;letter-spacing:-.03em;margin:0 0 10px;color:#fff}
.u2-tagline{font-size:clamp(17px,2vw,22px);font-weight:600;margin:0 0 10px;color:#F4F7EE;letter-spacing:-.01em}
.u2-lead{max-width:52ch;font-size:15px;line-height:1.6;color:rgba(244,247,238,.85);margin:0 0 20px}
.u2-cta{display:flex;gap:10px;flex-wrap:wrap}
.btn.ghost.light{border-color:rgba(244,247,238,.5);color:#F4F7EE;background:transparent}
.btn.ghost.light:hover{background:rgba(244,247,238,.12)}
.u2-band{background:var(--paper-2);border-bottom:1px solid var(--line)}
.u2-band-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;padding:16px 22px}
.u2-band-item{display:flex;gap:12px;align-items:center;padding:10px 16px 10px 0;border-right:1px solid var(--line);margin-right:16px}
.u2-band-item:last-child{border-right:0}
.u2-band-item svg{width:30px;height:30px;color:var(--olive);flex:none}
.u2-band-item b{display:block;font-size:14px;letter-spacing:-.01em}
.u2-band-item span{font-size:12.5px;color:var(--ink-3)}
.u2-sec{padding:56px 0}
.u2-h2{font-size:clamp(26px,3.2vw,38px);line-height:1.1;letter-spacing:-.025em;margin:6px 0 16px}
.u2-hikaye{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.u2-serif{font-family:var(--display);font-size:17.5px;line-height:1.66;letter-spacing:.014em;color:var(--ink-2);margin:0 0 14px}
.u2-hand{font-family:'Caveat',cursive;font-size:24px;color:var(--ink-2);margin:12px 0 0;line-height:1.25}
.u2-hand-lg{font-size:27px;color:var(--olive);text-align:right;margin-top:14px;padding-right:6px}
.u2-hikaye-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l);display:block;box-shadow:var(--sh-2)}
.u2-nerede{padding-bottom:64px}
.u2-map-wrap{position:relative;margin-top:8px;background:linear-gradient(180deg,#F7F8F3,#EEF1E8);border:1px solid var(--line);border-radius:var(--r-l);padding:28px 24px 18px;overflow:hidden}
.u2-map{width:100%;min-height:200px}
.tr-svg{display:block;width:100%;height:auto}
.tr-svg path{fill:#DCE3D2;stroke:#FAFBF7;stroke-width:1.1;transition:fill .3s}
.tr-svg path:hover{fill:#CBD6BC}
.tr-svg path.il-on{fill:#89B68F}
.tr-nokta{fill:var(--olive);stroke:#fff;stroke-width:2.5}
.tr-nabiz{fill:none;stroke:var(--olive);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:trNabiz 1.8s ease-out infinite}
@keyframes trNabiz{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
/* kart pinden uzak köşede: batıdaki üreticide sağ alt, doğudaki (boylam > 35) üreticide sol alt */
.u2-map-card.sol{right:auto;left:24px}
.u2-map-card{position:absolute;right:24px;bottom:22px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 16px;box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:2px;min-width:180px}
.u2-map-card b{font-size:17px;letter-spacing:-.015em}
.u2-map-card span:last-child{font-size:13px;color:var(--ink-3)}
@media(prefers-reduced-motion:reduce){ .tr-nabiz{animation:none} }
@media(max-width:640px){ .u2-map-card{position:static;margin-top:12px;box-shadow:none} .u2-map-wrap{padding:16px 12px 14px} }
@media(max-width:880px){
  .u2-hikaye{grid-template-columns:1fr;gap:26px}
  .u2-band-item{border-right:0;margin-right:0;padding:8px 0}
  .u2-hero{min-height:420px}
}

/* şablon 2 künyesi */
.k2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.k2-kart{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
.k2-kart-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.k2-kart-hd b{font-size:15px;letter-spacing:-.01em}
.k2-ic{width:34px;height:34px;border-radius:50%;background:var(--olive-soft);color:var(--olive);display:grid;place-items:center;flex:none}
.k2-ic svg{width:18px;height:18px}
.k2-kart dl{margin:0;display:flex;flex-direction:column;gap:9px}
.k2-kart dl>div{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:13px;line-height:1.45}
.k2-kart dt{color:var(--ink-3)}
.k2-kart dd{margin:0;color:var(--ink);font-weight:500}
.k2-yok{color:var(--ink-3);font-weight:400}
.k2-alt{display:grid;grid-template-columns:3fr 1fr;gap:14px;margin-top:14px}
.k2-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 10px}
.k2-mini{display:flex;gap:10px;align-items:center;padding:4px 12px;border-right:1px solid var(--line-2)}
.k2-mini:last-child{border-right:0}
.k2-mini b{display:block;font-size:13px}
.k2-mini span:last-child{font-size:12.5px;color:var(--ink-3)}
.k2-mini span.k2-yok{color:var(--ink-3)}
.k2-not{display:flex;gap:10px;align-items:flex-start;background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--r-m);padding:14px 16px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.k2-not svg{flex:none;color:var(--olive);margin-top:2px}
.k2-not a{color:var(--olive);font-weight:600}
.k2-modal{max-height:78vh;overflow:auto;padding-right:4px}
@media(max-width:980px){ .k2-grid{grid-template-columns:repeat(2,1fr)} .k2-alt{grid-template-columns:1fr} .k2-minis{grid-template-columns:repeat(2,1fr)} .k2-mini{border-right:0;padding:8px 6px} }
@media(max-width:560px){ .k2-grid{grid-template-columns:1fr} .k2-minis{grid-template-columns:1fr} }

/* şablon 2: ürün şeridi, aynı anda 4 kart, oklarla kaydırma */
.u2-serit{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.u2-serit::-webkit-scrollbar{display:none}
.u2-serit>.pcard{flex:0 0 calc((100% - 48px) / 4);scroll-snap-align:start}
.u2-ok{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.14s}
.u2-ok:hover{border-color:var(--olive);color:var(--olive)}
.u2-ok svg{width:16px;height:16px}
@media(max-width:1000px){ .u2-serit>.pcard{flex-basis:calc((100% - 32px) / 3)} }
@media(max-width:720px){ .u2-serit>.pcard{flex-basis:calc((100% - 16px) / 2)} }
@media(max-width:480px){ .u2-serit>.pcard{flex-basis:84%} }

/* hero düğmeleri: hedef bölümler sabit başlığın altında kalmasın */
.u2-hedef{scroll-margin-top:34px}   /* bölümün 44px üst boşluğu var; başlık sabit çubuğun hemen altına gelir */

/* şablon 2: Üretimimiz. Koyu zemin, adımlar arasında soldan sağa dolan çizgi, kartlar sırayla belirir,
   fotoğraflar görünür olunca yavaşça yakınlaşır (Ken Burns), üzerine gelince canlanır. */
.u2-uretim{background:#1F2A17;color:#F4F7EE;padding:44px 0 52px;position:relative;overflow:hidden}
.u2-uretim>.wrap{max-width:1380px}   /* daha geniş yayılır, böylece boy kısalır */
.u2-uretim::before{content:'';position:absolute;inset:-40% -10% auto auto;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(closest-side,rgba(137,182,143,.16),transparent 70%);pointer-events:none}
.u2-uretim-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.u2-uretim .u2-eyebrow{color:#89B68F}
.u2-uretim-h2{font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.03em;margin:0;color:#fff}
.u2-akis{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:32px}
.u2-akis-cizgi{position:absolute;left:22px;right:22px;top:21px;height:2px;background:rgba(244,247,238,.14);overflow:hidden}
.u2-akis-cizgi i{display:block;height:100%;width:0;background:linear-gradient(90deg,#89B68F,#C9D8B6);transition:width 2.2s cubic-bezier(.2,.7,.2,1) .3s}
.u2-uretim.in .u2-akis-cizgi i{width:100%}
.u2-adim{position:relative;padding-top:0}
.u2-adim-no{position:relative;z-index:1;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#1F2A17;border:2px solid #89B68F;color:#C9D8B6;font-family:var(--mono);font-size:13px;font-weight:600;margin-bottom:14px;
  transition:background .3s,color .3s,transform .3s}
.u2-adim:hover .u2-adim-no{background:#89B68F;color:#1F2A17;transform:scale(1.08)}
.u2-adim-fig{margin:0 0 14px;border-radius:var(--r-m);overflow:hidden;aspect-ratio:2/1;background:#2C3A20;box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.u2-adim-fig img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);transition:transform 6s ease-out}
.u2-uretim.in .u2-adim-fig img{transform:scale(1)}
.u2-adim:hover .u2-adim-fig img{transform:scale(1.06);transition-duration:1.2s}
.u2-adim h3{font-size:18px;letter-spacing:-.015em;margin:0 0 6px;color:#fff}
.u2-adim p{font-size:14px;line-height:1.6;color:#C6CEBC;margin:0}
.u2-adim.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.u2-uretim.in .u2-adim.rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .u2-adim.rv{opacity:1;transform:none} .u2-adim-fig img{transform:none} .u2-akis-cizgi i{width:100%;transition:none} }
@media(max-width:880px){
  .u2-akis{grid-template-columns:1fr;gap:34px}
  .u2-akis-cizgi{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .u2-akis-cizgi i{width:2px;height:0;transition:height 2.2s cubic-bezier(.2,.7,.2,1) .3s}
  .u2-uretim.in .u2-akis-cizgi i{width:2px;height:100%}
  .u2-adim{padding-left:64px}
  .u2-adim-no{position:absolute;left:0;top:0;margin:0}
}

/* şablon 2: bölüm ayracı (zeytin dalı) */
.u2-ayrac{display:flex;align-items:center;justify-content:center;gap:22px;max-width:820px;margin:0 auto 26px;padding:0 22px;color:var(--olive)}
.u2-ayrac-cizgi{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--olive-2) 60%,var(--olive));transform:scaleX(0);transform-origin:right;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .1s}
.u2-ayrac-cizgi.sag{background:linear-gradient(90deg,var(--olive),var(--olive-2) 40%,transparent);transform-origin:left}
.u2-ayrac.in .u2-ayrac-cizgi{transform:scaleX(1)}
.u2-ayrac-logo{width:46px;height:47px;flex:none;display:block;color:var(--olive)}   /* yalnız yapraklı O, tek renk; sabit durur, yalnız çizgiler açılır */
@media(prefers-reduced-motion:reduce){ .u2-ayrac-cizgi{transform:none} }

/* şablon 2: Nerede? harita solda, arazi ve iklim sağda; hero düğmeleri eşit genişlik */
.u2-cta .btn{min-width:148px;justify-content:center}
.u2-nerede-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:18px;align-items:stretch}
.u2-nerede .u2-map-wrap{margin-top:0;display:flex;flex-direction:column;justify-content:center}
.u2-cog{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;display:flex;flex-direction:column}
.u2-cog-hd{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.u2-cog-hd .eyebrow{margin:0}
.u2-cog-hd b{display:block;font-size:19px;letter-spacing:-.015em;margin-top:2px}
.u2-cog dl{margin:0;display:flex;flex-direction:column;gap:10px;flex:1}
.u2-cog dl>div{display:grid;grid-template-columns:118px 1fr;gap:10px;font-size:13.5px;line-height:1.45;align-items:start}
.u2-cog dt{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.u2-cog dt svg{width:16px;height:16px;color:var(--olive);flex:none}
.u2-cog dd{margin:0;color:var(--ink)}
.u2-cog-kaynak{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
@media(max-width:900px){ .u2-nerede-grid{grid-template-columns:1fr} .u2-cog dl>div{grid-template-columns:104px 1fr} }

/* üretim adımları: standart etiket, fotoğrafsız adımda ikon bloğu, künyeden türetilmiş adım daha sakin */
.u2-adim-etiket{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#89B68F;font-weight:700;margin-bottom:4px}
/* fotoğrafsız adım: büyük boş kart yerine etiketin yanında küçük ikon; kart yüksekliği fotoğraflı komşularla hizalanır */
.u2-adim-etiket{display:flex;align-items:center;gap:6px}
.u2-adim-mini{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(137,182,143,.16)}
.u2-adim-mini svg{width:13px;height:13px;color:#89B68F}
.u2-adim:not(:has(.u2-adim-fig)){padding-top:0}
.u2-adim.turetilmis p{color:#A9B39E}
@media(max-width:1100px) and (min-width:881px){ .u2-akis{grid-template-columns:repeat(2,1fr)} .u2-akis-cizgi{display:none} }   /* tablet: 2 sütun; telefon 880 altı tek sütun (yukarıdaki kural) */

.kfact .miss,.miss{color:var(--ink-3)}

/* hero alıntı satırı (Olikarnas: Heredot) */
.u2-alinti{font-family:var(--display);font-style:italic;font-size:clamp(19px,2.2vw,25px);color:#F4F7EE;margin:0 0 10px;letter-spacing:-.01em}
.u2-alinti span{display:inline-block;margin-left:12px;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#C9D8B6;vertical-align:middle}

/* üretici sayfası: tükenen ürünler satırı */
.u2-tukenen{margin-top:22px;padding:16px 18px;border:1px dashed var(--line);border-radius:var(--r-m);background:var(--paper-2)}
.u2-tukenen-hd{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.u2-tukenen-list{display:flex;gap:10px;flex-wrap:wrap}
.u2-tukenen-item{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:13px}
.u2-tukenen-item img{width:34px;height:34px;object-fit:cover;border-radius:50%;filter:grayscale(.4);opacity:.85}
.u2-tukenen-item span{display:flex;flex-direction:column;line-height:1.2}
.u2-tukenen-item small{color:var(--ink-3);font-size:11.5px}
.u2-tukenen-item:hover{border-color:var(--olive)}
/* belge şeridi */
.belge-serit{margin-top:34px}
.belge-hd{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px;font-size:13px}
.belge-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.belge-kart{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);padding:8px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px;transition:.14s}
.belge-kart:hover{border-color:var(--olive);box-shadow:var(--sh-2)}
.belge-kart img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:6px;display:block;background:#f2f2ee}
.belge-kart span{font-size:12px;color:var(--ink-2);line-height:1.3}
.belge-buyuk img{max-width:min(90vw,900px);max-height:78vh;display:block;margin:0 auto;border-radius:8px}
.belge-buyuk p{text-align:center;margin:10px 0 0;font-size:13px}

/* panel "Sayfam": karakter sayacı, adım blokları, fotoğraf kutuları */
.sayac{float:right;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3);font-size:11px}
.sayac.dolu{color:var(--clay)}
.adim-blok{border-top:1px solid var(--line-2);padding-top:12px;margin-top:6px}
.foto-kutu{display:flex;gap:14px;align-items:center;margin:4px 0 12px}
.foto-on{width:140px;height:80px;border-radius:8px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;flex:none;font-size:12px}
.foto-on img{width:100%;height:100%;object-fit:cover;display:block}

/* fotoğrafsız üretici: hero'da koyu zemin + soluk büyük logo; hikâyede logo plakası */
.u2-hero-logo{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,#33452a,#1F2A17 70%);display:flex;align-items:center;justify-content:flex-end;padding-right:8%}
.u2-hero-logo img{width:min(40vw,460px);max-height:60%;object-fit:contain;opacity:.22}
.u2-hikaye-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:260px;padding:20px 8px}
.u2-hikaye-logo-img{width:min(70%,380px);height:auto;object-fit:contain}
.u2-hand-orta{font-size:26px;color:var(--olive);text-align:center;margin:0;max-width:26ch;line-height:1.3}

/* ============================================================
   SOHBET ASİSTANI: sağ altta yapışkan düğme + pencere (#sohbet-root, #app dışında)
   ============================================================ */
.sohbet-fab{position:fixed;right:22px;top:50%;margin-top:-30px;z-index:90;display:grid;place-items:center;
  width:60px;height:60px;padding:0;border-radius:50%;background:var(--dark);color:var(--ink-inv);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -16px rgba(17,21,17,.7);cursor:pointer;
  animation:sohbet-sal 3.2s ease-in-out infinite;transition:transform .2s ease,background .16s}
.sohbet-fab:hover{transform:scale(1.06);background:#243119;animation-play-state:paused}
.sohbet-fab.acik{animation:none}
.sohbet-fab-ic{display:grid;place-items:center;color:var(--ink-inv)}
.sohbet-fab-ic svg{width:28px;height:28px}
/* iki halka, art arda: dıştaki büyük dalga, içteki kısa */
.sohbet-halka,.sohbet-halka::after{position:absolute;inset:-2px;border-radius:50%;border:2.5px solid var(--olive-2);opacity:0;pointer-events:none;
  animation:sohbet-halka 2.8s ease-out infinite;content:""}
.sohbet-halka::after{animation-delay:1.1s;border-color:#C9DDCB}
.sohbet-fab.acik .sohbet-halka{display:none}
@keyframes sohbet-sal{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sohbet-halka{0%{opacity:.95;transform:scale(1)}80%{opacity:0;transform:scale(2.3)}100%{opacity:0;transform:scale(2.3)}}
@media(max-width:620px){
  .sohbet-fab{right:12px;width:52px;height:52px;margin-top:-26px}
}

.sohbet-pencere{position:fixed;right:96px;top:50%;z-index:95;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100vh - 48px));
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);
  overflow:hidden;opacity:0;transform:translateY(-50%) translateX(10px) scale(.98);transform-origin:right center;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.sohbet-pencere.acik{opacity:1;transform:translateY(-50%);pointer-events:auto}
.sohbet-bas{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.sohbet-bas b{display:block;font-size:14.5px}
.sohbet-bas small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.sohbet-x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;font-size:13px}
.sohbet-x:hover{background:var(--shade)}
.sohbet-akis{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.sohbet-m{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.sohbet-m p{margin:0 0 6px}.sohbet-m p:last-child{margin:0}
.sohbet-m ul,.sohbet-m ol{margin:4px 0 6px 18px;padding:0}.sohbet-m li{margin:2px 0}
.sohbet-m table{font-size:12.5px;margin:6px 0;border-collapse:collapse}.sohbet-m td,.sohbet-m th{border:1px solid var(--line);padding:4px 7px}
.sohbet-m.a{align-self:flex-start;background:var(--shade);color:var(--ink);border-bottom-left-radius:4px}
.sohbet-m.u{align-self:flex-end;background:var(--olive);color:#fff;border-bottom-right-radius:4px}
.sohbet-m.sohbet-hata{background:var(--clay-soft);color:var(--clay)}
.sohbet-kaynak{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(17,21,17,.08)}
.sohbet-kaynak a{font-size:12px;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--olive);text-decoration:none;font-weight:500}
.sohbet-kaynak a:hover{border-color:var(--olive-2);background:var(--olive-soft)}
.sohbet-oneri{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.sohbet-oneri .chip{font-size:12.5px}
.sohbet-yaziyor{display:flex;gap:5px;padding:12px 14px}
.sohbet-yaziyor span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:sohbet-nokta 1.2s infinite ease-in-out}
.sohbet-yaziyor span:nth-child(2){animation-delay:.15s}.sohbet-yaziyor span:nth-child(3){animation-delay:.3s}
@keyframes sohbet-nokta{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sohbet-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#fff}
.sohbet-form input{flex:1;min-width:0;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:14px;background:var(--paper-2)}
.sohbet-form input:focus{outline:none;border-color:var(--olive-2);background:#fff}
.sohbet-gonder{width:42px;height:42px;border-radius:50%;border:0;background:var(--olive);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.sohbet-gonder:disabled{opacity:.5;cursor:default}
.sohbet-not{margin:0;padding:0 14px 10px;font-size:11px;color:var(--ink-3);background:#fff;line-height:1.4}
@media(max-width:620px){
  .sohbet-pencere{right:0;left:0;top:auto;bottom:0;width:100%;height:min(82vh,640px);border-radius:16px 16px 0 0;transform-origin:bottom center;transform:translateY(12px)}
  .sohbet-pencere.acik{transform:none}
  .sohbet-pencere.acik ~ .sohbet-fab,body:has(.sohbet-pencere.acik) .sohbet-fab{display:none}
}
@media(prefers-reduced-motion:reduce){ .sohbet-fab,.sohbet-halka{animation:none} }

/* ============================================================
   BACKLOG PANOSU (/backlog)
   ============================================================ */
.bl-wrap{padding-bottom:40px}
.bl-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.bl-kolon{background:var(--shade);border-radius:12px;padding:10px;min-height:240px}
.bl-kolon-bas{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;font-size:13.5px}
.bl-liste{display:flex;flex-direction:column;gap:8px;min-height:120px}
/* sürüklerken: kartın düşeceği yer gölge kutu; her kolonun üstünde ekran boyu kesikli bırakma bölgesi */
.bl-golge{border:2px dashed var(--olive-2);border-radius:10px;background:rgba(137,182,143,.12);min-height:44px;flex:none}
.bl-bolge{position:fixed;bottom:12px;z-index:55;border:2px dashed rgba(137,182,143,.7);border-radius:12px;background:rgba(137,182,143,.06);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;pointer-events:auto;transition:background .12s,border-color .12s}
.bl-bolge span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);background:#fff;padding:6px 12px;border-radius:999px;box-shadow:var(--sh-1)}
.bl-bolge.on{background:rgba(137,182,143,.16);border-color:var(--olive)}
.bl-bolge.kesik{border-top:0;border-radius:0 0 12px 12px}
body.bl-surukleme .bl-kart{transition:none}
body.bl-surukleme .bl-kart:hover{transform:none;box-shadow:var(--sh-1)}
.bl-bos{padding:22px;text-align:center;font-size:12.5px;color:var(--ink-3);border:1px dashed var(--line);border-radius:10px}
.bl-kart{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:10px 12px;cursor:grab;
  box-shadow:var(--sh-1);transition:box-shadow .16s,transform .16s}
.bl-kart:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.bl-kart.tasiniyor{opacity:.3;cursor:grabbing}
.bl-kart.menu-acik{position:relative;z-index:30;transform:none}   /* açık menü alttaki kartların üstünde kalsın */
.bl-bekle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:46vh;font-size:14px}
.donen{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--olive);animation:donen .8s linear infinite}
@keyframes donen{to{transform:rotate(360deg)}}
.bl-atas{font-size:11.5px;color:var(--ink-3)}
.bl-dosyalar{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.bl-dosya{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--shade);border-radius:8px;font-size:13.5px}
.bl-dosya a{color:var(--olive);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.bl-dosya a:hover{text-decoration:underline}
.bl-dosya-sil{margin-left:auto;border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:6px}
.bl-dosya-sil:hover{background:#fff;color:var(--clay)}
.bl-yukle{cursor:pointer}
.bl-kart b{display:block;font-size:14px;line-height:1.35;margin:4px 0 8px;font-weight:600}
.bl-kart{border-left-color:var(--olive-2)}
.bl-kart.soru{background:#FFFBEF}
.bl-kart-ust{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.bl-id{font-family:ui-monospace,Menlo,monospace;font-weight:600}
.bl-menu-kap{position:relative}
.bl-menu-btn{border:0;background:transparent;color:var(--ink-3);font-size:18px;line-height:1;padding:0 4px;border-radius:6px;cursor:pointer;letter-spacing:1px}
.bl-menu-btn:hover,.bl-menu-btn.on{background:var(--shade);color:var(--ink)}
.bl-menu{position:absolute;right:0;top:24px;z-index:20;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-2);padding:6px;display:flex;flex-direction:column}
.bl-menu button{text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:6px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.bl-menu button:hover{background:var(--shade)}
.bl-menu-ayrac{height:1px;background:var(--line);margin:4px 6px}
/* yönetim sayfalarında asistan düğmesi yok (mobilde kart menüsünün üstüne biniyor) */
body.yonetim .sohbet-fab,body.yonetim .sohbet-pencere{display:none}
.bl-kart-alt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px}
.bl-akis{color:var(--ink-3)}
.bl-sahip{padding:2px 8px;border-radius:999px;background:var(--olive-soft);color:#3E5230;font-weight:500}
.bl-rozet{padding:2px 8px;border-radius:999px;font-weight:600}
.bl-rozet.soru{background:var(--gold-soft);color:#6E5410}.bl-rozet.cevap{background:var(--olive-soft);color:#3E5230}
.bl-form .pf-grid{grid-template-columns:1fr 1fr}
.bl-form textarea{resize:vertical;min-height:110px}
/* kart başlığı kaydırınca üstte sabit: çizgi yok, site başlığı gibi yarı saydam zemin */
.bl-form-bas{position:sticky;top:-34px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  margin:-34px -36px 14px;padding:26px 36px 14px;background:rgba(250,250,249,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bl-form-x{position:static;flex:none;margin-top:-6px}
.modal-box:has(.bl-form) > .modal-x{display:none}
@media(max-width:620px){ .bl-form-bas{top:-26px;margin:-26px -20px 12px;padding:20px 20px 12px} }
@media(max-width:1100px){
  .bl-board{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .bl-kolon{flex:0 0 82vw;scroll-snap-align:start}
  .bl-form .pf-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){ .bl-form .pf-grid{grid-template-columns:1fr} }

/* yönetici onay kuyruğu */
.onay-k{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.onay-koyu{display:inline-grid;place-items:center;width:120px;height:70px;border-radius:8px;background:var(--dark);padding:8px}
.onay-koyu img{max-width:100%;max-height:100%;object-fit:contain;filter:brightness(0) invert(.94) sepia(.15)}   /* krem sürümün ön izlemesi */

/* ============================================================
   EDITORIAL METİN: vitrin sayfalarındaki tanıtım paragrafları serif okur.
   Sans yalnız arayüzde kalır: kartlar, form, tablo, panel, backlog, etiket ve düğmeler.
   ============================================================ */
/* Gövde metni sans kalır; serif yalnız başlıklarda ve "Neden Olivio" bloğunda. */

/* ============================================================
   ANA SAYFA: keşif kartları, harita girişi, çeşit şeridi, güven, kapanış
   ============================================================ */
.kesif3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kesif3-k{position:relative;display:flex;flex-direction:column;gap:6px;min-height:230px;padding:24px;border-radius:var(--r-xl);
  overflow:hidden;color:#F4F7EE;text-decoration:none;background:var(--dark);isolation:isolate}
.kesif3-k::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.9;transition:transform .5s ease}
.kesif3-k:hover::after{transform:scale(1.05)}
/* Fotoğrafı olan kart: perde metnin durduğu sol tarafta koyu, konunun olduğu sağda
   açılıyor (kapakla aynı dil). Fotoğrafı olmayan kartlar renk geçişiyle kalır. */
.kesif3-k.kokla::after{opacity:1;background:
  linear-gradient(to top,rgba(18,26,12,.62) 0%,rgba(18,26,12,0) 58%),
  linear-gradient(100deg,rgba(18,26,12,.96) 0%,rgba(18,26,12,.88) 36%,rgba(18,26,12,.58) 70%,rgba(18,26,12,.4) 100%),
  url(/img/kesif/kart-kokla.webp) center/cover no-repeat}
.kesif3-k.tat::after{background:radial-gradient(120% 90% at 80% 10%,#8C7A2E,#1E2412)}
.kesif3-k.es::after{background:radial-gradient(120% 90% at 50% 90%,#4B5B2C,#161D10)}
.kesif3-k b{font-family:var(--display);font-size:31px;font-weight:500;letter-spacing:-.01em}
.kesif3-k > span{font-size:15px}
.kesif3-k .muted{color:rgba(244,247,238,.66);font-size:13.5px;margin-top:2px}
.kesif3-k .ulink{margin-top:auto;color:#D8E6CF}
@media(max-width:900px){ .kesif3{grid-template-columns:1fr} .kesif3-k{min-height:170px} }

/* Ana sayfa harita bandı: solda metin, sağda iki tonlu Türkiye haritası */
.harita-band{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:center;margin-top:22px;padding:30px 32px;
  border-radius:var(--r-xl);background:linear-gradient(120deg,#F5F3EB 0%,#EFF2E8 46%,#E7EDE3 100%);border:1px solid #E2E6DA;overflow:hidden}
.harita-band-txt h2{font-size:clamp(25px,2.7vw,36px);margin:6px 0 10px;max-width:15ch}
.harita-band-txt p{margin:0 0 20px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:42ch}
.harita-lejant{display:flex;flex-direction:column;gap:5px;margin-top:18px;font-size:12px;color:var(--ink-3)}
.harita-lejant i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.harita-lejant i.yogun{background:#6E8B4E}
.harita-lejant i.az{background:#CFCEBD}
.tr-mini{position:relative;display:block;width:100%}
.tr-svg-mini{width:100%;height:auto;display:block;overflow:visible}
.tr-svg-mini path{fill:#E9E6DA;stroke:#F6F7F2;stroke-width:.7}
.tr-svg-mini path.il-az{fill:#CFCEBD}
.tr-svg-mini path.il-yogun{fill:#6E8B4E}
.tr-mini-nokta{fill:#22301A;stroke:#fff;stroke-width:1.6}
/* haritanın üstündeki bölge etiketleri */
.tr-etiket{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px 4px 5px;border-radius:999px;background:var(--dark);color:#F4F7EE;font-size:11.5px;font-weight:500;
  letter-spacing:.01em;text-decoration:none;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(17,21,17,.6);transition:.16s}
.tr-etiket i{width:13px;height:13px;border-radius:50%;background:#fff;flex:none}
.tr-etiket:hover{background:#fff;color:var(--olive)}
.tr-etiket:hover i{background:var(--olive)}
@media(max-width:1000px){ .harita-band{grid-template-columns:1fr;padding:24px 20px} .tr-etiket{font-size:10.5px;padding:3px 8px 3px 4px} .tr-etiket i{width:10px;height:10px} }
/* bölgeler sayfasındaki harita: etiketsiz, aynı iki ton */
.bolge-harita{position:relative}

.cesit-serit{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cesit-k{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.cesit-foto{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-l);overflow:hidden;background:var(--olive-soft);margin-bottom:8px}
.cesit-foto img{width:100%;height:100%;object-fit:cover}
.cesit-ikon{width:46%;color:var(--olive-2);opacity:.6}
.cesit-ikon svg{width:100%;height:auto}
.cesit-k b{font-family:var(--display);font-size:18px;font-weight:500}
.cesit-k .muted{font-size:12.5px}
.cesit-kar{font-size:12.5px;color:var(--ink-3)}
.cesit-k:hover b{color:var(--olive)}
@media(max-width:1100px){ .cesit-serit{grid-template-columns:repeat(3,1fr)} }
@media(max-width:620px){ .cesit-serit{grid-template-columns:repeat(2,1fr)} }

.guven3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.guven-k{padding:22px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card)}
.guven-k b{font-family:var(--display);font-size:20px;font-weight:500;display:block;margin-bottom:6px}
.guven-k p{margin:0;font-family:var(--read);color:var(--ink-2);font-size:15.5px;line-height:1.6}
.guven-band{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;padding:16px 20px;border-radius:var(--r-xl);background:var(--olive-soft)}
.guven-band span{flex:1;min-width:200px;font-size:13.5px;color:var(--ink-2)}
.guven-band b{font-family:var(--display);font-size:26px;font-weight:500;color:var(--olive);margin-right:6px}
.guven-band i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:2px}
@media(max-width:900px){ .guven3{grid-template-columns:1fr} }

.kapanis{position:relative;min-height:46vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;margin-top:20px}
.kapanis-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.kapanis::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,21,17,.35),rgba(17,21,17,.72))}
.kapanis-in{text-align:center;color:#F4F7EE;padding:60px 22px}
.kapanis-in h2{font-size:clamp(28px,4vw,46px);margin-bottom:22px}

/* ============================================================
   KEŞİF SAYFALARI: Kokla · Tat · Eşleştir
   ============================================================ */
.kesif-hero{position:relative;min-height:52vh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.kesif-hero.sade{background:var(--olive-soft);min-height:auto;padding:40px 0}
.kesif-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Dar ekranda kırpma ortadan alınca konu (bardak) yarıda kalıyor: çerçeve sağa kaydırılır */
@media(max-width:900px){ .kesif-hero-img{object-position:58% center} }
/* Karartma: metin artık sayfa kenarından başlayıp tek satıra yayıldığı için
   koyu bölge biraz daha sağa uzatıldı; cümlenin sonu da okunaklı kalsın. */
.kesif-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(17,21,17,.82) 0%,rgba(17,21,17,.58) 56%,rgba(17,21,17,.1) 86%)}
/* Metin ana sayfadaki kapakla aynı hizada başlar: kutu sayfa genişliğinde kalır,
   içerik sola yaslanır. (760 px'lik kutu geniş ekranda ortaya kayıyor ve yazı
   karartmanın açıldığı parlak alana düşüyordu.) */
.kesif-hero-in{flex:1 1 auto;width:100%;padding:56px 22px;color:#F4F7EE;max-width:var(--maxw)}
.kesif-hero-in h1{font-size:clamp(44px,7vw,84px);margin:6px 0 12px;max-width:18ch}
/* Giriş cümlesi tek satıra yayılır; dar ekranda kendiliğinden sarar */
.kesif-hero-in .hero-lead{color:rgba(244,247,238,.9);max-width:none;margin-bottom:24px}
.kesif-hero-in .eyebrow{color:var(--olive-2)}

/* ---------- keşif sayfalarında seçim şeridi ---------- */
.ks-bas{max-width:60ch;margin-bottom:16px}
.ks-bas h2{font-size:clamp(23px,2.4vw,31px);margin-bottom:6px}
.ks-bas p{margin:0;color:var(--ink-3);font-size:15px}
.ks-secim{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.ks-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;font-weight:500;
  transition:border-color .16s,background .16s,color .16s,transform .16s}
.ks-chip i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-3);background:var(--shade);
  border-radius:999px;padding:2px 7px;min-width:22px;text-align:center}
.ks-chip:hover:not(:disabled){border-color:var(--olive-2);transform:translateY(-1px)}
.ks-chip:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.ks-chip.on{background:var(--olive);border-color:var(--olive);color:#fff}
.ks-chip.on i{background:rgba(255,255,255,.2);color:#fff}
.ks-chip:disabled{opacity:.45;cursor:default}
.ks-sonuc{scroll-margin-top:90px}
.ks-sonuc-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:16px;
  padding-top:22px;border-top:1px solid var(--line)}
.ks-sonuc-bas h3{font-size:clamp(22px,2.2vw,28px);margin:4px 0 6px}
/* Seçilen aromanın/tadın açıklaması tek satırda kalsın; sağdaki bağlantıya kadar
   yer var (en uzun metin 95 karakter). Dar ekranda satır kendiliğinden sarar. */
.ks-sonuc-bas p{margin:0;color:var(--ink-2);max-width:none;font-size:15px}
.kesif-acilan{margin-top:22px;padding:24px;border-radius:var(--r-xl);background:var(--paper-2);border:1px solid var(--line)}
.kesif-acilan-txt{max-width:62ch;margin-bottom:8px}
.kesif-acilan-txt h3{font-size:28px;margin:4px 0 8px}
.kesif-acilan-txt p{font-family:var(--read);color:var(--ink-2);font-size:16.5px;line-height:1.65;margin:0}
.kesif-sonuc{margin-top:18px}
.kesif-sonuc .sec-hd{margin-bottom:14px}







@media(max-width:900px){ .tat-grid{grid-template-columns:1fr} }

.tat-panel{padding:30px;border-radius:var(--r-xl);background:linear-gradient(150deg,#EEF3E9,#F7F4E9);border:1px solid #DFE6D9}
.tat-panel h2{font-size:clamp(26px,3.4vw,38px);margin:4px 0 6px}
.tat-quiz,.tat-sonuc{margin-top:20px;padding:24px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.tat-adim{font-size:12px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:8px}
.tat-quiz h3{font-size:24px;margin-bottom:14px}
.tat-secenekler{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tat-s{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--paper-2);cursor:pointer;text-align:left}
.tat-s:hover{border-color:var(--olive-2);background:#fff}
.tat-s.on{border-color:var(--olive);background:var(--olive-soft)}
.tat-s b{font-family:var(--display);font-size:18px;font-weight:500}
.tat-s span{font-size:13px;color:var(--ink-3)}
.tat-aromalar{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tat-sonuc h3{font-size:30px;margin:4px 0 8px}
.tat-eksenler{display:flex;flex-wrap:wrap;gap:22px;margin:14px 0}
.tat-eksenler span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.tat-dots{display:flex;gap:5px}
.tat-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.tat-dots i.on{background:var(--olive)}
.tat-cesur{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding:16px 18px;border-radius:var(--r-l);background:var(--gold-soft)}
.tat-cesur b{display:block;font-family:var(--display);font-size:19px;font-weight:500}
.tat-cesur .muted{font-size:13px}
@media(max-width:900px){ .tat-secenekler{grid-template-columns:1fr} .tat-panel{padding:20px} }










.kesif-diger{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kesif-diger-k{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:var(--r-xl);border:1px solid var(--line);
  background:var(--card);text-decoration:none;color:inherit}
.kesif-diger-k:hover{border-color:var(--olive-2)}
.kesif-diger-k b{font-family:var(--display);font-size:24px;font-weight:500}
.kesif-diger-k span{font-size:14px;color:var(--ink-3)}
@media(max-width:620px){ .kesif-diger{grid-template-columns:1fr} }

.damak-not{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;padding:10px 14px;border-radius:var(--r-m);
  background:var(--olive-soft);font-size:13.5px;color:#3E5230}
.damak-not b{font-weight:600}

/* ---------- zeytin çeşidi sayfası ---------- */
.cs-hero{background:linear-gradient(170deg,#EEF3E9,#F7F4E9);padding:18px 0 40px;border-bottom:1px solid var(--line)}
.cs-hero h1{font-size:clamp(40px,6vw,72px);margin:8px 0 2px}
.cs-alias{color:var(--ink-3);font-size:.5em;vertical-align:middle}
.cs-tag{font-family:var(--display);font-size:clamp(20px,2.4vw,28px);font-style:italic;color:var(--olive);margin:0 0 14px}
.cs-rozetler{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cs-rozetler span{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.cs-duyular{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cs-duyu{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:var(--r-xl);background:var(--paper-2);border:1px solid var(--line)}
.cs-duyu-ik{width:34px;flex:none;color:var(--olive-2)}
.cs-duyu-ik svg{width:100%;height:auto}
.cs-duyu b{display:block;font-family:var(--display);font-size:21px;font-weight:500;margin-bottom:3px}
.cs-duyu span{font-size:14px;color:var(--ink-2)}
.cs-sofra{display:flex;flex-wrap:wrap;gap:10px}
.cs-sofra span{padding:14px 20px;border-radius:var(--r-l);background:var(--olive-soft);color:#3E5230;font-size:15px}
.cs-imza{background:var(--dark);color:#F4F7EE;padding:54px 0;margin:10px 0}
.cs-imza h2{font-size:clamp(26px,3.6vw,40px);margin:6px 0 12px;max-width:22ch}
.cs-imza p{font-family:var(--read);font-size:17.5px;line-height:1.7;color:#BFCAB4;max-width:62ch;margin:0 0 20px}
.cs-imza .eyebrow{color:var(--olive-2)}
.cs-kimya{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cs-kimya-k{padding:20px;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line)}
.cs-kimya-k b{font-family:var(--display);font-size:19px;font-weight:500;display:block;margin-bottom:6px}
.cs-kimya-k p{margin:0;font-family:var(--read);font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.cs-cografya{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:26px;border-radius:var(--r-xl);background:var(--paper-2);border:1px solid var(--line)}
.cs-cografya p{font-family:var(--read);font-size:16.5px;line-height:1.66;color:var(--ink-2);margin:8px 0 0}
.cs-iklim{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-iklim span{padding:14px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);font-size:13.5px;text-align:center}
.cs-biliyor{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-bil-k{padding:20px;border-radius:var(--r-xl);background:var(--gold-soft);border:1px solid #EADFC3}
.cs-bil-k b{font-family:var(--display);font-size:19px;font-weight:500;display:block;margin-bottom:6px}
.cs-bil-k p{margin:0;font-family:var(--read);font-size:15.5px;line-height:1.62;color:#5C4A16}
@media(max-width:900px){ .cs-duyular,.cs-kimya,.cs-biliyor,.cs-cografya{grid-template-columns:1fr} }

/* ---------- bölgeler ---------- */
.bolge-ust{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:18px 0 22px}
.bolge-harita{width:100%}
.bolge-secim{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bolge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bolge-k{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.bolge-k-foto{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;background:var(--olive-soft);margin-bottom:8px}
.bolge-k-foto img{width:100%;height:100%;object-fit:cover}
.bolge-k-foto img.bolge-k-logo{width:auto;max-width:66%;height:auto;max-height:60%;object-fit:contain}   /* logo kırpılmaz */
.bolge-k b{font-family:var(--display);font-size:19px;font-weight:500}
.bolge-k:hover b{color:var(--olive)}
@media(max-width:1100px){ .bolge-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){ .bolge-ust{grid-template-columns:1fr} }

/* Ana sayfa: ürün bloğu hero görselinin üstüne biner, görsel iki yandan taşar (üretici sayfasındaki .usheet ile aynı dil) */
.hsheet{position:relative;z-index:4;margin:-128px auto 0;max-width:min(var(--maxw), calc(100% - 200px));background:var(--paper);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding-top:34px}
/* Çerçeve: üst kenar ve iki yan; aşağı inerken söner, alt kenar hiç çizilmez */
.hsheet::before{content:'';position:absolute;left:0;right:0;top:0;height:210px;pointer-events:none;
  border:1px solid rgba(17,21,17,.1);border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -12px 34px -22px rgba(17,21,17,.5);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 34%,transparent 100%)}
@media(max-width:1280px){ .hsheet{max-width:calc(100% - 100px)} }
@media(max-width:900px){ .hsheet{margin:-64px auto 0;max-width:calc(100% - 28px);padding-top:26px} }
/* Bölüm başlığının sağındaki standart bağlantı */
.tumu{flex:none;align-self:flex-end;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;white-space:nowrap;transition:.16s}
.tumu::after{content:' →'}
.tumu:hover{color:var(--olive);border-bottom-color:var(--olive)}

/* ---------- il sayfası: uydu görüntüsü üzerinde sınır, ilçeler, üreticiler ---------- */
.il-hero{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(520px,44vw,720px);display:flex;align-items:center}
/* Görsel, sınır çizgisi ve iğneler aynı kutuda: oran korunur, hizalama bozulmaz */
.il-map{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:3/2;z-index:0}
.il-foto{display:block;width:100%;height:100%;object-fit:fill}
.il-sinir{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.il-sinir path{fill:rgba(255,255,255,.06);stroke:#fff;stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 2px 6px rgba(17,21,17,.5))}
.il-perde{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--paper) 0%,var(--paper) 22%,rgba(246,247,242,.9) 32%,rgba(246,247,242,.35) 44%,transparent 58%)}
.il-hero-in{position:relative;z-index:2;padding:44px 22px;max-width:var(--maxw);width:100%}
.il-hero-in h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;margin:6px 0 14px}
.il-hero-in p{max-width:34ch;color:var(--ink-2);font-size:16px;line-height:1.6;margin:0 0 22px}
.il-sayi{display:flex;gap:28px;margin-bottom:24px}
.il-sayi span{display:block;font-size:12.5px;color:var(--ink-3);border-left:1px solid var(--line);padding-left:16px}
.il-sayi span:first-child{border-left:0;padding-left:0}
.il-sayi b{display:block;font-family:var(--display);font-size:34px;font-weight:500;color:var(--ink);line-height:1}
/* ilçe ve üretici iğneleri */
.il-ilce,.il-uretici{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;
  font-size:12px;color:#fff;text-shadow:0 1px 4px rgba(17,21,17,.8);white-space:nowrap;pointer-events:none}
.il-ilce i{width:12px;height:12px;border-radius:50%;background:#1A2314;border:2px solid #fff;flex:none;box-shadow:0 2px 6px rgba(17,21,17,.5)}
.il-uretici{pointer-events:auto}
.il-uretici button{width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.il-uretici button i{width:15px;height:15px;border-radius:50%;background:var(--olive-2);border:3px solid #fff;display:block;
  box-shadow:0 2px 10px rgba(17,21,17,.6);transition:.16s}
.il-uretici.on button i,.il-uretici button:hover i{background:#fff;border-color:var(--olive)}
.il-kart{position:absolute;left:26px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;
  padding:8px 12px 8px 8px;border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--sh-2);white-space:nowrap}
.il-kart img{width:54px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.il-kart img.il-kart-logo{object-fit:contain;background:var(--olive-soft);padding:4px}
.il-kart b{display:block;font-size:14px}
.il-kart .muted{font-size:12px}
.il-kart-ok{color:var(--ink-3)}
.il-telif{position:absolute;right:12px;bottom:10px;z-index:4;font-size:10.5px;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(17,21,17,.8)}
@media(max-width:900px){
  .il-hero{min-height:0;display:block}
  .il-perde{background:linear-gradient(180deg,rgba(246,247,242,.2) 0%,rgba(246,247,242,.85) 46%,var(--paper) 62%)}
  .il-hero-in{padding:240px 22px 40px}
  .il-ilce,.il-telif{display:none}
  .il-sayi{gap:18px}
}
.bolge-il-serit{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}

/* son adım: üç kanıt seviyesi kısa açıklamalarıyla */
/* rozetler aynı genişlikte ve sola hizalı; açıklamalar aynı hizadan başlar */
.nd-kanit{display:grid;grid-template-columns:auto 1fr;gap:16px 14px;align-items:start}
.nd-kanit-s{display:contents}
.nd-kanit-s .badge{justify-content:center;min-width:104px;margin-top:1px}
.nd-kanit-s p{margin:0;font-size:13.5px;line-height:1.55;color:#C6D2BA}
/* koyu zeminde şeffaf beyaz düğme */
.neden .btn.ghost.inv{background:transparent;border:1px solid rgba(244,247,238,.75);color:#F4F7EE}
.neden .btn.ghost.inv:hover{background:rgba(244,247,238,.12);border-color:#F4F7EE}
@media(max-width:900px){ .nd-alt{padding-bottom:48px} }

/* Jost küçük puntolarda daha da sıkı okunuyor: 14 px altı metinlerde aralık biraz daha açık */
.muted,.badge,.chip,.n,.sub,small,.pill,.bl-kart-alt,.ks-chip i,.nd-sat,.hcard-meta,.bl-id,.tumu{letter-spacing:.022em}
.btn,.eyebrow{letter-spacing:.09em}
input,select,textarea{letter-spacing:.012em}