/* =====================================================================
   ARMADA ORMAN ÜRÜNLERİ — SEO Açılış Sayfası Tasarım Sistemi (2026)
   Kaynak spesifikasyon: /DESIGN.md  ·  Etkileşim seviyesi: L2
   Bu dosya armada-2026.css'ten SONRA yüklenir ve yalnızca `lp*` ad alanını
   kullanır — mevcut sayfa stilleri etkilenmez.
   Bileşen CSS'inde sabit hex YOKTUR; her renk token üzerinden gelir.
   ===================================================================== */

/* ---------------------------------------------------------------
   1) TOKEN'LAR
   --------------------------------------------------------------- */
:root{
  /* Zeminler */
  --bg-elev:#212124;
  --ink-body:#cfcbc2;
  --line-3:rgba(245,242,234,.22);

  /* RGB yardımcıları (rgba() için) */
  --bg-rgb:11,11,12;
  --bg-2-rgb:20,20,22;
  --bg-3-rgb:28,28,31;
  --ink-rgb:245,242,234;
  --ink-mute-rgb:168,163,154;
  --ink-soft-rgb:107,103,96;
  --red-rgb:196,31,58;
  --red-deep-rgb:138,20,36;
  --wood-rgb:212,165,116;
  --wood-dim-rgb:138,106,71;
  --ok-rgb:111,174,111;
  --warn:#d9a84e;
  --warn-rgb:217,168,78;

  /* Tipografi aileleri */
  --font-display:"Fraunces","Bricolage Grotesque",Georgia,"Times New Roman",serif;
  --font-body:"Manrope","Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Geometri */
  --radius-sm:10px;
  --radius-xl:28px;

  /* Boşluk skalası */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:22px;
  --s6:32px; --s7:44px;  --s8:60px;  --s9:84px;  --s10:112px;

  /* Gölgeler */
  --sh-1:0 2px 8px -2px rgba(0,0,0,.35);
  --sh-2:0 12px 28px -12px rgba(0,0,0,.5);
  --sh-3:0 30px 60px -20px rgba(0,0,0,.7);
  --sh-red:0 12px 28px -12px rgba(var(--red-rgb),.7);

  /* Hareket */
  --e-out:cubic-bezier(.2,.8,.2,1);
  --e-in-out:cubic-bezier(.4,0,.2,1);
  --d-fast:140ms; --d-base:220ms; --d-slow:520ms;

  /* Yapışkan başlık yüksekliği — JS (armada-lp-2026.js) günceller.
     Varsayılan, masaüstü başlık yüksekliğine yakın güvenli bir değer. */
  --lp-hdr:110px;
  --lp-stick:calc(var(--lp-hdr) + 18px);
}

/* Açık tema — SADECE token devirmesi, bileşen CSS'i değişmez.
   Kapsam: açılış sayfaları (body.lp-page) ve başka sayfalara gömülen
   `.lp-scope` blokları. Mevcut sayfaların açık tema davranışı bozulmaz. */
html.theme-light body.lp-page,
html.theme-light .lp-scope{
  --bg:#f4f1ea;            --bg-rgb:244,241,234;
  --bg-2:#ffffff;          --bg-2-rgb:255,255,255;
  --bg-3:#efeadf;          --bg-3-rgb:239,234,223;
  --bg-elev:#ffffff;
  --ink:#16140f;           --ink-rgb:22,20,15;
  --ink-body:#3c382f;
  --ink-mute:#5c574e;      --ink-mute-rgb:92,87,78;
  --ink-soft:#867f73;      --ink-soft-rgb:134,127,115;
  --line:rgba(0,0,0,.09);
  --line-2:rgba(0,0,0,.14);
  --line-3:rgba(0,0,0,.24);
  --wood:#8a6a47;          --wood-rgb:138,106,71;
  --wood-dim:#6d5336;      --wood-dim-rgb:109,83,54;
  --sh-1:0 2px 8px -2px rgba(22,20,15,.12);
  --sh-2:0 12px 28px -12px rgba(22,20,15,.2);
  --sh-3:0 30px 60px -20px rgba(22,20,15,.28);
}

/* ---------------------------------------------------------------
   2) TEMEL / KONTEYNER
   --------------------------------------------------------------- */
.lp-page{background:var(--bg);color:var(--ink);font-family:var(--font-body);overflow-x:clip}
.lp-page .wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--s5)}
.lp-page img,.lp-page svg{max-width:100%}
.lp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Gövde metni ortak tipografisi */
.lp-page :where(h1,h2,h3,h4){hyphens:none;text-wrap:balance}
.lp-page :where(p,li){hyphens:none}

/* ---------------------------------------------------------------
   3) BUTONLAR
   --------------------------------------------------------------- */
.lpb{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:13px 26px;border-radius:999px;
  font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  white-space:nowrap;color:var(--ink);background:transparent;
  transition:background var(--d-base) var(--e-out),border-color var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             color var(--d-base) var(--e-out);
}
.lpb svg{width:17px;height:17px;flex:0 0 auto}
.lpb:focus-visible{outline:2px solid var(--wood);outline-offset:3px}

.lpb--primary{background:var(--red);color:#fff;box-shadow:var(--sh-red)}
.lpb--ghost{border-color:var(--line-2);color:var(--ink)}
.lpb--wa{background:#25d366;color:#06301a}

.lpb--primary:active,.lpb--ghost:active,.lpb--wa:active{transform:translateY(0) scale(.985)}
.lpb[disabled],.lpb[aria-disabled="true"]{
  background:var(--bg-3);color:var(--ink-soft);border-color:var(--line);
  box-shadow:none;cursor:not-allowed;transform:none
}
@media (hover:hover) and (pointer:fine){
  .lpb--primary:hover{background:#d62642;transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(var(--red-rgb),.8)}
  .lpb--ghost:hover{background:rgba(var(--ink-rgb),.05);border-color:var(--line-3)}
  .lpb--wa:hover{background:#1fbe5b;transform:translateY(-2px)}
}

/* ---------------------------------------------------------------
   4) HERO
   --------------------------------------------------------------- */
.lp-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:var(--s8) var(--s7);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 8% -18%, rgba(var(--red-rgb),.20), transparent 62%),
    radial-gradient(760px 400px at 96% 118%, rgba(var(--wood-rgb),.13), transparent 60%);
}
/* (b) ince ızgara */
.lp-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(var(--ink-rgb),.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(var(--ink-rgb),.035) 0 1px, transparent 1px 72px);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
}
/* (c) statik grain + imleç ışığı */
.lp-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.85;
  background:radial-gradient(520px circle at var(--mx,72%) var(--my,10%), rgba(var(--wood-rgb),.10), transparent 60%);
  transition:background-position var(--d-base) linear;
}
.lp-grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lp-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);align-items:end}

.lp-eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--wood);padding:7px 14px;border-radius:999px;
  border:1px solid rgba(var(--wood-rgb),.28);background:rgba(var(--wood-rgb),.07);
  margin-bottom:var(--s5)
}
.lp-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--wood);flex:0 0 auto}

.lp-hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,5.4vw,64px);line-height:1.05;letter-spacing:-.03em;
  margin:0 0 var(--s5);max-width:20ch;color:var(--ink)
}
.lp-hero h1 .ln{display:block;animation:lpMaskUp 760ms var(--e-out) both}
.lp-hero h1 .ln:nth-child(2){animation-delay:110ms}
.lp-hero h1 .ln:nth-child(3){animation-delay:220ms}
@keyframes lpMaskUp{
  from{clip-path:inset(0 0 100% 0);transform:translateY(.22em)}
  to{clip-path:inset(0 0 -6% 0);transform:none}
}
.lp-kw{
  background-image:linear-gradient(100deg,var(--wood) 0%,#f0d6b4 42%,var(--wood) 84%);
  background-repeat:no-repeat;
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lpKwFlow 7s linear infinite
}
/* DİKKAT: burada `background` KISAYOLU kullanılmaz — kısayol background-clip'i
   border-box'a sıfırlar ve metin maskesi bozulup dolu blok görünür. */
html.theme-light .lp-kw{background-image:linear-gradient(100deg,var(--wood) 0%,#b98d5c 42%,var(--wood) 84%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes lpKwFlow{to{background-position:220% 0}}

.lp-lead{
  font-size:clamp(16.5px,1.7vw,20px);line-height:1.7;color:var(--ink-mute);
  max-width:66ch;margin:0 0 var(--s6)
}
.lp-lead strong{color:var(--ink);font-weight:700}
.lp-hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s6)}

.lp-trust{display:flex;gap:var(--s6);flex-wrap:wrap;padding-top:var(--s5);border-top:1px solid var(--line)}
.lp-trust-i{display:flex;gap:var(--s2);align-items:center;font-size:13.5px;color:var(--ink-mute);font-weight:500}
.lp-trust-i svg{width:18px;height:18px;color:var(--ok);flex:0 0 auto}

/* Hero yan panel — teknik künye (düz renk blok DEĞİL, tipografik panel) */
.lp-spec{
  min-width:270px;background:rgba(var(--bg-2-rgb),.72);
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:var(--s5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.lp-spec h2{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s4)
}
.lp-spec dl{margin:0;display:grid;gap:var(--s1)}
.lp-spec-row{display:flex;justify-content:space-between;gap:var(--s4);padding:9px 0;border-bottom:1px solid var(--line)}
.lp-spec-row:last-child{border-bottom:none}
.lp-spec dt{font-size:13.5px;color:var(--ink-mute)}
.lp-spec dd{margin:0;font-size:13.5px;font-weight:700;color:var(--ink);text-align:right}

/* ---------------------------------------------------------------
   5) İSTATİSTİK ŞERİDİ  (ikinci ekran kancası)
   --------------------------------------------------------------- */
.lp-stats{background:var(--bg-2);border-bottom:1px solid var(--line);padding-block:var(--s7)}
.lp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.lpstat{padding:0 var(--s5);border-left:1px solid var(--line)}
.lpstat:first-child{border-left:none;padding-left:0}
.lpstat-num{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(38px,5vw,62px);line-height:1;letter-spacing:-.04em;
  color:var(--ink);display:block;margin-bottom:var(--s2)
}
.lpstat-num .u{color:var(--wood)}
.lpstat-lbl{font-size:13.5px;color:var(--ink-mute);line-height:1.5;display:block}

/* ---------------------------------------------------------------
   6) ANA IZGARA  (TOC | içerik | aside)
   --------------------------------------------------------------- */
.lp-body{padding-block:var(--s8) var(--s7)}
.lp-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 320px;gap:var(--s7);align-items:start}
/* Izgara çocukları asla min-content ile parçayı genişletmesin (tablo/uzun kelime koruması) */
.lp-grid > *{min-width:0;max-width:100%}

/* İçindekiler */
.lptoc{position:sticky;top:var(--lp-stick)}
.lptoc > summary{display:none}
.lptoc-t{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 var(--s3)
}
.lptoc-list{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.lptoc-list a{
  font-size:13.5px;line-height:1.45;color:var(--ink-mute);text-decoration:none;
  border-left:2px solid transparent;margin-left:-1px;padding:8px 0 8px 14px;
  transition:color var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out)
}
.lptoc-list a.is-active{color:var(--wood);border-left-color:var(--wood);font-weight:600}
.lptoc-list a:focus-visible{outline:2px solid var(--wood);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .lptoc-list a:hover{color:var(--ink);border-left-color:var(--line-3)}
}

/* ---------------------------------------------------------------
   7) MAKALE GÖVDESİ (prose)
   --------------------------------------------------------------- */
.lp-prose{max-width:72ch;font-size:16.5px;line-height:1.8;color:var(--ink-body)}
.lp-prose > *:first-child{margin-top:0}
.lp-prose h2{
  position:relative;font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,3vw,36px);line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);margin:var(--s9) 0 var(--s4);padding-left:var(--s4);scroll-margin-top:calc(var(--lp-hdr) + 26px)
}
.lp-prose h2:first-child{margin-top:0}
.lp-prose h2::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:3px;
  background:var(--wood);border-radius:2px;transform:scaleY(0);transform-origin:top;
  transition:transform 420ms var(--e-out) 120ms
}
.lp-prose h2.is-in::before,.reveal.is-in .lp-prose h2::before{transform:scaleY(1)}
.lp-prose h3{
  font-family:var(--font-body);font-weight:700;font-size:clamp(18px,1.9vw,21px);
  line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:var(--s6) 0 var(--s3);scroll-margin-top:calc(var(--lp-hdr) + 26px)
}
.lp-prose p{margin:0 0 var(--s4)}
.lp-prose strong{color:var(--ink);font-weight:700}
.lp-prose em{color:var(--ink);font-style:italic}
.lp-prose ul,.lp-prose ol{margin:0 0 var(--s5);padding-left:var(--s5)}
.lp-prose li{margin-bottom:var(--s2)}
.lp-prose li::marker{color:var(--wood)}
.lp-prose a:not(.lpchip):not(.lpb){
  color:var(--wood);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(var(--wood-rgb),.45);
  border-radius:3px;transition:text-decoration-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out)
}
.lp-prose a:not(.lpchip):not(.lpb):active{opacity:.8}
.lp-prose a:focus-visible{outline:2px solid var(--wood);outline-offset:2px}
/* Çipler ve butonlar prose bağlantı stilini almaz */
.lp-prose .lpchip,.lp-prose .lpb{text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .lp-prose a:not(.lpchip):not(.lpb):hover{text-decoration-color:var(--wood);background:rgba(var(--wood-rgb),.08)}
}
.lp-prose blockquote{
  margin:var(--s5) 0;padding:var(--s4) var(--s5);border-left:3px solid var(--wood);
  background:var(--bg-2);border-radius:0 var(--radius) var(--radius) 0;color:var(--ink-mute)
}
.lp-prose blockquote p:last-child{margin-bottom:0}

/* Tablolar */
.lp-tablewrap{position:relative;width:100%;max-width:100%;min-width:0;margin:var(--s2) 0 var(--s6);overflow-x:auto;-webkit-overflow-scrolling:touch}
.lp-prose table,.lp-table{
  width:100%;min-width:520px;border-collapse:collapse;font-size:15px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden
}
.lp-prose table th,.lp-table th{
  text-align:left;padding:12px 16px;background:var(--bg-3);color:var(--ink);
  font-weight:700;font-size:13.5px;letter-spacing:.01em;border-bottom:1px solid var(--line-2);white-space:nowrap
}
.lp-prose table td,.lp-table td{
  padding:12px 16px;color:var(--ink-mute);border-bottom:1px solid var(--line);vertical-align:top
}
.lp-prose table tbody tr:last-child td,.lp-table tr:last-child td{border-bottom:none}
@media (hover:hover) and (pointer:fine){
  .lp-prose table tbody tr:hover td,.lp-table tr:hover td{background:rgba(var(--ink-rgb),.03)}
}
.lp-tablewrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(to right, transparent, rgba(var(--bg-rgb),.9))
}
@media(min-width:760px){.lp-tablewrap::after{display:none}}

/* Kutulu ipucu */
.lp-note{
  display:flex;gap:var(--s3);margin:var(--s5) 0;padding:var(--s4) var(--s5);
  background:rgba(var(--warn-rgb),.07);border:1px solid rgba(var(--warn-rgb),.26);
  border-radius:var(--radius);color:var(--ink-body);font-size:15.5px;line-height:1.7
}
.lp-note svg{width:20px;height:20px;color:var(--warn);flex:0 0 auto;margin-top:2px}
.lp-note p{margin:0}
.lp-note strong{color:var(--ink)}

/* ---------------------------------------------------------------
   8) İÇ LİNK BİLEŞENLERİ  (backlink altyapısı)
   --------------------------------------------------------------- */
/* 8a. Anahtar kelime çipleri */
.lpchips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s6);padding:0;list-style:none}
.lpchip{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;
  background:rgba(var(--wood-rgb),.08);color:var(--wood);text-decoration:none;
  border:1px solid rgba(var(--wood-rgb),.22);
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out)
}
.lpchip:active{transform:none}
.lpchip:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
.lpchip[aria-current="page"]{background:var(--wood);color:var(--bg);cursor:default;border-color:var(--wood)}
@media (hover:hover) and (pointer:fine){
  .lpchip:hover{background:rgba(var(--wood-rgb),.16);border-color:var(--wood-dim);transform:translateY(-1px)}
  .lpchip[aria-current="page"]:hover{transform:none;background:var(--wood)}
}

/* 8b. Konu haritası — bento ızgara
   -------------------------------------------------------------------
   12 SÜTUN kullanılıyor. Eski 6 sütunluk kurguda 6 kart (3+3 / 2+2+2 / 2)
   olarak diziliyor ve SON KART TEK BAŞINA ÜÇÜNCÜ SATIRA düşüyordu —
   bölümün kırık ve dağınık görünmesinin asıl sebebi buydu.
   12 sütunda: 2 öne çıkan kart (6+6) + 4 kompakt kart (3+3+3+3) = tam
   dolu iki satır, boşluk yok. */
.lp-hub{padding-block:var(--s9) var(--s8);border-top:1px solid var(--line);background:var(--bg)}
.lp-sec-head{margin-bottom:var(--s7);max-width:62ch}
.lp-sec-head .lp-eyebrow{margin-bottom:var(--s4)}
.lp-sec-head h2{
  font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.2vw,40px);
  line-height:1.12;letter-spacing:-.025em;color:var(--ink);margin:0 0 var(--s3)
}
.lp-sec-head p{color:var(--ink-mute);margin:0;font-size:17px;line-height:1.7;max-width:58ch}

.lp-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4)}
.lp-bento > *{grid-column:span 3}                                   /* kompakt */
.lp-bento > *:nth-child(1),
.lp-bento > *:nth-child(2){grid-column:span 6}                       /* öne çıkan */
/* 5 kart gelirse sonuncusu kalan boşluğu doldurur (yine tek satır) */
.lp-bento:has(> :nth-child(5):last-child) > :nth-child(5){grid-column:span 6}
/* 4 kart gelirse 2×2 */
.lp-bento:has(> :nth-child(4):last-child) > *{grid-column:span 6}

/* ---- Kart ---- */
.lpcard{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;height:100%;
  background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:var(--s5) var(--s5) var(--s4);
  text-decoration:none;
  transition:border-color var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out),
             background var(--d-base) var(--e-out),
             box-shadow var(--d-base) var(--e-out)
}
/* imleç takipli ışık */
.lpcard::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(var(--wood-rgb),.14), transparent 62%);
  transition:opacity 280ms var(--e-out)
}
/* üst kenarda soldan dolan ahşap vurgu — kartlara yapı kazandırır */
.lpcard::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--wood),rgba(var(--wood-rgb),0));
  transform:scaleX(0);transform-origin:left;
  transition:transform 460ms var(--e-out)
}
.lpcard:active{transform:translateY(-1px)}
.lpcard:focus-within{border-color:var(--wood-dim)}
a.lpcard:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
a.lpcard:focus-visible::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .lpcard:hover{border-color:var(--line-3);transform:translateY(-4px);background:var(--bg-3);box-shadow:var(--sh-2)}
  .lpcard:hover::before{opacity:1}
  .lpcard:hover::after{transform:scaleX(1)}
}

.lpcard-k{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wood);margin-bottom:var(--s3)
}
.lpcard-k::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--wood);flex:0 0 auto;opacity:.85
}
.lpcard-t{
  font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 var(--s2)
}
.lpcard-d{
  font-size:14.5px;line-height:1.6;color:var(--ink-mute);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
/* CTA en alta sabitlenir → satırdaki tüm kartlarda aynı hizada durur */
.lpcard-go{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:auto;padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--wood)
}
.lpcard-go svg{width:15px;height:15px;transition:transform var(--d-base) var(--e-out)}
@media (hover:hover) and (pointer:fine){.lpcard:hover .lpcard-go svg{transform:translateX(4px)}}

/* Öne çıkan iki kart: daha geniş nefes + ahşap yıkama */
.lp-bento > *:nth-child(1),
.lp-bento > *:nth-child(2){
  padding:var(--s6) var(--s6) var(--s5);
  background:linear-gradient(158deg, rgba(var(--wood-rgb),.09), var(--bg-2) 58%)
}
.lp-bento > *:nth-child(1) .lpcard-t,
.lp-bento > *:nth-child(2) .lpcard-t{font-size:clamp(22px,1.9vw,27px)}
.lp-bento > *:nth-child(1) .lpcard-d,
.lp-bento > *:nth-child(2) .lpcard-d{font-size:15.5px;-webkit-line-clamp:2;max-width:46ch}
@media (hover:hover) and (pointer:fine){
  .lp-bento > *:nth-child(1):hover,
  .lp-bento > *:nth-child(2):hover{background:linear-gradient(158deg, rgba(var(--wood-rgb),.14), var(--bg-3) 58%)}
}

/* Bölüm sonu açıklama paragrafı */
.lp-hub-note{
  margin:var(--s6) 0 0;max-width:78ch;
  font-size:16px;line-height:1.75;color:var(--ink-mute)
}
.lp-hub-note a{
  color:var(--wood);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(var(--wood-rgb),.45)
}
.lp-hub-note a:hover{text-decoration-color:var(--wood)}

/* Çip kümesi başlığı — çipler ikincil olduğunu belli etsin */
.lp-chip-label{
  display:block;margin:var(--s6) 0 var(--s3);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)
}

/* 8c. Akan iç link şeridi */
.lp-marquee{
  position:relative;overflow:hidden;padding-block:var(--s4);
  background:var(--bg-2);border-block:1px solid var(--line)
}
.lp-marquee::before,.lp-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none
}
.lp-marquee::before{left:0;background:linear-gradient(to right,var(--bg-2),rgba(var(--bg-2-rgb),0))}
.lp-marquee::after{right:0;background:linear-gradient(to left,var(--bg-2),rgba(var(--bg-2-rgb),0))}
.lp-marquee-track{
  display:flex;gap:var(--s5);width:max-content;
  animation:lpMarquee 46s linear infinite
}
.lp-marquee:hover .lp-marquee-track,.lp-marquee:focus-within .lp-marquee-track{animation-play-state:paused}
@keyframes lpMarquee{to{transform:translate3d(-50%,0,0)}}
.lp-marquee-track a{
  display:inline-flex;align-items:center;gap:var(--s3);white-space:nowrap;
  font-family:var(--font-display);font-weight:500;font-size:clamp(17px,2.1vw,24px);
  letter-spacing:-.02em;color:var(--ink-mute);text-decoration:none;
  transition:color var(--d-fast) var(--e-out)
}
.lp-marquee-track a::after{content:"·";color:var(--wood);opacity:.7;font-size:1.1em}
.lp-marquee-track a:focus-visible{outline:2px solid var(--wood);outline-offset:3px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.lp-marquee-track a:hover{color:var(--wood)}}

/* ---------------------------------------------------------------
   9) ASIDE KARTLARI
   --------------------------------------------------------------- */
.lp-aside{position:sticky;top:var(--lp-stick);display:flex;flex-direction:column;gap:var(--s4)}
.lp-acard{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:var(--s5)}
.lp-acard--accent{
  border-color:rgba(var(--red-rgb),.34);
  background:linear-gradient(165deg, rgba(var(--red-rgb),.12), rgba(var(--bg-2-rgb),1) 58%)
}
.lp-acard h2,.lp-acard h3{
  font-family:var(--font-body);font-size:15.5px;font-weight:700;line-height:1.35;
  color:var(--ink);margin:0 0 var(--s3)
}
.lp-acard p{font-size:14px;line-height:1.65;color:var(--ink-mute);margin:0 0 var(--s4)}
.lp-acard p:last-child{margin-bottom:0}
.lp-acard .lpb{width:100%}
.lp-links{display:flex;flex-direction:column}
.lp-links a{
  display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--ink-mute);text-decoration:none;
  transition:color var(--d-fast) var(--e-out)
}
.lp-links a:last-child{border-bottom:none}
.lp-links a:focus-visible{outline:2px solid var(--wood);outline-offset:2px}
.lp-links b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;margin-bottom:2px}
@media (hover:hover) and (pointer:fine){
  .lp-links a:hover{color:var(--wood)}
  .lp-links a:hover b{color:var(--wood)}
}
.lp-addr{font-size:14px;line-height:1.6;color:var(--ink-mute);margin-bottom:var(--s4)}
.lp-addr b{display:block;color:var(--ink);font-weight:700;font-size:13.5px}

/* ---------------------------------------------------------------
   10) SSS AKORDİYON
   --------------------------------------------------------------- */
.lpfaq{display:flex;flex-direction:column;gap:var(--s2);max-width:72ch}
.lpfaq details{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);
  transition:border-color var(--d-base) var(--e-out),background var(--d-base) var(--e-out)
}
.lpfaq details[open]{border-color:var(--wood-dim);background:var(--bg-3)}
.lpfaq summary{
  position:relative;list-style:none;cursor:pointer;
  padding:16px 52px 16px var(--s5);
  font-size:16px;font-weight:700;line-height:1.45;color:var(--ink);
  transition:color var(--d-fast) var(--e-out)
}
.lpfaq summary::-webkit-details-marker{display:none}
.lpfaq summary::after{
  content:"";position:absolute;right:var(--s5);top:50%;width:14px;height:14px;
  margin-top:-7px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  color:var(--wood);
  transition:transform 220ms var(--e-out)
}
.lpfaq details[open] summary::after{transform:rotate(45deg)}
.lpfaq summary:focus-visible{outline:2px solid var(--wood);outline-offset:-2px;border-radius:var(--radius)}
@media (hover:hover) and (pointer:fine){.lpfaq summary:hover{color:var(--wood)}}
.lpfaq-a{padding:0 var(--s5) var(--s5);font-size:15.5px;line-height:1.75;color:var(--ink-body)}
.lpfaq-a p{margin:0 0 var(--s3)}
.lpfaq-a p:last-child{margin-bottom:0}
.lpfaq-a a{color:var(--wood);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------
   11) FİNAL CTA
   --------------------------------------------------------------- */
.lp-final{
  position:relative;overflow:hidden;border-top:1px solid var(--line);
  padding-block:var(--s9);background:var(--bg-2);
  background-image:radial-gradient(760px 320px at 84% -30%, rgba(var(--red-rgb),.16), transparent 62%)
}
.lp-final-in{display:flex;gap:var(--s7);align-items:center;justify-content:space-between;flex-wrap:wrap}
.lp-final h2{
  font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3.2vw,38px);
  line-height:1.12;letter-spacing:-.025em;color:var(--ink);margin:0 0 var(--s3);max-width:22ch
}
.lp-final p{color:var(--ink-mute);margin:0;max-width:54ch;font-size:16px;line-height:1.7}
.lp-final-cta{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---------------------------------------------------------------
   12) KIRINTI
   --------------------------------------------------------------- */
.lp-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:13px;color:var(--ink-soft);margin-bottom:var(--s5);padding:0;list-style:none
}
.lp-crumb li{display:flex;align-items:center;gap:var(--s2)}
.lp-crumb li+li::before{content:"/";color:var(--ink-soft);opacity:.6}
.lp-crumb a{color:var(--ink-mute);text-decoration:none;transition:color var(--d-fast) var(--e-out)}
.lp-crumb a:focus-visible{outline:2px solid var(--wood);outline-offset:2px}
.lp-crumb [aria-current="page"]{color:var(--ink-mute)}
@media (hover:hover) and (pointer:fine){.lp-crumb a:hover{color:var(--wood)}}

/* ---------------------------------------------------------------
   13) REVEAL (L2 giriş animasyonları)
   --------------------------------------------------------------- */
/* Giriş animasyonları YALNIZCA .lp-js varken gizlemeyle başlar.
   JS yüklenmezse (veya hata verirse) içerik tam görünür kalır — asla boş sayfa. */
html.lp-js .reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--d-slow) var(--e-out),transform var(--d-slow) var(--e-out)}
html.lp-js .reveal.is-in{opacity:1;transform:none}
html.lp-js .reveal-stagger > *{opacity:0;transform:translate3d(0,18px,0);transition:opacity 460ms var(--e-out),transform 460ms var(--e-out)}
html.lp-js .reveal-stagger.is-in > *{opacity:1;transform:none}
html.lp-js .reveal-stagger.is-in > *:nth-child(1){transition-delay:0ms}
html.lp-js .reveal-stagger.is-in > *:nth-child(2){transition-delay:70ms}
html.lp-js .reveal-stagger.is-in > *:nth-child(3){transition-delay:140ms}
html.lp-js .reveal-stagger.is-in > *:nth-child(4){transition-delay:210ms}
html.lp-js .reveal-stagger.is-in > *:nth-child(5){transition-delay:280ms}
html.lp-js .reveal-stagger.is-in > *:nth-child(6){transition-delay:350ms}

/* ---------------------------------------------------------------
   14) OKUMA İLERLEMESİ + BAŞA DÖN (巧思)
   --------------------------------------------------------------- */
.lp-top{
  position:fixed;right:18px;bottom:86px;z-index:79;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--bg-2-rgb),.92);border:1px solid var(--line-2);
  color:var(--ink-mute);cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(8px) scale(.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out),
             visibility var(--d-base),color var(--d-fast),border-color var(--d-fast)
}
.lp-top.is-on{opacity:1;visibility:visible;transform:none}
.lp-top svg.ring{position:absolute;inset:-1px;width:48px;height:48px;transform:rotate(-90deg)}
.lp-top .ring-bg{fill:none;stroke:var(--line-2);stroke-width:2}
.lp-top .ring-fg{fill:none;stroke:var(--wood);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset 120ms linear}
.lp-top .arw{width:17px;height:17px;position:relative}
.lp-top:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
.lp-top.is-done .arw{animation:lpPop 420ms var(--e-out)}
@keyframes lpPop{40%{transform:scale(1.14)}100%{transform:none}}
@media (hover:hover) and (pointer:fine){.lp-top:hover{color:var(--ink);border-color:var(--line-3)}}
.lp-top-tip{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--wood);
  background:var(--bg-2);border:1px solid rgba(var(--wood-rgb),.3);
  border-radius:999px;padding:7px 13px;opacity:0;pointer-events:none;
  transition:opacity var(--d-base) var(--e-out)
}
.lp-top.is-done .lp-top-tip{opacity:1}

/* ---------------------------------------------------------------
   15) RESPONSIVE
   --------------------------------------------------------------- */
@media(max-width:1199px) and (min-width:960px){
  /* Bu aralıkta 4 kompakt kart yan yana dar kalıyor → 2'li sıraya iner */
  .lp-bento > *{grid-column:span 6}
}
@media(max-width:1099px){
  .lp-grid{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6)}
  .lptoc{grid-column:1 / -1;position:static;top:auto;margin-bottom:var(--s2)}
  .lptoc-list{flex-direction:row;gap:var(--s2);overflow-x:auto;border-left:none;padding-bottom:var(--s2);-webkit-overflow-scrolling:touch}
  .lptoc-list a{
    white-space:nowrap;border-left:none;margin-left:0;padding:12px 16px;min-height:44px;
    border:1px solid var(--line-2);border-radius:999px;font-size:13px
  }
  .lptoc-list a.is-active{border-color:var(--wood);background:rgba(var(--wood-rgb),.1)}
}
@media(max-width:959px){
  .lp-hero{padding-block:var(--s7) var(--s6)}
  .lp-hero-in{grid-template-columns:1fr;gap:var(--s6);align-items:start}
  .lp-spec{min-width:0;width:100%}
  .lp-grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .lp-aside{position:static;top:auto}
  .lp-body{padding-block:var(--s7) var(--s6)}
  .lp-prose h2{margin-top:var(--s8)}
  .lp-stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--s5) 0}
  .lpstat{padding:0 var(--s4)}
  .lpstat:nth-child(odd){border-left:none;padding-left:0}
  /* 12 sütun korunur; yalnızca span'ler değişir → boşluk/öksüz kart oluşmaz */
  .lp-bento > *,
  .lp-bento > *:nth-child(1),
  .lp-bento > *:nth-child(2){grid-column:span 6}
  .lp-bento > *:nth-child(1) .lpcard-t,
  .lp-bento > *:nth-child(2) .lpcard-t{font-size:21px}
  .lp-bento > *:nth-child(1),
  .lp-bento > *:nth-child(2){padding:var(--s5) var(--s5) var(--s4)}
  /* TOC mobilde katlanır */
  .lptoc{border:1px solid var(--line-2);border-radius:var(--radius);padding:var(--s3) var(--s4)}
  .lptoc > summary{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    list-style:none;cursor:pointer;min-height:44px;
    font-size:13.5px;font-weight:700;color:var(--ink)
  }
  .lptoc > summary::-webkit-details-marker{display:none}
  .lptoc > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--wood);border-bottom:2px solid var(--wood);transform:rotate(45deg) translateY(-2px);transition:transform var(--d-base)}
  .lptoc[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
  .lptoc[open] > summary{margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
  .lptoc-t{display:none}
  .lptoc-list{flex-direction:column;overflow:visible;border-left:1px solid var(--line)}
  .lptoc-list a{white-space:normal;border:none;border-left:2px solid transparent;border-radius:0;margin-left:-1px;padding:12px 0 12px 14px;min-height:44px}
  .lptoc-list a.is-active{background:transparent;border-left-color:var(--wood)}
  .lp-final{padding-block:var(--s8)}
  .lp-hub{padding-block:var(--s7)}
}
@media(max-width:767px){
  .lp-bento > *,
  .lp-bento > *:nth-child(1),
  .lp-bento > *:nth-child(2){grid-column:span 12}
  .lp-final-in{gap:var(--s5)}
  .lp-marquee-track{animation-duration:30s}
}
@media(max-width:600px){
  .lp-page .wrap{padding-inline:18px}
  .lp-hero{padding-block:var(--s6) var(--s5)}
  .lp-hero h1{font-size:clamp(30px,8.4vw,40px);max-width:none}
  .lp-lead{font-size:16px}
  .lp-hero-cta{gap:var(--s2)}
  .lp-hero-cta .lpb,.lp-final-cta .lpb{flex:1 1 100%}
  .lp-trust{gap:var(--s3) var(--s5)}
  .lp-body,.lp-hub{padding-block:var(--s7) var(--s6)}
  .lp-prose{font-size:16px}
  .lp-prose h2{margin-top:var(--s7);padding-left:var(--s3)}
  .lp-marquee{padding-block:var(--s3)}
  .lp-marquee-track{gap:var(--s4);animation-duration:26s}
  .lp-marquee::before,.lp-marquee::after{width:44px}
  .lp-top{display:none}
  .lpstat-num{font-size:clamp(32px,10vw,40px)}
}
@media(max-width:479px){
  .lp-stats{padding-block:var(--s6)}
  .lp-final{padding-block:var(--s7)}
  .lpfaq summary{padding:14px 46px 14px var(--s4);font-size:15.5px}
  .lpfaq summary::after{right:var(--s4)}
  .lpfaq-a{padding:0 var(--s4) var(--s4)}
  .lp-acard,.lpcard{padding:var(--s4)}
}

/* ---------------------------------------------------------------
   16) ERİŞİLEBİLİRLİK DEVİRMESİ
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important
  }
  html.lp-js .reveal,html.lp-js .reveal-stagger > *{opacity:1 !important;transform:none !important}
  .lp-marquee-track{animation:none !important;transform:none !important}
  .lp-marquee{overflow-x:auto}
  .lp-kw{animation:none;background-position:0 0}
  .lp-hero h1 .ln{animation:none;clip-path:none}
  .lp-prose h2::before{transform:scaleY(1) !important}
  .lp-top .ring-fg{display:none}
}
@media print{
  .lp-hero::before,.lp-hero::after,.lp-grain,.lp-marquee,.lp-top,.lp-aside,.floats{display:none !important}
  .lp-page{background:#fff;color:#000}
  .lp-prose{max-width:none}
}