/* Cistus v2 — ortak stiller (anasayfa + alt sayfalar). Anasayfanın satır içi <style> bloğundan taşındı. */
:root{
  --blue:#1386BF; --blue-deep:#0D6A99; --navy:#0B2B40; --navy-2:#07202F;
  --ink:#15364A; --ink-2:#47616F; --sky:#EEF6FB; --sky-2:#D9EBF6; --line:#D3E2EC;
  --yellow:#F2C230; --bot:#3E6B45; --bot-bg:#EEF4EC; --edu:#7A5410; --edu-bg:#FBF5E8;
  --amber:#9A5B12; --pink:#F6CBC3;
  --wrap:1240px; --util:36px; --hd:84px; --hd-s:60px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --f-head:"Manrope",system-ui,sans-serif; --f-body:"Inter",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--navy-2);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit}
button,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--yellow)}
.skip{position:absolute;left:1rem;top:-100px;z-index:100;background:#fff;padding:.6rem 1rem;border-radius:8px}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2*clamp(1.1rem,4vw,2.5rem), var(--wrap));margin-inline:auto}

/* ---------- Tipografi ---------- */
h1,h2,h3{font-family:var(--f-head);line-height:1.1;letter-spacing:-.025em;color:var(--navy);font-weight:700}
.dark h1,.dark h2,.dark h3{color:#fff}
.h-sec{font-size:clamp(1.8rem,1.1rem + 1.9vw,2.85rem)}
.lead{margin-top:.8rem;font-size:clamp(1rem,.94rem + .25vw,1.12rem);line-height:1.6;color:var(--ink-2);max-width:62ch}
.dark .lead{color:#B8CCD9}
.kind{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep)}
.kind::before{content:"";width:22px;height:2px;background:currentColor}
.dark .kind{color:#8FD3F4}
.kind--bot{color:var(--bot)} .kind--edu{color:var(--edu)}
em{font-style:italic}

/* ---------- Butonlar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;padding:.8rem 1.5rem;border-radius:999px;border:2px solid transparent;font-weight:600;font-size:.98rem;line-height:1.2;text-decoration:none;cursor:pointer;background:none;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
.btn--yellow{background:var(--yellow);color:var(--navy)} .btn--yellow:hover{background:#FFD34D}
.btn--line-light{border-color:rgba(255,255,255,.5);color:#fff} .btn--line-light:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn--primary{background:var(--blue);color:#fff} .btn--primary:hover{background:var(--blue-deep)}
.btn--navy{background:var(--navy);color:#fff} .btn--navy:hover{background:var(--navy-2)}
.btn--ghost{border-color:var(--navy);color:var(--navy)} .btn--ghost:hover{background:var(--navy);color:#fff}
.btn--bot{background:var(--bot);color:#fff} .btn--bot:hover{background:#2F5435}
.btn--amber{background:var(--amber);color:#fff} .btn--amber:hover{background:#7C480C}
.btn--edu{background:var(--edu);color:#fff} .btn--edu:hover{background:#5E400B}
.btn--white{background:#fff;color:var(--navy)} .btn--white:hover{background:var(--yellow)}
.btn--sm{min-height:42px;padding:.55rem 1.1rem;font-size:.9rem}
.link{font-weight:600;color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.link:hover{color:var(--navy)}
.dark .link{color:var(--yellow)}

/* ---------- Yükleme ekranı: kalkan maviyle dolar, ışıltı geçer, sayfa hazır olunca kaybolur ---------- */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--navy-2);transition:opacity .55s var(--ease),visibility .55s}
.loader.is-done{opacity:0;visibility:hidden}
.loader svg{width:clamp(72px,9vw,104px);height:auto;filter:drop-shadow(0 0 22px rgba(79,181,232,.35))}
.loader__fill{transform-box:fill-box;transform:translateY(100%);animation:ldFill 1.1s cubic-bezier(.4,0,.2,1) .15s forwards}
.loader__shine{animation:ldShine 1.6s ease-in-out .5s infinite}
.loader__tick{stroke-dasharray:1;stroke-dashoffset:1;animation:ldTick .45s ease-out 1.2s forwards}
@keyframes ldFill{to{transform:translateY(0)}}
@keyframes ldShine{0%{transform:skewX(-18deg) translateX(-10px)}100%{transform:skewX(-18deg) translateX(36px)}}
@keyframes ldTick{to{stroke-dashoffset:0}}
html.is-loading .hx__pack{animation-play-state:paused}
/* ---------- Header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background-color .35s,color .35s}
/* Üst şerit: sayfa en üstteyken görünür, kaydırınca kapanır */
.hd__util{max-height:var(--util);overflow:hidden;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.14);transition:max-height .35s var(--ease),opacity .25s,border-color .35s}
.hd__util .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;height:var(--util)}
.hd__util a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;opacity:.85;white-space:nowrap}
.hd__util a:hover{opacity:1;text-decoration:underline}
.hd__util svg{width:15px;height:15px}
.hd__util-r{display:flex;gap:1.4rem}
.hd.is-scrolled .hd__util{max-height:0;opacity:0;border-bottom-width:0}
.hd__row{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:var(--hd);transition:min-height .35s var(--ease)}
.hd__logo img{width:clamp(190px,18vw,250px);height:auto;transition:width .35s var(--ease)}
/* Kaydırınca: daha alçak satır, küçük logo, zemine göre açık/koyu */
.hd.is-scrolled .hd__row{min-height:var(--hd-s)}
.hd.is-scrolled .hd__logo img{width:clamp(150px,13vw,180px)}
.hd.is-scrolled .nav__top{padding-block:.45rem}
/* Başlık, altındaki bölümün zeminini alır (JS); kenarlık ve gölge yok */
.hd.is-light{color:var(--navy)}
.hd.is-light .nav__top:hover{color:var(--blue)}
.nav{display:flex;align-items:center;gap:.2rem}
.nav > li{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:.3rem;padding:.6rem .75rem;border:0;background:none;font-weight:600;font-size:.93rem;text-decoration:none;cursor:pointer;border-radius:8px;white-space:nowrap}
.nav__top svg{width:14px;height:14px;transition:transform .25s}
.nav__top:hover{color:var(--yellow)}
.nav__dd{position:absolute;left:0;top:100%;min-width:290px;padding:.6rem 0;background:#fff;color:var(--navy);border-radius:14px;box-shadow:0 24px 48px -12px rgba(7,32,47,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
.nav > li:hover .nav__dd,.nav > li:focus-within .nav__dd{opacity:1;visibility:visible;transform:none}
.nav > li:hover .nav__top svg{transform:rotate(180deg)}
.nav__dd a{display:block;padding:.55rem 1.2rem;font-size:.92rem;text-decoration:none}
.nav__dd a:hover{background:var(--sky);color:var(--blue-deep)}
/* Ürünlerimiz mega menüsü: 2 ürün kartı + bağlantı sütunu */
/* Mega menü: menü satırının tamamına yayılır (li yerine nav'a bağlı), köşeli, geniş */
.nav{position:relative}
.nav > li:has(.nav__dd--mega){position:static}
.nav__dd--mega{left:0;right:0;width:auto;min-width:0;padding:1rem;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:.8rem;border-radius:6px}
.nav__dd--mega .mega__card{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.9rem .9rem 1rem;border-radius:6px;background:var(--sky);text-decoration:none;color:var(--navy);text-align:center;transition:background .25s,transform .25s var(--ease)}
.nav__dd--mega .mega__card:hover{background:var(--sky-2);transform:translateY(-2px)}
.mega__card--yellow{background:#FDF4D5}
.nav__dd--mega .mega__card--yellow:hover{background:#FBE7A6}
.mega__card--soft{background:#F3F6F2}
.nav__dd--mega .mega__card--soft:hover{background:#E6EEE3}
.mega__card img{width:80%;height:auto;margin:0 auto .5rem;filter:drop-shadow(0 10px 14px rgba(11,43,64,.25))}
.mega__card--soft img{width:auto;height:92px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(11,43,64,.18))}
.mega__svg{width:92px;height:92px;margin-bottom:.5rem}
.mega__card strong{font-family:var(--f-head);font-weight:600;font-size:.95rem;line-height:1.25}
.mega__links{display:flex;flex-direction:column;padding:.4rem 0 .4rem .6rem;border-left:1px solid var(--line)}
.mega__links small{padding:.3rem 1rem .5rem;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.nav__dd--mega .mega__links a{border-radius:4px}
.menu-btn{display:none;align-items:center;gap:.6rem;padding:.55rem .9rem;border:1.5px solid currentColor;border-radius:999px;background:none;font-weight:600;font-size:.9rem;cursor:pointer}
.menu-btn i{display:block;width:18px;height:2px;background:currentColor;position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.mnav{position:fixed;inset:0;z-index:60;background:var(--navy-2);color:#fff;overflow:auto;padding:1.2rem 0 3rem;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mnav.is-open{opacity:1;visibility:visible}
.mnav__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.mnav__head img{width:190px}
.mnav h2{font-size:1.35rem;margin-top:1.6rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.14)}
.mnav h2 a{text-decoration:none}
.mnav ul a{display:block;padding:.55rem 0;color:#C9DAE5;text-decoration:none}
.mnav ul a:hover{color:var(--yellow)}

/* ---------- Bölüm iskeleti: tam ekran + üst üste kayan geçiş ---------- */
main{position:relative}
/* Bölümler arası geçiş yarıda kalmasın: kaydırma her zaman bir bölümün başına oturur.
   Bölümler yapışkan olduğu için yakalama noktaları ayrı katmanda, bölümlerin akış konumlarında durur;
   ekrandan uzun bir bölümün içinde serbest kaydırılabilir. */
@media (min-width:961px){html{scroll-snap-type:y mandatory}}
.snaps{position:absolute;left:0;top:0;width:1px;pointer-events:none;visibility:hidden}
.snaps i{position:absolute;left:0;width:1px;scroll-snap-align:start;scroll-snap-stop:always}
.snaps i.end{scroll-snap-align:end}
.sec{position:sticky;top:var(--stick,0px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hd-s) + clamp(1rem,3vh,2.2rem)) 0 clamp(1.5rem,4vh,2.8rem);background:#fff}
.sec::after{content:"";position:absolute;inset:0;background:var(--navy-2);opacity:var(--dim,0);pointer-events:none;z-index:4}
.sec__in{width:100%;transform:translateY(calc(var(--dim,0) * -70px))}
/* Tablet/mobil: bölümler üst üste binerek geçmez (uzun içerik bir sonraki bölümün altında kalmasın); normal akışta alt alta */
@media (max-width:960px){
  .sec{position:relative;top:auto}
  .sec::after{display:none}
  .sec__in{transform:none}
}
.env .sec__in{display:flex;flex-direction:column}
.sec.dark{color:#C9DAE5}
.sec--navy{background:var(--navy)}
.sec--sky{background:var(--sky)}
.sec--bot{background:var(--bot-bg)}
.sec--edu{background:var(--edu-bg)}
.sec--yellow{background:var(--yellow);color:var(--navy)}
.sec-head{margin-bottom:clamp(1.4rem,3.5vh,2.5rem)}
.sec-head--center{text-align:center}
.sec-head--center .lead{margin-inline:auto}

/* Bölüm göstergesi */

/* Kayarak beliren öğeler */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv[data-d="1"]{transition-delay:.12s}.js .rv[data-d="2"]{transition-delay:.24s}.js .rv[data-d="3"]{transition-delay:.36s}
.js .rv.is-in{opacity:1;transform:none}

/* ---------- 1. Hero ---------- */
.hx{padding-top:calc(var(--util) + var(--hd) + clamp(1rem,3vh,2.5rem));overflow:hidden;color:var(--hx-fg);background:radial-gradient(60% 70% at 52% 46%,rgba(19,134,191,.42) 0%,rgba(19,134,191,0) 70%),linear-gradient(160deg,#0D3550 0%,var(--navy) 55%,var(--navy-2) 100%);
  --hx-fg:#fff;--hx-fg2:#B8CCD9;--hx-em:#E6F1F8;--hx-line:rgba(255,255,255,.18);--hx-bot:rgba(191,233,251,.09);--hx-tab:rgba(255,255,255,.6);--hx-tab-on:#fff;--hx-bar:rgba(255,255,255,.28);--hx-prog:var(--yellow);--hx-cap:#9FC3D8}
/* İki zemin: sarı kutuya gelince sarı zemin üstte belirir, yazılar laciverte döner */
.hx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background:radial-gradient(55% 65% at 66% 44%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 70%),linear-gradient(160deg,#F8D45A 0%,var(--yellow) 55%,#E3AE1C 100%)}
.hx.is-yellow::before{opacity:1}
.hx__honey{position:absolute;inset:-6% -4% -6% 30%;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.hx__honey svg{width:100%;height:100%}
.hx.is-yellow .hx__honey{opacity:1}
.hx.is-yellow .hx__bg{opacity:0}
.hx.is-yellow{--hx-fg:var(--navy);--hx-fg2:#3F3410;--hx-em:var(--navy);--hx-line:rgba(11,43,64,.22);--hx-bot:rgba(11,43,64,.12);--hx-tab:rgba(11,43,64,.6);--hx-tab-on:var(--navy);--hx-bar:rgba(11,43,64,.2);--hx-prog:var(--navy);--hx-cap:#5B4A12}
.hx .hx__title{color:var(--hx-fg)}
.hx .hx__title,.hx .hx__title span,.hx .hx__sub,.hx .hx__sub em,.hx .hx-tab,.hx .hx__ingr-t,.hx .hx__bg{transition:color .45s}
.hx.is-yellow .btn--yellow{background:var(--navy);color:#fff}
.hx.is-yellow .btn--line-light{border-color:rgba(11,43,64,.55);color:var(--navy)}
.hx__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.25rem,3vw,3rem);align-items:center}
/* Hero başlığı: ince ve ferah; ikinci satır daha hafif ve açık mavi */
.hx__title{font-size:clamp(2.16rem,1.2rem + 2.88vw,3.84rem);font-weight:500;letter-spacing:-.03em;line-height:.95}
/* İki satır aynı genişlikte: "Pastil" ilk satırın genişliğine göre JS ile ölçeklenir */
.hx__title span{display:block;width:max-content;white-space:nowrap;color:var(--hx-fg)}
.hx__title-b{font-weight:700;line-height:.86;margin-top:-.02em}
.hx__sub{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--hx-line);font-size:clamp(1.02rem,.96rem + .3vw,1.22rem);line-height:1.7;letter-spacing:.005em;color:var(--hx-fg2);max-width:32ch;transition:border-color .45s}
.hx__sub em{color:var(--hx-em)}
/* İki buton eşit genişlikte: en uzun yazıya göre */
.hx__actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.75rem;margin-top:2.4rem}
.hx__actions .btn{border-radius:6px;min-height:44px;padding:.65rem 1.2rem;font-size:.92rem;white-space:nowrap}
.hx__product{display:flex;flex-direction:column;align-items:center}
.hx__packs{position:relative;width:min(100%,560px);aspect-ratio:1.18/1}
.hx__pack{position:absolute;width:78%;transition:transform .5s var(--ease)}
.hx__pack img{width:100%;height:auto;filter:drop-shadow(0 26px 26px rgba(3,18,28,.55))}
.hx__pack--1{left:0;top:2%;z-index:1;transform:rotate(-5deg)}
.hx__pack--2{right:0;bottom:2%;z-index:2;transform:rotate(3.5deg)}
@media (hover:hover){
  .hx__pack{transition:transform .38s cubic-bezier(.2,.85,.25,1)}
  /* Arkadaki sarı kutu: üzerine gelince sol üst kenardan sıyrılıp öne gelir */
  .hx__pack--1:hover{z-index:3;transform:rotate(-2deg) translate(-22px,-24px) scale(1.06)}
  .hx__pack--1:hover img{filter:drop-shadow(0 34px 34px rgba(3,18,28,.5))}
  .hx__pack--2:hover{transform:rotate(3.5deg) translateY(-8px)}
}
/* Kutular yukarıdan düşer: hızlanarak iner, iki kez küçük seker, son açısına oturur */
@keyframes hxIn1{
  0%{transform:translateY(-115vh) rotate(-20deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  52%{transform:translateY(0) rotate(-2.5deg);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  68%{transform:translateY(-34px) rotate(-7deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  82%{transform:translateY(0) rotate(-4deg);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  91%{transform:translateY(-9px) rotate(-5.6deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{transform:translateY(0) rotate(-5deg)}
}
@keyframes hxIn2{
  0%{transform:translateY(-115vh) rotate(18deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  52%{transform:translateY(0) rotate(1deg);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  68%{transform:translateY(-28px) rotate(5.5deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  82%{transform:translateY(0) rotate(2.6deg);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  91%{transform:translateY(-7px) rotate(4deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{transform:translateY(0) rotate(3.5deg)}
}
/* Etkin madde kompleksi: zeminli bileşen kartı */
.hx__ingr{margin-top:clamp(.8rem,2vh,1.4rem);padding:1rem 1.5rem;border-radius:14px;text-align:center;border:1px solid rgba(255,255,255,.3);
  background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 35%,rgba(255,255,255,.16) 55%,rgba(255,255,255,.04) 100%),repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(160deg,#1E4A68,#0F3350);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.35),0 14px 30px -18px rgba(0,0,0,.6)}
.hx__ingr-t{margin-top:.6rem;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hx-cap);text-align:center}
.hx__ingr-row{display:flex;align-items:center;justify-content:center;gap:1.2rem}
.hx__ing{display:flex;align-items:center;gap:.7rem;text-decoration:none;text-align:left;color:#fff}
.hx__ing img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.hx__ing b{display:block;font-family:var(--f-head);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;color:var(--yellow);line-height:1.05}
.hx__ing span{display:block;font-size:.82rem;line-height:1.3;color:#D7E4EC}
.hx__ing:hover span{text-decoration:underline}
.hx__plus{font-family:var(--f-head);font-weight:800;font-size:2.2rem;line-height:1;color:var(--yellow);text-shadow:0 0 14px rgba(242,194,48,.55)}
.hx__bg{position:absolute;inset:-10% 18% -10% 22%;color:var(--hx-bot);pointer-events:none;transition:opacity .7s var(--ease)}
.hx__bg svg{width:100%;height:100%}
/* Çiçek ve yaprak yalnızca 1. slaytta */
.hx[data-slide="1"] .hx__bg{opacity:0}
/* Slaytlar: üst üste, aynı alanda; aralarında yumuşak geçiş */
.hx{padding-bottom:calc(clamp(1.5rem,4vh,2.8rem) + 64px)}
.hx .sec__in{flex:1;display:flex;flex-direction:column}
.hx__slides{flex:1;display:grid}
.hx-slide{grid-area:1/1;display:flex;align-items:center;opacity:0;visibility:hidden;transform:translateY(34px);transition:opacity .6s var(--ease),transform .9s var(--ease),visibility 0s .9s}
.hx-slide.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.2s,.2s,0s}
.hx-slide--mech{align-items:flex-start}
.hx-slide.is-on .hx__pack--1{animation:hxIn1 1.5s linear .3s backwards}
.hx-slide.is-on .hx__pack--2{animation:hxIn2 1.5s linear .75s backwards}
/* 2. slayt çizimi: ekranın tüm genişliği, alt kenara oturur */
.hx-art{position:absolute;left:0;right:0;bottom:0;height:68%;opacity:0;transform:translateY(10%);transition:opacity .8s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.hx-art.is-on{opacity:1;transform:none}
.hx-art svg{width:100%;height:100%;display:block}
.hm-layer,.hm-edge{opacity:0}
.hm-edge{stroke-dasharray:1;stroke-dashoffset:1}
.hx-art.is-on .hm-layer{animation:hmLayer 1.4s var(--ease) .9s forwards}
.hx-art.is-on .hm-edge{animation:hmEdge 1.8s var(--ease) .9s forwards}
.hm-p{opacity:0}
.hx-art svg{overflow:visible}
.hx-art .hm-p{transform-box:fill-box;transform-origin:center}
.hx-art.is-on .hm-p{animation:vHit 2s var(--d) both}
/* Katman etiketleri: virüsler durduktan sonra; önce yazı, sonra kesik çizgi çizilir, en son ok ucu */
.cl-t,.cl-head{opacity:0}
.cl-draw{stroke-dasharray:1;stroke-dashoffset:1}
.hx-art.is-on .cl-t{animation:clFade .5s var(--ease) var(--cl) forwards}
.hx-art.is-on .cl-draw{animation:clDraw .9s var(--ease) calc(var(--cl) + .25s) forwards}
.hx-art.is-on .cl-head{animation:clFade .3s ease calc(var(--cl) + 1.05s) forwards}
@keyframes clFade{to{opacity:1}}
@keyframes clDraw{to{stroke-dashoffset:0}}
/* 2. slayt: logonun altında, beyazdan zemine kaybolan büyük marka yazısı */
.hx-wm{position:absolute;left:max(clamp(1.1rem,4vw,2.5rem),calc((100% - var(--wrap)) / 2));top:9vh;margin:0;white-space:nowrap;font-family:var(--f-head);font-weight:800;font-size:clamp(2.5rem,1.2rem + 4.8vw,6.8rem);line-height:1;letter-spacing:-.03em;color:rgba(255,255,255,.11);
  opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .4s,transform 1.1s var(--ease) .4s}
.hx[data-slide="1"] .hx-wm{opacity:1;transform:none}
/* Ambalajdaki kırmızı rozet: katman etiketlerinden sonra sağ üstte belirir */
.hx-slide--mech{position:relative}
.hx-badge{--bd:clamp(150px,14vw,210px);position:absolute;top:0;right:max(clamp(1.1rem,4vw,2.5rem),calc((100% - var(--wrap)) / 2));width:var(--bd);height:var(--bd);border-radius:50%;background:#E5323E;border:calc(var(--bd) * .035) solid #fff;display:grid;place-items:center;text-align:center;color:#fff;font-family:var(--f-head);font-weight:800;font-size:calc(var(--bd) * .092);line-height:1.12;letter-spacing:-.01em;opacity:0;transform:rotate(-26deg) scale(.2)}
.hx[data-slide="1"] .hx-badge{animation:badgeIn .8s cubic-bezier(.2,.9,.3,1.25) 5.4s forwards}
@keyframes badgeIn{0%{opacity:0;transform:rotate(-70deg) scale(.2)}60%{opacity:1}100%{opacity:1;transform:rotate(-26deg) scale(1)}}
/* İmleçten kaçan virüsler (JS kayma miktarını verir) */
.vflee{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
/* Düş → tabakaya çarp → geri sek → dur */
@keyframes vHit{
  0%{opacity:1;transform:translateY(var(--from));animation-timing-function:cubic-bezier(.5,0,1,.6)}
  48%{transform:translateY(var(--hit)) scale(1.04,.94);animation-timing-function:cubic-bezier(.15,.75,.35,1)}
  78%{transform:translateY(-18px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes hmLayer{to{opacity:1}}
@keyframes hmEdge{to{opacity:1;stroke-dashoffset:0}}
/* Slayt seçimi + otomatik geçiş çubuğu */
.hx-nav{position:absolute;left:0;right:0;bottom:clamp(1.2rem,3.5vh,2.2rem);z-index:3;display:flex;gap:1.6rem}
.hx-tab{display:grid;gap:.55rem;padding:0;border:0;background:none;color:var(--hx-tab);font-size:.82rem;font-weight:600;text-align:left;cursor:pointer}
.hx-tab i{display:block;width:clamp(90px,12vw,150px);height:3px;border-radius:3px;background:var(--hx-bar);overflow:hidden}
.hx-tab b{display:block;height:100%;width:0;background:var(--hx-prog)}
.hx-tab.is-on{color:var(--hx-tab-on)}
.hx-tab.is-on b{animation:hxProg 9s linear forwards}
.hx.is-paused .hx-tab.is-on b{animation-play-state:paused}
/* 2. slaytta seçici açık renkli hücrelerin üzerinde: koyu yazı */
@keyframes hxProg{from{width:0}to{width:100%}}

/* ---------- 2. Nedir? ---------- */
/* Solda bölümün tamamını kaplayan fotoğraf; sağda içerik */
.wb{--wb-img:44%}
.wb__media{position:absolute;left:0;top:0;bottom:0;width:var(--wb-img);margin:0;overflow:hidden}
.wb__media img{width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.wb__card{position:absolute;left:clamp(1rem,3vw,2.5rem);right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,4vh,2.5rem);display:flex;gap:1.2rem;align-items:center;padding:clamp(1rem,1.8vw,1.5rem) clamp(1.1rem,2vw,1.8rem);background:#fff;border-radius:12px}
.wb__card-ico{flex:none;display:grid;place-items:center;width:clamp(64px,6vw,84px);aspect-ratio:1;border-radius:50%;background:var(--sky);color:var(--blue)}
.wb__card-ico svg{width:46%;height:46%;stroke-width:1.5}
.wb__card b{display:block;font-family:var(--f-head);font-size:.95rem;color:var(--navy);margin-bottom:.3rem}
.wb__card q{display:block;font-size:clamp(.86rem,.8rem + .2vw,.98rem);line-height:1.5;color:var(--ink)}
.wb__card small{display:block;margin-top:.45rem;font-size:.75rem;color:var(--ink-2)}
.wb__body{padding-left:calc(var(--wb-img) + clamp(2rem,5vw,5.5rem));padding-right:max(clamp(1.1rem,4vw,2.5rem),calc((100% - var(--wrap)) / 2))}
.wb__body .h-sec{font-size:clamp(2.2rem,1.3rem + 2.6vw,3.6rem)}
.whatis__lead{margin-top:1.1rem;font-size:clamp(1.04rem,.98rem + .3vw,1.2rem);line-height:1.55;color:var(--ink);max-width:56ch}
.wb__facts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4.5vh,3rem) clamp(1.5rem,3vw,3rem);margin-top:clamp(2rem,6vh,3.5rem)}
.wb__facts li{display:flex;gap:1.1rem;align-items:flex-start}
.wb__facts svg{flex:none;width:clamp(44px,3.6vw,56px);height:auto;color:var(--blue);stroke-width:1.3}
.wb__facts h3{font-size:1.1rem;letter-spacing:-.01em}
.wb__facts p{margin-top:.4rem;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.ifu{margin-top:1.8rem;padding-left:1.3rem;border-left:3px solid var(--blue)}
.ifu blockquote p{font-size:1.02rem;line-height:1.6;color:var(--ink)}
.ifu footer{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.6rem;font-size:.8rem;color:var(--ink-2)}
.ifu footer span+span::before{content:"·";margin-right:1rem}
.dark .ifu{border-color:var(--yellow)}
.dark .ifu blockquote p{color:#E6F1F8}
.dark .ifu footer{color:#9FC3D8}
.more{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:clamp(1.8rem,5vh,3rem)}

/* ---------- 3. Ürünler (Sidefer düzeni) ---------- */
/* Başlık daha az yer kaplar */
#urunler .sec-head{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
#urunler .h-sec{font-size:clamp(1.6rem,1.1rem + 1.3vw,2.3rem)}
#urunler .lead{margin-top:.45rem;font-size:clamp(.92rem,.88rem + .15vw,1rem)}
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.8rem)}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--navy)}
.pcard__media{display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden}
.pcard__media img{width:62%;height:auto;filter:drop-shadow(0 22px 24px rgba(11,43,64,.22));transition:transform .6s var(--ease)}
.pcard:hover .pcard__media img{transform:translateY(-8px) scale(1.03)}
.pcard__bar{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1rem,2vw,1.5rem) clamp(1.1rem,2.2vw,2rem);border-top:1px solid var(--line);transition:color .45s,border-color .45s}
/* Renk alttan yukarı dolar */
.pcard__bar::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.65,0,.25,1)}
.pcard--blue .pcard__bar::before{background:linear-gradient(90deg,var(--navy),var(--blue))}
.pcard--yellow .pcard__bar::before{background:linear-gradient(90deg,#D9A514,var(--yellow))}
.pcard:hover .pcard__bar::before,.pcard:focus-visible .pcard__bar::before{transform:scaleY(1)}
.pcard__name{font-family:var(--f-head);font-weight:700;font-size:clamp(1.15rem,.95rem + .7vw,1.6rem);letter-spacing:-.02em;line-height:1.15}
.pcard__btn{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;border:1px solid var(--line);font-size:.92rem;font-weight:500;white-space:nowrap;transition:border-color .4s,background .4s}
.pcard__btn svg{width:16px;height:16px;transition:transform .3s}
.pcard:hover .pcard__btn svg{transform:translateX(4px)}
/* Üzerine gelince alt şerit dolar (Sidefer'deki vurgulu kart) */
.pcard--blue:hover .pcard__bar,.pcard--blue:focus-visible .pcard__bar{color:#fff;border-color:transparent}
.pcard--yellow:hover .pcard__bar,.pcard--yellow:focus-visible .pcard__bar{color:#fff;border-color:transparent}
.pcard--blue:hover .pcard__btn{border-color:rgba(255,255,255,.7)}
.pcard--yellow:hover .pcard__btn{border-color:rgba(255,255,255,.8)}

/* ---------- 4. Bileşenler: başlık üstte, ortada büyük görsel, çevresinde bilgiler ---------- */
#bilesenler-ozet .sec__in{flex:1;display:flex;flex-direction:column}
/* Masaüstü: bölüm iki ekran boyu, içerik yapışık kalır; her slayt bir yakalama noktası (JS kaydırmaya göre slaytı seçer) */
@media (min-width:961px){
  #bilesenler-ozet{display:block;min-height:0;height:200vh;height:200svh;padding:0}
  #bilesenler-ozet .sec__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hd-s) + clamp(1rem,3vh,2.2rem)) 0 clamp(1.5rem,4vh,2.8rem);overflow:hidden}
}
.ig{flex:1;display:flex;flex-direction:column}
.ig__head{text-align:center;max-width:80ch;margin:0 auto clamp(.6rem,2vh,1.4rem)}
.ig__head .h-sec{font-size:clamp(1.8rem,1.2rem + 1.7vw,2.7rem)}
.ig__slides{flex:1;display:grid;overflow-x:clip}
.ig-slide{grid-area:1/1;position:relative;display:flex;flex-direction:column;opacity:0;transform:translateX(40px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.ig-slide.is-on{opacity:1;transform:none}
.ig-slide[hidden]{display:flex!important;visibility:hidden}
.ig__stage{flex:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(0,.85fr);gap:0 clamp(2.5rem,5vw,5.5rem);align-items:stretch}
.ig__side{display:flex;flex-direction:column;justify-content:space-around;gap:clamp(.8rem,2.5vh,1.6rem);position:relative;z-index:1}
.ig__side--l{text-align:right}
.ig__t{font-family:var(--f-head);font-weight:500;font-size:clamp(1.25rem,1rem + .9vw,1.85rem);letter-spacing:-.02em;line-height:1.15;color:#111}
.ig__item p{margin-top:.4rem;font-size:clamp(.86rem,.82rem + .15vw,.95rem);line-height:1.55;color:var(--ink-2)}
.ig__item p.ig__sub{color:#111}
.ig__fig{position:relative;margin:0;display:grid;place-items:center;z-index:1}
.ig__fig img{width:100%;height:100%;max-height:min(70vh,680px);object-fit:contain;filter:drop-shadow(0 26px 30px rgba(40,70,40,.2));transform:scale(.88) translateY(20px);transition:transform 1.1s var(--ease)}
.ig-slide.is-on .ig__fig img{transform:none}
.ig__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 2rem;margin-top:clamp(.6rem,2vh,1.2rem)}
.ig__foot .src{margin:0;max-width:70ch}
.btn--ghost.btn--sm{border-width:1.5px}
.ig__nav{display:flex;justify-content:flex-end;margin-top:clamp(.6rem,2vh,1.2rem)}
.ig__arrows{display:flex;gap:.5rem}
.ig__step{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--bot);background:none;color:var(--bot);cursor:pointer;transition:background .25s,color .25s}
.ig__step:hover{background:var(--bot);color:#fff}
.ig__step svg{width:18px;height:18px}
/* Görselden bilgilere kesik çizgili köşeli oklar (JS çizer); slayt açılınca sırayla çizilir */
.ig__arrowsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.ig__arrowsvg .ar-line{fill:none;stroke:#111;stroke-width:2;stroke-dasharray:7 6}
.ig__arrowsvg .ar-draw{fill:none;stroke:#fff;stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1}
.ig__arrowsvg polygon{fill:#111;opacity:0}
.ig-slide.is-on .ig__arrowsvg .ar-draw{transition:stroke-dashoffset .8s var(--ease);transition-delay:calc(.5s + var(--i) * .15s);stroke-dashoffset:0}
.ig-slide.is-on .ig__arrowsvg polygon{transition:opacity .25s;transition-delay:calc(1.2s + var(--i) * .15s);opacity:1}
.src{margin-top:.7rem;font-size:.76rem;color:var(--ink-2)}
.src a{color:inherit}
.ingr__cta{margin-top:1rem}
.formula{padding-left:clamp(1.2rem,2vw,2rem);border-left:2px solid var(--bot)}
.formula__cap{font-size:.85rem;font-weight:600;color:var(--bot);margin-bottom:.6rem}
.formula__eq{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.4rem}
.formula__term b{display:block;font-family:var(--f-head);font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);line-height:1;color:var(--navy);letter-spacing:-.03em}
.formula__term span{display:block;margin-top:.35rem;font-size:.92rem;color:var(--ink-2)}
.formula__op{font-family:var(--f-head);font-size:2.4rem;color:var(--bot)}
.formula__text{margin-top:1rem}
.formula__text p{color:var(--ink);font-size:.9rem;margin-bottom:1rem}

/* ---------- 5. Etki mekanizması: kaydırmayla ilerleyen 4 sahne ---------- */
.mx2{display:block;min-height:0;height:300svh;padding:0}
.mx2__pin{position:sticky;top:0;height:100svh;overflow:hidden;--panel-l:51vw;--panel-t:46vh;--panel-w:44vw}
.mx2 .sec__in{position:absolute;inset:0;width:auto}
/* Kafa: sol kenara dayalı, tam yükseklik; sahneye göre büyür ve kayar (JS dönüşümü verir) */
.mx2__head{position:absolute;left:0;top:0;height:100%;width:var(--hw);transform-origin:50% 52.9%;transition:transform 1.5s cubic-bezier(.65,0,.2,1);will-change:transform}
.mx2__head svg{width:100%;height:100%;display:block;overflow:visible}
.hd-lining{opacity:.35}
.hd-glow{opacity:0;transition:opacity .8s}
.mx2__pin:not([data-scene="0"]) .hd-lining{opacity:1}
.mx2__pin:not([data-scene="0"]) .hd-glow{opacity:.4;transition-delay:.9s}
.mx2__pin[data-scene="1"] .hd-glow{animation:hdPulse 2.6s ease-in-out 1.6s infinite}
@keyframes hdPulse{0%,100%{opacity:.3}50%{opacity:.6}}
#mxShield{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.mx2__pin.is-shield #mxShield{opacity:.9;animation:hdSpread 2.4s cubic-bezier(.4,0,.2,1) forwards}
/* Pastil: dudaklardan girer, dile oturur, erir; bileşenler mukoza boyunca dağılır */
#mxTab,.hd-p{opacity:0;transform-box:fill-box;transform-origin:center}
.mx2__pin.is-pastil #mxTab{animation:tabGo 4.2s cubic-bezier(.45,0,.2,1) .8s both}
@keyframes tabGo{0%{opacity:0;transform:translate(170px,28px) rotate(-18deg)}10%{opacity:1}38%{transform:translate(28px,8px) rotate(6deg)}48%{transform:translate(0,0) rotate(0)}56%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.06)}}
.hd-p.is-go{animation:hdP var(--t) linear forwards}
@keyframes hdP{0%{opacity:0}8%{opacity:1}78%{opacity:.9}100%{opacity:0}}
#mxSpread{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.mx2__pin.is-pastil #mxSpread{opacity:.6;animation:hdSpread 2.2s cubic-bezier(.4,0,.2,1) 3.3s forwards}
.mx2__pin.is-shield #mxSpread{opacity:.5;stroke-dashoffset:0;animation:none}
@keyframes hdSpread{to{stroke-dashoffset:0}}
/* Kılavuz çizgileri (JS çizer): sahne yerleşince çizilir */
.mx2__link{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.mx2__link .ar-line{fill:none;stroke:#E6F7FF;stroke-width:1.6;stroke-dasharray:6 6;opacity:.9}
.mx2__link .ar-draw{fill:none;stroke:#fff;stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1;animation:arDraw .9s var(--ease) 1.3s forwards}
.mx2__link polygon{fill:#E6F7FF;opacity:0;animation:clFade .25s ease 2.1s forwards}
@keyframes arDraw{to{stroke-dashoffset:0}}
/* Yazılar: yalnızca aktif sahnede, küçük ve gereken yerde */
.mx2__txt{position:absolute;z-index:3;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.mx2__txt.is-on{opacity:1;transform:none;transition-delay:1s;pointer-events:auto}
/* Giriş: kafanın sağında kalan alanda ortalı ve büyük */
.mx2__t0{left:calc(var(--hw) + 5vw);right:5vw;top:50%;text-align:center;transform:translateY(calc(-50% + 14px))}
.mx2__t0.is-on{transform:translateY(-50%);transition-delay:.2s}
.mx2__t0 .h-sec{font-size:clamp(2.6rem,1.8rem + 3vw,5rem)}
.mx2__t0 .lead{max-width:46ch;margin-inline:auto;font-size:clamp(1.1rem,1rem + .5vw,1.5rem)}
.mx2__hint{display:inline-flex;align-items:center;gap:.5rem;margin-top:2.2rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9FC3D8}
.mx2__hint svg{width:18px;height:18px;animation:hintBob 1.6s ease-in-out infinite}
@keyframes hintBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.mx2__txt h3{margin-top:.3rem;font-family:var(--f-head);font-weight:500;font-size:clamp(1.5rem,1.2rem + 1.1vw,2.2rem);letter-spacing:-.02em;color:#fff}
.mx2__txt > p{margin-top:.5rem;font-size:1rem;line-height:1.55;color:#B8CCD9}
/* Sahne etiketleri: yakın görünümün üstündeki alanda yatay ve dikey ortalı */
.mx2__t1,.mx2__t2,.mx2__t3{left:var(--panel-l);width:var(--panel-w);top:calc(var(--panel-t) / 2 + 3vh);text-align:center;transform:translateY(calc(-50% + 14px))}
.mx2__t1.is-on,.mx2__t2.is-on,.mx2__t3.is-on{transform:translateY(-50%)}
.mx2__t1 > p,.mx2__t2 > p,.mx2__t3 > p{max-width:44ch;margin-inline:auto}
.mx2__t1 p,.mx2__t2 p{font-size:1rem}
/* Kalkansız mukozaya saldırı: virüsler gelir, çarptığı yer tahriş olur, mukoza kızarır; kalkan oluşunca kaybolur */
.hd-v{opacity:0;transition:opacity .4s}
.hd-v.is-go{opacity:1}
.hd-v use{transform-box:fill-box;transform-origin:center}
.hd-v.is-stuck use{animation:vWob 1.3s ease-in-out infinite}
@keyframes vWob{0%,100%{transform:rotate(-7deg) scale(1)}50%{transform:rotate(7deg) scale(1.07)}}
.hd-irr{opacity:0;transition:opacity .6s}
.hd-irr.is-hit{animation:irrPulse 1.6s ease-in-out infinite}
@keyframes irrPulse{0%,100%{opacity:.4}50%{opacity:1}}
.hd-lining,.hd-glow{transition:stroke .9s,opacity .9s}
.mx2__pin.is-attacked .hd-lining{stroke:#EF9B8E}
.mx2__pin.is-attacked .hd-glow{stroke:#F07F70}
.mx2__pin.is-shield .hd-v,.mx2__pin.is-shield .hd-irr{opacity:0;transition:opacity .9s ease .8s;animation:none}
.mx2__t3 p{font-size:1rem}
/* Yakın görünüm: boğazdaki halkadan açılan pencere */
.mx2__close{position:absolute;left:var(--panel-l);top:var(--panel-t);width:var(--panel-w);z-index:1;opacity:0;transform:scale(.05);transform-origin:0 50%;transition:opacity .6s var(--ease),transform 1.5s cubic-bezier(.65,0,.2,1)}
.mx2__pin.is-open .mx2__close{opacity:1;transform:none;transition-delay:.2s}
.mx2__close svg{display:block;width:100%;height:auto}
/* Sahne göstergesi */
.mx2__steps{position:absolute;right:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,4vh,2.2rem);z-index:3;display:flex;gap:1.4rem}
.mx2__steps button{display:grid;gap:.5rem;padding:0;border:0;background:none;color:rgba(255,255,255,.42);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .3s}
.mx2__steps i{display:block;width:clamp(56px,6vw,90px);height:2px;background:rgba(255,255,255,.18);transition:background .3s}
.mx2__steps button:hover,.mx2__steps button.is-on{color:#fff}
.mx2__steps button.is-on i{background:var(--yellow)}
/* Yakın görünüm adımları (data-step pin üzerinde): bileşenler iner → tabaka oluşur → virüsler tabakada kalır */
.mx .mx-dot,.mx .mx-germ{transform-box:fill-box;transform-origin:center}
.mx .mx-dot{opacity:0;transform:translate(0,0);transition:opacity .4s,transform 1.6s cubic-bezier(.4,.1,.3,1)}
.mx[data-step="2"] .mx-dot{opacity:1;transform:translate(var(--dx),var(--dy));transition-delay:var(--d)}
.mx[data-step="3"] .mx-dot{opacity:0;transform:translate(var(--dx),var(--dy))}
.mx .mx-layer{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.6s var(--ease) .3s,opacity .5s .3s}
.mx[data-step="3"] .mx-layer{stroke-dashoffset:0;opacity:1}
.mx .mx-germ{opacity:0;transform:translateY(-70px);transition:opacity .6s,transform 1.3s cubic-bezier(.2,.9,.25,1.15)}
.mx[data-step="a"] .mx-germ,.mx[data-step="2"] .mx-germ{opacity:1;transform:none;transition-delay:calc(1s + var(--d))}
.mx[data-step="3"] .mx-germ{opacity:1;transform:translateY(-34px);transition:transform 1.1s var(--ease) calc(1.6s + var(--d))}
.mx .mx-irr{opacity:0;transition:opacity .9s}
.mx[data-step="a"] .mx-irr,.mx[data-step="2"] .mx-irr{opacity:1;transition-delay:calc(2.2s + var(--d))}
.mx[data-step="3"] .mx-irr{opacity:0;transition-delay:1.8s}
.mx-label{font-family:var(--f-body);font-size:13px;font-weight:600;fill:#D7E4EC}
.mx .mx-lbl-layer,.mx .mx-lbl-past{opacity:0;transition:opacity .5s}
.mx[data-step="2"] .mx-lbl-past{opacity:1;transition-delay:.6s}
.mx[data-step="3"] .mx-lbl-layer{opacity:1;transition-delay:1.6s}

/* ---------- 6. Günlük yaşam ---------- */
.env{display:flex;flex-direction:column;justify-content:center}
.env-grid{display:grid;grid-template-columns:repeat(4,1fr);flex:1;min-height:clamp(260px,46vh,520px)}
.env-grid li{position:relative;overflow:hidden}
.env-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.env-grid li:hover img{transform:scale(1.05)}
.env-grid li::after{content:"";position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(transparent,rgba(7,32,47,.75))}
.env-grid figcaption{position:absolute;left:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.4rem);z-index:1;font-family:var(--f-head);font-weight:700;font-size:clamp(1.1rem,.9rem + .8vw,1.6rem);color:#fff}
.env-note{margin-top:1.2rem;font-size:.85rem;color:var(--ink-2);text-align:center}

/* ---------- 7. Kullanım: solda tam yükseklik fotoğraf, sağda ürün sekmeleri ve açılır bilgiler ---------- */
.ub{--ub-img:44%}
.ub__media{position:absolute;left:0;top:0;bottom:0;width:var(--ub-img);margin:0;overflow:hidden;background:var(--sky-2)}
.ub__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;opacity:0;transition:opacity .7s var(--ease)}
.ub__img.is-on{opacity:1}
.ub__body{padding-left:calc(var(--ub-img) + clamp(2rem,5vw,5rem));padding-right:max(clamp(1.1rem,4vw,2.5rem),calc((100% - var(--wrap)) / 2))}
.ub__body .h-sec{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem)}
.ub__body .lead{margin-top:.5rem;font-size:.92rem;max-width:62ch}
/* Ürün kartları: fotoğrafın üstünde buzlu cam */
.ub__tabs{position:absolute;left:clamp(1rem,2.5vw,2rem);right:clamp(1rem,2.5vw,2rem);bottom:clamp(1.2rem,3vh,2.2rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.5vw,1.2rem);z-index:2}
.tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:.8rem 2.2rem .75rem .9rem;border:1px solid rgba(255,255,255,.6);border-radius:14px;background:rgba(255,255,255,.5);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:#111;text-align:left;cursor:pointer;box-shadow:0 10px 30px -14px rgba(0,0,0,.35);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.tab:hover{background:rgba(255,255,255,.62);transform:translateY(-2px)}
.tab[aria-selected="true"]{background:rgba(255,255,255,.76);border-color:#fff}
.tab img{width:68px;height:auto;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));transform:rotate(-4deg)}
.tab__name{font-family:var(--f-head);font-weight:600;font-size:clamp(.78rem,.72rem + .2vw,.9rem);line-height:1.25;color:#111}
.tab__arrow{position:absolute;right:.8rem;bottom:.75rem;width:16px;height:16px;opacity:.75}
.acc.ub__acc{margin-top:clamp(.8rem,2vh,1.3rem)}
.ub__acc summary{padding:.7rem 0}
.ub__panel{padding:0 2.5rem .1rem 0;margin-bottom:.9rem}
.ub__acc .who{margin-top:.2rem}
.ub__acc .dose{margin-top:-.2rem}
.who{display:flex;align-items:flex-start;gap:1.6rem}
.who li{display:flex;flex-direction:column;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;color:var(--navy);text-align:center;line-height:1.25}
.who li span{max-width:16ch}  /* "6 yaşından büyük / çocuklar" iki satır */
.who svg{width:56px;height:56px;color:var(--navy)}
.who-note{display:flex;gap:.6rem;margin-top:1.1rem;font-size:.86rem;color:var(--ink-2)}
.who-note svg{width:20px;height:20px;flex:none;color:#B26B00;margin-top:.1rem}
.dose div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.dose dt{font-weight:600;color:var(--navy);font-size:.92rem}
.dose dt small{display:block;font-weight:400;color:var(--ink-2);font-size:.78rem}
.dose dd{text-align:right;font-size:.88rem;color:var(--ink-2)}
.pills{display:flex;justify-content:flex-end;gap:3px;margin-top:.3rem}
.pills i{width:12px;height:8px;border-radius:999px;background:var(--blue)}
.pills i.opt{background:none;border:1.5px solid var(--blue)}
.dose-how{margin-top:.9rem;font-size:.9rem;color:var(--ink)}
/* Dikkat edilmesi gerekenler: iç içe açılır satırlar */
.acc .cau details{border-bottom:1px solid var(--line)}
.acc .cau details:last-child{border-bottom:0}
.acc .cau summary{padding:.5rem 0;font-family:var(--f-body);font-weight:600;font-size:.9rem;color:var(--navy)}
.acc .cau summary i{width:12px;height:12px}
.acc .cau summary i::before,.acc .cau summary i::after{top:5px;width:12px;height:1.5px}
.acc .cau details:not([open]) summary i::after{transform:rotate(90deg)}  /* dıştaki açıkken kapalı iç satırlar "+" kalsın */
.cau{border-top:1px solid var(--line)}
.cau__body{padding:0 2rem .8rem 0;font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.compo dt{font-weight:600;font-size:.88rem;color:var(--navy);margin-top:.6rem}
.compo dt:first-child{margin-top:0}
.compo dd{font-size:.86rem;color:var(--ink-2)}
.leaflet{display:flex;gap:1rem;align-items:flex-start}
.leaflet__thumb{flex:none;width:82px;border:0;padding:0;background:none;cursor:zoom-in;box-shadow:0 6px 18px -6px rgba(11,43,64,.35)}
.leaflet__name{font-weight:600;color:var(--navy);font-size:.92rem}
.leaflet__meta{font-size:.8rem;color:var(--ink-2);margin-top:.15rem}
.leaflet__act{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.lv{border:0;padding:0;width:min(860px,94vw);max-height:92vh;margin:auto;border-radius:16px;background:#fff}
.lv::backdrop{background:rgba(7,32,47,.7)}
.lv__head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;background:#fff;border-bottom:1px solid var(--line)}
.lv__head h2{font-size:1.05rem}
.lv__close{width:40px;height:40px;border-radius:50%;border:0;background:var(--sky);cursor:pointer;font-size:1.3rem;line-height:1}
.lv__body{padding:1.2rem;display:grid;gap:1rem}

/* ---------- 8. Rehber: zeminsiz, ince çerçeveli modern kartlar; görsel + başlık + kısa açıklama ---------- */
.reads{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.read{display:flex;flex-direction:column;border:1px solid rgba(122,84,16,.22);border-radius:6px;background:transparent;overflow:hidden;text-decoration:none;color:var(--navy);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.read:hover{border-color:rgba(122,84,16,.6);box-shadow:0 18px 34px -22px rgba(122,84,16,.45);transform:translateY(-3px)}
.read__media{display:block;aspect-ratio:16/10;overflow:hidden;background:#F3E6CC}
.read__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.read:hover .read__media img{transform:scale(1.04)}
.read__ph{width:100%;height:100%;display:grid;place-items:center;padding:18%}
.read__body{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem 1.25rem 1.2rem;flex:1}
.read__body h3{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.read__sum{font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.read__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.5rem;font-size:.85rem;font-weight:600;color:var(--edu)}
.read__more svg{width:16px;height:16px;transition:transform .25s}
.read:hover .read__more svg{transform:translateX(4px)}
.reads-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.6rem;margin-top:clamp(1.4rem,3.5vh,2.4rem)}
.reads-foot .link{color:var(--edu)}

/* ---------- 9. SSS ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.faq__aside .btn{margin-top:1.8rem}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;font-family:var(--f-head);font-weight:700;font-size:clamp(1rem,.95rem + .25vw,1.12rem);color:var(--navy);cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{flex:none;position:relative;width:16px;height:16px}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--blue);transition:transform .3s var(--ease)}
.acc summary i::after{transform:rotate(90deg)}
.acc details[open] summary i::after{transform:rotate(0)}
.acc summary:hover{color:var(--blue-deep)}
.acc details p{padding:0 2.5rem 1.2rem 0;color:var(--ink-2)}
.acc details p a{color:var(--blue-deep);font-weight:600}

/* ---------- 10. Satış noktaları ---------- */
.pharm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.pharm h2{font-size:clamp(2rem,1.2rem + 2.4vw,3.3rem)}
.pharm p{margin-top:1.1rem;font-size:clamp(1.02rem,.96rem + .3vw,1.2rem);max-width:50ch}
.pharm .btn{margin-top:1.8rem}
.pharm__packs{position:relative;aspect-ratio:1.5/1}
.pharm__packs img{position:absolute;width:66%;height:auto;filter:drop-shadow(0 26px 28px rgba(11,43,64,.35))}
.pharm__packs img:first-child{left:0;top:0;transform:rotate(-6deg)}
.pharm__packs img:last-child{right:0;bottom:0;transform:rotate(5deg)}
.finder{margin-top:clamp(2.5rem,6vh,4rem);padding-top:clamp(1.8rem,4vh,2.6rem);border-top:2px solid rgba(11,43,64,.2);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.5rem 4rem;align-items:end}
.finder h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.finder p{margin-top:.4rem;color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}
.field{display:grid;gap:.35rem;flex:1;min-width:170px}
.field label{font-size:.85rem;font-weight:600}
.select{appearance:none;-webkit-appearance:none;min-height:50px;padding:.7rem 2.6rem .7rem 1.1rem;border-radius:999px;border:2px solid var(--navy);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2B40' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center/16px;color:var(--navy);font-weight:500;cursor:pointer}
.select:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Footer ---------- */
.ft{position:relative;z-index:1;background:var(--navy-2);color:#9FB6C5;padding:clamp(3rem,8vh,5rem) 0 2rem;font-size:.92rem}
.ft__top{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.3fr 1fr;gap:2rem}
.ft__logo img{width:200px;height:auto}
.ft h2{font-size:.95rem;color:#fff;margin-bottom:.9rem;letter-spacing:0}
.ft li{padding:.2rem 0}
.ft a{text-decoration:none}
.ft a:hover{color:var(--yellow)}
.ft strong{color:#fff;font-weight:600}
.legal{margin-top:clamp(2.5rem,6vh,3.5rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12)}
.legal p{max-width:90ch;font-size:.85rem}
.legal__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1.4rem;font-size:.82rem}
.to-top{background:none;border:0;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}

/* ---------- Duyarlı ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hx__grid{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .hx__sub{max-width:44ch}
  .hx-art{height:46%}
  .ft__top{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .faq,.pharm,.finder{grid-template-columns:minmax(0,1fr)}
  /* Etki mekanizması: dar ekranda yazılar altta, yakın görünüm alt yarıda */
  .mx2__link{display:none}
  .mx2__pin{--panel-l:5vw;--panel-t:46vh;--panel-w:90vw}
  .mx2__t0{left:5vw;right:5vw;top:auto;bottom:16vh;transform:translateY(14px)}
  .mx2__t0.is-on{transform:none}
  .mx2__t0 .lead{font-size:.95rem}
  .mx2__t1,.mx2__t2,.mx2__t3{left:5vw;right:5vw;top:11vh;width:auto;transform:translateY(14px)}
  .mx2__t1.is-on,.mx2__t2.is-on,.mx2__t3.is-on{transform:none}
  .mx2__txt h3{font-size:1.4rem}
  /* yazılar kafa çiziminin üstüne biniyor: okunurluk için yarı saydam zemin */
  .mx2__txt{padding:.9rem 1rem;border-radius:8px;background:rgba(7,32,47,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .mx2__steps{left:5vw;right:auto;bottom:4vh;gap:1rem}
  .ig__nav{flex-wrap:wrap}
  .ig__stage{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .ig__fig{order:-1}
  .ig__fig img{max-height:42vh}
  .ig__side--l{text-align:left}
  .ig__arrowsvg{display:none}
  /* Tablet/mobil: fotoğraf üstte, içerik altta */
  .wb{padding-top:0}
  .wb__media{position:relative;width:100%;height:min(72vh,620px)}
  .wb__body{padding:clamp(2rem,6vh,3rem) clamp(1.1rem,4vw,2.5rem) 0}
  .reads{grid-template-columns:1fr 1fr}
  .env-grid{grid-template-columns:1fr 1fr;min-height:0}
  .env-grid li{aspect-ratio:4/3}
  .hx-art{top:44vh;top:44svh;bottom:auto;height:56vh;height:56svh}
}
@media (max-width:640px){
  :root{--util:32px;--hd:68px;--hd-s:56px}
  .hd__util{font-size:.76rem}
  .hd__util-r{gap:.9rem}
  .hd__util svg{display:none}
  .hx__grid{grid-template-columns:minmax(0,1fr)}
  .hx__packs{width:min(100%,360px)}
  .hx__bg{inset:10% -30% auto -30%;height:520px}
  .hx-nav{gap:1rem}
  .hx-art .cl{display:none}
  .hx-badge{--bd:128px}
  .hx-wm{top:7vh;font-size:clamp(1.8rem,1rem + 5vw,3rem)}
  .hx__actions .btn{padding-inline:.9rem}
  .wb__facts{grid-template-columns:1fr}
  .wb__card{flex-direction:column;align-items:flex-start;gap:.8rem}
  .pcards{grid-template-columns:minmax(0,1fr)}
  .pcard__bar{flex-wrap:wrap}
  .ub__tabs{top:auto;bottom:.8rem;left:.8rem;right:.8rem;gap:.6rem}
  .tab{padding:.6rem 1.6rem .55rem .7rem;gap:.4rem;border-radius:10px}
  .tab img{width:46px}
  .tab__name{font-size:.74rem}
  .tab__arrow{right:.6rem;bottom:.6rem;width:14px;height:14px}
  .ub__media{position:relative;width:100%;height:min(46vh,420px)}
  .ub__body{padding:clamp(1.5rem,5vh,2.5rem) clamp(1.1rem,4vw,2.5rem) 0}
  .reads{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr 1fr}
  .ft__top > div:first-child{grid-column:1/-1}
  .hx__ingr-row{flex-direction:column;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .sec__in{transform:none}
  .loader__fill{transform:none}.loader__tick{stroke-dashoffset:0}
  .hm-layer,.hm-edge,.hm-p{opacity:1}
  .mx2__pin[data-scene="2"] #mxTab{opacity:1}.mx2__pin[data-scene="2"] #mxSpread{opacity:.6;stroke-dashoffset:0}
  .mx2__pin.is-shield #mxShield{opacity:.9;stroke-dashoffset:0}.mx2__pin.is-open .mx2__close{opacity:1;transform:none}.cl-t,.cl-head{opacity:1}.cl-draw{stroke-dashoffset:0}.hx-badge{opacity:1;transform:rotate(-26deg)}.hm-edge{stroke-dashoffset:0}
}

/* ================= Alt sayfalar (menüdeki başlıkların sayfaları) ================= */
.nav__top.is-current{color:var(--yellow)}
.hd.is-light .nav__top.is-current{color:var(--blue)}
/* Üst bant: navy zemin, konum yolu, başlık, kısa açıklama; isteğe bağlı görsel */
.ph{position:relative;overflow:hidden;background:var(--navy-2);color:#fff;padding:calc(var(--util) + var(--hd) + clamp(2.2rem,7vh,4.5rem)) 0 clamp(2.6rem,8vh,5rem)}
.ph::before{content:"";position:absolute;inset:auto -10% -55% 35%;height:110%;background:radial-gradient(closest-side,rgba(19,134,191,.35),transparent);pointer-events:none}
.ph__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ph__grid--solo{grid-template-columns:minmax(0,1fr)}
.ph__crumb{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem;font-size:.8rem;color:rgba(255,255,255,.55)}
.ph__crumb a{text-decoration:none}
.ph__crumb a:hover{color:#fff}
.ph__crumb [aria-current]{color:rgba(255,255,255,.85)}
.ph h1{font-weight:600;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.8rem);letter-spacing:-.035em;line-height:1.04;max-width:18ch}
.ph__lead{margin-top:1.1rem;max-width:58ch;font-size:clamp(1rem,.95rem + .25vw,1.16rem);line-height:1.6;color:#B8CCD9}
.ph__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.ph__actions .btn{border-radius:6px;min-height:46px}
.ph__media{display:grid;place-items:center}
.ph__media img{width:100%;max-width:480px;height:auto;max-height:min(46vh,420px);object-fit:contain;filter:drop-shadow(0 30px 34px rgba(0,0,0,.35))}
.ph--yellow{background:linear-gradient(135deg,#3A2A05,#5E4507)}
/* İçerik blokları */
.blk{position:relative;padding:clamp(3rem,9vh,5.5rem) 0;background:#fff}
.blk--sky{background:var(--sky)} .blk--bot{background:var(--bot-bg)} .blk--edu{background:var(--edu-bg)} .blk--yellow{background:var(--yellow)}
.blk__head{max-width:68ch;margin-bottom:clamp(1.5rem,4vh,2.4rem)}
.blk__head h2{font-weight:600;font-size:clamp(1.6rem,1.2rem + 1.3vw,2.3rem);letter-spacing:-.025em}
.blk__head p{margin-top:.6rem;color:var(--ink-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.split--center{align-items:center}
/* Bağlantı kartları (alt sayfa listeleri) */
.lcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(.9rem,2vw,1.4rem)}
.lcard{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.4rem 1.4rem 1.3rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--navy);text-decoration:none;transition:border-color .25s,transform .3s var(--ease),box-shadow .3s}
.lcard:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(11,43,64,.5)}
.lcard__media{display:grid;place-items:center;height:120px;margin-bottom:.6rem}
.lcard__media img{width:auto;height:120px;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(11,43,64,.2))}
.lcard__media svg{width:96px;height:96px}
.lcard strong{font-family:var(--f-head);font-weight:600;font-size:1.12rem;letter-spacing:-.015em;line-height:1.25}
.lcard span{font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.lcard em{margin-top:auto;padding-top:.6rem;font-style:normal;font-size:.85rem;font-weight:600;color:var(--blue-deep)}
/* İçerik hazırlanıyor */
.soon{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem 1.5rem;border:1px dashed #A9C3D3;border-radius:6px;color:var(--ink-2);font-size:.95rem;max-width:72ch}
.soon svg{flex:none;width:22px;height:22px;color:var(--blue)}
.soon b{display:block;color:var(--navy);font-family:var(--f-head);font-size:1.02rem;margin-bottom:.2rem}
/* Bilgi listeleri */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.facts li{display:flex;gap:1rem;align-items:flex-start}
.facts svg{flex:none;width:46px;height:auto;color:var(--blue);stroke-width:1.3}
.facts h3{font-size:1.08rem;letter-spacing:-.01em}
.facts p{margin-top:.35rem;font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(1rem,2vw,1.5rem);counter-reset:st}
.steps li{position:relative;padding:1.5rem 1.4rem;border:1px solid var(--line);border-radius:6px;background:#fff;counter-increment:st}
.steps li::before{content:counter(st,decimal-leading-zero);display:block;margin-bottom:.8rem;font-family:var(--f-head);font-weight:700;font-size:.85rem;letter-spacing:.08em;color:var(--blue)}
.steps h3{font-size:1.1rem}
.steps p{margin-top:.4rem;font-size:.93rem;color:var(--ink-2)}
.kv{display:grid;gap:0}
.kv div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.kv dt{font-weight:600;color:var(--navy);font-size:.93rem}
.kv dd{color:var(--ink-2);font-size:.93rem}
.quote{padding:1.4rem 1.5rem;border-left:3px solid var(--blue);background:var(--sky);border-radius:0 6px 6px 0;color:var(--ink)}
.quote small{display:block;margin-top:.6rem;font-size:.78rem;color:var(--ink-2)}
.fig-big{display:grid;place-items:center}
.fig-big img{width:100%;max-width:520px;height:auto;filter:drop-shadow(0 26px 30px rgba(40,70,40,.2))}
.formula-big{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.formula-big b{display:block;font-family:var(--f-head);font-size:clamp(2.2rem,1.4rem + 2.4vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--navy)}
.formula-big span{display:block;margin-top:.4rem;color:var(--ink-2)}
.formula-big .op{font-family:var(--f-head);font-size:2.6rem;color:var(--yellow)}
/* Talimat sayfaları ve ürün */
.leafs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem}
.leafs img{width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.ifu-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1rem}
.ifu-card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:1.2rem;align-items:center;padding:1.2rem;border:1px solid var(--line);border-radius:6px;background:#fff}
.ifu-card img{width:110px;height:auto;filter:drop-shadow(0 10px 12px rgba(11,43,64,.2))}
.ifu-card h3{font-size:1.05rem}
.ifu-card p{margin:.25rem 0 .7rem;font-size:.85rem;color:var(--ink-2)}
.ifu-card .btn{border-radius:6px}
.acc--box{border-top:1px solid var(--line)}
/* Makale (blog / serbest sayfa) */
.prose{max-width:72ch;font-size:1.04rem;line-height:1.75;color:var(--ink)}
.prose > * + *{margin-top:1rem}
.prose h2{margin-top:2.2rem;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);font-weight:600}
.prose h3{margin-top:1.8rem;font-size:1.2rem;font-weight:600}
.prose ul{list-style:disc;padding-left:1.3rem} .prose ol{list-style:decimal;padding-left:1.3rem}
.prose li + li{margin-top:.35rem}
.prose a{color:var(--blue-deep);font-weight:600}
.prose img{height:auto;border-radius:6px}
.art-cover{margin-bottom:2rem}
.art-cover img{width:100%;max-height:460px;object-fit:cover;border-radius:6px}
.pager{display:flex;justify-content:center;gap:1rem;margin-top:2rem}
/* Satış noktaları ve form */
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1rem;margin-top:2rem}
.results li{padding:1.2rem;border:1px solid rgba(11,43,64,.18);border-radius:6px;background:rgba(255,255,255,.55)}
.results h3{font-size:1.02rem}
.results p{margin-top:.3rem;font-size:.88rem;color:var(--ink)}
.blk--yellow .finder{margin-top:0;padding-top:0;border-top:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .full{grid-column:1/-1}
.form label{display:block;margin-bottom:.35rem;font-size:.85rem;font-weight:600;color:var(--navy)}
.form input,.form textarea{width:100%;padding:.8rem 1rem;border:1px solid #B9CEDC;border-radius:6px;background:#fff;font:inherit;color:var(--ink)}
.form input:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form .err{margin-top:.3rem;font-size:.8rem;color:#B3261E}
.form .btn{border-radius:6px;justify-self:start}
.ok{padding:1.2rem 1.4rem;border-radius:6px;background:var(--bot-bg);color:var(--bot);font-weight:600}
@media (max-width:960px){
  .ph__grid,.split{grid-template-columns:minmax(0,1fr)}
  .ph__media{order:-1}
  .ph__media img{max-height:30vh}
  .form{grid-template-columns:1fr}
  .kv div{grid-template-columns:1fr;gap:.2rem}
}
@media (max-width:640px){
  .ifu-card{grid-template-columns:80px minmax(0,1fr)}
  .ifu-card img{width:80px}
}
.facts--one{grid-template-columns:minmax(0,1fr)}
.fig-big--photo img{border-radius:6px;filter:none}
.gap-t{margin-top:clamp(1.2rem,3vh,2rem)}
.lead--flush{margin-top:0}