/* ============================================================
   KODA · AI ile Yazılım Geliştirme — Sunum
   Tasarım: "Mühendislik blueprint'i × canlı veri-viz"
   Model: sabit 16:9 sahne (1280×720 mantıksal tuval) → pencereye ölçeklenir
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#0a0a0c; --bg-2:#0f1013; --panel:#15161a; --panel-2:#1b1d22;
  --ink:#ECEAE2; --ink-soft:#c5c4ba; --ink-dim:#8b8b82; --ink-faint:#5d5d57;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
  --accent:#E2724E; --data:#54C7C0; --warn:#E6A94B; --ok:#84C16A; --violet:#9A86E8; --pink:#E07A9E;
  --glow:var(--accent);
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --radius:16px; --radius-s:10px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
#stage[data-chapter="A"]{ --glow:var(--accent); }
#stage[data-chapter="B"]{ --glow:var(--data); }
#stage[data-chapter="C"]{ --glow:var(--warn); }
#stage[data-chapter="D"]{ --glow:var(--violet); }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; width:100%; }
body{
  background:#000; color:var(--ink); font-family:var(--font-body);
  font-size:18px; line-height:1.5; overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------- Sahne (16:9, ölçeklenir) ---------- */
#stage{
  position:absolute; top:0; left:0; width:1280px; height:720px;
  transform-origin:top left; background:var(--bg); overflow:hidden;
  box-shadow:0 0 120px rgba(0,0,0,.8);
}

/* ---------- Atmosfer ---------- */
.bg-atmos{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 80% -12%, color-mix(in srgb,var(--glow) 17%,transparent), transparent 60%),
    radial-gradient(700px 560px at -8% 110%, color-mix(in srgb,var(--glow) 9%,transparent), transparent 55%),
    var(--bg);
  transition:background .8s var(--ease); }
.bg-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 62% 42%,#000 0%,transparent 78%); mask-image:radial-gradient(circle at 62% 42%,#000 0%,transparent 78%); }
.bg-grain{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============================================================ Deck & Slaytlar */
.deck{ position:absolute; inset:0; z-index:1; }
.slide{
  position:absolute; inset:0; display:none;
  padding:64px 92px 52px; align-items:center; justify-content:flex-start;
  opacity:0;
}
.slide.is-active{ display:flex; animation:slideIn .5s var(--ease-out) both; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(12px) scale(.994);} to{ opacity:1; transform:none; } }
.slide.is-leaving{ display:flex; animation:slideOut .28s var(--ease) both; }
@keyframes slideOut{ to{ opacity:0; transform:translateY(-8px) scale(.99);} }
.slide-inner{ width:100%; max-width:1096px; }
.slide.center-x{ justify-content:center; }

/* ---------- Tipografi ---------- */
.kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--glow); display:inline-flex; align-items:center; gap:.6em; margin-bottom:14px; }
.kicker::before{ content:""; width:26px; height:1px; background:var(--glow); }
.kicker .muted{ color:var(--ink-faint); }

.slide-h{ font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.02em; font-size:52px; margin-bottom:8px; }
.slide-h.lg{ font-size:72px; }
.slide-h.sm{ font-size:40px; }
.slide-h .hl{ color:var(--glow); }
.slide-h em{ font-style:italic; color:var(--ink-soft); font-weight:400; }

.slide-lede{ font-size:20px; color:var(--ink-soft); max-width:62ch; line-height:1.45; }
.slide-lede strong{ color:var(--ink); font-weight:600; }
.slide-lede.sm{ font-size:17px; }

.eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px; }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(14px); }
.slide.is-active [data-reveal]{ animation:reveal .55s var(--ease-out) forwards; animation-delay:calc(var(--d,0)*80ms + 100ms); }
@keyframes reveal{ to{ opacity:1; transform:none; } }

/* ---------- Grid ---------- */
.grid{ display:grid; gap:13px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.split.wide-r{ grid-template-columns:.82fr 1.18fr; }
.mt-1{ margin-top:8px; } .mt-2{ margin-top:16px; } .mt-3{ margin-top:24px; } .mt-4{ margin-top:32px; }

/* ---------- Kartlar ---------- */
.card{ background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; position:relative; transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease); }
.card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--glow) 40%,var(--line)); box-shadow:0 18px 46px -28px var(--glow); }
.card--accent{ border-color:color-mix(in srgb,var(--glow) 35%,var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 8%,var(--panel)),var(--bg-2)); }
.card--flat{ background:var(--panel); }
.card-num{ font-family:var(--font-mono); font-size:12px; color:var(--glow); opacity:.85; }
.card-ico{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:11px; background:color-mix(in srgb,var(--glow) 14%,transparent); color:var(--glow); }
.card-ico svg{ width:21px; height:21px; }
.card h3{ font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.01em; margin-bottom:5px; }
.card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.5; }
.card p strong{ color:var(--ink-soft); }
.card .tag{ position:absolute; top:15px; right:15px; }

/* ---------- chip ---------- */
.chip{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em;
  padding:.32em .7em; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); background:var(--panel); }
.chip--accent{ color:var(--glow); border-color:color-mix(in srgb,var(--glow) 45%,transparent); background:color-mix(in srgb,var(--glow) 10%,transparent); }
.chip--ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent); }
.chip--warn{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent); }
.chip--data{ color:var(--data); border-color:color-mix(in srgb,var(--data) 40%,transparent); }
.chip--violet{ color:var(--violet); border-color:color-mix(in srgb,var(--violet) 40%,transparent); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Callout ---------- */
.callout{ border-left:3px solid var(--glow); background:color-mix(in srgb,var(--glow) 7%,var(--panel));
  border-radius:0 var(--radius-s) var(--radius-s) 0; padding:13px 17px; font-size:15px; color:var(--ink-soft); }
.callout strong{ color:var(--ink); }
.callout--warn{ --glow:var(--warn); } .callout--ok{ --glow:var(--ok); } .callout--key{ --glow:var(--accent); } .callout--data{ --glow:var(--data); }
.callout .lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--glow); display:block; margin-bottom:4px; }

/* ---------- Akış ---------- */
.flow{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.flow-step{ flex:1 1 0; min-width:110px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-s); padding:13px 15px; position:relative; }
.flow-step .n{ font-family:var(--font-mono); font-size:11px; color:var(--glow); }
.flow-step h4{ font-family:var(--font-display); font-size:16px; font-weight:600; margin:3px 0; }
.flow-step p{ font-size:13px; color:var(--ink-dim); line-height:1.4; }
.flow-arrow{ align-self:center; color:var(--ink-faint); padding:0 9px; font-size:19px; }

/* ---------- Stat ---------- */
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat .v{ font-family:var(--font-display); font-weight:800; font-size:46px; letter-spacing:-.03em; line-height:1; color:var(--glow); }
.stat .l{ font-size:13.5px; color:var(--ink-dim); }

/* ---------- Liste ---------- */
.ulist{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.ulist li{ position:relative; padding-left:1.5em; color:var(--ink-soft); font-size:15.5px; line-height:1.45; }
.ulist li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:2px; background:var(--glow); }
.ulist li strong{ color:var(--ink); }
.ulist.tight li{ font-size:14.5px; }

.kbd{ font-family:var(--font-mono); font-size:12.5px; padding:.15em .5em; border-radius:6px; border:1px solid var(--line); border-bottom-width:2px; background:var(--panel-2); color:var(--ink-soft); }

.viz-host{ width:100%; }

/* ---------- Bölüm ayraç ---------- */
.chapter{ justify-content:flex-start; }
.chapter .big-letter{ font-family:var(--font-display); font-weight:800; font-size:340px; line-height:.8; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:2px color-mix(in srgb,var(--glow) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 22%,transparent),transparent); -webkit-background-clip:text; background-clip:text;
  position:absolute; right:60px; bottom:-30px; z-index:0; opacity:.85; pointer-events:none; }
.chapter .chapter-list{ display:flex; flex-direction:column; gap:6px; margin-top:22px; position:relative; z-index:1; }
.chapter .chapter-list span{ font-family:var(--font-mono); font-size:15px; color:var(--ink-dim); display:flex; gap:14px; align-items:baseline; }
.chapter .chapter-list b{ color:var(--glow); min-width:54px; display:inline-block; }

/* ============================================================ Kabuk */
.progress{ position:absolute; top:0; left:0; height:3px; background:var(--glow); z-index:50; width:0; transition:width .4s var(--ease); box-shadow:0 0 14px var(--glow); }
.topbar{ position:absolute; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between; align-items:center; padding:20px 30px; pointer-events:none; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; color:var(--ink-dim); }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--glow); box-shadow:0 0 12px var(--glow); transition:background .6s; }
.brand b{ color:var(--ink-soft); letter-spacing:.16em; }
.counter{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim); }
.counter b{ color:var(--ink); font-size:17px; }

.controls{ position:absolute; bottom:18px; right:26px; z-index:40; display:flex; gap:8px; }
.ctrl{ width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 80%,transparent);
  color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px); transition:.25s var(--ease); }
.ctrl:hover{ border-color:var(--glow); color:var(--glow); transform:translateY(-2px); }
.ctrl svg{ width:17px; height:17px; }

.hint{ position:absolute; bottom:22px; left:30px; z-index:40; font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); display:flex; gap:.7rem; align-items:center; transition:opacity .5s; }
.hint.fade{ opacity:0; }

.rail{ position:absolute; left:20px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:13px; }
.rail button{ all:unset; cursor:pointer; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); display:flex; align-items:center; gap:.55rem; transition:.25s var(--ease); }
.rail button .bar{ width:16px; height:2px; background:var(--ink-faint); border-radius:2px; transition:.25s var(--ease); }
.rail button.on{ color:var(--ink); } .rail button.on .bar{ width:30px; background:var(--glow); box-shadow:0 0 8px var(--glow); }
.rail button:hover{ color:var(--ink-soft); }

.mono{ font-family:var(--font-mono); } .dim{ color:var(--ink-dim); } .nowrap{ white-space:nowrap; } .center{ text-align:center; }
.divider{ height:1px; background:var(--line); border:0; margin:18px 0; }

@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; } }