/* ═══════════════════════════════════════════════════════════════════
   DIGITAL GROWTH PAGE — Pixel-perfect implementation of JSX handoff
   Namespace: .dg-* (new) + .dgrowth-wrapper (compatibility)
   Last updated: 2026-08 — design-handoff-dijital-buyume
═══════════════════════════════════════════════════════════════════ */

/* ─── Design token overrides (fill any gaps) ────────────────────── */
:root {
  --bg-navy:             #070E26;
  --bg-navy-deeper:      #050B1F;
  --bg-navy-darker:      #040810;
  --bg-navy-card:        rgba(13,23,60,0.92);
  --bg-light-editorial:  #F4F2EF;
  --bg-light-inset:      #F1F0F7;
  --border-light-inset:  rgba(8,18,47,0.09);
  --border-light-card:   rgba(8,18,47,0.1);
  --text-heading-dark:   #0D1733;
  --text-body-dark:      rgba(255,255,255,0.65);
  --text-body-dim:       rgba(255,255,255,0.45);
  --text-muted-light:    rgba(8,18,47,0.5);
  --text-prose-light:    rgba(8,18,47,0.65);
  --text-prose-strong:   rgba(8,18,47,0.82);
  --accent-blue:         #526DFF;
  --accent-violet:       #9A8CFF;
  --accent-light-violet: #C4B5FD;
  --accent-icon-blue:    #7A9BFF;
  --gradient-btn:        linear-gradient(135deg,#526DFF,#9A8CFF);
  --gradient-highlight:  linear-gradient(135deg,#C4B5FD 0%,#9A8CFF 100%);
  --gradient-heading-dark: linear-gradient(90deg,#7C65FF 0%,#9A8CFF 40%,#B9A7FF 80%,#A78BFA 100%);
  --shadow-sheet:        0 -12px 36px rgba(0,0,0,0.12);
  --shadow-btn:          0 6px 24px rgba(82,109,255,0.32);
  --shadow-chip:         0 4px 18px rgba(0,0,0,0.35);
  --dot-texture:         radial-gradient(rgba(255,255,255,0.07) 1.2px, transparent 1.2px);
  --dot-texture-size:    28px 28px;
  --ambient-light:       radial-gradient(circle, rgba(82,109,255,0.15) 0%, rgba(154,140,255,0.05) 50%, transparent 75%);
  --radius-pill:         100px;
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           16px;
}

/* ─── Page wrapper ──────────────────────────────────────────────── */
.dgrowth-wrapper { overflow-x: hidden; }

/* ─── Fixed-width containers ────────────────────────────────────── */
.dg-w1340 { width: 1180px; margin: 0 auto; position: relative; }
.dg-w1240 { width: 1120px; margin: 0 auto; position: relative; }
.dg-w1040 { width: 960px; margin: 0 auto; position: relative; }

/* ─── Shared utilities ──────────────────────────────────────────── */
/* GradLine dark (on dark bg) — violet */
.dg-gradline {
  background: var(--gradient-highlight);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}
/* GradLine light (on light bg) — blue-violet */
.dg-gradline-light {
  background: var(--gradient-heading-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

/* Eyebrow dark (chip on dark bg) */
.dg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-light-violet);
  background: rgba(154,140,255,0.1);
  border: 1px solid rgba(154,140,255,0.2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
/* Eyebrow light (on light bg) */
.dg-eyebrow-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-blue);
  background: rgba(82,109,255,0.07);
  border: 1px solid rgba(82,109,255,0.15);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

/* Caps — all-caps utility text */
.dg-caps {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Section number — large ghost gradient digit */
.dg-secnum-wrap { display: flex; align-items: center; gap: 14px; }
.dg-secnum {
  font-size: 60px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--gradient-highlight);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dg-secnum-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.dg-secnum-label-light {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(8,18,47,0.35);
}

/* Rule */
.dg-rule {
  height: 1px;
  background: rgba(255,255,255,0.12);
  border: none;
  margin: 0;
}
.dg-rule-light { background: rgba(8,18,47,0.1); }

/* Dot */
.dg-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ArtSlot (placeholder image area) */
.dg-artslot {
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dg-artslot-light {
  background: rgba(8,18,47,0.04);
  border: 1px dashed rgba(8,18,47,0.12);
  border-radius: 10px;
}

/* CopyLines (placeholder text lines) */
.dg-copy-lines { display: flex; flex-direction: column; gap: 5px; }
.dg-copy-line {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
}

/* State Pill */
.dg-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid;
}
.dg-pill--ok {
  color: #34D399;
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.3);
}
.dg-pill--info {
  color: var(--accent-light-violet);
  background: rgba(154,140,255,0.08);
  border-color: rgba(154,140,255,0.3);
}
.dg-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dg-pill--ok .dg-pill-dot  { background: #34D399; }
.dg-pill--info .dg-pill-dot { background: var(--accent-light-violet); }

/* TriadRow (horizontal, light bg) */
.dg-triad-row {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid rgba(8,18,47,0.1);
}
.dg-triad-word {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-heading-dark);
  line-height: 1;
}
.dg-triad-items {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted-light);
  line-height: 1.75;
}

/* TriadCol (vertical, dark bg) — S04 */
.dg-triad-col { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; }
.dg-triad-col-word {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  margin: 0 0 18px;
}
.dg-triad-col-items { display: flex; flex-direction: column; gap: 9px; }
.dg-triad-col-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-body-dim);
}

/* Buttons */
.dg-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  min-height: 46px;
  border-radius: var(--radius-pill);
  background: var(--gradient-btn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.dg-btn-primary:hover { opacity: 0.88; }

.dg-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  min-height: 46px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.dg-btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: #fff; }


/* ════════════════════════════════════════════════════════════════
   HERO — SystemDiagram
   JSX: scene-hero.jsx
   Padding: 124px 0 116px | Container: 1340px
   Grid: 1fr 680px, gap 80px
════════════════════════════════════════════════════════════════ */
.dg-hero {
  position: relative;
  background: var(--bg-navy);
  padding: 88px 0 72px;
  overflow: hidden;
}

/* Dot texture + ambient */
.dg-hero-bg {
  position: absolute;
  inset: 0;
  background:
    var(--dot-texture),
    radial-gradient(ellipse 600px 600px at 70% 40%, rgba(82,109,255,0.12) 0%, transparent 70%);
  background-size: var(--dot-texture-size), auto;
  opacity: 0.9;
  pointer-events: none;
}

.dg-hero-grid {
  display: grid;
  grid-template-columns: 562px 600px;
  gap: 18px;
  align-items: center;
}

/* Left: text */
.dg-hero-h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 22px 0 0;
}
/* The gradient accent line uses background-clip:text; its painting area is
   the box's own content height, which is driven by line-height. The parent
   .dg-hero-h1's line-height (1.12) is tighter than this font's ascent, so
   tall Turkish diacritics (ğ's breve, İ's dot, Ğ, Ş) that rise above the
   x-height were getting no gradient paint above the tight box and appeared
   clipped at the top, even though the glyphs themselves were laid out fine.
   Giving this line its own slightly taller line-height adds headroom for
   those diacritics; the matching negative margin cancels the added leading
   so the heading's overall line rhythm/spacing is unchanged. */
.dg-hero-h1 .dg-gradline {
  display: block;
  line-height: 1.42;
  margin: -0.15em 0;
}

.dg-hero-p1 {
  margin: 20px 0 0;
  max-width: 440px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body-dark);
}
.dg-hero-p2 {
  margin: 12px 0 0;
  max-width: 440px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body-dim);
}

/* Divider row: line + caps tagline */
.dg-hero-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.dg-hero-divider-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(154,140,255,0.6), transparent);
  flex-shrink: 0;
}
.dg-hero-tagline {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  color: rgba(196,181,253,0.9);
  text-transform: uppercase;
}

.dg-hero-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Right: SystemDiagram 578×571 (scaled ~15% from 680×672) */
.dg-sys-diagram {
  position: relative;
  width: 578px;
  height: 571px;
  flex-shrink: 0;
}
.dg-sys-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* System node cards (4 peripheral nodes) */
.dg-sys-node {
  position: absolute;
  width: 105px;
  padding: 13px 12px 12px;
  border-radius: 14px;
  background: rgba(10,20,55,0.74);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.dg-sys-node-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(82,109,255,0.16);
  border: 1px solid rgba(154,140,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-light-violet);
  flex-shrink: 0;
}
.dg-sys-node-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  line-height: 1.2;
}
.dg-sys-node-sub {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

/* Positions scaled ~15% from original 680-wide canvas: SEO(278,30) ADS(41,281) SOSYAL(515,281) TRACKING(278,532) */
.dg-sys-node--seo      { left: 236px; top: 26px; }
.dg-sys-node--ads      { left: 35px;  top: 239px; }
.dg-sys-node--sosyal   { left: 438px; top: 239px; }
.dg-sys-node--tracking { left: 236px; top: 452px; }

/* Core card: scaled from left 215, top 218, 250×230 */
.dg-sys-core {
  position: absolute;
  left: 183px; top: 185px;
  width: 212px; height: 196px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22,37,90,0.95), rgba(9,19,52,0.96));
  border: 1px solid rgba(154,140,255,0.5);
  box-shadow:
    0 34px 80px rgba(7,14,39,0.7),
    0 0 0 8px rgba(82,109,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 19px 20px;
  box-sizing: border-box;
}
.dg-sys-core-icon {
  width: 39px; height: 39px;
  border-radius: 11px;
  background: rgba(82,109,255,0.24);
  border: 1px solid rgba(154,140,255,0.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-light-violet);
  flex-shrink: 0;
}
.dg-sys-core-label {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.05;
}
.dg-sys-core-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: rgba(255,255,255,0.48);
  text-transform: uppercase;
  margin-top: 6px;
}


/* ════════════════════════════════════════════════════════════════
   S01 — Önce Hedef (light, rounded top)
   JSX: scene-01-hedef.jsx
   Padding: 112px 0 104px | Container: 1240px
   Top grid: 200px 1fr | Content grid: 200px 400px 1fr
════════════════════════════════════════════════════════════════ */
.dg-s01 {
  position: relative;
  background: #F7F9FC;
  border-radius: 40px 40px 0 0;
  box-shadow: var(--shadow-sheet);
  z-index: 2;
  padding: 80px 0 72px;
}
/* S01: section number stacked (column) layout */
.dg-s01 .dg-secnum-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* S01: eyebrow shows mixed-case "Önce Hedef" per JSX reference */
.dg-s01 .dg-eyebrow-light {
  text-transform: none;
  letter-spacing: 0.05em;
}
.dg-s01-secnum-rule {
  width: 24px;
  height: 2px;
  background: var(--accent-blue);
  opacity: 0.55;
  flex-shrink: 0;
}
/* Funnel label description text */
.dg-funnel-label-desc {
  margin: 6px 0 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-muted-light);
  white-space: normal;
}

.dg-s01-top-grid {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 44px;
  align-items: start;
}

.dg-s01-content-grid {
  display: grid;
  grid-template-columns: 176px 352px 1fr;
  gap: 44px;
  margin-top: 44px;
  align-items: start;
}

.dg-s01-h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--text-heading-dark);
  margin: 18px 0 0;
  max-width: 660px;
}

.dg-s01-p1 {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-prose-light);
}
.dg-s01-p2 {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-muted-light);
}

/* FunnelVisual: 323×527px SVG (scaled from 380×620, viewBox keeps it fluid) + labels below on mobile */
.dg-funnel-wrap {
  position: relative;
}
.dg-funnel-row {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  width: 459px;
  max-width: 100%;
}

.dg-funnel-svg-wrap {
  width: 323px;
  height: 527px;
  flex-shrink: 0;
  position: relative;
}
.dg-funnel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dg-funnel-labels {
  width: 119px;
  height: 527px;
  position: relative;
  flex-shrink: 0;
}
.dg-funnel-label {
  position: absolute;
  left: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(8,18,47,0.45);
  white-space: nowrap;
}

/* Dönüşüm card at bottom of funnel — positioned in % of the svg-wrap so it scales with the (now viewBox-fluid) funnel at every breakpoint */
.dg-funnel-conv-card {
  position: absolute;
  left: 14.7%;
  top: 86.1%;
  width: 70.5%;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-navy-card);
  border: 1px solid rgba(154,140,255,0.4);
  box-shadow: 0 22px 50px rgba(7,14,39,0.3);
  z-index: 3;
  box-sizing: border-box;
}
.dg-funnel-conv-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(196,181,253,0.85);
  text-transform: uppercase;
}
.dg-funnel-conv-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  margin: 8px 0 4px;
}
.dg-funnel-conv-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* S01 right: editorial text col */
.dg-s01-prose-h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(8,18,47,0.4);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.dg-s01-triad { display: flex; flex-direction: column; }

/* S01 — optional real-image override for the funnel visual (admin CMS,
   "Önce Hedef Görseli"). Only rendered when an admin has uploaded a
   desktop image; the coded SVG funnel above is untouched and stays the
   default. RATIO CORRECTED (re-audit): the coded visual being replaced is
   .dg-funnel-wrap's own real footprint — .dg-funnel-row is explicitly
   459px wide (323px SVG + 17px gap + 119px label column) × 527px tall
   (.dg-funnel-svg-wrap and .dg-funnel-labels are both height:527px) — a
   real, CSS-verified ≈459:527 (≈0.87:1) box, NOT the arbitrary 4:5 this
   rule previously used. The coded funnel has no card chrome of its own
   (transparent SVG, no background/radius), so this element uses a small
   12px radius as the nearest existing token in this composition (the
   funnel's own "Dönüşüm" card, .dg-funnel-conv-card, uses 14px) rather
   than either a harsh 0px or an unrelated larger radius — the one purely
   aesthetic call in this fix, since a photo needs *some* edge treatment
   where the original had none. Same ratio at every breakpoint, including
   mobile (this element is never hidden, unlike .dg-funnel-wrap, since an
   uploaded mobile image is meant to be seen) — there is no real mobile
   footprint to match, since .dg-funnel-wrap is itself display:none at
   ≤768px. */
.dg-s01-visual-real {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 459 / 527;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .dg-s01-visual-real { max-width: 380px; margin: 0 auto; }
}


/* ════════════════════════════════════════════════════════════════
   S02 — Google Ads (LIGHT section)
   JSX: scene-ads.jsx
   Padding: 120px 0 130px | Container: 1340px
   Grid: 780px 1fr gap 60
════════════════════════════════════════════════════════════════ */
.dg-s02 {
  position: relative;
  background: #F7F9FC;
  border-top: 1px solid rgba(8,18,47,0.08);
  padding: 84px 0 76px;
}

.dg-s02-grid {
  display: grid;
  grid-template-columns: 687px 1fr;
  grid-template-rows: auto auto;
  gap: 53px;
  align-items: start;
}
/* Desktop: workspace spans both rows in col 1; heading/copy col 2 row 1, triad col 2 row 2 */
.dg-s02-order-2 { grid-column: 1; grid-row: 1 / 3; }
.dg-s02-order-1 { grid-column: 2; grid-row: 1; }
.dg-s02-order-3 { grid-column: 2; grid-row: 2; }

/* Wrap holds the panel + the overlapping dark card */
.dg-ws-wrap { position: relative; width: 687px; }

/* S02 — optional real-image override for the workspace visual (admin CMS,
   "Google Ads Görseli"). Only rendered when an admin has uploaded a desktop
   image; the coded "workspace" mockup above is untouched and stays the
   default. Height/ratio set per explicit owner direction (reference mockup
   comparison, not the .dg-workspace fallback footprint): the real-image box
   is intentionally taller than the coded mockup box so an uploaded image is
   not cropped at the top. aspect-ratio taken directly from the approved
   reference (685 / 938, ≈0.73:1 portrait). Width/positioning rules below are
   unchanged from before. border-radius matches .dg-workspace's own 18px.
   Same ratio at every breakpoint, including mobile (this element is never
   hidden, unlike .dg-ws-wrap, since an uploaded mobile image is meant to be
   seen). */
.dg-s02-visual-real {
  width: 687px;
  max-width: 100%;
  aspect-ratio: 685 / 938;
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .dg-s02-visual-real { width: 100%; }
}
@media (max-width: 1024px) {
  .dg-s02-visual-real { max-width: 480px; margin: 0 auto; }
}

/* WorkspacePanel: scaled white card */
.dg-workspace {
  width: 687px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(8,18,47,0.12);
  box-shadow: 0 24px 56px rgba(7,14,39,0.1);
  overflow: hidden;
  box-sizing: border-box;
}

/* Workspace header */
.dg-ws-header {
  height: 51px;
  border-bottom: 1px solid var(--border-light-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 19px;
  background: #FCFCFE;
  box-sizing: border-box;
}
.dg-ws-header-left { display: flex; align-items: center; gap: 12px; }
.dg-ws-header-right { display: flex; align-items: center; gap: 12px; }
.dg-ws-header-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--gradient-btn);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-ws-header-div {
  width: 1px; height: 16px;
  background: var(--border-light-inset);
  flex-shrink: 0;
}
.dg-ws-header-account {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-prose-light);
  white-space: nowrap;
}
.dg-ws-header-search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  width: 167px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--bg-light-inset);
  border: 1px solid var(--border-light-inset);
  font-size: 11.5px;
  color: var(--text-muted-light);
  white-space: nowrap;
}

/* State pills (Aktif / Dönüşüm izleme açık) */
.dg-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.dg-state-pill--ok {
  background: rgba(52,211,153,0.15);
  border: 1px solid rgba(52,211,153,0.3);
}
.dg-state-pill--info {
  background: rgba(82,109,255,0.1);
  border: 1px solid rgba(82,109,255,0.22);
}
.dg-state-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* Workspace body: rail + main */
.dg-ws-body { display: grid; grid-template-columns: 164px 1fr; }
.dg-ws-rail {
  background: var(--bg-light-inset);
  border-right: 1px solid var(--border-light-inset);
  padding: 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}
.dg-ws-rail-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-prose-light);
  white-space: nowrap;
}
.dg-ws-rail-item--active {
  background: #fff;
  border-color: rgba(82,109,255,0.28);
  box-shadow: 0 2px 10px rgba(82,109,255,0.1);
  color: var(--accent-blue);
  font-weight: 700;
}

/* Main content area */
.dg-ws-main { padding: 22px 24px 24px; box-sizing: border-box; min-width: 0; }
.dg-ws-main-header { display: flex; align-items: flex-start; justify-content: space-between; }
.dg-ws-campaign-title {
  margin: 7px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading-dark);
}
.dg-ws-details { display: flex; gap: 22px; margin: 15px 0 18px; }
.dg-ws-detail { display: flex; flex-direction: column; gap: 5px; }
.dg-ws-detail-val { font-size: 13px; font-weight: 600; color: var(--text-prose-strong); }
.dg-ws-rule { display: block; height: 1px; background: var(--border-light-inset); }

/* Keyword groups */
.dg-ws-kw-header { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 4px; }
.dg-ws-kw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-light-inset);
}
.dg-ws-kw-dot { width: 5px; height: 5px; border-radius: 50%; background: #34D399; flex-shrink: 0; }
.dg-ws-kw-text { font-size: 13.5px; font-weight: 500; color: #0F172A; white-space: nowrap; }
.dg-ws-kw-match {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(82,109,255,0.07);
  border: 1px solid rgba(82,109,255,0.18);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-blue);
  white-space: nowrap;
}

/* Bottom 2-col: negatives + conversions */
.dg-ws-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.dg-ws-neg-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dg-ws-neg-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--border-light-card);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-prose-light);
  white-space: nowrap;
}
.dg-ws-conv-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dg-ws-conv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bg-light-inset);
  border: 1px solid var(--border-light-inset);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-prose-strong);
  white-space: nowrap;
}

/* Location targeting */
.dg-ws-locations {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(82,109,255,0.04);
  border: 1px solid rgba(82,109,255,0.14);
  display: flex;
  align-items: center;
  gap: 14px;
}
.dg-ws-loc-icon-wrap {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-ws-loc-icon-wrap::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(82,109,255,0.35);
}
.dg-ws-loc-pill {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid rgba(82,109,255,0.18);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-blue);
  white-space: nowrap;
}

/* Dark overlay card (scaled from left -34, bottom -104, w 306) */
.dg-ws-overlay {
  position: absolute;
  left: -30px;
  bottom: -92px;
  width: 270px;
  padding: 19px 21px;
  border-radius: 16px;
  background: var(--bg-navy-card);
  border: 1px solid rgba(154,140,255,0.35);
  box-shadow: 0 24px 60px rgba(7,14,39,0.35);
  box-sizing: border-box;
  z-index: 5;
}
.dg-ws-overlay-text {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body-dark);
}

/* S02 right: editorial */
.dg-s02-h2 {
  margin: 20px 0 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--text-heading-dark);
}
.dg-s02-p1 {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-prose-light);
}
.dg-s02-p2 {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted-light);
}
.dg-s02-triad { margin-top: 26px; display: flex; flex-direction: column; }


/* ════════════════════════════════════════════════════════════════
   S03 — Tıklama ≠ Sonuç (light)
   JSX: scene-03-tiklama.jsx
   Padding: 110px 0 116px | Container: 1240px
   Top: 200px 1fr 380px gap 60 align end
════════════════════════════════════════════════════════════════ */
.dg-s03 {
  position: relative;
  background: #F7F9FC;
  border-top: 1px solid rgba(8,18,47,0.08);
  padding: 80px 0 72px;
}

.dg-s03-top {
  display: grid;
  grid-template-columns: 176px 1fr 330px;
  gap: 44px;
  align-items: end;
}
/* S03: section number stacked (column) layout, per SectionNumber default */
.dg-s03 .dg-secnum-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.dg-s03 .dg-secnum {
  font-size: 46px;
  background: linear-gradient(135deg,#526DFF 0%,#9A8CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dg-s03-secnum-rule {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg,#526DFF,#9A8CFF);
}
.dg-s03 .dg-secnum-label-light {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted-light);
}

.dg-s03-h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--text-heading-dark);
  margin: 18px 0 0;
}

.dg-s03-p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted-light);
  margin: 0;
}

/* JourneyRow: 5 Stage panels + links */
.dg-journey {
  display: flex;
  align-items: center;
  margin-top: 36px;
}

/* Stage panel: scaled from 224×300px */
.dg-stage {
  width: 190px;
  height: 255px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(8,18,47,0.12);
  box-shadow: 0 14px 34px rgba(7,14,39,0.06);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dg-stage--accent {
  background: var(--bg-navy-card);
  border: 1px solid rgba(154,140,255,0.4);
  box-shadow: 0 24px 56px rgba(7,14,39,0.35);
}
.dg-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dg-stage-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-light);
}
.dg-stage--accent .dg-stage-label { color: rgba(196,181,253,0.9); }
.dg-stage-num {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(82,109,255,0.5);
}
.dg-stage--accent .dg-stage-num { color: rgba(255,255,255,0.35); }

/* Journey link arrow */
.dg-journey-link {
  flex: 1;
  height: 1px;
  background: rgba(82,109,255,0.35);
  position: relative;
  min-width: 16px;
}
.dg-journey-link::after {
  content: '';
  position: absolute;
  right: -1px; top: -4px;
  width: 8px; height: 8px;
  border-top: 1.4px solid rgba(82,109,255,0.6);
  border-right: 1.4px solid rgba(82,109,255,0.6);
  transform: rotate(45deg);
}

/* Stage 01: Google Ads ad mockup */
.dg-stage-ad-card {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-light-inset);
  border: 1px solid var(--border-light-inset);
  flex: 1;
}
.dg-stage-ad-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(82,109,255,0.1);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 8px;
}
.dg-stage-ad-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-blue);
  line-height: 1.3;
}

/* Stage 02: Landing Page browser */
.dg-stage-browser {
  flex: 1;
  border-radius: 10px;
  border: 1px solid var(--border-light-inset);
  overflow: hidden;
  background: #fff;
}
.dg-stage-browser-chrome {
  height: 20px;
  background: var(--bg-light-inset);
  border-bottom: 1px solid var(--border-light-inset);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}
.dg-stage-browser-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #E2E8F0;
}
.dg-stage-browser-body { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.dg-stage-browser-h {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-heading-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.dg-stage-browser-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--gradient-btn);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  width: fit-content;
}

/* Stage 03: UX rows */
.dg-stage-ux-rows { display: flex; flex-direction: column; gap: 10px; }
.dg-stage-ux-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--bg-light-inset);
  border: 1px solid var(--border-light-inset);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-prose-strong);
}
.dg-stage-ux-icon { color: var(--accent-blue); flex-shrink: 0; }
.dg-stage-touch-target {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.dg-stage-touch-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px dashed rgba(82,109,255,0.45);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dg-stage-touch-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(82,109,255,0.5);
}
.dg-stage-touch-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-light);
}

/* Stage 04: Aksiyon rows */
.dg-stage-action-rows { display: flex; flex-direction: column; gap: 10px; }
.dg-stage-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--border-light-card);
}
.dg-stage-action-left { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-prose-strong); }
.dg-stage-action-icon { color: var(--accent-blue); }

/* Stage 05: Dönüşüm (accent dark) */
.dg-stage-conv-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(82,109,255,0.22);
  border: 1px solid rgba(154,140,255,0.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-light-violet);
}
.dg-stage-conv-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
}
.dg-stage-tracking {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

/* Statement below journey */
.dg-s03-statement {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 44px;
  margin-top: 36px;
}
.dg-s03-stmt-p1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--text-muted-light);
  margin: 0;
}
.dg-s03-stmt-p2 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--text-heading-dark);
  max-width: 820px;
  margin: 8px 0 0;
}

/* Diagnostics row */
.dg-s03-diag {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 44px;
  align-items: start;
  border-top: 1px solid rgba(8,18,47,0.1);
  padding-top: 26px;
  margin-top: 32px;
}
.dg-s03-diag-eyebrow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-muted-light);
  text-transform: uppercase;
}
.dg-s03-diag-items {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dg-s03-diag-item {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading-dark);
  white-space: nowrap;
}
.dg-s03-diag-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(82,109,255,0.4);
  flex-shrink: 0;
}
.dg-s03-diag-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  margin-top: 20px;
}
.dg-s03-diag-p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-prose-light);
  margin: 0;
}
.dg-s03-diag-p2 {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted-light);
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   S04 — Sosyal Medya (dark)
   JSX: scene-social.jsx
   Padding: 124px 0 120px | Container: 1340px
   Grid: 540px 700px gap 100
════════════════════════════════════════════════════════════════ */
.dg-s04 {
  position: relative;
  background: var(--bg-navy);
  padding: 72px 0 64px;
  overflow: hidden;
}
.dg-s04-ambient {
  position: absolute;
  right: -158px; top: 70px;
  width: 634px; height: 634px;
  background: var(--ambient-light);
  pointer-events: none;
}

.dg-s04-grid {
  display: grid;
  grid-template-columns: 476px 616px;
  gap: 88px;
  align-items: center;
}

/* Left editorial */
.dg-s04-h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 20px 0 0;
}
.dg-s04-p1 {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body-dark);
  margin: 20px 0 0;
  max-width: 420px;
}
.dg-s04-p2 {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body-dim);
  margin: 12px 0 0;
  max-width: 420px;
}
.dg-s04-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.dg-s04-divider-line {
  width: 30px; height: 1px;
  background: rgba(154,140,255,0.5);
}

/* Social visual: 616×616px absolute layers (scaled from 700×700) */
.dg-social-visual {
  position: relative;
  width: 616px;
  height: 616px;
  flex-shrink: 0;
}

/* Surface style for glass cards */
.dg-surface {
  background: rgba(10,20,55,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

/* StoryArtboard: scaled from left 16, top 96, w 214 */
.dg-story-artboard {
  position: absolute;
  left: 14px; top: 84px;
  width: 188px;
  z-index: 1;
}
.dg-story-artboard-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 10px;
  margin-left: 2px;
}
.dg-story-card {
  width: 188px;
  height: 334px;
  border-radius: 14px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dg-story-progress { display: flex; gap: 4px; }
.dg-story-bar {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
}
.dg-story-bar-fill { display: block; height: 100%; background: var(--accent-light-violet); }
.dg-story-art-slot {
  flex: 1;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.12);
  min-height: 201px;
  max-height: 201px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.15);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-story-heading {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
}
.dg-story-action {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
}
.dg-story-action-icon { color: var(--accent-light-violet); }

/* CalendarSurface: scaled from left 0, top 470, w 240 */
.dg-calendar-surface {
  position: absolute;
  left: 0; top: 414px;
  width: 211px;
  z-index: 2;
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(9,19,52,0.94);
}
.dg-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dg-cal-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(196,181,253,0.9);
  text-transform: uppercase;
}
.dg-cal-period {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
.dg-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.dg-cal-day-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.32);
  text-align: center;
  text-transform: uppercase;
}
.dg-cal-cell {
  height: 20px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
}
.dg-cal-cell--post     { background: rgba(82,109,255,0.85); border: none; }
.dg-cal-cell--story    { background: rgba(154,140,255,0.85); border: none; }
.dg-cal-cell--campaign { background: rgba(196,181,253,0.85); border: none; }
.dg-cal-legend {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.dg-cal-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.dg-cal-legend-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
}
.dg-cal-legend-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* PhoneMock: scaled from left 214, top 16, 300×604 */
.dg-phone-mock {
  position: absolute;
  left: 188px; top: 14px;
  width: 264px; height: 532px;
  z-index: 3;
  border-radius: 37px;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #14204d, #0a1230);
  border: 1px solid rgba(154,140,255,0.34);
  box-shadow: 0 36px 80px rgba(0,0,0,0.6);
}
.dg-phone-inner {
  width: 100%; height: 100%;
  border-radius: 34px;
  background: #060D26;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dg-phone-notch {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dg-phone-notch-bar {
  width: 78px; height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.dg-phone-profile {
  padding: 4px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dg-phone-profile-left { display: flex; align-items: center; gap: 9px; }
.dg-phone-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(82,109,255,0.2);
  border: 1px solid rgba(154,140,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #C4B5FD;
}
.dg-phone-account-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: block;
}
.dg-phone-account-sub {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
.dg-phone-menu { color: rgba(255,255,255,0.4); }
.dg-phone-post-area {
  height: 227px;
  background: rgba(255,255,255,0.04);
  border-top: none;
  border-bottom: none;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.1);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-phone-reactions {
  padding: 14px 14px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.dg-phone-reaction-icon { color: rgba(255,255,255,0.55); }
.dg-phone-caption {
  padding: 12px 12px 0;
  width: 192px;
}
.dg-phone-caption-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.dg-phone-hashtags {
  margin-top: auto;
  padding: 0 14px 16px;
  display: flex;
  gap: 6px;
}
.dg-phone-hashtag {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(196,181,253,0.85);
}

/* PostCanvas: scaled from left 452, top 452, 256×256 */
.dg-post-canvas {
  position: absolute;
  left: 398px; top: 398px;
  width: 225px; height: 225px;
  z-index: 4;
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(13,23,60,0.92);
}
.dg-post-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dg-post-canvas-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(196,181,253,0.85);
  text-transform: uppercase;
}
.dg-post-canvas-body {
  flex: 1;
  display: flex;
  gap: 10px;
}
.dg-post-canvas-art {
  width: 92px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.12);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.1);
  font-size: 8px;
}
.dg-post-canvas-text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.dg-post-canvas-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}
.dg-post-canvas-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.dg-post-canvas-brand {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}
.dg-post-canvas-swatches { display: flex; gap: 5px; }
.dg-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
}

/* EmojiSignal chips */
.dg-emoji-signal {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: rgba(13,23,60,0.9);
  border: 1px solid rgba(154,140,255,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-chip);
}

/* S04 triad below */
.dg-s04-triad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 36px;
}


/* ════════════════════════════════════════════════════════════════
   S05 — Kreatif (light, rounded top)
   JSX: scene-05-kreatif.jsx
   Padding: 112px 0 116px | Container: 1240px
   Top: 200px 1fr 420px gap 60 align end
   Below: grid 340px 1fr gap 30
════════════════════════════════════════════════════════════════ */
.dg-s05 {
  position: relative;
  background: #F7F9FC;
  border-radius: 40px 40px 0 0;
  box-shadow: var(--shadow-sheet);
  z-index: 2;
  padding: 80px 0 72px;
}

.dg-s05-top {
  display: grid;
  grid-template-columns: 176px 1fr 370px;
  gap: 44px;
  align-items: end;
}

/* S05: section number stacked (column) layout, per SectionNumber default */
.dg-s05 .dg-secnum-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.dg-s05 .dg-secnum {
  font-size: 46px;
  background: linear-gradient(135deg,#526DFF 0%,#9A8CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dg-s05-secnum-rule {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg,#526DFF,#9A8CFF);
}
.dg-s05 .dg-secnum-label-light {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted-light);
}

.dg-s05-h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-heading-dark);
  margin: 18px 0 0;
}
.dg-s05-p1 {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-prose-light);
}
.dg-s05-p2 {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted-light);
}

/* Creative frames grid: scaled from 340px 1fr, gap 30 */
.dg-creative-grid {
  display: grid;
  grid-template-columns: 296px 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}
.dg-creative-right { display: flex; flex-direction: column; gap: 24px; }
.dg-creative-right-bottom {
  display: grid;
  grid-template-columns: 238px 1fr;
  gap: 24px;
}

/* Frame: label row + art panel, no outer card */
.dg-frame {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dg-frame-label-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.dg-frame-name {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-muted-light);
  text-transform: uppercase;
}
.dg-frame-ratio {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(82,109,255,0.65);
  text-transform: uppercase;
}
.dg-frame-art {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(8,18,47,0.12);
  background: var(--bg-navy);
  box-shadow: 0 20px 48px rgba(7,14,39,0.12);
}
/* StoryPiece: real 1080×1920 aspect-ratio — scales correctly (no distortion, no over-cropping) at every column width */
.dg-frame--story .dg-frame-art { height: auto; aspect-ratio: 1080 / 1920; }
/* MainCreative: real 1600×630 aspect-ratio */
.dg-frame--main .dg-frame-art { height: auto; aspect-ratio: 1600 / 630; }
/* PostPiece: real 1080×1080 (square) aspect-ratio */
.dg-frame--post .dg-frame-art { height: auto; aspect-ratio: 1 / 1; }
/* CampaignPiece: real 1200×628 aspect-ratio */
.dg-frame--campaign .dg-frame-art { height: auto; aspect-ratio: 1200 / 628; }

/* CatalogPiece: full-width banner, scaled height */
.dg-frame--catalog { margin-top: 24px; }
.dg-frame--catalog .dg-frame-art { height: 272px; }

.dg-frame-art-inner {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.dg-frame-art-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.42);
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════
   S06 — Bütün Resim (dark)
   JSX: scene-06-butun-resim.jsx
   Padding: 120px 0 124px | Container: 1240px
   MasterSystem: 1040×650px
════════════════════════════════════════════════════════════════ */
.dg-s06 {
  position: relative;
  background: var(--bg-navy);
  padding: 80px 0 72px;
  overflow: hidden;
}

.dg-s06-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dg-s06-secnum-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.dg-s06-h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 20px 0 0;
  white-space: nowrap;
}
.dg-s06-tagline {
  margin: 20px 0 0;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-light-violet);
}

/* MasterSystem: scaled ~15% from 1040×650px; height compacted ~22% (552px→433px, desktop only —
   see the vertical-compaction notes near .dg-arch-node--core below) */
.dg-master-system {
  position: relative;
  width: 884px;
  height: 433px;
  margin: 40px auto 0;
}
.dg-ms-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ArchNode */
.dg-arch-node {
  position: absolute;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(13,26,68,0.92);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dg-arch-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(82,109,255,0.16);
  border: 1px solid rgba(154,140,255,0.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-icon-blue);
  flex-shrink: 0;
}
.dg-arch-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #F7F8FF;
  text-transform: uppercase;
  display: block;
}
.dg-arch-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-light-violet);
  text-transform: uppercase;
  display: block;
  margin-top: 3px;
}

/* Core node (larger) — scaled; top compacted 144px→98px alongside the master-system vertical
   compaction (this class-level value is redundant with the matching inline style in Blade, kept
   in sync for consistency — the inline value is what actually renders) */
.dg-arch-node--core {
  left: 328px; top: 98px;
  width: 255px; height: 102px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24,40,96,0.96), rgba(9,19,52,0.96));
  border: 1px solid rgba(154,140,255,0.55);
  box-shadow: 0 30px 68px rgba(7,14,39,0.7), 0 0 0 7px rgba(82,109,255,0.06);
  padding: 17px 19px;
}
.dg-arch-node--core .dg-arch-icon {
  width: 39px; height: 39px;
  border-radius: 11px;
  background: rgba(82,109,255,0.24);
  border: 1px solid rgba(154,140,255,0.45);
}
.dg-arch-node--core .dg-arch-label { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.dg-arch-node--core .dg-arch-sub { font-size: 9.5px; color: var(--accent-light-violet); margin-top: 5px; }

/* Satellite */
.dg-satellite {
  position: absolute;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(13,26,68,0.9);
  border: 1px dashed rgba(154,140,255,0.55);
  box-sizing: border-box;
}
.dg-satellite-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: #F7F8FF;
  text-transform: uppercase;
  display: block;
}
.dg-satellite-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(226,222,255,0.78);
  text-transform: uppercase;
  display: block;
  margin-top: 3px;
}

/* CRO badge — scaled */
.dg-cro-badge {
  position: absolute;
  left: 660px; top: 255px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(13,26,68,0.94);
  border: 1px solid rgba(196,181,253,0.5);
}
.dg-cro-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #F7F8FF;
  text-transform: uppercase;
  display: block;
}
.dg-cro-sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(226,222,255,0.78);
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

/* Zone labels */
.dg-ms-zone {
  position: absolute;
  left: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(196,181,253,0.8);
  text-transform: uppercase;
}

/* S06 body text */
.dg-s06-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  max-width: 940px;
  margin: 44px auto 0;
}
.dg-s06-body-p1 {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body-dark);
  margin: 0;
}
.dg-s06-body-p2 {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body-dim);
}
.dg-s06-body-right {
  padding-left: 26px;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.dg-s06-body-p3 {
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 500;
  color: #fff;
  margin: 0;
}
.dg-s06-tagline-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.dg-s06-tagline-line {
  width: 34px; height: 1px;
  background: rgba(154,140,255,0.5);
}
.dg-s06-tagline-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(196,181,253,0.85);
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════
   S07 — Nasıl Çalışıyorum (light, rounded top)
   JSX: scene-07-nasil.jsx
   Padding: 116px 0 120px | Container: 1240px
   Grid: 200px 330px 1fr gap 30 align center
   Orbit: 620×620px
════════════════════════════════════════════════════════════════ */
.dg-s07 {
  position: relative;
  background: #F7F9FC;
  border-radius: 40px 40px 0 0;
  box-shadow: var(--shadow-sheet);
  z-index: 2;
  padding: 80px 0 72px;
}

.dg-s07-grid {
  display: grid;
  grid-template-columns: 176px 300px 1fr;
  gap: 26px;
  align-items: center;
}

.dg-s07-h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text-heading-dark);
  margin: 18px 0 0;
}
.dg-s07-eyebrow-wrap { margin-bottom: 0; }
.dg-s07-aside {
  margin-top: 18px;
  padding-left: 18px;
  border-left: 3px solid rgba(82,109,255,0.35);
}
.dg-s07-aside-old {
  font-size: 13px;
  font-weight: 600;
  color: rgba(8,18,47,0.35);
  text-decoration: line-through;
  letter-spacing: 0.05em;
  margin: 0;
}
.dg-s07-aside-new {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading-dark);
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin: 8px 0 0;
}

/* OptimizationOrbit: scaled ~15% from 620×620px */
.dg-orbit-wrap {
  position: relative;
  width: 527px;
  height: 527px;
  flex-shrink: 0;
}
.dg-orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Center circle: scaled from 184×184 at center (310,310) -> 156×156 at (264,264) */
.dg-orbit-center {
  position: absolute;
  left: 264px; top: 264px;
  width: 156px; height: 156px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #16265E 0%, #0A1230 100%);
  border: 1px solid rgba(154,140,255,0.45);
  box-shadow: 0 26px 60px rgba(7,14,39,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dg-orbit-center-icon { font-size: 26px; line-height: 1; color: var(--accent-light-violet); }
.dg-orbit-center-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #fff;
  text-transform: uppercase;
}
.dg-orbit-center-sub {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}

/* 6 step cards, transform: translate(-50%,-50%) on each — scaled width from 164px */
.dg-orbit-step {
  position: absolute;
  width: 139px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(8,18,47,0.1);
  box-shadow: 0 7px 20px rgba(8,18,47,0.07);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

/* radius 197 around center (264,264) — same angles as the original, scaled ~15% */
.dg-orbit-step--1 { left: 264px; top:  67px; }
.dg-orbit-step--2 { left: 435px; top: 166px; }
.dg-orbit-step--3 { left: 435px; top: 362px; }
.dg-orbit-step--4 { left: 264px; top: 461px; }
.dg-orbit-step--5 { left:  93px; top: 362px; }
.dg-orbit-step--6 { left:  93px; top: 166px; }

.dg-orbit-step-num {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}
.dg-orbit-step-name {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-heading-dark);
  display: block;
  margin-bottom: 3px;
}
.dg-orbit-step-detail {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(8,18,47,0.5);
  display: block;
}


/* ════════════════════════════════════════════════════════════════
   S08 — Manifesto (dark)
   JSX: scene-08-manifesto.jsx
   Padding: 118px 0 108px | Container: 1240px
   Grid: 200px 1fr gap 60
════════════════════════════════════════════════════════════════ */
.dg-s08 {
  position: relative;
  background: var(--bg-navy);
  padding: 76px 0 68px;
  overflow: hidden;
}
.dg-s08-ambient {
  position: absolute;
  left: -140px; top: 52px;
  width: 560px; height: 560px;
  background: var(--ambient-light);
  pointer-events: none;
}

.dg-s08-grid {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 44px;
  align-items: start;
}

/* S08: section number stacked (column) layout, dark tone per SectionNumber */
.dg-s08 .dg-secnum-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.dg-s08 .dg-secnum {
  font-size: 54px;
  background: none;
  -webkit-text-fill-color: unset;
  color: rgba(255,255,255,0.45);
}
.dg-s08-secnum-rule {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(154,140,255,0.5), transparent);
}
.dg-s08 .dg-secnum-label-light {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #94A3B8;
}

.dg-s08-h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 820px;
  margin: 20px 0 0;
}
.dg-s08-items { display: flex; flex-direction: column; gap: 0; }
.dg-s08-item {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 44px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.dg-s08-ghost-num {
  font-size: 78px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: rgba(255,255,255,0.07);
  user-select: none;
}
.dg-s08-text {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.86);
  max-width: 820px;
  margin: 0;
}
.dg-s08-text em {
  font-style: normal;
  color: var(--accent-light-violet);
}


/* ════════════════════════════════════════════════════════════════
   FINAL CTA
   JSX: scene-08-manifesto.jsx (FinalCTA component)
   Padding: 132px 0 140px | Container: 1040px | bg-navy-darker
════════════════════════════════════════════════════════════════ */
.dg-cta {
  position: relative;
  background: #F7F9FC;
  padding: 84px 0 76px;
  overflow: hidden;
}
/* Dot texture 0.5 opacity */
.dg-cta-bg {
  position: absolute;
  inset: 0;
  background:
    var(--dot-texture),
    radial-gradient(ellipse 900px 620px at 50% 50%, rgba(82,109,255,0.1) 0%, transparent 70%);
  background-size: var(--dot-texture-size), auto;
  opacity: 0.5;
  pointer-events: none;
}
/* Decorative SVG lines */
.dg-cta-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dg-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dg-cta-h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--text-heading-dark);
  margin: 20px 0 0;
}
.dg-cta-p1 {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-prose-light);
  margin: 20px 0 0;
  max-width: 600px;
}
.dg-cta-p2 {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted-light);
  margin: 8px 0 0;
  max-width: 600px;
}
.dg-cta-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Tagline row */
.dg-cta-tagline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.dg-cta-tagline-line {
  width: 34px; height: 1px;
  background: rgba(8,18,47,0.15);
}
.dg-cta-tagline-text {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--text-muted-light);
  text-transform: uppercase;
}
.dg-cta-tagline-text .dg-cta-x { color: rgba(8,18,47,0.3); }

/* Final CTA on light background: secondary button needs dark-readable styling */
.dg-cta .dg-btn-secondary {
  color: var(--text-prose-strong);
  border: 1px solid rgba(8,18,47,0.15);
}
.dg-cta .dg-btn-secondary:hover {
  border-color: rgba(8,18,47,0.3);
  color: var(--text-heading-dark);
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — 1440px+ (ensure containers don't overflow)
════════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
  .dg-w1340 { width: calc(100% - 60px); }
  .dg-sys-diagram { zoom: 0.85; }
  .dg-hero-grid { grid-template-columns: 1fr 580px; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — 1280px
════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .dg-w1340,
  .dg-w1240 { width: calc(100% - 48px); }
  .dg-s02-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .dg-s02-order-1, .dg-s02-order-2, .dg-s02-order-3 { grid-column: 1; grid-row: auto; }
  .dg-s02-order-1 { order: 1; }
  .dg-s02-order-2 { order: 2; }
  .dg-s02-order-3 { order: 3; margin-top: 12px; }
  .dg-ws-wrap { width: 100%; }
  .dg-workspace { width: 100%; }
  .dg-ws-overlay { position: static; width: 100%; left: auto; bottom: auto; margin-top: 16px; }
  .dg-s04-grid { grid-template-columns: 1fr; gap: 60px; }
  .dg-social-visual { zoom: 0.885; margin: 0 auto; }
  .dg-s06-h2 { white-space: normal; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — 1024px (tablet: real reflow starts here for the
   diagrams that were genuinely overflowing or over-shrinking at
   this width — Ecosystem, Process's row-based neighbor S03, and
   Social Media. 1280px/1400px above this are left untouched —
   protected desktop baseline.)
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dg-hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .dg-sys-diagram { zoom: 0.7; margin: 0 auto; }
  .dg-s01-content-grid { grid-template-columns: 1fr; gap: 40px; }
  .dg-s01-top-grid { grid-template-columns: 1fr; }
  .dg-funnel-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
  /* Funnel row: stack the SVG above its stage labels instead of squeezing them side-by-side (avoids overflow below ~459px) */
  .dg-funnel-row { flex-direction: column; align-items: center; width: 100%; max-width: 100%; gap: 20px; }
  .dg-funnel-svg-wrap {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 380 / 620;
    flex-shrink: 1;
  }
  .dg-funnel-labels {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
  }
  .dg-funnel-label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    border-top: 1px solid rgba(8,18,47,0.08);
    padding-top: 10px;
  }
  /* Funnel labels are now a static readable list, not tiny sidebar text — size them accordingly */
  .dg-funnel-label .dg-caps { font-size: 11px !important; }
  .dg-funnel-label-desc { font-size: 12.5px; line-height: 1.55; }

  .dg-s02-grid { grid-template-columns: 1fr; }
  .dg-s03-top { grid-template-columns: 1fr; gap: 20px; }
  .dg-s03-statement { grid-template-columns: 1fr; gap: 16px; }
  .dg-s03-diag { grid-template-columns: 1fr; gap: 20px; }
  .dg-s04-grid { grid-template-columns: 1fr; }
  .dg-s04-triad-grid { grid-template-columns: 1fr; gap: 0; }
  .dg-s05-top { grid-template-columns: 1fr; }
  .dg-creative-grid { grid-template-columns: 1fr; }
  .dg-s07-grid { grid-template-columns: 1fr; }
  .dg-orbit-wrap { overflow-x: auto; }
  .dg-s08-grid { grid-template-columns: 1fr; }
  .dg-s06-body { grid-template-columns: 1fr; gap: 30px; }
  .dg-s06-body-right { padding-left: 0; border-left: none; }

  /* S03 journey: real vertical stack starting at tablet, not just mobile — the horizontal row
     (5×190px stages + connectors, ~1014px minimum) genuinely overflows a 1024px viewport's
     container, which the old overflow-x:auto turned into an actual horizontal scroll at exactly
     this breakpoint. Real reflow instead, per "do not solve readability with horizontal scrolling". */
  .dg-journey {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    gap: 0;
  }
  .dg-stage {
    width: 100%;
    max-width: 420px;
    height: auto;
    min-height: 220px;
    margin: 0 auto;
  }
  .dg-journey-link {
    flex: none;
    width: 1px;
    height: 24px;
    min-width: 0;
    margin: 4px auto;
    background: rgba(82,109,255,0.35);
  }
  .dg-journey-link::after {
    right: -4px; top: auto; bottom: -1px;
    transform: rotate(135deg);
  }
  /* Stage internals: each card now renders at real width instead of squeezed into a 190px column */
  .dg-stage-label, .dg-stage-num { font-size: 9.5px; }
  .dg-stage-ad-badge { font-size: 9px; }
  .dg-stage-ad-title { font-size: 13.5px; }
  .dg-stage-browser-h { font-size: 13px; }
  .dg-stage-browser-btn { font-size: 9px; }
  .dg-stage-ux-row { font-size: 13px; }
  .dg-stage-action-left { font-size: 13.5px; }
  .dg-stage-conv-title { font-size: 20px; }
  .dg-stage-tracking { font-size: 9.5px; }
  .dg-stage-touch-label { font-size: 9.5px; }

  /* S04 Social Media: real composition instead of a zoomed-down canvas. Same phone mock / story
     artboard / calendar surface / post canvas, reflowed into a stacked column at a genuinely
     useful width rather than shrunk to fit. */
  .dg-social-visual {
    position: static;
    width: 100%;
    max-width: 480px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 0 auto;
  }
  .dg-story-artboard,
  .dg-calendar-surface,
  .dg-phone-mock,
  .dg-post-canvas {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100%;
  }
  .dg-story-artboard { max-width: 300px; order: 2; }
  .dg-phone-mock { max-width: 280px; height: auto; aspect-ratio: 300 / 604; order: 1; }
  .dg-post-canvas { max-width: 320px; height: auto; aspect-ratio: 1 / 1; order: 3; }
  .dg-calendar-surface { max-width: 340px; order: 4; }
  .dg-story-card { width: 100%; height: auto; aspect-ratio: 214 / 380; }
  .dg-story-art-slot { min-height: 0; max-height: none; }
  .dg-phone-post-area { height: auto; flex: 1; }
  .dg-emoji-signal { display: none; }
  /* Social visual internals: bumped now that everything renders at real, readable width */
  .dg-story-artboard-label { font-size: 10.5px; }
  .dg-story-heading { font-size: 15px; }
  .dg-story-action { font-size: 10px; }
  .dg-cal-title { font-size: 10.5px; }
  .dg-cal-period { font-size: 9.5px; }
  .dg-phone-account-name { font-size: 13.5px; }
  .dg-phone-caption-title { font-size: 15px; }
  .dg-phone-hashtag { font-size: 12px; }
  .dg-post-canvas-label { font-size: 10px; }

  /* S06 Ecosystem: real stacked composition instead of the horizontal-scroll fallback — the
     884px-wide diagram genuinely overflows containers narrower than ~930px, which the old
     overflow-x:auto turned into horizontal scrolling in part of the tablet range. Same nodes,
     same relationships, same labels — reflowed vertically; the section is allowed to grow taller. */
  .dg-master-system {
    position: static;
    width: 100%;
    max-width: 520px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 36px auto 0;
  }
  .dg-ms-svg, .dg-ms-zone, .dg-master-system > span { display: none; }
  .dg-arch-node, .dg-satellite, .dg-cro-badge {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    padding: 14px 16px;
  }
  .dg-arch-node--core { order: -1; padding: 18px 20px; }
  .dg-satellite, .dg-cro-badge { border-style: solid; }
  /* Node labels: readable now that each card is full-width instead of a small floating tag */
  .dg-arch-icon { width: 32px; height: 32px; }
  .dg-arch-label { font-size: 13px; }
  .dg-arch-sub { font-size: 11px; }
  .dg-arch-node--core .dg-arch-label { font-size: 21px; }
  .dg-arch-node--core .dg-arch-sub { font-size: 11px; }
  .dg-satellite-label { font-size: 12.5px; }
  .dg-satellite-sub { font-size: 11px; }
  .dg-cro-label { font-size: 13px; }
  .dg-cro-sub { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — 768px (remaining tablet/mobile-transition fixes:
   Hero diagram, Google Ads workspace, Process orbit, and the
   typography/gap cleanups that only bite once the container drops
   below ~550px)
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dg-w1040 { width: calc(100% - 40px); }
  .dg-hero-h1 { font-size: 32px; }

  /* S01 funnel visualization: hidden on mobile per explicit request (≤768px only) — markup, tablet, and desktop untouched.
     Hiding the outer wrap takes the SVG funnel, DÖNÜŞÜM card, and the KİTLE/İLGİLİ TRAFİK/LANDING PAGE/AKSİYON label rows with it in one rule, at zero leftover height. */
  .dg-funnel-wrap { display: none; }

  /* S01 empty spacer row (QA fix): the desktop-alignment `<span></span>` (Col 1 of .dg-s01-content-grid,
     unclassed in Blade) becomes a real first grid row once the grid drops to a single column at
     ≤1024px, and the grid's own gap:40px renders before the prose text as a result. No inline style
     on this span, so no !important needed. ≤768px only — tablet (769-1024px) keeps its existing layout. */
  .dg-s01-content-grid > span:first-child { display: none; }

  /* S02 Google Ads workspace mockup: hidden on mobile per explicit request (≤768px only) — markup, tablet, and desktop untouched.
     .dg-ws-wrap is the outer wrap for both the light workspace card and the dark "Arama Terimleri" overlay card, so one rule removes both at zero leftover height. */
  .dg-ws-wrap { display: none; }

  /* S04 Social Media visual composition: RESTORED on mobile after a read-only audit confirmed the
     real Story/Post/Campaign photos, their DB paths, storage files, and accessors are all intact —
     only presentation was hiding them. This used to carry two rules:
       .dg-social-visual { display: none; }
       .dg-s04-grid > div:last-child { display: none !important; }
     (the second one hid the visual's own grid wrapper — Blade's inline
     style="display:flex;justify-content:center" — added only to close the phantom empty-grid-row gap
     that the first rule's hidden-but-present cell otherwise left behind.) Both are removed here: with
     the visual visible again, nothing above ≤768px scopes it away, so the already-working ≤1024px
     real-stacked composition (position:static, flex column, max-width:480px — see that media query
     above) simply takes over, and the wrapper's own inline display:flex applies natively with no
     override needed — no new mobile layout was built for this. */

  /* .dg-s04-triad-grid's margin-top:32px !important below is UNRELATED to the visual's visibility — it
     governs spacing entirely inside the text column (between the divider/tagline and the 3-icon triad
     row), independent of whatever sits in the grid's other column. Left as-is; QA screenshot confirmed
     restoring the visual does not disturb this internal text-column spacing. */
  .dg-s04-triad-grid { margin-top: 32px !important; }

  /* S04 → S05 transition: 64px + 80px (prior values) combined to 24px + 28px = 52px, inside the
     requested 48-56px feel. S04's content and S05's design are untouched — only outer padding. */
  .dg-s04 { padding-bottom: 24px; }
  .dg-s05 { padding-top: 28px; }

  /* S05 intro copy → STORY spacing. Real source: .dg-creative-grid's Blade element carries an INLINE
     style="margin-top:52px" (the class rule's own margin-top:40px is overridden by it on desktop too).
     52px inline + ~6-9px of .dg-s05-p2's own line-height slack (14.5px font, line-height:1.75) below its
     last text line summed to ~58-61px visible — above the requested 40-48px. Needs !important since the
     conflict is with an inline style, not another stylesheet rule. Card sizes/ratios/typography inside
     the grid are untouched — this is only the grid's own top offset. */
  .dg-creative-grid { margin-top: 36px !important; }

  /* S05 → S06 transition: the catalog frame is the literal last element in the section (no trailing
     wrapper margin after it), so the visible gap is purely .dg-s05's own padding-bottom (72px, desktop
     value, unmodified until now) + .dg-s06's own padding-top (80px, desktop value, unmodified until now)
     = 152px. Combined down to 24px + 28px = 52px, inside the requested 48-56px feel — same split already
     used for the S04→S05 transition above. Only outer section padding changed; the catalog frame's own
     size/margin and S06's content are untouched. */
  .dg-s05 { padding-bottom: 24px; }
  .dg-s06 { padding-top: 28px; }

  /* S06 Ecosystem — mobile-only compact polish (≤768px; the ≤1024px real-stack rules above stay
     exactly as they are for tablet, so 769-1024px is untouched).
     Audited every real value first, per instruction, rather than guessing:
     - Secondary cards (.dg-arch-node non-core, .dg-satellite, .dg-cro-badge) currently use
       padding:14px 16px (28px vertical) around content that is itself ~32px tall (the 32×32 icon row
       for SOSYAL/SEO/GOOGLE ADS/LANDING/DÖNÜŞÜM/ANALYTICS; the 2-line label+sub stack for the
       icon-less CONTENT/API/UX/TRACKING/CRO cards lands in the same ~30-32px band) — computed total
       height ≈ 60-64px per card. That is already at/under the requested 76-88px feel, so padding was
       left untouched: shrinking it further would risk crushing the icon/label alignment the brief
       explicitly protects, for a range that's already satisfied.
     - .dg-master-system's own gap is 12px (inherited from the ≤1024px rule) — the one real value
       above the requested 8-10px, so it's tightened here, only at ≤768px. Across the 11 secondary
       cards this alone removes 11 × 3px = 33px of total section height.
     - .dg-s06-body's margin-top to the ANALYTICS→description transition is 44px (inline style,
       matching the class rule) — already inside the requested 40-48px band, but nudged to the low
       end (40px) to fully address the "biraz fazla" feel; needs !important to beat the inline style. */
  .dg-master-system { gap: 9px; }
  .dg-s06-body { margin-top: 40px !important; }

  /* Hero system diagram: hidden on mobile per explicit request (≤768px only) — markup, tablet, and desktop untouched */
  .dg-sys-diagram {
    display: none;
  }

  /* Hero ghost grid row (QA fix): .dg-sys-diagram above hides only the inner diagram; its unclassed
     wrapper (Blade: <div style="display:flex;justify-content:center">) still lives as a real
     .dg-hero-grid item. Since .dg-hero-grid drops to grid-template-columns:1fr at ≤1024px with
     gap:60px, that empty wrapper forms a second grid row and the 60px gap renders before it,
     after the Hero CTA. The wrapper carries an inline style="display:flex", so display:none needs
     !important to actually win. ≤768px only — tablet (769-1024px) keeps its existing zoom treatment. */
  .dg-hero-grid > div:last-child { display: none !important; }
  .dg-sys-svg { display: none; }
  .dg-sys-diagram > span { display: none; } /* decorative glow spans, meaningless once static */
  .dg-sys-node, .dg-sys-core {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100%;
  }
  .dg-sys-core { grid-column: 1 / -1; order: -1; }
  .dg-sys-node-label { font-size: 11.5px; }
  .dg-sys-node-sub { font-size: 9.5px; }
  .dg-sys-core-sub { font-size: 10px; }

  /* Google Ads workspace: the significant mobile improvement the brief asks for. Same component,
     reflowed internals. The header's account-name / divider / search chip are decorative mockup
     chrome (not real page content) that the card's own overflow:hidden was silently CLIPPING once
     the container narrowed below ~550px — hiding them here both fixes that clipping and gives the
     "near-full width, useful" composition the brief wants. */
  .dg-ws-header-account { display: none; }
  .dg-ws-header-div { display: none; }
  .dg-ws-header-search { display: none; }
  .dg-ws-body { grid-template-columns: 1fr; }
  .dg-ws-rail { display: none; }
  .dg-ws-main { padding: 20px 18px 22px; }
  .dg-ws-campaign-title { font-size: 21px; }
  .dg-ws-details { flex-wrap: wrap; row-gap: 14px; column-gap: 20px; }
  .dg-ws-detail-val { font-size: 14px; }
  .dg-ws-kw-row { gap: 10px; }
  .dg-ws-kw-row > span:first-child { min-width: 0; flex: 1 1 auto; }
  .dg-ws-kw-text { font-size: 14.5px; white-space: normal; }
  .dg-ws-kw-match { font-size: 11.5px; }
  .dg-ws-bottom { grid-template-columns: 1fr; gap: 20px; }
  .dg-ws-neg-tag { font-size: 12px; }
  .dg-ws-conv-row { font-size: 13px; }
  .dg-ws-loc-pill { font-size: 12px; }
  .dg-ws-locations { flex-wrap: wrap; row-gap: 10px; }
  .dg-ws-overlay { padding: 18px 20px; }
  .dg-ws-overlay-text { font-size: 13.5px; }
  .dg-workspace .dg-caps { font-size: 10.5px !important; }

  /* S02 Google Ads — KUR / ÖLÇ / İYİLEŞTİR: compact bordered info blocks on mobile, replacing the
     desktop's 148px-label + top-border-divider row layout (which the workspace dashboard removal
     left looking like plain, disconnected list rows at this width). Scoped to .dg-triad-row only —
     .dg-triad-col (S04's dark-bg triad) is untouched. */
  .dg-s02-triad { margin-top: 20px; gap: 10px; }
  .dg-triad-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--border-light-card);
    border-radius: var(--radius-md);
    background: var(--bg-light-inset);
  }
  .dg-triad-word { font-size: 22px; }
  .dg-triad-items { font-size: 15px; }
  /* the trailing standalone divider line after the last block is redundant once each block has its own border */
  .dg-s02-triad > span:last-child { display: none; }

  /* S01 → S02 transition: less empty space between the italic note block and the GOOGLE ADS badge.
     72px + 84px (prior values) combined to 32px + 32px = 64px, inside the requested 56-72px feel.
     S01's content/note styling and S02's badge/headline/text are untouched — only outer padding. */
  .dg-s01 { padding-bottom: 32px; }
  .dg-s02 { padding-top: 32px; }

  /* S02 → S03 transition: less empty space now that the workspace mockup is gone on mobile.
     56px + 80px (prior values) read as excessive once İYİLEŞTİR is a compact card; brought down to
     40px + 32px = 72px combined, inside the requested 64-80px feel. S03's content is untouched —
     only its top padding is adjusted, and only at this breakpoint. */
  .dg-s02 { padding-bottom: 40px; }
  .dg-s03 { padding-top: 32px; }

  .dg-triad-col-item { font-size: 15px; }

  /* S03 intro → first journey card: .dg-journey carries an inline margin-top:48px in the Blade
     markup, which needs !important to override. Brought down to 36px, inside the requested 32-40px feel. */
  .dg-journey { margin-top: 36px !important; }

  /* S03 → S04 transition: 72px + 64px (prior values) combined to 30px + 30px = 60px, inside the
     requested 56-64px feel. S03's diagnostics text and S04's badge/content are untouched — only outer padding. */
  .dg-s03 { padding-bottom: 30px; }
  .dg-s04 { padding-top: 30px; }

  /* S07 Process orbit: real mobile composition — center card + numbered vertical list of the 6 steps (same content, no overlap risk) */
  .dg-orbit-wrap {
    position: static;
    width: 100%;
    max-width: 420px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
  }
  .dg-orbit-svg { display: none; }
  .dg-orbit-center, .dg-orbit-step {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    transform: none !important;
    border-radius: 14px;
  }
  .dg-orbit-center { flex-direction: row; justify-content: center; padding: 18px; gap: 14px; }
  .dg-orbit-center-label { font-size: 12.5px; }
  .dg-orbit-center-sub { font-size: 9.5px; }
  .dg-orbit-step { padding: 14px 16px; }
  .dg-orbit-step-num { font-size: 10px; }
  .dg-orbit-step-name { font-size: 15px; }
  .dg-orbit-step-detail { font-size: 12.5px; }

  /* S07 → S08 transition: last orbit-step (İYİLEŞTİR) is the literal last element in .dg-orbit-wrap's
     mobile flex column (no order override on .dg-orbit-step, so DOM order = visual order; no
     margin-bottom on the step or the wrap), and the wrap itself is the last thing in .dg-s07-grid's
     third column — so the visible gap is purely .dg-s07's own padding-bottom (72px, desktop value,
     unmodified until now) + .dg-s08's own padding-top (76px, desktop value, unmodified until now)
     = 148px. Combined down to 28px + 28px = 56px, inside the requested 52-64px feel — same
     outer-padding-only approach used for every prior section transition in this pass. 07's cards,
     08's dark-area "08" numbering, and both sections' content are untouched. */
  .dg-s07 { padding-bottom: 28px; }
  .dg-s08 { padding-top: 28px; }

  /* S08 headline → 01 spacing. Real source: .dg-s08-items carries an INLINE style="margin-top:52px"
     (the class rule itself sets no margin-top at all, only display/flex-direction/gap:0). That inline
     52px is the ONLY thing between the headline and the first item's own border-top line — .dg-s08-h2
     has no margin-bottom, .dg-s08-grid has no margin-bottom, and item 01's own padding-top (32px,
     "01 maddesinin kendi iç layout'u", left untouched) starts only AFTER that border line, i.e. inside
     the item itself. Reduced the inline 52px to 44px (needs !important to beat the inline style),
     landing in the requested 40-48px feel measured to the first item's border-top line. */
  .dg-s08-items { margin-top: 44px !important; }

  /* S08 → Final CTA transition: item 03 is followed only by a zero-height divider span
     (`<span style="border-top:...">`, no padding/margin of its own) inside .dg-s08-items, then the
     section closes immediately — so the visible dark→white gap is purely .dg-s08's own padding-bottom
     (68px, desktop value, unmodified until now) + .dg-cta's own padding-top (84px, desktop value,
     unmodified until now) = 152px. Combined down to 24px + 28px = 52px, inside the requested 48-56px
     feel — same outer-padding-only split used for every prior section transition in this pass.
     This changes .dg-cta's OUTER section padding-top only — its inner badge/headline/text/buttons
     spacing (the "İÇ padding/spacing") is untouched. */
  .dg-s08 { padding-bottom: 24px; }
  .dg-cta { padding-top: 28px; }

  /* Final CTA → Footer transition. Real source, traced across both stylesheets:
     .dg-cta-tagline (the "Full Stack Developer × Digital Growth" row) has no margin-bottom, and
     .dg-cta-inner (its parent) has no margin-bottom either, so the tagline text is the literal last
     thing before </section> closes .dg-cta — meaning the WHITE space in question is purely .dg-cta's
     own padding-bottom (76px, desktop value, unmodified until now). The footer itself (.site-footer,
     defined in app.css, shared site-wide — not part of Digital Growth's CSS) already has its own
     mobile padding-top (48px, via an existing `!important` rule at ≤768px in app.css), but that padding
     is INSIDE the footer's dark background, i.e. after the white→dark boundary — it is not part of the
     visible white gap and was left untouched, both because it isn't the cause and because it's shared
     across every page on the site, outside Digital Growth's scope. Reduced only .dg-cta's own
     padding-bottom to land in the requested 52-64px feel. */
  .dg-cta { padding-bottom: 56px; }

  .dg-creative-float-icon { display: none; }
  .dg-s06-h2 { font-size: 36px; }
  .dg-s08-ghost-num { font-size: 64px; }
  .dg-s08-text { font-size: 24px; }
  .dg-cta-h2 { font-size: 36px; }
  .dg-cta-tagline-text { font-size: 11.5px; }
  .dg-cta-buttons { margin-top: 26px; }
  .dg-cta-tagline { margin-top: 26px; }
  .dg-s03-stmt-p2 { font-size: 26px; }
  .dg-s03-diag-body { grid-template-columns: 1fr; gap: 20px; }
  .dg-creative-right-bottom { grid-template-columns: 1fr; }

  /* S05 creative frames: the label/ratio text at the top of each card ("Ana kreatif", "Kampanya",
     "Katalog / broşür") is fine — the crop is inside their preview mockups, whose text content is
     sized for a wide desktop canvas and gets clipped by the frame's own overflow:hidden once the
     aspect-ratio-locked box gets this short at phone width. Reflowed/resized the mockup content
     only; the frames themselves, their aspect-ratios, and real uploaded images are untouched. */

  /* Ana kreatif: shrink the split-panel mockup to fit the ~140px-tall box at this width */
  .dg-frame--main .dg-frame-art-inner { padding: 14px !important; gap: 14px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:first-child { gap: 6px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:first-child span:first-child { font-size: 11px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:first-child span:last-child { font-size: 7.5px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:nth-child(2) { font-size: 15px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:nth-child(3) { gap: 8px !important; margin-top: 10px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:nth-child(3) span:first-child { padding: 6px 10px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:nth-child(3) span:first-child span { font-size: 7.5px !important; }
  .dg-frame--main .dg-frame-art-inner > div:first-child > div:nth-child(3) span:last-child { font-size: 7px !important; }

  /* Kampanya: shrink the fixed 168px thumbnail and the headline so both fit next to each other */
  .dg-frame--campaign .dg-frame-art-inner { padding: 14px !important; gap: 12px !important; }
  .dg-frame--campaign .dg-frame-art-inner > div:first-child { width: 84px !important; }
  .dg-frame--campaign .dg-frame-art-inner > div:last-child > span { font-size: 7.5px !important; }
  .dg-frame--campaign .dg-frame-art-inner > div:last-child > div:first-of-type { font-size: 14px !important; margin-top: 6px !important; }
  .dg-frame--campaign .dg-frame-art-inner > div:last-child > div:last-of-type { gap: 5px !important; flex-wrap: wrap !important; row-gap: 4px !important; }
  .dg-frame--campaign .dg-frame-art-inner > div:last-child > div:last-of-type span { padding: 4px 8px !important; }
  .dg-frame--campaign .dg-frame-art-inner > div:last-child > div:last-of-type span span { font-size: 7px !important; }

  /* Katalog / broşür: the 3-column inner grid (text / image / services) has no room to be columns
     at phone width — stack it, and let the fixed-height frame grow to fit instead of clipping it. */
  .dg-frame--catalog .dg-frame-art { height: auto; }
  .dg-frame--catalog .dg-frame-art-inner { flex-direction: column !important; padding: 16px !important; gap: 14px !important; }
  .dg-frame--catalog .dg-frame-art-inner > div:first-child { flex: none !important; width: 100% !important; min-height: 120px !important; }
  .dg-frame--catalog .dg-frame-art-inner > div:last-child { grid-template-columns: 1fr !important; gap: 16px !important; padding: 16px !important; }
  .dg-frame--catalog .dg-frame-art-inner > div:last-child > div:nth-child(2) { height: 160px; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — 390px
════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .dg-w1340,
  .dg-w1240,
  .dg-w1040 { width: calc(100% - 32px); }
  .dg-hero-h1 { font-size: 28px; }
  .dg-sys-diagram { max-width: 320px; }
  .dg-s01-h2 { font-size: 30px; }
  .dg-s04-h2 { font-size: 32px; }
  .dg-s04-triad-grid { grid-template-columns: 1fr; }
  .dg-s05-h2 { font-size: 28px; }
  .dg-s06-h2 { font-size: 28px; }
  .dg-s07-h2 { font-size: 26px; }
  .dg-s08-h2 { font-size: 28px; }
  .dg-s08-ghost-num { font-size: 48px; }
  .dg-s08-text { font-size: 20px; }
  /* Manifesto item grid: at true phone widths the fixed 176px ghost-number column left only
     ~120-140px for the actual sentence. Narrow the number column so the text gets the width. */
  .dg-s08-item { grid-template-columns: 64px 1fr; gap: 20px; }
  .dg-cta-h2 { font-size: 28px; }
  .dg-cta-buttons { flex-direction: column; align-items: stretch; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ONLY (769px–1024px)
   Isolated overrides for genuine tablet-specific issues found in the
   tablet audit. Deliberately kept in its own min+max-width query,
   separate from the existing ≤1024px/≤768px blocks, so nothing here
   can cascade into the locked ≤768px mobile rules or the locked
   >1024px desktop baseline. Only the 4 audited issues are addressed;
   no cleanup, no dead-code removal, no selector merging.
════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* 1) HERO — .dg-sys-diagram is 578×571px intrinsic and was rendering at zoom:0.7 (≈405×400px)
     via the existing ≤1024px rule, reading as a shrunk desktop canvas. At native size it already
     fits comfortably inside the narrowest tablet container (769px viewport → .dg-w1340 is
     769-48=721px, well above the diagram's 578px) with room to spare, so the shrink is removed
     entirely rather than replaced with a different shrink factor. max-width:100% is a pure safety
     net (never actually engages in this range) to guarantee no overflow; margin centers it now
     that .dg-hero-grid is a single column here. No nodes, positions, or HTML touched. */
  .dg-sys-diagram {
    zoom: 1;
    max-width: 100%;
    margin: 0 auto;
  }

  /* 2) S01 — same empty desktop-alignment spacer already removed from mobile flow at ≤768px;
     .dg-s01-content-grid single-columns at this width too (via the existing ≤1024px rule), so the
     same ~40px ghost row/gap it caused on mobile exists here independently. Exact selector requested. */
  .dg-s01-content-grid > span:first-child { display: none; }

  /* 3) S02 — .dg-ws-wrap already resolves to width:100% here (existing ≤1280px rule), stretching the
     workspace mockup from its native 687px to ~721-976px across this range — up to +42% wider than
     designed, ballooning the internal main column and its content proportions. Capping it at 760px
     (within the requested 720-820px band, close to the native 687px to preserve original proportions
     with a little breathing room) and centering it. .dg-workspace itself already inherits width:100%
     of this now-capped wrapper (existing ≤1280px rule), so it — and the KUR/ÖLÇ/İYİLEŞTİR column beside
     it — follow automatically; no separate rule needed there. Sidebar width, internal grid, keyword
     rows, and text sizes are untouched. */
  .dg-ws-wrap { max-width: 760px; margin: 0 auto; }

  /* 4A) S05 STORY — .dg-frame--story has no max-width at any breakpoint; once .dg-creative-grid
     single-columns here (existing ≤1024px rule), the 1080:1920 portrait frame stretches to the full
     ~721-976px container width, rendering ~1282-1735px tall. Capping the frame itself (label bar +
     art box together) at 480px and centering — CSS Grid respects auto margins for centering a
     narrower item within its stretched track. Aspect-ratio and internal composition untouched. */
  .dg-frame--story { max-width: 480px; margin: 0 auto; }

  /* 4B) S05 POST + KAMPANYA — .dg-creative-right-bottom keeps the desktop 238px/1fr split here (its
     only override is at ≤768px), squeezing POST into a fixed 238px column next to a KAMPANYA column
     that absorbs the rest (~700px+) — severely lopsided. Switched to a proportional two-column ratio
     so both cards scale with the available tablet width instead of one being pinned to a desktop
     pixel value. Cards' own internals untouched. */
  .dg-creative-right-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP ONLY (min-width: 1025px)
   Section-index system, 01→08: same structural language (NUMBER /
   short rule / UPPERCASE LABEL) across every numbered section, in
   two variants only — LIGHT and DARK — reusing values already
   established elsewhere in the page rather than inventing a new look:
     LIGHT reference = 01 (structural: stacked wrap, gap:6px) — number
       is the shared base .dg-secnum (60px, --gradient-highlight),
       label is the shared base .dg-secnum-label-light (9px,
       rgba(8,18,47,0.35)); 01's own rule is 24x2px solid
       var(--accent-blue) at 0.55 opacity.
     DARK reference = 08 — number 54px solid rgba(255,255,255,0.45)
       (gradient removed), rule 28x2px linear-gradient(90deg,
       rgba(154,140,255,0.5),transparent), label 11px #94A3B8.
   02 and 04 had no visible section index at all before this change;
   their new Blade markup (a .dg-secnum-wrap block, first child of
   the existing text column — no other element moved) is hidden by
   default below and revealed only inside this desktop query, so
   mobile (≤768px) and tablet (769-1024px) — both LOCKED — render
   unchanged (the new markup stays invisible there, exactly as if it
   didn't exist). 06 already had a visible index at every width;
   only a new rule element (also hidden by default, revealed here)
   and this query's number/label color overrides were added. A later,
   separate follow-up (see the "06 — corner reposition" block below)
   pins that index to the section's top-left corner per an approved
   reference layout, decoupled from the centered badge/H2/tagline —
   the master-system diagram and mobile/tablet appearance remain
   untouched throughout. */
.dg-s02 .dg-secnum-wrap,
.dg-s04 .dg-secnum-wrap { display: none; }
.dg-s06-secnum-rule { display: none; }

@media (min-width: 1025px) {

  /* 02 — GOOGLE ADS (LIGHT). First child of the existing .dg-s02-order-1 text column; the
     687px workspace mockup (col 1) and the KUR/ÖLÇ/İYİLEŞTİR triad (order-3) are untouched. */
  .dg-s02 .dg-secnum-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 22px;
  }
  .dg-s02-secnum-rule {
    width: 24px;
    height: 2px;
    background: var(--accent-blue);
    opacity: 0.55;
    flex-shrink: 0;
  }

  /* 04 — SOSYAL MEDYA (DARK). First child of .dg-s04-grid's existing left text column; the
     social visual composition (right column) and the STRATEJİ/ÜRETİM/YÖNETİM triad below are
     untouched, not moved. */
  .dg-s04 .dg-secnum-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 22px;
  }
  .dg-s04 .dg-secnum {
    font-size: 54px;
    background: none;
    -webkit-text-fill-color: unset;
    color: rgba(255,255,255,0.45);
  }
  .dg-s04-secnum-rule {
    width: 28px;
    height: 2px;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(154,140,255,0.5), transparent);
  }
  .dg-s04 .dg-secnum-label-light {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94A3B8;
  }

  /* 06 — BÜTÜN RESİM (DARK). Index-only adaptation to match 08's exact dark values. Position stays
     centered (the existing, just-rolled-back .dg-s06-header layout is not touched), the new rule
     span is revealed, and number/label colors align with the dark standard. The label's existing
     inline color (mobile/tablet-safe, left as-is) needs !important to be overridden here, desktop
     only. System diagram, cards, and node positions below are completely untouched. */
  .dg-s06 .dg-secnum {
    font-size: 54px;
    background: none;
    -webkit-text-fill-color: unset;
    color: rgba(255,255,255,0.45);
  }
  .dg-s06-secnum-rule {
    display: block;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(154,140,255,0.5), transparent);
  }
  .dg-s06 .dg-secnum-label-light {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94A3B8 !important;
  }

  /* 06 — corner reposition (per approved reference layout, desktop only). .dg-w1240 is already
     position:relative at its base rule (line 47), so .dg-s06-secnum-row is pulled out of the
     centered flex column and pinned to its top-left corner — matching how 01/02/04's index sits
     at the left edge — while .dg-secnum-wrap switches to the same stacked (number / rule / label)
     arrangement 01/02/04 use instead of 06's own horizontal row. Taking the row out of flow does
     NOT reposition the centered content: .dg-eyebrow (the "BÜTÜN RESİM" badge) simply becomes
     .dg-s06-header's first in-flow child, landing at the exact top offset the index used to open
     with — the badge, H2 ("Tek Tek İyi. / Birlikte Daha Anlamlı."), and tagline keep their current
     text, styling, and stacking order untouched, they just close the gap the index left behind,
     matching the reference. Master-system diagram, cards, and mobile/tablet are unaffected. */
  .dg-s06-secnum-row {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
  }
  .dg-s06 .dg-secnum-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE ONLY (max-width: 768px)
   Completes the 01→08 index sequence on mobile. 02 and 04's index
   markup already exists in Blade (added for the desktop-only system
   above) but is base-hidden at every width; 06's index is already
   visible on mobile but still used the base light-gradient number
   and had its rule hidden. No Blade changes — every rule below only
   toggles visibility/color on markup that already exists. Tablet
   (769–1024px) is untouched: the base `display:none` / hidden-rule
   rules above still win there since this block's condition (≤768px)
   never matches at 769px+.
     LIGHT (02) reuses 01's own exact mobile-approved values: base
       .dg-secnum (60px, --gradient-highlight) and base
       .dg-secnum-label-light (9px, rgba(8,18,47,0.35)) are already
       unmodified for 01 at any width, so only .dg-s02-secnum-rule
       (24x2px solid var(--accent-blue) @0.55, identical to 01's own
       rule) needs restating here.
     DARK (04, 06) reuses 08's exact dark values: number 54px solid
       rgba(255,255,255,0.45), rule 28x2px linear-gradient(90deg,
       rgba(154,140,255,0.5),transparent), label 11px #94A3B8 — the
       same values the desktop-only block above already applies to
       04 and 06.
   Spacing: 02/04 use margin-bottom:22px, matching their own desktop
   value and close to S03's real approved mobile stacked-gap (20px)
   — kept compact, no new large vertical gap. 06 needs no spacing
   change at all: .dg-s06-secnum-row's margin-bottom:22px is a base
   (non-media) rule that already applies unchanged on mobile, and
   its horizontal/centered layout is left exactly as approved —
   only the column stack for 06 is desktop-only, untouched here. */
@media (max-width: 768px) {

  /* 02 — GOOGLE ADS (LIGHT) */
  .dg-s02 .dg-secnum-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 22px;
  }
  .dg-s02-secnum-rule {
    width: 24px;
    height: 2px;
    background: var(--accent-blue);
    opacity: 0.55;
    flex-shrink: 0;
  }

  /* 04 — SOSYAL MEDYA (DARK) */
  .dg-s04 .dg-secnum-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 22px;
  }
  .dg-s04 .dg-secnum {
    font-size: 54px;
    background: none;
    -webkit-text-fill-color: unset;
    color: rgba(255,255,255,0.45);
  }
  .dg-s04-secnum-rule {
    width: 28px;
    height: 2px;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(154,140,255,0.5), transparent);
  }
  .dg-s04 .dg-secnum-label-light {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94A3B8;
  }

  /* 06 — BÜTÜN RESİM (DARK). Per explicit follow-up request (reference: 04's mobile index), the
     index marker itself now takes 04's stacked/left-aligned mobile style — number on top, thin
     rule below, label below that, all left-anchored — instead of staying inline/centered.
     `.dg-s06-secnum-row` is the sole child of `.dg-s06-header` (which stays `align-items:center`,
     unmodified) — giving the row `align-self:flex-start` pulls only this one row to the left edge
     while `.dg-eyebrow`, the H2, and the tagline right after it stay exactly where they are,
     centered, untouched. `.dg-secnum-wrap` switches to the same column stack already used by
     01/02/03/04/05/08. No position/height change — the row stays in normal flow with its existing
     margin-bottom:22px (base rule, unchanged), so vertical spacing/mobile responsiveness elsewhere
     is unaffected. Desktop (min-width:1025px) and tablet (769–1024px) are untouched — this is
     inside the ≤768px block only. */
  .dg-s06-secnum-row {
    align-self: flex-start;
  }
  .dg-s06 .dg-secnum-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .dg-s06-secnum-rule {
    display: block;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(154,140,255,0.5), transparent);
  }
  .dg-s06 .dg-secnum {
    font-size: 54px;
    background: none;
    -webkit-text-fill-color: unset;
    color: rgba(255,255,255,0.45);
  }
  .dg-s06 .dg-secnum-label-light {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94A3B8 !important;
  }
}