/* ==========================================================================
   Djili Soy Gıda — ön yüz stilleri
   Bölümler: 1 belirteçler · 2 temel · 3 düzen · 4 düğmeler · 5 başlık
   6 kapak · 7 bölümler · 8 kartlar · 9 alt bilgi · 10 iç sayfalar
   11 form · 12 hareket · 13 RTL · 14 duyarlılık
   ========================================================================== */

/* ------------------------------------------------------------ 1 belirteçler */
:root{
  --green-900:#11301d;
  --green-800:#1b4630;
  --green-700:#23583a;
  --green-600:#2f6d48;
  --green-50:#edf3ee;

  --gold-700:#8d6115;
  --gold-600:#a9761c;
  --gold-500:#c8912a;
  --gold-400:#ddab45;
  --gold-100:#f7edd8;

  --clay:#b7472a;

  --cream:#faf6ee;
  --cream-2:#f3ece0;
  --sand:#e6dcc9;
  --line:#e3dac8;

  --ink:#1a1712;
  --ink-2:#4b4338;
  --ink-3:#7c7264;
  --white:#fff;

  --wrap:1220px;
  --gut:clamp(18px,4vw,44px);
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;

  --sh-1:0 1px 2px rgba(26,23,18,.05), 0 4px 14px rgba(26,23,18,.05);
  --sh-2:0 2px 6px rgba(26,23,18,.06), 0 14px 40px rgba(26,23,18,.09);
  --sh-3:0 30px 70px rgba(17,48,29,.18);

  --f-disp:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --head-h:78px;
  --ease:cubic-bezier(.22,.68,.32,1);
}
:root:lang(ar),[dir=rtl]{
  --f-disp:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}

/* ------------------------------------------------------------------ 2 temel */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px);
  /* overflow-x:hidden sabit konumlu öğeleri kırpmaz, clip kırpar. */
  overflow-x:clip}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:400 16px/1.7 var(--f-body);
  -webkit-font-smoothing:antialiased;
  /* HATA DÜZELTMESİ: burada `overflow-x:hidden` vardı. `hidden`, diğer eksende
     `visible`'ı zorla `auto` yapar; böylece body bir KAYDIRMA KABI oluyor ve
     içindeki `position:sticky` başlık ekrana değil o kaba yapışıyordu —
     yani aşağı inince başlık kayıp gidiyordu. `clip` aynı şekilde kırpar ama
     kaydırma kabı yaratmaz, yapışkan başlık çalışmaya devam eder. */
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}

/* HATA DÜZELTMESİ: `hidden` niteliği taşıyan bir öğeye CSS'te display
   verilirse (mobil menüde `display:flex` gibi) tarayıcının `[hidden]`
   kuralını EZER. Menü kapalıyken ekranın sağında duruyor, sayfayı yatay
   kaydırılabilir yapıyordu. Bu kural her yerde son sözü söyler. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}

/* HATA DÜZELTMESİ: tarayıcı `figure` ve `blockquote` öğelerine 40 px yan
   boşluk verir. Galeri kareleri bu yüzden ızgara sütununun 40 px sağından
   başlıyor ve ekrandan taşıyordu; alıntı bandı da içeri kaçıyordu. */
figure,blockquote,dl,dd{margin:0}

/* <picture> yalnızca tarayıcıya "hangi dosyayı indireyim" der; düzende yeri
   olmamalı. display:contents kutusunu kaldırır, <img> yine ana kutunun
   doğrudan çocuğu gibi davranır — yoksa `height:100%` veren her kural
   (hero, kart, galeri) bozulurdu. */
picture{display:contents}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:600;line-height:1.14;letter-spacing:-.015em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-400);color:var(--green-900)}

.ic{width:22px;height:22px;flex:none}
.ic-sm{width:18px;height:18px}
.ic-xs{width:14px;height:14px}

/* Atlama bağlantısı ve bal küpü ekran dışında durur. "-9999px" ile itmek
   RTL'de TERS yönde çalışıyor: Arapça sayfada öğe ekranın 10.000 px sağına
   düşüyordu (overflow-x kırptığı için görünmüyordu ama gerçekten oradaydı).
   clip-path yöntemi yönden bağımsız: öğe yerinde kalır, çizilmez. */
.skip-link{
  position:absolute;top:10px;inset-inline-start:16px;z-index:200;
  background:var(--green-800);color:#fff;padding:12px 20px;border-radius:var(--r-sm);
  /* Yukarı kaydırılarak gizlenir: DİKEY yön hem LTR hem RTL'de aynı çalışır
     ve sağa/sola taşma yaratmaz. Klavyeyle sekmeye basınca yerine oturur. */
  transform:translateY(calc(-100% - 20px));
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:none}

/* yalnız ekran okuyucuya görünen metin */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Telefon, e-posta ve GTİP gibi Latin diziler RTL'de ters okunuyordu.
   Yalıtım (isolate) rakam gruplarını kendi yönünde tutar. */
.ltr{direction:ltr;unicode-bidi:isolate;text-align:start}
[dir=rtl] .tb-item span,
[dir=rtl] .cta-phone,
[dir=rtl] .mnav-call,
[dir=rtl] .foot-icons a,
[dir=rtl] .info-card a,
[dir=rtl] .side-list a,
[dir=rtl] .foot-cta-tel b,
[dir=rtl] .spec-table td{direction:ltr;unicode-bidi:isolate;text-align:start}


/* ----------------------------------------------------------------- 3 düzen */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,8vw,116px);position:relative}
.sec-tight{padding-block:clamp(48px,6vw,84px)}
.sec-cream{background:var(--cream-2)}
.sec-white{background:var(--white)}

.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font:600 12.5px/1 var(--f-body);letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:16px;
}
.kicker::before{content:"";width:30px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-500),var(--clay))}
.kicker-light{color:var(--gold-400)}
.kicker-light::before{background:linear-gradient(90deg,var(--gold-400),transparent)}

.sec-title{font-size:clamp(28px,3.5vw,46px);margin-bottom:16px;max-width:20ch}
.sec-text{color:var(--ink-3);font-size:clamp(15.5px,1.2vw,17.5px);max-width:62ch;line-height:1.75}
.sec-head{margin-bottom:clamp(36px,4.5vw,60px)}
.sec-head-mid{text-align:center}
.sec-head-mid .kicker{justify-content:center}
.sec-head-mid .sec-title,.sec-head-mid .sec-text{margin-inline:auto}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 32px;flex-wrap:wrap}
.sec-head-row > div{flex:1 1 420px;min-width:0}
.sec-head-row .sec-title{margin-bottom:10px}
.sec-head-light .sec-title{color:#fff}
.sec-head-light .sec-text{color:rgba(255,255,255,.76)}

.tick-list{display:grid;gap:12px;margin:26px 0 30px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--ink-2)}
.tick-list .ic{color:var(--green-600);margin-top:4px}

/* -------------------------------------------------------------- 4 düğmeler */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:999px;
  font:600 14.5px/1 var(--f-body);letter-spacing:.01em;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn .ic{transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .ic{transform:translateX(3px)}
[dir=rtl] .btn:hover .ic{transform:translateX(-3px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn-lg{padding:16px 30px;font-size:15.5px}

.btn-gold{background:var(--gold-500);color:#231a05;box-shadow:0 6px 20px rgba(200,145,42,.34)}
.btn-gold:hover{background:var(--gold-400);box-shadow:0 12px 30px rgba(200,145,42,.42)}
.btn-green{background:var(--green-700);color:#fff;box-shadow:0 6px 20px rgba(35,88,58,.26)}
.btn-green:hover{background:var(--green-600);box-shadow:0 12px 30px rgba(35,88,58,.34)}
.btn-outline{border-color:var(--sand);color:var(--ink);background:rgba(255,255,255,.5)}
.btn-outline:hover{border-color:var(--green-700);color:var(--green-700);background:#fff}
.btn-ghost{border-color:rgba(255,255,255,.44);color:#fff;backdrop-filter:blur(6px);background:rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn-block{width:100%;justify-content:center}

/* --------------------------------------------------------------- 5 başlık */
.topbar{background:var(--green-900);color:rgba(255,255,255,.8);font-size:13px;position:relative;z-index:85}
.topbar-in{display:flex;align-items:center;gap:20px;min-height:42px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:8px;padding-block:6px;transition:color .2s}
.tb-item .ic{width:15px;height:15px;color:var(--gold-400)}
.tb-item:hover{color:#fff}
.tb-gap{flex:1 1 auto}
.tb-social{display:flex;gap:4px}
.tb-social a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;transition:background .2s,color .2s}
.tb-social a:hover{background:rgba(255,255,255,.12);color:#fff}
.tb-social .ic{width:16px;height:16px}

/* --- dil bayrakları --- */
.flag{width:22px;height:15px;flex:none;border-radius:2.5px;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.14) inset;object-fit:cover}
.langsw-btn .flag{width:20px;height:14px}
.langsw-menu a .flag{width:24px;height:16px}
.mnav-langs a .flag{width:18px;height:12px}
.smap-col a .flag{width:20px;height:14px}

.langsw{position:relative}
.langsw-btn{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  font:600 12.5px/1 var(--f-body);letter-spacing:.06em;color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.18);transition:background .2s,border-color .2s;
}
.langsw-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.langsw-btn .ic{width:15px;height:15px;color:var(--gold-400)}
.langsw-btn .ic-xs{color:inherit;transition:transform .25s var(--ease)}
.langsw.open .langsw-btn .ic-xs{transform:rotate(180deg)}
.langsw-menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:196px;z-index:90;
  background:#fff;border-radius:14px;box-shadow:var(--sh-2);padding:7px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .22s var(--ease),visibility .2s;
}
.langsw.open .langsw-menu{opacity:1;visibility:visible;transform:none}
.langsw-menu a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  color:var(--ink-2);font-size:14px;transition:background .18s,color .18s;
}
.langsw-menu a:hover{background:var(--cream-2);color:var(--ink)}
.langsw-menu a b{font:700 11.5px/1 var(--f-body);letter-spacing:.08em;color:var(--gold-600);width:20px;flex:none}
.langsw-menu a span{flex:1}
.langsw-menu a.is-current{background:var(--green-50);color:var(--green-800);font-weight:600}
.langsw-menu a.is-current .ic{color:var(--green-600)}

.site-head{
  position:sticky;top:0;z-index:70;
  background:rgba(250,246,238,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s,box-shadow .3s,transform .3s;
}
.head-in{display:flex;align-items:center;gap:24px;min-height:var(--head-h)}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(26,23,18,.18))}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font:700 18px/1 var(--f-disp);letter-spacing:.01em}
.brand-text em{font:600 10.5px/1.4 var(--f-body);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-600);margin-top:4px}

.mainnav{flex:1;display:flex;justify-content:center}
.mainnav ul{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mainnav a{
  position:relative;display:block;padding:10px 14px;border-radius:9px;
  font:500 14.5px/1 var(--f-body);color:var(--ink-2);
  transition:color .2s,background .2s;
}
.mainnav a::after{
  content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:var(--to,left);
  transition:transform .28s var(--ease);
}
[dir=rtl] .mainnav a::after{--to:right}
.mainnav a:hover{color:var(--ink)}
.mainnav a:hover::after,.mainnav a.is-active::after{transform:scaleX(1)}
.mainnav a.is-active{color:var(--green-800);font-weight:600}

.head-tools{display:flex;align-items:center;gap:12px;flex:none}

.burger{display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:#fff;position:relative}
.burger span{
  position:absolute;inset-inline:12px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
body.mnav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.mnav-open .burger span:nth-child(2){opacity:0}
body.mnav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* kapak üstünde şeffaf başlık */
body.has-hero .site-head{background:transparent;border-color:transparent;backdrop-filter:none}
body.has-hero .site-head .brand-text b,
body.has-hero .site-head .mainnav a{color:#fff}
body.has-hero .site-head .mainnav a.is-active{color:#fff}
body.has-hero .site-head .brand-text em{color:var(--gold-400)}
body.has-hero .site-head .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
body.has-hero .site-head .burger span{background:#fff}
body.has-hero .site-head.stuck{
  background:rgba(250,246,238,.95);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(26,23,18,.07);
}
body.has-hero .site-head.stuck .brand-text b{color:var(--ink)}
body.has-hero .site-head.stuck .brand-text em{color:var(--gold-600)}
body.has-hero .site-head.stuck .mainnav a{color:var(--ink-2)}
body.has-hero .site-head.stuck .mainnav a.is-active{color:var(--green-800)}
body.has-hero .site-head.stuck .burger{background:#fff;border-color:var(--line)}
body.has-hero .site-head.stuck .burger span{background:var(--ink)}

/* --- mobil menü --- */
.mnav-backdrop{position:fixed;inset:0;background:rgba(17,48,29,.5);backdrop-filter:blur(3px);z-index:90;opacity:0;transition:opacity .3s}
.mnav-backdrop.show{opacity:1}
.mnav{
  position:fixed;inset-block:0;inset-inline-end:0;width:min(86vw,360px);z-index:95;
  background:var(--green-900);color:#fff;display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .38s var(--ease);
  overflow-y:auto;
}
[dir=rtl] .mnav{transform:translateX(-102%)}
.mnav.show{transform:none}
.mnav-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.1)}
.mnav-brand{display:flex;align-items:center;gap:12px;min-width:0}
.mnav-brand img{width:40px;height:40px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.mnav-brand b{display:block;font:700 15.5px/1.1 var(--f-disp);letter-spacing:.03em;color:#fff}
.mnav-brand em{display:block;font:500 10.5px/1.3 var(--f-body);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-400);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnav-head{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.mnav-close{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1)}
.mnav-links{padding:14px 16px;flex:1}
.mnav-links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 14px;border-radius:12px;font:500 16px/1.3 var(--f-body);
  color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateX(18px);
}
[dir=rtl] .mnav-links a{transform:translateX(-18px)}
.mnav.show .mnav-links a{animation:mnavIn .42s var(--ease) forwards;animation-delay:calc(.05s * var(--i) + .12s)}
.mnav-foot{opacity:0;transform:translateY(10px)}
.mnav.show .mnav-foot{animation:mnavIn .5s var(--ease) forwards;animation-delay:.55s}
@keyframes mnavIn{to{opacity:1;transform:none}}
.mnav-links a .ic{color:var(--gold-400);opacity:.5}
.mnav-links a.is-active{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.mnav-foot{padding:20px 24px 30px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:12px}
/* HATA DUZELTMESI: dort dil cipi tek satira sigmiyor, sonuncusu (AR) panelin
   sagindan tasip kesiliyordu. Artik esit genislikte dort sutun; cok dar
   ekranda 2x2. */
.mnav-langs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px}
@media (max-width:360px){.mnav-langs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mnav-langs a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;
  padding:8px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  font:600 12.5px/1 var(--f-body);letter-spacing:.06em;color:rgba(255,255,255,.8);
}
.mnav-langs a.is-current{background:var(--gold-500);border-color:var(--gold-500);color:#231a05}
.mnav-call{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:14.5px}
.mnav-call .ic{color:var(--gold-400)}

/* ---------------------------------------------------------------- 6 kapak */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:center;margin-top:calc(var(--head-h) * -1);padding-top:var(--head-h);overflow:hidden}
/* overflow:hidden ŞART: kenburns animasyonu görseli %8'e kadar büyütüyor,
   kutu kırpmazsa ekranın soluna/sağına birkaç piksel taşıyor. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(11,36,21,.94) 0%,rgba(14,42,25,.82) 32%,rgba(17,48,29,.36) 62%,rgba(17,48,29,.52) 100%),
    linear-gradient(180deg,rgba(11,36,21,.66) 0%,transparent 22%,transparent 54%,rgba(11,36,21,.74) 100%);
}
[dir=rtl] .hero-veil{transform:scaleX(-1)}
/* Kart sutunu 0.58fr iken urun adlari iki satira kiriliyordu. */
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:clamp(30px,5vw,64px);align-items:center;padding-block:clamp(70px,10vh,130px)}
.hero-copy{color:#fff;max-width:47ch}
.hero-title{font-size:clamp(34px,4.8vw,64px);line-height:1.04;color:#fff;margin-bottom:22px;letter-spacing:-.025em}
.hero-title .grad{
  background:linear-gradient(94deg,var(--gold-400) 0%,var(--gold-500) 42%,#e8c477 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-text{font-size:clamp(16px,1.35vw,18.5px);line-height:1.76;color:rgba(255,255,255,.84);margin-bottom:34px}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px}

/* Kapaktaki ürün kartı.
   Buzlu cam paneldi; fotoğrafın üstünde bulanıklaşıyor ve şablon işi
   duruyordu. Yerini katı bir kart aldı — bir tüccarın ürün föyü gibi:
   üstte altın hat, adlar başlık yazı tipiyle, sağda kategori, altta
   dolu yeşil düğme. */
.hero-card{
  position:relative;
  background:linear-gradient(180deg,#fffdf8 0%,var(--cream) 62%);
  border:1px solid rgba(26,23,18,.07);
  border-radius:var(--r-lg);
  padding:24px 24px 22px;
  box-shadow:0 2px 6px rgba(17,48,29,.10), 0 28px 64px rgba(17,48,29,.30);
  color:var(--ink);
  overflow:hidden;
}
/* Üstteki ince altın hat: kartı bir antetli kâğıt gibi bitiriyor. */
.hero-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400) 45%,transparent);
}

.hero-card-h{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:13px;margin-bottom:2px;
  border-bottom:1px solid var(--sand);
}
.hero-card-title{
  font:600 11px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-700);margin:0;
}

.hero-card ul{display:grid}
.hero-card li + li{border-top:1px solid var(--line)}
.hero-card li a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:13px;padding:14px 2px;
  transition:color .2s;
}
.hc-ic{
  width:19px;height:19px;color:var(--gold-600);flex:none;
  transition:transform .3s var(--ease),color .2s;
}
.hc-name{
  font:600 17px/1.22 var(--f-disp);color:var(--ink);letter-spacing:-.008em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s;
}
.hc-cat{
  font:500 10.5px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;opacity:.85;
  transition:opacity .2s,color .2s;
}
.hero-card li a:hover .hc-name{color:var(--green-800)}
.hero-card li a:hover .hc-ic{color:var(--gold-500);transform:translateX(2px) scale(1.1)}
[dir=rtl] .hero-card li a:hover .hc-ic{transform:translateX(-2px) scale(1.1)}
.hero-card li a:hover .hc-cat{color:var(--green-700);opacity:1}
/* Dar kartta kategori sütunu ada yer bırakmıyor; adın tamamı daha önemli. */
@media (max-width:1100px){ .hc-cat{display:none} }

.hero-card-all{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:18px;padding:14px;border-radius:var(--r-sm);
  background:var(--green-800);color:#fff;
  font:600 14px/1 var(--f-body);letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(27,70,48,.22);
  transition:background .2s,transform .22s var(--ease),box-shadow .25s var(--ease);
}
.hero-card-all .ic{transition:transform .25s var(--ease)}
.hero-card-all:hover{
  background:var(--green-700);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(27,70,48,.3);
}
.hero-card-all:hover .ic{transform:translateX(3px)}
[dir=rtl] .hero-card-all:hover .ic{transform:translateX(-3px)}

.hero-scroll{
  position:absolute;bottom:26px;inset-inline-start:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font:600 10.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);
}
.hero-scroll span{width:1px;height:38px;background:linear-gradient(180deg,transparent,var(--gold-400));animation:scrollCue 2.1s ease-in-out infinite}
@keyframes scrollCue{0%,100%{opacity:.3;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}

/* ------------------------------------------------------------- 7 bölümler */
/* "Neden biz" bölümü.
   Önceki hâli dört beyaz kutuydu; her birinde yuvarlak köşeli bir ikon
   karesi, altında başlık ve paragraf vardı — internetteki her şablonda
   olan kalıp. Kutular kaldırıldı: her madde üstündeki altın hattan
   başlıyor, ikon başlığın yanında duruyor. Gazete sütunu gibi okunuyor
   ve sayfanın geri kalanındaki ince çizgi diliyle uyuşuyor. */
.feat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:clamp(26px,3vw,44px);
}
.feat{
  position:relative;padding-top:22px;
  border-top:1px solid var(--sand);
}
/* Üstteki altın parça: üzerine gelince hattın tamamına yayılır. */
.feat::before{
  content:"";position:absolute;inset-inline-start:0;top:-1px;height:2px;width:34px;
  background:var(--gold-500);
  transition:width .4s var(--ease);
}
.feat:hover::before{width:100%}
.feat-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.feat-ic{color:var(--gold-600);flex:none;transition:transform .3s var(--ease)}
.feat-ic .ic{width:22px;height:22px}
.feat:hover .feat-ic{transform:translateY(-2px)}
.feat h3{font-size:19px;margin:0;letter-spacing:-.01em}
.feat p{color:var(--ink-3);font-size:15px;line-height:1.72;margin:0}

.sec-about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(34px,6vw,84px);align-items:center}
.about-media{position:relative}
.about-media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-2);position:relative;z-index:1;object-fit:cover;aspect-ratio:4/3}
.about-frame{
  position:absolute;z-index:0;inset-block:-18px;inset-inline-start:-18px;inset-inline-end:34px;
  border:2px solid var(--gold-500);border-radius:var(--r-lg);opacity:.5;
}
.about-badge{
  position:absolute;z-index:2;inset-inline-end:-14px;bottom:-22px;
  background:var(--green-800);color:#fff;border-radius:var(--r);padding:18px 24px;
  box-shadow:var(--sh-2);text-align:center;
}
.about-badge b{display:block;font:700 30px/1 var(--f-disp);color:var(--gold-400)}
.about-badge span{font:600 10.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;opacity:.75}

/* ------------------------------------------------------------- 8 kartlar */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.pcard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .3s;
}
.pcard:hover{transform:translateY(-7px);box-shadow:var(--sh-2);border-color:transparent}
.pcard-img{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--cream-2)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.07)}
.pcard-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(17,48,29,.34));opacity:0;transition:opacity .35s}
.pcard:hover .pcard-img::after{opacity:1}
.pcard-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;position:relative}
.pcard-ic{
  position:absolute;top:-24px;inset-inline-end:22px;
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--gold-500);color:#231a05;box-shadow:0 8px 20px rgba(200,145,42,.36);
  transition:transform .32s var(--ease);
}
.pcard:hover .pcard-ic{transform:translateY(-4px) rotate(-6deg)}
.pcard h2,.pcard h3{font-size:21px;margin-bottom:9px;padding-inline-end:52px}
.pcard p{color:var(--ink-3);font-size:14.6px;line-height:1.68;flex:1;margin-bottom:18px}
.pcard-more{
  display:inline-flex;align-items:center;gap:8px;
  font:600 13.5px/1 var(--f-body);color:var(--green-700);
}
.pcard-more .ic{transition:transform .25s var(--ease)}
.pcard:hover .pcard-more .ic{transform:translateX(4px)}
[dir=rtl] .pcard:hover .pcard-more .ic{transform:translateX(-4px)}

/* --- adımlar --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));gap:22px;position:relative}
.steps::before{
  content:"";position:absolute;top:44px;inset-inline:60px;height:2px;
  background:repeating-linear-gradient(90deg,var(--sand) 0 8px,transparent 8px 16px);z-index:0;
}
.step{position:relative;z-index:1;text-align:center;padding:0 10px}
.step-num{
  display:block;font:700 46px/1 var(--f-disp);color:transparent;
  -webkit-text-stroke:1.4px var(--sand);margin-bottom:-26px;
}
.step-ic{
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;margin:0 auto 20px;
  background:#fff;border:2px solid var(--gold-500);color:var(--green-700);
  box-shadow:0 8px 24px rgba(26,23,18,.08);transition:transform .3s var(--ease),background .3s,color .3s;
}
.step-ic .ic{width:30px;height:30px}
.step:hover .step-ic{transform:translateY(-5px);background:var(--green-700);color:#fff;border-color:var(--green-700)}
.step h3{font-size:19px;margin-bottom:9px}
.step p{color:var(--ink-3);font-size:14.6px;line-height:1.7}

/* --- rakamlar --- */
.stats-band{background:var(--green-900);overflow:hidden}
.stats-bg{position:absolute;inset:0;z-index:0;opacity:.2;overflow:hidden}
.stats-bg img{width:100%;height:100%;object-fit:cover}
.stats-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--green-900),rgba(17,48,29,.72) 45%,var(--green-900))}
.stats-in{position:relative;z-index:2}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:24px}
.stat{text-align:center;padding:22px 12px;border-radius:var(--r);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
/* "120.000 ton" kartın içine sığmayıp ikinci satıra düşüyordu; yanındaki
   kartlar tek satır olduğu için şerit düzensiz görünüyordu. Yazı boyutu
   kutuya göre küçülüyor (cqi) ve rakam artık hiç kırılmıyor. */
.stat{container-type:inline-size}
.stat-num{
  display:block;color:var(--gold-400);margin-bottom:8px;
  font:700 clamp(24px,min(4.4vw,12.5cqi),52px)/1.05 var(--f-disp);
  font-variant-numeric:tabular-nums;
  /* DİKKAT: buraya `text-wrap:balance` EKLEME. `text-wrap` ile
     `white-space` aynı alt özelliği (text-wrap-mode) paylaşıyor; sonra
     yazılan `balance` nowrap'i sessizce iptal ediyor ve "120.000 ton"
     yine ikiye bölünüyor. */
  white-space:nowrap;
}
.stat span{color:rgba(255,255,255,.72);font-size:14.5px;font-weight:500}

/* --- galeri şeridi --- */
.shot-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.shot{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1;background:var(--sand)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.shot:hover img{transform:scale(1.08)}
.shot figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(17,48,29,.86));
  color:#fff;font-size:12.8px;font-weight:500;opacity:0;transform:translateY(8px);
  transition:opacity .3s,transform .3s var(--ease);
}
.shot:hover figcaption{opacity:1;transform:none}


/* --- insan için site haritası --- */
.smap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(26px,4vw,50px)}
.smap-col h2{font-size:clamp(19px,2vw,23px);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--sand)}
.smap-col ul{display:grid;gap:3px}
.smap-col li{padding:9px 0;border-bottom:1px solid var(--line)}
.smap-col li:last-child{border-bottom:0}
.smap-col a{display:inline-flex;align-items:center;gap:9px;font-weight:500;color:var(--ink);transition:color .2s,gap .2s var(--ease)}
.smap-col a .ic{color:var(--gold-600);flex:none}
.smap-col a:hover{color:var(--green-700);gap:13px}
.smap-col small{display:block;color:var(--ink-3);font-size:13px;margin-top:3px;padding-inline-start:23px}

/* --- gömülü harita --- */
/* HATA DÜZELTMESİ: kutuya `aspect-ratio` + iframe'e `position:absolute`
   verildiğinde Google'ın gömülü haritası yüklenme anında boyutunu ölçemiyor
   ve devasa gri alanın ortasında küçücük çiziliyordu. iframe'in yüksekliği
   ilk andan belli olmalı. */
.mapbox{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-1);background:var(--cream-2);line-height:0}
.mapbox iframe{display:block;width:100%;height:clamp(300px,34vw,460px);border:0}
.mapbox-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:12.8px;color:var(--ink-3);line-height:1.6}
.mapbox-note .ic{color:var(--gold-600);margin-top:3px;flex:none}

/* --- çağrı bandı --- */
.cta-band{position:relative;padding-block:clamp(70px,9vw,120px);overflow:hidden;background:var(--green-800)}
.cta-bg{position:absolute;inset:0;z-index:0;opacity:.26;overflow:hidden}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(17,48,29,.92),rgba(27,70,48,.7))}
.cta-in{position:relative;z-index:2;text-align:center;color:#fff}
.cta-in h2{font-size:clamp(27px,3.6vw,44px);margin-bottom:14px;max-width:18ch;margin-inline:auto}
.cta-in p{color:rgba(255,255,255,.78);max-width:56ch;margin-inline:auto;margin-bottom:30px;font-size:16.5px}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.cta-or{color:rgba(255,255,255,.5);font-size:14px}
.cta-phone{display:inline-flex;align-items:center;gap:10px;font:700 19px/1 var(--f-disp);color:#fff;border-bottom:2px solid var(--gold-500);padding-bottom:5px}
.cta-phone .ic{color:var(--gold-400)}

/* ---------------------------------------------------------- 9 alt bilgi */
.site-foot{background:var(--green-900);color:rgba(255,255,255,.66);font-size:14.6px}
.foot-top{padding-block:clamp(50px,6vw,78px)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:clamp(28px,4vw,52px)}
.foot-col{min-width:0}
.foot-col h3{font:600 12.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-bottom:20px}
.foot-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.foot-logo img{width:50px;height:50px;object-fit:contain}
.foot-logo b{display:block;font:700 18px/1 var(--f-disp);color:#fff;letter-spacing:.02em}
.foot-logo em{display:block;font:400 12.5px/1.4 var(--f-body);font-style:normal;color:var(--gold-400);margin-top:5px}
.foot-blurb{line-height:1.75;margin-bottom:22px;max-width:36ch}
.foot-social{display:flex;gap:9px}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.14);transition:background .2s,border-color .2s,color .2s,transform .2s}
.foot-social a:hover{background:var(--gold-500);border-color:var(--gold-500);color:#231a05;transform:translateY(-3px)}
.foot-list{display:grid;gap:11px}
.foot-list a{transition:color .2s,padding .22s var(--ease)}
.foot-list a:hover{color:var(--gold-400);padding-inline-start:5px}
.foot-icons li{display:flex;gap:11px;align-items:flex-start;line-height:1.6}
.foot-icons .ic{color:var(--gold-500);margin-top:3px;flex:none;width:18px;height:18px}
.foot-icons strong{color:#fff;font-weight:600;font-size:13px;letter-spacing:.04em}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:20px;font-size:13.4px}
.foot-bottom-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a:hover{color:var(--gold-400)}

.wa-float{
  position:fixed;inset-inline-end:20px;bottom:20px;z-index:60;
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;box-shadow:0 8px 26px rgba(37,211,102,.4);
  transition:transform .25s var(--ease);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float .ic{width:28px;height:28px}
.to-top{
  position:fixed;inset-inline-end:20px;bottom:84px;z-index:60;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--green-800);color:#fff;box-shadow:var(--sh-1);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s,visibility .28s,transform .28s var(--ease),background .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--green-700)}
.to-top .ic{transform:rotate(180deg)}

/* ------------------------------------------------------- 10 iç sayfalar */
.page-hero{position:relative;padding-top:calc(var(--head-h) + 60px);padding-bottom:62px;margin-top:calc(var(--head-h) * -1);overflow:hidden;background:var(--green-800)}
.page-hero-bg{position:absolute;inset:0;z-index:0;opacity:.34;overflow:hidden}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(17,48,29,.94),rgba(17,48,29,.6))}
.page-hero-in{position:relative;z-index:2;color:#fff}
.page-hero h1{font-size:clamp(30px,4.4vw,54px);color:#fff;margin-bottom:12px}
.page-hero p{color:rgba(255,255,255,.76);max-width:60ch;font-size:16.8px}
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.4px;color:rgba(255,255,255,.62);margin-bottom:18px}
.crumb a:hover{color:var(--gold-400)}
.crumb .ic{width:13px;height:13px;opacity:.5}
[dir=rtl] .crumb .ic{transform:scaleX(-1)}
.crumb span[aria-current]{color:var(--gold-400)}

.prose{max-width:74ch;font-size:16.6px;line-height:1.82;color:var(--ink-2)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(20px,2.1vw,26px);color:var(--ink);margin-top:1.8em}
.prose h3{font-size:clamp(19px,2vw,24px);color:var(--ink);margin-top:1.7em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--green-700);border-bottom:1px solid var(--sand)}
.prose a:hover{border-bottom-color:var(--green-700)}
.prose ul{display:grid;gap:11px;padding-inline-start:4px}
.prose ul li{position:relative;padding-inline-start:26px}
.prose ul li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--gold-500);transform:rotate(45deg);
}
.prose ol{counter-reset:p;display:grid;gap:11px}
.prose ol li{counter-increment:p;position:relative;padding-inline-start:34px}
.prose ol li::before{content:counter(p) ".";position:absolute;inset-inline-start:0;font-weight:700;color:var(--gold-600)}
.prose blockquote{border-inline-start:3px solid var(--gold-500);padding-inline-start:22px;font-style:italic;color:var(--ink-2)}
/* Tablolar kendi kaydirma kabinda durur (rich(), app/helpers.php). */
.tablo-kaydir{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:1.4em}
.prose .tablo-kaydir{margin-block:1.4em}
.prose .tablo-kaydir table{margin-block:0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:min(100%,330px)}
.prose th,.prose td{border:1px solid var(--line);padding:11px 14px;text-align:start}
.prose th{background:var(--cream-2);font-weight:600}

.page-body{padding-block:clamp(52px,6.5vw,88px)}
.page-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(34px,5vw,64px);align-items:start}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-1);position:sticky;top:calc(var(--head-h) + 20px)}
.side-card h3{font-size:19px;margin-bottom:8px}
.side-card p{color:var(--ink-3);font-size:14.6px;margin-bottom:18px;line-height:1.7}
.side-list{display:grid;gap:14px;margin-bottom:20px}
.side-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.6px;color:var(--ink-2)}
.side-list .ic{color:var(--gold-600);margin-top:3px;flex:none;width:18px;height:18px}

/* --- ürün ayrıntısı --- */
.pdet{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,62px);align-items:start}
.pdet-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.pdet-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pdet-chip{
  position:absolute;top:16px;inset-inline-start:16px;
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  font:600 12.5px/1 var(--f-body);color:var(--green-800);
}
.pdet-chip .ic{color:var(--gold-600);width:16px;height:16px}
.pdet h1{font-size:clamp(28px,3.6vw,42px);margin-bottom:14px}
.pdet-sum{font-size:17px;color:var(--ink-3);line-height:1.76;margin-bottom:24px}
.pdet-sub{font:600 clamp(17px,1.7vw,20px)/1.3 var(--f-disp);color:var(--ink);
  margin-bottom:14px;letter-spacing:-.005em}
.spec-table{width:100%;border-collapse:collapse;margin-bottom:28px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec-table th,.spec-table td{padding:13px 16px;text-align:start;font-size:14.8px;border-bottom:1px solid var(--line)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{background:var(--cream-2);font-weight:600;width:46%;color:var(--ink-2)}
.spec-table td{background:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.pdet-actions{display:flex;gap:12px;flex-wrap:wrap}

/* --- ürün liste filtresi --- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px}
.filter{
  padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font:600 13.5px/1 var(--f-body);color:var(--ink-2);transition:all .22s var(--ease);
}
.filter:hover{border-color:var(--green-600);color:var(--green-700)}
.filter.is-on{background:var(--green-700);border-color:var(--green-700);color:#fff}

/* --- galeri sayfası --- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}
.gal-item{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--sand);cursor:zoom-in;border:0;padding:0;display:block;width:100%}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal-item:hover img{transform:scale(1.07)}
.gal-item figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:30px 16px 14px;text-align:start;
  background:linear-gradient(transparent,rgba(17,48,29,.88));color:#fff;font-size:13.6px;font-weight:500;
}
.gal-zoom{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.9);color:var(--green-800);opacity:0;transform:scale(.85);transition:all .28s var(--ease)}
.gal-item:hover .gal-zoom{opacity:1;transform:none}

.lightbox{position:fixed;inset:0;z-index:120;background:rgba(9,22,14,.94);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox.show{opacity:1;visibility:visible}
.lightbox img{max-width:min(94vw,1200px);max-height:84vh;border-radius:var(--r);box-shadow:var(--sh-3)}
.lightbox-cap{color:rgba(255,255,255,.8);text-align:center;margin-top:16px;font-size:14.5px}
.lb-close{position:absolute;top:20px;inset-inline-end:20px;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff}
.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-prev{inset-inline-start:18px}
.lb-next{inset-inline-end:18px}
[dir=rtl] .lb-prev .ic,[dir=rtl] .lb-next .ic{transform:scaleX(-1)}

/* ------------------------------------------------------------- 11 form */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,60px);align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);box-shadow:var(--sh-1)}
.form-card h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:8px}
.form-card > p{color:var(--ink-3);margin-bottom:26px;font-size:15.2px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field-full{grid-column:1/-1}
.field label{font:600 13px/1 var(--f-body);color:var(--ink-2);letter-spacing:.01em}
.field label .req{color:var(--clay)}
.field label .opt{font-weight:400;color:var(--ink-3);font-size:12px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--cream);font-size:15.4px;transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{min-height:142px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--green-600);background:#fff;box-shadow:0 0 0 4px rgba(47,109,72,.1);
}
.field.has-err input,.field.has-err textarea{border-color:var(--clay);background:#fdf3f1}
.field-err{font-size:12.8px;color:var(--clay);font-weight:500}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0 22px;font-size:13.8px;color:var(--ink-3);line-height:1.6}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--green-700);flex:none}

.alert{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);margin-bottom:24px;font-size:15px;line-height:1.6}
.alert .ic{flex:none;margin-top:2px}
.alert-ok{background:var(--green-50);border:1px solid #c6ddc9;color:var(--green-800)}
.alert-err{background:#fdf1ef;border:1px solid #f0c7bf;color:#8c2d17}

.info-cards{display:grid;gap:16px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.info-card h3{font-size:17.5px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.info-card h3 .ic{color:var(--gold-600)}
.info-card ul{display:grid;gap:12px}
.info-card li{display:flex;gap:11px;align-items:flex-start;font-size:14.8px;color:var(--ink-2);line-height:1.62}
.info-card li .ic{color:var(--green-600);margin-top:3px;flex:none;width:18px;height:18px}
.info-card a:hover{color:var(--green-700)}
/* Alt çizgi border-bottom ile verilirse kutunun ALTINA yapışır: dokunma
   hedefini büyütmek için yükseklik verdiğimizde çizgi metinden kopup
   boşlukta asılı kalıyordu. text-decoration metne yapışır, kutu ne kadar
   uzarsa uzasın yerinde kalır. */
.map-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font:600 13.5px/1 var(--f-body);color:var(--green-700);
  text-decoration:underline;text-decoration-color:var(--sand);
  text-decoration-thickness:1.5px;text-underline-offset:5px;
  transition:text-decoration-color .2s,color .2s;
}
.map-link:hover{text-decoration-color:var(--green-700)}

/* --- 404 --- */
.e404{min-height:72vh;display:grid;place-items:center;text-align:center;padding-block:100px}
.e404-code{font:700 clamp(90px,18vw,190px)/1 var(--f-disp);color:transparent;-webkit-text-stroke:2px var(--sand);margin-bottom:-12px}
.e404 h1{font-size:clamp(26px,3.4vw,40px);margin-bottom:12px}
.e404 p{color:var(--ink-3);max-width:46ch;margin:0 auto 28px}

/* ---------------------------------------------------------- 12 hareket */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* --------------------------------------------------------------- 13 RTL */
[dir=rtl] .kicker::before{background:linear-gradient(270deg,var(--gold-500),var(--clay))}
[dir=rtl] .hero-title,[dir=rtl] .sec-title,[dir=rtl] .hero-text{letter-spacing:0}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{letter-spacing:0;line-height:1.35}
[dir=rtl] .step-num{font-family:var(--f-body)}
[dir=rtl] .stat-num{font-family:var(--f-body)}

/* -------------------------------------------------------- 14 duyarlılık */
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:44px}
  .about-badge{inset-inline-end:16px}
  /* `1fr` aslinda `minmax(auto,1fr)` demek: sutun, icindeki en genis ogenin
     en kucuk genisliginin ALTINA inemez. Cerez politikasindaki tablo yuzunden
     sutun 377 px'e sisip sayfayi tasiriyordu. `minmax(0,1fr)` kuculmeye izin verir. */
  .page-cols{grid-template-columns:minmax(0,1fr)}
  .side-card{position:static}
  .pdet{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:1080px){
  .shot-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:920px){
  :root{--head-h:70px}
  .mainnav{display:none}
  .burger{display:block}
  .head-cta{display:none}
  .head-in{justify-content:space-between}
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-card{max-width:440px}
  .hero{min-height:auto}
  .steps::before{display:none}
  .tb-hide-sm{display:none}
}

@media (max-width:640px){
  body{font-size:15.4px}

  /* HATA DÜZELTMESİ: .sec-head-row dikey sıraya geçince `flex:1 1 420px`
     ana ekseni YÜKSEKLİK olur ve başlıkla düğme arasında 420px'lik boşluk
     açardı. Dikey sırada taban ölçü otomatik olmalı. */
  .sec-head-row > div{flex:0 0 auto}

  /* bölüm boşlukları telefonda daha sıkı */
  .sec{padding-block:clamp(46px,9vw,64px)}
  .sec-tight{padding-block:clamp(38px,7vw,52px)}
  .sec-head{margin-bottom:26px}
  .sec-head-row{gap:18px}
  .page-body{padding-block:clamp(34px,8vw,52px)}
  .page-hero{padding-top:calc(var(--head-h) + 34px);padding-bottom:38px}
  .cta-band{padding-block:clamp(48px,10vw,70px)}
  .cta-in p{margin-bottom:22px}

  /* çağrı bandı: düğme + "ya da" + telefon telefonda alt alta dursun */
  .cta-btns{flex-direction:column;gap:14px}
  .cta-btns .btn{width:100%;justify-content:center}
  .cta-or{order:1}
  .cta-phone{order:2}

  .topbar-in{min-height:38px;font-size:12.4px;gap:12px}
  .tb-social{display:none}
  .brand img{width:40px;height:40px}
  .brand-text b{font-size:16px}
  .brand-text em{font-size:9.5px;letter-spacing:.16em}
  .hero-in{padding-block:52px 84px}
  .hero-btns .btn{flex:1 1 auto;justify-content:center}
  .hero-scroll{display:none}
  .sec-head-row{flex-direction:column;align-items:stretch}
  .sec-head-row .btn{align-self:flex-start}
  .feat{padding:24px 20px}
  .step{padding:0}
  /* Alt bilgi telefonda ortalanır (kullanıcı isteği). */
  /* Telefonda alt bilgi bir buçuk ekran uzunluğundaydı: iki uzun bağlantı
     listesi alt alta diziliyordu. Artık yan yana duruyorlar, marka ve
     iletişim tam genişlikte kalıyor. */
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 18px;text-align:center}
  .foot-brand,.foot-contact{grid-column:1 / -1}
  .foot-col h3{margin-bottom:14px}
  .foot-logo{justify-content:center;margin-bottom:14px}
  .foot-blurb{margin-inline:auto;max-width:44ch}
  .foot-social{justify-content:center}
  .foot-list{justify-items:center}
  .foot-list a:hover{padding-inline-start:0}
  .foot-icons li{justify-content:center;text-align:start;max-width:30ch;margin-inline:auto}
  .foot-bottom-in{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .foot-legal{justify-content:center}
  .shot-strip{grid-template-columns:repeat(2,1fr)}
  .mapbox iframe{height:clamp(280px,64vw,340px)}
  .cta-phone{font-size:17px}
  .wa-float{width:48px;height:48px;inset-inline-end:14px;bottom:14px}
  .to-top{width:40px;height:40px;inset-inline-end:14px;bottom:72px}
  .lb-nav{width:44px;height:44px}
  .lb-prev{inset-inline-start:8px}
  .lb-next{inset-inline-end:8px}
}

@media (max-width:420px){
  .shot-strip{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .about-badge{padding:14px 18px}
  .about-badge b{font-size:25px}
}

/* ==========================================================================
   15 · ZENGİN SAYFA ŞABLONU (hakkımızda · tarım · ticaret)
   Kuru metin yerine: giriş bölümü + görselli kartlar + dönüşümlü medya
   blokları + sayı bandı. İçerik `blocks` tablosundaki sayfa alanlarından gelir.
   ========================================================================== */

/* --- giriş: metin + çerçeveli görsel --- */
.zp-intro{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,68px);align-items:center;
}
.zp-lead{font-size:clamp(18px,1.9vw,23px);line-height:1.6;color:var(--ink);
  font-weight:500;margin-bottom:20px;letter-spacing:-.01em}
.zp-body{color:var(--ink-2);font-size:16.4px;line-height:1.8}
.zp-body > * + *{margin-top:1.1em}
.zp-body h2,.zp-body h3{font-size:clamp(19px,2vw,24px);color:var(--ink);margin-top:1.6em}
.zp-body strong{color:var(--ink);font-weight:600}
.zp-body ul{display:grid;gap:11px;margin-top:1.1em}
.zp-body ul li{position:relative;padding-inline-start:26px}
.zp-body ul li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:8px;height:8px;border-radius:2px;background:var(--gold-500);transform:rotate(45deg)}

.zp-media{position:relative}
.zp-media img{width:100%;border-radius:var(--r-lg);object-fit:cover;aspect-ratio:4/5;
  box-shadow:var(--sh-2);position:relative;z-index:1}
.zp-media::before{content:"";position:absolute;z-index:0;
  inset-block:-16px;inset-inline-start:-16px;inset-inline-end:36px;
  border:2px solid var(--gold-500);border-radius:var(--r-lg);opacity:.45}
.zp-badge{
  position:absolute;z-index:2;inset-inline-end:-10px;bottom:-18px;
  background:var(--green-800);color:#fff;border-radius:var(--r);
  padding:16px 22px;box-shadow:var(--sh-2);text-align:center;min-width:132px;
}
.zp-badge b{display:block;font:700 clamp(24px,2.6vw,32px)/1 var(--f-disp);color:var(--gold-400)}
.zp-badge span{display:block;font:600 10.5px/1.4 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;opacity:.78;margin-top:6px}

/* --- özet kartları --- */
.zp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:18px}
.zp-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.zp-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.zp-card-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  margin-bottom:16px;background:linear-gradient(140deg,var(--gold-100),#fff);
  color:var(--gold-600);border:1px solid var(--sand)}
.zp-card-ic .ic{width:24px;height:24px}
.zp-card h2,.zp-card h3{font-size:18px;margin-bottom:8px}
.zp-card p{color:var(--ink-3);font-size:14.6px;line-height:1.7}

/* --- dönüşümlü medya blokları --- */
.zp-rows{display:grid;gap:clamp(48px,7vw,92px)}
.zp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4.5vw,60px);align-items:center}
.zp-row:nth-child(even) .zp-row-media{order:2}
.zp-row-media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.zp-row-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.zp-row:hover .zp-row-media img{transform:scale(1.05)}
.zp-row-no{
  position:absolute;z-index:2;top:14px;inset-inline-start:14px;
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:12px;
  background:rgba(250,246,238,.94);backdrop-filter:blur(6px);
  font:700 17px/1 var(--f-disp);color:var(--green-800);
}
.zp-row-text h2,.zp-row-text h3{font-size:clamp(21px,2.4vw,29px);margin-bottom:12px}
.zp-row-text p{color:var(--ink-2);font-size:16px;line-height:1.78}
.zp-row-text .kicker{margin-bottom:12px}

/* --- alıntı bandı --- */
.zp-quote{
  background:var(--green-800);color:#fff;border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px);position:relative;overflow:hidden;
}
.zp-quote::before{content:"”";position:absolute;inset-inline-end:18px;top:-26px;
  font:700 150px/1 var(--f-disp);color:rgba(255,255,255,.07)}
.zp-quote p{font-family:var(--f-disp);font-size:clamp(19px,2.4vw,27px);line-height:1.45;
  font-weight:600;max-width:34ch;position:relative;z-index:1}
.zp-quote cite{display:block;margin-top:16px;font-style:normal;font-size:13.4px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-400);font-weight:600}

/* --- sayfa içi sayı şeridi --- */
.zp-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:16px;margin-top:clamp(34px,4vw,54px)}
.zp-num{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;text-align:center}
.zp-num b{display:block;font:700 clamp(25px,3vw,34px)/1 var(--f-disp);color:var(--green-700);
  margin-bottom:6px;font-variant-numeric:tabular-nums}
.zp-num span{font-size:13.4px;color:var(--ink-3);font-weight:500}

[dir=rtl] .zp-quote::before{transform:scaleX(-1)}
[dir=rtl] .zp-badge b,[dir=rtl] .zp-num b,[dir=rtl] .zp-row-no{font-family:var(--f-body)}

@media (max-width:900px){
  .zp-intro{grid-template-columns:1fr;gap:44px}
  .zp-media{max-width:460px;margin-inline:auto;width:100%}
  .zp-media img{aspect-ratio:4/3}
  .zp-row{grid-template-columns:1fr;gap:20px}
  .zp-row:nth-child(even) .zp-row-media{order:0}
}
@media (max-width:640px){
  .zp-media::before{inset-inline-end:16px;inset-block:-10px}
  .zp-badge{inset-inline-end:10px;bottom:-14px;padding:13px 18px;min-width:112px}
  .zp-card{padding:22px 20px}
  .zp-rows{gap:38px}
  .zp-quote p{font-size:19px}
}

/* --- iletişim: ürün rozetleri ve yanıt sözü paneli ----------------------- */
.crop-chips{display:flex;flex-wrap:wrap;gap:8px}
.crop-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px 7px 8px;border-radius:999px;
  background:var(--cream);border:1px solid var(--line);
  font:500 13.4px/1 var(--f-body);color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease);
}
.crop-chip:hover{border-color:var(--green-600);background:#fff;color:var(--green-700);transform:translateY(-2px)}
.crop-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--gold-100);color:var(--gold-600);flex:none;transition:background .2s,color .2s}
.crop-chip:hover .crop-ic{background:var(--green-700);color:#fff}

.info-promise{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--green-800),var(--green-900));
  color:#fff;border-radius:var(--r);padding:26px 24px;
}
.promise-deco{
  position:absolute;inset:0;z-index:0;display:flex;flex-wrap:wrap;gap:18px;
  padding:14px;opacity:.09;color:var(--gold-400);pointer-events:none;
}
.promise-deco .ic{width:40px;height:40px}
.promise-ic{position:relative;z-index:1;display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;background:rgba(221,171,69,.18);
  color:var(--gold-400);margin-bottom:14px}
.info-promise b{position:relative;z-index:1;display:block;
  font:700 clamp(20px,2.2vw,25px)/1.1 var(--f-disp);color:var(--gold-400);margin-bottom:8px}
.info-promise p{position:relative;z-index:1;color:rgba(255,255,255,.76);
  font-size:14.4px;line-height:1.7}
[dir=rtl] .info-promise b{font-family:var(--f-body)}

/* Dönüşümlü bölümler kendi tarafından süzülerek gelir — 18 px, tek seferlik.
   Kaydırma sırasında göze çarpmadan yön duygusu verir. */
.js .zp-row.reveal .zp-row-media{opacity:0;transform:translateX(-18px);
  transition:opacity .7s var(--ease) .05s,transform .7s var(--ease) .05s}
.js .zp-row.reveal .zp-row-text{opacity:0;transform:translateX(18px);
  transition:opacity .7s var(--ease) .12s,transform .7s var(--ease) .12s}
.js .zp-row:nth-child(even).reveal .zp-row-media{transform:translateX(18px)}
.js .zp-row:nth-child(even).reveal .zp-row-text{transform:translateX(-18px)}
.js .zp-row.reveal.in .zp-row-media,
.js .zp-row.reveal.in .zp-row-text{opacity:1;transform:none}

@media (max-width:900px){
  /* Dar ekranda yatay kayma yerine dikey: yan yana durmuyorlar. */
  .js .zp-row.reveal .zp-row-media,
  .js .zp-row.reveal .zp-row-text,
  .js .zp-row:nth-child(even).reveal .zp-row-media,
  .js .zp-row:nth-child(even).reveal .zp-row-text{transform:translateY(16px)}
}
@media (prefers-reduced-motion:reduce){
  .js .zp-row.reveal .zp-row-media,
  .js .zp-row.reveal .zp-row-text{opacity:1;transform:none}
}

/* ============================================================ 16 · ALT BİLGİ
   Kapanış çağrısı şeridi, dil seçimi, ürün şeridi.
   ========================================================================= */

/* --- kapanış çağrısı: alt bilginin en üstünde tek iş getiren şerit ------- */
.foot-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(105deg,var(--green-800) 0%,var(--green-900) 58%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Arka planda soluk başak dokusu — yalnız boya, içerik değil. */
.foot-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23ddab45' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M12 21V9.5M12 9.5c0-2 1-3.4 2.6-4.3M12 9.5c0-2-1-3.4-2.6-4.3M12 13.6c0-2 1-3.4 2.6-4.3M12 13.6c0-2-1-3.4-2.6-4.3M12 17.6c0-2 1-3.4 2.6-4.3M12 17.6c0-2-1-3.4-2.6-4.3'/%3E%3C/svg%3E");
  background-size:150px 150px;opacity:.035;
}
/* Sağ üstte yumuşak altın parıltı. */
.foot-cta::after{
  content:"";position:absolute;inset-inline-end:-6%;top:-70%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(221,171,69,.20),transparent 68%);pointer-events:none;
}
.foot-cta-in{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,56px);padding-block:clamp(34px,4.4vw,54px);flex-wrap:wrap;
}
.foot-cta-text{flex:1 1 400px;min-width:0}
.foot-cta-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font:600 11.5px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:12px;
}
.foot-cta-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--gold-500)}
.foot-cta h2{
  font:600 clamp(21px,2.5vw,30px)/1.22 var(--f-disp);color:#fff;
  letter-spacing:-.01em;margin-bottom:9px;
}
.foot-cta p{color:rgba(255,255,255,.7);line-height:1.7;max-width:52ch;margin:0}

.foot-cta-acts{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
/* Telefon: düğme değil, okunur bir numara. Tıklanabilirliği alt çizgi değil
   altın renk ve ikon anlatıyor. */
.foot-cta-tel{display:flex;align-items:center;gap:12px;color:#fff;transition:color .2s}
.foot-cta-tel .ic{
  flex:none;width:42px;height:42px;padding:11px;border-radius:50%;
  border:1px solid rgba(221,171,69,.4);color:var(--gold-400);
  transition:background .22s,color .22s,transform .22s var(--ease);
}
.foot-cta-tel:hover .ic{background:var(--gold-500);color:#231a05;transform:scale(1.06)}
.foot-cta-tel em{
  display:block;font-style:normal;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-400);margin-bottom:3px;
}
.foot-cta-tel b{
  display:block;font:600 17px/1.1 var(--f-body);color:#fff;
  /* RTL yönü [dir=rtl] listesinde veriliyor (yukarıda, 2. bölüm):
     yalnız `isolate` yetmiyor, `direction:ltr` de gerekiyor. */
}

/* --- alt bilgideki dil seçimi ------------------------------------------- */
.foot-langs{margin-top:26px}
.foot-langs h3{margin-bottom:12px}
.foot-langs ul{display:flex;flex-wrap:wrap;gap:8px}
.foot-langs a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px 7px 8px;border-radius:999px;font-size:13.2px;
  border:1px solid rgba(255,255,255,.14);
  transition:background .2s,border-color .2s,color .2s;
}
.foot-langs a:hover{background:rgba(255,255,255,.07);border-color:rgba(221,171,69,.5);color:#fff}
.foot-langs a.is-current{background:rgba(221,171,69,.14);border-color:rgba(221,171,69,.5);color:var(--gold-400)}
.foot-langs .flag{flex:none;border-radius:3px}

/* --- ürün sütunu: düz liste değil, ikonlu satırlar --------------------- */
.foot-crops{gap:4px}
.foot-crops a{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 12px 5px 9px;margin-inline-start:-9px;border-radius:999px;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;
}
.foot-crops a .ic{color:var(--gold-500);flex:none;transition:color .2s,transform .22s var(--ease)}
.foot-crops a:hover{
  background:rgba(221,171,69,.11);border-color:rgba(221,171,69,.34);
  color:#fff;padding-inline-start:9px;      /* .foot-list a:hover kaymasını iptal et */
}
.foot-crops a:hover .ic{color:var(--gold-400);transform:scale(1.12)}

.foot-copy{unicode-bidi:isolate}

/* --- dar ekran ----------------------------------------------------------- */
@media (max-width:900px){
  .foot-cta-in{flex-direction:column;align-items:flex-start;text-align:start}
  /* HATA DÜZELTMESİ: dikey sıraya geçen flex kutuda `flex:1 1 400px` ana
     ekseni YÜKSEKLİK yapar — metinle düğmeler arasında 350 px boşluk
     açılıyordu. Sütun düzeninde temel ölçü daima `auto` olmalı. */
  .foot-cta-text{flex:0 0 auto;width:100%}
  .foot-cta-acts{width:100%}
}
@media (max-width:640px){
  /* Ortalanmış alt bilgi: çağrı şeridi de ortalanır. */
  .foot-cta-in{align-items:center;text-align:center}
  .foot-cta-kicker{justify-content:center}
  .foot-cta p{margin-inline:auto}
  .foot-cta-acts{justify-content:center;flex-direction:column;gap:18px}
  .foot-cta-acts .btn{width:100%;max-width:320px;justify-content:center}
  .foot-cta-tel{text-align:start}

  .foot-langs ul{justify-content:center}
  /* İkonlu satırlar tek tek ortalanınca ikonlar düzensiz bir kenar
     oluşturuyordu; liste ortalanmış tek blok, içindekiler sola hizalı. */
  .foot-crops{display:inline-grid;justify-items:start;margin-inline:auto}
  .foot-crops a{margin-inline-start:0}

  /* HATA DÜZELTMESİ: iletişim satırları ortalanınca ikonlar birbirinin
     altına gelmiyordu (çok satırlı adres yüzünden). Liste artık ortalanmış
     tek bir blok; içindeki satırlar sola hizalı, ikonlar alt alta. */
  .foot-icons{display:inline-grid;text-align:start;margin-inline:auto;justify-items:start}
  .foot-icons li{justify-content:flex-start;max-width:34ch;margin-inline:0}
}

/* ========================================================== 17 · YAZDIRMA
   B2B sitesinde ürün ve iletişim sayfaları kâğıda dökülüyor. Ekrana ait ne
   varsa (menü, kayan düğmeler, kapak fotoğrafı) çıkmasın; bağlantı adresleri
   görünsün ki kâğıttan da ulaşılabilsin.
   ========================================================================= */
@media print{
  .site-head,.topbar,.mnav,.mnav-ort,.wa-float,.to-top,.foot-cta,
  .page-hero-bg,.hero-bg,.cta-bg,.stats-bg,.crumb,.filters,
  .lightbox,.gal-zoom,.foot-social,.foot-langs{display:none!important}

  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  .page-hero,.sec,.page-body{padding-block:0!important;min-height:0!important}
  .page-hero-in h1{color:#000!important}
  .site-foot,.foot-top,.foot-bottom{background:#fff!important;color:#000!important;
    border-top:1px solid #999}
  .site-foot a,.foot-col h3,.foot-logo b,.foot-logo em{color:#000!important}

  /* Bağlantı adresleri kâğıtta da okunsun (iç bağlantılar hariç, uzun olur) */
  main a[href^="http"]::after,main a[href^="mailto"]::after,main a[href^="tel"]::after{
    content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}

  .sec,.zp-row,.pcard,.gal-item,figure{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  img{max-width:100%!important;filter:none!important}
  *{box-shadow:none!important;text-shadow:none!important;animation:none!important;
    transition:none!important}
}

/* ================================================= 18 · DOKUNMA HEDEFLERİ
   Telefonda parmakla basılan her şey en az ~44 px olmalı. Alt bilgideki
   bağlantılar 16-23 px yüksekliğindeydi: yanlış satıra basmak çok kolaydı.
   Numara BÜYÜTÜLMÜYOR — listelerin arasındaki boşluk bağlantının kendi
   dolgusuna çevriliyor, yani görünüm aynı kalıyor, basılabilir alan büyüyor.
   ========================================================================= */
@media (max-width:700px){

  /* --- alt bilgi listeleri: boşluk → dolgu --- */
  .foot-list{gap:0}
  .foot-list li{display:flex;justify-content:inherit}
  /* YALNIZ bağlantılar. Span'a `display:inline-flex` vermek adres satırını
     bozuyordu: <strong>Mersin</strong><br>adres yapısında strong ile adres
     yan yana iki flex öğesine dönüşüyordu. Span tıklanmıyor, hedef gerekmez. */
  .foot-list a{
    display:inline-flex;align-items:center;min-height:44px;padding-block:6px;
  }
  .foot-icons li{min-height:44px;align-items:center}
  .foot-icons .ic{margin-top:0}
  /* Çok satırlı adres satırı ortalanmasın, üstten hizalansın */
  .foot-icons li:has(strong){align-items:flex-start;padding-block:8px}
  .foot-icons li:has(strong) .ic{margin-top:3px}

  .foot-legal{gap:0 18px}
  .foot-legal a{display:inline-flex;align-items:center;min-height:44px}

  .foot-crops a{min-height:44px}
  .foot-langs a{min-height:44px}

  /* Site haritası: dolgu satırdan bağlantıya taşınır — görünüm aynı,
     basılabilir alan satırın tamamı olur. */
  .smap-col li{padding:0}
  .smap-col a{min-height:44px;padding-block:9px}
  .smap-col small{padding-bottom:9px;margin-top:-4px}

  /* --- üst şerit ve dil düğmesi --- */
  .tb-item,
  .langsw-btn{min-height:44px}

  /* --- süzgeç düğmeleri (ürünler, galeri) --- */
  .filter{min-height:42px;padding-inline:18px}

  /* --- kapanış bandındaki telefon ve harita bağlantısı --- */
  .cta-phone,
  .map-link,
  .crumb a,
  .info-card a,
  .side-list a{display:inline-flex;align-items:center;min-height:44px}
  .crumb{gap:4px 9px}

  /* Onay kutusunun kendisi 22 px; basılabilir alan TÜM etiket olmalı. */
  .consent{min-height:44px;align-items:center}
  .consent input[type=checkbox]{width:22px;height:22px;flex:none}

  /* --- form: onay kutusu parmakla basılacak kadar büyük --- */
  .form-check input[type=checkbox],
  input[type=checkbox]{width:22px;height:22px;flex:none}
  .form-check label,
  label:has(> input[type=checkbox]){min-height:44px;display:flex;align-items:center;gap:10px}
}

/* Alt bilgi ekrana girince kayan WhatsApp düğmesi çekilir (site.js). */
.wa-float{transition:transform .28s var(--ease),opacity .28s var(--ease),background .2s,box-shadow .25s}
.wa-float.is-away{opacity:0;transform:translateY(14px) scale(.85);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:opacity .2s}
  .wa-float.is-away{transform:none}
}

/* ============================================== 19 · DAR EKRANDA TABLOLAR
   Sutun basliklari hucrelere etiket olarak kopyalaninca (site.js) her satir
   kendi kartina donusur. Etiket yoksa tablo eski haliyle yatay kaydirilir.
   ========================================================================= */
@media (max-width:640px){
  .tablo-kaydir:has(.tablo-yigin){overflow-x:visible}

  .tablo-yigin{min-width:0;border:0;display:block}
  .tablo-yigin thead{display:none}
  .tablo-yigin tbody,
  .tablo-yigin tr,
  .tablo-yigin td{display:block;width:100%}

  .tablo-yigin tr{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
    margin-bottom:12px;overflow:hidden;
  }
  .tablo-yigin td{
    display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
    gap:12px;align-items:baseline;
    padding:11px 14px;border:0;border-bottom:1px solid var(--line);
  }
  .tablo-yigin tr td:last-child{border-bottom:0}
  .tablo-yigin td::before{
    content:attr(data-label);
    font:600 12.5px/1.5 var(--f-body);letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-3);
  }
  .tablo-yigin td:empty{display:none}
}

/* ============================================ 20 · ALT BİLGİ · DAR EKRAN
   Telefonda alt bilgi uzun bir liste yığınına dönüşüyordu. Amaç: bölümleri
   birbirinden ayırmak, dil seçimini düzenli bir ızgaraya almak ve iletişimi
   kart yapıp gözün durabileceği bir yer bırakmak.
   ========================================================================= */
@media (max-width:640px){

  .foot-top{padding-block:40px 34px}
  .foot-grid{gap:28px 16px}

  /* Bölüm başlıkları: ortada, altında ince altın çizgi. */
  .foot-col h3{
    position:relative;padding-bottom:12px;margin-bottom:12px;
    font-size:11.5px;letter-spacing:.18em;
  }
  .foot-col h3::after{
    content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:28px;height:2px;border-radius:2px;background:var(--gold-500);
  }
  .foot-brand .foot-langs h3{margin-bottom:14px}

  /* Marka bloğu */
  .foot-logo{gap:10px}
  .foot-blurb{max-width:38ch;margin-bottom:18px;font-size:14.2px}

  /* Dil seçimi: 2×2 ızgara — dört düğme de aynı boyda, satır sonu kalmaz. */
  .foot-langs{margin-top:22px}
  .foot-langs ul{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    max-width:300px;margin-inline:auto;
  }
  .foot-langs li{display:flex}
  .foot-langs a{flex:1;justify-content:center;padding-inline:10px}

  /* İletişim: kart. Alt bilginin çapası burası. */
  .foot-contact{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.09);
    border-radius:var(--r);
    padding:22px 18px 8px;
    margin-top:4px;
  }
  .foot-contact h3{margin-bottom:14px}
  .foot-icons{gap:0}

  /* Alt bant */
  .foot-bottom{padding-block:18px}
  .foot-copy{font-size:12.8px;line-height:1.6;max-width:34ch;margin-inline:auto}
  /* Dört yasal bağlantı 3+1 diye kırılıyordu; 2×2 ızgara simetrik duruyor. */
  .foot-legal{
    display:grid;grid-template-columns:1fr 1fr;gap:0 10px;
    font-size:13px;max-width:330px;margin-inline:auto;
  }
  .foot-legal li{display:flex;justify-content:center}
}

/* Çok dar ekranda (küçük telefonlar) ürün/bağlantı sütunları tek sıraya iner. */
@media (max-width:360px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-langs ul{max-width:none}
  /* Cok dar ekranda kutu ve dugme alt alta */
  .foot-news-row{flex-wrap:wrap}
  .foot-news-btn{flex:1 1 100%}
}

/* =================================================== 21 · KAPAK KARTI · TELEFON
   Masaustunde kart kapagin saginda durur. Telefonda ayni kart kapagin altina
   dusup sayfayi 1500 px'e uzatiyor, kart da goruntu alaninin ortasinda ikiye
   bolunuyordu. Telefonda kart yerine dugmelerin altinda bir cip sirasi var:
   ayni dort urun, ayni baglantilar, on kat daha az yer. */
@media (max-width:640px){
  .hero-in{gap:22px}
  .hero-card{background:none;border:0;box-shadow:none;padding:0;border-radius:0;max-width:none;overflow:visible}
  .hero-card::before{display:none}
  .hero-card-h{border-bottom:0;padding-bottom:0;margin-bottom:10px}
  .hero-card-title{color:var(--gold-400);font-size:10.5px}
  .hero-card ul{display:flex;flex-wrap:wrap;gap:8px}
  .hero-card li+li{border-top:0}
  .hero-card li a{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 14px 9px 11px;border-radius:999px;min-height:40px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  }
  .hc-ic{width:16px;height:16px;color:var(--gold-400)}
  .hc-name{font:600 14px/1 var(--f-body);color:#fff;letter-spacing:0;white-space:nowrap}
  .hc-cat{display:none}
  .hero-card-all{
    display:inline-flex;width:auto;margin-top:12px;padding:10px 16px;border-radius:999px;
    background:transparent;border:1px solid rgba(221,171,69,.5);color:var(--gold-400);
    box-shadow:none;font-size:13.5px;
  }
  .hero-card-all:hover{background:rgba(221,171,69,.12);transform:none;box-shadow:none}
}

/* ================================================= 22 · HAFIF ANIMASYONLAR
   Abartmadan: kartlarda hafif kalkis, kapak kartinda satir satir gelis,
   baslikta tek seferlik altin parilti. Hareket istemeyen kullanici icin
   hepsi kapanir. */
.pcard .pcard-ic{transition:transform .3s var(--ease),background .25s}
.pcard:hover .pcard-ic{transform:translateY(-3px) rotate(-6deg)}
.zp-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.zp-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.zp-card-ic{transition:transform .3s var(--ease)}
.zp-card:hover .zp-card-ic{transform:scale(1.08)}
.step-ic{transition:transform .3s var(--ease)}
.step:hover .step-ic{transform:translateY(-3px)}
.info-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.info-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.js .hero-card.reveal.in li{animation:hcIn .5s var(--ease) both}
.js .hero-card.reveal.in li:nth-child(1){animation-delay:.10s}
.js .hero-card.reveal.in li:nth-child(2){animation-delay:.18s}
.js .hero-card.reveal.in li:nth-child(3){animation-delay:.26s}
.js .hero-card.reveal.in li:nth-child(4){animation-delay:.34s}
@keyframes hcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-title .grad{background-size:200% 100%;animation:gradSweep 2.2s var(--ease) .6s 1 both}
@keyframes gradSweep{from{background-position:120% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .pcard:hover .pcard-ic,.zp-card:hover,.zp-card:hover .zp-card-ic,.step:hover .step-ic,.info-card:hover{transform:none}
  .js .hero-card.reveal.in li{animation:none}
  .hero-title .grad{animation:none}
}

/* ============================================================== 23 · BÜLTEN
   Alt bilgideki iletişim sütunu ürün sütunundan kısa kalıyor, altı boş
   duruyordu. Bülten formu o boşluğa oturuyor. */
.foot-news{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.foot-news h3{margin-bottom:8px}
.foot-news p{color:rgba(255,255,255,.66);font-size:13.6px;line-height:1.6;margin:0 0 14px;max-width:34ch}
.foot-news-row{display:flex;gap:8px}
.foot-news-row input{
  flex:1;min-width:0;width:100%;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;
  font:400 14.5px/1.3 var(--f-body);transition:border-color .2s,background .2s;
}
.foot-news-row input::placeholder{color:rgba(255,255,255,.42)}
.foot-news-row input:focus{outline:none;border-color:var(--gold-500);background:rgba(255,255,255,.09)}
.foot-news-btn{
  flex:none;padding:11px 16px;border-radius:var(--r-sm);border:0;cursor:pointer;
  background:var(--gold-500);color:#231a05;font:600 14px/1.3 var(--f-body);
  transition:background .2s,transform .2s var(--ease);
}
.foot-news-btn:hover{background:var(--gold-400);transform:translateY(-1px)}
.foot-news-btn:disabled{opacity:.6;cursor:wait;transform:none}
.foot-news-msg{margin:10px 0 0;font-size:13.4px;line-height:1.5}
.foot-news-msg.is-ok,.foot-news-msg .is-ok{color:#a8dcb1}
.foot-news-msg.is-err,.foot-news-msg .is-err{color:#f3b8a6}
.foot-news-note{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.45);line-height:1.55}
.foot-news-note a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding-block:10px;margin-block:-10px}
.foot-news-note a:hover{color:var(--gold-400)}
@media (max-width:640px){
  .foot-news{text-align:center;margin-top:18px;padding-bottom:12px}
  .foot-news p,.foot-news-note{margin-inline:auto}
  .foot-news-row{max-width:360px;margin-inline:auto}
  .foot-news-msg{text-align:center}
}