/* =====================================================================
   Tazeyo! — Haziran '26 Yatırımcı Sunumu (HTML deck)
   Built on the Tazeyo design system tokens (brand/colors_and_type.css).
   16:9 slides, 1280×720 design canvas, scaled to fit the viewport.
   ===================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-sans);
  background:#04282b;            /* darker than ink-900 so slides pop */
  color:var(--fg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Stage / scaling ---------- */
.deck{ position:fixed; inset:0; }
.stage{
  position:absolute; top:50%; left:50%;
  width:1280px; height:720px;
  transform:translate(-50%,-50%) scale(var(--scale,1));
  transform-origin:center center;
}
.slide{
  position:absolute; inset:0;
  width:1280px; height:720px;
  overflow:hidden;
  opacity:0; visibility:hidden;
  background:var(--bg);
  transition:opacity .42s ease;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide.dark{ background:var(--ink-900); color:var(--fg-on-dark); }

/* ---------- Slide chrome ---------- */
.brandmark{ position:absolute; top:46px; left:56px; height:34px; z-index:6; }
.brandmark img{ height:100%; display:block; }
.page-title{
  position:absolute; top:42px; right:60px; z-index:6;
  font:var(--fw-extra) var(--text-5xl)/1 var(--font-sans);
  letter-spacing:var(--tracking-tight);
  color:var(--ink-900);
}
.dark .page-title{ color:var(--tz-white); }
.foot{
  position:absolute; right:56px; bottom:34px; z-index:6;
  font:var(--fw-medium) 14px/1 var(--font-sans);
  color:var(--fg-subtle); font-style:italic;
}
.dark .foot{ color:var(--ink-300); }

/* ---------- Decorative: organic blobs ---------- */
.blob{ position:absolute; z-index:0; pointer-events:none; }
.blob-kiwi{ background:var(--tz-kiwi); }
.blob-kiwi-d{ background:var(--kiwi-500); }
.blob-ink{ background:var(--ink-800); }
.blob-ink-deep{ background:#04282b; }

/* organic shape presets */
.shape-a{ border-radius:62% 38% 47% 53% / 58% 42% 58% 42%; }
.shape-b{ border-radius:42% 58% 63% 37% / 49% 56% 44% 51%; }
.shape-c{ border-radius:50% 50% 46% 54% / 56% 47% 53% 44%; }

/* ---------- Decorative: radar / concentric rings ---------- */
.rings{ position:absolute; z-index:1; pointer-events:none; color:var(--tz-kiwi); }
.rings svg{ display:block; width:100%; height:100%; }
.rings circle{ fill:none; stroke:currentColor; }

/* big watermark amblem */
.amblem-wm{ position:absolute; z-index:0; opacity:.06; pointer-events:none; }
.amblem-wm img{ width:100%; display:block; }

/* ===================================================================
   1 — Title
   =================================================================== */
.s-title .copy{ position:absolute; left:80px; top:218px; z-index:4; max-width:760px; }
.s-title .eyebrow{
  font:var(--fw-bold) 16px/1 var(--font-sans);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--tz-kiwi); margin:0 0 22px;
}
.s-title h1{
  margin:0; color:var(--tz-white);
  font:var(--fw-extra) 92px/.96 var(--font-sans);
  letter-spacing:var(--tracking-tight);
}
.s-title h1 .em{ color:var(--tz-kiwi); }
.s-title .sub{
  margin:26px 0 0; max-width:560px;
  font:var(--fw-medium) 21px/1.5 var(--font-sans);
  color:var(--ink-200);
}
.s-title .wordmark{ position:absolute; left:80px; top:120px; height:40px; z-index:5; }
.s-title .proof{ display:flex; gap:46px; margin:42px 0 0; }
.s-title .proof div{
  font:var(--fw-semibold) 15px/1.3 var(--font-sans); color:var(--ink-200);
  border-left:2px solid rgba(162,233,108,.5); padding-left:16px;
}
.s-title .proof b{
  display:block; margin-bottom:4px;
  font:var(--fw-extra) 30px/1 var(--font-sans); letter-spacing:var(--tracking-tight);
  color:var(--tz-kiwi); font-feature-settings:"tnum" 1;
}

/* ===================================================================
   2 — Satış rakamlarımız (dark compare grid)
   =================================================================== */
.s-stats .head{ position:absolute; left:80px; top:84px; z-index:4; }
.s-stats .head .e{
  font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--tz-kiwi); margin:0 0 14px;
}
.s-stats .col-h .up{
  margin-left:8px; color:var(--tz-kiwi);
  font:var(--fw-extra) 12px/1 var(--font-sans); letter-spacing:var(--tracking-snug);
}
.s-stats h2{
  margin:0; color:var(--tz-white);
  font:var(--fw-extra) 60px/1 var(--font-sans); letter-spacing:var(--tracking-tight);
}
.s-stats .date{
  margin:16px 0 0; font:var(--fw-semibold) 20px/1 var(--font-sans);
  color:var(--tz-kiwi);
}
.stat-grid{
  position:absolute; left:80px; right:80px; top:222px; z-index:4;
  display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:22px;
}
/* hedefe ilerleme strip */
.goal-prog{ position:absolute; left:80px; right:80px; top:582px; z-index:4; }
.gp-h{
  font:var(--fw-bold) 13px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--ink-300); margin:0 0 14px;
}
.gp-h span{ color:var(--ink-300); font-weight:var(--fw-semibold); text-transform:none; letter-spacing:0; opacity:.8; }
.gp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.pg-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.pg-k{ font:var(--fw-bold) 16px/1 var(--font-sans); color:var(--tz-white); }
.pg-now{ font:var(--fw-extra) 20px/1 var(--font-sans); color:var(--tz-kiwi); font-feature-settings:"tnum" 1; }
.pg-goal{ font:var(--fw-semibold) 14px/1 var(--font-sans); color:var(--ink-300); margin-left:5px; }
.pg-track{ height:9px; border-radius:var(--radius-pill); background:rgba(255,255,255,.09); overflow:hidden; }
.pg-fill{ height:100%; border-radius:var(--radius-pill); background:var(--tz-kiwi); min-width:8px; }
.pg-note{ margin-top:9px; font:var(--fw-medium) 12px/1.2 var(--font-sans); color:var(--ink-300); }
.pg-note b{ color:var(--tz-kiwi); font-weight:var(--fw-bold); }
.stat-grid .col-h{
  font:var(--fw-bold) 13px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--ink-300); padding:0 0 4px;
}
.stat-card{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-dark);
  border-radius:var(--radius-lg);
  padding:26px 28px;
}
.stat-card.kiwi{ background:var(--tz-kiwi); border-color:transparent; }
.stat-card .label{
  font:var(--fw-semibold) 15px/1 var(--font-sans);
  color:var(--ink-300); margin:0 0 14px;
}
.stat-card.kiwi .label{ color:var(--ink-800); }
.stat-card .num{
  font:var(--fw-extra) 46px/1 var(--font-sans); letter-spacing:var(--tracking-tight);
  color:var(--tz-white); font-feature-settings:"tnum" 1;
}
.stat-card.kiwi .num{ color:var(--ink-900); }
.stat-card .unit{ font-size:24px; font-weight:var(--fw-bold); margin-left:4px; }
.row-label{
  display:flex; align-items:center;
  font:var(--fw-bold) 19px/1.1 var(--font-sans); color:var(--tz-white);
  letter-spacing:var(--tracking-snug);
}
.row-label .dot{ width:12px; height:12px; border-radius:50%; background:var(--tz-kiwi); margin-right:12px; flex:none; }

/* ===================================================================
   3 — Yeni mağazalarımız
   =================================================================== */
.s-stores .lead{ position:absolute; left:80px; top:150px; z-index:4; max-width:430px; }
.s-stores .lead p.big-stat{
  font:var(--fw-extra) 76px/.98 var(--font-sans); letter-spacing:var(--tracking-tight);
  color:var(--ink-900); margin:0;
}
.s-stores .big-stat em{ color:var(--kiwi-500); font-style:normal; }
.s-stores .lead h3{
  margin:18px 0 0; font:var(--fw-bold) 28px/1.1 var(--font-sans);
  letter-spacing:var(--tracking-snug); color:var(--ink-700);
}
.s-stores .lead p{
  margin:18px 0 0; font:var(--fw-medium) 17px/1.5 var(--font-sans); color:var(--fg-muted);
  max-width:380px;
}
.store-list{
  position:absolute; right:80px; top:150px; width:560px; z-index:4;
  display:flex; flex-direction:column; gap:14px;
}
.city-group{ background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:20px 24px; display:flex; align-items:center; gap:20px; }
.city-name{
  flex:none; width:96px; font:var(--fw-extra) 22px/1 var(--font-sans);
  letter-spacing:var(--tracking-snug); color:var(--ink-900);
}
.city-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  font:var(--fw-semibold) 16px/1 var(--font-sans);
  background:var(--kiwi-100); color:var(--kiwi-800);
  padding:9px 16px; border-radius:var(--radius-pill);
}

/* ===================================================================
   4 — KPI's table
   =================================================================== */
.s-kpi .lead{ position:absolute; left:64px; top:236px; width:330px; z-index:4; }
.s-kpi .lead p.e{ font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--kiwi-600); margin:0 0 18px; }
.s-kpi .lead p{ margin:0 0 20px; font:var(--fw-bold) 26px/1.32 var(--font-sans);
  letter-spacing:var(--tracking-snug); color:var(--ink-900); }
.s-kpi .lead p .hl{ background:linear-gradient(transparent 60%, var(--kiwi-200) 60%); }
.s-kpi .lead p.sub{ font:var(--fw-medium) 16px/1.5 var(--font-sans); color:var(--fg-muted); }
.s-kpi .lead p.sub b{ color:var(--kiwi-600); font-weight:var(--fw-extra); }
.s-kpi .wins{ display:flex; flex-direction:column; gap:12px; margin:0 0 22px; }
.s-kpi .win{
  display:flex; align-items:baseline; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--tz-kiwi);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:14px 18px;
}
.s-kpi .win .v{
  font:var(--fw-extra) 34px/1 var(--font-sans); letter-spacing:var(--tracking-tight);
  color:var(--kiwi-600); font-feature-settings:"tnum" 1;
}
.s-kpi .win .k{ font:var(--fw-bold) 16px/1.1 var(--font-sans); color:var(--ink-800); }
.kpi-table{
  position:absolute; right:60px; top:150px; width:740px; z-index:4;
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md);
  font-feature-settings:"tnum" 1;
}
.kpi-table table{ width:100%; border-collapse:collapse; background:var(--surface); }
.kpi-table thead th{
  background:var(--ink-900); color:var(--tz-white);
  font:var(--fw-bold) 17px/1 var(--font-sans); text-align:center; padding:18px 16px;
}
.kpi-table thead th:first-child{ text-align:left; }
.kpi-table td{
  padding:13px 16px; text-align:center; font:var(--fw-medium) 16px/1 var(--font-sans);
  color:var(--ink-800); border-bottom:1px solid var(--border);
}
.kpi-table td:first-child{ text-align:left; color:var(--ink-900); }
.kpi-table tr.section td{
  background:var(--ink-50); font-weight:var(--fw-bold); color:var(--ink-900);
  padding-top:11px; padding-bottom:11px;
}
.kpi-table .chg{ font-weight:var(--fw-bold); color:var(--success); }
.kpi-table tbody tr:last-child td{ border-bottom:none; }

/* ===================================================================
   5 — Sipariş & ciro chart
   =================================================================== */
.s-chart .lead{ position:absolute; left:64px; top:250px; width:360px; z-index:4; }
.s-chart .lead p{ margin:0; font:var(--fw-bold) 27px/1.4 var(--font-sans);
  letter-spacing:var(--tracking-snug); color:var(--ink-900); }
.s-chart .lead p b{ color:var(--kiwi-600); }
.chart-wrap{ position:absolute; right:48px; top:150px; width:760px; height:520px; z-index:4; }
.chart-legend{ display:flex; gap:22px; justify-content:center; margin-bottom:6px; flex-wrap:wrap; }
.chart-legend .lg{ display:flex; align-items:center; gap:8px;
  font:var(--fw-semibold) 13px/1 var(--font-sans); color:var(--fg-muted); }
.chart-legend .sw{ width:16px; height:16px; border-radius:4px; }
.chart-legend .sw.line{ height:4px; border-radius:2px; }

/* ===================================================================
   6 / 11 — Section dividers
   =================================================================== */
.s-section .label{
  position:absolute; z-index:4; left:560px; top:50%; transform:translateY(-50%); right:80px;
}
.s-section.light .label h2{ color:var(--ink-900); }
.s-section h2{
  margin:0 0 36px; color:var(--tz-white);
  font:var(--fw-extra) 56px/1.02 var(--font-sans); letter-spacing:var(--tracking-tight);
}
.s-expect .label .e{
  font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--kiwi-600); margin:0 0 14px;
}
.s-expect h2{ margin-bottom:26px; }
.bullet-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.bullet-list li{ display:flex; align-items:flex-start; gap:18px;
  font:var(--fw-medium) 24px/1.35 var(--font-sans); }
.bl-body{ flex:1; min-width:0; }
.bl-t{ margin:0; font:var(--fw-bold) 22px/1.2 var(--font-sans);
  letter-spacing:var(--tracking-snug); color:var(--ink-900); }
.bl-d{ margin:6px 0 0; font:var(--fw-medium) 16px/1.5 var(--font-sans); color:var(--fg-muted); }
.bullet-list .num{ margin-top:2px; }
.bullet-list .mk{ flex:none; width:14px; height:14px; border-radius:50%;
  background:var(--tz-kiwi); margin-top:8px; }
.bullet-list .num{ flex:none; font:var(--fw-extra) 24px/1 var(--font-sans);
  color:var(--kiwi-500); width:40px; }
.s-section.light .bullet-list li{ color:var(--ink-800); }
.s-section.dark .bullet-list li{ color:var(--ink-100); }
.ph{ color:var(--fg-subtle); font-style:italic; }
.s-section.dark .ph{ color:var(--ink-400); }
.editable-note{
  position:absolute; left:560px; bottom:48px; z-index:4;
  font:var(--fw-medium) 13px/1.4 var(--font-sans); color:var(--ink-400);
  display:flex; align-items:center; gap:8px;
}
.s-section.light .editable-note{ color:var(--fg-subtle); }

/* ===================================================================
   7 — Pazarama splash (white)  /  Pazarama logo recreation
   =================================================================== */
.s-pzsplash{ background:var(--tz-white); display:flex; align-items:center; justify-content:center; }
.pz-logo{ text-align:center; line-height:1; }
.pz-logo .wm{ font:800 var(--sz,84px)/1 var(--font-sans); letter-spacing:-0.04em; white-space:nowrap; }
.pz-logo .wm .a{ color:#2a2d8f; }
.pz-logo .wm .b{ color:#ec0c7a; }
.pz-logo .gv{ margin-top:14px; font:var(--fw-bold) calc(var(--sz,84px)*.24)/1 var(--font-sans);
  letter-spacing:-0.01em; color:#3a3f45; }
.pz-logo .gv .tz{ font-weight:800; font-style:italic; }
.pz-logo .gv .tz .t{ color:#063639; }
.pz-logo .gv .tz .y{ color:#8BD94F; }

/* ===================================================================
   8 — Pazarama Market section (dark, logo card)
   =================================================================== */
.s-pazarama .card{
  position:absolute; left:96px; top:200px; width:430px; height:320px; z-index:4;
  background:var(--tz-white); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl);
  display:flex; align-items:center; justify-content:center;
}
.s-pazarama .label{ position:absolute; left:600px; top:236px; right:70px; z-index:4; }
.s-pazarama h2{ margin:0; color:var(--tz-white);
  font:var(--fw-extra) 72px/1 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-pazarama .label p{ margin:24px 0 0; font:var(--fw-medium) 21px/1.5 var(--font-sans);
  color:var(--ink-200); max-width:540px; }

/* ===================================================================
   9 — Pazarama kampanyaları
   =================================================================== */
.s-camp .promos{ position:absolute; left:64px; top:170px; width:430px; z-index:4;
  display:flex; flex-direction:column; gap:22px; }
.promo{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  background:linear-gradient(120deg,#0b484b,#063639); color:#fff;
  display:flex; align-items:center; gap:16px; padding:20px 22px; position:relative;
}
.promo .pz-mini{ font:800 19px/1 var(--font-sans); letter-spacing:-.03em; }
.promo .pz-mini .a{ color:#7f86ff; } .promo .pz-mini .b{ color:#ff4fa6; }
.promo .ptxt{ flex:1; }
.promo .ptxt .t{ font:var(--fw-semibold) 16px/1.35 var(--font-sans); color:var(--ink-100); }
.promo .badge{
  flex:none; background:var(--tz-kiwi); color:var(--ink-900);
  border-radius:var(--radius-md); padding:12px 14px; text-align:center;
  font:var(--fw-extra) 26px/.9 var(--font-sans); letter-spacing:-.02em;
}
.promo .badge small{ display:block; font-size:11px; font-weight:var(--fw-bold);
  letter-spacing:.04em; margin-top:3px; }
.promo .veg{ position:absolute; right:-10px; bottom:-14px; width:96px; height:96px; opacity:.14; }
.camp-tables{ position:absolute; right:64px; top:168px; width:660px; z-index:4;
  display:flex; flex-direction:column; gap:22px; }
.camp-card{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  background:var(--surface); }
.camp-card .ch{ background:var(--ink-900); color:#fff; padding:14px 22px;
  font:var(--fw-bold) 18px/1.2 var(--font-sans); }
.camp-card .ch span{ color:var(--tz-kiwi); font-weight:var(--fw-semibold); font-size:15px; }
.camp-rows{ padding:8px 22px 14px; }
.camp-rows .r{ display:flex; justify-content:space-between; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--border); }
.camp-rows .r:last-child{ border-bottom:none; }
.camp-rows .k{ font:var(--fw-medium) 16px/1 var(--font-sans); color:var(--ink-700); }
.camp-rows .v{ font:var(--fw-extra) 20px/1 var(--font-sans); color:var(--ink-900);
  font-feature-settings:"tnum" 1; }
.camp-rows .v.up{ color:var(--success); }

/* ===================================================================
   10 — Robotik ürün toplama
   =================================================================== */
.s-robot .label{ position:absolute; left:560px; top:96px; right:72px; z-index:4; }
.s-robot h2{ margin:0 0 26px; color:var(--tz-white);
  font:var(--fw-extra) 46px/1.05 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-robot .body{ display:flex; flex-direction:column; gap:18px; }
.s-robot .body p{ margin:0; font:var(--fw-regular) 17px/1.6 var(--font-sans); color:var(--ink-100); }
.s-robot .body p b{ color:var(--tz-kiwi); font-weight:var(--fw-bold); }
.robot-art{ position:absolute; left:0; top:0; width:480px; height:720px; z-index:1;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.robot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  transform:rotate(-9deg) scale(1.15); width:340px; }
.robot-grid i{ display:block; aspect-ratio:3/4; border-radius:6px;
  background:linear-gradient(160deg,rgba(162,233,108,.9),rgba(111,190,51,.55)); }
.robot-grid i:nth-child(3n){ background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08)); }
.robot-grid i:nth-child(4n){ background:linear-gradient(160deg,rgba(162,233,108,.5),rgba(11,72,75,.4)); }

/* ===================================================================
   12 — Hedef
   =================================================================== */
.s-hedef .label{ position:absolute; left:540px; top:150px; right:80px; z-index:4; }
.s-hedef .h{ display:flex; align-items:center; gap:18px; margin-bottom:34px; }
.s-hedef .h img{ width:54px; height:54px; }
.s-hedef h2{ margin:0; color:var(--ink-900);
  font:var(--fw-extra) 60px/1 var(--font-sans); letter-spacing:var(--tracking-tight); }
.goal-list{ display:flex; flex-direction:column; gap:16px; }
.goal{ display:flex; align-items:baseline; gap:24px;
  background:var(--surface); border:1px solid var(--border);
  border-left:5px solid var(--tz-kiwi); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:20px 28px; }
.goal .n{ display:inline-block; min-width:180px; text-align:right;
  font:var(--fw-extra) 52px/1 var(--font-sans); letter-spacing:var(--tracking-tight);
  color:var(--kiwi-600); font-feature-settings:"tnum" 1; }
.goal .t{ font:var(--fw-bold) 24px/1.2 var(--font-sans); color:var(--ink-800);
  letter-spacing:var(--tracking-snug); }

/* ===================================================================
   13 — Teşekkürler  /  14 — Q&A
   =================================================================== */
.s-thanks .label,.s-qa .label{ position:absolute; z-index:4; }
.s-thanks .label{ left:80px; top:300px; }
.s-thanks h2{ margin:0; color:var(--ink-900);
  font:var(--fw-extra) 96px/1 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-thanks p{ margin:22px 0 0; font:var(--fw-medium) 22px/1.4 var(--font-sans); color:var(--fg-muted); }
.s-qa{ }
.s-qa .label{ right:80px; top:240px; left:560px; }
.s-qa h2{ margin:0; color:var(--tz-white);
  font:var(--fw-extra) 56px/1.12 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-qa .q-mark{ position:absolute; left:120px; top:230px; z-index:3;
  font:800 320px/1 var(--font-sans); color:var(--tz-kiwi); opacity:.16; }

/* ===================================================================
   SOFTWARE SECTION — panel mockups (MIDP yemek + su modülü)
   =================================================================== */
/* ---- module slide layout ---- */
.s-mod .mod-head{ position:absolute; left:64px; top:88px; width:430px; z-index:5; }
.s-mod .mod-head .e{ font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--tz-kiwi); margin:0 0 16px; }
.s-mod .mod-head h2{ margin:0; color:var(--tz-white);
  font:var(--fw-extra) 42px/1.06 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-mod .mod-head p{ margin:18px 0 0; font:var(--fw-medium) 17px/1.5 var(--font-sans); color:var(--ink-200); }
.mod-points{ position:absolute; left:64px; top:332px; width:430px; z-index:5;
  display:flex; flex-direction:column; gap:16px; }
.mod-points .pt{ display:flex; gap:13px; align-items:flex-start; }
.mod-points .pt .ic{ flex:none; width:26px; height:26px; border-radius:8px; background:rgba(162,233,108,.16);
  display:grid; place-items:center; margin-top:1px; }
.mod-points .pt .ic svg{ width:15px; height:15px; stroke:var(--tz-kiwi); fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round; }
.mod-points .pt .tx b{ display:block; font:var(--fw-bold) 16px/1.3 var(--font-sans); color:var(--tz-white); }
.mod-points .pt .tx span{ font:var(--fw-medium) 14px/1.4 var(--font-sans); color:var(--ink-300); }

/* ---- browser frame + scaling ---- */
.shot{ position:absolute; transform-origin:top left; z-index:4;
  transform:scale(var(--ms,.6)); filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.bframe{ width:1180px; background:#fff; border-radius:16px; overflow:hidden; }
.bframe .bar{ height:40px; background:#0b484b; display:flex; align-items:center; gap:8px; padding:0 16px; }
.bframe .bar i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.28); }
.bframe .bar .url{ margin-left:14px; font:var(--fw-medium) 13px/1 var(--font-mono); color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.08); padding:7px 16px; border-radius:var(--radius-pill); }

/* ---- mock shell ---- */
.mock{ display:flex; height:700px; background:var(--bg); color:var(--ink-900); font-family:var(--font-sans); }
.mk-aside{ width:236px; flex:none; background:var(--ink-900); color:#fff; padding:20px 16px; display:flex; flex-direction:column; }
.mk-brand{ display:flex; align-items:center; gap:9px; padding:0 6px 18px; }
.mk-brand img{ height:24px; }
.mk-brand .pn{ font:var(--fw-bold) 9px/1.3 var(--font-sans); letter-spacing:.16em; color:var(--ink-300); text-transform:uppercase; }
.mk-store{ background:rgba(255,255,255,.06); border-radius:12px; padding:12px; display:flex; gap:10px; align-items:center; margin-bottom:18px; }
.mk-store .av{ width:34px; height:34px; border-radius:9px; background:var(--tz-kiwi); color:var(--ink-900);
  display:grid; place-items:center; font:var(--fw-extra) 16px/1 var(--font-sans); flex:none; }
.mk-store .nm{ font:var(--fw-bold) 14px/1.2 var(--font-sans); }
.mk-store .meta{ font:var(--fw-medium) 11px/1.3 var(--font-sans); color:var(--ink-300); margin-top:2px; }
.mk-cap{ font:var(--fw-bold) 10px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); padding:0 8px 8px; }
.mk-nav{ display:flex; flex-direction:column; gap:2px; }
.mk-nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  font:var(--fw-semibold) 14px/1 var(--font-sans); color:var(--ink-200); text-decoration:none; }
.mk-nav a .gi{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mk-nav a.on{ background:rgba(162,233,108,.15); color:var(--tz-kiwi); }
.mk-nav a .ct{ margin-left:auto; background:var(--tz-kiwi); color:var(--ink-900); font:var(--fw-bold) 11px/1 var(--font-sans);
  min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px; }
.mk-foot{ margin-top:auto; background:rgba(162,233,108,.1); border-radius:12px; padding:13px 14px; }
.mk-foot .k{ font:var(--fw-bold) 9px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tz-kiwi); }
.mk-foot .n{ font:var(--fw-extra) 24px/1.1 var(--font-sans); color:#fff; margin-top:4px; }
.mk-foot .s{ font:var(--fw-medium) 11px/1.3 var(--font-sans); color:var(--ink-300); }

.mk-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.mk-top{ height:60px; flex:none; background:rgba(255,255,255,.6); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 26px; gap:16px; }
.mk-top .sel{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  padding:9px 16px; font:var(--fw-semibold) 13px/1 var(--font-sans); color:var(--ink-800); display:flex; gap:8px; align-items:center; }
.mk-top .session{ margin:0 auto; background:var(--ink-50); border-radius:var(--radius-pill); padding:8px 16px;
  font:var(--fw-semibold) 12px/1 var(--font-sans); color:var(--ink-700); }
.mk-top .cta{ background:var(--tz-kiwi); color:var(--ink-900); border-radius:var(--radius-pill);
  padding:9px 16px; font:var(--fw-bold) 13px/1 var(--font-sans); }
.mk-top .who{ display:flex; align-items:center; gap:8px; font:var(--fw-semibold) 13px/1 var(--font-sans); color:var(--ink-800); }
.mk-top .who .av{ width:28px; height:28px; border-radius:50%; background:var(--ink-200); color:var(--ink-800);
  display:grid; place-items:center; font:var(--fw-bold) 11px/1 var(--font-sans); }
.mk-body{ flex:1; padding:26px; overflow:hidden; }
.mk-eyebrow{ font:var(--fw-bold) 11px/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--kiwi-600); }
.mk-h1{ font:var(--fw-extra) 30px/1.05 var(--font-sans); letter-spacing:var(--tracking-tight); color:var(--ink-900); margin:8px 0 4px; }
.mk-sub{ font:var(--fw-medium) 14px/1.4 var(--font-sans); color:var(--fg-muted); }

/* KPI cards */
.mk-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; }
.mk-kpi{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow-sm); }
.mk-kpi .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:12px; }
.mk-kpi .ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mk-kpi .lab{ font:var(--fw-bold) 10px/1 var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle); }
.mk-kpi .num{ font:var(--fw-extra) 30px/1.05 var(--font-sans); letter-spacing:var(--tracking-tight); color:var(--ink-900); margin:7px 0 9px; }
.mk-kpi .delta{ font:var(--fw-medium) 12px/1 var(--font-sans); color:var(--fg-muted); display:flex; align-items:center; gap:7px; }
.mk-kpi .delta b{ background:var(--kiwi-100); color:var(--kiwi-700); font-weight:var(--fw-bold); padding:3px 7px; border-radius:var(--radius-pill); }
.mk-kpi.tint-green{ background:var(--kiwi-100); border-color:transparent; }
.mk-kpi.tint-peach{ background:#FBE3DE; border-color:transparent; }
.mk-kpi.tint-amber{ background:#FCEFD2; border-color:transparent; }
.mk-kpi.tint-blue{ background:var(--ink-100); border-color:transparent; }
.mk-kpi.flat .num{ margin-bottom:4px; }

/* panels row */
.mk-grid{ display:grid; gap:16px; margin-top:18px; }
.mk-card{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); }
.mk-card .ct{ font:var(--fw-bold) 11px/1 var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle); }
.mk-card .cn{ font:var(--fw-extra) 26px/1.1 var(--font-sans); color:var(--ink-900); margin:8px 0 2px; letter-spacing:var(--tracking-tight); }
.mk-card .cs{ font:var(--fw-medium) 12px/1.3 var(--font-sans); color:var(--fg-muted); }

/* donut legend */
.mk-legend{ display:flex; flex-direction:column; gap:11px; }
.mk-legend .lr{ display:flex; align-items:center; gap:10px; font:var(--fw-semibold) 13px/1 var(--font-sans); color:var(--ink-800); }
.mk-legend .lr .d{ width:11px; height:11px; border-radius:50%; flex:none; }
.mk-legend .lr .pc{ margin-left:auto; color:var(--fg-muted); font-weight:var(--fw-bold); }
.mk-legend .lr .ct{ width:26px; text-align:right; color:var(--ink-900); font-weight:var(--fw-extra); }

/* list rows (orders / applications / approvals) */
.mk-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.mk-row:last-child{ border-bottom:none; }
.mk-row .id{ font:var(--fw-bold) 12px/1 var(--font-mono); color:var(--fg-subtle); width:46px; flex:none; }
.mk-row .av{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  font:var(--fw-extra) 12px/1 var(--font-sans); color:#fff; }
.mk-row .nm{ font:var(--fw-bold) 14px/1.2 var(--font-sans); color:var(--ink-900); }
.mk-row .nm small{ display:block; font:var(--fw-medium) 11px/1.3 var(--font-sans); color:var(--fg-muted); margin-top:2px; }
.mk-row .amt{ font:var(--fw-extra) 14px/1 var(--font-sans); color:var(--ink-900); margin-left:auto; }
.mk-row .tm{ font:var(--fw-medium) 12px/1 var(--font-sans); color:var(--fg-subtle); width:64px; text-align:right; }
.mk-tag{ font:var(--fw-bold) 11px/1 var(--font-sans); padding:5px 10px; border-radius:var(--radius-pill); }
.mk-tag.new{ background:var(--kiwi-100); color:var(--kiwi-700); }
.mk-tag.prep{ background:#FCEFD2; color:#9A6A12; }
.mk-tag.ok{ background:var(--kiwi-100); color:var(--kiwi-700); }
.mk-tag.warn{ background:#FBE3DE; color:#B23A26; }
.mk-tag.gray{ background:var(--ink-100); color:var(--ink-700); }

/* channel cards */
.mk-channels{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:18px; }
.mk-chan{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.mk-chan .top{ padding:14px 14px 12px; display:flex; align-items:center; gap:9px; }
.mk-chan .nm{ font:var(--fw-bold) 14px/1.1 var(--font-sans); color:var(--ink-900); }
.mk-chan .ty{ font:var(--fw-medium) 10px/1 var(--font-sans); color:var(--fg-subtle); margin-top:2px; }
.mk-chan .own{ background:var(--ink-900); color:var(--tz-kiwi); font:var(--fw-bold) 10px/1 var(--font-sans);
  padding:5px 9px; border-radius:var(--radius-pill); display:inline-block; margin:2px 14px; }
.mk-chan .rates{ display:flex; gap:8px; padding:0 14px 12px; }
.mk-chan .rate{ flex:1; background:var(--ink-50); border-radius:10px; padding:9px 10px; }
.mk-chan .rate .rk{ font:var(--fw-semibold) 9px/1 var(--font-sans); color:var(--fg-subtle); text-transform:uppercase; letter-spacing:.06em; }
.mk-chan .rate .rv{ font:var(--fw-extra) 16px/1 var(--font-sans); color:var(--ink-900); margin-top:5px; }
.mk-chan .conn{ border-top:1px solid var(--border); padding:11px 14px; display:flex; align-items:center; gap:7px;
  font:var(--fw-semibold) 12px/1 var(--font-sans); color:var(--ink-700); }
.mk-chan .conn .st{ margin-left:auto; }

/* brand/channel badge chips */
.bd{ width:22px; height:22px; border-radius:7px; display:inline-grid; place-items:center;
  font:var(--fw-extra) 9px/1 var(--font-sans); color:#fff; flex:none; }
.bd.lg{ width:26px; height:26px; border-radius:8px; font-size:11px; }
.bd.tz{ background:var(--tz-kiwi); color:var(--ink-900); }
.bd.ys{ background:#EA0050; } .bd.ty{ background:#F27A1A; }
.bd.mg{ background:#E2231A; } .bd.pz{ background:#7C3AED; }
.bd.ab{ background:#1E6FB8; } .bd.sk{ background:#C8102E; }
.bd.hy{ background:#0093D0; } .bd.er{ background:#003F8C; } .bd.tk{ background:#5E7A7B; }
.bd.muted{ background:var(--ink-200); color:var(--ink-500); }

/* product cards */
.mk-prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.mk-prod{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.mk-prod .ph{ height:96px; position:relative; }
.mk-prod .ph .pr{ position:absolute; right:10px; bottom:10px; background:rgba(6,54,57,.78); color:#fff;
  font:var(--fw-extra) 12px/1 var(--font-sans); padding:5px 9px; border-radius:var(--radius-pill); }
.mk-prod .ph .ttl{ position:absolute; left:12px; bottom:10px; color:#fff; font:var(--fw-bold) 13px/1 var(--font-sans);
  text-shadow:0 1px 4px rgba(0,0,0,.4); }
.mk-prod .ph .wait{ position:absolute; left:10px; top:10px; background:#FCEFD2; color:#9A6A12;
  font:var(--fw-bold) 9px/1 var(--font-sans); padding:5px 8px; border-radius:var(--radius-pill); }
.mk-prod .bd-row{ display:flex; gap:5px; align-items:center; padding:11px 12px 0; }
.mk-prod .meta{ padding:4px 12px 0; font:var(--fw-medium) 11px/1.3 var(--font-sans); color:var(--fg-muted); }
.mk-prod .nm{ padding:8px 12px 0; font:var(--fw-bold) 14px/1.1 var(--font-sans); color:var(--ink-900); }
.mk-prod .ft{ display:flex; align-items:center; gap:8px; padding:10px 12px 12px; }
.mk-prod .ft .toggle{ width:34px; height:19px; border-radius:var(--radius-pill); background:var(--tz-kiwi); position:relative; }
.mk-prod .ft .toggle::after{ content:""; position:absolute; right:2px; top:2px; width:15px; height:15px; border-radius:50%; background:#fff; }
.mk-prod .ft span{ font:var(--fw-semibold) 12px/1 var(--font-sans); color:var(--ink-700); }
.mk-prod .ft .rng{ margin-left:auto; font:var(--fw-bold) 11px/1 var(--font-mono); color:var(--ink-800); }

/* category list (menu) */
.mk-cats{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:10px; box-shadow:var(--shadow-sm); }
.mk-cats .ch{ font:var(--fw-bold) 10px/1 var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle); padding:8px 10px; display:flex; }
.mk-cats .ch .ct{ margin-left:auto; }
.mk-catrow{ display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:10px; }
.mk-catrow.on{ background:var(--ink-50); }
.mk-catrow .ci{ width:30px; height:30px; border-radius:9px; background:var(--kiwi-100); display:grid; place-items:center; }
.mk-catrow .ci svg{ width:16px; height:16px; stroke:var(--kiwi-700); fill:none; stroke-width:2; }
.mk-catrow .nm{ font:var(--fw-bold) 13px/1.2 var(--font-sans); color:var(--ink-900); }
.mk-catrow .nm small{ display:block; font-weight:var(--fw-medium); font-size:11px; color:var(--fg-muted); margin-top:2px; }
.mk-catrow .toggle{ margin-left:auto; width:34px; height:19px; border-radius:var(--radius-pill); background:var(--tz-kiwi); position:relative; flex:none; }
.mk-catrow .toggle.off{ background:var(--ink-200); }
.mk-catrow .toggle::after{ content:""; position:absolute; right:2px; top:2px; width:15px; height:15px; border-radius:50%; background:#fff; }
.mk-catrow .toggle.off::after{ left:2px; right:auto; }

/* mini progress bars (branch perf) */
.mk-bars{ display:flex; flex-direction:column; gap:16px; }
.mk-bar .hl{ display:flex; align-items:center; gap:8px; font:var(--fw-bold) 14px/1 var(--font-sans); color:var(--ink-900); }
.mk-bar .hl svg{ width:15px; height:15px; stroke:var(--kiwi-600); fill:none; stroke-width:2; }
.mk-bar .hl .amt{ margin-left:auto; font:var(--fw-extra) 14px/1 var(--font-mono); }
.mk-bar .track{ height:8px; border-radius:var(--radius-pill); background:var(--ink-100); margin:9px 0 5px; overflow:hidden; }
.mk-bar .track i{ display:block; height:100%; border-radius:var(--radius-pill); background:var(--tz-kiwi); }
.mk-bar .sb{ font:var(--fw-medium) 11px/1 var(--font-sans); color:var(--fg-muted); }

/* generic chart svg sizing inside mock */
.mk-line{ width:100%; height:auto; display:block; }

/* segmented toggle (7g/30g/90g) */
.mk-seg{ display:inline-flex; background:var(--ink-50); border-radius:var(--radius-pill); padding:3px; }
.mk-seg span{ font:var(--fw-semibold) 11px/1 var(--font-sans); color:var(--fg-muted); padding:6px 12px; border-radius:var(--radius-pill); }
.mk-seg span.on{ background:#fff; color:var(--ink-900); box-shadow:var(--shadow-xs); }

/* intro slide: module cards */
.s-soft .so-head{ position:absolute; left:80px; top:90px; width:560px; z-index:5; }
.s-soft .so-head .e{ font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--tz-kiwi); margin:0 0 16px; }
.s-soft .so-head h2{ margin:0; color:var(--tz-white); font:var(--fw-extra) 60px/1 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-soft .so-head p{ margin:20px 0 0; font:var(--fw-medium) 19px/1.5 var(--font-sans); color:var(--ink-200); max-width:520px; }
.mod-cards{ position:absolute; right:72px; top:120px; width:520px; z-index:5; display:flex; flex-direction:column; gap:18px; }
.mod-cards .mc{ background:rgba(255,255,255,.05); border:1px solid var(--border-dark); border-radius:var(--radius-xl); padding:24px 26px; }
.mod-cards .mc.live{ background:var(--tz-kiwi); border-color:transparent; color:var(--ink-900); }
.mod-cards .mc .top{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.mod-cards .mc .ic{ width:46px; height:46px; border-radius:13px; background:rgba(162,233,108,.16); display:grid; place-items:center; flex:none; }
.mod-cards .mc.live .ic{ background:rgba(6,54,57,.12); }
.mod-cards .mc .ic svg{ width:24px; height:24px; stroke:var(--tz-kiwi); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mod-cards .mc.live .ic svg{ stroke:var(--ink-900); }
.mod-cards .mc h3{ margin:0; font:var(--fw-extra) 24px/1 var(--font-sans); letter-spacing:var(--tracking-snug); color:#fff; }
.mod-cards .mc.live h3{ color:var(--ink-900); }
.mod-cards .mc .st{ margin-left:auto; font:var(--fw-bold) 11px/1 var(--font-sans); letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--radius-pill); }
.mod-cards .mc .st.l{ background:var(--ink-900); color:var(--tz-kiwi); }
.mod-cards .mc .st.s{ background:rgba(162,233,108,.16); color:var(--tz-kiwi); }
.mod-cards .mc p{ margin:0; font:var(--fw-medium) 15px/1.5 var(--font-sans); color:var(--ink-200); }
.mod-cards .mc.live p{ color:var(--ink-800); }
.mod-cards .mc .feats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mod-cards .mc .feats span{ font:var(--fw-semibold) 12px/1 var(--font-sans); background:rgba(255,255,255,.08);
  color:var(--ink-100); padding:7px 12px; border-radius:var(--radius-pill); }
.mod-cards .mc.live .feats span{ background:rgba(6,54,57,.1); color:var(--ink-800); }

/* ===================================================================
   ROBOTİK · sistem akışı diyagramı
   =================================================================== */
.s-flow .flow-head{ position:absolute; left:64px; top:58px; z-index:5; }
.s-flow .flow-head .e{ font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--tz-kiwi); margin:0 0 12px; }
.s-flow .flow-head h2{ margin:0; color:var(--tz-white);
  font:var(--fw-extra) 40px/1.04 var(--font-sans); letter-spacing:var(--tracking-tight); }

/* data-flow strip */
.arch{ position:absolute; left:64px; right:64px; top:182px; z-index:5; display:flex; align-items:stretch; }
.arch .node{ flex:1; background:rgba(255,255,255,.05); border:1px solid var(--border-dark);
  border-radius:16px; padding:15px 16px; display:flex; gap:12px; align-items:center; }
.arch .node.hot{ background:var(--tz-kiwi); border-color:transparent; }
.arch .node .ic{ width:38px; height:38px; border-radius:11px; background:rgba(162,233,108,.16);
  display:grid; place-items:center; flex:none; }
.arch .node .ic svg{ width:20px; height:20px; stroke:var(--tz-kiwi); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.arch .node.hot .ic{ background:rgba(6,54,57,.12); }
.arch .node.hot .ic svg{ stroke:var(--ink-900); }
.arch .node .nt{ font:var(--fw-bold) 16px/1.1 var(--font-sans); color:var(--tz-white); }
.arch .node .ns{ font:var(--fw-medium) 12px/1.3 var(--font-sans); color:var(--ink-300); margin-top:3px; }
.arch .node.hot .nt{ color:var(--ink-900); } .arch .node.hot .ns{ color:var(--ink-800); }
.arch .conn{ flex:none; width:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.arch .conn .lab{ font:var(--fw-bold) 10px/1 var(--font-mono); letter-spacing:.04em; color:var(--tz-kiwi); }
.arch .conn svg{ width:36px; height:14px; stroke:var(--tz-kiwi); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.flow-fb{ position:absolute; left:64px; right:64px; top:292px; z-index:5;
  border:1.5px dashed rgba(162,233,108,.42); border-radius:12px; padding:10px 18px;
  display:flex; align-items:center; gap:12px; font:var(--fw-medium) 13px/1.3 var(--font-sans); color:var(--ink-200); }
.flow-fb svg{ width:18px; height:18px; stroke:var(--tz-kiwi); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.flow-fb b{ color:var(--tz-kiwi); font-weight:var(--fw-bold); }

/* phase cards */
.phases{ position:absolute; left:64px; right:64px; top:362px; z-index:5;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.phase{ background:rgba(255,255,255,.05); border:1px solid var(--border-dark); border-radius:18px; padding:20px; position:relative; }
.phase:not(:first-child)::before{ content:"›"; position:absolute; left:-13px; top:30px;
  color:var(--tz-kiwi); font:800 24px/1 var(--font-sans); }
.phase .ph-top{ display:flex; align-items:center; gap:11px; margin-bottom:7px; }
.phase .pn{ width:34px; height:34px; border-radius:50%; background:var(--tz-kiwi); color:var(--ink-900);
  display:grid; place-items:center; font:var(--fw-extra) 14px/1 var(--font-sans); flex:none; }
.phase .pi{ margin-left:auto; }
.phase .pi svg{ width:22px; height:22px; stroke:var(--tz-kiwi); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.phase .rng{ font:var(--fw-bold) 10px/1 var(--font-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); }
.phase h3{ margin:2px 0 13px; font:var(--fw-extra) 19px/1.1 var(--font-sans); color:var(--tz-white); letter-spacing:var(--tracking-snug); }
.phase ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.phase li{ display:flex; gap:9px; font:var(--fw-medium) 13.5px/1.4 var(--font-sans); color:var(--ink-100); }
.phase li .dt{ width:6px; height:6px; border-radius:50%; background:var(--tz-kiwi); margin-top:6px; flex:none; }
.phase li b{ color:#fff; font-weight:var(--fw-bold); }

/* ===================================================================
   ROBOTİK · beklenen kazanımlar (hedef/sonuç kartları)
   =================================================================== */
.s-gain .gain-head{ position:absolute; left:64px; top:64px; z-index:5; }
.s-gain .gain-head .e{ font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--tz-kiwi); margin:0 0 12px; }
.s-gain .gain-head h2{ margin:0; color:var(--tz-white);
  font:var(--fw-extra) 46px/1.02 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-gain .gain-head p{ margin:14px 0 0; font:var(--fw-medium) 17px/1.4 var(--font-sans); color:var(--ink-200); max-width:760px; }

.gain-cards{ position:absolute; left:64px; right:64px; top:262px; z-index:5;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gc{ background:rgba(255,255,255,.05); border:1px solid var(--border-dark); border-radius:22px; padding:26px 28px; }
.gc .top{ display:flex; align-items:center; margin-bottom:16px; }
.gc .ic{ width:48px; height:48px; border-radius:14px; background:rgba(162,233,108,.16); display:grid; place-items:center; }
.gc .ic svg{ width:25px; height:25px; stroke:var(--tz-kiwi); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gc .dir{ margin-left:auto; display:flex; align-items:center; gap:6px; background:rgba(162,233,108,.14);
  color:var(--tz-kiwi); font:var(--fw-bold) 12px/1 var(--font-sans); padding:8px 12px; border-radius:var(--radius-pill); }
.gc .dir svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.gc .num{ font:var(--fw-extra) 58px/1 var(--font-sans); letter-spacing:var(--tracking-tight); color:var(--tz-kiwi); font-feature-settings:"tnum" 1; }
.gc .lab{ font:var(--fw-bold) 19px/1.2 var(--font-sans); color:var(--tz-white); margin:8px 0 20px; letter-spacing:var(--tracking-snug); }
.gc .ba{ display:flex; flex-direction:column; gap:11px; }
.gc .br{ display:flex; align-items:center; gap:11px; }
.gc .br .k{ font:var(--fw-semibold) 12px/1 var(--font-sans); color:var(--ink-300); width:46px; flex:none; }
.gc .br .t{ flex:1; height:10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.08); overflow:hidden; }
.gc .br .t i{ display:block; height:100%; border-radius:var(--radius-pill); background:var(--ink-400); }
.gc .br .t i.hi{ background:var(--tz-kiwi); }
.gc .br .v{ font:var(--fw-extra) 13px/1 var(--font-mono); color:var(--tz-white); width:58px; text-align:right; flex:none; white-space:nowrap; }
.gc .cap{ margin-top:18px; font:var(--fw-medium) 13px/1.45 var(--font-sans); color:var(--ink-300); }
.gain-note{ position:absolute; left:64px; bottom:38px; z-index:5; display:flex; align-items:center; gap:8px;
  font:var(--fw-medium) 13px/1.3 var(--font-sans); color:var(--ink-400); }
.gain-note .dotk{ width:7px; height:7px; border-radius:50%; background:var(--tz-kiwi); flex:none; }

/* ===================================================================
   ROBOTİK · ölçekte personel tasarrufu (dark cost table)
   =================================================================== */
.s-cost .cost-head{ position:absolute; left:64px; top:62px; z-index:5; }
.s-cost .cost-head .e{ font:var(--fw-bold) 14px/1 var(--font-sans); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--tz-kiwi); margin:0 0 12px; }
.s-cost .cost-head h2{ margin:0; color:var(--tz-white);
  font:var(--fw-extra) 46px/1.02 var(--font-sans); letter-spacing:var(--tracking-tight); }
.s-cost .cost-head p{ margin:14px 0 0; font:var(--fw-medium) 18px/1.45 var(--font-sans); color:var(--ink-200); max-width:860px; }
.s-cost .cost-head p b{ color:var(--tz-kiwi); }
.cost-table{ position:absolute; left:64px; right:64px; top:270px; z-index:5;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-dark);
  font-feature-settings:"tnum" 1; }
.cost-table table{ width:100%; border-collapse:collapse; }
.cost-table thead th{ background:rgba(255,255,255,.06); color:var(--tz-white);
  font:var(--fw-bold) 16px/1.2 var(--font-sans); text-align:center; padding:16px 18px; }
.cost-table thead th:first-child{ text-align:left; color:var(--ink-200); font-weight:var(--fw-semibold); }
.cost-table td{ padding:13px 18px; text-align:center; font:var(--fw-semibold) 16px/1 var(--font-sans);
  color:var(--ink-100); border-bottom:1px solid var(--border-dark); }
.cost-table td:first-child{ text-align:left; color:var(--ink-200); font-weight:var(--fw-medium); }
.cost-table tr.section td{ background:rgba(162,233,108,.10); color:var(--tz-kiwi);
  font:var(--fw-bold) 13px/1 var(--font-sans); letter-spacing:.05em; text-transform:uppercase;
  padding-top:10px; padding-bottom:10px; }
.cost-table .chg{ color:var(--tz-kiwi); font-weight:var(--fw-extra); }
.cost-table tr.hot td{ background:rgba(162,233,108,.07); font-size:17px; }
.cost-table tr.hot td:first-child{ color:var(--tz-white); font-weight:var(--fw-bold); }
.cost-table tr.hot .chg{ font-size:18px; }
.cost-table tbody tr:last-child td{ border-bottom:none; }
.cost-note{ position:absolute; left:64px; bottom:36px; z-index:5; display:flex; align-items:center; gap:8px;
  font:var(--fw-medium) 13px/1.3 var(--font-sans); color:var(--ink-400); }
.cost-note .dotk{ width:7px; height:7px; border-radius:50%; background:var(--tz-kiwi); flex:none; }

/* ===================================================================
   Deck UI (not scaled)
   =================================================================== */
.deck-ui{ position:fixed; inset:0; pointer-events:none; z-index:50; }
.progress{ position:fixed; top:0; left:0; height:4px; background:var(--tz-kiwi);
  width:0; transition:width .35s ease; box-shadow:0 0 12px rgba(162,233,108,.6); }
.counter{ position:fixed; bottom:20px; left:24px; pointer-events:auto;
  font:var(--fw-bold) 14px/1 var(--font-mono); color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.35); padding:8px 12px; border-radius:var(--radius-pill);
  backdrop-filter:blur(6px); }
.counter b{ color:var(--tz-kiwi); }
.dots{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:9px; pointer-events:auto;
  background:rgba(0,0,0,.32); padding:9px 13px; border-radius:var(--radius-pill); backdrop-filter:blur(6px); }
.dots button{ width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.34); transition:transform .2s, background .2s; }
.dots button:hover{ background:rgba(255,255,255,.6); transform:scale(1.25); }
.dots button.on{ background:var(--tz-kiwi); transform:scale(1.3); }
.tools{ position:fixed; bottom:20px; right:24px; display:flex; gap:8px; pointer-events:auto; }
.tools button{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.35); color:#fff; backdrop-filter:blur(6px);
  display:grid; place-items:center; transition:background .2s; }
.tools button:hover{ background:var(--kiwi-600); }
.tools svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.nav-arrow{ position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px;
  border-radius:50%; border:none; cursor:pointer; background:rgba(0,0,0,.28); color:#fff;
  display:grid; place-items:center; pointer-events:auto; opacity:0; transition:opacity .25s, background .2s; }
.deck:hover .nav-arrow{ opacity:1; }
.nav-arrow:hover{ background:var(--kiwi-600); }
.nav-arrow.prev{ left:18px; } .nav-arrow.next{ right:18px; }
.nav-arrow svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round; }

@media (prefers-reduced-motion:reduce){
  .slide,.progress,.dots button,.tools button,.nav-arrow{ transition:none; }
}

/* ===================================================================
   Print → clean PDF (one slide per landscape page)
   =================================================================== */
@media print{
  @page{ size:1280px 720px; margin:0; }
  body{ overflow:visible; background:#fff; }
  .deck-ui{ display:none !important; }
  .stage{ position:static; transform:none; width:auto; height:auto; }
  .slide{
    position:relative; inset:auto; opacity:1 !important; visibility:visible !important;
    width:1280px; height:720px; page-break-after:always; break-after:page;
    transition:none;
  }
}