/* ============================================================
   NUTEKS — Fındık İhracat Web Sitesi
   ============================================================ */
:root{
  --green-900:#1f3a1f;
  --green-700:#2f5d33;
  --green-600:#3c6e42;
  --green-500:#4f8a4f;
  --gold:#b8964e;
  --gold-dark:#9c7a3f;
  --gold-deep:#8a6a34;
  --ink:#26251f;
  --ink-soft:#55534a;
  --cream:#FAF9F6;
  --cream-2:#FAF9F6;
  --paper:#FAF9F6;
  --paper-2:#FAF9F6;   /* kirik beyaz - "beyaz" bolumler icin */
  --dark:#16150f;
  --dark-2:#201e15;
  --line:rgba(0,0,0,.10);
  /* TÜM çizgiler tek kaynaktan: aynı kalınlık ve renk */
  --rule-w:1px;                    /* her çizgi 1px */
  --rule-c:rgba(156,122,63,.55);   /* kısa vurgu çizgileri (altın) */
  --rule-c-soft:rgba(156,122,63,.28); /* uzun ayırıcı hatlar */
  --rule-len:56px;                 /* kısa vurgu çizgisi uzunluğu */
  --shadow:0 18px 50px -20px rgba(30,25,10,.35);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--maxw),92%);margin-inline:auto}
section[id]{scroll-margin-top:84px}

/* ---------- Typography helpers ---------- */
.display{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.01em;
  font-size:clamp(2rem,3.4vw,2.9rem);
  color:var(--ink);
}
.display em{font-style:italic;color:var(--green-700)}
.display.light{color:#f3ecdd}
.display.light em{color:var(--gold)}
.eyebrow{
  font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--gold-dark);margin-bottom:1.1rem;
}
.eyebrow.gold{color:var(--gold)}
.lede{font-size:1.1rem;color:var(--ink-soft);max-width:60ch}
.lede.muted{color:#c9c2b0}
.center{text-align:center;margin-inline:auto}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:1.1rem 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  background:rgba(250,247,240,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px -14px rgba(0,0,0,.3);
  padding:.7rem 0;
}
/* Hero videosunun aydinlik sahnelerinde yesil logo ve menu okunsun diye
   ustte yumusak bir koyu gecis. Asagi dogru tamamen saydamlasir, bu yuzden
   bant ile video arasinda sert bir cizgi olusmaz. Sayfa kaydirilinca
   (scrolled) opaklik 0'a inip acik zeminli baslige yumusak gecis yapar. */
.site-header::before{
  content:"";position:absolute;inset:0 0 -1.6rem 0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(18,26,14,.46) 0%,
    rgba(18,26,14,.22) 58%,
    rgba(18,26,14,0) 100%);
  opacity:1;transition:opacity .35s ease;
}
.site-header.scrolled::before{opacity:0}

/* icerik gecisin uzerinde kalsin (::before mutlak konumlu) */
.header-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-logo{height:34px;width:auto;display:block;transition:height .35s ease, filter .35s ease}
.site-header.scrolled .brand-logo{height:30px}
/* Hero üstünde de logo kendi yeşil rengiyle kalır; koyu videoda okunsun
   diye yalnız hafif bir gölge eklenir. */
.site-header:not(.scrolled) .brand-logo{
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.55));
}

/* Buzlu cam (frosted glass) menü çubuğu */
.main-nav{
  display:flex;align-items:center;justify-content:center;gap:.1rem;
  background:rgba(24,28,16,.32);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.4rem .5rem;margin:0 auto;
  box-shadow:0 10px 34px -14px rgba(0,0,0,.4);transition:background .3s ease;
}
.site-header.scrolled .main-nav{background:rgba(24,28,16,.5)}
.main-nav a{
  font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.9);padding:.5rem 1.05rem;border-radius:999px;white-space:nowrap;
  position:relative;transition:color .25s ease;
}
/* Aktif / hover: beyaz zeminli buton yok — açık yeşil renk */
.main-nav a:hover,.main-nav a.active{color:#a9d982}
.nav-item{position:relative;display:inline-flex;align-items:center}
.has-dropdown > a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.8}
.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);
  display:flex;flex-direction:column;min-width:265px;padding:.85rem .5rem .55rem;
  background:rgba(24,28,16,.62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown a{text-transform:none;letter-spacing:.01em;font-size:.84rem;font-weight:400;color:rgba(255,255,255,.9);
  padding:.62rem .9rem;border-radius:9px;text-align:left;transition:background .25s,color .25s}
.dropdown a:hover{background:rgba(255,255,255,.1);color:#a9d982}

/* ---- Dil değiştirici: sağ üstte TR | EN ----
   Hero üzerinde beyaz, sayfa kaydırılınca (açık krem başlık) koyu renk —
   menü çubuğuyla aynı mantık. */
.lang-switch{
  display:flex;align-items:center;gap:.5rem;flex:none;
  font-family:var(--sans);
}
.lang-link{
  font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-decoration:none;line-height:1;
  padding:.25rem .1rem;transition:color .25s ease;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.lang-link:hover{color:#fff}
.lang-link.is-active{color:#fff;font-weight:600}
/* diller arasındaki dik çizgi */
.lang-sep{
  width:1px;height:13px;background:rgba(255,255,255,.42);
  display:block;flex:none;
}
.site-header.scrolled .lang-link{color:var(--ink-soft);text-shadow:none}
.site-header.scrolled .lang-link:hover{color:var(--green-700)}
.site-header.scrolled .lang-link.is-active{color:var(--green-700)}
.site-header.scrolled .lang-sep{background:rgba(0,0,0,.22)}
.lang-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.menu-toggle span{width:26px;height:2px;background:#fff;transition:.3s}
.site-header.scrolled .menu-toggle span{background:var(--ink)}

/* ============================================================
   HERO
   ============================================================ */
/* metin bölüm içinde her yönden tam ortalı */
.hero{position:relative;height:92vh;min-height:640px;background:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Bölümler arası geçiş: görselin alt kısmı net biter + çimende çok hafif zemin gölgesi */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(40,50,28,.13));
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%}
/* Gökyüzü bölgesinde (üst-orta) yazının okunması için üstü koyulaştıran scrim */
/* Yazı ortada olduğu için karartma da ortada yoğunlaşır;
   üstteki ince gradient menü çubuğunun okunurluğu için kalır. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(16,20,10,.58), transparent 76%),
    linear-gradient(180deg, rgba(16,20,10,.42) 0%, rgba(16,20,10,.14) 24%, transparent 46%);
}
.hero-content{position:relative;z-index:2;max-width:1120px;margin:0 auto;text-align:center;color:#fff;padding-top:0}
.hero-eyebrow{color:#fff;opacity:.97;text-shadow:0 1px 10px rgba(0,0,0,.6);font-size:.9rem}
.hero-title{
  color:#fff;font-size:clamp(2rem,3.9vw,3.3rem);margin:.5rem auto 1.2rem;
  text-shadow:0 2px 22px rgba(0,0,0,.6);white-space:nowrap;
}
.hero-title em{color:#fff;font-style:italic}
.hero-lede{
  color:rgba(255,255,255,.96);font-size:clamp(1.08rem,1.6vw,1.32rem);
  /* 58ch'de 3 satıra düşüyordu; metin tek satırda 2049px, iki satır için
     satır başına ~1024px gerekiyor → kap sınırına kadar genişletildi */
  max-width:min(1100px,100%);margin:0 auto;
  text-shadow:0 1px 12px rgba(0,0,0,.65);line-height:1.7;
}
/* Hero'nun altındaki imza sloganı — kaligrafik el yazısı (Great Vibes),
   düz satır: eğim ve alt çizgi kaldırıldı. */
.hero-imza{
  font-family:"Great Vibes",var(--serif),cursive;
  font-weight:400;font-size:clamp(1.45rem,2.6vw,2.25rem);line-height:1.2;
  color:#fff;text-align:center;
  margin:clamp(1.4rem,2.6vw,2.1rem) auto 0;
  text-shadow:0 2px 10px rgba(0,0,0,.75),0 1px 26px rgba(0,0,0,.5);
}
/* Hero imzası: yalnız NUTEKS logosu */
.hero-imza{display:flex;align-items:baseline;justify-content:center;gap:.45em;flex-wrap:wrap}
.hero-imza-logo{
  height:1.15em;width:auto;display:inline-block;align-self:center;
  filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.6));
  position:relative;top:.06em;
}
.hero-fade{
  position:absolute;inset:auto 0 0 0;height:22%;z-index:1;
  background:linear-gradient(to top,var(--paper),transparent);
}

/* ============================================================
   INTRO / BRAND
   ============================================================ */
.intro{background:var(--paper);padding:clamp(2.4rem,4.5vw,3.8rem) 0 clamp(2.6rem,5vw,4.2rem)}
/* daraltılmış ve bölüm içinde ortalanmış ikili: solda görsel, sağda metin */
.intro-grid{
  display:grid;grid-template-columns:minmax(0,620px) minmax(0,440px);
  gap:clamp(1.2rem,2.2vw,2rem);
  align-items:center;justify-content:center;
}
/* oran görselin kendi ölçüsünden (1798x1412) — cover kırpması olmasın */
.intro-visual{position:relative;aspect-ratio:1798/1412;width:100%;border-radius:12px}
/* toprak tabaninin zeminle bulustugu yere ince golge */
.intro-visual::after{
  content:"";position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:58%;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(45,55,30,.26),rgba(45,55,30,.09) 55%,transparent 74%);
  filter:blur(5px);
}
.intro-visual img{position:relative;z-index:1;max-width:520px;margin-inline:auto;filter:drop-shadow(0 20px 30px rgba(45,60,30,.22))}
.intro-text .display{margin:.3rem 0 1.2rem}
/* "Nuteks Hakkında" üst yazısının yerini alan alt başlık — bölüm başlığını
   gölgelememesi için ondan küçük, ama lede'den ayrışsın diye serif. */
/* ara başlık — site genelindeki ortak ölçü/renk */
.intro-sub{
  font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:.01em;
  font-size:clamp(1.3rem,1.8vw,1.5rem);color:var(--green-700);
  margin:0 0 .9rem;max-width:38ch;   /* .intro-text .lede ile aynı blok genişliği */
}
.intro-text .lede{font-size:clamp(1.15rem,1.5vw,1.32rem);line-height:1.85;margin-bottom:2.1rem;max-width:38ch}
/* Koyu yeşilden açık yeşile degrade buton */
.btn-green{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,var(--green-900),var(--green-600) 60%,var(--green-500));
  color:#fff;font-size:.85rem;letter-spacing:.06em;font-weight:500;
  padding:.9rem 2rem;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 12px 26px -12px rgba(31,58,31,.75);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(31,58,31,.9);filter:brightness(1.08)}

/* ============================================================
   HAKKIMIZDA İÇİ DEĞER ŞERİDİ — ağacın altında, beyaz zeminde
   ============================================================ */
/* düz zemin — ayrı bir panel/kart yok */
.vrow{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(1.6rem,3vw,3rem);
  margin-top:clamp(2rem,4vw,3.2rem);
  /* ikonların iki rengi */
  --vico-dark:#1f3a1f;
  --vico-acc:#6f9c46;
}
.vitem{display:flex;flex-direction:column;align-items:center;text-align:center}
/* başlık iki satıra düştüğünde altındaki metin kaymasın: iki satırlık
   yer ayrılır, böylece beş sütunda da açıklamalar aynı hizada başlar */
.vitem h3{min-height:2.7em;display:flex;align-items:flex-start;justify-content:center;margin-bottom:.35rem}
.vitem-ico{
  /* PNG'lerde mürekkep, kare tuvalin %70'i (optik eşitleme için).
     Kutu buna göre büyütüldü; görsel boyut eskisiyle aynı kalır. */
  width:88px;height:88px;display:grid;place-items:center;margin-bottom:1.1rem;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.vitem-ico svg{width:100%;height:100%;overflow:visible}
/* PNG ikonlar: mutlak konumla kutunun tamamını kaplar, contain ile içine
   sığar. Yüzde yükseklik yerine inset kullanılıyor — grid içinde yüzde
   yükseklik auto'ya düşüp ikonların farklı boyda görünmesine yol açıyordu.
   Sonuç: her ikon aynı kareye oturur, uzun kenarı kutunun tamamı olur. */
.vitem-ico{position:relative}
.vitem-ico img{
  position:absolute;left:0;right:0;top:0;bottom:0;
  width:100%;height:100%;object-fit:contain;display:block;
}
/* iki renkli ikon parçaları: koyu kontur + yeşil dolgu */
.vitem-ico .i-dark,.vgrid-ico .i-dark{fill:none;stroke:var(--vico-dark);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vitem-ico .i-dark-f,.vgrid-ico .i-dark-f{fill:var(--vico-dark);stroke:none}
.vitem-ico .i-acc,.vgrid-ico .i-acc{fill:none;stroke:var(--vico-acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vitem-ico .i-acc-f,.vgrid-ico .i-acc-f{fill:var(--vico-acc);stroke:none}
.vitem:hover .vitem-ico{transform:translateY(-5px)}
.vitem h3{
  font-family:var(--sans);font-weight:700;letter-spacing:.01em;
  font-size:clamp(1rem,1.35vw,1.12rem);color:var(--ink);
  margin-bottom:.6rem;line-height:1.3;
}
.vitem p{font-size:.88rem;line-height:1.7;color:var(--ink-soft);max-width:26ch}

.step-ico svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   JOURNEY / MAP
   ============================================================ */
.journey{position:relative;background:var(--cream);padding:clamp(3rem,5vw,4.5rem) 0 clamp(2.5rem,4vw,3.5rem);overflow:hidden}
.journey-map{
  position:absolute;inset:6% 0 auto 0;height:60%;
  background:
    radial-gradient(circle,rgba(60,90,45,.35) 1px,transparent 1.4px) 0 0/16px 16px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 72%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000 30%,transparent 72%);
  opacity:.5;pointer-events:none;
}
.journey-head{position:relative;max-width:760px}
.journey-head .display{margin:.3rem 0 1.2rem}

/* Hasat / İşleme / Teslim — iki bölüm arasına oturan açık→koyu yeşil gradient kartlar */
.steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;
  margin:clamp(-140px,-9vw,-100px) auto;
  position:relative;z-index:5;
}
.step{
  position:relative;padding:2.4rem 1.8rem;border-radius:12px;color:#fff;
  background:linear-gradient(180deg,var(--green-900),var(--green-700) 50%,var(--green-500));
  box-shadow:0 26px 50px -22px rgba(31,58,31,.5);
  transition:transform .35s,box-shadow .35s;
}
.step:hover{transform:translateY(-6px);box-shadow:0 34px 60px -22px rgba(31,58,31,.65)}
.step-no{
  font-family:var(--serif);font-size:1.6rem;color:#fff;
  display:block;opacity:.6;margin-bottom:.5rem;
}
.step-ico{display:inline-flex;margin-bottom:.8rem}
.step h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin-bottom:.6rem;color:#fff}
.step p{font-size:.9rem;color:rgba(255,255,255,.92);line-height:1.6}
.step-ico svg{stroke:#fff !important}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products{background:var(--paper-2);padding:clamp(2.6rem,4.5vw,3.8rem) 0 clamp(2rem,3vw,2.8rem)}
.products-title{margin-bottom:2rem}
.carousel{overflow:hidden;width:100%}
.carousel-track{
  display:flex;gap:1.6rem;padding:.5rem calc((100vw - min(var(--maxw),92%))/2);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform;align-items:flex-end;
}
/* --- Genel görünüm kartı: kase plakadan taşar --- */
.product-card{
  flex:0 0 clamp(230px,24%,272px);
  position:relative;background:none;border:0;padding:0;margin:0;cursor:pointer;
  text-align:left;font-family:inherit;
  transition:transform .4s ease;
}
.product-bowl{
  position:absolute;left:50%;bottom:62%;transform:translateX(-50%);
  width:230px;height:170px;overflow:hidden;z-index:2;pointer-events:none;
}
.product-bowl img{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  height:118%;width:auto;max-width:none;
  filter:drop-shadow(0 16px 16px rgba(50,35,10,.28));
  transition:transform .5s ease;
}
.product-plate{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:.25rem;
  min-height:240px;justify-content:flex-end;
  padding:0 1.4rem 1.5rem;border-radius:16px;
  background:linear-gradient(158deg,#6f7738 0%,#8c8143 48%,#ad9049 100%);
  box-shadow:0 26px 46px -22px rgba(60,55,15,.55);
  transition:box-shadow .4s ease;
}
.product-name{font-family:var(--serif);font-weight:600;font-size:1.55rem;line-height:1.1;color:#fff}
.product-more{font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.85);transition:letter-spacing .3s}
.product-card:hover{transform:translateY(-6px)}
.product-card:hover .product-plate{box-shadow:0 34px 56px -20px rgba(60,55,15,.65)}
.product-card:hover .product-bowl img{transform:translate(-50%,-52%) scale(1.05)}
.product-card:hover .product-more{letter-spacing:.14em}
.product-card:focus-visible{outline:2px solid var(--green-600);outline-offset:6px;border-radius:16px}

.carousel-nav{display:flex;justify-content:flex-end;gap:.8rem;margin-top:2.4rem}
.car-btn{
  font-family:var(--sans);font-size:.85rem;letter-spacing:.05em;
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.2rem;cursor:pointer;color:var(--ink-soft);transition:.25s;
}
.car-btn:hover{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.car-btn:disabled{cursor:default}

/* --- Ürün detay modal (açık hali) — üst düzey açılış animasyonu --- */
.pmodal{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;visibility:hidden;
}
.pmodal.open{visibility:visible}
.pmodal-backdrop{
  position:absolute;inset:0;background:rgba(14,17,9,.55);
  backdrop-filter:blur(0px);opacity:0;
  transition:opacity .5s ease, backdrop-filter .5s ease;cursor:pointer;
}
.pmodal.open .pmodal-backdrop{opacity:1;backdrop-filter:blur(9px)}
.pmodal-figure{
  position:relative;z-index:2;margin:0;max-width:1120px;width:100%;
  border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 50px 120px -35px rgba(0,0,0,.7);
  opacity:0;transform:translateY(28px) scale(1.05);
  clip-path:inset(0 100% 0 0 round 18px);
  transition:opacity .5s ease,
             transform .9s cubic-bezier(.16,1,.3,1),
             clip-path 1s cubic-bezier(.16,1,.3,1);
}
.pmodal.open .pmodal-figure{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0 round 18px)}
.pmodal-img{display:block;width:100%;height:auto;
  transform:scale(1.08);transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.pmodal.open .pmodal-img{transform:scale(1)}
.pmodal-close{
  position:absolute;top:16px;right:18px;z-index:3;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(20,20,15,.35);color:#fff;font-size:1.6rem;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(4px);
  opacity:0;transition:opacity .4s ease .35s, background .25s, transform .25s;
}
.pmodal.open .pmodal-close{opacity:1}
.pmodal-close:hover{background:rgba(20,20,15,.6);transform:rotate(90deg)}
body.modal-open{overflow:hidden}

/* ============================================================
   CERTIFICATIONS (dark)
   ============================================================ */

.certs{background:var(--cream);color:var(--ink);padding:clamp(2.6rem,4.5vw,3.8rem) 0;position:relative;overflow:hidden}
.certs-head{max-width:820px;margin-inline:auto;position:relative;z-index:2}
.certs-head .display{margin:.4rem 0 1rem}
.certs-head .eyebrow{color:var(--gold-dark)}
.certs-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,2vw,1.6rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);position:relative;z-index:2;
}
.cert{
  display:flex;flex-direction:column;align-items:center;gap:1.15rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:1.9rem 1.3rem 1.4rem;
  box-shadow:0 14px 30px -22px rgba(30,25,10,.28);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s;
}
.cert:hover{transform:translateY(-7px);box-shadow:0 28px 46px -22px rgba(30,25,10,.4)}
/* Her logo aynı ölçüdeki alanı contain ile sonuna kadar doldurur → hepsi
   kendi kutusunda mümkün olan en büyük ve birbirine eşit ölçekte görünür.
   (Logoların şeffaf kenar boşlukları kaynakta kırpıldı; aksi hâlde boşluk
   kadar küçük görünürlerdi.) */
/* Görseller mutlak konumla alanı birebir kaplar. Yüzde yükseklik yerine
   inset kullanılıyor çünkü alan yüksekliği aspect-ratio'dan geliyor ve
   yüzde yükseklik bu durumda auto'ya düşüp contain'i devre dışı bırakıyor. */
.cert-logo{width:100%;height:96px;position:relative}
.cert-logo img{
  position:absolute;left:0;right:0;top:0;bottom:0;
  width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;display:block;
}
/* Aynı kutuda iki logo (Helal) — alt alta, alanı eşit paylaşırlar */
.cert-logo-duo img{height:calc(50% - .2rem)}
.cert-logo-duo img:first-child{bottom:auto}
.cert-logo-duo img:last-child{top:auto}
.cert figcaption{font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center}

/* ---------- Gold button ---------- */
.btn-gold{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;font-size:.85rem;letter-spacing:.06em;font-weight:500;
  padding:.85rem 1.9rem;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 12px 26px -12px rgba(184,150,78,.7);transition:transform .25s, box-shadow .25s;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(184,150,78,.85)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:var(--paper);
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.contact-panel{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);
  background:rgba(253,251,246,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.6);border-radius:20px;
  padding:clamp(1.8rem,4vw,3rem);box-shadow:var(--shadow);
}
.contact-left .display{margin-bottom:1rem}
.contact-left .lede{font-size:1.1rem;margin-bottom:2rem}
.trust-list{list-style:none;display:grid;gap:1.1rem}
.trust-list li{display:flex;gap:.9rem;align-items:flex-start}
.trust-ico{
  flex:none;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;background:var(--cream-2);color:var(--gold-dark);
  font-size:1rem;
}
/* Hızlı Geri Dönüş altındaki boş alana fındık görseli */
.contact-visual{
  width:min(400px,100%);height:auto;margin:2.2rem auto 0;display:block;
  filter:drop-shadow(0 22px 34px rgba(40,60,20,.22));
}
.trust-list strong{display:block;font-weight:500;font-size:.95rem;color:var(--ink)}
.trust-list em{font-style:normal;font-size:.8rem;color:var(--ink-soft)}

.contact-form{display:grid;gap:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field > span,.checks legend{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
.field input,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper-2);border:1px solid rgba(0,0,0,.12);border-radius:9px;
  padding:.7rem .85rem;transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus{
  outline:0;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(79,138,79,.15);
}
.field textarea{resize:vertical}
.checks{border:0}
.check-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;margin-top:.3rem;
}
.check-grid label{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-soft);cursor:pointer}
.check-grid input{accent-color:var(--green-600);width:16px;height:16px}
.submit{justify-content:center;margin-top:.4rem;width:max-content}
.form-status{font-family:var(--sans);font-weight:300;font-size:.78rem;line-height:1.6;color:var(--green-700);min-height:1.2em;margin-top:.7rem}
.form-status.hata{color:#b23b2e}
/* zorunlu alan bilgilendirmesi ve hata durumlari */
.form-note{
  font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);
  margin:0 0 .2rem;
}
/* "Formu Gonder" oncesi ince bilgilendirme metinleri */
.form-fine{
  font-family:var(--sans);font-weight:300;font-size:.76rem;line-height:1.6;
  color:var(--ink-soft);margin:0;
}
.form-fine + .form-fine{margin-top:.45rem}
.form-fine .req,.onay-text .req{color:#b23b2e;font-weight:600}
/* KVKK onay kutusu — "Formu Gönder"in hemen üstünde */
.field-onay{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:.55rem;row-gap:.15rem;align-items:start;
  margin-top:.9rem;cursor:pointer;
}
.field-onay input{
  accent-color:var(--green-600);width:15px;height:15px;
  margin:.22rem 0 0;flex:none;
}
.onay-text{
  font-family:var(--sans);font-weight:300;font-size:.76rem;line-height:1.6;
  color:var(--ink-soft);
}
.field-onay .field-error{grid-column:2;min-height:0;margin-top:.15rem}
.field-onay .field-error:empty{display:none}
.field-onay.hatali input{outline:2px solid #b23b2e;outline-offset:2px}
.form-fine a{color:var(--green-700);text-decoration:underline;
  text-underline-offset:2px;transition:color .25s}
.form-fine a:hover{color:var(--gold-deep)}
.form-fines{margin:.2rem 0 1.1rem}
.field-label .req{color:#b23b2e;font-weight:600}
.field-error{
  display:block;min-height:1.05em;margin-top:.3rem;
  font-family:var(--sans);font-size:.78rem;color:#b23b2e;
}
.field.hatali input,.field.hatali textarea{
  border-color:#b23b2e;background:rgba(178,59,46,.04);
}
.field.hatali input:focus,.field.hatali textarea:focus{
  border-color:#b23b2e;box-shadow:0 0 0 3px rgba(178,59,46,.12);
}
/* boşken yer kaplamasın: form "Formu Gönder" butonuyla bitsin */
.form-status:empty{display:none;min-height:0}
.form-recaptcha{margin:.15rem 0 .35rem}
.form-recaptcha .g-recaptcha{margin-bottom:.4rem}
.form-recaptcha-not{
  font-family:var(--sans);font-weight:300;font-size:.68rem;line-height:1.55;
  color:var(--ink-soft);max-width:36rem;margin:.2rem 0 0;
}
.form-recaptcha-not a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.form-recaptcha-not a:hover{color:var(--gold-deep)}
.form-recaptcha.hatali .g-recaptcha{outline:2px solid #b23b2e;outline-offset:4px}

/* ============================================================
   FOOTER
   ============================================================ */
/* zemin: "Formu Gönder" butonuyla birebir aynı yeşil degrade */
.site-footer{
  background:linear-gradient(135deg,var(--green-900),var(--green-600) 60%,var(--green-500));
  color:rgba(255,255,255,.82);padding:3.2rem 0 1.6rem;text-align:left;
}
/* solda marka, yanında menü, sağda yan yana üç iletişim bloğu.
   Sütun araları tek tek ayarlanabilsin diye gap yerine margin kullanılıyor. */
.footer-inner{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  column-gap:0;align-items:start;
}
/* marka, sağındaki sütun başlıklarıyla aynı üst hizada */
/* logo + slogan: slogan logoya ortalı ve yakın dursun */
.footer-brandcol{display:grid;gap:.5rem;justify-items:center;align-content:start}
.footer-col{margin-left:clamp(2.2rem,5vw,4.4rem)}      /* Kurumsal ← logodan uzak */
.footer-contact{margin-left:clamp(2.4rem,5.5vw,5rem)}  /* iletişim ← Kurumsal'dan uzak */
.footer-brand .brand-logo{height:56px;filter:brightness(0) invert(1)}
/* slogan iki satır; logo genişliğine (56px yükseklikte 318px) oturur ve
   logonun altında ortalanır */
.footer-tag{
  font-family:var(--serif);font-style:italic;font-size:17.2px;line-height:1.45;
  color:#fff;margin:0;max-width:318px;text-align:center;
}
/* Sütun başlıkları: kalın, büyük harf, beyaz — altındaki satırlar düz metin */
.footer-coltitle{
  font-family:var(--sans);font-weight:600;font-size:.84rem;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;
  margin:0 0 .95rem;
}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.footer-nav a{
  font-family:var(--sans);font-size:.93rem;line-height:1.5;
  color:rgba(255,255,255,.85);transition:color .25s;
}
.footer-nav a:hover{color:var(--gold)}

/* üç blok yan yana ve birbirine yakın — içeriğe göre daralır, yayılmaz */
.footer-contact{
  display:grid;grid-template-columns:repeat(3,auto);
  justify-content:start;
  column-gap:clamp(1rem,2vw,1.7rem);text-align:left;
}
.footer-line{
  font-family:var(--sans);font-size:.93rem;line-height:1.65;
  color:rgba(255,255,255,.85);margin:0;
}
.footer-line a{color:inherit;transition:color .25s}
.footer-line a:hover{color:var(--gold)}

.footer-base{
  margin-top:clamp(1.9rem,3.6vw,2.8rem);
  border-top:1px solid rgba(255,255,255,.16);padding-top:1.1rem;
  /* solda telif, sagda yasal linkler */
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;
}
.copyright{font-size:.78rem;color:rgba(255,255,255,.6);margin:0}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* kisa ve yumusak: kademeli gecikme yok, blur/scale yok — bekleme hissi vermez */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   SABİT MASAÜSTÜ DÜZENİ
   Mobil/responsive uyarlama yok — site her ekranda 1280px
   masaüstü düzeninde kalır (viewport width=1280 ile küçültülür).
   ============================================================ */
/* sabit genişlik kilidi kaldırıldı: düzen artık pencereye uyum sağlar */

/* ============================================================
   PREMIUM ANIMATIONS & ENHANCEMENTS
   ============================================================ */

/* ---- Hero entrance (staggered blur-fade-up on load) ---- */
.hero-content > *{opacity:0;transform:translateY(30px);filter:blur(8px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1),filter 1s ease}
.loaded .hero-content > *{opacity:1;transform:none;filter:none}
.loaded .hero-content > *:nth-child(1){transition-delay:.15s}
.loaded .hero-content > *:nth-child(2){transition-delay:.32s}
.loaded .hero-content > *:nth-child(3){transition-delay:.5s}
/* slow zoom of hero image for cinematic feel — video zaten hareketli, ona uygulanmaz */
.hero-img{animation:heroZoom 14s ease-out forwards}
video.hero-img{animation:none}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1.02)}}

/* nav links subtle fade-in on load */
.main-nav a{opacity:0;transform:translateY(-6px);transition:opacity .6s ease,transform .6s ease,color .25s}
.loaded .main-nav a{opacity:1;transform:none}
.loaded .main-nav a:nth-child(1){transition-delay:.1s}
.loaded .main-nav a:nth-child(2){transition-delay:.16s}
.loaded .main-nav a:nth-child(3){transition-delay:.22s}
.loaded .main-nav a:nth-child(4){transition-delay:.28s}
.loaded .main-nav a:nth-child(5){transition-delay:.34s}

/* ---- Premium button shimmer ---- */
.btn-gold,.btn-green{position:relative;overflow:hidden}
.btn-gold::after,.btn-green::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:none}
.btn-gold:hover::after,.btn-green:hover::after{animation:shine .8s ease}
@keyframes shine{to{left:130%}}

/* ---- JOURNEY: two-column with media ---- */
.journey{position:relative;overflow:hidden}
.journey-top{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative;z-index:2}
.journey-text .display{margin:.3rem 0 1.2rem}
.journey-media{position:relative;display:flex;align-items:center;justify-content:center}
.journey-media img{width:100%;border-radius:18px;box-shadow:none}
/* floating hazelnut decorations */
.deco-nut{position:absolute;z-index:1;pointer-events:none;will-change:transform}
.deco-nut img{width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(40,40,20,.26))}
.deco-nut-1{width:104px;top:5%;right:2.5%;opacity:.55;rotate:12deg;animation:floaty 7s ease-in-out infinite}
.deco-nut-2{width:138px;top:8%;left:-30px;opacity:.92;rotate:-13deg;animation:floaty 9s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -16px}}

/* ---- Product card premium hover ---- */
.product-card{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s}
.product-card:hover{transform:translateY(-8px)}
.product-bowl img,.product-fig img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.product-card:hover .product-bowl img{transform:scale(1.08) translateY(-4px)}

/* ---- Cert cells stagger hover ---- */

/* ---- B2B CTA BAND ---- */
.ctaband{position:relative;min-height:clamp(240px,32vh,320px);display:flex;align-items:center;overflow:hidden}
.ctaband-media{position:absolute;inset:-8% 0;z-index:0}
.ctaband-media img{width:100%;height:116%;object-fit:cover;object-position:center 60%}
.ctaband-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(18,20,12,.82),rgba(18,20,12,.55) 55%,rgba(18,20,12,.3))}
.ctaband-in{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center}
.ctaband-in .display{margin:.4rem 0 1.1rem}
.ctaband-in .lede{margin-bottom:1.8rem;max-width:60ch}
.ctaband-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,20,12,.55),rgba(18,20,12,.68))}
.ctaband-btn{font-size:.9rem}

/* ---- Link-scroll cue on hover for gold links ---- */
.btn-green{background:linear-gradient(135deg,var(--green-900),var(--green-600) 60%,var(--green-500))}

/* ---- Product showcase (full slide + premium crossfade) ---- */
.products-title{margin-bottom:0}
.products-rule{display:block;width:var(--rule-len);height:var(--rule-w);background:var(--rule-c);margin:1.1rem auto 0;
  transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease) .25s}
.reveal.in .products-rule,.products-rule.in{transform:scaleX(1)}
.pshow{position:relative;width:min(1330px,97%);margin:-2.4rem auto 0}
/* Ürün vitrini — solda canlı metin, sağda sayfa kenarına yaslı ürün görseli */
.products{overflow-x:clip}          /* sağa taşan görsel yatay kaydırma açmasın */
/* tam genişlik: böylece görselin right:0 değeri birebir sayfa kenarına oturur */
/* oran referans kurgudan (1918x877 üst alan) — fındıkların ölçeği birebir tutar */
/* Metin bloğu dikey ortalı; kayma .pshow-content'e ayrılan sabit yükseklikle
   önleniyor (bkz. min-height). Sadece align-items:center verilseydi künye
   satır sayısı değişince başlık 55px oynuyordu. */
.pshow{
  width:100%;margin:-2.4rem 0 0;
  aspect-ratio:1918/877;min-height:420px;
  display:flex;align-items:center;
}
/* PNG referansla aynı 1918px tuvale sahip; %100'de fındıklar tam yerine oturur */
/* drop-shadow siluetin kendisini takip eder → her fındık zemine oturmuş görünür.
   Sıkı+koyu katman temas gölgesi, geniş+açık katman yumuşak yayılma. */
.pshow-photo{
  position:absolute;top:50%;right:0;
  transform:translateY(-50%);
  width:100%;height:auto;
  z-index:1;pointer-events:none;user-select:none;
  /* Baskılı düşen gölge görsellerden silindi; gölge artık burada üretiliyor.
     Sıkı+koyu katman temas gölgesi, geniş+yumuşak katman yayılma. Işık yönü
     fotoğraflarla aynı olsun diye hafif sağa kaydırıldı. */
  filter:
    drop-shadow(2px 4px 5px rgba(74,54,28,.34))
    drop-shadow(6px 16px 22px rgba(74,54,28,.18));
  transition:opacity .28s ease;
}
/* ürün değişirken yumuşak geçiş */
.pshow-photo.degisiyor{opacity:0}
/* metin oransal sol hizada dursun: ekran genişledikçe ortalanmış kap metni
   sağa itip fındıkların üstüne bindiriyordu. Referansta metin sol %6'dan başlar. */
.pshow-content{
  position:relative;z-index:2;color:var(--ink);
  width:100%;
  padding-left:clamp(1.75rem,6%,7.5rem);
  padding-right:1.5rem;
  /* En uzun ürünün içeriği kadar sabit yer ayrılır (ölçüm: 1180px'de 279px,
     1440px'de 329px). Blok yüksekliği sabit kaldığı için dikey ortalama
     her üründe aynı noktaya denk gelir → başlık ve satırlar kaymaz. */
  min-height:clamp(17.5rem,24vw,24rem);
}
/* "Paketleme" satırı tek satıra sığacak genişlik; yine de sağda fındıkların
   başladığı noktaya (%48) 50px+ pay bırakır → yazıyla çakışma olmaz */
.pshow-content .pshow-specs{max-width:41.5%}
/* tipografi ölçeği küçültüldü (72.8px başlık fazla iriydi) */
.pshow-title{
  font-family:var(--serif);font-weight:600;line-height:1.08;
  font-size:clamp(1.9rem,4vw,3.6rem);color:var(--ink);
  margin:0 0 clamp(1.1rem,2.2vw,1.9rem);
  /* iki satırlık başlıklarda künyenin kaymaması için sabit yükseklik */
  min-height:1.08em;
}
.pshow-title em{font-style:normal;color:var(--gold-dark)}
/* etiket sütunu sabit genişlikte → değer sütunu her üründe aynı x'te başlar */
.pshow-specs{
  display:grid;grid-template-columns:clamp(7rem,10.5vw,9.5rem) 1fr;
  gap:clamp(.7rem,1.25vw,1.05rem) clamp(.9rem,2vw,1.8rem);
  margin:0;font-size:clamp(.85rem,1.12vw,1.02rem);line-height:1.5;
}
.pshow-specs dt{font-weight:600;color:var(--ink)}
.pshow-specs dd{margin:0;color:var(--ink-soft)}

/* Alt şerit — ürün yelpazesi. Koyu zemin kaldırıldı: sayfa zemininde duruyor */
.pstrip{
  width:100%;background:none;
}
.pstrip-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,1fr);
}
/* min-width:0 şart: varsayılan auto, uzun etiketlerin hücreyi şişirip
   son ürünleri şeridin dışına itmesine yol açıyordu */
.pstrip-item{
  position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;
}
/* hücrenin tamamı tıklanabilir/odaklanabilir alan */
/* ürünler sayfasındaki ilgili ürüne giden bağlantı */
.pstrip-btn{
  width:100%;background:none;border:0;cursor:pointer;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(1.1rem,2.6vw,2.2rem) clamp(.35rem,.8vw,.8rem) clamp(.8rem,1.6vw,1.2rem);
  transition:transform .3s ease;
}
.pstrip-btn:focus-visible{outline:2px solid var(--green-700);outline-offset:-4px}
.pstrip-item:hover .pstrip-btn,
.pstrip-item.is-active .pstrip-btn{transform:translateY(-4px)}
/* hücreler arası ayraç — daha ince (1px) ve koyu; ilk hücrenin solunda olmaz */
.pstrip-item + .pstrip-item::before{
  content:"";position:absolute;left:0;top:22%;bottom:12%;
  width:var(--rule-w);background:var(--rule-c-soft);
}
/* 1.48vw: en uzun etiket ("Beyazlatılmış Fındık") sitenin en dar
   desteklenen genişliğinde (1180px) bile tek satıra sığar */
/* Ürün ikonu — adın üstünde, sitenin diğer ikonlarıyla aynı iki renkli
   çizgi diliyle (koyu kontur + yeşil vurgu) */
.pstrip-ico{
  --vico-dark:#1f3a1f;--vico-acc:#6f9c46;
  /* yükseklik aspect-ratio yerine açıkça verilir: PNG ikonun büyük doğal
     boyutu, esnek öğenin otomatik min yüksekliğini şişirip hücreyi kaydırıyordu */
  width:clamp(26px,2.6vw,34px);height:clamp(26px,2.6vw,34px);
  flex:0 0 auto;min-height:0;
  display:grid;place-items:center;margin-bottom:.6rem;
  transition:transform .3s ease;
}
.pstrip-ico svg{width:100%;height:100%;overflow:visible}
/* PNG ikonlar (koyu yeşil çizgili) diğer ikonlarla aynı kutuya oturur.
   min-height/-width:0 şart: ızgara ögesinin varsayılan auto min boyutu,
   256px'lik PNG yüzünden kutuyu şişirip hücreyi aşağı kaydırıyordu. */
/* Seçici, ürün fotoğrafı kuralı (.pstrip-item img) ile aynı ağırlıkta olduğu
   için ikon 62px'e büyüyüp etiketin üstüne taşıyordu; bir sınıf daha eklendi. */
.pstrip-item .pstrip-ico img{
  width:100%;height:100%;min-width:0;min-height:0;max-width:none;
  object-fit:contain;display:block;margin-top:0;filter:none;
}
.pstrip-ico .i-dark{fill:none;stroke:var(--vico-dark);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pstrip-ico .i-dark-f{fill:var(--vico-dark);stroke:none}
.pstrip-ico .i-acc{fill:none;stroke:var(--vico-acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pstrip-ico .i-acc-f{fill:var(--vico-acc);stroke:none}
.pstrip-item:hover .pstrip-ico,
.pstrip-item.is-active .pstrip-ico{transform:translateY(-3px)}
.pstrip-name{
  font-family:var(--serif);font-weight:700;color:var(--green-900);
  font-size:clamp(.85rem,1.48vw,1.4rem);line-height:1.25;
  text-align:center;transition:color .25s ease;
  /* İngilizcede bazı adlar iki satıra düşüyor; iki satırlık yer ayrılarak
     tüm ürün görselleri aynı hizada başlar */
  min-height:2.5em;display:flex;align-items:flex-start;justify-content:center;
}
.pstrip-item:hover .pstrip-name,
.pstrip-item.is-active .pstrip-name{color:var(--gold-deep)}
/* Sabit yükseklikli kutu + contain: görseller şeffaf kenarlarından kırpıldığı
   için hepsi kutunun yüksekliğini doldurur → eşit boyut, üstten ve alttan hizalı.
   Yükseklik, en geniş oranlı ürün (kıyılmış, 2.06) bile hücreye sığacak
   şekilde seçildi; böylece hiçbiri genişlikten sınırlanıp kısalmaz. */
.pstrip-item img{
  display:block;width:100%;max-width:236px;
  height:clamp(62px,6vw,110px);
  object-fit:contain;object-position:center;
  margin-top:clamp(.5rem,1.2vw,1rem);
  /* görsellerin kendi arka planı olduğu için siluet gölgesi kapatıldı */
  transition:transform .3s ease;
}
.pstrip-item:hover img,
.pstrip-item.is-active img{transform:scale(1.06)}

/* ============================================================
   KÜRESEL TEDARİK — noktalı dünya haritası + animasyonlu rotalar
   Yapı ve işaretçi konumları referans uygulamadan alındı;
   başlık/zemin sitenin genel diline uyarlandı (.sec-head + krem zemin).
   ============================================================ */
.exmap{
  position:relative;background:var(--cream);color:var(--ink);overflow:hidden;
  padding:clamp(2.6rem,4.5vw,3.8rem) 0 clamp(2.2rem,3.5vw,3rem);
}
/* haritanın arkasında hafif ızgara dokusu */
.exmap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(38,37,31,.05) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(to bottom,rgba(38,37,31,.05) 1px,transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 78%);
}
.exmap .container{position:relative;z-index:2}

/* başlık altındaki gösterge — ortalı */
.exmap-legend{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:flex;justify-content:center;gap:clamp(1.2rem,2.4vw,2.2rem);
  font-family:var(--sans);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.exmap-legend li{display:flex;align-items:center;gap:.5rem}
.exmap-legend i{width:9px;height:9px;border-radius:50%;flex:none}
.lg-hub{background:var(--gold);box-shadow:0 0 0 3px rgba(184,150,78,.25)}
.lg-dest{background:var(--green-600)}

/* --- harita sahnesi --- */
.mapbox{
  position:relative;width:100%;aspect-ratio:1307/630;
  margin:clamp(1.8rem,3.5vw,3rem) auto 0;
}
.mapbox .map-dots{
  position:absolute;inset:0;width:100%;height:100%;
  color:rgba(43,47,42,.20);
}
.mapbox .map-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* rotalar: çizgi kendini çizerek uzar (uzunluk JS'ten) */
.ex-arc{
  fill:none;stroke:var(--green-600);stroke-width:1.6;opacity:.55;
  stroke-linecap:round;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
}
.exmap.in-view .ex-arc{animation:arcDraw 2.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes arcDraw{to{stroke-dashoffset:0}}

/* işaretçiler */
.mk{
  position:absolute;transform:translate(-50%,-50%);
  width:14px;height:14px;z-index:2;
}
.mk::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--green-600);
  box-shadow:0 0 0 2px rgba(250,249,246,.95),0 0 8px 1px rgba(60,110,66,.45);
}
.mk::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--green-600);opacity:0;
}
.exmap.in-view .mk::before{animation:mkPulse 2.8s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes mkPulse{
  0%{transform:scale(.4);opacity:.75}
  70%{transform:scale(2.3);opacity:0}
  100%{opacity:0}
}
.mk.mk-hub{width:17px;height:17px;z-index:3}
.mk.mk-hub::after{
  inset:4px;background:var(--gold);
  box-shadow:0 0 0 2px rgba(250,249,246,.95),0 0 14px 2px rgba(184,150,78,.55);
}
.mk.mk-hub::before{border-color:var(--gold);border-width:2px}

/* üzerine gelince ülke adı çıkar; merkez etiketi hep açık */
.mk-lbl{
  position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:rgba(250,249,246,.94);border:1px solid rgba(31,58,31,.18);
  padding:.18rem .45rem;white-space:nowrap;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
/* ülke isimleri gösterilmiyor — etiketler yalnızca ekran okuyucular için */
.mk-lbl{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  opacity:1;background:none;transform:none;left:auto;top:auto;
}

/* hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .exmap.in-view .ex-arc,.exmap.in-view .mk::before{animation:none}
  .ex-arc{stroke-dashoffset:0}
}

/* ============================================================
   KÜRESEL TEDARİK — noktalı dünya haritası + animasyonlu rotalar
   Yapı ve işaretçi konumları referans uygulamadan alındı;
   başlık/zemin sitenin genel diline uyarlandı (.sec-head + krem zemin).
   ============================================================ */
.exmap{
  position:relative;background:var(--cream);color:var(--ink);overflow:hidden;
  padding:clamp(2.6rem,4.5vw,3.8rem) 0 clamp(2.2rem,3.5vw,3rem);
}
/* haritanın arkasında hafif ızgara dokusu */
.exmap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(38,37,31,.05) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(to bottom,rgba(38,37,31,.05) 1px,transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 78%);
}
.exmap .container{position:relative;z-index:2}

/* başlık altındaki gösterge — ortalı */
.exmap-legend{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:flex;justify-content:center;gap:clamp(1.2rem,2.4vw,2.2rem);
  font-family:var(--sans);font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.exmap-legend li{display:flex;align-items:center;gap:.5rem}
.exmap-legend i{width:9px;height:9px;border-radius:50%;flex:none}
.lg-hub{background:var(--gold);box-shadow:0 0 0 3px rgba(184,150,78,.25)}
.lg-dest{background:var(--green-600)}

/* --- harita sahnesi --- */
.mapbox{
  position:relative;width:100%;aspect-ratio:1307/630;
  margin:clamp(1.8rem,3.5vw,3rem) auto 0;
}
.mapbox .map-dots{
  position:absolute;inset:0;width:100%;height:100%;
  color:rgba(43,47,42,.20);
}
.mapbox .map-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* rotalar: çizgi kendini çizerek uzar (uzunluk JS'ten) */
.ex-arc{
  fill:none;stroke:var(--green-600);stroke-width:1.6;opacity:.55;
  stroke-linecap:round;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
}
.exmap.in-view .ex-arc{animation:arcDraw 2.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes arcDraw{to{stroke-dashoffset:0}}

/* işaretçiler */
.mk{
  position:absolute;transform:translate(-50%,-50%);
  width:14px;height:14px;z-index:2;
}
.mk::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--green-600);
  box-shadow:0 0 0 2px rgba(250,249,246,.95),0 0 8px 1px rgba(60,110,66,.45);
}
.mk::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--green-600);opacity:0;
}
.exmap.in-view .mk::before{animation:mkPulse 2.8s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes mkPulse{
  0%{transform:scale(.4);opacity:.75}
  70%{transform:scale(2.3);opacity:0}
  100%{opacity:0}
}
.mk.mk-hub{width:17px;height:17px;z-index:3}
.mk.mk-hub::after{
  inset:4px;background:var(--gold);
  box-shadow:0 0 0 2px rgba(250,249,246,.95),0 0 14px 2px rgba(184,150,78,.55);
}
.mk.mk-hub::before{border-color:var(--gold);border-width:2px}

/* üzerine gelince ülke adı çıkar; merkez etiketi hep açık */
.mk-lbl{
  position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:rgba(250,249,246,.94);border:1px solid rgba(31,58,31,.18);
  padding:.18rem .45rem;white-space:nowrap;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
/* ülke isimleri gösterilmiyor — etiketler yalnızca ekran okuyucular için */
.mk-lbl{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  opacity:1;background:none;transform:none;left:auto;top:auto;
}

/* hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .exmap.in-view .ex-arc,.exmap.in-view .mk::before{animation:none}
  .ex-arc{stroke-dashoffset:0}
}

/* ============================================================
   RAKAMLARLA NUTEKS — hero altı koyu şerit
   (ürün şeridiyle aynı koyu zemin + altın çizgi dili)
   ============================================================ */
.statband{
  width:100%;background:#2D2F2A;
  border-top:var(--rule-w) solid var(--rule-c-soft);
}
.statband-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);
}
/* min-width:0 → uzun etiketler hücreyi şişirip son sütunları dışarı itmesin */
.statband-item{
  position:relative;min-width:0;text-align:center;
  padding:clamp(1.5rem,2.4vw,2.2rem) clamp(.5rem,1.1vw,1.1rem);
}
.statband-item + .statband-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:1px;background:rgba(255,255,255,.26);
}
.statband-value{
  font-family:var(--serif);font-weight:500;color:#fff;
  font-size:clamp(1.45rem,2.35vw,2.3rem);line-height:1.1;
  letter-spacing:.02em;margin:0 0 .75rem;
  white-space:nowrap;
}
/* birim ekleri altın ve küçük — em tabanlı, sayıyla birlikte ölçeklenir */
.statband-unit{
  font-family:var(--sans);font-weight:500;color:var(--gold);
  font-size:.4em;letter-spacing:.09em;text-transform:uppercase;
  margin-left:.28em;
}
.statband-unit-pre{margin:0 .18em 0 0}
.statband-label{
  font-family:var(--sans);font-weight:400;
  color:rgba(255,255,255,.72);
  font-size:clamp(.6rem,.8vw,.76rem);
  letter-spacing:.14em;text-transform:uppercase;
  line-height:1.55;margin:0;
}
/* Ürün adı — bölümde sağa ve sola yaslı, büyük ve silik */
.pname{
  position:absolute;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;
  font-family:var(--serif);font-weight:600;white-space:nowrap;line-height:1;
  font-size:clamp(2.6rem,6vw,5.4rem);color:rgba(38,37,31,.075);
  text-transform:uppercase;letter-spacing:.02em;
  transition:opacity .5s ease;
}
.pname-l{left:calc(-1 * (50vw - min(1180px,94%)/2) + 1.2rem);text-align:left}
.pname-r{right:calc(-1 * (50vw - min(1180px,94%)/2) + 1.2rem);text-align:right}
.pshow-stage{position:relative;width:100%;aspect-ratio:2825/1600;overflow:hidden}
.pshow-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:translateX(5%) scale(1.045);filter:blur(9px);
  will-change:opacity,transform,filter;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1),filter .85s ease;
}
.pshow-img.from-left{transform:translateX(-5%) scale(1.045)}
.pshow-img.is-active{opacity:1;transform:none;filter:none;z-index:2}
.pshow-img.leaving{opacity:0;transform:translateX(-4%) scale(.985);filter:blur(6px);z-index:1}
.pshow-img.leaving.to-right{transform:translateX(4%) scale(.985)}
/* nav: arrows + upcoming thumbnails (bottom-right) */
.pshow-nav{position:absolute;right:1.5%;bottom:5%;display:flex;align-items:center;gap:1.2rem;z-index:6}
.pshow-arrows{display:flex;gap:.6rem}
.pgal-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.6);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(3px);transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.pgal-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pgal-arrow:hover{background:var(--green-700);color:#fff;border-color:var(--green-700);transform:translateY(-2px)}
.pgal-arrow:active{transform:translateY(0) scale(.94)}
.pshow-thumbs{display:flex;gap:.7rem}
.pthumb{width:132px;aspect-ratio:2825/1600;border:0;padding:0;background:var(--paper-2);overflow:hidden;
  border-radius:6px;cursor:pointer;opacity:.82;box-shadow:none;
  transition:transform .4s var(--ease),opacity .35s ease,box-shadow .35s ease}
.pthumb img{width:100%;height:100%;object-fit:contain;display:block}
.pthumb:hover{transform:translateY(-5px);opacity:1;box-shadow:0 20px 34px -16px rgba(30,25,10,.5)}

/* ---- Hakkımızda alt-başlık kartları ---- */
.haklinks{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(2.5rem,5vw,4rem)}
.haklink{display:flex;flex-direction:column;gap:.7rem;min-height:170px;padding:1.7rem 1.5rem;
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.haklink::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--green-900),var(--green-500));transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.haklink:hover{transform:translateY(-6px);box-shadow:0 28px 52px -28px rgba(31,58,31,.5);border-color:transparent}
.haklink:hover::before{transform:scaleY(1)}
.haklink-no{font-family:var(--serif);font-size:1.15rem;color:var(--gold);opacity:.75}
.haklink h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.15;color:var(--ink)}
.haklink-go{margin-top:auto;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700)}

/* ---- Ürünler kenar blok isimleri ---- */
.pshow-side{position:absolute;top:50%;writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,4.2vw,4.4rem);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(38,37,31,.09);white-space:nowrap;pointer-events:none;z-index:0;transition:opacity .5s ease}
.pshow-side-l{left:-.4rem;transform:translateY(-50%) rotate(180deg)}
.pshow-side-r{right:-.4rem;transform:translateY(-50%)}

/* ---- Dekoratif mouse-reaktif / parallax fındıklar ---- */
.contact{position:relative;overflow:hidden}
.contact-panel{position:relative;z-index:2}
.deco-nut[data-mouse]{position:absolute;z-index:0;pointer-events:none;opacity:.5;
  filter:blur(1.5px);will-change:transform;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.contact-nut-1{width:160px;left:-34px;top:12%}
.contact-nut-2{width:190px;right:-46px;bottom:10%}
.certs-nut-1{width:150px;left:-30px;top:12%;opacity:.4;filter:blur(2px)}
.certs-nut-2{width:185px;right:-42px;bottom:8%;opacity:.4;filter:blur(2px)}

/* ---- Alt sayfalar (Hakkımızda alt başlıkları, Sürdürülebilirlik) ---- */
/* Tüm alt sayfalarda bant aynı kalınlıkta: sabit yükseklik + dikey ortalama.
   Başlık kaç satır olursa olsun bant boyu değişmez. */
.page-hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--green-900),var(--green-700) 60%,var(--green-600));
  min-height:420px;display:flex;align-items:center;
  padding:clamp(6rem,10vh,7rem) 0 clamp(2rem,4vw,3rem)}
.page-hero::after{content:"";position:absolute;right:-4%;top:-30%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%);pointer-events:none}
.page-hero .container{position:relative;z-index:2;max-width:900px}
.page-hero .eyebrow{color:var(--gold-soft,#cbb27a)}
.page-hero h1{font-family:var(--serif);font-weight:500;line-height:1.08;color:#fff;
  font-size:clamp(2.2rem,5vw,3.7rem);margin:.2rem 0 .6rem}
.page-hero .page-lede{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:60ch;margin-top:.8rem}
.article{background:var(--paper);padding:clamp(3.2rem,6vw,5.5rem) 0 clamp(3.5rem,7vw,6rem)}
.article .container{max-width:840px}
.article p{font-size:1.06rem;line-height:1.9;color:var(--ink-soft);margin-bottom:1.35rem}
.article h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--green-700);margin:2.4rem 0 1rem}
/* İç sayfa ara başlıkları — tek bir ortak stil (Değerlerimiz, Sürdürülebilirlik
   odak alanları, Değerlerimiz kartları hepsi bu ölçüyü kullanır) */
.article h3,
.article .value-title,
.valuecard h3{
  font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:1.2;
  font-size:clamp(1.3rem,1.8vw,1.5rem);color:var(--green-700);
  margin:1.8rem 0 .5rem;width:fit-content;
}
/* ara başlıklar da ana başlıklarla aynı dilde: kendi genişliğinde aksan çizgisi */
.article h3::after{content:"";display:block;width:100%;height:var(--rule-w);
  background:var(--rule-c);margin:.55rem 0 .85rem}
.article .lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--green-700);line-height:1.5;margin-bottom:1.8rem}
.article-cta{margin-top:2.6rem;display:flex;gap:1rem;flex-wrap:wrap}
.back-link{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:1.2rem;transition:opacity .25s,gap .25s}
.back-link:hover{opacity:1;gap:.7rem}
/* Köklü Uzmanlık page-hero: başlığın yanına zemine geçişli (silik→net) tesis görseli */
.page-hero-media{min-height:clamp(460px,58vh,620px);overflow:hidden}
/* İletişim sayfası: yeşil bant diğer sayfalarla birebir aynı ölçüde kalır;
   form dizüstü ekranlarda daha erken görünsün diye yalnızca altındaki
   bölüm boşluğu kısaltıldı. */
.page-hero-compact + .contact{padding-top:clamp(1.6rem,2.8vw,2.4rem)}
.page-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Maske metin bölgesinde yumuşak kalır, metnin bittiği yerden sonra
   tam opaklığa çıkar — böylece binadaki logo net görünür. */
/* Görsel 80px aşağı kaydırıldı ki binadaki logo yapışkan menünün altında
   kalmasın; yükseklik aynı kadar artırılarak alt kenar boşluğu kapatıldı.
   (object-position işe yaramıyordu: kırpma yatay, dikey pay yok.) */
.page-hero-bg img{position:absolute;right:0;top:80px;width:68%;height:calc(100% + 80px);object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.38) 44%,#000 60%);
          mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.38) 44%,#000 60%)}
.page-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--green-900) 20%,rgba(31,58,31,.45) 50%,transparent 72%)}
/* Sertifikalar kapağı: konu fabrika değil fındık; maske ve yeşil örtü daha
   erken açılıyor ki fındık kümesi tam ve net görünsün. */
.page-hero-findik .page-hero-bg img{
  width:74%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 16%,#000 34%);
          mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 16%,#000 34%);
}
.page-hero-findik .page-hero-bg::after{
  background:linear-gradient(to right,var(--green-900) 14%,rgba(31,58,31,.32) 38%,transparent 58%);
}
.page-hero-media .container{position:relative;z-index:2}
.page-hero-cap{margin-top:1.3rem;font-size:.85rem;font-style:italic;color:rgba(255,255,255,.82);max-width:44ch}
.valuecards{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2rem}
.valuecard{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:1.8rem;transition:transform .35s,box-shadow .35s}
.valuecard:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(31,58,31,.4)}
/* olcu/renk ortak ara-baslik kuralindan gelir; burada yalniz bosluk */
.valuecard h3{margin:0 0 .5rem}
.valuecard p{margin:0;font-size:.96rem;line-height:1.7;color:var(--ink-soft)}

/* ---- Ortak bölüm başlığı (ortalı, üstte, ince çizgi) ---- */
.sec-head{text-align:center;margin:0 auto clamp(1.6rem,3vw,2.4rem);position:relative;z-index:2}
/* anasayfa bölüm başlıkları altın */
.sec-title{font-family:var(--serif);font-weight:600;letter-spacing:.01em;
  font-size:clamp(2rem,3.4vw,2.9rem);color:var(--gold-deep);line-height:1.1}
.sec-head{width:fit-content;margin-inline:auto}
/* anasayfadaki ortalı bölüm başlıklarının altındaki aksan çizgisi kaldırıldı */
.sec-rule{display:none}
.reveal.in .sec-rule,.sec-head.reveal.in .sec-rule,.reveal.in.sec-head .sec-rule{transform:scaleX(1)}
.sec-head.reveal .sec-rule{transform:scaleX(0)}
.sec-head.reveal.in .sec-rule{transform:scaleX(1)}

/* ---- CTA yazıları tamamen beyaz ---- */
.ctaband-in .eyebrow{color:#fff;opacity:.95}
.ctaband-in .display,.ctaband-in .display em{color:#fff}
.ctaband-in .lede{color:rgba(255,255,255,.96)}
.ctaband-btn{margin-top:.4rem}


/* ---- Bölümler arası scroll-hareketli kenar fındıkları ---- */
.intro,.products{position:relative;overflow:hidden}
.intro .container,.products .container,.pshow{position:relative;z-index:2}
/* Kenar fındıkları — kimi silik/bulanık, kimi net; hafif eğimli, organik yerleşim */
.sec-nut{position:absolute;z-index:0;pointer-events:none;will-change:transform}
.sec-nut img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 26px rgba(40,40,20,.22))}
.intro-nut-1{width:168px;top:6%;right:-46px;opacity:.5;filter:blur(2.5px);rotate:-14deg}
.intro-nut-2{width:132px;bottom:12%;left:-38px;opacity:.9;filter:blur(.2px);rotate:11deg}
.products-nut-1{width:118px;top:14%;left:-32px;opacity:.42;filter:blur(3px);rotate:16deg}
.products-nut-2{width:186px;bottom:6%;right:-52px;opacity:.92;filter:blur(.2px);rotate:-9deg}

/* ---- Sertifikalar başlık bloğu (referans görsele göre) ---- */
.certs-subtitle{font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(1.15rem,1.9vw,1.55rem);color:var(--green-700);text-align:center;margin:1.1rem auto 0;line-height:1.3}
.certs-orn{display:block;text-align:center;margin:.7rem 0 0}
.certs-orn::before{content:"—\00A0\00A0\221E\00A0\00A0—";color:var(--gold);letter-spacing:.1em;font-size:1.05rem}
.certs-head .lede{margin-top:1.1rem}

/* ---- Sertifikalar kenar fındıkları (blanık, scroll ile hareket) ---- */
.cnut{position:absolute;z-index:0;pointer-events:none;will-change:transform}
.cnut img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 20px rgba(40,40,20,.18))}
.cnut-tr{width:150px;top:4%;right:1.5%;opacity:.32;rotate:-12deg}
.cnut-l{width:124px;top:33%;left:-36px;opacity:.3;rotate:14deg}
.cnut-br1{width:206px;bottom:3%;right:3%;opacity:.94;rotate:-8deg}
.cnut-br2{width:118px;bottom:1.5%;right:16%;opacity:.88;rotate:15deg}

/* ============================================================
   SÜREÇ BÖLÜMÜ — Özen ve Hassasiyet Yolculuğu + 3 adım (tek bölüm)
   ============================================================ */
.jsec{
  position:relative;background:var(--cream);
  /* üst dolgu: Sürdürülebilirlik kartlarının alt yarısı buraya taşıyor */
  padding:clamp(9rem,15vw,13rem) 0 clamp(4rem,7vw,6rem);
}
.jsec-kicker{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:var(--gold-dark);text-align:center;margin-bottom:.8rem}
.jsec-nut-1{width:120px;top:22%;right:-34px;opacity:.4;filter:blur(2.6px);rotate:-13deg}
.jsec-nut-2{width:150px;bottom:8%;left:-42px;opacity:.9;filter:blur(.2px);rotate:12deg}

/* --- Editoryal görsel bandı: metin, görselin solundaki solmuş alanda --- */
.jsec-band{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;margin-top:clamp(2.2rem,4vw,3.4rem);
}
.jsec-media{position:relative}
.jsec-img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 40px rgba(40,50,25,.16))}
.jsec-copy{max-width:40ch}
.jsec-copy .eyebrow{margin-bottom:.7rem}
.jsec-sub{font-family:var(--serif);font-weight:600;line-height:1.16;color:var(--ink);
  font-size:clamp(1.5rem,2.4vw,2.05rem)}
.jsec-subrule{display:block;width:var(--rule-len);height:var(--rule-w);background:var(--rule-c);margin:1rem 0 1.3rem}
.jsec-lede{font-size:clamp(1.08rem,1.4vw,1.24rem);line-height:1.8;color:var(--ink-soft)}

/* --- 3 adım görsel kartları --- */
.jsteps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.2rem);
  width:min(880px,88%);              /* daha küçük kartlar */
  margin-top:clamp(6rem,9vw,8rem);   /* yazı bloğundan uzaklaştırıldı */
  margin-bottom:clamp(-190px,-13vw,-140px); /* ürünler bölümüne taşar */
  position:relative;z-index:4;
}
.jstep{margin:0;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.jstep img{
  width:100%;height:auto;display:block;border-radius:18px;
  /* kart zemini bölüm zeminine yumuşak karışsın */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 4%,#000 96%,transparent 100%);
}
.jstep:hover{transform:translateY(-8px)}

/* --- eski zaman çizelgesi (kullanılmıyor) --- */
.jtl{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,2.6vw,2.2rem);
  margin-top:clamp(3.5rem,6vw,5rem);padding:0;position:relative;
}
/* düğümler arası bağlantı çizgisi kaldırıldı */
.jtl-step{position:relative;padding-top:34px}
.jtl-node{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;
  width:68px;height:68px;border-radius:50%;
  background:var(--cream);border:1px solid rgba(184,150,78,.65);
  display:grid;place-items:center;color:var(--green-700);
  box-shadow:0 10px 24px -14px rgba(31,58,31,.4);
  transition:color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}
.jtl-node svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jtl-card{
  position:relative;z-index:1;color:#fff;border-radius:14px;
  padding:3.1rem 1.7rem 1.9rem;min-height:270px;
  background:linear-gradient(180deg,var(--green-900),var(--green-700) 50%,var(--green-500));
  box-shadow:0 26px 50px -24px rgba(31,58,31,.5);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
}
.jtl-step:hover .jtl-card{transform:translateY(-6px);box-shadow:0 34px 60px -24px rgba(31,58,31,.6)}
.jtl-step:hover .jtl-node{color:var(--gold-dark);border-color:var(--gold);transform:translateX(-50%) translateY(-4px)}
.jtl-no{display:block;font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:.55rem}
.jtl-card h3{font-family:var(--serif);font-weight:600;font-size:1.55rem;margin-bottom:.6rem;color:#fff}
.jtl-card p{font-size:.97rem;line-height:1.68;color:rgba(255,255,255,.92)}

/* ============================================================
   CAROUSEL SECTION: Production Process Carousel
   ============================================================ */
.carousel-sec{
  position:relative;overflow:hidden;
  padding:clamp(5rem,8vw,7rem) 0;
  min-height:720px;display:flex;align-items:center;
}

.carousel-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-attachment:fixed;z-index:0;
}

.carousel-overlay{
  position:absolute;inset:0;background:linear-gradient(135deg,rgba(31,58,31,.72),rgba(79,138,79,.65));
  z-index:1;
}

/* bölüm alanı daraltıldı — süreç kartları sayfada daha derli toplu dursun */
.carousel-container{
  position:relative;z-index:2;
  max-width:1080px;
}

.carousel-head{
  text-align:center;margin-bottom:clamp(3rem,5vw,4.5rem);
}

.carousel-kicker{
  font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.8);margin-bottom:.8rem;
}

.carousel-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.15;
  color:var(--gold);margin:0 auto 1.2rem;letter-spacing:.01em;
  width:fit-content;
}
/* anasayfadaki diğer bölüm başlıkları gibi, çizgisiz */

.carousel-subtitle{
  font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.65;
  color:rgba(255,255,255,.85);max-width:60ch;margin-inline:auto;
}

.carousel-wrapper{
  position:relative;overflow:hidden;border-radius:20px;
}

/* 6 kart eşit genişlikte; sahnede 4 tanesi tam sığar (4 kart arası 3 boşluk = 5.4rem) */
/* dikey nefes payı korunur, yan boşluklar daraltıldı */
.carousel-track{
  display:grid;grid-template-columns:repeat(6,calc((100% - 5.4rem) / 4));
  /* .products'taki .carousel-track kuralindan gelen align-items:flex-end'i sifirla;
     stretch olmazsa kartlar satir yuksekligine esitlenmez. */
  align-items:stretch;
  gap:1.8rem;transition:transform .6s cubic-bezier(.22,.61,.36,1);
  padding:clamp(1.6rem,2.4vw,2.2rem) clamp(.9rem,1.3vw,1.3rem);width:100%;
  will-change:transform;
}

.carousel-slide{
  flex-shrink:0;display:flex;flex-direction:column;
}

.slide-card{
  display:flex;flex-direction:column;background:rgba(255,255,255,.95);
  border-radius:16px;overflow:hidden;
  /* Yükseklik sabit değil: grid satırı en uzun karta göre büyür, height:100% ile
     bütün kartlar ona eşitlenir. Böylece metin uzasa da alt çizgi kırpılmaz. */
  height:100%;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.25);
  transition:transform .4s ease,box-shadow .4s ease;
}

.slide-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 60px -15px rgba(0,0,0,.35);
}

.slide-image{
  width:100%;height:200px;object-fit:cover;display:block;flex-shrink:0;
}

.slide-content{
  padding:clamp(1.5rem,2.5vw,2rem) clamp(1.1rem,1.9vw,1.5rem);flex:1;display:flex;flex-direction:column;
  overflow:visible;text-align:center;
}

.slide-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.05rem,1.55vw,1.25rem);color:var(--ink);
  margin-bottom:.8rem;line-height:1.25;
  /* iki satırlık sabit yükseklik → tek satırlık başlıklarda da
     açıklamalar tüm kartlarda aynı hizadan başlar */
  min-height:2.5em;
}

.slide-desc{
  font-size:.9rem;line-height:1.68;color:var(--ink-soft);
  margin-bottom:1.2rem;
}

/* alt çizgi: metin uzunluğundan bağımsız, her kartta aynı hizada */
.slide-content::after{
  content:"";display:block;margin-top:auto;
  width:100%;height:var(--rule-w);background:var(--rule-c-soft);border-radius:0;
}

/* Carousel Controls */
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:48px;height:48px;background:#fff;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  transition:background .3s,transform .3s;
}

.carousel-btn:hover{
  background:var(--green-600);
  transform:translateY(-50%) scale(1.08);
}

.carousel-btn svg{
  width:24px;height:24px;stroke:#333;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}

.carousel-btn:hover svg{
  stroke:#fff;
}

.carousel-prev{left:clamp(1rem,2vw,2rem);}
.carousel-next{right:clamp(1rem,2vw,2rem);}

/* Carousel Indicators */
.carousel-indicators{
  display:flex;justify-content:center;gap:1rem;margin-top:clamp(2.5rem,4vw,3.5rem);
}

.indicator{
  width:12px;height:12px;border:2px solid rgba(255,255,255,.6);
  background:transparent;border-radius:50%;cursor:pointer;
  transition:all .3s ease;
}

.indicator.active{
  background:var(--green-600);border-color:var(--green-600);width:32px;border-radius:6px;
}

/* ============================================================
   AÇILIŞ VİDEO POPUP
   ============================================================ */
.vpop{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:2rem}
.vpop[hidden]{display:none}
.vpop-backdrop{position:absolute;inset:0;background:rgba(14,16,10,.82);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s ease}
.vpop.open .vpop-backdrop{opacity:1}
/* Video dikey (9:16) — kutu orana göre daralıyor, siyah boşluk kalmıyor */
.vpop-box{
  position:relative;z-index:2;width:min(430px,90vw);border-radius:18px;overflow:hidden;
  background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1);
}
.vpop.open .vpop-box{opacity:1;transform:none}
.vpop-video{display:block;width:100%;height:auto;max-height:84vh;background:#000;object-fit:contain}
.vpop-close{
  position:absolute;top:.7rem;right:.7rem;z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.vpop-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.vpop-close:hover{background:var(--green-700);border-color:var(--green-700);transform:scale(1.06)}
.vpop-close:focus-visible,.vpop-sound:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vpop-sound{
  position:absolute;bottom:.8rem;left:.8rem;z-index:3;display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  color:#fff;font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;
  transition:background .25s ease,border-color .25s ease;
}
.vpop-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vpop-sound:hover{background:var(--green-700);border-color:var(--green-700)}
.vpop-sound.on{background:var(--green-700);border-color:var(--green-700)}
body.vpop-lock{overflow:hidden}

/* Video bitince: NUTEKS logosu sinematik giriş */
.vpop-logo{
  position:absolute;inset:0;z-index:4;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(31,58,31,.96),rgba(12,16,9,.99));
}
.vpop.ended .vpop-logo{display:flex}
.vpop-logo-glow{
  position:absolute;width:58%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(184,150,78,.42),transparent 68%);
  opacity:0;animation:vlGlow 2.4s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
.vpop-logo-img{
  position:relative;width:min(66%,260px);height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 8px 26px rgba(0,0,0,.6));
  opacity:0;transform:scale(1.5) translateY(10px);filter:blur(14px) brightness(0) invert(1);
  animation:vlLogo 1.5s cubic-bezier(.19,1,.22,1) .25s forwards;
}
.vpop-logo-rule{
  display:block;width:0;height:var(--rule-w);margin-top:1.1rem;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  animation:vlRule 1.1s cubic-bezier(.22,.61,.36,1) 1.1s forwards;
}
.vpop-logo-tag{
  position:relative;margin-top:.9rem;font-family:var(--serif);font-style:italic;
  font-size:clamp(.95rem,2.6vw,1.15rem);color:rgba(255,255,255,.86);letter-spacing:.02em;
  opacity:0;transform:translateY(12px);
  animation:vlTag .9s cubic-bezier(.22,.61,.36,1) 1.35s forwards;
}
@keyframes vlLogo{
  0%{opacity:0;transform:scale(1.5) translateY(10px);filter:blur(14px) brightness(0) invert(1)}
  60%{opacity:1}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(0) invert(1)}
}
@keyframes vlGlow{0%{opacity:0;transform:scale(.6)}55%{opacity:1}100%{opacity:.75;transform:scale(1.12)}}
@keyframes vlRule{to{width:58%}}
@keyframes vlTag{to{opacity:1;transform:none}}

/* ============================================================
   BÖLÜM KENAR FINDIKLARI (fındık1 + çotanak) — bulanık, iki kenarda
   ============================================================ */
/* Hakkımızda */
/* Süreç — Özen ve Hassasiyet */
.e-jsec-l{width:188px;top:30%;opacity:.85;rotate:12deg}
.e-jsec-r{width:132px;bottom:16%;opacity:.6;rotate:-10deg}
/* Ürünlerimiz */

.e-proc-l{width:176px;top:28%;opacity:.78;rotate:12deg}
.e-proc-r{width:126px;bottom:12%;opacity:.58;rotate:-9deg}
/* Sertifikalar */
/* İletişim */

/* Hakkımızda ağacı: maske yok — soldaki beyazlık kaldırıldı */

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .vpop-backdrop,.vpop-box{transition:none}
  .vpop-logo{animation:none !important;opacity:1 !important;transform:none !important}
  .hero-img{animation:none}
  .deco-nut{animation:none !important}
  .cnut{transform:none !important}
  .hero-content > *,.main-nav a,.reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none}
  .btn-gold:hover::after,.btn-green:hover::after{animation:none}
}


/* ============================================================
   BİRLEŞİK HAKKIMIZDA SAYFASI — konu blokları
   ============================================================ */
.topic{position:relative;padding:clamp(2.4rem,4vw,3.4rem) 0;border-top:var(--rule-w) solid var(--rule-c-soft)}
.topic:first-of-type{border-top:0;padding-top:0}
.topic-no{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--gold);opacity:.8;margin-bottom:.3rem}
.topic-title{
  font-family:var(--serif);font-weight:600;line-height:1.14;color:var(--ink);
  font-size:clamp(1.75rem,3vw,2.5rem);
}
/* Değerlerimiz başlığı — alt başlıklar bölüm başlığı formatına çıktığı için
   baskın kalsın diye büyütüldü. (.article h2'yi geçmek için iki sınıf gerekiyor) */
.article .topic-title-lg{font-size:clamp(2rem,3.4vw,2.6rem)}
/* Hakkımızda ve Sürdürülebilirlik: başlık altı aksan çizgileri kaldırıldı */
.article.cizgisiz .topic-title::after,
.article.cizgisiz .vhead::after,
.article.cizgisiz .value-title::after,
.article.cizgisiz h3::after{content:none}

/* iç sayfa başlıkları: çizgi başlığın genişliğini alır (başlığın ::after'ı) */
.topic-title{width:fit-content}
.topic-rule{display:none}
.topic-title::after{content:"";display:block;width:100%;height:var(--rule-w);
  background:var(--rule-c);margin:1rem 0 1.5rem}

/* Solda dikey görsel + sağda metin. Görsel, metin bloğunun tam yüksekliğini kaplar. */
.topic-media{
  display:grid;grid-template-columns:minmax(0,258px) 1fr;
  gap:clamp(1.4rem,2.6vw,2.2rem);align-items:stretch;
}
.topic-figure{margin:0;border-radius:12px;overflow:hidden;background:var(--cream-2)}
.topic-figure img{width:100%;height:100%;object-fit:cover;display:block}
.topic-body > :first-child{margin-top:0}
.topic p{margin-bottom:1.1rem;color:var(--ink-soft)}
.topic .lead{font-family:var(--serif);font-style:italic;color:var(--green-700);
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.55;margin-bottom:1.5rem}

/* Değerlerimiz — kutu yok; sayfanın geri kalanıyla aynı başlık + açıklama düzeni.
   Başlıklar üstteki bölüm başlıklarıyla birebir aynı (.article h2 ile eşleşir),
   açıklamalar sayfanın standart paragraf stilini kullanır (.article p). */
/* ölçü/renk ortak .article h3 kuralından gelir; burada yalnız boşluk */
.article .value-title{margin:2.2rem 0 .7rem}
.article .value-title::after{
  content:"";display:block;width:100%;height:var(--rule-w);
  background:var(--rule-c);margin:.7rem 0 0;
}

/* ============================================================
   İLETİŞİM — sol: iletişim bilgileri, sağ: Bize Ulaşın formu
   ============================================================ */
.contact-panel{
  /* Sol sütun içeriğine göre daraltıldı: en geniş satır ~220px, oysa eşit
     bölüşümde 490px'e çıkıp iki blok arasında büyük bir boşluk bırakıyordu. */
  display:grid;grid-template-columns:clamp(280px,29vw,360px) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3.25rem);
  align-items:stretch;      /* iki sütun aynı yükseklikte */
  background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
/* Sol sütun forma göre kısa kalıyordu; bloklar arasındaki pay eşit dağıtılır,
   böylece iletişim bilgileri ile form aynı hizada biter. */
.cdetails{display:flex;flex-direction:column}
/* Başlık altı boşluğu sağ sütunla birebir aynı → "E-Posta" satırı formdaki
   "Ad Soyad" ile aynı hizada başlar. Kalan pay iki auto üst boşluğa eşit
   dağılır; böylece "Üretim Tesisi" bloğu "Formu Gönder" ile hizalı biter. */
.cdetails .cline{margin-bottom:0}
.cdetails .cloc{margin-bottom:0;margin-top:auto}
/* flex sütunda inline-block esneyip tüm genişliğe yayılıyordu; çizgi yine
   başlık uzunluğunda kalsın diye içeriğe daraltıldı */
.cdetails .cget-title{align-self:flex-start}

/* Sol sütunun büyük başlığı ("Get in touch" karşılığı) */
/* daha küçük ve zarif: sitenin serif ailesi, altın ince çizgiyle.
   Çizgi başlık metni kadar uzun olsun diye başlık inline-block yapıldı
   (blok olsaydı çizgi sütunun tamamına yayılıyordu). */
/* ara başlık — site genelindeki ortak ölçü/renk (alt çizgisi korunur) */
.cget-title{
  display:inline-block;
  font-family:var(--serif);font-weight:600;letter-spacing:.01em;
  font-size:clamp(1.3rem,1.8vw,1.5rem);color:var(--green-700);line-height:1.2;
  margin:0 0 clamp(1.5rem,2.6vw,2.1rem);
}

/* Sol sütun: küçük gri etiket üstte, koyu değer altta */
.cline{margin-bottom:clamp(1.5rem,2.4vw,2rem)}
/* "Merkez Ofis" / "Üretim Tesisi" etiketleriyle birebir aynı tipografi */
.cline-label{
  font-family:var(--sans);font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .35rem;
}
.cline-value{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.65;
  color:var(--ink);margin:0;
}
.cline-value a{color:inherit;text-decoration:none;transition:color .25s}
.cline-value a:hover{color:var(--green-700)}

/* iki lokasyon bloğu: merkez ofis + üretim tesisi */
.cloc{margin-bottom:clamp(1.6rem,2.6vw,2.1rem)}
.cloc-label{
  font-family:var(--sans);font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .35rem;
}
.cloc-city{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(1.02rem,1.25vw,1.15rem);
  color:var(--ink);margin:0 0 .5rem;
}
.cloc-addr,.cloc-tel{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.6;
  color:var(--ink-soft);margin:0;
}
.cloc-tel{margin-top:.25rem}
.cloc-tel a{color:var(--ink-soft);text-decoration:none;transition:color .25s}
.cloc-tel a:hover{color:var(--green-700)}

/* Sosyal medya — şablondaki gibi dolu daireler */
.csocial{margin-top:clamp(2rem,3.2vw,2.6rem)}
.csocial-list{
  list-style:none;margin:.75rem 0 0;padding:0;
  display:flex;gap:.65rem;
}
.csocial-link{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--green-900);color:#fff;
  transition:background-color .25s ease,transform .25s ease;
}
.csocial-link svg{width:18px;height:18px;fill:currentColor;display:block}
.csocial-link:hover{background:var(--green-600);transform:translateY(-2px)}
.csocial-link:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}

/* Sağ: form — dolgulu, yuvarlak köşeli alanlar */
.contact-form{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  display:flex;flex-direction:column;gap:clamp(1.15rem,1.8vw,1.5rem);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.8vw,1.5rem)}
.field{display:block}
.contact-form .field .field-label{
  display:block;font-family:var(--sans);font-weight:500;
  font-size:.95rem;letter-spacing:normal;text-transform:none;
  color:var(--ink);margin-bottom:.55rem;
}
.contact-form .field input,.contact-form .field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:rgba(31,58,31,.045);border:1px solid transparent;border-radius:12px;
  padding:.95rem 1.15rem;
  transition:background-color .25s ease,border-color .25s ease;
}
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder{color:var(--ink-soft);opacity:.75}
.contact-form .field input:focus,.contact-form .field textarea:focus{
  outline:0;background:rgba(31,58,31,.06);
  border-color:var(--green-600);box-shadow:none;
}
.contact-form .field textarea{resize:vertical;min-height:190px;line-height:1.6}
/* şablondaki gibi tam genişlik, koyu, yuvarlak buton */
.contact-form .submit{
  width:100%;justify-content:center;border-radius:12px;margin-top:.5rem;
  padding:1.15rem 2rem;font-size:.95rem;letter-spacing:.04em;font-weight:500;
}
/* bölüm başlığı altındaki açıklama notu */
.sec-note{
  max-width:80ch;margin:1.3rem auto 0;text-align:center;
  font-size:1.1rem;line-height:1.7;color:var(--ink-soft);
}

/* Yalnızca ekran okuyucular için etiketler */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Mobil dışı: iki harita alt alta dar ekranda — ama masaüstü sabit */

/* ============================================================
   DEĞERLERİMİZ — yeşil bant + radyal değer şeması (hakkimizda)
   Merkezde logo amblemi, çevresinde anasayfadaki değer ikonları.
   ============================================================ */
/* ikonların iki rengi — .vrow'a bağlıydı, bu sayfada da gerekli */
.vgrid-ico{--vico-dark:#1f3a1f;--vico-acc:#6f9c46}

/* ============================================================
   DEĞERLERİMİZ (hakkimizda) — bant yok; başlık sayfa başlığıyla
   aynı ölçüde, blok halinde sola yaslı
   ============================================================ */
.article .vhead{
  font-family:var(--serif);font-weight:600;line-height:1.15;
  font-size:clamp(1.6rem,2.8vw,2.3rem);   /* .prow-title (ürün başlıkları) ile aynı */
  color:var(--gold-deep);
  margin:clamp(3rem,5vw,4.5rem) 0 0;
  width:fit-content;
}
/* diğer başlıklarla aynı aksan çizgisi — eskiden tam genişlikte ayırıcıydı */
.article .vhead::after{
  content:"";display:block;width:100%;height:var(--rule-w);
  background:var(--rule-c);margin:clamp(1rem,2vw,1.4rem) 0 0;
}

/* --- marka + ikon şeridi --- */
.vgrid{
  display:flex;flex-direction:column;align-items:center;
  margin:clamp(2.5rem,5vw,3.8rem) 0 clamp(2rem,4vw,3rem);
}
.vgrid-brand{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  margin-bottom:clamp(2.2rem,4.5vw,3.4rem);
}
.vgrid-mark{width:clamp(76px,10vw,104px);height:auto;display:block}
.vgrid-word{width:clamp(150px,19vw,215px);height:auto;display:block}

.vgrid-list{
  list-style:none;margin:0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(1rem,2.4vw,2.2rem);
}
.vgrid-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem;
  opacity:0;
}
.reveal.in .vgrid-item{
  animation:vgIn .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(.15s + var(--i) * .1s);
}
@keyframes vgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vgrid-ico{
  width:clamp(58px,7.5vw,84px);aspect-ratio:1/1;border-radius:50%;
  background:var(--paper-2);display:grid;place-items:center;
  border:1px solid rgba(31,58,31,.14);
  box-shadow:0 10px 24px -14px rgba(31,58,31,.5);
}
.vgrid-ico svg{width:56%;height:56%;overflow:visible}
.vgrid-ico img{width:82%;height:82%;object-fit:contain;display:block}
.vgrid-lbl{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(.64rem,.95vw,.78rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-900);line-height:1.35;
}

/* --- başlık + açıklamalar: sayfanın diğer bölümleriyle aynı --- */
.vtexts{margin-top:clamp(1rem,2vw,1.6rem)}

@media (prefers-reduced-motion:reduce){
  .reveal.in .vgrid-item{animation:none}
  .vgrid-item{opacity:1}
}

/* --- logodan ikonlara oklu bağlantılar --- */
.vgrid{position:relative}
.vgrid-links{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;
}
.vgrid-brand,.vgrid-list{position:relative;z-index:1}
.vg-link{
  fill:none;stroke:var(--gold-dark);stroke-width:1.4;stroke-opacity:.55;
  stroke-linecap:round;stroke-dasharray:var(--len,400);
  stroke-dashoffset:var(--len,400);
}
.reveal.in .vg-link{
  animation:vgDraw .85s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(.2s + var(--i) * .11s);
}
@keyframes vgDraw{to{stroke-dashoffset:0}}
.vg-arrow{fill:var(--gold-dark);opacity:0}
.reveal.in .vg-arrow{
  animation:vgArrow .3s ease forwards;
  animation-delay:calc(.95s + var(--i) * .11s);
}
@keyframes vgArrow{to{opacity:.85}}

@media (prefers-reduced-motion:reduce){
  .reveal.in .vg-link,.reveal.in .vg-arrow{animation:none}
  .vg-link{stroke-dashoffset:0}
  .vg-arrow{opacity:.85}
}

/* ============================================================
   ÜRÜNLER SAYFASI — alt alta sıralı, ince çizgilerle ayrılmış
   ============================================================ */
.plist{background:var(--paper);padding:clamp(2.5rem,5vw,4rem) 0 clamp(3.5rem,7vw,6rem)}

.prow{
  /* Görsel sütunu metinden bir miktar dar; align-items:center ile görsel,
     yanındaki başlık+açıklama+tablo bloğuna göre dikeyde ortalanır. */
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding:clamp(2.2rem,4.5vw,3.6rem) 0;
  border-bottom:var(--rule-w) solid var(--rule-c-soft);   /* ürünler arası ince çizgi */
}
/* anasayfadan #kabuklu gibi bir bağlantıyla gelindiğinde ürün sabit
   menünün altında kalmasın */
.prow{scroll-margin-top:110px}
.prow:first-child{padding-top:0}
.prow:last-child{border-bottom:0;padding-bottom:0}
/* görseller her satırda solda — hizalı tek bir sütun oluşturur */

/* Her ürün görseli aynı ölçüdeki alana contain ile oturur ve alanda
   dikey olarak ortalanır → görseller birbirine eşit büyüklükte ve
   üstten/alttan hizalı görünür (kaynak oranları 1.70–2.16 arasında). */
.prow-fig{margin:0;position:relative;aspect-ratio:16/9}
/* Gölge referanstaki gibi: HER fındığın kendi altında ayrı, yumuşak bir
   düşen gölge. Bunun için siluete uyan drop-shadow kullanılıyor —
   tek büyük elips yığını tek parça gibi gösterip yanlış duruyordu.
   Sıkı+koyu katman temas, geniş+açık katman yumuşak yayılma verir. */
.prow-fig img{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:block;width:100%;height:100%;object-fit:contain;
  /* görseller kendi arka planlarıyla kullanılıyor; siluet gölgesi
     dikdörtgen kutuya düşeceği için kapatıldı */
}
/* Fındık unu dağınık taneli bir yığın; siluet gölgesi her taneyi ayrı ayrı
   kopyalayıp kirli gösteriyor — bu üründe gölge yok.
   Kıyılmış fındık ve fındık püresi görsellerinin zemini şeffaf değil; siluet
   gölgesi dikdörtgen bir çerçeve gölgesine dönüştüğü için onlarda da yok. */
#un .prow-fig img,
#kiyilmis .prow-fig img,
#pure .prow-fig img{filter:none}
.prow-title{
  font-family:var(--serif);font-weight:600;line-height:1.15;
  font-size:clamp(1.6rem,2.8vw,2.3rem);color:var(--ink);margin:0 0 1.3rem;
}
/* başlık altındaki açıklama */
.prow-desc{
  font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.75;
  color:var(--ink-soft);margin:0 0 clamp(1.2rem,2.2vw,1.7rem);
  max-width:52ch;
}
/* ürün özellikleri tablosu */
.prow-table{
  width:100%;border-collapse:collapse;
  font-size:clamp(.9rem,1.05vw,1rem);line-height:1.55;
}
.prow-table tr{border-bottom:var(--rule-w) solid var(--rule-c-soft)}
.prow-table tr:last-child{border-bottom:0}
.prow-table th{
  text-align:left;font-weight:600;color:var(--ink);
  width:clamp(7rem,11vw,9.5rem);
  padding:clamp(.6rem,1.1vw,.85rem) 1rem clamp(.6rem,1.1vw,.85rem) 0;
  vertical-align:top;
}
.prow-table td{
  color:var(--ink-soft);padding:clamp(.6rem,1.1vw,.85rem) 0;
  vertical-align:top;
}

/* ============================================================
   HAKKIMIZDA — açıklama altındaki tipografik rakamlar
   (hero altındaki bantta duran İşleme Kapasitesi / İhracat Ağı)
   ============================================================ */
/* metni rakamlardan ayıran yatay çizgi — site genelindeki çizgi sistemi */
.ifigs-rule{
  border:0;height:var(--rule-w);background:var(--rule-c-soft);
  margin:clamp(1.5rem,2.8vw,2.2rem) 0 0;width:100%;
}
.ifigs{
  display:flex;flex-wrap:wrap;gap:clamp(1.8rem,4vw,3.2rem);
  margin:clamp(1.4rem,2.6vw,2rem) 0 0;
}
.ifig{min-width:0}
/* açıklama yazısından belirgin biçimde büyük ve farklı font (serif) */
.ifig-val{
  font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(2.1rem,3.6vw,3.1rem);color:var(--green-900);
  margin:0 0 .35rem;display:flex;align-items:baseline;gap:.3rem;
}
.ifig-val span{
  font-family:var(--sans);font-weight:500;
  font-size:.3em;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dark);
}
.ifig-lbl{
  font-family:var(--sans);font-size:clamp(.64rem,.82vw,.76rem);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;
}

/* Anasayfada sertifikalar ve üyelikler alt alta iki blok hâlinde durur.
   Her iki ızgara da aynı 15 kolonluk raya oturur: sertifikalar sırayı
   doldurur, üyelikler soldan hizalı 3 kart olarak kalır — böylece iki
   bloktaki kart ölçüsü birebir aynı olur. */
.certs-band{width:min(1560px,97%);max-width:none;margin-inline:auto}
/* başlık altındaki sekme butonları: tıklananın logoları gösterilir */
.certs-tabs{
  display:flex;justify-content:center;gap:.6rem;
  margin-top:clamp(1.6rem,2.8vw,2.4rem);margin-bottom:clamp(1.6rem,2.8vw,2.4rem);
}
.certs-tab{
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
  background:none;border:1px solid var(--line,rgba(31,58,31,.18));
  border-radius:999px;padding:.62rem 1.5rem;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.certs-tab:hover{color:var(--green-900);border-color:rgba(31,58,31,.4)}
/* aktif sekme, sitedeki .btn-green butonlarıyla aynı yeşil degrade */
.certs-tab.is-active{
  background:linear-gradient(135deg,var(--green-900),var(--green-600) 60%,var(--green-500));
  border-color:transparent;color:#fff;
  box-shadow:0 12px 26px -12px rgba(31,58,31,.75);
}
.certs-tab:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}
.certs-head + .certs-band{margin-top:clamp(2.2rem,3.5vw,3rem)}
/* Kart genişliği 15'lik sıraya göre sabit; satır ortalanır. Böylece 15
   sertifika sırayı tam doldurur, 3 üyelik kartı aynı ölçüde ve ortalı kalır. */
/* display:flex, tarayıcının [hidden] kuralını ezdiği için ayrıca gizlenir */
.certs-grid-2[hidden]{display:none}
.certs-grid-2{
  --cert-gap:clamp(.2rem,.4vw,.45rem);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--cert-gap);
  margin-top:0;
}
/* 16 logo tek satıra sığar; alt piksel yuvarlaması sonuncuyu alta
   düşürmesin diye kart başına yarım piksel pay bırakıldı */
.certs-grid-2 .cert{flex:0 0 calc((100% - 15 * var(--cert-gap)) / 16 - .5px)}
/* Tek sırada 18 kutu var; yatay iç boşluk kısılınca logoya kalan alan büyür.
   Alan kare olsun ki hiçbir oran (yatay/dikey) diğerine göre avantajlı
   olmasın — hepsi aynı ölçüdeki kareye contain ile sonuna kadar oturur. */
.certs-grid-2 .cert{padding:.8rem .25rem .7rem;gap:.55rem;border-radius:12px}
.certs-grid-2 figcaption{font-size:.62rem;letter-spacing:.03em}
.certs-grid-2 .cert-logo{height:auto;aspect-ratio:1}
/* Sertifikalar sayfası: sıralar elle belirlenmiş (3 / 4 / 4 ve üyelikler 3).
   Kart genişliği sabit, sıra ortalı — böylece farklı sayıda kart içeren
   sıralarda kartlar aynı boyda kalır ve sıralar birbirine göre ortalanır. */
.cert-row{
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:clamp(.8rem,1.6vw,1.3rem);
  margin:clamp(1.2rem,2.4vw,1.9rem) 0 0;
}
.cert-row .cert{
  flex:0 0 clamp(130px,15vw,178px);
  padding:1.5rem 1rem 1.15rem;
}
/* DSR satırı 5 kartlı: kartlar sıraya tam sığacak kadar daraltılır */
.cert-row-5 .cert{flex:0 0 calc((100% - 4 * clamp(.8rem,1.6vw,1.3rem)) / 5 - .5px)}
/* 3 kartlık sıra, 4 kartlık sıraların ortasına hizalanır
   (yarım kart + yarım aralık kadar sağa kayar) */
.cert-row-orta{
  padding-left:calc((clamp(130px,15vw,178px) + clamp(.8rem,1.6vw,1.3rem)) / 2);
}
/* Logosu henüz olmayan üyelik kartı — yalnızca ad, aynı yükseklikte durur */
.cert-yazi{justify-content:center;min-height:clamp(140px,15vw,180px)}
.cert-yazi figcaption{font-size:1rem;letter-spacing:.12em}

/* CTA bandı — içerik bloğu daha dar */
/* metin iki satira sigsin diye blok genisletildi */
.ctaband-in{max-width:980px;margin-inline:auto;padding-block:clamp(1.6rem,3vw,2.4rem)}
.ctaband-in .lede{max-width:none}

/* sayfa başlığı altındaki metin — başlıkla aynı blokta, iki yana yaslı */
/* Açıklama başlığın altında dar bir blok: SOLA hizalı, kelime araları
   normal (iki yana yaslama kelimeleri gereksiz açıyordu), uzun metin
   satır satır aşağı akar. */
.page-hero .page-lede,
.page-hero .page-lede-blok{
  text-align:left;text-align-last:auto;
  max-width:min(36ch,100%);margin-top:.9rem;
}

/* Bölümler arası ayırıcı — kenardan kenara uzanır. Kalınlık ve renk site
   genelindeki vurgu çizgileriyle aynı; yalnızca uzunluğu tam genişlik. */
.sec-divider{
  display:block;width:100%;height:var(--rule-w);
  background:var(--rule-c);margin:0;border:0;
}


/* Ürünler sayfası girişi: üstteki "Ürünlerimiz" başlığıyla aynı kolonda
   başlasın diye hero container'ın genişliğine (900px) oturtuluyor */
.plist .lead{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem,2vw,1.5rem);color:var(--green-700);line-height:1.5;
  max-width:900px;margin:0 auto clamp(2.2rem,4vw,3.2rem);
}

/* ================= YASAL SAYFALAR (KVKK / Çerez) ================= */
/* footer alt satirinda telif ile yan yana duran yasal linkler */
.footer-legal{display:flex;gap:clamp(1rem,2vw,1.8rem);flex-wrap:wrap}
.footer-legal a{
  font-family:var(--sans);font-weight:300;font-size:.8rem;
  color:rgba(255,255,255,.72);text-decoration:none;transition:color .25s;
}
.footer-legal a:hover{color:#fff}

/* madde listeleri: govde metniyle ayni tipografi */
.article-legal ul,.article-legal ol{
  margin:.6rem 0 1.2rem;padding-left:1.35rem;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,1.15vw,1.06rem);line-height:1.85;color:var(--ink-soft);
}
.article-legal li{margin-bottom:.4rem}
.article-legal li::marker{color:var(--gold-deep)}
.article-legal h2{margin-top:2.8rem}
.article-legal h3{margin-top:1.6rem}
.article-legal strong{font-weight:500;color:var(--ink)}
.article-legal a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.article-legal a:hover{color:var(--gold-deep)}
.legal-date{margin-top:2.6rem;font-size:.82rem;font-style:italic;color:var(--ink-soft)}
/* güncelleme tarihi metnin başındaysa üstteki boşluğu almasın */
.legal-date-ust{margin-top:0;margin-bottom:1.4rem}
/* metnin sonundaki bilgilendirme notu */
.legal-not{
  margin-top:2.8rem;padding-top:1.3rem;
  border-top:1px solid rgba(156,122,63,.3);
  font-size:.86rem;font-style:italic;color:var(--ink-soft);
}
/* metinde firma tarafindan doldurulmasi gereken alanlar */
.legal-todo{background:rgba(184,150,78,.18);color:var(--gold-deep);
  padding:.05em .35em;border-radius:3px;font-style:italic}


/* Sertifika adının altındaki tam açıklama — logo başlığından bir kademe ince */
.cert figcaption{line-height:1.35}
.cert-sub{
  display:block;margin-top:.2rem;
  font-family:var(--sans);font-weight:300;font-size:.68rem;
  letter-spacing:.01em;text-transform:none;color:var(--ink-soft);
  line-height:1.4;text-wrap:balance;
}
.certs-dark .cert-sub{color:rgba(255,255,255,.66)}

/* ============================================================
   ÇEREZ ONAYI — alt bant + ayarlar paneli
   Site paletiyle: koyu yeşil zemin, gold vurgular
   ============================================================ */
.ck-bar{
  position:fixed;inset:auto 0 0 0;z-index:280;
  /* zemin ".btn-green" (Ürünlerimizi İnceleyin) ile birebir aynı geçiş */
  background:linear-gradient(135deg,var(--green-900),var(--green-600) 60%,var(--green-500));
  border-top:2px solid var(--gold);
  box-shadow:0 -18px 44px -20px rgba(0,0,0,.6);
  transform:translateY(100%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.ck-bar.acik{transform:none}
.ck-bar[hidden]{display:none}
.ck-bar-in{
  display:flex;align-items:center;gap:clamp(1.5rem,3vw,3rem);
  padding-block:clamp(1.15rem,2vw,1.6rem);
}
.ck-bar-metin{flex:1;min-width:0}
.ck-bar-baslik{
  font-family:var(--serif);font-weight:600;letter-spacing:.01em;
  font-size:clamp(1.15rem,1.5vw,1.35rem);color:#fff;margin:0 0 .35rem;
}
.ck-bar-aciklama{
  font-family:var(--sans);font-weight:300;font-size:.83rem;line-height:1.65;
  color:#fff;margin:0;max-width:78ch;
}
.ck-bar-aciklama a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ck-bar-aciklama a:hover{color:var(--gold-soft)}
.ck-bar-btns{display:flex;align-items:center;gap:.7rem;flex:none;flex-wrap:wrap}

/* butonlar: sitenin yeşil/gold dili */
.ck-btn{
  font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  padding:.72rem 1.25rem;border-radius:999px;border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .2s;
}
.ck-btn:hover{transform:translateY(-1px)}
.ck-btn-ince{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.ck-btn-ince:hover{border-color:var(--gold);color:var(--gold-soft)}
.ck-btn-dolu{background:var(--gold);border-color:var(--gold);color:#2a2113;
  /* zeminin açık yeşil ucunda da butonlar ayrışsın */
  box-shadow:0 10px 22px -12px rgba(18,32,16,.75)}
/* Üç gold buton da aynı hover'a sahip: dolgu kalkar, çerçeveli görünüme
   yumuşak geçişle döner. Bant koyu zeminde beyaz çerçeve, ayarlar
   penceresi açık zeminde koyu gold çerçeve. */
.ck-bar .ck-btn-dolu:hover{
  background:transparent;border-color:rgba(255,255,255,.75);color:#fff;box-shadow:none;
}
.ck-modal-alt .ck-btn-dolu:hover{
  background:transparent;border-color:var(--gold-deep);color:var(--gold-deep);box-shadow:none;
}
.ck-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}

/* ---- ayarlar penceresi ---- */
.ck-modal{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:2rem}
.ck-modal[hidden]{display:none}
.ck-modal-fon{
  position:absolute;inset:0;background:rgba(14,16,10,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s ease;
}
.ck-modal.acik .ck-modal-fon{opacity:1}
.ck-modal-kutu{
  position:relative;width:min(980px,100%);max-height:min(680px,86vh);
  display:flex;flex-direction:column;background:var(--cream);
  border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.ck-modal.acik .ck-modal-kutu{opacity:1;transform:none}
.ck-modal-ust{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1.2rem,2.2vw,1.7rem) clamp(1.4rem,2.6vw,2.1rem);
  background:linear-gradient(135deg,var(--green-900) 0%,var(--green-600) 55%,var(--green-500) 100%);
}
.ck-modal-baslik{
  font-family:var(--serif);font-weight:600;letter-spacing:.01em;
  font-size:clamp(1.35rem,2vw,1.7rem);color:#fff;margin:0;
}
.ck-x{
  width:36px;height:36px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  border-radius:50%;color:#fff;transition:background .25s,border-color .25s;
}
.ck-x:hover{background:var(--gold);border-color:var(--gold);color:#2a2113}
.ck-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.ck-modal-govde{display:grid;grid-template-columns:290px 1fr;flex:1;min-height:0}
.ck-tablar{
  display:flex;flex-direction:column;overflow-y:auto;
  border-right:1px solid rgba(156,122,63,.28);background:rgba(184,150,78,.06);
}
.ck-tab{
  font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.07em;
  text-transform:uppercase;text-align:left;cursor:pointer;color:var(--ink-soft);
  background:none;border:0;border-bottom:1px solid rgba(156,122,63,.22);
  border-left:3px solid transparent;padding:1.15rem 1.3rem;line-height:1.45;
  transition:background .25s,color .25s,border-color .25s;
}
.ck-tab:hover{background:rgba(184,150,78,.12);color:var(--ink)}
.ck-tab.is-active{
  background:var(--cream);color:var(--green-700);
  border-left-color:var(--gold);font-weight:600;
}
.ck-paneller{overflow-y:auto;padding:clamp(1.4rem,2.6vw,2.1rem)}
.ck-panel{display:none}
.ck-panel.is-active{display:block}
.ck-panel-baslik{
  font-family:var(--serif);font-weight:600;letter-spacing:.01em;
  font-size:clamp(1.2rem,1.7vw,1.4rem);color:var(--green-700);margin:0 0 .9rem;
}
.ck-panel p{
  font-family:var(--sans);font-weight:300;font-size:.87rem;line-height:1.8;
  color:var(--ink-soft);margin:0 0 .9rem;
}
.ck-panel p strong{font-weight:500;color:var(--ink)}
.ck-panel a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.ck-panel a:hover{color:var(--gold-deep)}
.ck-hep{
  display:inline-block;font-family:var(--sans)!important;font-weight:600!important;
  font-size:.7rem!important;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-700)!important;background:rgba(79,138,79,.14);
  padding:.34rem .8rem;border-radius:999px;margin:0 0 1.1rem!important;
}

/* aç/kapa anahtarı */
.ck-switch{display:flex;align-items:center;gap:.7rem;cursor:pointer;margin:0 0 1.2rem}
.ck-switch input{position:absolute;opacity:0;width:0;height:0}
.ck-slider{
  width:44px;height:24px;flex:none;border-radius:999px;position:relative;
  background:rgba(0,0,0,.2);transition:background .25s;
}
.ck-slider::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.ck-switch input:checked + .ck-slider{background:var(--green-600)}
.ck-switch input:checked + .ck-slider::after{transform:translateX(20px)}
.ck-switch input:focus-visible + .ck-slider{outline:2px solid var(--gold);outline-offset:3px}
.ck-switch-ad{
  font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
}

.ck-modal-alt{
  display:flex;justify-content:flex-end;gap:.7rem;flex-wrap:wrap;
  padding:clamp(1rem,1.8vw,1.35rem) clamp(1.4rem,2.6vw,2.1rem);
  border-top:1px solid rgba(156,122,63,.28);background:rgba(184,150,78,.07);
}
.ck-modal-alt .ck-btn-ince{border-color:rgba(0,0,0,.25);color:var(--ink)}
.ck-modal-alt .ck-btn-ince:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
body.ck-lock{overflow:hidden}

/* ============================================================
   HERO İMZA SLOGANI — "Fındık Oldukça NUTEKS"
   Hero'nun alt kısmında, el yazısıyla soldan sağa yazılıyormuş gibi.
   Yazma etkisi clip-path ile: metin kalemin ucu ilerledikçe açılır;
   ucundaki yumuşak parıltı kalem izini taklit eder.
   ============================================================ */
.hero-slogan{
  /* Çerez bandı açıkken imzayı kapatıyordu: bandın yüksekliği kadar
     yukarı kayar, bant kapanınca yumuşak biçimde yerine döner. */
  position:absolute;left:50%;
  bottom:calc(clamp(2.8rem,7vh,5.4rem) + var(--ck-bar-y, 0px));
  transition:bottom .45s cubic-bezier(.22,.61,.36,1);
  transform:translateX(-50%);
  z-index:3;margin:0;pointer-events:none;white-space:nowrap;
  /* hero'daki NUTEKS logosu 187px; imza ondan bir tık büyük dursun */
  font-family:"Parisienne","Dancing Script",var(--serif),cursive;
  font-weight:400;font-size:38px;line-height:1.4;color:#fff;
  /* video karesi aydınlık olduğunda da okunsun diye katmanlı gölge */
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.8),0 0 38px rgba(0,0,0,.6);
}
.hero-slogan-yazi{
  display:inline-block;position:relative;
  /* alt/üst pay: Great Vibes'ın kuyrukları kırpılmasın */
  clip-path:inset(-25% 100% -35% -6%);
}
/* kalem ucu parıltısı — açılan kenarı yumuşatır */
.hero-slogan-yazi::after{
  content:"";position:absolute;top:-10%;bottom:-20%;width:26px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));
  filter:blur(5px);opacity:0;
}
/* sayfa yüklendiğinde yazılmaya başlar (hero başlığından hemen sonra) */
.loaded .hero-slogan-yazi{
  animation:imzaYaz 2.9s cubic-bezier(.62,.06,.36,1) .95s both;
}
.loaded .hero-slogan-yazi::after{
  animation:imzaKalem 2.9s cubic-bezier(.62,.06,.36,1) .95s both;
}
@keyframes imzaYaz{
  from{clip-path:inset(-25% 100% -35% -6%)}
  to  {clip-path:inset(-25% -6%  -35% -6%)}
}
@keyframes imzaKalem{
  0%  {left:0;opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{left:100%;opacity:0}
}
/* hareket azaltma tercihinde animasyon yok, slogan doğrudan görünür */
@media (prefers-reduced-motion:reduce){
  .hero-slogan-yazi,.loaded .hero-slogan-yazi{animation:none;clip-path:none}
  .hero-slogan-yazi::after,.loaded .hero-slogan-yazi::after{animation:none;display:none}
}

/* ---- Yasal sayfa tabloları (çerez aydınlatma metni) ---- */
.legal-firma{
  font-family:var(--sans);font-weight:500;font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 1.6rem;
}
.legal-tablo-kutu{overflow-x:auto;margin:1.4rem 0 2rem;
  border:1px solid rgba(156,122,63,.32);border-radius:12px}
.legal-tablo{border-collapse:collapse;width:100%;min-width:640px;
  font-family:var(--sans);font-weight:300;font-size:.82rem;line-height:1.7;color:var(--ink-soft)}
.legal-tablo th{
  font-weight:600;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--green-700);text-align:left;
  padding:.85rem 1rem;vertical-align:middle;
}
.legal-tablo td{padding:.85rem 1rem;vertical-align:top;
  border-top:1px solid rgba(156,122,63,.22)}
.legal-tablo tbody tr:nth-child(even){background:rgba(184,150,78,.05)}
.legal-tablo td:first-child{white-space:nowrap;font-weight:500;color:var(--ink)}
.legal-tablo td:nth-child(2){font-weight:500;color:var(--ink)}
/* ara başlık satırları */
.legal-tablo .tr-grup td{
  background:rgba(184,150,78,.16);font-weight:600;color:var(--green-700);
  letter-spacing:.02em;
}
.legal-tablo .tablo-bos{text-align:center;color:var(--ink-soft)}
/* metin içinden çerez ayarları panelini açan bağlantı */
.legal-baglanti{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--green-700);text-decoration:underline;text-underline-offset:2px;
}
.legal-baglanti:hover{color:var(--gold-deep)}
.legal-tablo-not{
  font-family:var(--sans);font-weight:300;font-size:.8rem;line-height:1.75;
  color:var(--ink-soft);background:rgba(184,150,78,.08);
  border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:.9rem 1.1rem;margin:-.6rem 0 2rem;
}

/* ============================================================
   DUYARLI DÜZEN (responsive)
   Site masaüstü için tasarlandı; aşağıdaki kırılma noktaları
   pencere daraldıkça düzeni yeniden dizer. Hiçbir içerik ekran
   dışında kalmaz, yatay kaydırma oluşmaz.
   ============================================================ */

/* ---------- ≤1180px: kenar boşlukları ve menü ---------- */
@media (max-width:1180px){
  .container{width:min(var(--maxw),94%)}
  .main-nav a{padding:.5rem .75rem;font-size:.76rem}
  .lang-switch{gap:.4rem}
  .hero-title{white-space:normal}   /* tek satır zorlaması kalksın */
}

/* ---------- ≤1024px: menü hamburger'a döner ---------- */
@media (max-width:1024px){
  .menu-toggle{display:flex;order:3}
  .header-inner{flex-wrap:wrap;gap:.9rem}
  .lang-switch{order:2;margin-left:auto}
  .main-nav{
    order:4;flex-basis:100%;flex-direction:column;align-items:stretch;
    border-radius:16px;padding:.5rem;margin:0;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .35s ease,opacity .3s ease,padding .3s ease;
  }
  .main-nav.open{max-height:26rem;opacity:1;padding:.6rem .5rem}
  .main-nav a{text-align:center;padding:.7rem 1rem;opacity:1;transform:none}
  .site-header.scrolled .menu-toggle span{background:var(--ink)}

  /* iki sütunlu bloklar tek sütuna iner */
  .intro-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .intro-visual{min-height:280px}
  .contact-panel{grid-template-columns:minmax(0,1fr)}
  .prow{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  /* içindeki görsel position:absolute olduğu için figürün kendi
     genişliği olmalı; yalnız margin:auto verilince 0'a düşüyordu */
  .prow-fig{width:100%;max-width:520px;margin-inline:auto}
  .footer-inner{grid-template-columns:1fr 1fr;row-gap:2.4rem}
  .footer-col{margin-left:0}
  .footer-contact{margin-left:0;grid-column:1 / -1}

  /* değerler: 5 → 3 sütun */
  .vrow{grid-template-columns:repeat(3,1fr);row-gap:2.4rem}

  /* çerez bandı ve paneli */
  .ck-bar-in{flex-direction:column;align-items:flex-start;gap:1rem}
  .ck-bar-btns{width:100%}
  .ck-modal-govde{grid-template-columns:minmax(0,1fr)}
  .ck-tablar{
    flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid rgba(156,122,63,.28);
  }
  .ck-tab{border-bottom:0;border-left:0;border-top:3px solid transparent;white-space:nowrap}
  .ck-tab.is-active{border-left-color:transparent;border-top-color:var(--gold)}
}

/* ---------- ≤900px: şeritler kaydırmalı olur ---------- */
@media (max-width:900px){
  :root{--maxw:1180px}
  html{font-size:16px}

  /* ürün şeridi: mobilde kaydırma yerine 2'li ızgara (hepsi görünür) */
  .pstrip-list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    /* ortadaki boşluk daraltıldı, dışarıya pay bırakıldı:
       ürünler birbirine yaklaşır, kenarlara yapışmaz */
    gap:.5rem .35rem;overflow:visible;
    padding:0 1.15rem;
  }
  .pstrip-item{min-width:0}
  /* hücreler arası ayraç çizgileri mobilde kaldırıldı */
  .pstrip-item + .pstrip-item::before{content:none}

  /* harita göstergesi: nokta metnin soluna değil üstüne alınır */
  .exmap-legend li{flex-direction:column;gap:.45rem;text-align:center}
  .exmap-legend{gap:1.6rem;align-items:flex-start}

  /* ürün adları bir kademe büyük */
  /* ad kutusu hücre genişliğini kullansın; içeriğe göre daralınca
     "Fındık Püresi" gereksiz yere alt satıra iniyordu */
  .pstrip-name{font-size:1rem;min-height:2.6em;width:100%}
  /* kart içi dikey dolgu daraltıldı: satırlar birbirine yaklaşsın */
  .pstrip-btn{padding:.45rem .35rem .35rem}
  .pstrip-item .pstrip-btn img,.pstrip-item img{margin-top:2px}

  /* görseller büyütüldü; kutular eşit olduğu için hepsi aynı ölçüde durur */
  .pstrip-item .pstrip-btn img,.pstrip-item img{height:104px}
  /* aktif ürünün %6 büyütmesi mobilde kapalı: hepsi birebir eşit görünsün */
  .pstrip-item.is-active img,.pstrip-item:hover img{transform:none}

  /* tek kalan son ürün (Fındık Püresi) ortalanır; genişliği diğerleriyle
     aynı kalsın diye tek sütun ölçüsüne sabitlenir */
  .pstrip-item:last-child:nth-child(odd){
    grid-column:1 / -1;
    max-width:calc(50% - .175rem);margin-inline:auto;
  }

  /* sertifika şeridi: sarmalı ızgara */
  .certs-grid-2{flex-wrap:wrap}
  .certs-grid-2 .cert{flex:0 0 calc((100% - 4 * var(--cert-gap)) / 5)}
  .cert-row .cert,.cert-row-5 .cert{flex:0 0 calc((100% - 2 * clamp(.8rem,1.6vw,1.3rem)) / 3)}
  .cert-row-orta{padding-left:0}

  /* harita bölümü */
  .exmap-grid{grid-template-columns:minmax(0,1fr)}
  .footer-inner{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .footer-brandcol{justify-items:start}
  .footer-tag{text-align:left}
  .footer-base{flex-direction:column;align-items:flex-start;gap:.8rem}
}

/* ---------- ≤700px: tek sütun, sıkı tipografi ---------- */
@media (max-width:700px){
  /* footer: logo ekranı kaplamasın, iletişim blokları alt alta insin */
  .footer-brand .brand-logo{height:40px}
  .footer-tag{max-width:none;text-align:left}
  .footer-contact{grid-template-columns:minmax(0,1fr);row-gap:1.6rem}
  .vrow{grid-template-columns:repeat(2,1fr)}
  .certs-grid-2 .cert{flex:0 0 calc((100% - 3 * var(--cert-gap)) / 4)}
  .cert-row .cert,.cert-row-5 .cert{flex:0 0 calc((100% - clamp(.8rem,1.6vw,1.3rem)) / 2)}
  .field-row{grid-template-columns:minmax(0,1fr)}
  /* hero: içerik ve imza alt alta dizilir (satır yönünde kalırsa imza
     başlığın yanına geçip üst üste biniyordu) */
  .hero{
    height:auto;min-height:78vh;
    flex-direction:column;justify-content:center;
    padding-block:clamp(4.5rem,16vh,7rem);
  }
  .hero-content{max-width:100%;width:100%}
  .hero-title{font-size:clamp(1.75rem,7.6vw,2.5rem);margin-bottom:.8rem;line-height:1.25}
  .hero-imza{font-size:1.2rem;margin-top:.9rem}
  .hero-imza-logo{height:1.4em}
  .hero-slogan{
    position:static;transform:none;width:100%;
    margin:1.8rem auto 0;white-space:normal;text-align:center;
    font-size:clamp(1.25rem,5.6vw,1.8rem);line-height:1.35;
  }
  /* imza yazma animasyonu satır kaydırmada bozulur; mobilde sade göster */
  .hero-slogan-yazi,.loaded .hero-slogan-yazi{animation:none;clip-path:none}
  .hero-slogan-yazi::after,.loaded .hero-slogan-yazi::after{animation:none;display:none}
  .page-hero-bg img{width:100%;opacity:.5}
  .ck-bar-btns{flex-direction:column;align-items:stretch}
  .ck-btn{width:100%;text-align:center;justify-content:center}
  .ck-modal{padding:1rem}
  .certs-tabs{flex-wrap:wrap}
}

/* ---------- ≤520px ---------- */
@media (max-width:520px){
  .brand-logo,.site-header.scrolled .brand-logo{height:26px}
  .vrow{grid-template-columns:minmax(0,1fr)}
  .certs-grid-2 .cert{flex:0 0 calc((100% - 2 * var(--cert-gap)) / 3)}
  .cert-row .cert,.cert-row-5 .cert{flex:0 0 calc((100% - clamp(.8rem,1.6vw,1.3rem)) / 2)}
  .container{width:92%}
}

/* değer ikonları ızgarası: dar ekranda sarmalı ve oklar gizlenir
   (oklar tek satırlık yerleşime göre çizildiği için altta anlamsız kalır) */
@media (max-width:700px){
  /* değer ikonları: üstte 2, altta 3 → 6 sütunluk ızgarada
     ilk iki öğe 3'er, son üç öğe 2'şer sütun kaplar */
  .vgrid-list{
    /* minmax(0,...) şart: 1fr'nin min-content tabanı uzun etiketler
       yüzünden sütunları şişirip her öğeyi ayrı satıra düşürüyordu */
    grid-template-columns:repeat(6,minmax(0,1fr));
    column-gap:.5rem;row-gap:1.7rem;
  }
  .vgrid-item{min-width:0}
  /* Alt sıradaki üç ikon 1-2 / 3-4 / 5-6 sütunlarında; merkezleri
     1, 3 ve 5. Üstteki iki öğe 2-3 ve 4-5 sütunlarına konularak
     merkezleri 2 ve 4 oluyor — yani tam alttaki ikili boşlukların
     ortasına. (Boşluk payı dahil hesap birebir tutuyor.) */
  .vgrid-item:nth-child(1){grid-column:2 / span 2}
  .vgrid-item:nth-child(2){grid-column:4 / span 2}
  .vgrid-item:nth-child(n+3){grid-column:span 2}
  .vgrid-item{gap:.6rem}
  .vgrid-lbl{font-size:.62rem;letter-spacing:.05em;text-wrap:balance}
  .vgrid-links{display:none}

  /* değer başlıkları ve açıklamaları ortalı
     (temel kural .article .value-title olduğu için aynı özgüllük gerekiyor) */
  .article .value-title,.vtexts .value-title{
    width:auto;margin-inline:auto;text-align:center;
  }
  .vtexts p{text-align:center}

  /* ürün tablosu: açıklamalar sola blok; etiket sütunu daraltılıp
     değer sütununa sağdan nefes payı bırakılır, kelimeler kenara
     dayanmadan ve doğru yerden bölünür */
  .prow-table th,.prow-table td{text-align:left}
  /* etiketler sol kenara yapışmasın, biraz içeri alınır */
  .prow-table th{width:7rem;padding-left:.7rem;padding-right:.8rem;font-size:.92rem}
  .prow-table td{padding-right:.4rem;overflow-wrap:break-word;word-break:normal;hyphens:none}

  /* koyu yeşil sayfa bandı: mobilde daha alçak */
  .page-hero{min-height:0;padding:clamp(5rem,13vh,6rem) 0 clamp(1.6rem,4vw,2.2rem)}
  .page-hero-media{min-height:clamp(300px,42vh,380px)}
  .page-hero-compact{min-height:clamp(260px,36vh,320px)}
  .page-hero-cap{margin-top:.9rem;font-size:.78rem}
}
@media (max-width:480px){
  /* 6 sütunluk 2+3 düzeni korunur; yalnızca boşluk ve punto sıkılaşır */
  .vgrid-list{column-gap:.35rem;row-gap:1.4rem}
  .vgrid-lbl{font-size:.58rem;letter-spacing:.03em}
}

/* ---------- Üretim süreci karuseli: dar ekranda parmakla kaydırılır ----------
   Masaüstünde 6 kartlık ızgara sahnede 4 kart gösterir; mobilde bu kartlar
   68px'e düşüp metni kırpıyordu. Burada ızgara yerine kaydırmalı şeride
   dönüşür, kart yüksekliği serbest bırakılır, oklar gizlenir. */
@media (max-width:900px){
  .carousel{overflow:visible}
  .carousel-track{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:1rem;padding:1.2rem clamp(.8rem,4vw,1.4rem);
    transform:none !important;transition:none;
    scrollbar-width:none;
    align-items:stretch;   /* kartlar eşit yükseklikte; flex-end dengesizlik yapıyordu */
  }
  .carousel-track::-webkit-scrollbar{display:none}
  .carousel-slide{flex:0 0 min(78vw,330px);scroll-snap-align:center}
  .slide-card{min-height:0;max-height:none;height:100%}
  .slide-content{overflow:visible}
  .slide-title{min-height:0}
  .carousel-nav,.carousel-btn{display:none}   /* parmakla kaydırılıyor */
}

/* hiçbir öğe yatay taşma yaratmasın */
img,video,table,pre{max-width:100%}
.legal-tablo{min-width:min(640px,100%)}

/* ============================================================
   MOBİL İNCE AYAR (yalnızca ≤700px)
   Başlık ölçüleri, ortalama, sertifika logoları ve footer düzeni
   ============================================================ */
@media (max-width:700px){

  /* ---- büyük başlıklar bir kademe küçülür ---- */
  .sec-title{font-size:clamp(1.5rem,6vw,2rem)}
  .page-hero h1{font-size:clamp(1.7rem,7.4vw,2.4rem)}
  .page-hero .page-lede{font-size:1rem}
  .article .vhead{font-size:clamp(1.3rem,5.4vw,1.7rem)}
  .article h2,.topic-title{font-size:clamp(1.25rem,5vw,1.55rem)}
  .article h3,.article .value-title,.valuecard h3{font-size:clamp(1.1rem,4.4vw,1.3rem)}
  .article .lead,.plist .lead{font-size:clamp(1.05rem,4.4vw,1.25rem)}
  .prow-title{font-size:clamp(1.25rem,5vw,1.6rem)}
  .cget-title{font-size:clamp(1.1rem,4.6vw,1.35rem)}
  .ctaband-in .display{font-size:clamp(1.4rem,5.8vw,1.9rem)}
  .ctaband-in .lede{font-size:.98rem}
  /* değer blokları: ikon → başlık → açıklama araları sıkılaştırılır.
     Başlığın iki satırlık sabit yüksekliği masaüstünde sütunları
     hizalamak içindi; dar ekranda boşluk olarak görünüyordu. */
  .vitem h3{font-size:1.05rem;min-height:2.1em;margin-bottom:.2rem}
  .vitem-ico{width:70px;height:70px;margin-bottom:.5rem}
  /* max-width:26ch masaustu icin; mobilde blok metni 200px'e sikistirip
     kelime aralarini asiri actigi icin kaldirilir */
  .vitem p{margin-top:0;max-width:none}
  .vrow{row-gap:1.9rem;margin-top:clamp(1.4rem,4vw,2rem)}
  .slide-title{font-size:1.05rem}
  .lede,.intro-text .lede{font-size:1rem}
  .ck-bar-baslik{font-size:1.05rem}
  .ck-modal-baslik{font-size:1.2rem}

  /* ---- metinler ortalı ---- */
  .article .container,.article p,.article h2,.article h3,.article .lead,
  .topic,.topic-title,.plist .lead,.prow-body,.prow-title,.prow-desc,
  .intro-text,.intro-sub,.lede,.sec-head,.vtexts,.page-hero .container,
  .exmap-head,.certs-head{text-align:center}
  .topic-title,.article h3,.article .vhead,.value-title,.cget-title{
    width:auto;margin-inline:auto;
  }
  .page-hero .page-lede,.page-hero .page-lede-blok{text-align:center;margin-inline:auto}
  /* yalnızca metin listeleri; ızgara/şerit listeleri hariç tutulmalı
     (aksi hâlde .vgrid-list'in display:grid'i eziliyor) */
  .article ul:not(.vgrid-list):not(.pstrip-list):not(.footer-nav),
  .article ol{text-align:left;display:inline-block;max-width:100%}
  .back-link{display:inline-block}
  /* iletişim bilgileri de ortalı; gruplar arası nefes payı açılır */
  .cdetails,.cline,.cloc{text-align:center}
  /* .cget-title inline-block olduğu için kapsayıcısı ortalanmalı */
  .cformwrap{text-align:center}
  .cline-label,.cloc-label{margin-bottom:.5rem}
  /* masaüstünde sütun hizası için .cdetails .cline/.cloc margin'i 0'lanıyor;
     mobilde o kuralı aşmak için aynı özgüllük gerekiyor */
  .cdetails .cline{margin-bottom:2.2rem}
  .cdetails .cloc{margin-bottom:2.2rem;margin-top:0}
  .cdetails .cloc:last-child{margin-bottom:0}
  .cget-title{text-align:center}

  /* okunurluğu bozacak yerler ortalanmaz */
  .legal-tablo,.legal-tablo td,.legal-tablo th,
  .contact-form,.field,.field-label,.form-fine,.onay-text,.field-onay,.form-recaptcha,.form-recaptcha-not{text-align:left}
  .legal-tablo-not{text-align:left}

  /* ---- sertifika logoları küçülür ---- */
  .cert-row .cert,.cert-row-5 .cert{padding:1rem .6rem .8rem;gap:.7rem}
  .cert-logo{max-width:74px}
  .cert figcaption{font-size:.72rem}
  .cert-sub{font-size:.62rem}
  .certs-grid-2 .cert{padding:.6rem .2rem .5rem}

  /* ---- footer: mobil düzen (tek sütun, ortalı) ---- */
  .footer-inner{justify-items:center;text-align:center;row-gap:2.2rem}
  .footer-brandcol{justify-items:center;gap:.7rem}
  .footer-brand .brand-logo{height:44px}
  .footer-tag{text-align:center;max-width:none;margin-inline:auto}
  .footer-col{text-align:center}
  .footer-nav{align-items:center;gap:.75rem}
  .footer-contact{
    grid-template-columns:minmax(0,1fr);row-gap:1.7rem;
    justify-items:center;text-align:center;
  }
  .footer-coltitle{margin-bottom:.6rem}
  .footer-base{align-items:center;text-align:center;gap:.9rem}
  .footer-legal{justify-content:center}

  /* ============================================================
     MOBIL GOVDE METINLERI
     Ortali yerine iki yana yasli blok; son satir sola yaslanir ve
     kenarlarda nefes payi birakilir. Basliklar, etiketler, adresler,
     kunye satirlari ve butonlar ortali kalir.
     Bu blok medya sorgusunun sonundadir; boylece yukaridaki
     text-align:center kurallarini ozgulluk savasi olmadan asar.
     ============================================================ */
  .article p:not(.eyebrow):not(.legal-firma):not(.legal-date):not(.legal-dipnot):not(.page-hero-cap):not(.legal-iletisim),
  .article .lead,.plist .lead,.prow-desc,
  .lede,.vtexts p,.vitem p,.carousel-subtitle,
  .topic p,.sec-head p{
    text-align:justify;
    text-align-last:left;
    hyphens:none;                 /* kelimeler yanlis yerden bolunmesin */
    padding-inline:clamp(.5rem,2.6vw,1rem);
  }
  /* .valuecards masaustunde 1fr 1fr; mobil karsiligi hic tanimlanmamis.
     Tek sutuna cevrilir, minmax(0,1fr) ile min-content tabani kaldirilir. */
  .valuecards{grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:1.5rem}
  .valuecard{padding:1.3rem}

  /* kart icindeki metinde kartin kendi dolgusu var, ek bosluk eklenmez */
  .slide-desc,.valuecard p{text-align:justify;text-align-last:left;hyphens:none;padding-inline:0}

  /* Menu bolumlerinin ustundeki yesil bant: baslik, ust etiket ve aciklama
     ortali yazilir. Blok (justify) duzeni yalnizca govde metinleri icindir;
     banttaki kisa metinler ortali daha dengeli duruyor. */
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero .page-lede,
  .page-hero .page-lede-blok,
  .page-hero .page-hero-cap{
    text-align:center;
    text-align-last:auto;
    margin-inline:auto;
  }
}

@media (max-width:520px){
  /* tek sütuna inince hizalama kaygısı kalmaz: başlık kutusu tamamen serbest */
  .vitem h3{min-height:0}
  .vrow{row-gap:1.6rem}
  .cert-logo{max-width:64px}
  .certs-grid-2 .cert{flex:0 0 calc((100% - 2 * var(--cert-gap)) / 3)}
}
/* Ölçü ifadeleri satır sonunda bölünmez (tarayıcı tireden de bölebiliyor) */
.olcu{white-space:nowrap}
/* Bazı ürün adları masaüstünde iki satır, mobilde tek satır olur */
@media (max-width:700px){ .br-masaustu{display:none} }

/* Sertifika satırları: mobilde ayrı satır kapları yerine kesintisiz 2'li akış.
   display:contents ile .cert-row kutuları yerleşimden çıkar, kartlar doğrudan
   .cert-group ızgarasının hücreleri olur; masaüstünde yapı korunur. */
@media (max-width:900px){
  .cert-group{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(.7rem,2vw,1.1rem);
    margin:clamp(1.2rem,2.4vw,1.9rem) 0 0;
  }
  .cert-group .cert-row{display:contents}
  .cert-group .cert,.cert-row .cert,.cert-row-5 .cert{flex:none;width:auto}
  .cert-row-orta{padding-left:0}
}
@media (max-width:700px){
  .cert-group{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Bot tuzağı: gerçek ziyaretçiye görünmez, ekran okuyucudan da gizli */
.bal-kupu{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* yasal metin dipnotu */
.legal-dipnot{
  font-family:var(--sans);font-weight:300;font-size:.76rem;line-height:1.7;
  color:var(--ink-soft);margin:-1rem 0 2rem;
}
.legal-dipnot sup{color:var(--gold-deep);font-weight:600}
.legal-tablo sup{color:var(--gold-deep);font-weight:600}

/* ---- Yasal tablolar: mobilde satırlar etiketli karta dönüşür ----
   5 sütunlu tablo dar ekranda yatay kaydırma gerektiriyor ve son
   sütunlar hiç görünmüyordu. Burada her satır kendi kartı olur. */
@media (max-width:700px){
  .legal-tablo-kutu{overflow:visible;border:0;border-radius:0}
  .legal-tablo{min-width:0;width:100%;display:block}
  .legal-tablo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal-tablo tbody,.legal-tablo tr,.legal-tablo td{display:block;width:auto}
  .legal-tablo tr{
    background:#fff;border:1px solid rgba(156,122,63,.32);border-radius:12px;
    padding:.5rem .2rem;margin:0 0 .9rem;
  }
  .legal-tablo tbody tr:nth-child(even){background:#fff}
  /* Etiket, değerin ÜSTÜNDE ayrı bir satır olarak durur.
     (grid kullanılırsa <sup> gibi satır içi öğeler ayrı hücreye düşüyor) */
  .legal-tablo td{
    display:block;border-top:0;padding:.55rem .9rem;text-align:left;
  }
  .legal-tablo td + td{border-top:1px solid rgba(156,122,63,.16)}
  .legal-tablo td::before{
    content:attr(data-etiket);display:block;margin-bottom:.15rem;
    font-weight:600;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gold-deep);line-height:1.5;
  }
  .legal-tablo td:first-child,.legal-tablo td:nth-child(2){color:var(--ink)}
  /* .article p ortalama kuralindan daha guclu olmali */
  .article .legal-dipnot{text-align:left;margin-top:0}
}
/* KVKK başvuru/iletişim bloğu */
.legal-iletisim{
  background:rgba(184,150,78,.08);border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;padding:.95rem 1.15rem;line-height:1.9;
}
.legal-iletisim strong{font-weight:500;color:var(--ink)}
@media (max-width:700px){ .article .legal-iletisim{text-align:left} }