@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap');

/* =========================
   Base / Reset
========================= */
*{ box-sizing:border-box; }
html, body{
  width:100%;
  margin:0;
  padding:0;
}
:root{
  --bg:#0a0f14;
  --bg2:#0f1822;
  --glass: rgba(13,19,28,.62);
  --glass2: rgba(15,24,36,.72);
  --line: rgba(255,255,255,.08);
  --txt: #e8eef4;
  --muted: rgba(232,238,244,.72);
  --accent: #6ee7ff;
  --accent2: #ffb86b;
  --accent3: #7cf29b;
  --hot1:#ef4444;
  --hot2:#f97316;
  --shadow: 0 22px 60px rgba(3,7,18,.45);
  --font-body: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body{
  font-family: var(--font-body);
  color: var(--txt);
  min-height:100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 720px at 10% 10%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 12%, rgba(255,184,107,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2) 50%, var(--bg));
  background-repeat:no-repeat;
  background-size:cover;
  overflow-x: hidden;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(transparent 96%, rgba(255,255,255,.04) 96%),
    linear-gradient(90deg, transparent 96%, rgba(255,255,255,.04) 96%);
  background-size: 34px 34px;
  opacity:.25;
  z-index:-1;
}

a{
  color: inherit;
}

/* =========================
   Home (index) legacy styles
   (BOZULMASIN diye koruyoruz)
========================= */
.shell-legacy{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background: var(--glass);
}

.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(110,231,255,.18);
  border:1px solid rgba(255,255,255,.12);
  font-size:20px;
}
.h1{font-weight:800; letter-spacing:.2px; font-family: var(--font-display);}
.sub{opacity:.75; font-size:12px; margin-top:2px}

.yt{
  color:#0c1824;
  text-decoration:none;
  font-weight:800;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(110,231,255,.35);
  background: linear-gradient(135deg, rgba(110,231,255,.85), rgba(255,184,107,.75));
  white-space:nowrap;
}

/* 🎥 YouTube / Videolu Anlatım Butonu */
.yt.video-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  color:#ffffff;
  background: linear-gradient(135deg, #ef4444, #f97316);
  border: 1px solid rgba(239,68,68,.65);
  box-shadow: 0 10px 32px rgba(239,68,68,.45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.yt.video-btn:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 16px 48px rgba(239,68,68,.65);
}

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 920px){ .grid{grid-template-columns:1fr 1fr;} }
@media (max-width: 600px){ .grid{grid-template-columns:1fr;} }

.card{
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  border-radius:22px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,24,36,.92), rgba(10,15,22,.92));
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:160px;
  transition: transform .12s ease, box-shadow .18s ease, border-color .12s ease;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  border-color: rgba(110,231,255,.35);
}
.card.cardFeatured{
  border-color: rgba(249,115,22,.42);
  background: linear-gradient(180deg, rgba(34,16,16,.94), rgba(10,15,22,.94));
  box-shadow: 0 18px 48px rgba(239,68,68,.18);
}
.card.cardFeatured:hover{
  border-color: rgba(255,184,107,.62);
  box-shadow: 0 24px 70px rgba(239,68,68,.28);
}
.card.cardDisabled{
  color:rgba(226,232,240,.58);
  border-color:rgba(148,163,184,.18);
  background:linear-gradient(180deg, rgba(31,41,55,.68), rgba(15,23,42,.68));
  box-shadow:none;
  filter:grayscale(.7);
}
.card.cardDisabled:hover{
  transform:none;
  box-shadow:none;
  border-color:rgba(148,163,184,.3);
}
.card.cardDisabled .tag{
  color:rgba(226,232,240,.74);
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.24);
}
.card.cardDisabled .title{
  color:rgba(226,232,240,.7);
  text-decoration:line-through;
  text-decoration-thickness:2px;
}
.card.cardDisabled .desc{
  color:rgba(226,232,240,.72);
  opacity:1;
}
.card.cardDisabled .go{
  color:rgba(248,113,113,.92);
}
.cornerNew{
  position:absolute;
  top:12px;
  right:12px;
  z-index:1;
  padding:4px 8px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(110,231,255,.96), rgba(34,211,238,.82));
  color:#06202a;
  border:1px solid rgba(190,246,255,.8);
  box-shadow: 0 0 0 rgba(110,231,255,.35), 0 10px 24px rgba(34,211,238,.18);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.3px;
  pointer-events:none;
  animation: cornerNewFloat 1.8s ease-in-out infinite;
}
@keyframes cornerNewFloat{
  0%, 100%{
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(110,231,255,.32), 0 10px 24px rgba(34,211,238,.18);
  }
  50%{
    transform: translateY(-4px);
    box-shadow: 0 0 0 6px rgba(110,231,255,0), 0 14px 30px rgba(34,211,238,.28);
  }
}
.cardTop .tag{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  background: rgba(110,231,255,.12);
  border:1px solid rgba(110,231,255,.25);
  color: #d7f7ff;
  opacity:.95;
  letter-spacing:.2px;
}
.cardTop .tag.newTag{
  background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(249,115,22,.24));
  border-color: rgba(249,115,22,.48);
  color:#fff4ea;
}
.cardTop .title{
  margin-top:10px;
  font-weight:800;
  letter-spacing:.2px;
  font-family: var(--font-display);
}
.cardTop .desc{
  margin-top:6px;
  font-size:12.5px;
  opacity:.78;
  line-height:1.45;
}
.go{
  margin-top:14px;
  font-weight:800;
  color:var(--accent);
}

.methodHero{
  margin-top:14px;
  padding:clamp(24px, 5vw, 42px) clamp(16px, 4vw, 34px);
  border-radius:18px;
  border:1px solid rgba(34,197,94,.48);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(34,197,94,.24), rgba(14,165,233,.14), rgba(2,6,23,.88)),
    rgba(2,6,23,.76);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  text-align:center;
}
.methodHero h1{
  margin:0;
  font-size:clamp(31px, 7vw, 56px);
  line-height:1.05;
  font-weight:950;
  color:#fff;
  font-family:var(--font-display);
  overflow-wrap:anywhere;
}
.methodHero p{
  max-width:900px;
  margin:18px auto 0 auto;
  font-size:clamp(17px, 2.4vw, 22px);
  line-height:1.62;
  font-weight:800;
  color:#e5e7eb;
}
.methodHero strong{ color:#bbf7d0; }
.methodActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
  justify-content:center;
}
.methodBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  padding:0 22px;
  border-radius:14px;
  font-size:clamp(16px, 2.3vw, 20px);
  line-height:1.2;
  font-weight:950;
  text-decoration:none;
  text-align:center;
}
.methodBtn.primary{
  flex:1 1 320px;
  max-width:620px;
  background:linear-gradient(135deg, #22c55e, #06b6d4);
  color:#02111f;
  box-shadow:0 16px 34px rgba(34,197,94,.28);
  animation:panelV3Callout 1.15s ease-in-out infinite;
  transform-origin:center;
  position:relative;
  overflow:hidden;
}
.methodBtn.primary::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-45%;
  width:38%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  transform:skewX(-18deg);
  animation:panelV3Shine 1.8s ease-in-out infinite;
}
.methodBtn.primary:hover{
  transform:translateY(-4px) scale(1.045);
  box-shadow:0 24px 56px rgba(34,197,94,.48);
}
@keyframes panelV3Callout{
  0%, 100%{
    transform:translateY(0) scale(1);
    box-shadow:0 16px 34px rgba(34,197,94,.28);
  }
  50%{
    transform:translateY(-7px) scale(1.06);
    box-shadow:0 30px 66px rgba(34,197,94,.54);
  }
}
@keyframes panelV3Shine{
  0%, 35%{ left:-45%; }
  70%, 100%{ left:115%; }
}
@media (prefers-reduced-motion: reduce){
  .methodBtn.primary,
  .methodBtn.primary::after{
    animation:none;
  }
}
@media (max-width: 520px){
  .methodHero{
    padding:24px 14px;
    border-radius:16px;
  }
  .methodHero h1{
    font-size:clamp(30px, 10vw, 40px);
  }
  .methodHero p{
    font-size:17px;
    line-height:1.58;
  }
  .methodBtn{
    width:100%;
    min-height:58px;
    padding:0 14px;
  }
}

.foot{
  margin-top:18px;
  opacity:.75;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.mini{opacity:.7}

/* =========================
   Preloader
========================= */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 10% 10%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(255,184,107,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--txt);
  font-family: inherit;
  transition: opacity .25s ease, visibility .25s ease;
}
.preloader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-inner{
  display: grid;
  gap: 22px;
  justify-items: center;
}
.bars{
  display: flex;
  gap: 14px;
  align-items: flex-end;
  height: 160px;
  filter: drop-shadow(0 18px 35px rgba(110,231,255,.25));
}
.bars span{
  width: 16px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6ee7ff, #ffb86b);
  animation: barBounce 1.1s ease-in-out infinite;
}
.bars span:nth-child(1){ animation-delay: 0.00s; }
.bars span:nth-child(2){ animation-delay: 0.10s; }
.bars span:nth-child(3){ animation-delay: 0.20s; }
.bars span:nth-child(4){ animation-delay: 0.30s; }
.bars span:nth-child(5){ animation-delay: 0.40s; }
.bars span:nth-child(6){ animation-delay: 0.50s; }

@keyframes barBounce{
  0%, 100% { transform: translateY(0); height: 45px; opacity: .95; }
  50%      { transform: translateY(-55px); height: 150px; opacity: 1; }
}
.loading-text{
  letter-spacing: .35em;
  font-weight: 800;
  font-size: 13px;
  opacity: .72;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce){
  .bars span{ animation: none; height: 110px; }
  .cornerNew{ animation:none; }
}

/* =========================
   Common (Inner Pages)
========================= */

/* .shell artık background BASMAZ, sadece layout */
.shell{
  width:100%;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.wrap{
  width:100%;
  max-width:1100px;
}

/* Header */
.siteHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border-radius:20px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.siteHeader .brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}
.siteHeader .mark{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  background: linear-gradient(135deg, rgba(110,231,255,.25), rgba(255,184,107,.18));
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.siteHeader .mark:hover{ transform: translateY(-1px); }
.siteHeader .mark:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.siteHeader .mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.siteHeader .name{
  font-weight:800;
  letter-spacing:.2px;
  font-size:14px;
  margin:0;
  font-family: var(--font-display);
}
.siteHeader .sub{
  font-size:11px;
  color: var(--muted);
  margin-top:2px;
  line-height:1.35;
}

/* Nav pills */
.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
  color: var(--txt);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  transition: transform .10s ease, box-shadow .12s ease, opacity .12s ease;
}
.pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  opacity:.98;
}
.pill.ghost{
  background: rgba(110,231,255,.10);
  border-color: rgba(110,231,255,.30);
  color: #d8f7ff;
}
.pill.hot{
  background: linear-gradient(135deg, var(--hot1), var(--hot2));
  border-color: rgba(239,68,68,.45);
  color:#fff;
  box-shadow: 0 14px 40px rgba(239,68,68,.28);
}
.pill.panelShortcut{
  position:relative;
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-color: rgba(255,184,107,.72);
  color:#fff;
  box-shadow: 0 14px 40px rgba(239,68,68,.34);
}
.pill.panelShortcut:hover{
  box-shadow: 0 18px 48px rgba(249,115,22,.46);
}
.pillNew{
  position:absolute;
  top:-10px;
  left:-15px;
  right:auto;
  min-width:49px;
  height:24px;
  padding:0 5px;
  border-radius:999px;
  background: linear-gradient(135deg, #fef08a, #f97316);
  border:1px solid rgba(255,244,186,.95);
  color:#241100;
  box-shadow: 0 7px 18px rgba(249,115,22,.30), 0 0 0 1px rgba(255,255,255,.14) inset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.35px;
  white-space:nowrap;
  pointer-events:none;
  transform: rotate(-28deg);
}
.pill.active{
  background: rgba(110,231,255,.18);
  border-color: rgba(110,231,255,.45);
  color:#d7f7ff;
  cursor: default;
}
.badge{
  font-size:10px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(229,231,235,.90);
}

/* Page card */
.pageCard{
  margin-top:14px;
  border-radius:22px;
  background: var(--glass2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding:18px;
}
.pageTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background: linear-gradient(120deg, rgba(110,231,255,.25), rgba(255,184,107,.12), rgba(0,0,0,0));
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.pageTitle h1{
  margin:0;
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
  font-family: var(--font-display);
}
.pageTitle .mini{
  font-size:11px;
  color: var(--muted);
  font-weight:700;
}

/* Content blocks */
.contentBox,
.content{
  margin-top:12px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,12,18,.65);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.contentTitle,
.content h2{
  font-weight:800;
  margin-bottom:8px;
  font-family: var(--font-display);
}
.p,
.content p,
.content li{
  margin:0;
  font-size:13.5px;
  line-height:1.65;
  opacity:.9;
}
.ol,
.content ul{
  margin:8px 0 0 18px;
  padding:0;
  font-size:13.5px;
  line-height:1.65;
  opacity:.9;
}
.faq{ display:grid; gap:10px; margin-top:10px; }
.qa{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size:12.5px;
  line-height:1.55;
  opacity:.92;
}

/* Notice */
.notice{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(239,68,68,.14), rgba(0,0,0,0));
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.notice .icon{ font-size:18px; line-height:1; margin-top:2px; }
.notice .text{ font-size:12px; line-height:1.5; opacity:.95; font-weight:800; }
.notice .text b{ color:#fecaca; }

/* Footer (inner pages) */
.siteFooter{
  width:100%;
  max-width:1100px;
  margin-top:14px;
  padding:14px 10px 6px 10px;
  color: rgba(229,231,235,.65);
  font-size:11px;
}
.siteFooter .links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.siteFooter a{
  color:#d8f7ff;
  text-decoration:none;
  font-weight:800;
  opacity:.9;
}
.siteFooter a:hover{ opacity:1; text-decoration:underline; }

.footLink{
  color: rgba(216,247,255,.95);
  text-decoration: none;
  font-weight: 800;
}
.footLink:hover{ text-decoration: underline; }
.dot{ opacity:.6; margin: 0 6px; }

.inlineLink,
.linkStrong{
  color:#d8f7ff;
  font-weight:800;
  text-decoration:none;
}
.inlineLink:hover,
.linkStrong:hover{ text-decoration: underline; }

/* =========================
   Home (new sections)
========================= */
.hero{
  margin-top:18px;
  padding:26px;
  border-radius:24px;
  border:1px solid var(--line);
  background: linear-gradient(120deg, rgba(110,231,255,.16), rgba(255,184,107,.12) 40%, rgba(15,24,36,.86) 70%);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:20px;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 300px at 85% 20%, rgba(124,242,155,.20), transparent 60%);
  opacity:.7;
  pointer-events:none;
}
.heroCopy{ position:relative; z-index:1; }
.eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  color:#d7f7ff;
  background: rgba(110,231,255,.12);
  border:1px solid rgba(110,231,255,.25);
}
.heroTitle{
  margin:12px 0 0 0;
  font-size:28px;
  line-height:1.15;
  font-weight:800;
  font-family: var(--font-display);
}
.heroLead{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.6;
  color: var(--muted);
}
.heroCta{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btnPrimary,
.btnGhost,
.btnVideo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  transition: transform .12s ease, box-shadow .18s ease, opacity .12s ease;
}
.btnPrimary{
  color:#08121a;
  background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(255,184,107,.9));
  box-shadow: 0 18px 40px rgba(110,231,255,.25);
  border:1px solid rgba(110,231,255,.35);
}
.btnPrimary:hover{ transform: translateY(-1px); }
.btnGhost{
  color: var(--txt);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.btnGhost:hover{ transform: translateY(-1px); }
.btnVideo{
  color:#fff;
  background: linear-gradient(135deg, var(--hot1), var(--hot2));
  border:1px solid rgba(239,68,68,.45);
  box-shadow: 0 14px 40px rgba(239,68,68,.25);
}
.btnVideo:hover{ transform: translateY(-1px); }

.heroMeta{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  color: var(--muted);
}
.metaItem{ display:flex; align-items:center; gap:8px; }
.metaDot{
  width:8px; height:8px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 10px rgba(110,231,255,.35);
}

.heroCard{
  position:relative;
  z-index:1;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(8,12,18,.68);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.heroCardTitle{
  font-weight:800;
  font-family: var(--font-display);
}
.heroSteps{
  margin:0 0 0 18px;
  padding:0;
  font-size:12.5px;
  line-height:1.6;
  opacity:.9;
}
.heroBadgeRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.heroBadge{
  font-size:10px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(110,231,255,.12);
  border:1px solid rgba(110,231,255,.25);
  color:#d7f7ff;
}
.heroBadge.isNew{
  background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(249,115,22,.20));
  border-color: rgba(249,115,22,.38);
  color:#fff4ea;
}

.sectionHead{
  margin-top:22px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(10,15,22,.65);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.sectionHead h2{
  margin:0;
  font-size:16px;
  font-weight:800;
  font-family: var(--font-display);
}
.sectionLead{
  margin-top:4px;
  font-size:12.5px;
  color: var(--muted);
}

.quickNav{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--glass2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.quickNavTitle{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color: var(--muted);
  text-transform: uppercase;
}

#tools{
  scroll-margin-top: 90px;
}

.toolsBar{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(8,12,18,.70);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.searchWrap{
  flex: 1 1 320px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.searchIcon{
  font-size:12px;
  opacity:.7;
}
.searchInput{
  flex:1;
  border:none;
  outline:none;
  background: transparent;
  color: var(--txt);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1px;
}
.searchInput::placeholder{ color: rgba(232,238,244,.55); }
.searchHint{
  font-size:10px;
  font-weight:700;
  color: rgba(232,238,244,.55);
  padding:4px 8px;
  border-radius:999px;
  border:1px dashed rgba(255,255,255,.16);
}
.quickLinks{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.quickNav .quickLinks{
  justify-content:flex-start;
}
.emptyState{
  margin-top:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-align:center;
  font-size:12.5px;
  color: var(--muted);
}

.linkStrong,
.inlineLink{
  color:#d8f7ff;
  font-weight:800;
  text-decoration:none;
}
.linkStrong:hover,
.inlineLink:hover{
  text-decoration:underline;
}

.articleMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 0;
  color: var(--muted);
  font-size:12px;
  font-weight:700;
}
.articleMeta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.cookiePanel{
  position:fixed;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:99999;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:center;
  max-width:980px;
  margin:0 auto;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,15,20,.96);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}
.cookieText{
  display:grid;
  gap:5px;
  font-size:12.5px;
  line-height:1.45;
  color: var(--muted);
}
.cookieText strong{
  color:var(--txt);
  font-size:14px;
  font-family: var(--font-display);
}
.cookiePolicyLink{
  color:#d8f7ff;
  font-weight:800;
  text-decoration:none;
}
.cookiePolicyLink:hover{ text-decoration:underline; }
.cookieActions,
.cookieOptions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.cookieOptions{
  grid-column:1 / -1;
  justify-content:flex-start;
}
.cookieOptions label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:800;
}
.cookieBtn,
.cookieSmallBtn{
  font:inherit;
  cursor:pointer;
}
.cookieBtn,
.cookieSmallBtn{
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:9px 12px;
  color:var(--txt);
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.08);
}
.cookieBtn.primary,
.cookieSmallBtn{
  color:#061018;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
}
.cookieBtn.secondary:hover,
.cookieSmallBtn:hover{
  transform:translateY(-1px);
}
.cookiePrefsBtn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:rgba(216,247,255,.95);
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  font-weight:800;
  text-decoration:none;
  vertical-align:baseline;
  cursor:pointer;
}
.cookiePrefsBtn:hover{ text-decoration:underline; }
.mediaConsentNotice{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  gap:12px;
  padding:18px;
  text-align:center;
  color:var(--txt);
  background:linear-gradient(180deg, rgba(10,15,20,.96), rgba(15,24,36,.96));
}
.mediaConsentNotice div{
  display:grid;
  gap:6px;
  max-width:440px;
}
.mediaConsentNotice strong{
  font-family:var(--font-display);
  font-size:15px;
}
.mediaConsentNotice span{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}
.videoWrap{ position:relative; }

/* =========================
   Pages.dev fallback notice
========================= */
body.pagesDevNoticeOpen{
  overflow:hidden;
}
.pagesDevNotice{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(3,7,18,.78);
  backdrop-filter:blur(12px);
}
.pagesDevNoticeBox{
  width:min(560px, 100%);
  display:grid;
  gap:18px;
  padding:26px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  color:var(--txt);
  background:
    linear-gradient(180deg, rgba(15,24,36,.98), rgba(10,15,20,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.62);
  text-align:center;
}
.pagesDevNoticeKicker{
  justify-self:center;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  color:#061018;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.pagesDevNoticeBox h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(20px, 4vw, 30px);
  line-height:1.22;
  letter-spacing:0;
}
.pagesDevNoticeActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.pagesDevNoticeBtn{
  appearance:none;
  -webkit-appearance:none;
  min-height:48px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  font-family:inherit;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
  color:var(--txt);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.pagesDevNoticeBtn.primary{
  color:#061018;
  border-color:transparent;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
}
.pagesDevNoticeBtn.secondary{
  background:rgba(255,255,255,.07);
}
.pagesDevNoticeBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.25);
}

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .siteHeader{ flex-direction:column; align-items:stretch; }
  .nav{ justify-content:flex-start; }
  .siteHeader .brand{ min-width:auto; }
}
@media (max-width: 720px){
  .pageTitle{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 620px){
  .hero{ padding:20px; }
  .heroTitle{ font-size:22px; }
  .sectionHead{ flex-direction:column; align-items:flex-start; }
  .toolsBar{ padding:10px; }
  .searchWrap{ flex:1 1 100%; }
  .searchHint{ display:none; }
  .cookiePanel{
    grid-template-columns:1fr;
    left:10px;
    right:10px;
    bottom:10px;
  }
  .cookieActions{ justify-content:flex-start; }
  .pagesDevNoticeBox{ padding:22px; }
  .pagesDevNoticeActions{ grid-template-columns:1fr; }
}