/* Verbitir marketing site — frame-internal styles */

/* Reset for in-artboard content */
.vb-frame, .vb-frame * { box-sizing: border-box; }
.vb-frame {
  font-family: var(--font-ui);
  color: var(--fg);
  background: var(--bg);
  /* Rev I: frame width now driven by --vb-frame-width so the Viewport tweak
     can scrub between 375 / 414 / 768 / 1024 / 1440 live. Container query
     context lets descendants pivot layout based on the frame's OWN width. */
  width: var(--vb-frame-width, 1440px);
  container-type: inline-size;
  container-name: vbframe;
  position: relative;
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  /* Smooth-resize when the Viewport tweak flips the width var. */
  transition: width 240ms var(--ease-out);
}
.vb-frame a { color: inherit; text-decoration: none; }
.vb-frame button { font-family: inherit; }

/* Wordmark */
.vb-wordmark {
  font-family: var(--font-pixel);
  font-weight: 600;
  letter-spacing: var(--tracking-pixel);
  line-height: 1;
  color: var(--verbitir-forest);
}

/* ──────── TOP BAR ──────── */
.vb-topbar {
  height: 72px;
  background: #fff;
  border-bottom: 0.5px solid var(--verbitir-line);
  display: flex;
  align-items: center;
  padding: 0 56px;
  gap: 48px;
  position: relative;
  z-index: 5;
}
.vb-topbar .nav-center {
  display: flex;
  gap: 24px;
  margin-left: auto;
  align-items: center;
}
.vb-topbar .nav-center a {
  font-size: 14px;
  font-weight: 500;
  color: var(--verbitir-forest);
  padding: 6px 0;
  cursor: pointer;
  transition: color .15s var(--ease-out);
  position: relative;
}
.vb-topbar .nav-center a:hover,
.vb-topbar .nav-center a.active {
  color: var(--verbitir-gold-deep);
}
.vb-topbar .nav-center a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--verbitir-gold);
  border-radius: 2px;
}

/* "Diğer" dropdown — surfaces legal nav from footer at the top level. */
.vb-more { position: relative; }
.vb-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-ui);
  color: var(--verbitir-forest);
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  position: relative;
  transition: color .15s var(--ease-out);
}
.vb-more-trigger:hover,
.vb-more-trigger.is-open,
.vb-more-trigger:focus-visible {
  color: var(--verbitir-gold-deep);
  outline: none;
}
.vb-more-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 203, 31, 0.45);
  border-radius: 4px;
}
.vb-more-chev {
  font-size: 11px;
  transition: transform .18s var(--ease-out);
  display: inline-block;
}
.vb-more-trigger.is-open .vb-more-chev {
  transform: rotate(180deg);
}
.vb-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  background: #fff;
  border: 0.5px solid var(--verbitir-line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(26, 46, 26, 0.16), 0 2px 6px rgba(26, 46, 26, 0.06);
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.vb-more.is-open .vb-more-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.vb-topbar .vb-more-menu a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--verbitir-forest);
  /* E.2-A: tightened item padding for a denser, professional menu read.
     Prefixed with .vb-topbar to outrank .vb-topbar .nav-center a's 6px 0 padding. */
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  /* No per-item radius — container handles corner rounding (spec). */
  border-radius: 0;
  transition: background .12s var(--ease-out), color .12s var(--ease-out);
  outline: none;
}
.vb-topbar .vb-more-menu a:hover,
.vb-topbar .vb-more-menu a:focus-visible {
  background: var(--verbitir-bg-cream);
  color: var(--verbitir-gold-deep);
}
.vb-topbar .vb-more-menu a:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 203, 31, 0.6);
}
.vb-more-menu[hidden] { display: none; }
.vb-topbar .lang-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--verbitir-line);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  font-size: 12px;
  font-weight: 600;
}
.vb-topbar .lang-pill button {
  border: none;
  background: transparent;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: var(--verbitir-forest-mid);
  cursor: pointer;
  font-family: inherit;
}
.vb-topbar .lang-pill button.active {
  background: var(--verbitir-forest);
  color: var(--verbitir-bg-cream);
}
.vb-topbar .login-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--verbitir-forest);
  cursor: pointer;
  margin-left: 20px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background .15s var(--ease-out);
}
.vb-topbar .login-link:hover {
  background: var(--verbitir-bg-cream);
}

/* ──────── FOOTER ──────── */
.vb-footer {
  background: var(--verbitir-bg-cream);
  padding: 40px 56px 24px;
  border-top: 1px solid var(--verbitir-line);
}
.vb-footer .footer-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
}
.vb-footer .footer-col h5 {
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--verbitir-forest-mid);
  font-weight: 600;
  margin: 0 0 14px;
}
.vb-footer .footer-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--verbitir-forest-soft);
  margin: 12px 0 0;
  max-width: 320px;
}
.vb-footer .footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--verbitir-forest);
}
.vb-footer .footer-nav a { cursor: pointer; }
.vb-footer .footer-nav a:hover { color: var(--verbitir-gold-deep); text-decoration: underline; }
.vb-footer .footer-contact {
  font-size: 14px;
  color: var(--verbitir-forest);
}
.vb-footer .wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--verbitir-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 12px;
  color: var(--verbitir-forest);
}
.vb-footer .wa-chip .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--verbitir-success);
}
.vb-footer .footer-strip {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--verbitir-line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--verbitir-forest-mid);
  font-variant-numeric: tabular-nums;
}
.vb-footer .footer-strip .mediator-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--verbitir-line);
  font-weight: 600;
  color: var(--verbitir-forest-soft);
}

/* ──────── BUTTONS ──────── */
.vb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s var(--ease-out);
  line-height: 1;
  white-space: nowrap;
}
.vb-btn.lg { padding: 16px 28px; font-size: 16px; }
.vb-btn.sm { padding: 10px 16px; font-size: 13px; }
.vb-btn.gold {
  background: var(--verbitir-gold);
  color: var(--verbitir-forest);
  border-color: var(--verbitir-gold-deep);
  box-shadow: 0 1px 2px rgba(26,46,26,.06);
}
.vb-btn.gold:hover {
  background: var(--verbitir-gold-mid);
}
.vb-btn.outline {
  background: #fff;
  color: var(--verbitir-forest);
  border-color: var(--verbitir-forest);
}
.vb-btn.outline:hover {
  background: var(--verbitir-bg-cream);
}
.vb-btn.ghost {
  background: transparent;
  color: var(--verbitir-forest);
}
.vb-btn.full { width: 100%; }

/* ──────── HERO / GENERIC SECTIONS ──────── */
.vb-hero {
  background: var(--verbitir-bg-cream);
  padding: 80px 56px 96px;
  position: relative;
  overflow: hidden;
}
.vb-hero .hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2; /* sits above the Tier C video (z-index 1) and the sparkle canvas (z-index 0) */
}

/* [TIER C | seedance_2_0 | autoplay muted playsinline | z-index 1 | opacity 13% | mix-blend-mode multiply]
   Shared hero background-video layer (S1 Iter 1 table close-up, S4 Iter 2 café environment).
   Both pages render the same `.vb-hero-video` class via the <VbHeroVideo> component;
   the src prop chooses which Tier C loop plays. Falls back to LQIP poster on
   prefers-reduced-motion or html.vb-anim-off.
   Source raws (archive): assets/tier_c_iter1_table.mp4, assets/tier_c_iter2_environment.mp4.
   ── HANDOFF NOTE — Next.js Web Developer:
   The runtime in this prototype tool can't transcode (no ffmpeg in the sandbox), so this CSS
   currently points at the raw MP4s. Before production deploy, run the same recipe per video:
     ffmpeg -i tier_c_iter1_table.mp4         -an -vf "scale=854:480" -c:v libx265 -tag:v hvc1 \
            -crf 30 -preset slow -movflags +faststart tier_c_iter1_table_web.mp4
     ffmpeg -i tier_c_iter1_table.mp4         -an -vf "scale=854:480" -c:v libvpx-vp9 \
            -b:v 480k -crf 32 -row-mt 1 -movflags +faststart tier_c_iter1_table_web.webm
     ffmpeg -ss 0.5 -i tier_c_iter1_table.mp4 -vframes 1 -vf "scale=854:480" -q:v 6 \
            tier_c_iter1_table_poster.jpg   # <30KB poster
   Repeat with `tier_c_iter2_environment.mp4` as input, `_web.mp4` / `_web.webm` / `_poster.jpg`
   as outputs. Then update the <video><source> tags + poster attribute to point at the encoded files. */
.vb-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* H1 (Rev H): 13% → 25% baseline. Mohamed asked for +10–20pp so the video reads as a real layer, not a ghost. */
  opacity: 0.25;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}

/* Reduced-motion + manual Off Tweak: pause the video (we can't pause from CSS, but opacity 0
   removes it visually; the JS in src/anim.jsx also calls .pause() defensively). */
@media (prefers-reduced-motion: reduce) {
  .vb-hero-video { opacity: 0; }
}
.vb-anim-off .vb-hero-video { opacity: 0; }
.vb-anim-lively .vb-hero-video { opacity: 0.32; }  /* Rev H: 18% → 32% lively, proportional to subtle bump */
.vb-h1 {
  font-family: var(--font-pixel);
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--verbitir-forest);
  margin: 0 0 24px;
  font-weight: 600;
}
.vb-hero .sub {
  font-size: 20px;
  line-height: 1.55;
  color: var(--verbitir-forest-soft);
  margin: 0 0 32px;
  max-width: 540px;
}
.vb-hero .cta-row {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.vb-hero .social-row {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
  color: var(--verbitir-forest-soft);
  font-weight: 500;
}
.vb-hero .social-row .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--verbitir-gold);
  display: inline-block;
  margin-right: 8px;
}
.vb-hero .social-row .pending {
  color: var(--verbitir-forest-mid);
  font-weight: 500;
}
.vb-hero .hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.vb-hero .hero-art .logo-wrap {
  position: relative;
  width: 480px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.vb-hero .hero-art img {
  width: 480px;
  height: 480px;
  object-fit: contain;
  image-rendering: pixelated;
  background: transparent;
}

/* ──────── PIXEL ART TILES (drawn with divs) ──────── */
.vb-pixel-tile {
  width: 80px; height: 80px;
  background: var(--verbitir-bg-cream);
  border: 1.5px solid var(--verbitir-forest);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 36px;
  color: var(--verbitir-forest);
  position: relative;
}
.vb-pixel-tile.gold { background: var(--verbitir-gold-light); }

/* ──────── BANDS ──────── */
.vb-band {
  padding: 80px 56px;
}
.vb-band.cream { background: var(--verbitir-bg-cream); }
.vb-band.gold-light { background: var(--verbitir-gold-light); }
.vb-band .band-eyebrow {
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--verbitir-gold-deep);
  font-weight: 700;
  margin-bottom: 12px;
}
.vb-band h2 {
  font-family: var(--font-pixel);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--verbitir-forest);
  margin: 0 0 12px;
  line-height: 1.1;
}
.vb-band h2.lg {
  font-size: 48px;
}
.vb-band .band-sub {
  font-size: 18px;
  color: var(--verbitir-forest-soft);
  max-width: 640px;
  margin: 0 0 56px;
}

/* ──────── 3-COL GRID ──────── */
.vb-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.vb-3col .col {
  background: #fff;
  border: 1px solid var(--verbitir-line);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(26,46,26,.06);
}
.vb-3col .col h3 {
  font-family: var(--font-pixel);
  font-size: 22px;
  color: var(--verbitir-forest);
  margin: 20px 0 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.vb-3col .col p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--verbitir-forest-soft);
  margin: 0;
}

/* ──────── FORM FIELDS ──────── */
.vb-field { display: flex; flex-direction: column; gap: var(--modal-label-input-gap); }  /* E4 + E.2-B: label→input gap 8px */
.vb-field label {
  font-size: 13px; font-weight: 600;
  color: var(--verbitir-forest);
}
.vb-input, .vb-select, .vb-textarea {
  width: 100%;
  max-width: 100%; /* E.3: never exceed parent column */
  /* E.2-B: input internal padding 12px vert / 16px horiz → ~46px height, touch-target friendly */
  padding: var(--modal-input-padding);
  border-radius: 8px;
  border: 1px solid var(--verbitir-line);
  font-size: 15px;
  font-family: inherit;
  color: var(--verbitir-forest);
  background: #fff;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.vb-input:focus, .vb-select:focus, .vb-textarea:focus {
  outline: none;
  border-color: var(--verbitir-gold);
  box-shadow: 0 0 0 3px rgba(255,203,31,.25);
}
.vb-textarea { resize: vertical; min-height: 100px; }
.vb-checkbox-row {
  display: flex;
  /* E.2-B: checkbox ↔ label gap 8px (was 10) */
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--verbitir-forest-soft);
  line-height: 1.5;
  cursor: pointer;
}
/* ──────── CUSTOM CHECKBOX (Rev H4) ────────
 * Replaces the native accent-color treatment. Same 18×18 footprint, but:
 *  - Unchecked: transparent fill + verbitir-line border
 *  - Checked: forest fill + gold check stroke
 *  - Focus: 3px gold ring (outline, not box-shadow — survives prefers-contrast)
 *  - Hover: 1.05 scale on the box itself with --ease-spring
 */
.vb-checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--verbitir-line);
  border-radius: 4px;
  background: #fff;
  margin: 1px 0 0;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: transform 200ms var(--ease-spring),
              border-color 150ms var(--ease-out),
              background 150ms var(--ease-out);
}
.vb-checkbox-row:hover input[type="checkbox"] {
  transform: scale(1.05);
  border-color: var(--verbitir-forest);
}
.vb-checkbox-row input[type="checkbox"]:checked {
  background: var(--verbitir-forest);
  border-color: var(--verbitir-forest);
}
.vb-checkbox-row input[type="checkbox"]:checked::after {
  /* Gold check drawn with two borders rotated 45°. 6×11 stroke inside the 18px box. */
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--verbitir-gold);
  border-bottom: 2px solid var(--verbitir-gold);
  transform: rotate(45deg);
}
.vb-checkbox-row input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--verbitir-gold);
  outline-offset: 1px;
}
.vb-checkbox-row input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ──────── KPI TILE ──────── */
.vb-kpi {
  background: #fff;
  border: 1px solid var(--verbitir-line);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(26,46,26,.06);
}
.vb-kpi .kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--verbitir-forest-mid);
  margin-bottom: 8px;
}
.vb-kpi .kpi-value {
  font-family: var(--font-pixel);
  font-size: 32px;
  font-weight: 600;
  color: var(--verbitir-forest);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  line-height: 1.1;
  margin-bottom: 6px;
}
.vb-kpi .kpi-sub {
  font-size: 13px;
  color: var(--verbitir-forest-soft);
  line-height: 1.4;
}

/* ──────── STATUS PILL ──────── */
.vb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.vb-pill.gold { background: var(--verbitir-gold-light); color: var(--verbitir-forest); }
.vb-pill.success { background: var(--verbitir-success-fill); color: var(--verbitir-success); }
.vb-pill.cream { background: var(--verbitir-bg-cream); color: var(--verbitir-forest-soft); border: 1px solid var(--verbitir-line); }
.vb-pill .pill-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
}

/* ──────── LEGAL DOC ──────── */
.vb-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 0;
}
.vb-legal h1 {
  font-family: var(--font-pixel);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--verbitir-forest);
  margin: 0 0 12px;
}
.vb-legal .legal-caption {
  font-size: 13px;
  color: var(--verbitir-forest-mid);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--verbitir-line);
}
.vb-legal h2 {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: var(--verbitir-forest);
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
}
.vb-legal p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--verbitir-forest);
  margin: 0 0 14px;
}
.vb-legal .placeholder-tag {
  background: var(--verbitir-warning-soft);
  color: var(--verbitir-warning);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* ──────── MODAL ──────── */
.vb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,46,26,.55);
  /* E.3: portal-rendered as a sibling of .vb-frame, so the .vb-frame * box-sizing
     reset doesn't reach it. Apply border-box to the backdrop and everything below it. */
  box-sizing: border-box;
  /* Rev I: backdrop is its own inline-size container so the modal grid can
     collapse 2-col → 1-col based on the modal's effective width, not the frame's. */
  container-type: inline-size;
  container-name: vbmodal;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  padding: 120px 16px 32px;  /* E.3: 16px lateral breathing room so 480/560 caps never bleed past viewport */
  animation: vb-fade .22s var(--ease-out);
}
.vb-modal-backdrop *, .vb-modal-backdrop *::before, .vb-modal-backdrop *::after {
  box-sizing: border-box;
}

/* E.2-B: modal-scoped layout tokens — all 4 modals (S11/12/13/14) inherit
 * these so future modals stay consistent. Lives next to the existing
 * design-system tokens via :root in tokens.css; values defined there. */

/* ──────── COGNITO DISCLOSURE CHIP ────────
 * Used on S6 (Giriş) and S14 (Şifre sıfırlama). Centered, single-line,
 * sits inside the auth card. The 🔒 emoji is decorative (aria-hidden in JSX);
 * the chip itself is a status message — read as inline text by SR.
 */
.vb-cognito-chip {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--verbitir-bg-cream);
  border: 1px solid var(--verbitir-line);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--verbitir-forest-mid);
  white-space: nowrap;
  letter-spacing: 0;
}
.vb-cognito-chip > span[aria-hidden] {
  color: var(--verbitir-success);
  font-size: 13px;
  line-height: 1;
}
/* When chip sits in a non-flex parent we still want it centered. */
.vb-cognito-chip-wrap {
  display: flex;
  justify-content: center;
}
@keyframes vb-fade { from { opacity: 0 } to { opacity: 1 } }
.vb-modal {
  background: var(--verbitir-bg-cream);
  border-radius: 16px;
  /* E.3: width comes from inline style (per-modal cap); responsive cap below.
     box-sizing: border-box means the 32px padding is INSIDE the declared width,
     so a 480px modal renders at exactly 480px on the page. */
  width: 100%;
  max-width: var(--modal-width, 480px);
  /* E.2-B: 32px even all sides */
  padding: var(--modal-padding);
  position: relative;
  box-shadow: 0 24px 80px rgba(26,46,26,.32);
  animation: vb-slide .26s var(--ease-spring);
  max-height: calc(100% - 160px);
  overflow-y: auto;
  overflow-x: hidden; /* E.3: never horizontal overflow */
}
@keyframes vb-slide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.vb-modal .close-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--verbitir-forest);
}
.vb-modal .close-x:hover { background: rgba(26,46,26,.08); }
.vb-modal h3 {
  font-family: var(--font-pixel);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--verbitir-forest);
  margin: 0 0 12px;
}
.vb-modal .modal-sub {
  font-size: 14px;
  color: var(--verbitir-forest-soft);
  line-height: 1.55;
  /* E.2-B: 24px gap from sub-paragraph to first form field */
  margin: 0 0 var(--modal-title-gap);
}

/* ──────── PIXEL ICON HELPERS ──────── */
.vb-px-icon {
  display: grid;
  width: 48px;
  height: 48px;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0;
  flex-shrink: 0;
}
.vb-px-icon i { display: block; }

/* ──────── SECTION HEADERS LIKE A SCREEN LABEL ──────── */
.vb-screen-label {
  position: absolute;
  top: -34px;
  left: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--verbitir-forest-soft);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.vb-screen-label .num {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: var(--verbitir-forest);
  color: var(--verbitir-bg-cream);
  border-radius: 6px;
  font-family: var(--font-pixel);
  font-weight: 600;
  text-align: center;
  line-height: 26px;
  margin-right: 8px;
}

/* ═══════════════════════════════════════════════════════════
 * RESPONSIVE (Rev I) — container-query based, mobile overrides.
 * Existing CSS above is desktop-baseline. The blocks below
 * apply when the frame's OWN inline-size is below tablet (1024px)
 * and mobile (768px). Each @container vbframe (…) reads the
 * vb-frame's width — which is driven by --vb-frame-width set via
 * the Viewport tweak in app.jsx.
 * ═══════════════════════════════════════════════════════════ */

/* ─── HAMBURGER STATE (rendered in chrome.jsx, hidden by default) ─── */
.vb-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--verbitir-line);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background .15s var(--ease-out);
  margin-left: auto;
}
.vb-hamburger:hover { background: var(--verbitir-bg-cream); }
.vb-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--verbitir-forest);
  border-radius: 2px;
  transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}

/* Drawer — slides in from right, always in DOM but display: none on desktop */
.vb-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,46,26,0);
  z-index: 200;
  pointer-events: none;
  transition: background .25s var(--ease-out);
  display: none;
}
.vb-drawer-backdrop.is-open {
  background: rgba(26,46,26,.55);
  pointer-events: auto;
}
.vb-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 84%;
  max-width: 320px;
  background: #fff;
  box-shadow: -8px 0 24px rgba(26,46,26,.18);
  transform: translateX(100%);
  transition: transform .3s var(--ease-out);
  display: flex;
  flex-direction: column;
  padding: 16px 20px 24px;
}
.vb-drawer-backdrop.is-open .vb-drawer { transform: translateX(0); }
.vb-drawer .drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--verbitir-line-soft);
}
.vb-drawer .drawer-close {
  width: 44px; height: 44px;
  border: 1px solid var(--verbitir-line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--verbitir-forest);
}
.vb-drawer .drawer-close:hover { background: var(--verbitir-bg-cream); }
.vb-drawer nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  gap: 4px;
  flex: 1;
}
.vb-drawer nav a {
  font-size: 16px;
  font-weight: 600;
  color: var(--verbitir-forest);
  padding: 14px 12px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background .12s var(--ease-out);
}
.vb-drawer nav a:hover,
.vb-drawer nav a:focus-visible {
  background: var(--verbitir-bg-cream);
  outline: none;
}
.vb-drawer nav a.active {
  color: var(--verbitir-gold-deep);
  background: var(--verbitir-bg-cream);
}
.vb-drawer .drawer-divider {
  height: 1px;
  background: var(--verbitir-line-soft);
  margin: 8px 0;
}
.vb-drawer .drawer-langs {
  display: flex;
  gap: 6px;
  padding: 8px 0 12px;
}
.vb-drawer .drawer-langs button {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--verbitir-line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--verbitir-forest-mid);
  cursor: pointer;
}
.vb-drawer .drawer-langs button.active {
  background: var(--verbitir-forest);
  color: var(--verbitir-bg-cream);
  border-color: var(--verbitir-forest);
}
.vb-drawer .drawer-login {
  margin-top: 12px;
  width: 100%;
  min-height: 48px;
  background: var(--verbitir-gold);
  color: var(--verbitir-forest);
  border: 1px solid var(--verbitir-gold-deep);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ═══ MOBILE: frame width < 768px ═══ */
@container vbframe (max-width: 767px) {

  /* Top bar collapses to wordmark + hamburger; hide other elements */
  .vb-topbar { padding: 0 20px; height: 64px; }
  .vb-topbar .nav-center,
  .vb-topbar .lang-pill,
  .vb-topbar .login-link { display: none; }
  .vb-topbar .vb-hamburger { display: inline-flex; }
  .vb-drawer-backdrop { display: block; }

  /* Wordmark shrinks slightly */
  .vb-topbar .vb-wordmark { font-size: 20px; }

  /* HERO — stack vertical; copy first, illustration below */
  .vb-hero { padding: 32px 20px 48px; }
  .vb-hero .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .vb-h1 { font-size: clamp(32px, 9cqw, 44px); }
  .vb-hero .sub {
    font-size: clamp(15px, 4cqw, 18px);
    max-width: none;
    margin-left: auto; margin-right: auto;
  }
  .vb-hero .cta-row {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .vb-hero .cta-row .vb-btn { width: 100%; min-height: 48px; }
  .vb-hero .social-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .vb-hero .hero-art .vb-hero-art-stage { width: 240px; height: 240px; }
  .vb-hero .hero-art img.vb-hero-star { width: 100%; height: 100%; }

  /* Band-level paddings collapse */
  .vb-band { padding: 48px 20px; }
  .vb-band h2 { font-size: clamp(26px, 7cqw, 36px); }
  .vb-band h2.lg { font-size: clamp(28px, 8cqw, 40px); }
  .vb-band .band-sub { font-size: clamp(15px, 4cqw, 17px); margin-bottom: 32px; }

  /* BAND A 3-col → 1-col stack */
  .vb-3col { grid-template-columns: 1fr; gap: 16px; }
  .vb-3col .col { padding: 24px 20px; }
  .vb-band-a-icon { width: 64px; height: 64px; margin: 0 auto 4px; }
  .vb-3col .col h3 { text-align: center; }
  .vb-3col .col p { text-align: center; }

  /* BAND B 2-col → stack; merchant flow below consumer flow */
  .vb-band.cream > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* BAND C — copy wraps under the headline */
  .vb-band.gold-light > div[style*="space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
  }
  .vb-band.gold-light .vb-btn { width: 100%; min-height: 48px; }

  /* FOOTER — single column */
  .vb-footer { padding: 32px 20px 20px; }
  .vb-footer .footer-cols {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .vb-footer .footer-tagline { margin-left: auto; margin-right: auto; }
  .vb-footer .footer-nav { align-items: center; }
  .vb-footer .wa-chip { margin-left: auto; margin-right: auto; }
  .vb-footer .footer-strip {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* SCREEN 4 — pricing tier stack with POPULAR first */
  [data-section="tiers"] > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .vb-tier-card { padding: 24px 20px !important; }
  .vb-tier-card.popular {
    order: -1; /* Surface POPULAR at the top of the mobile stack */
    transform: none !important;
  }
  .vb-tier-card:hover {
    transform: none !important; /* I8: drop hover-lift on touch surfaces */
  }
  .vb-tier-card:active {
    transform: scale(0.99) !important;
    transition: transform 100ms var(--ease-out) !important;
  }

  /* HOW-IT-WORKS Screen 2 — tighten step cards */
  .vb-frame [data-screen-label="02 Nasıl çalışır"] section[style*="64px 56px"] {
    /* selector chain to scope; rely on inline-style match for the section padding */
  }

  /* S3 Üye ol — center card padding loosens */
  /* (the existing 520px card already shrinks naturally via max-width below) */

  /* MODAL — close X grows to 44px tap target on mobile */
  .vb-modal .close-x {
    width: 44px; height: 44px;
    top: 8px; right: 8px;
  }
  .vb-modal h3 { font-size: 22px; }

  /* Buttons site-wide get touch-target floor */
  .vb-btn { min-height: 44px; }

  /* Legal docs — tighter padding */
  .vb-legal { padding: 40px 0; }
  .vb-legal h1 { font-size: clamp(28px, 8cqw, 36px); }
  .vb-legal h2 { font-size: 18px; }

  /* Hide the floating Tweaks panel on mobile — dev tooling only.
     The Tweaks toolbar pill outside the canvas still works for desktop testing. */
  .twk-panel { display: none !important; }

  /* I.2-B belt-and-braces: hardcoded pixel overrides with !important so the
     typography lands at sane mobile sizes even if cqw resolves unexpectedly
     in the canvas's transformed/zoomed parent context. Matches the clamp() max
     for each h-level so there's no visual regression — just a guaranteed floor. */
  .vb-h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .vb-band h2 { font-size: 28px !important; line-height: 1.15 !important; }
  .vb-band h2.lg { font-size: 32px !important; line-height: 1.1 !important; }
  .vb-band .band-sub { font-size: 15px !important; line-height: 1.5 !important; }
  .vb-hero .sub { font-size: 16px !important; line-height: 1.5 !important; }
  .vb-3col .col h3 { font-size: 20px !important; line-height: 1.2 !important; }
  .vb-legal h1 { font-size: 30px !important; line-height: 1.1 !important; }
  .vb-legal h2 { font-size: 19px !important; }
  .vb-legal p { font-size: 14px !important; line-height: 1.6 !important; }
  .vb-modal h3 { font-size: 22px !important; }
  .band-eyebrow { font-size: 11px !important; }

  /* Hero illustration scales to fit the 240px mobile stage */
  .vb-hero-art img.vb-hero-star { max-width: 240px !important; }
  .vb-hero-coin { /* coin %s already fluid against the stage; nothing to do */ }

  /* BAND A icon size on mobile (Rev F.2 icons render via .vb-band-a-icon) */
  .vb-band-a-icon { width: 64px !important; height: 64px !important; }

  /* Touch-target floor on all interactive controls inside modals */
  .vb-modal .vb-btn,
  .vb-modal .vb-input,
  .vb-modal .vb-select { min-height: 44px !important; }

  /* Tier card padding on mobile */
  .vb-tier-card { padding: 24px 20px !important; }

  /* S5 Yatırımcı — 3-stat KPI row + 2-CTA row stack on mobile */
  .vb-frame [data-screen-label="05 Yatırımcı"] [style*="grid-template-columns: repeat(3"],
  .vb-stat-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .vb-stat-row .vb-kpi,
  .vb-stat-row > * { width: 100% !important; }
  /* I.3-A: 2-CTA row stacks full-width too */
  .vb-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .vb-cta-row .vb-btn { width: 100% !important; }

  /* I.4-A — center hero illustration horizontally on mobile.
     The hero stack pivots vertical at <768px, but .vb-hero-art defaults to
     flex-start in its grid column. Force center + center children. */
  .vb-hero-art {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .vb-hero-art > *,
  .vb-hero-art-stage {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* I.4-B — universal CTA spec on mobile.
     Every .vb-btn gets full-width, normal text-wrap, 48px touch target, centered
     text. Forces long Turkish labels like "Yatırımcı görüşmesi ayarla" to wrap
     cleanly inside their fill instead of overflowing the gold background. */
  .vb-btn,
  button.vb-btn,
  a.vb-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 20px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.3 !important;
  }
  /* Tighten gap when stacked */
  .vb-cta-row { gap: 12px !important; width: 100% !important; }

  /* I.3-B: S1 (and all topbars) — centered wordmark on mobile, hamburger absolute-right.
     Tesla/Apple pattern; reinforces "premium discovery" brand framing.
     Logo + wordmark cluster sits absolute-center; hamburger absolute-right. */
  .vb-topbar { position: relative; min-height: 56px; padding: 12px 16px; }
  .vb-topbar > div:first-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .vb-topbar .vb-hamburger {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0; /* defeat the default margin-left: auto from base styles */
  }
  /* S7 Hakkımızda — 2-col editorial + sticky sidebar collapses to single column;
     sidebar drops sticky on mobile (no fixed viewport to anchor to). */
  .vb-frame [data-screen-label="07 Hakkımızda"] [style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .vb-frame [data-screen-label="07 Hakkımızda"] aside[style*="sticky"] {
    position: static !important;
  }
}

/* ═══ TIGHT MOBILE: frame width ≤ 414px (iPhone SE / standard iPhone) ═══
 * Sub-breakpoint for the smallest devices where 36px H1 still wraps badly. */
@container vbframe (max-width: 414px) {
  .vb-h1 { font-size: 32px !important; }
  .vb-band h2 { font-size: 24px !important; }
  .vb-band h2.lg { font-size: 26px !important; }
  .vb-hero-art .vb-hero-art-stage { width: 200px !important; height: 200px !important; }
  .vb-band-a-icon { width: 56px !important; height: 56px !important; }

  /* S3 Üye ol — store badges stack full-width instead of side-by-side */
  .vb-store-badges { flex-direction: column !important; align-items: stretch !important; }
  .vb-store-badges a { width: 100% !important; display: flex !important; justify-content: center; }
  .vb-store-badges img { height: 48px !important; }
}

/* ═══ TABLET: frame width 768–1023px ═══ */
@container vbframe (min-width: 768px) and (max-width: 1023px) {

  /* Keep hamburger pattern at tablet too — Mohamed's "your call" suggestion;
     I'd rather have consistent mobile pattern than a third nav variant.
     If desktop-style nav is preferred, raise this to (min-width: 1024px). */
  .vb-topbar .nav-center,
  .vb-topbar .lang-pill,
  .vb-topbar .login-link { display: none; }
  .vb-topbar .vb-hamburger { display: inline-flex; }
  .vb-drawer-backdrop { display: block; }
  .vb-topbar { padding: 0 32px; }

  /* HERO — side-by-side but tighter padding + smaller illustration */
  .vb-hero { padding: 56px 32px 64px; }
  .vb-hero .hero-art .vb-hero-art-stage { width: 360px; height: 360px; }

  /* BAND A — 2-col with 3rd card spanning full width */
  .vb-3col { grid-template-columns: 1fr 1fr; gap: 20px; }
  .vb-3col .col:nth-child(3) { grid-column: 1 / -1; }

  /* Pricing — 2-col with Chain spanning */
  [data-section="tiers"] > div[style*="repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
  [data-section="tiers"] .vb-tier-card.popular { order: -1; }
  [data-section="tiers"] .vb-tier-card:nth-child(3) { grid-column: 1 / -1; }

  /* FOOTER 2-col */
  .vb-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .vb-footer .footer-cols .footer-col:nth-child(3) { grid-column: 1 / -1; }

  /* Bands tighter padding */
  .vb-band { padding: 64px 32px; }

  /* Tweaks panel shows narrower */
  .twk-panel { width: 240px !important; }
}

/* ═══ MOBILE/TABLET MODAL grid collapse ═══
 * 2-col modal form (S12/S13 grids) collapses to 1-col when the modal itself
 * is narrower than 480px. The backdrop is a container, so this responds to
 * the modal's actual rendered width (factoring in modal cap + viewport cap). */
@container vbmodal (max-width: 479px) {
  .vb-modal [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .vb-modal h3 { font-size: 22px; }
}