/* ============================================================
   LAJIVERTA ACADEMY — Code Quest açık dersleri
   Marka: site/assets/styles.css paleti; kod kutuları Code Quest'ten
   ============================================================ */

:root{
  --bg0:#050914; --bg1:#081020; --bg2:#0D1830; --bg3:#142244;
  --ink:#F4F0E4; --muted:#98A3BF;
  --gold:#D9B461; --gold-2:#EECB7C; --azure:#6FA0FF;
  --line:rgba(217,180,97,.16); --line-soft:rgba(152,163,191,.14);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Outfit",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --wrap:1160px; --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html,body{overflow-x:clip}
input,select,textarea{min-width:0}
html{scroll-behavior:smooth}
section[id],div[id^="kut-"]{scroll-margin-top:86px}
body{
  background:var(--bg1); color:var(--ink);
  font-family:var(--font-body); font-weight:300;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 80% -10%, #10203f 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 40%, #0a1428 0%, transparent 60%),
    var(--bg1);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
.wrap--narrow{max-width:860px}
::selection{background:rgba(217,180,97,.28)}
a{color:inherit}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:26px;
  padding:14px 30px;
  background:rgba(5,9,20,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.topbar__mark{width:34px; height:34px}
.topbar__name{font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:.01em}
.topbar__name em{font-style:normal; color:var(--gold-2)}
.topbar__nav{display:flex; gap:22px; margin-left:auto}
.topbar__nav a{
  text-decoration:none; font-size:14.5px; font-weight:400; color:var(--muted);
  transition:color .2s;
}
.topbar__nav a:hover{color:var(--ink)}
.topbar__cta{white-space:nowrap}

/* ---------- butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:999px;
  font-family:var(--font-body); font-weight:500; font-size:15px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn--lg{padding:15px 30px; font-size:16.5px}
.btn--gold{
  background:linear-gradient(135deg, var(--gold-2), #C79A45);
  color:#241a06; box-shadow:0 6px 24px rgba(217,180,97,.22);
}
.btn--gold:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(217,180,97,.32)}
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn--ghost:hover{border-color:var(--gold); transform:translateY(-2px)}

/* ---------- ortak bölüm başlıkları ---------- */
.eyebrow{
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:16px;
}
.section{padding:88px 0}
.section--alt{background:rgba(13,24,48,.45); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.section__head{max-width:660px; margin-bottom:44px}
.section__no{
  font-family:var(--mono); font-size:13px; color:var(--gold);
  display:block; margin-bottom:10px; letter-spacing:.14em;
}
.section__head h2{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.4vw,36px); line-height:1.2; margin-bottom:12px}
.section__head p{color:var(--muted)}

/* CSS-only giriş animasyonu (JS yok) */
.reveal{animation:acaReveal .7s ease both}
@keyframes acaReveal{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}

/* ---------- hero ---------- */
.hero{position:relative; padding:110px 0 84px; overflow:hidden}
.hero__glow{
  position:absolute; inset:-20% -10% auto; height:130%; pointer-events:none;
  background:
    radial-gradient(640px 420px at 72% 8%, rgba(111,160,255,.14), transparent 65%),
    radial-gradient(560px 380px at 22% 30%, rgba(238,203,124,.10), transparent 60%);
}
.hero__in{position:relative}
.hero__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px,5.6vw,58px); line-height:1.12; margin-bottom:22px;
}
.hero__title em{font-style:italic; color:var(--gold-2)}
.hero__sub{max-width:640px; color:var(--muted); font-size:18.5px; margin-bottom:30px}
.hero__sub b{color:var(--ink); font-weight:500}
.hero__act{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px}
.hero__free{
  display:inline-block; font-size:14.5px; color:#a7f3d0;
  background:rgba(6,46,34,.4); border:1px solid rgba(6,95,70,.6);
  border-radius:999px; padding:8px 16px;
}
.hero__free b{font-weight:600}

/* ---------- dünyalar ---------- */
.worlds{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.world{
  background:linear-gradient(180deg, rgba(20,34,68,.5), rgba(8,16,32,.65));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:24px 22px; position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.world:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--tc) 45%, transparent)}
.world::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg, var(--tc), transparent 85%); opacity:.8;
}
.world__icon{font-size:30px; display:block; margin-bottom:12px}
.world h3{font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:4px}
.world__tl{font-size:13.5px; color:var(--tc); margin-bottom:10px; font-weight:400}
.world__d{font-size:14.5px; color:var(--muted); margin-bottom:14px}
.world__n{font-family:var(--mono); font-size:12.5px; color:var(--gold); letter-spacing:.04em}
.worlds__soon{margin-top:26px; font-size:14.5px; color:var(--muted)}

/* ---------- indirme ---------- */
.dl{display:flex}
.dl__card{
  background:linear-gradient(180deg, rgba(20,34,68,.55), rgba(8,16,32,.7));
  border:1px solid var(--line); border-radius:18px;
  padding:32px 34px; max-width:560px;
  box-shadow:0 18px 50px rgba(3,6,14,.5);
}
.dl__card h3{font-family:var(--font-display); font-weight:600; font-size:24px; margin-bottom:16px}
.dl__v{font-family:var(--mono); font-size:13px; color:var(--muted); font-weight:400; margin-left:8px}
.dl__feats{list-style:none; margin-bottom:24px}
.dl__feats li{padding:7px 0 7px 26px; position:relative; font-size:15.5px; color:#cdd6ea}
.dl__feats li::before{content:"✦"; position:absolute; left:2px; color:var(--gold)}
.dl__note{margin-top:16px; font-size:13.5px; color:var(--muted); line-height:1.55}
.dl__note b{color:#cdd6ea; font-weight:500}

/* ---------- VIP ---------- */
.vip{
  display:grid; grid-template-columns:220px 1fr; gap:30px; align-items:start;
  background:linear-gradient(135deg, rgba(38,30,10,.5), rgba(13,24,48,.55));
  border:1px solid var(--line); border-radius:18px; padding:32px 34px;
}
.vip__price{text-align:center; padding:18px 10px; border-right:1px solid var(--line-soft)}
.vip__amount{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:52px; color:var(--gold-2); line-height:1;
  text-shadow:0 0 30px rgba(238,203,124,.35);
}
.vip__once{display:block; margin-top:10px; font-size:13px; color:var(--muted)}
.vip__feats{list-style:none; margin-bottom:18px}
.vip__feats li{padding:7px 0; font-size:15.5px; color:#cdd6ea}
.vip__feats b{color:var(--ink); font-weight:500}
.vip__how{grid-column:1/-1; border-top:1px solid var(--line-soft); padding-top:18px; display:grid; grid-template-columns:150px 1fr; gap:10px 30px; align-items:start}
.vip__how p{grid-column:2}
.vip__how h4{grid-row:1}
.vip__how p{max-width:760px}
.vip__how h4{font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:8px}
.vip__how p{font-size:14.5px; color:var(--muted)}
.vip__how b{color:var(--ink); font-weight:500}
.vip__how a{color:var(--gold-2)}

/* ---------- ders kütüphanesi ---------- */
.kut{
  border:1px solid var(--line-soft); border-radius:var(--radius);
  background:rgba(8,16,32,.5); padding:26px 28px; margin-bottom:22px;
}
.kut__head{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.kut__icon{font-size:30px}
.kut__head h3{font-family:var(--font-display); font-weight:600; font-size:21px}
.kut__head p{font-size:13.5px; color:var(--tc,var(--muted))}
.kut__n{margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--gold)}
.kut__ch h4{font-size:14.5px; font-weight:500; color:#cdd6ea; margin:14px 0 8px}
.kut__list{
  list-style:none; columns:2; column-gap:34px; margin-bottom:6px;
}
.kut__list li{break-inside:avoid; padding:4px 0}
.kut__list a{
  color:var(--muted); text-decoration:none; font-size:15px;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.kut__list a:hover{color:var(--gold-2); border-color:rgba(238,203,124,.4)}

/* ============================================================
   DERS SAYFASI
   ============================================================ */
.lesson{padding:56px 28px 40px}
.crumb{font-size:13.5px; color:var(--muted); margin-bottom:18px}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--gold-2)}
.crumb span{margin:0 6px; opacity:.5}
.lesson__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,4vw,40px); line-height:1.18; margin-bottom:10px;
}
.lesson__title code{font-size:.85em}
.lesson__tag{font-size:14.5px; color:var(--gold); margin-bottom:34px}
.lesson__body{font-size:16.5px}
.lesson__body p{margin:0 0 14px; color:#dbe2f2}
.lesson__body b{color:var(--ink); font-weight:500}
.lesson__body ul,.lesson__body ol{margin:0 0 14px 22px; color:#dbe2f2}
.lesson__body li{margin-bottom:6px}
code{
  font-family:var(--mono); font-size:.88em;
  background:rgba(20,34,68,.65); border:1px solid var(--line-soft);
  border-radius:6px; padding:1.5px 6px; color:#dceafe;
}

/* ---------- kod kutuları (Code Quest görünümü) ---------- */
.codebox{margin:0 0 14px; border:1px solid #24324f; border-radius:12px; overflow:hidden; background:#0a1122}
.codebox .cb-head{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; background:#0e1730;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:#7d8db1;
}
.cb-dots{display:flex; gap:5px}
.cb-dots i{width:9px; height:9px; border-radius:50%; display:block}
.cb-dots i:nth-child(1){background:#fb7185}.cb-dots i:nth-child(2){background:#fbbf24}.cb-dots i:nth-child(3){background:#34d399}
.codebox pre{padding:13px 16px; overflow-x:auto; font-family:var(--mono); font-size:13.5px; line-height:1.65; color:#dbe7ff}
.codebox pre code{background:none; border:none; padding:0; font-size:inherit; color:inherit}
.codebox.outbox{background:#07130d}
.codebox.outbox .cb-head{background:#0a1a12; color:#4ade80aa}
.codebox.outbox pre{color:#bbf7d0}

/* vurgu tonları */
.k{color:#c792ea; font-weight:600}
.s{color:#c3e88d}
.n{color:#f78c6c}
.c{color:#546e8f; font-style:italic}
.b{color:#82aaff}

/* SQL kutuları */
.codebox[data-lang="sql"]{background:#0f0a02; border-color:#4a3a12}
.codebox[data-lang="sql"] .cb-head{background:#1c1406; color:#fbbf24aa}
.codebox[data-lang="sql"] pre{color:#fde8b0}
.codebox.outbox[data-lang="sql"]{background:#120d03; border-color:#4a3a12}
.codebox.outbox[data-lang="sql"] .cb-head{background:#1c1406; color:#fbbf24aa}
.codebox.outbox[data-lang="sql"] pre{color:#fcd34d}

/* API / HTTP / JSON kutuları */
.codebox[data-lang="api"],.codebox[data-lang="http"],.codebox[data-lang="json"]{background:#0c0818; border-color:#3b2d6b}
.codebox[data-lang="api"] .cb-head,.codebox[data-lang="http"] .cb-head,.codebox[data-lang="json"] .cb-head{background:#160f2b; color:#a78bfaaa}
.codebox[data-lang="api"] pre,.codebox[data-lang="http"] pre,.codebox[data-lang="json"] pre{color:#e9e2ff}
.codebox.outbox[data-lang="api"],.codebox.outbox[data-lang="http"],.codebox.outbox[data-lang="json"]{background:#0d0819; border-color:#3b2d6b}
.codebox.outbox[data-lang="api"] .cb-head,.codebox.outbox[data-lang="http"] .cb-head,.codebox.outbox[data-lang="json"] .cb-head{background:#160f2b; color:#a78bfaaa}
.codebox.outbox[data-lang="api"] pre,.codebox.outbox[data-lang="http"] pre,.codebox.outbox[data-lang="json"] pre{color:#ddd6fe}
.w-req{color:#93c5fd; font-weight:700}
.w-req .w-m{color:#60a5fa}
.w-2xx{color:#6ee7b7; font-weight:700}
.w-3xx{color:#67e8f9; font-weight:700}
.w-4xx{color:#fdba74; font-weight:700}
.w-5xx{color:#fca5a5; font-weight:700}
.w-hung{color:#9ca3af; font-weight:700}
.w-log{color:#7dd3fc}

/* ipucu / uyarı */
.tip,.warn{border-radius:12px; padding:11px 14px; margin:0 0 14px; font-size:14.5px; line-height:1.6}
.tip{background:rgba(6,46,34,.35); border:1px solid #065f46; color:#a7f3d0}
.warn{background:rgba(63,18,32,.35); border:1px solid #7f1d3a; color:#fecdd3}
.tip code,.warn code{background:rgba(0,0,0,.5); border-color:rgba(0,0,0,.4)}
.tip b{color:#d1fae5}.warn b{color:#ffe4e6}

/* ---------- quiz ---------- */
.lesson-quiz{margin:44px 0 0; border-top:1px solid var(--line-soft); padding-top:30px}
.lesson-quiz h2{font-family:var(--font-display); font-weight:600; font-size:24px; margin-bottom:18px}
.qz{
  background:rgba(13,24,48,.5); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:16px;
}
.qz-q{font-size:16px; color:var(--ink); margin-bottom:12px}
.qz-opts{list-style:none; margin:0 0 12px}
.qz-opts li{
  padding:8px 14px; margin-bottom:7px;
  background:rgba(8,16,32,.6); border:1px solid var(--line-soft); border-radius:9px;
  font-size:14.5px;
}
.qz-code{
  font-family:var(--mono); font-size:13.5px; line-height:1.6;
  background:#0a1122; border:1px solid #24324f; border-radius:10px;
  padding:12px 15px; margin-bottom:12px; overflow-x:auto; color:#dbe7ff;
}
.qz-out{background:#07130d; border-color:#14532d55; color:#bbf7d0}
.qz-details summary{
  cursor:pointer; font-size:14px; font-weight:500; color:var(--gold-2);
  list-style:none; display:inline-block;
  border:1px solid var(--line); border-radius:999px; padding:7px 16px;
  transition:background .15s;
}
.qz-details summary::-webkit-details-marker{display:none}
.qz-details summary:hover{background:rgba(217,180,97,.08)}
.qz-details[open] summary{opacity:.6}
.qz-reveal{margin-top:14px; font-size:15px; color:#cdd6ea}
.qz-reveal p{margin-bottom:10px}
.qz-reveal b{color:var(--ink); font-weight:500}

/* ---------- CTA + gezinme ---------- */
.cta{
  margin:44px 0 0; display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
  background:linear-gradient(135deg, rgba(38,30,10,.45), rgba(13,24,48,.55));
  border:1px solid var(--line); border-radius:18px; padding:26px 30px;
}
.cta__txt h2{font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:8px}
.cta__txt p{font-size:14.5px; color:var(--muted)}
.cta__txt b{color:var(--ink); font-weight:500}
.cta__act{display:flex; flex-direction:column; gap:10px}
.lesson-nav{display:flex; justify-content:space-between; gap:16px; margin:34px 0 8px}
.lesson-nav__a{
  font-size:14.5px; color:var(--muted); text-decoration:none;
  border:1px solid var(--line-soft); border-radius:999px; padding:9px 18px;
  transition:color .15s, border-color .15s; max-width:46%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lesson-nav__a:hover{color:var(--gold-2); border-color:var(--gold)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-soft); padding:34px 0; margin-top:70px}
.footer__in{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--muted)}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--gold-2)}
.footer__note b{color:#cdd6ea; font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .topbar{gap:14px; padding:12px 18px}
  .topbar__nav{display:none}
  .vip{grid-template-columns:1fr; padding:26px 20px}
  .vip__price{border-right:none; border-bottom:1px solid var(--line-soft); padding-bottom:20px}
  .vip__how{grid-template-columns:1fr}
  .vip__how p, .vip__how form{grid-column:1}
  .kut__list{columns:1}
  .cta{grid-template-columns:1fr}
  .cta__act{flex-direction:row; flex-wrap:wrap}
  .lesson-nav__a{max-width:100%}
}
@media (max-width:420px){
  .topbar{padding:11px 14px; gap:10px}
  .topbar__name{font-size:16px}
  .topbar__cta{padding:9px 13px; font-size:13px}
}

/* ---------- Code Quest sipariş formu (satın al bölümü) ---------- */
.cq-order{display:grid; gap:12px; max-width:560px}
.cq-order__row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.q-input{
  font-family:"Outfit",-apple-system,sans-serif; font-size:15.5px; font-weight:300; color:var(--ink);
  background:rgba(13,24,48,.6); border:1px solid var(--line-soft); border-radius:10px;
  padding:12px 15px; outline:none; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.q-input::placeholder{color:rgba(152,163,191,.55)}
.q-input:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,180,97,.14)}
.q-input.is-bad{border-color:#E0596B; box-shadow:0 0 0 3px rgba(224,89,107,.12)}
.cq-order .btn{justify-self:start; border:none; cursor:pointer}
.cq-order__note{font-size:12.5px; color:var(--muted); line-height:1.6}
.cq-order__done{
  max-width:560px; padding:16px 18px; border-radius:10px;
  border:1px solid rgba(76,195,138,.35); background:rgba(76,195,138,.08);
  color:var(--ink); font-size:14.5px; line-height:1.6;
}
[hidden]{display:none !important}
@media (max-width:700px){ .cq-order__row{grid-template-columns:1fr} }