/* ============================================================
   MILANBAHIS — Neon Arena teması  ·  harici stil dosyası
   ============================================================ */
/* Metric-uyumlu yedek (LCP reflow'u önler) */
@font-face{font-family:'Chakra Fallback';src:local('Arial');size-adjust:104%;ascent-override:88%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:100%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
/* Self-hosted: Chakra Petch (display) + Inter variable (body), latin + latin-ext */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/chakra-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/chakra-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/chakra-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/chakra-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/chakra-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/chakra-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ===========================================================================
   NEON ARENA — Design tokens
   =========================================================================== */
:root{
  --bg-0:#06080f;
  --bg-1:#0a0e1a;
  --bg-2:#0e1424;
  --surface:rgba(18,24,42,.72);
  --surface-2:rgba(24,32,56,.85);
  --line:rgba(120,150,200,.16);
  --line-2:rgba(120,150,200,.28);
  --txt:#eef3ff;            /* ana acik metin rengi (logo wordmark bununla uyumlu #f3f5f9) */
  --txt-dim:#a9b6d6;
  --txt-mute:#7c8ab0;
  --cyan:#22d3ee;
  --violet:#7c3aed;
  --lime:#a3e635;
  --gold:#f6c945;
  --rose:#fb7185;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glow-cyan:0 0 14px rgba(34,211,238,.55);
  --glow-violet:0 0 18px rgba(124,58,237,.5);

  /* ---- ONE button system (shared sizing tokens) ---- */
  --btn-h:50px;             /* tutarli birincil/ikincil yukseklik */
  --btn-h-lg:58px;          /* hero / banner buyuk varyant */
  --btn-h-sm:42px;          /* header kompakt */
  --btn-pad-x:24px;
  --btn-pad-x-lg:32px;
  --btn-pad-x-sm:18px;
  --btn-fs:.96rem;
  --btn-fs-lg:1.06rem;
  --btn-fs-sm:.9rem;
  --btn-radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background:var(--bg-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.wm{font-family:"Chakra Petch","Oswald",sans-serif;letter-spacing:.02em}

a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,34px)}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--cyan);color:#04121a;font-weight:700;
  padding:10px 16px;border-radius:10px;transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* Official logo (inline SVG) sizing */
.brand-logo{height:42px;width:auto;flex:0 0 auto;font-family:"Chakra Petch","Oswald",sans-serif;filter:drop-shadow(0 0 10px rgba(34,211,238,.4))}
.foot-brand .brand-logo{height:40px}

/* ===========================================================================
   ANIMATED BACKGROUND — drifting gradient mesh + grid/scanlines + circuit lines
   =========================================================================== */
.bg-layer{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--bg-0)}
.bg-mesh{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none;filter:blur(60px);opacity:.85}
.blob{position:absolute;width:46vw;height:46vw;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.blob.b1{background:radial-gradient(circle at 30% 30%,rgba(34,211,238,.85),transparent 60%);top:-8%;left:-6%;animation:drift1 22s ease-in-out infinite}
.blob.b2{background:radial-gradient(circle at 70% 40%,rgba(124,58,237,.85),transparent 62%);top:6%;right:-10%;animation:drift2 26s ease-in-out infinite}
.blob.b3{background:radial-gradient(circle at 50% 60%,rgba(163,230,53,.55),transparent 60%);bottom:-14%;left:24%;animation:drift3 30s ease-in-out infinite}
.blob.b4{background:conic-gradient(from 0deg,rgba(34,211,238,.4),rgba(124,58,237,.45),rgba(246,201,69,.3),rgba(34,211,238,.4));top:34%;left:36%;width:38vw;height:38vw;animation:spin 40s linear infinite,drift1 24s ease-in-out infinite}

/* Mobil titreme/jank önleme: yatay taşmayı kes + ağır kompozisyonu hafiflet */
@media (max-width:768px){
  html,body{overflow-x:hidden;max-width:100%}
  .bg-mesh{filter:blur(34px)}
  .blob{mix-blend-mode:normal;opacity:.5;will-change:auto}
  .blob.b4{display:none}
  .hero-visual{overflow:hidden}
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,8,15,.97)}
}

@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8%,6%,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-7%,9%,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,-8%,0) scale(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}

.bg-grid{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(34,211,238,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.08) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 22%,#000 35%,transparent 80%);
  animation:gridpan 18s linear infinite;
}
@keyframes gridpan{to{background-position:54px 54px,54px 54px}}

/* SIGNATURE: animated neon "connection / circuit" lines drawing across the page */
.bg-circuit{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5}
.bg-circuit path{
  fill:none;stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:14 220;
  filter:drop-shadow(0 0 4px currentColor);
  animation:circuitFlow 9s linear infinite;
}
.bg-circuit .c1{color:var(--cyan);stroke:var(--cyan);animation-duration:8s}
.bg-circuit .c2{color:var(--violet);stroke:var(--violet);animation-duration:11s;animation-delay:-2s}
.bg-circuit .c3{color:var(--lime);stroke:var(--lime);animation-duration:13s;animation-delay:-5s}
@keyframes circuitFlow{to{stroke-dashoffset:-234}}

.bg-scan{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 1px,transparent 2px,transparent 4px);
  animation:scan 8s linear infinite;
}
@keyframes scan{from{background-position:0 0}to{background-position:0 100px}}

/* ===========================================================================
   HEADER
   =========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(180deg,rgba(6,8,15,.92),rgba(6,8,15,.62));
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.site-header.scrolled{box-shadow:0 8px 40px -12px rgba(34,211,238,.35);background:rgba(6,8,15,.96)}
.hd-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:11px}

.nav-main{display:flex;align-items:center;gap:6px}
.nav-main a{
  padding:9px 13px;border-radius:10px;color:var(--txt-dim);font-size:.92rem;font-weight:600;
  font-family:"Chakra Petch","Oswald",sans-serif;
  position:relative;transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-main a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);border-radius:2px}
.nav-main a:hover{color:#fff}
.nav-main a:hover::after{transform:scaleX(1)}
.hd-cta{flex:0 0 auto}

.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;width:44px;height:44px;color:#fff;cursor:pointer;align-items:center;justify-content:center}

/* ===========================================================================
   BUTTONS — ONE unified system
   Primaries: same height/padding/font/radius. Secondary/ghost: their own shared set.
   Sizes (.btn-sm/.btn-lg) only swap the shared size tokens, keeping proportions.
   =========================================================================== */
.btn{
  --b1:var(--cyan);--b2:var(--violet);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--btn-h);padding:0 var(--btn-pad-x);
  border-radius:var(--btn-radius);font-weight:700;font-size:var(--btn-fs);line-height:1;
  cursor:pointer;border:1px solid var(--line-2);color:#fff;
  background:rgba(20,28,48,.6);
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  overflow:hidden;isolation:isolate;white-space:nowrap;vertical-align:middle;
}
.btn::before{ /* sweeping sheen */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .6s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(34,211,238,.5)}
.btn:hover::before{transform:translateX(130%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ic{width:18px;height:18px;flex:0 0 auto}

/* Size variants (keep all proportions, just rescale the shared tokens) */
.btn-lg{--btn-h:var(--btn-h-lg);--btn-pad-x:var(--btn-pad-x-lg);--btn-fs:var(--btn-fs-lg)}
.btn-sm{--btn-h:var(--btn-h-sm);--btn-pad-x:var(--btn-pad-x-sm);--btn-fs:var(--btn-fs-sm)}

/* Primary — gradient-border glow */
.btn-primary{
  border:2px solid transparent;
  background:linear-gradient(120deg,#0c1830,#160e34) padding-box,
            linear-gradient(120deg,var(--cyan),var(--violet),var(--lime),var(--cyan)) border-box;
  background-size:auto,300% 300%;
  box-shadow:0 0 0 0 rgba(34,211,238,.5);
  animation:ctaPulse 2.6s ease-in-out infinite, borderFlow 6s linear infinite;
}
@keyframes borderFlow{to{background-position:0 0,300% 0}}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.45),0 0 22px rgba(124,58,237,.35)}50%{box-shadow:0 0 0 10px rgba(34,211,238,0),0 0 34px rgba(34,211,238,.55)}}
.btn-primary:hover{box-shadow:0 12px 36px -8px rgba(124,58,237,.65),0 0 30px rgba(34,211,238,.5)}

/* Secondary / ghost — shared look */
.btn-ghost{background:rgba(20,28,48,.6);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:0 8px 26px -10px rgba(34,211,238,.45)}
.btn-tg .ic{color:#29a9eb}
.btn-x .ic{color:#e7ecf4}

/* ===========================================================================
   SECTION SHELL
   =========================================================================== */
main{display:block}
section{position:relative;padding:clamp(58px,8vw,104px) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);border-radius:2px}
.sec-title{
  font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.1;margin:0 0 16px;font-weight:700;text-transform:uppercase;
  text-shadow:0 0 22px rgba(34,211,238,.28);
}
/* Section <h2> highlight: STATIC subtle gradient — no motion, no sweep. */
.sec-title .hl{
  background:linear-gradient(96deg,var(--cyan),var(--lime) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 14px rgba(34,211,238,.35));
}
.sec-lead{max-width:62ch;color:var(--txt-dim);font-size:1.04rem;margin:0 auto 0}
.center{text-align:center}
.center .sec-lead{margin-inline:auto}
.center .eyebrow::before{display:none}
.center .eyebrow{justify-content:center}

/* Section <h2> highlights stay STATIC — and so does the hero <h1>. No element on the
   page uses a moving/looping gradient sweep, so nothing can freeze or stutter. */
.reveal .sec-title,.reveal.sec-title{will-change:opacity,filter}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero{padding-top:clamp(40px,6vw,72px);overflow:visible}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  background:rgba(163,230,53,.1);border:1px solid rgba(163,230,53,.35);color:var(--lime);
  font-size:.8rem;font-weight:700;letter-spacing:.04em;margin-bottom:22px;
}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(163,230,53,.6);animation:livePulse 1.6s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(163,230,53,.6)}100%{box-shadow:0 0 0 11px rgba(163,230,53,0)}}

.hero h1{
  font-size:clamp(2.3rem,6.2vw,4.3rem);line-height:1.02;margin:0 0 18px;text-transform:uppercase;font-weight:700;
  text-shadow:0 0 30px rgba(34,211,238,.35),0 0 60px rgba(124,58,237,.25);
}
/* Hero wordmark accent: a CLEAN STATIC cyan -> violet gradient clipped to the text.
   NO motion, NO moving band, NO animated background-position — the client rejected
   the moving sweep (it stuttered at the loop point). Bold, legible, fixed gradient. */
.hero h1 .neon{
  background:linear-gradient(100deg,var(--cyan) 0%,#5eead4 40%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(34,211,238,.45));
}
.hero-sub{font-size:clamp(1.02rem,2vw,1.2rem);color:var(--txt-dim);max-width:54ch;margin:0 0 26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.fresh-line{font-size:.9rem;color:var(--txt-mute)}
.fresh-line time{color:var(--lime);font-weight:700}
.fresh-line .ok{color:var(--cyan)}

/* Hero visual — "Adres Doğrulandı" verification badge.
   READABILITY FIRST: a solid frosted chip sits on TOP; concentric pulse rings animate
   strictly BEHIND it at low opacity, so the text is never overlapped or dimmed. */
.hero-visual{position:relative;aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%;display:grid;place-items:center}
/* slow decorative orbit rings (low opacity, purely behind everything) */
.hero-visual .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(34,211,238,.16);animation:spin 26s linear infinite}
.hero-visual .ring.r2{inset:11%;border-color:rgba(124,58,237,.18);animation-duration:18s;animation-direction:reverse}
.hero-visual .ring.r3{inset:23%;border-color:rgba(163,230,53,.14);animation-duration:32s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* expanding sonar pulse rings — live in their own BEHIND layer (z-index:1) */
.radar{position:absolute;inset:0;display:grid;place-items:center;animation:floaty 6s ease-in-out infinite}
.radar .pulse{
  position:absolute;width:34%;height:34%;border-radius:50%;
  border:2px solid rgba(34,211,238,.5);
  opacity:0;z-index:1;pointer-events:none;
  animation:sonar 3.6s ease-out infinite;
}
.radar .pulse.p2{animation-delay:1.2s;border-color:rgba(163,230,53,.5)}
.radar .pulse.p3{animation-delay:2.4s;border-color:rgba(124,58,237,.5)}
@keyframes sonar{0%{transform:scale(.55);opacity:.55}70%{opacity:.12}100%{transform:scale(1.9);opacity:0}}

/* soft glow disc behind the chip (also behind, low opacity) */
.radar .glow-disc{
  position:absolute;width:60%;height:60%;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(34,211,238,.28),rgba(124,58,237,.16) 55%,transparent 72%);
  filter:blur(6px);
}

/* THE CHIP — solid/frosted, high contrast, ON TOP of every animated layer */
.verify-chip{
  position:relative;z-index:3;
  width:min(78%,360px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:30px 26px;border-radius:var(--r-xl);
  background:linear-gradient(165deg,rgba(14,20,38,.94),rgba(9,12,24,.96));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(34,211,238,.4);
  box-shadow:0 30px 80px -30px rgba(34,211,238,.55),inset 0 0 36px rgba(124,58,237,.14);
}
.verify-chip .check{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,rgba(163,230,53,.35),rgba(34,211,238,.18));
  border:2px solid rgba(163,230,53,.7);
  box-shadow:0 0 24px -4px rgba(163,230,53,.8);
}
.verify-chip .check svg{width:30px;height:30px;color:var(--lime)}
.verify-chip .ttl{
  font-family:"Chakra Petch","Oswald",sans-serif;font-weight:700;font-size:clamp(1.15rem,3.4vw,1.6rem);
  text-transform:uppercase;color:#fff;line-height:1.08;letter-spacing:.02em;
}
.verify-chip .sub{
  font-size:.78rem;letter-spacing:.06em;color:var(--txt-dim);font-weight:600;line-height:1.4;
}
.verify-chip .sub b{color:var(--cyan);font-weight:700}

.spark-float{position:absolute;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.sf1{width:8px;height:8px;top:6%;left:18%;animation:floaty 4s ease-in-out infinite}
.sf2{width:6px;height:6px;bottom:10%;right:14%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:floaty 5.2s ease-in-out .4s infinite}
.sf3{width:5px;height:5px;top:40%;right:4%;background:var(--violet);box-shadow:0 0 12px var(--violet);animation:floaty 6s ease-in-out .8s infinite}

/* ===========================================================================
   ACCESS TICKER (SEAMLESS marquee — access/reliability + brand slogans, NOT sports)
   Track holds items DUPLICATED back-to-back; translateX(0) -> -50% loops invisibly.
   =========================================================================== */
.ticker{
  position:relative;margin-top:34px;border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(34,211,238,.06),rgba(124,58,237,.06));
  overflow:hidden;
}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg-0),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg-0),transparent)}
.ticker .tag{
  position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:7px;
  padding:0 16px;background:var(--lime);color:#0b1305;font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;z-index:3;
}
.ticker .tag .live-dot{background:#0b1305;box-shadow:0 0 0 0 rgba(0,0,0,.4)}
/* SEAMLESS MARQUEE — the track holds EXACTLY TWO identical copies of the item set,
   back-to-back, and animates translateX(0) -> -50%. For the wrap to be invisible the
   track width MUST be EXACTLY 2× one copy, so spacing must be uniform across the whole
   track (including the boundary between copy 1's last item and copy 2's first item).
   - NO flex gap (a gap would add extra space only BETWEEN items, not after the last one,
     breaking the 2× width equality and landing -50% slightly off → a tiny jump).
   - Each .item carries its spacing as a uniform margin-right (incl. the last of each copy),
     and items have NO horizontal padding, so total width is precisely 2× one copy.
   - The CANLI tag clearance is a left MARGIN on the track. margin is NOT part of the
     element's border-box, so it does NOT enter the translateX(-50%) percentage math; it
     only offsets the start position by a constant, which never causes a wrap jump. */
.ticker-track{
  display:flex;width:max-content;will-change:transform;
  animation:marquee 38s linear infinite;padding:11px 0;margin-left:130px;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track .item{display:inline-flex;align-items:center;gap:9px;padding:0;margin-right:52px;font-size:.86rem;font-weight:600;color:var(--txt-dim);white-space:nowrap}
.ticker-track .item b{color:#fff}
.ticker-track .item .ok{color:var(--lime);font-weight:800}
.ticker-track .item .mv{color:var(--cyan);font-family:"Chakra Petch","Oswald",sans-serif;font-weight:700}
.ticker-track .item .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===========================================================================
   STAT STRIP — count-up (ACCESS / TRUST only)
   =========================================================================== */
.stats{padding-block:clamp(40px,5vw,64px)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{
  position:relative;text-align:center;padding:26px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.stat::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.18),transparent 70%);opacity:0;transition:opacity .3s var(--ease)}
.stat:hover{transform:translateY(-5px);border-color:var(--line-2)}
.stat:hover::after{opacity:1}
.stat .num{font-family:"Chakra Petch","Oswald",sans-serif;font-size:clamp(1.9rem,5vw,2.9rem);font-weight:700;color:#fff;text-shadow:0 0 18px rgba(34,211,238,.5);line-height:1}
.stat .num .pre,.stat .num .suf{color:var(--cyan)}
.stat:nth-child(2) .num{text-shadow:0 0 18px rgba(124,58,237,.55)}.stat:nth-child(2) .num .pre,.stat:nth-child(2) .num .suf{color:var(--violet)}
.stat:nth-child(3) .num{text-shadow:0 0 18px rgba(163,230,53,.5)}.stat:nth-child(3) .num .pre,.stat:nth-child(3) .num .suf{color:var(--lime)}
.stat:nth-child(4) .num{text-shadow:0 0 18px rgba(246,201,69,.5)}.stat:nth-child(4) .num .pre,.stat:nth-child(4) .num .suf{color:var(--gold)}
.stat .lbl{margin-top:10px;font-size:.84rem;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.1em;font-weight:600}

/* ===========================================================================
   GENERIC CARD GRID / FEATURE
   =========================================================================== */
.card{
  position:relative;border-radius:var(--r-lg);padding:26px;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  transform-style:preserve-3d;
}
.card.tilt:hover{box-shadow:0 30px 70px -30px rgba(34,211,238,.4);border-color:var(--line-2)}
.card .card-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(34,211,238,.14),transparent 60%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.card.tilt:hover .card-glow{opacity:1}

/* Explainer */
.explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.explain-card .ic-wrap{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(124,58,237,.18));border:1px solid var(--line-2)}
.explain-card .ic-wrap svg{width:26px;height:26px}
.explain-card h3{font-size:1.18rem;margin:0 0 8px;text-transform:uppercase;color:#fff}
.explain-card p{margin:0;color:var(--txt-dim);font-size:.96rem}

/* SIGNATURE: erisim / baglanti gucu paneli (access reliability, not odds).
   Premium signal panel — each row has a TRACK + a gradient FILL that animates from 0
   to its value on scroll-in, with the % counting up in sync and a moving sheen. */
.access-panel{
  margin-top:38px;border-radius:var(--r-xl);border:1px solid var(--line-2);overflow:hidden;
  position:relative;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(34,211,238,.1),transparent 55%),
    radial-gradient(120% 140% at 0% 100%,rgba(124,58,237,.12),transparent 55%),
    var(--surface-2);
  box-shadow:0 30px 80px -40px rgba(34,211,238,.4);
}
.access-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:20px 26px;border-bottom:1px solid var(--line)}
.access-head h3{margin:0;font-size:1.18rem;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:10px;letter-spacing:.02em}
.access-head .sig{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700;color:var(--lime);padding:6px 12px;border-radius:999px;background:rgba(163,230,53,.1);border:1px solid rgba(163,230,53,.3)}
.access-head .sig .bars{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.access-head .sig .bars i{width:4px;background:var(--lime);border-radius:1px;box-shadow:0 0 6px rgba(163,230,53,.6);animation:signalBar 1.4s ease-in-out infinite}
.access-head .sig .bars i:nth-child(1){height:35%;animation-delay:0s}
.access-head .sig .bars i:nth-child(2){height:60%;animation-delay:.15s}
.access-head .sig .bars i:nth-child(3){height:80%;animation-delay:.3s}
.access-head .sig .bars i:nth-child(4){height:100%;animation-delay:.45s}
@keyframes signalBar{0%,100%{transform:scaleY(.55);opacity:.65}50%{transform:scaleY(1);opacity:1}}
.access-body{padding:26px;display:grid;gap:22px}
.areliab{display:grid;grid-template-columns:200px 1fr 64px;align-items:center;gap:16px;column-gap:18px}
.areliab .name{font-size:.94rem;color:var(--txt);font-weight:600;display:flex;align-items:center;gap:9px}
.areliab .name::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:0 0 auto}
.areliab:nth-child(2) .name::before{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.areliab:nth-child(3) .name::before{background:var(--lime);box-shadow:0 0 8px var(--lime)}
.areliab:nth-child(4) .name::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.areliab .track{height:12px;border-radius:999px;background:rgba(120,150,200,.16);overflow:hidden;position:relative;border:1px solid rgba(120,150,200,.12)}
.areliab .fill{
  display:block;position:relative;height:100%;width:0;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,var(--cyan),var(--lime));
  box-shadow:0 0 16px rgba(34,211,238,.6);
  transition:width 1.1s var(--ease);
}
/* moving sheen sliding along the filled portion */
.areliab .fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-100%);
  animation:fillSheen 2.2s ease-in-out 1.1s infinite;
}
@keyframes fillSheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}
.areliab:nth-child(2) .fill{background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 16px rgba(124,58,237,.6)}
.areliab:nth-child(3) .fill{background:linear-gradient(90deg,var(--lime),var(--gold));box-shadow:0 0 16px rgba(163,230,53,.6)}
.areliab:nth-child(4) .fill{background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 16px rgba(34,211,238,.6)}
.areliab .pct{text-align:right;font-family:"Chakra Petch","Oswald",sans-serif;font-weight:700;color:#fff;font-size:1.08rem;text-shadow:0 0 14px rgba(34,211,238,.45);white-space:nowrap}
@media (max-width:560px){.areliab{grid-template-columns:1fr 64px;grid-template-areas:"name pct" "track track"}.areliab .name{grid-area:name}.areliab .pct{grid-area:pct}.areliab .track{grid-area:track}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;counter-reset:step}
.step{position:relative;padding:30px 26px 26px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:"Chakra Petch","Oswald",sans-serif;font-size:3.6rem;font-weight:700;line-height:1;
  position:absolute;top:14px;right:18px;color:transparent;
  -webkit-text-stroke:1.5px rgba(34,211,238,.4);opacity:.7;
}
.step .step-num{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:"Chakra Petch","Oswald",sans-serif;font-weight:700;font-size:1.2rem;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:#06121a;margin-bottom:16px;box-shadow:var(--glow-cyan);
}
.step h3{font-size:1.15rem;margin:0 0 8px;text-transform:uppercase;color:#fff}
.step p{margin:0;color:var(--txt-dim);font-size:.95rem}

/* Dual feature (Telegram + X) — dedicated section MAY keep its own buttons */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.feat{position:relative;padding:32px;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.feat .feat-bg{position:absolute;inset:0;opacity:.5;z-index:0}
.feat.tg .feat-bg{background:radial-gradient(420px circle at 80% 10%,rgba(41,169,235,.22),transparent 60%)}
.feat.x .feat-bg{background:radial-gradient(420px circle at 80% 10%,rgba(231,236,244,.12),transparent 60%)}
.feat>*{position:relative;z-index:1}
.feat .feat-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.feat .feat-ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto}
.feat.tg .feat-ic{background:linear-gradient(135deg,#29a9eb,#1c7fc0);box-shadow:0 0 24px rgba(41,169,235,.5)}
.feat.x .feat-ic{background:linear-gradient(135deg,#1a1d24,#2a2f3a);box-shadow:0 0 24px rgba(231,236,244,.18);border:1px solid var(--line-2)}
.feat h3{font-size:1.45rem;margin:0;text-transform:uppercase;color:#fff}
.feat .feat-handle{font-size:.85rem;color:var(--txt-mute);font-weight:600}
.feat p{color:var(--txt-dim);margin:0 0 20px}
.feat ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.feat li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--txt-dim)}
.feat li svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--lime)}

/* Checklist (sahte link) */
.check-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.check-col{padding:28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.check-col.good{border-color:rgba(163,230,53,.3);background:linear-gradient(160deg,rgba(163,230,53,.05),var(--surface))}
.check-col.bad{border-color:rgba(251,113,133,.3);background:linear-gradient(160deg,rgba(251,113,133,.05),var(--surface))}
.check-col h3{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:1.2rem;text-transform:uppercase}
.check-col.good h3{color:var(--lime)}.check-col.bad h3{color:var(--rose)}
.check-col ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.check-col li{display:flex;gap:12px;align-items:flex-start;color:var(--txt-dim);font-size:.95rem}
.check-col li .badge{width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.check-col.good .badge{background:rgba(163,230,53,.18);color:var(--lime)}
.check-col.bad .badge{background:rgba(251,113,133,.18);color:var(--rose)}

/* ===========================================================================
   POSTS GRID
   =========================================================================== */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.post-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.post-card:hover{transform:translateY(-7px);box-shadow:0 26px 60px -28px rgba(124,58,237,.5);border-color:var(--line-2)}
.post-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .post-thumb img{transform:scale(1.08)}
.post-thumb .thumb-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(163,230,53,.5),transparent 50%),
    linear-gradient(135deg,#1a1140,#06141f);
}
.post-thumb .thumb-fallback svg{width:46px;height:46px;color:rgba(255,255,255,.85);filter:drop-shadow(0 0 12px rgba(34,211,238,.6))}
.post-thumb .tagpill{position:absolute;top:12px;left:12px;z-index:2;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(6,8,15,.78);color:var(--cyan);border:1px solid rgba(34,211,238,.35)}
.post-body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-body h3{font-size:1.12rem;margin:0 0 10px;line-height:1.25;text-transform:none;color:#fff}
.post-body h3 a:hover{color:var(--cyan)}
.post-body p{margin:0 0 16px;color:var(--txt-dim);font-size:.92rem;flex:1}
.post-more{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);font-weight:700;font-size:.9rem;margin-top:auto}
.post-more svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.post-card:hover .post-more svg{transform:translateX(4px)}

/* Client-side pagination for the "Yazılar" grid (keeps the section compact as the
   panel injects more cards). JS hides .post-card not on the active page. */
.post-card.is-hidden{display:none}
.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:36px;
}
.pagination[hidden]{display:none}
.page-btn{
  min-width:42px;height:42px;padding:0 14px;border-radius:12px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:"Chakra Petch","Oswald",sans-serif;font-weight:600;font-size:.96rem;color:var(--txt-dim);
  background:rgba(20,28,48,.6);border:1px solid var(--line-2);
  transition:transform .18s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease);
}
.page-btn svg{width:15px;height:15px}
.page-btn:hover:not(:disabled){transform:translateY(-2px);color:#fff;border-color:var(--cyan);box-shadow:0 10px 26px -12px rgba(34,211,238,.55)}
.page-btn:disabled{opacity:.4;cursor:not-allowed}
.page-btn[aria-current="page"]{
  color:#06121a;border-color:transparent;cursor:default;
  background:linear-gradient(120deg,var(--cyan),var(--violet));
  box-shadow:0 0 0 1px rgba(34,211,238,.4),0 10px 28px -12px rgba(124,58,237,.7);
}
.page-ellipsis{min-width:24px;text-align:center;color:var(--txt-mute);font-weight:700;letter-spacing:.1em}

/* ===========================================================================
   FAQ ACCORDION
   =========================================================================== */
.faq-list{max-width:860px;margin:42px auto 0;display:grid;gap:16px}
.faq-item{
  position:relative;border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(20,28,48,.55),var(--surface));
  overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
/* signature left accent bar that lights up on hover / open */
.faq-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--violet));
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);
}
.faq-item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.faq-item:hover::before{transform:scaleY(1)}
.faq-item[open]{
  border-color:rgba(34,211,238,.45);
  background:linear-gradient(180deg,rgba(34,211,238,.06),var(--surface));
  box-shadow:0 18px 50px -28px rgba(34,211,238,.55),0 0 30px -12px rgba(124,58,237,.4);
}
.faq-item[open]::before{transform:scaleY(1)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 22px 20px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:"Chakra Petch","Oswald",sans-serif;font-size:1.08rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.01em;
  transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--cyan)}
.faq-item[open] summary{color:var(--cyan)}
/* +/- toggle: a "+" that rotates to "×" feel via two crossing bars */
.faq-item .chev{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;position:relative;display:grid;place-items:center;
  background:rgba(34,211,238,.12);border:1px solid var(--line-2);
  transition:transform .35s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.faq-item .chev svg{width:14px;height:14px;color:var(--cyan);transition:transform .35s var(--ease)}
.faq-item:hover .chev{background:rgba(34,211,238,.2)}
.faq-item[open] .chev,.faq-item.is-open .chev{
  transform:rotate(180deg);background:rgba(34,211,238,.28);box-shadow:0 0 16px -4px rgba(34,211,238,.7);
}
/* Animated open/close: grid-template-rows 0fr -> 1fr in both directions — no jump.
   .is-closing keeps [open] content mounted while we transition rows back to 0fr. */
.faq-answer{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.faq-item[open] .faq-answer{grid-template-rows:1fr}
.faq-item.is-closing .faq-answer{grid-template-rows:0fr}
.faq-answer>div{min-height:0;padding:0 26px}
.faq-item[open] .faq-answer>div{padding-bottom:22px}
.faq-item.is-closing .faq-answer>div{padding-bottom:0}
.faq-answer p{margin:0;color:var(--txt-dim);font-size:.97rem;line-height:1.7;border-top:1px solid var(--line);padding-top:16px}

/* ===========================================================================
   CTA BANNER (mid)
   =========================================================================== */
.cta-banner{margin-top:40px;position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(30px,5vw,52px);text-align:center;border:1px solid var(--line-2);background:linear-gradient(160deg,rgba(20,28,52,.9),rgba(10,14,26,.92))}
.cta-banner::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg at 50% 50%,rgba(34,211,238,.16),rgba(124,58,237,.16),rgba(163,230,53,.12),rgba(34,211,238,.16));animation:spin 24s linear infinite;z-index:0;opacity:.7}
.cta-banner>*{position:relative;z-index:1}
.cta-banner h2{font-size:clamp(1.5rem,4vw,2.3rem);margin:0 0 12px;text-transform:uppercase;text-shadow:0 0 24px rgba(34,211,238,.4)}
.cta-banner p{color:var(--txt-dim);max-width:50ch;margin:0 auto 24px}

/* ===========================================================================
   FOOTER — polished multi-column closing section
   =========================================================================== */
.site-footer{
  position:relative;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(34,211,238,.07),transparent 55%),
    linear-gradient(180deg,rgba(10,14,26,.4),rgba(6,8,15,.96));
  padding:0 0 26px;margin-top:60px;overflow:hidden;
}
/* subtle animated top divider/gradient */
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),var(--lime),transparent);
  background-size:200% 100%;opacity:.85;animation:footLine 9s linear infinite;
}
@keyframes footLine{from{background-position:0 0}to{background-position:200% 0}}
/* faint signature grid glow at the very top of the footer */
.site-footer::after{
  content:"";position:absolute;left:50%;top:-1px;width:min(640px,80%);height:2px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(34,211,238,.6),transparent 70%);filter:blur(2px);
}
.foot-inner{position:relative;padding-top:56px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.foot-brand .brand{margin-bottom:16px}
.foot-slogan{font-family:"Chakra Petch","Oswald",sans-serif;font-size:1.12rem;font-weight:600;color:#fff;text-transform:uppercase;margin:0 0 8px;line-height:1.25}
.foot-slogan .hl{
  background:linear-gradient(96deg,var(--cyan),var(--lime) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot-brand p{color:var(--txt-mute);font-size:.9rem;max-width:40ch;margin:0 0 18px;line-height:1.6}
.foot-trust{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--lime);font-weight:700}
.foot-trust svg{width:16px;height:16px}

.foot-col h4{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan);margin:0 0 16px;font-family:"Inter";
  display:inline-flex;align-items:center;gap:9px;
}
.foot-col h4::before{content:"";width:16px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);border-radius:2px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col a{
  position:relative;color:var(--txt-dim);font-size:.92rem;display:inline-flex;align-items:center;gap:8px;
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.foot-col a svg{width:14px;height:14px;opacity:.65;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.foot-col a::before{content:"";width:0;height:1px;background:var(--cyan);transition:width .25s var(--ease);box-shadow:0 0 8px var(--cyan)}
.foot-col a:hover{color:#fff;transform:translateX(2px)}
.foot-col a:hover::before{width:12px}
.foot-col a:hover svg{transform:translateX(2px);opacity:1}

/* Resmî Kanallar — tidy icon links */
.foot-channels{display:grid;gap:12px}
.foot-channel{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.foot-channel:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 14px 34px -18px rgba(34,211,238,.6)}
.foot-channel .ci{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.foot-channel.tg .ci{background:linear-gradient(135deg,#29a9eb,#1c7fc0);box-shadow:0 0 18px -4px rgba(41,169,235,.7)}
.foot-channel.x .ci{background:linear-gradient(135deg,#1a1d24,#2a2f3a);border:1px solid var(--line-2)}
.foot-channel .ci svg{width:18px;height:18px;color:#fff}
.foot-channel .ct{display:flex;flex-direction:column;line-height:1.2}
.foot-channel .ct b{font-size:.92rem;color:#fff;font-weight:700}
.foot-channel .ct span{font-size:.78rem;color:var(--txt-mute)}

.foot-bottom{
  position:relative;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;color:var(--txt-mute);font-size:.84rem;
}
.foot-bottom .fb-left{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.foot-bottom .fb-copy{color:var(--txt-dim);font-weight:600}
.foot-bottom .fb-disc{color:var(--txt-mute)}
.foot-bottom .age{display:inline-flex;align-items:center;gap:8px}
.foot-bottom .age .badge18{width:30px;height:30px;border-radius:50%;border:2px solid var(--rose);color:var(--rose);display:grid;place-items:center;font-weight:800;font-size:.78rem;flex:0 0 auto}

/* Back-to-top affordance */
.to-top{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:rgba(20,28,48,.6);border:1px solid var(--line-2);color:var(--txt-dim);
  font-size:.82rem;font-weight:700;cursor:pointer;
  transition:transform .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.to-top svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.to-top:hover{transform:translateY(-3px);border-color:var(--cyan);color:#fff;box-shadow:0 12px 30px -14px rgba(34,211,238,.6)}
.to-top:hover svg{transform:translateY(-2px)}

/* ===========================================================================
   SCROLL REVEAL
   =========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ===========================================================================
   EXTRA MOTION — tasteful, on-brand micro-interactions (transform/opacity only)
   =========================================================================== */
/* eyebrow label gets a soft glowing pulse on its leading dash */
.eyebrow::before{animation:eyebrowGlow 3.4s ease-in-out infinite}
@keyframes eyebrowGlow{0%,100%{opacity:.6;box-shadow:none}50%{opacity:1;box-shadow:0 0 10px rgba(34,211,238,.7)}}

/* hero badge gently floats */
.hero-badge{animation:badgeFloat 5s ease-in-out infinite}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* post cards: a diagonal light sweep crosses the thumb on hover */
.post-thumb::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .7s var(--ease);
}
.post-card:hover .post-thumb::after{transform:translateX(130%)}
.post-card .tagpill{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.post-card:hover .tagpill{transform:translateY(-2px);box-shadow:0 0 14px -2px rgba(34,211,238,.7)}

/* stat numbers breathe a touch of glow */
.stat .num{animation:numGlow 4.5s ease-in-out infinite}
@keyframes numGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}

/* explainer icon wrap subtle hover pop */
.explain-card .ic-wrap{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card.tilt:hover .ic-wrap{transform:translateY(-3px) rotate(-4deg);box-shadow:0 10px 26px -12px rgba(34,211,238,.6)}

/* step number badge spins its glow on hover */
.step .step-num{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover .step-num{transform:rotate(6deg) scale(1.06);box-shadow:0 0 24px rgba(34,211,238,.7)}

/* reveal-scale variant for hero/feature blocks */
.reveal.zoom{transform:translateY(28px) scale(.97)}
.reveal.zoom.in{transform:none}

/* progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--lime));box-shadow:0 0 12px rgba(34,211,238,.7);transition:width .1s linear}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-visual{max-width:340px}  /* mobilde başlık/CTA önce, radar altında (order:-1 kaldırıldı) */
  .explain-grid,.steps,.dual,.check-wrap,.posts-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-main{
    position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;
    background:rgba(6,8,15,.98);backdrop-filter:blur(14px);padding:14px;border-bottom:1px solid var(--line);
    max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 22px 44px -18px rgba(0,0,0,.75);
    transform:translateY(-10px);opacity:0;visibility:hidden;
    transition:transform .26s var(--ease),opacity .26s var(--ease);
  }
  .nav-main.open{transform:none;opacity:1;visibility:visible}
  .nav-toggle{display:flex}
  .hd-cta .label-full{display:none}
  .explain-grid,.steps,.dual,.check-wrap,.posts-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-ctas .btn{flex:1 1 auto}
}
@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr}
}

/* "Yazılar" is a NORMAL, CENTERED in-flow section: it uses the shared .container
   (same max-width / margin:auto as every other section). No fixed left sidebar. */
.posts-section .posts-head{text-align:center}

/* ===========================================================================
   REDUCED MOTION
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .reveal{opacity:1 !important;transform:none !important}
  .ticker-track{animation:none !important}
  .bg-mesh,.bg-grid,.bg-scan,.bg-circuit path{animation:none !important}
  html{scroll-behavior:auto}
}

/* ===========================================================================
   KART SİMGESİ (tek tip) + MOBİL KOMPAKT KART
   =========================================================================== */
/* Her yazı kartı AYNI tek simgeyi kullanır — kategori başına farklı simge yok. */
.post-thumb .thumb-fallback svg{display:none}
.post-thumb .thumb-fallback::after{
  content:"";width:46px;height:46px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9.5 13h5M9.5 16.5h5'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 12px rgba(34,211,238,.6));
}
/* Mobilde kartlar daha kompakt: thumb kısalır, başlık/metin küçülür */
@media (max-width:560px){
  .post-thumb{aspect-ratio:16/6}
  .post-thumb .thumb-fallback::after{width:34px;height:34px}
  .post-body{padding:16px 16px 18px}
  .post-body h3{font-size:1.02rem;margin-bottom:7px}
  .post-body p{font-size:.86rem;margin-bottom:13px}
  .posts-grid{gap:16px;margin-top:28px}
}

/* ===========================================================================
   ARTICLE / YAZILAR  —  Neon makale + "Yazılar" listing styles
   ---------------------------------------------------------------------------
   Self-contained, ADDITIVE block. Reuses the existing :root tokens and the
   landing's neon look (glow, gradients, glass surfaces). The numbered list
   (.steps) and the checklist are scoped under .prose so they never collide
   with the landing's own .steps grid. Article body kept ~760px wide, high
   line-height, neon accents on h2/links.
   =========================================================================== */

/* ---- Reading-progress bar (fx.js may inject .read-progress on article pages) ----
   Visual twin of the landing's .scroll-prog; both class names are supported so
   either markup hook works. */
.read-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--lime));
  box-shadow:0 0 12px rgba(34,211,238,.7);
  transition:width .1s linear;will-change:width;
}

/* ---- Listing hero ("Yazılar" index page) ---- */
.page-hero{
  position:relative;text-align:center;
  max-width:760px;margin-inline:auto;
  padding:clamp(34px,6vw,68px) 0 clamp(20px,3vw,30px);
}
.page-hero .eyebrow{justify-content:center}
.page-hero .eyebrow::before{display:none}
.page-hero h1{
  font-size:clamp(2rem,5.4vw,3.2rem);line-height:1.05;margin:6px 0 16px;
  text-transform:uppercase;font-weight:700;
  text-shadow:0 0 30px rgba(34,211,238,.32),0 0 60px rgba(124,58,237,.22);
}
.page-hero h1 .neon{
  background:linear-gradient(96deg,var(--cyan),var(--lime) 50%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(34,211,238,.45));
}
.page-hero p,.page-hero .lead{
  max-width:60ch;margin:0 auto;color:var(--txt-dim);font-size:1.04rem;
}

/* ---- Breadcrumb ---- */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:.84rem;color:var(--txt-mute);
  padding-top:clamp(20px,3vw,32px);margin-bottom:24px;
}
.crumb a{color:var(--txt-dim);font-weight:600;transition:color .2s var(--ease)}
.crumb a:hover{color:var(--cyan)}
.crumb .sep{color:var(--txt-mute);opacity:.7}
.crumb [aria-current="page"]{color:var(--cyan)}

/* ---- Article hero (single post header) ---- */
.article-hero{
  max-width:760px;margin-inline:auto;
  padding:clamp(22px,4vw,40px) 0 0;margin-bottom:26px;
}
.article-hero .eyebrow{margin-bottom:12px}
.article-hero h1{
  font-size:clamp(1.95rem,5.2vw,3.1rem);line-height:1.06;margin:6px 0 18px;
  text-transform:uppercase;font-weight:700;
  text-shadow:0 0 30px rgba(34,211,238,.32),0 0 60px rgba(124,58,237,.22);
}
.article-hero h1 .neon{
  background:linear-gradient(96deg,var(--cyan),var(--lime) 50%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(34,211,238,.45));
}

/* ---- Article meta (date · reading time · category) ---- */
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  font-size:.86rem;color:var(--txt-mute);
  padding-top:14px;border-top:1px solid var(--line);
}
.article-meta .mi{display:inline-flex;align-items:center;gap:7px}
.article-meta svg{width:16px;height:16px;color:var(--cyan);flex:0 0 auto}
.article-meta time{color:var(--lime);font-weight:700}
.article-meta .dotsep{width:4px;height:4px;border-radius:50%;background:var(--txt-mute);opacity:.6}

/* ===========================================================================
   PROSE BODY  —  readable measure (~760px), neon accents on h2 + links
   =========================================================================== */
.prose{
  max-width:760px;margin-inline:auto;
  color:var(--txt-dim);font-size:1.02rem;line-height:1.78;
}
.prose>section{padding:clamp(26px,4vw,42px) 0;border-bottom:1px solid var(--line)}
.prose>section:last-child{border-bottom:0}

.prose h2{
  font-size:clamp(1.45rem,3.4vw,2.05rem);line-height:1.14;
  margin:1.6em 0 .5em;text-transform:uppercase;font-weight:700;color:var(--txt);
  text-shadow:0 0 22px rgba(34,211,238,.26);
}
.prose>section>h2:first-child,.prose>h2:first-child{margin-top:0}
/* neon underline accent under each h2 */
.prose h2::after{
  content:"";display:block;width:84px;height:3px;border-radius:3px;margin-top:12px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),transparent);
  box-shadow:0 0 12px rgba(34,211,238,.5);
}
.prose h2 .neon,.prose h2 .hl{
  background:linear-gradient(96deg,var(--cyan),var(--lime) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 14px rgba(34,211,238,.32));
}
.prose h3{
  font-size:1.16rem;margin:1.5em 0 .45em;text-transform:uppercase;
  color:#fff;font-weight:700;
}
.prose p{margin:0 0 1.05em}
.prose p:last-child{margin-bottom:0}
.prose strong,.prose b{color:#fff;font-weight:700}
.prose em{color:var(--txt)}

/* lists */
.prose ul,.prose ol{margin:0 0 1.2em;padding:0;display:grid;gap:.6em}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:1.6em;color:var(--txt-dim)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  box-shadow:0 0 8px rgba(34,211,238,.7);
}
.prose ol{list-style:none;counter-reset:pli}
.prose ol li{position:relative;padding-left:2.1em;color:var(--txt-dim)}
.prose ol li::before{
  counter-increment:pli;content:counter(pli);
  position:absolute;left:0;top:.05em;
  width:1.5em;height:1.5em;border-radius:7px;
  display:grid;place-items:center;
  font-family:"Chakra Petch","Oswald",sans-serif;font-weight:700;font-size:.82em;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:#06121a;
  box-shadow:var(--glow-cyan);
}
.prose li>ul,.prose li>ol{margin:.6em 0 0}

/* inline links — neon underline that lights on hover */
.prose a{
  color:var(--cyan);font-weight:600;
  background-image:linear-gradient(90deg,var(--cyan),var(--violet));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  text-shadow:0 0 12px rgba(34,211,238,.25);
  transition:background-size .25s var(--ease),color .2s var(--ease);
}
.prose a:hover{color:#fff;background-size:100% 2px}

/* ---- Answer-box (answer-first callout) ---- */
.answer-box{
  position:relative;display:flex;gap:18px;align-items:flex-start;
  margin:0 0 1.4em;padding:24px 26px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line-2);
  box-shadow:0 24px 60px -34px rgba(34,211,238,.5);
}
.answer-box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at 0% 0%,rgba(34,211,238,.14),transparent 60%);
}
.answer-box>*{position:relative;z-index:1}
.answer-box .ab-ic{
  position:relative;flex:0 0 auto;width:50px;height:50px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(124,58,237,.2));
  border:1px solid var(--line-2);
}
.answer-box .ab-ic::before{
  content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--lime);
  opacity:0;animation:abPing 4s ease-out infinite;
}
@keyframes abPing{0%{transform:scale(.6);opacity:.85}80%{opacity:.1}100%{transform:scale(1.7);opacity:0}}
.answer-box .ab-ic svg{width:24px;height:24px;color:var(--cyan)}
.answer-box p{margin:0;color:var(--txt);font-size:1.02rem;line-height:1.7}
.answer-box b,.answer-box strong{color:#fff}
.answer-box .tagline{display:block;margin-top:.5em;color:var(--lime);font-weight:700}

/* ===========================================================================
   STEPS (numbered)  —  scoped to .prose so it never overrides the landing grid
   =========================================================================== */
.prose .steps{
  list-style:none;counter-reset:step;margin:1.2em 0 1.4em;padding:0;
  display:grid;gap:14px;grid-template-columns:1fr;
}
.prose .steps li{
  position:relative;padding:20px 22px 20px 70px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  color:var(--txt-dim);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.prose .steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:16px;top:16px;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  font-family:"Chakra Petch","Oswald",sans-serif;font-weight:700;font-size:1.2rem;
  background:linear-gradient(135deg,var(--cyan),var(--violet));color:#06121a;
  box-shadow:var(--glow-cyan);
}
.prose .steps li:hover{border-color:var(--line-2);box-shadow:0 16px 40px -26px rgba(34,211,238,.5)}
.prose .steps li strong,.prose .steps li b{display:block;color:#fff;margin-bottom:4px}
.prose .steps li p{margin:0;font-size:.97rem}

/* ===========================================================================
   CHECKLIST (✓)  —  lime "verified" callout
   =========================================================================== */
.checklist{
  margin:1.2em 0 1.4em;padding:24px 26px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(163,230,53,.06),var(--surface));
  border:1px solid rgba(163,230,53,.28);
}
.checklist h3{
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
  color:var(--lime);font-size:1.18rem;text-transform:uppercase;
}
.checklist h3 svg{width:22px;height:22px;color:var(--lime)}
.checklist ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checklist li{
  position:relative;display:flex;gap:12px;align-items:flex-start;
  padding-left:0;color:var(--txt-dim);font-size:.97rem;line-height:1.6;
}
/* neutralize the generic .prose bullet inside a checklist */
.prose .checklist li{padding-left:0}
.prose .checklist li::before{content:none}
.checklist li .ck{
  flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:rgba(163,230,53,.18);
}
.checklist li .ck svg{width:14px;height:14px;color:var(--lime)}
/* text-only checklist items (no .ck span) still get a ✓ marker */
.checklist li:not(:has(.ck))::before{
  content:"✓";position:static;flex:0 0 auto;width:24px;height:24px;border-radius:7px;margin:1px 0 0;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;line-height:1;
  background:rgba(163,230,53,.18);color:var(--lime);
}
/* checklist içindeki ✓ akış içinde dursun (mutlak konumlu prose madde imini ezme) */
.prose .checklist li{padding-left:0;display:flex;gap:12px;align-items:flex-start}
.prose .checklist li::before{position:static}
.prose .checklist li .ck{position:static}

/* ===========================================================================
   INLINE CTA  —  mid-article conversion card (landing button system)
   =========================================================================== */
.inline-cta{
  position:relative;margin:clamp(28px,4vw,44px) 0;border-radius:var(--r-xl);overflow:hidden;
  padding:clamp(26px,4vw,42px);text-align:center;border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(20,28,52,.9),rgba(10,14,26,.92));
}
.inline-cta::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.7;
  background:conic-gradient(from 0deg at 50% 50%,rgba(34,211,238,.16),rgba(124,58,237,.16),rgba(163,230,53,.12),rgba(34,211,238,.16));
  animation:spin 24s linear infinite;
}
.inline-cta>*{position:relative;z-index:1}
.inline-cta .cta-dot{
  width:14px;height:14px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 20px var(--lime);margin:0 auto 14px;animation:livePulse 1.8s ease-out infinite;
}
.inline-cta h2,.inline-cta h3{
  font-size:clamp(1.4rem,3.6vw,2rem);margin:0 0 12px;text-transform:uppercase;
  color:var(--txt);text-shadow:0 0 24px rgba(34,211,238,.4);
}
.inline-cta p{color:var(--txt-dim);max-width:54ch;margin:0 auto 22px;line-height:1.7}
.inline-cta .cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ===========================================================================
   RELATED  —  "İlgili Yazılar" grid at article foot
   =========================================================================== */
.related{padding:clamp(34px,5vw,52px) 0 0}
.related .related-head{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.related .related-head h2{
  font-size:clamp(1.4rem,3.2vw,2rem);margin:0;text-transform:uppercase;
  text-shadow:0 0 22px rgba(34,211,238,.26);
}
.related .related-head .rule{
  flex:1;min-width:60px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),transparent);
  box-shadow:0 0 12px rgba(34,211,238,.45);
}
.related .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* card — same neon glass treatment as the landing post cards */
.related .rel-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.related .rel-card:hover{transform:translateY(-7px);box-shadow:0 26px 60px -28px rgba(124,58,237,.5);border-color:var(--line-2)}
.related .rel-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#1a1140,#06141f);
}
.related .rel-thumb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 22% 24%,rgba(163,230,53,.4),transparent 52%),radial-gradient(circle at 80% 80%,rgba(34,211,238,.34),transparent 55%);
}
.related .rel-thumb svg{position:relative;z-index:1;width:44px;height:44px;color:rgba(255,255,255,.88);filter:drop-shadow(0 0 12px rgba(34,211,238,.6))}
.related .rel-thumb .ptag{
  position:absolute;top:12px;left:12px;z-index:2;font-size:.7rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:rgba(6,8,15,.78);color:var(--cyan);border:1px solid rgba(34,211,238,.35);
}
.related .rel-body{padding:20px;display:flex;flex-direction:column;flex:1}
.related .rel-body h3{font-size:1.08rem;margin:0 0 10px;line-height:1.28;text-transform:none;color:#fff}
.related .rel-body h3 a:hover{color:var(--cyan)}
.related .rel-body p{margin:0 0 16px;color:var(--txt-dim);font-size:.91rem;flex:1}
.related .rel-more{display:inline-flex;align-items:center;gap:7px;color:var(--cyan);font-weight:700;font-size:.9rem;margin-top:auto}
.related .rel-more svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.related .rel-card:hover .rel-more svg{transform:translateX(4px)}

/* ===========================================================================
   ARTICLE RESPONSIVE  —  follows the existing breakpoints' spirit
   =========================================================================== */
@media (max-width:900px){
  .related .related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .answer-box{flex-direction:column;gap:14px}
  .related .related-grid{grid-template-columns:1fr}
  .inline-cta .cta-actions .btn{flex:1 1 auto}
  .prose .steps li{padding:18px 18px 18px 64px}
}
@media (max-width:420px){
  .article-hero h1,.page-hero h1{font-size:clamp(1.7rem,8vw,2.2rem)}
}