@import url("shared.css");

/* Nomist mobil mockup — Cupertino-flavored design system
 * iOS Human Interface Guidelines + Flutter Cupertino widget parity hedefli.
 * Mevcut class isimleri korundu (backwards-compatible); yeni Cupertino primitive'leri ek olarak eklendi. */

/* ============================================================
 * FONTS — self-hosted (assets/fonts/), Google Fonts kaynaklı, OFL lisans
 *
 * UI: IBM Plex Sans (variable, wght 100-700). Türkçe'de güvenli: fi
 * ligatüründe i'nin noktası ayrı kontur olarak korunur.
 * Belge: Source Serif 4 (variable, opsz 8-60 + wght 400-700). TRK locl
 * taşır: lang="tr" altında i, ligatüre girmeyen varyantla dizilir —
 * ekstra CSS kuralı gerekmez. Karar analizi: DESIGN.md "Font kararı" notu.
 *
 * DİKKAT: Plex 700'de biter — font-weight 800+ yazmak sentetik bold üretir (yasak).
 * Status bar SF Pro kalır (CLAUDE.md §8.8 OS-chrome istisnası).
 * ============================================================ */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;            /* iOS Safari auto-dark mode'u kapat — Nomist dark mode desteklemez (figma/NOTES.md K-N2) */

  /* ============================================================
   * NOMIST DESIGN TOKENS — 3-tier architecture
   *
   * Tier 1 PRIMITIVES — raw hex/rgba/px values, atomic
   * Tier 2 SEMANTICS  — purpose-named, primitive'leri alias eder
   * Tier 3 BRIDGE     — legacy aliases + iOS-system compat (migration için, yeni kod kullanmaz)
   *
   * Kural: Component class'ları yalnız TIER 2'ye referans verir.
   *        TIER 1 implementation detail, TIER 3 backward-compat.
   *
   * Brand: 040D12 / 183D3D / 5C8374 / 93B1A6 (sage teal)
   * Accent: C9764D (terracotta)
   * Flutter ColorScheme: docs/design-system.md
   * ============================================================ */

  /* ===================== TIER 1: PRIMITIVES ===================== */

  /* ---- Brand colors ---- */
  --ink:           #040D12;            /* near-black, primary text */
  --brand:         #183D3D;            /* dark teal */
  --brand-2:       #5C8374;            /* sage */
  --brand-3:       #93B1A6;            /* light sage, decorative */
  --brand-dark:    #0F2A2A;            /* hover/pressed primary */

  /* ---- Accent (terracotta) ---- */
  --accent:        #C9764D;
  --accent-dark:   #A85F3A;

  /* ---- Semantic color primitives ---- */
  --success:       #3A6A5A;            /* deep sage-green */
  --danger:        #B83A3A;            /* muted red */

  /* ---- Alpha tints ---- */
  --brand-tint:    rgba(24, 61, 61, 0.10);
  --brand-tint-2:  rgba(24, 61, 61, 0.14);
  --accent-tint:   rgba(201, 118, 77, 0.20);
  --success-tint:  rgba(58, 106, 90, 0.16);
  --danger-tint:   rgba(184, 58, 58, 0.10);

  /* ---- Surface primitives ---- */
  --bg-canvas:     #F4F6F4;            /* warm off-white, sage-leaning */
  --bg-surface:    #FFFFFF;            /* card / list-item / sheet */
  --bg-elevated:   #FFFFFF;            /* sheet/modal */
  --bg-subtle:     rgba(24, 61, 61, 0.05);  /* chip, input-field, consent-box, score-low */
  --bg-overlay:    rgba(4, 13, 18, 0.40);   /* sheet scrim */

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;   /* iOS list section card */
  --radius-lg: 14px;   /* iOS card / button-large */
  --radius-xl: 18px;   /* iOS sheet handle area */
  --radius-2xl: 22px;  /* iOS bottom sheet top */
  --radius-full: 999px; /* pill — button, badge, hero avatar (DESIGN.md rounded.full) */

  /* ---- Shadows (iOS prefers bg-contrast; reserve for overlays) ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

  /* ---- Fonts + tap target ---- */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;  /* belge katmanı: formal-letter-block (911 dilekçe) */
  --font-numeric: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --tap-min: 44px;

  /* ---- Spacing (4px grid: 4/8/12/16/20/24/32/48) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ===================== TIER 2: SEMANTICS ===================== */

  /* ---- Text colors ---- */
  --text-primary:    var(--ink);
  --text-secondary:  rgba(4, 13, 18, 0.62);
  --text-tertiary:   rgba(4, 13, 18, 0.42);
  --text-disabled:   rgba(4, 13, 18, 0.28);
  --text-on-brand:   #FFFFFF;
  --text-on-accent:  #FFFFFF;

  /* ---- Borders / Separators ---- */
  --separator:       rgba(24, 61, 61, 0.10);
  --separator-strong: rgba(24, 61, 61, 0.18);

  /* ---- Semantic status (alias to primitives) ---- */
  --warning:         var(--accent);    /* terracotta = warning */
  --warning-tint:    var(--accent-tint);
  --info:            var(--brand);
  --info-tint:       var(--brand-tint);

  /* ---- Score band (match severity) ---- */
  --score-high-bg:   var(--success-tint);
  --score-high-text: var(--success);
  --score-medium-bg: var(--accent-tint);
  --score-medium-text: var(--accent-dark);
  --score-low-bg:    var(--bg-subtle);
  --score-low-text:  var(--text-secondary);

  /* ---- Layout semantics ---- */
  --page-padding: 16px;            /* ekran kenarinda yatay padding */
  --section-gap: 32px;             /* iki list-section arasi */
  --section-header-pad-y: 8px;     /* section-header dikey padding */
  --list-item-pad-y: 12px;
  --list-item-pad-x: 18px;
  --list-item-min-h: 52px;         /* iOS 26 list row */

  /* Safe area inset (bottom) — browser mockup'ta sabit 34px (iPhone 14+ standardi),
   * PWA fullscreen'de env(safe-area-inset-bottom) ile override edilir. */
  --safe-bottom: 34px;
  /* Sticky bottom CTA/sheet/footer icin tutarli padding: 12 nefes + safe-bottom clearance.
   * Tek token, --safe-bottom degisirse otomatik adapte olur. */
  --safe-bottom-padding: calc(var(--space-3) + var(--safe-bottom));

  /* ===================== TIER 3: BRIDGE ===================== */
  /* Legacy aliases + iOS-system compat. Yeni kod kullanmamalı.
     Migration tamamlanınca kaldırılacak (figma/NOTES.md drift #6, K-N5). */

  /* ---- Legacy aliases (pre-rename) ---- */
  --primary:         var(--brand);
  --primary-dark:    var(--brand-dark);
  --primary-light:   var(--brand-tint);
  --primary-tinted:  var(--brand-tint-2);
  --success-light:   var(--success-tint);
  --warning-light:   var(--warning-tint);
  --danger-light:    var(--danger-tint);
  --accent-light:    var(--accent-tint);
  --border-subtle:   var(--separator);
  --border-default:  var(--separator);
  --border-strong:   var(--separator-strong);

  /* ---- iOS system color compat (sadece status-bar/native overlay icin) ---- */
  --ios-blue: var(--brand);
  --ios-green: var(--success);
  --ios-red: var(--danger);
  --ios-orange: var(--accent);
  --ios-yellow: #D9A55B;
  --ios-gray: var(--text-tertiary);
  --ios-gray-2: rgba(4, 13, 18, 0.32);
  --ios-gray-3: rgba(4, 13, 18, 0.22);
  --ios-gray-4: rgba(4, 13, 18, 0.16);
  --ios-gray-6: var(--bg-canvas);
  --ios-bg-grouped: var(--bg-canvas);
  --ios-bg-grouped-secondary: var(--bg-surface);
  --ios-bg: var(--bg-surface);
  --ios-bg-secondary: var(--bg-canvas);
  --ios-label: var(--text-primary);
  --ios-label-secondary: var(--text-secondary);
  --ios-label-tertiary: var(--text-tertiary);
  --ios-label-quaternary: var(--text-disabled);
  --ios-separator: var(--separator);
  --ios-separator-opaque: var(--separator-strong);
  --ios-fill: var(--bg-subtle);
  --ios-fill-secondary: var(--bg-subtle);
  --ios-fill-tertiary: var(--bg-subtle);
}

* { box-sizing: border-box; }

/* HTML component kütüphanesi (assets/components/sc-*.js) — custom element'ler
   layout'tan şeffaf geçer (display:contents); içlerindeki gerçek class'lı markup
   global CSS'i alır. Figma component-set'iyle birebir adlandırılmış (bkz. components/README.md).

   ⚠️ display:contents tuzağı: custom element kutusu kalkar ama DOM ağacında durur,
   bu yüzden ".parent > .child" / ":first-child" / "+ sibling" selektörleri component
   sarmalı içeriği için KIRILIR. Böyle bir kural component'lenen bir öğeyi hedefliyorsa,
   o öğeye kuralı doğrudan ekle (örn. .banner { flex-shrink: 0 }).

   KURULU component'ler — Batch 1a foundation/chrome (8) + Batch 1b atoms (12) + Batch 1c composite (15): */
sc-screen, sc-status-bar, sc-app-bar, sc-tab-bar, sc-large-title,
sc-home-indicator, sc-dynamic-island, sc-sheet-handle,
sc-button, sc-badge, sc-list-item, sc-card-section, sc-section-header,
sc-section-title, sc-card, sc-alert-banner, sc-soft-update-banner,
sc-segmented, sc-form-input, sc-search-bar,
sc-hero-zone, sc-hero-icon, sc-avatar-icon, sc-brand-card,
sc-info-block, sc-step, sc-step-list, sc-usage-meter, sc-spinner,
sc-empty-state, sc-consent-box, sc-welcome-dots, sc-sheet, sc-sheet-overlay { display: contents; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: #e5e7eb;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.01em;
}

/* ============ PHONE FRAME ============ */
.phone-frame {
  width: 375px;
  height: 812px;
  margin: 0 auto;           /* yatay ortala; dikey margin YOK — index iframe'i tam 812px; 24px dikey margin taşıp kırpıyordu (subcap/imemo gibi tam 812 oturur) */
  flex-shrink: 0;           /* body flex sahnesinde büzülmesin — 375 sabit (subcap pattern) */
  background: var(--bg-canvas);
  border-radius: 44px;                        /* subcap/imemo paritesi */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);  /* subcap/imemo paritesi — cihaz bezel'i (12px border) YOK; ekran 375×812'yi tam doldurur */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-frame::before {
  content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 125px; height: 37px; background: #000; border-radius: 19px;
  z-index: 500;   /* Dynamic Island = donanım → her zaman üstte (sheet/overlay üzerinde) */
}
/* Bottom home indicator (iOS home bar) — Figma reference frame'i tamamlar */
.phone-frame::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: var(--text-primary);   /* adaptive (açık→koyu, koyu→beyaz); 3 projede AYNI home indicator — subcap canonical: 134×5 @ bottom 8 */
  border-radius: 2.5px;
  z-index: 500;
}

/* ===== iOS Status Bar + Dynamic Island — OS chrome, 3 projede BİREBİR AYNI (Apple HIG: 54pt bar, 125×37 ada @ top 11) ===== */
.status-bar { position: relative; width: 375px; height: 54px; flex-shrink: 0; }
.status-bar .status-bar-time,
.status-bar .status-bar-trio {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
  font-family: -apple-system, "SF Pro Text", "SF Pro", sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -0.408px;
  color: var(--text-primary);
}
/* Koyu zemin uzerinde (720 paywall'in brand-gradient hero'su) beyaz metin + glyph.
 * <sc-status-bar dark> data-theme="dark" basar; nomist genelinde dark tema YOK — bu override
 * yalniz status bar icin gecerli (figma/NOTES.md drift 3b'nin ongordugu cozum). */
.status-bar[data-theme="dark"] .status-bar-time,
.status-bar[data-theme="dark"] .status-bar-trio { color: var(--text-on-brand); }
.status-bar .status-bar-time { left: 27px; }
.status-bar .status-bar-trio { right: 16px; gap: 8px; }
.status-bar .status-bar-bars    { width: 18px; height: 12px; background-color: currentColor; -webkit-mask: url('icons/system/signal.svg') center / contain no-repeat;  mask: url('icons/system/signal.svg') center / contain no-repeat; }
.status-bar .status-bar-wifi    { width: 17px; height: 12px; background-color: currentColor; -webkit-mask: url('icons/system/wifi.svg') center / contain no-repeat;    mask: url('icons/system/wifi.svg') center / contain no-repeat; }
.status-bar .status-bar-battery { width: 27px; height: 13px; background-color: currentColor; -webkit-mask: url('icons/system/battery.svg') center / contain no-repeat; mask: url('icons/system/battery.svg') center / contain no-repeat; }

/* ============ APP BAR (iOS Navigation Bar) ============ */
.app-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: rgba(249, 249, 249, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--ios-separator);
  flex-shrink: 0;
  gap: 4px;
  position: relative;
  z-index: 40;
}
.app-bar.opaque {
  background: var(--bg-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.app-bar.no-border { border-bottom: none; }
.app-bar .back-btn {
  min-width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  font-size: 28px;
  color: var(--primary);
  padding-left: 8px;
  font-weight: 400;
  line-height: 1;
}
.app-bar .back-btn::after {
  content: attr(data-back-label);
  font-size: 17px;
  font-weight: 400;
  margin-left: 2px;
  letter-spacing: -0.02em;
}
.app-bar .title {
  font-size: 17px;
  font-weight: 600;
  flex: 1;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.app-bar .actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.app-bar .actions .icon-btn,
.app-bar .actions .text-btn {
  min-width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  color: var(--primary);
  padding: 0 8px;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: none;
  border: none;
}
.app-bar .actions .text-btn.bold { font-weight: 600; }

/* ===== iOS 26 modern app-bar variant (floating circular back) =====
 * Kullanim: <div class="app-bar app-bar-modern"><a class="back-btn-circle" href="...">←</a><div class="title">Hesap</div></div>
 * Title ortali, back button beyaz daire (Settings > Apple Account pattern). */
.app-bar.app-bar-modern {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  height: 64px;            /* iOS 26: toolbar 68px standardina yakin */
  padding: 8px 16px;
  position: relative;
  justify-content: center;
}
.app-bar.app-bar-modern .title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
.app-bar.app-bar-modern .back-btn-circle,
.back-btn-circle {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.app-bar.app-bar-modern .back-btn-circle:active { opacity: 0.7; }
/* Sag aksiyon (ör. trash): app-bar-modern iceren selektor left:12'yi ezmesin diye ayni ozgullukte */
.app-bar.app-bar-modern .back-btn-circle.right,
.back-btn-circle.right { left: auto; right: 12px; }

/* ===== Hero zone (avatar + name + email pattern) =====
 * iOS 26 Settings > Apple Account hero. */
/* Hero zone: background YOK — parent'tan inherit (transparent).
 * Boylece .content (bg-canvas) icindeyken canvas, .sheet (bg-elevated white) icindeyken
 * white gorunur; visible color stripe olmaz. */
.hero-zone {
  padding: 12px 16px 32px;
  text-align: center;
}
/* Tight modifier: title'siz app-bar varsa hero-zone padding-top sifirlanir */
.hero-zone.tight { padding-top: 0; }
.hero-zone .hero-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
}
/* Hero avatar with brand logo image — square container, white bg, logo contained */
/* Hero avatar gradient variants — default brand, accent (warning/paywall), success (positive result) */
.hero-zone .hero-avatar.gradient-accent  { background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); }
.hero-zone .hero-avatar.pulse-avatar { animation: hero-pulse 2s ease-in-out infinite; }
@keyframes hero-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.92; } }
/* Logo fallback: brand-card-logo "logo yok" variant'inin hero scale'i — squircle + tinted + initials */
.hero-zone .hero-avatar.logo-fallback {
  background: var(--primary-tinted);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
  border-radius: 22px;
}
.hero-zone .hero-avatar:has(img) {
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--separator);
  padding: 8px;
  overflow: hidden;
}
.hero-zone .hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero-zone .hero-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
}
.hero-zone .hero-meta {
  font-size: 17px;
  color: var(--text-secondary);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}

/* Large title pattern (iOS scroll-collapse) */
.large-title {
  padding: 4px 16px 8px;
  background: var(--bg-canvas);
  flex-shrink: 0;
}
.large-title h1 {
  font-size: 34px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text-primary);
}
.large-title .greeting {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

/* Content area — default padding-bottom safe-bottom (home indicator clearance).
 * .with-bottom-cta ve tab-bar pages bunu kendi rule'larinda override eder. */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--safe-bottom);
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--bg-canvas);
}
.content::-webkit-scrollbar { width: 0; height: 0; display: none; }
.content.no-tab-bar { padding-bottom: var(--safe-bottom); }     /* explicit no-tab-bar: ayni safe-bottom */
.content.plain-bg { background: var(--ios-bg); }

.phone-frame *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.phone-frame * { scrollbar-width: none; }

/* ============ TAB BAR (iOS Tab Bar) ============ */
/* iOS 26 floating pill tab bar
 * Yuzen kapsul: ekran ortasinda, max-width sinirli, full pill radius.
 * Hafif backdrop-blur + saydamlik (liquid glass DEGIL — sadece subtle iOS 26 cue). */
.tab-bar {
  position: absolute;
  bottom: var(--safe-bottom);             /* home indicator zonu uzerinde — mockup 34, PWA env() */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 340px;
  min-height: 60px;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 0.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 40px;
  padding: 4px;
  box-shadow:
    0 1px 1px rgba(4, 13, 18, 0.04),
    0 8px 24px rgba(4, 13, 18, 0.10);
  z-index: 50;
}
.tab-bar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 32px;
  transition: background 140ms ease, transform 140ms ease;
}
.tab-bar .tab.active {
  color: var(--brand);
  background: var(--brand-tint);
}
.tab-bar .tab:active { transform: scale(0.96); }
.tab-bar .tab .tab-icon {
  font-size: 26px;       /* iOS 26: tab icon 24→26 */
  line-height: 1;
  margin-bottom: 2px;
}
/* Content artik floating tab bar'in altina kacmasin diye padding-bottom.
 * tab-bar yuksekligi (~70) + safe-bottom + breathing — token kullanir, otomatik adapt. */
.phone-frame:has(.tab-bar) .content {
  padding-bottom: calc(78px + var(--safe-bottom));
}

/* ============ INSET GROUPED LIST (iOS Settings pattern) ============ */
.card {
  background: var(--bg-surface);
  border-radius: 22px;
  margin: 12px 16px;
  padding: 16px;
}
.card.tinted {
  background: var(--primary-tinted);
  color: var(--text-primary);
}
/* Empty-state kart — surface kart icinde ortali "sonuc yok" durumu (pozitif).
   Bülten detayinda (520) eslesme yokken brand-list yerine gecer: success-tint rozet + baslik + metin. */
.card.empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 20px;
}
.card.empty-card .empty-card-badge {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: var(--success-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card.empty-card .empty-card-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.card.empty-card .empty-card-text {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  margin: 0;
}

.card-section {
  background: var(--bg-surface);
  margin: 0 var(--page-padding) var(--section-gap);
  border-radius: 22px;
  overflow: hidden;
}
/* summary-lead: ozet karti hemen altindaki alert-banner ile tek "summary" blok gibi okunsun diye
   aradaki bosluk section-gap(32) yerine space-5(20). 412 · Free kilit ekrani (Figma 1072:4210 "summary"). */
.card-section.summary-lead { margin-bottom: var(--space-5); }
/* Large-title sonrasi ilk content child icin breathing — large-title pb 8 + 12 = 20 (home/watches-tab pattern) */
/* display:contents tuzagi (CLAUDE.md §5b.3): card-section/section-header bir <sc-*> wrapper'a
   sarildiginda gercek ilk-cocuk sc-card-section/sc-section-child olur; o yuzden hem ham
   (.content > .card-section) hem sarmal (.content > sc-card-section > .card-section) formu yakalanir. */
.content > .card-section:first-child,
.content > .section-header:first-child,
.content > sc-card-section:first-child > .card-section,
.content > sc-section-header:first-child > .section-header {
  margin-top: var(--space-3);
}
/* Section header — iOS 26 pattern: 15/600/text-primary.
 * Toplam soldan inset = page-padding(16) + space-5(20) = 36px.
 * Hem standalone hem card-section icindeki kullanimda ayni hizada. */
.section-header,
.card-section .section-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border-radius: 0;
  overflow: visible;
  margin: 0 var(--page-padding);
  padding: 0 var(--space-5) var(--section-header-pad-y);
}
/* Section-header card-section ICINDEYSE parent'i transparent yap (HTML migrate etmeden).
 * display:contents tuzagi: section-header bir <sc-section-header> wrapper'a sarildiginda
 * direkt-cocuk kontrolu (> .section-header) sc-section-header uzerinden gecmeli; o yuzden
 * her :has()/child/sibling selektoru hem ham hem sarmal formuyla cogaltilir. */
.card-section:has(> .section-header:first-child),
.card-section:has(> sc-section-header:first-child > .section-header) {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  margin: 0 0 var(--section-gap);
}
/* Section-header sonrasi gelen ilk list-item rounded-top + bg-surface.
 * Sarmal form: section-header <sc-section-header>, list-item <sc-list-item> icinde →
 * sibling iliskisi sc-section-header + sc-list-item olur. */
.card-section:has(> .section-header:first-child) > .section-header + a > .list-item,
.card-section:has(> .section-header:first-child) > .section-header + .list-item,
.card-section:has(> sc-section-header:first-child) > sc-section-header + sc-list-item > .list-item,
.card-section:has(> sc-section-header:first-child) > sc-section-header + sc-list-item > a > .list-item {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
/* Son list-item rounded-bottom (ham + sc-list-item sarmali son-cocuk) */
.card-section:has(> .section-header:first-child) > a:last-child > .list-item,
.card-section:has(> .section-header:first-child) > .list-item:last-child,
.card-section:has(> sc-section-header:first-child) > sc-list-item:last-child > .list-item,
.card-section:has(> sc-section-header:first-child) > sc-list-item:last-child > a > .list-item {
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}
/* Tum list-item'lar bg-surface (artik card-section transparent) */
.card-section:has(> .section-header:first-child) > a > .list-item,
.card-section:has(> .section-header:first-child) > .list-item,
.card-section:has(> sc-section-header:first-child) > sc-list-item > .list-item,
.card-section:has(> sc-section-header:first-child) > sc-list-item > a > .list-item {
  background: var(--bg-surface);
  margin-left: 16px;
  margin-right: 16px;
}
/* Section-header sonrasi gelen <a> wrapper margin'i bozmasin (ham + sc-list-item sarmali) */
.card-section:has(> .section-header:first-child) > a,
.card-section:has(> sc-section-header:first-child) > sc-list-item {
  display: block;
}
/* ============ LIST ITEMS (iOS row pattern) ============ */
.list-item {
  display: flex;
  align-items: center;
  padding: var(--list-item-pad-y) var(--list-item-pad-x);
  background: var(--bg-surface);
  gap: 14px;
  cursor: pointer;
  min-height: var(--list-item-min-h);
  position: relative;
}
.list-item::after {
  content: "";
  position: absolute;
  left: 72px;                         /* 18 padding + 40 leading + 14 gap = 72 (icon offset) */
  right: var(--list-item-pad-x);      /* iOS 26: sag kenara kadar gitmez, padding kadar nefes birakir */
  bottom: 0;
  height: 1px;
  background: var(--separator-strong);
  pointer-events: none;
  z-index: 1;
}
/* Leading icon yoksa (selection list, sade row): separator content inset (18 padding) ile uyumlu */
.list-item:not(:has(.leading))::after {
  left: var(--list-item-pad-x);
  right: var(--list-item-pad-x);
}
/* Ayrac kapatma: list-item card-section'in SON cocugunda (direkt veya <a> wrapper icinde).
 * display:contents tuzagi: list-item bir <sc-list-item> wrapper'a sarildiginda gercek son-cocuk
 * sc-list-item olur → sc-list-item:last-child permutasyonlari da kapatilir. */
.card-section > .list-item:last-child::after,
.card-section > a:last-child > .list-item::after,
.card-section > sc-list-item:last-child > .list-item::after,
.card-section > sc-list-item:last-child > a > .list-item::after,
.list-section > .list-item:last-child::after,
.list-section > a:last-child > .list-item::after,
.list-section > sc-list-item:last-child > .list-item::after,
.list-section > sc-list-item:last-child > a > .list-item::after,
.list-item.no-divider::after { display: none; }

:is(.list-item, .step-list .step) .leading {
  width: 32px;              /* iOS 26: 28→32 default */
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ios-fill-tertiary);
  /* iOS 26: solid renk uzerinde top-left subtle highlight (lit-from-above feel) */
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
  font-size: 16px;
  flex-shrink: 0;
}
.list-item .leading.brand-logo {
  background-color: var(--primary-tinted);
  color: var(--primary);
  font-weight: 700;
}
:is(.list-item, .step-list .step) .leading.size-md { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }   /* iOS 26 standart squircle */
:is(.list-item, .step-list .step) .leading.size-lg { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
:is(.list-item, .step-list .step) .leading.size-xl { width: 56px; height: 56px; font-size: 22px; border-radius: 12px; }

/* Brand image — gercek marka logosu icin (64px, ic padding 4) */
.list-item .leading.brand-img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  padding: 4px;
  background-color: #fff;
  background-image: none;
  border: 1px solid var(--separator);
  overflow: hidden;
}
.list-item .leading.brand-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.list-item .body { flex: 1; min-width: 0; }
.list-item .title {
  font-size: 17px;
  font-weight: 500;          /* iOS 26: 400→500 medium */
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}
.list-item .title.title-danger { color: var(--danger); }   /* destructive action (Hesabi sil) */
.list-item .title.row { display: flex; gap: 16px; white-space: normal; }  /* stat row: "12 eslesme · 4 bulten" */
.list-item .subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
/* Trailing value text — list-item sag tarafinda secondary degerler (date, version, count) */
.list-item .trailing .list-item-value { font-size: 15px; color: var(--text-secondary); letter-spacing: -0.01em; }
/* List-item body icinde inline action button (ornek: pending email "Tekrar gonder") */
.list-item .body .list-item-action { margin-top: 10px; }
.list-item .trailing {
  flex-shrink: 0;
  color: var(--ios-gray-2);
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.list-item .trailing-value {
  color: var(--text-secondary);
  font-size: 17px;
  letter-spacing: -0.02em;
}

/* ============ BUTTONS (Cupertino: Filled / Tinted / Plain) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: 980px;  /* iOS pill button */
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: opacity 0.15s, transform 0.05s;
}
.btn:active { opacity: 0.7; transform: scale(0.98); }

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  background: var(--primary);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;        /* Safari'nin auto-color override'ina karsi */
}
.btn-accent,
.btn-accent:link,
.btn-accent:visited {
  background: var(--accent);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.btn-secondary {
  background: var(--primary-tinted);
  color: var(--primary);
}
.btn-tertiary {
  background: transparent;
  color: var(--primary);
}
.btn-destructive {
  background: var(--danger);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;       /* Safari color override'a karsi */
}
.btn-block { display: flex; width: 100%; }
.btn-large { height: 50px; font-size: 17px; }
.btn-disabled, .btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ============ FORM CONTROLS ============ */
.input-group { margin: 16px; }
.input-label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.input-field {
  width: 100%;
  height: var(--tap-min);
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--ios-fill-tertiary);
  font-size: 17px;
  font-family: inherit;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.input-field:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  background: var(--bg-elevated);
}
/* Textarea varyanti: cok satirli alan — sabit 44px yerine icerik yuksekligi;
 * dikey padding tek-satir input'un optik metin hizasiyla ayni (44px'te ~12px). */
textarea.input-field {
  height: auto;
  min-height: var(--tap-min);
  padding: 12px 14px;
  line-height: 1.35;
  resize: none;
}

/* iOS-style search field */
.search-bar {
  margin: 8px 16px;
  height: 36px;
  background: var(--ios-fill-tertiary);
  border: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
}
.search-bar .search-icon { color: var(--ios-gray); font-size: 16px; }
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 17px;
  font-family: inherit;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.search-bar input::placeholder { color: var(--ios-gray); }

/* iOS Switch */

/* ============ BADGES / CHIPS ============ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.badge.badge-lg {                /* status hero badge (Tescilli, Yuksek Eslesme), 13px/6px+12px */
  padding: 6px 12px;
  font-size: 13px;
  gap: 4px;
}
.badge-primary { background: var(--primary-tinted); color: var(--primary); }
.badge-neutral { background: var(--ios-fill-tertiary); color: var(--text-secondary); }


/* iOS Segmented Control */
.segmented-control {
  display: flex;
  background: var(--ios-fill-tertiary);
  margin: 10px var(--page-padding) var(--space-6);   /* alt 24px: takip eden plain widget ile rahat nefes */
  border-radius: 999px;      /* iOS 26 refresh: pill */
  padding: 3px;
  border: none;
}
.segment {
  flex: 1;
  text-align: center;
  padding: 7px 12px;
  border-radius: 999px;      /* iOS 26 refresh: pill */
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.15s;
}
.segment.active {
  background: var(--bg-elevated);
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

/* iOS-style chips (filter row) */
.chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  background: var(--ios-fill-tertiary);
  border: none;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.chip.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
}

/* ============ PROGRESS / METERS ============ */
/* Usage meter: STATIC info, not tappable — bg-canvas uzerinde inline gosterim
 * (kart frame'i ile karistirilmasin). */
.usage-meter {
  margin: 0 var(--page-padding) var(--section-gap);
  padding: 0 var(--space-2);
  background: transparent;
  border-radius: 0;
}
.usage-meter .usage-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.usage-meter .usage-label { font-weight: 500; }
.usage-meter .usage-value { color: var(--text-primary); font-weight: 600; }
.progress-bar {
  height: 6px;
  background: var(--ios-fill-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar .progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
}
/* Progress modifiers — color (danger=limit doldu) + percent width helpers */
.progress-bar .progress-fill.danger     { background: var(--danger); }
.progress-bar .progress-fill.full-width { width: 100%; }
.progress-bar .progress-fill.progress-30 { width: 30%; }
.progress-bar .progress-fill.progress-50 { width: 50%; }
.progress-bar .progress-fill.progress-70 { width: 70%; }

/* ============ SHEETS / DIALOGS (Cupertino) ============ */
.sheet-overlay {
  position: absolute;
  inset: 0;
  height: 100%;
  background: var(--bg-overlay);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Sheet: yatay padding YOK — cocuk elemanlar kendi --page-padding margin'lerini kullanir.
 * Bu sayede card-section, hero-zone, alert-banner vb. sheet icindeyken ana ekrandaki gibi
 * 16px sol kenarda; double-padding (32) bug'i olmaz. */
.sheet {
  background: var(--bg-elevated);
  width: 100%;
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  padding: 8px 0 var(--safe-bottom-padding);
  max-height: 80%;
  overflow-y: auto;
}
.sheet-handle {
  width: 36px;
  height: 5px;
  background: var(--ios-gray-4);
  border-radius: 3px;
  margin: 6px auto 24px;     /* handle altinda 24px nefes (iOS native pattern) */
}
/* Article intro paragraph — hero-zone altinda ana article icerigi oncesi giris paragrafi.
 * Horizontal 24 (space-6) — KVKK article-body ve content-body wrapper'i ile ayni inset. */
.article-intro {
  padding: 0 var(--space-6);
  margin-bottom: var(--section-gap);
}

/* Hero chips: hero-meta altinda Nice classes vb. badge satiri (centered, wrap'lar) */
.hero-zone .hero-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* Sheet actions: sheet bottom CTA(s) için yatay padding wrapper.
 * center-hero semantik olarak hero-intro icindir, sheet CTA icin DEGIL. */
.sheet-actions {
  padding: 0 var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sheet-actions.row { flex-direction: row; }      /* dialog tarzi: solda iptal, sagda primary/destructive */

/* Sheet prompt: confirm/dialog tarzi sheet icin title + body. Dialog-overlay yerine sheet kullaniminda.
 * Left-aligned (iOS modern sheet pattern — Mail delete, App Store) — buton kenariyla hizali, multi-line readability. */
.sheet-prompt {
  padding: 8px var(--page-padding) 24px;
}
.sheet-prompt .prompt-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.sheet-prompt .prompt-body {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
}

/* iOS Alert dialog (CENTERED) — DEPRECATED. Bottom sheet pattern kullanildi (sheet-overlay + sheet-prompt).
 * Eski centered dialog rule'lari kaldirildi — confirm/notice/error dialog tum sayfalar bottom sheet'e gecti.
 * Yeni dialog eklemek icin: .sheet-overlay + .sheet + .sheet-prompt + .sheet-actions (row for 2 btn). */

/* iOS Snackbar / toast */


/* ============ SPINNER / LOADING ============ */

/* iOS-style activity indicator */
.spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--bg-subtle);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.spinner.spinner-light { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ ONBOARDING / WELCOME ============ */
/* Hero block: icon sabit 128px top'tan, metin uzunlugu hero pozisyonunu kaydirmaz.
 * Background YOK — phone-frame'in bg-canvas'ini inherit eder (app genelinde tutarli). */
.welcome-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 128px 32px 16px;
  text-align: center;
}
.welcome-hero .hero-icon {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background-color: var(--brand);
  background-image: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  margin-bottom: 32px;
}
/* Welcome hero, ikonu 120px renkli bir kutu icinde tasir; bu yuzden ic ikon 3xl (96) yerine 64'te daha rahat duruyor (canvas-uzeri 3xl ikonlar 96'da kalir). */
.welcome-hero .hero-icon .icon {
  width: 64px;
  height: 64px;
}
.welcome-hero .hero-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.02em;  /* DESIGN.md title-1 token */
}
.welcome-hero .hero-body {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-width: 300px;
  margin: 0;
  letter-spacing: -0.01em;
}
/* welcome-footer: bottom padding az tutulur — yukarıdaki .content.no-tab-bar
 * zaten --safe-bottom clearance saglar (home indicator). Cift padding olmasin. */
.welcome-footer { padding: 16px 24px var(--space-3); }       /* alt 12px + .content padding-bottom 34px = 46px toplam (120 ile birebir) */
.welcome-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}
.welcome-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ios-gray-4);
}
.welcome-dots .dot.active { background: var(--primary); width: 22px; border-radius: 4px; }

/* ============ SPLASH ============ */
.splash {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
  color: white;
}
.splash .logo {
  font-size: 56px;
  font-weight: 700; /* Plex Sans 700de biter — 800 sentetik bold uretirdi */
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.splash .logo-mark {
  /* Gerçek marka işareti (brand/nomist-mark.svg) — 512 tuval, içerik merkezli;
   * 190px'te kalkan ~111px görünür. Metin-tabanlı .logo yerini aldı (100 splash). */
  width: 190px;
  height: 190px;
  margin-bottom: 4px;
}
.splash .tagline {
  font-size: 15px;
  opacity: 0.85;
  letter-spacing: -0.01em;
}

/* ============ ACCORDION (iOS disclosure style) ============ */

/* ============ PRICING TABLE ============ */
.tier-card {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  margin: 12px 16px;
  position: relative;
}
.tier-card.recommended {
  border: 2px solid var(--primary);
  padding: 17px 15px;
}
.tier-card.recommended::before {
  content: "ÖNERİLEN";
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.tier-card .tier-name {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.tier-card .tier-price {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0;
  letter-spacing: -0.025em;
}
.tier-card .tier-price small {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: -0.01em;
}
.tier-features {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.tier-features li {
  padding: 4px 0;
  display: flex;
  gap: 8px;
}
.tier-features li::before {
  content: "✓";
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}
.tier-features li.disabled { color: var(--text-tertiary); }
.tier-features li.disabled::before {
  content: "—";
  color: var(--text-tertiary);
}

/* ============ PAYWALL — 2 paket, sheet (720 · Figma 242) ============
 * Figma: Paywalls > "2-Product Paywalls" > 242 (Yillik secili `772:97` / Aylik secili `850:2211`).
 * Gorselsiz hero: full-bleed brand gradient + beyaz baslik/liste; altta dibe sabit
 * beyaz sheet (yuvarlak ust koseler) icinde plan kartlari + CTA + linkler.
 * Gradient .phone-frame'de yasar ki sheet'in yuvarlak koselerinin ARKASINDA gorunsun. */
.phone-frame.paywall-frame {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.paywall-hero {
  flex: 1;
  position: relative;
  background: transparent;                    /* .phone-frame gradient'i gorunur */
  padding: 56px var(--space-6) var(--space-6);  /* status-bar 54 + 56 = Figma padding-top 110 */
  color: var(--text-on-brand);
}
.paywall-hero .paywall-close,
.paywall-poster .paywall-close {
  position: absolute;
  top: 8px;                                   /* status-bar 54 + 8 = Figma y 62 */
  right: var(--page-padding);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.paywall-hero .paywall-headline,
.paywall-poster .paywall-headline {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Marker vurgu — accent zemin uzerinde beyaz metin (Figma: headline-highlight) */
.paywall-hero .paywall-headline .mark,
.paywall-poster .paywall-headline .mark {
  background: var(--accent);
  padding: 1px 4px 3px 6px;
  margin-left: -6px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* Filigran kalkan — hero'nun sag ustunde, %5.5 opaklikta dekoratif marka isareti.
 * Figma 242 `Watermark · shield-check` (frame 280x280 @ x203/y166; y166 - status-bar 54 = 112).
 * Konum/olcu px: dekoratif asset yerlesimi, spacing token'i degil (bkz. .poster-mark 88px). */
.paywall-hero .paywall-watermark {
  position: absolute;
  top: 112px;
  left: 203px;
  width: 280px;
  height: 280px;
  background: currentColor;                   /* text-on-brand — hero'dan inherit */
  opacity: 0.055;
  pointer-events: none;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.paywall-hero .paywall-features {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.paywall-hero .paywall-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.paywall-hero .paywall-features li strong { font-weight: 600; }
.paywall-hero .paywall-features .icon { color: var(--brand-3); }

.paywall-sheet {
  margin-top: auto;                           /* dibe sabit — CTA + linkler her zaman altta */
  background: var(--bg-surface);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 -4px 20px rgba(4, 13, 18, 0.10);
  padding: 28px var(--page-padding) 46px;     /* alt 46 = safe-bottom 34 + space-3 (CLAUDE.md 8.1) */
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* Plan listesi her baglamda dikey flex — sheet (242) ve poster (200) ortak.
 * Onceden kural yalniz `.paywall-sheet .plan-list` idi: poster'da display block kaliyor,
 * `.on-dark` / `.spaced` gap'i hic uygulanmiyordu (kartlar bitisikti). */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.paywall-sheet .paywall-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plan-card {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  background: var(--bg-canvas);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.plan-card.selected {
  padding: 15px;                              /* 2px border → ic olcu sabit kalir */
  border: 2px solid var(--brand);
  background: var(--bg-surface);
  box-shadow: 0 2px 10px rgba(24, 61, 61, 0.12);
}
.plan-card .plan-info { flex: 1; }
.plan-card .plan-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.plan-card .plan-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.plan-card .plan-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.plan-card .price-row {
  display: flex;
  align-items: baseline;                      /* eski + guncel fiyat ayni cizgide (Figma: price-row) */
  gap: var(--space-2);
}
.plan-card .price-old {
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: line-through;
  letter-spacing: -0.01em;
}
.plan-card .price-current {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.plan-card.selected .price-current { color: var(--brand); }
.plan-card .price-unit {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
/* Kart ustune tasan rozetler — .badge'in solid varyanti (tint degil, dolu zemin) */
.plan-card .badge.badge-solid-accent  { background: var(--accent);  color: var(--text-on-accent); }
.plan-card .badge.badge-solid-success { background: var(--success); color: var(--text-on-brand); }
.plan-card .badge.badge-float {
  position: absolute;
  top: -10px;
  padding: 3px 8px;
}
.plan-card .badge.badge-float.badge-start { left: 12px; }
.plan-card .badge.badge-float.badge-end   { right: 12px; }

.paywall-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.paywall-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
  text-decoration: none;
}
.paywall-links a.link-restore {
  font-weight: 600;
  color: var(--brand);
}


/* ============ PAYWALL — poster (711 · Figma 100 / 722 · Figma 200) ============
 * Figma: Paywalls > "1-Product Paywalls" > 100 `786:1202` · "2-Product Paywalls" > 200 `786:1144`.
 * Tema: iMemo 100 / Subcap 300 poster paywall'i, Nomist stiline uyarlanmis. 720'den farki:
 * beyaz sheet YOK — tum ekran brand gradient, icerik ortalanmis marka hero + marker'li
 * baslik + serbest nefes + dipteki teklif blogu. Gradient yine .phone-frame.paywall-frame'de. */
.paywall-poster {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 50px var(--page-padding) 46px;     /* ust 50 = Figma brand y104 - status-bar 54;
                                                 alt 46 = safe-bottom 34 + space-3 (CLAUDE.md 8.1) */
  color: var(--text-on-brand);
}
/* 44px dokunma hedefi — gorunen daire 32 kalir (Apple HIG min 44) */
.paywall-close.tap-44::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
}

/* Marka hero: zeminsiz mark (beyaz kalkan) + wordmark, ortali */
.paywall-poster .poster-brand { text-align: center; }
.paywall-poster .poster-mark {
  display: block;
  width: 88px;                                /* 190 master'dan oranti korunarak (NOTES: Logo Mark) */
  height: 88px;
  margin: 0 auto;
}
.paywall-poster .poster-wordmark {
  margin-top: var(--space-3);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.025em;
}
/* 200: wordmark gizli ama YERI korunur — Figma'da baslik iki poster'da da ayni y'de (272).
 * display:none basligi 44px yukari cekerdi (wordmark 32 + gap 12). */
.paywall-poster.no-wordmark .poster-wordmark { visibility: hidden; }

.paywall-poster .paywall-headline {
  margin-top: var(--space-7);
  padding: 0 var(--space-2);                  /* 16 + 8 = Figma headline x24 */
}

/* Orta bolge: teklif/plan blogu bos alanda ortalanir (poster nefesi) */
.paywall-poster .poster-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tek paket teklif blogu */
.poster-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                                  /* Figma offer itemSpacing */
  text-align: center;
}
.poster-offer .badge-solid-accent { background: var(--accent); color: var(--text-on-accent); }
.poster-offer .poster-price {
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.02em;
  color: var(--text-on-brand);                /* explicit — style-guide demo'su .paywall-poster
                                                 disinda yasar, inherit'e guvenilmez */
}
.poster-offer .poster-price .unit {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-3);
}
.poster-offer .poster-subline {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.01em;
  color: var(--brand-3);
}

/* Plan kartlarinin koyu-zemin varyanti — yeni component degil, .plan-card modifier'i */
.plan-list.on-dark { gap: var(--space-3); }
.plan-list.spaced  { gap: var(--space-7); }   /* ?variant=sade — kartlar arasi genis nefes */
.plan-list.on-dark .plan-card {
  background: rgba(255, 255, 255, 0.10);      /* alpha: token'a baglanamaz (bilincli) */
  border-color: rgba(255, 255, 255, 0.22);
}
.plan-list.on-dark .plan-card .plan-name,
.plan-list.on-dark .plan-card .price-current { color: var(--text-on-brand); }
.plan-list.on-dark .plan-card .plan-meta,
.plan-list.on-dark .plan-card .price-unit    { color: var(--brand-3); }
.plan-list.on-dark .plan-card.selected {
  background: var(--bg-surface);
  border-color: var(--accent);                /* koyu zeminde brand kenar kayboluyor → accent */
  box-shadow: 0 4px 12px rgba(4, 13, 18, 0.25);
}
.plan-list.on-dark .plan-card.selected .plan-name     { color: var(--text-primary); }
.plan-list.on-dark .plan-card.selected .price-current { color: var(--brand); }
.plan-list.on-dark .plan-card.selected .plan-meta,
.plan-list.on-dark .plan-card.selected .price-unit    { color: var(--text-secondary); }
.plan-list.on-dark .plan-card.selected .price-old     { color: var(--text-tertiary); }

/* Dip blok: CTA + linkler + zorunlu store metni */
.paywall-poster .poster-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                        /* Figma footer itemSpacing 13 → token 12 */
}
/* Not yigini: tahsilat satiri + yenileme notu, aralarinda bosluk yok (Figma `notes` gap 0) */
.poster-notes {
  display: flex;
  flex-direction: column;
}
.paywall-links.on-dark a              { color: var(--brand-3); }
.paywall-links.on-dark a.link-restore { color: var(--text-on-brand); }
.paywall-links.tap-44 { min-height: 44px; }   /* 12px metin, 44px dokunma hedefi */
.paywall-legal {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--brand-3);
}
.poster-note {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--brand-3);
}
/* Tahsil edilen tutar satiri — store gorunurlugu icin tam kontrast (Figma 100: beyaz) */
.poster-note.note-amount { color: var(--text-on-brand); }


/* ============ INDEX PAGE LAYOUT ============ */
.index-layout {
  display: flex;
  gap: 32px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.index-sidebar {
  width: 320px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 16px;
  height: fit-content;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  position: sticky;
  top: 60px;
}
.index-sidebar h3 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  margin: 16px 0 6px;
}
.index-sidebar a {
  display: block;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 4px;
  letter-spacing: -0.01em;
}
.index-sidebar a:hover { background: var(--ios-fill-tertiary); }
.index-sidebar a.active { background: var(--primary-tinted); color: var(--primary); font-weight: 600; }
.index-preview {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.preview-frame {
  width: 399px;
  height: 836px;
  overflow: hidden;
  position: relative;
}
.preview-frame iframe {
  width: 399px;
  height: 836px;
  border: none;
  background: transparent;
  display: block;
}

/* ============ DEV BAR ============ */
body.has-dev-bar { padding-top: 44px; }

/* ============ UTILITIES ============ */

/* HTML `hidden` attribute'u component display'ini yenmeli — .paywall-links gibi
 * display:flex tasiyan class'lar UA'nin [hidden]{display:none} kuralini eziyordu
 * (ekran-ici varyant anahtarlari icin: ?legal=full, ?variant=sade). */
[hidden] { display: none !important; }

/* Iframe (used in index.html) */

/* iOS chevron disclosure (use inside list-item .trailing) */

/* ==========================================================================
   CUPERTINO UTILITY / COMPONENT CLASSES — iOS variant tanimlari.
   ========================================================================== */

/* Marker classes (semantic only) */
.tier-cta           { /* marker */ }

/* Anchor wrapper auto-cleanup.
 * display:contents tuzagi (CLAUDE.md §5b.3): list-item bir <sc-list-item> wrapper'a sarildiginda
 * onun ureттigi <a> artik .content/.card-section/.sheet'in DIREKT cocugu degil (araya sc-list-item
 * girer) → child-combinator kirilir, link underline'i geri gelir. Sarmal form da kapsanir. */
.content > a, .sheet > a, .card-section > a,
.content > sc-list-item > a, .sheet > sc-list-item > a, .card-section > sc-list-item > a {
  text-decoration: none;
  color: inherit;
}

/* Sticky bottom bar — iOS translucent.
 * padding-bottom: 12px base + --safe-bottom (home indicator clearance, 34 mockup / env() PWA). */
.bottom-cta-bar, .fixed-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--ios-separator);
  padding: 10px 16px var(--safe-bottom-padding);
}
.fixed-bottom.col, .bottom-cta-bar { display: flex; flex-direction: column; gap: 8px; }
/* content padding-bottom: fixed-bottom yuksekligi + safe-bottom icin yer */
.content.with-bottom-cta, .content.with-bottom-bar { padding-bottom: calc(80px + var(--safe-bottom)); }

/* Page greeting */

/* Cards & banners */
.card.card-with-actions { display: flex; align-items: center; gap: 12px; padding: 16px; }
.card.gradient-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; }

/* Banners */

/* Leading variants */
:is(.list-item, .step-list .step) .leading.leading-primary { background-color: var(--primary);  color: #fff; }
:is(.list-item, .step-list .step) .leading.leading-neutral { background-color: var(--text-secondary); color: #fff; }
:is(.list-item, .step-list .step) .leading.leading-success { background-color: var(--success); color: #fff; }
:is(.list-item, .step-list .step) .leading.leading-warning { background-color: var(--accent);  color: #fff; }
:is(.list-item, .step-list .step) .leading.leading-danger  { background-color: var(--danger);  color: #fff; }

/* Watch detail header */

/* Trademark detail hero */

/* Chip flow */

/* Search results meta */
.list-item .meta-line { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; letter-spacing: -0.01em; }

/* Settings pro card */
.card.card-pro-cta { display: flex; align-items: center; gap: 14px; padding: 18px 16px; }
.card.card-pro-cta .pro-title { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.card.card-pro-cta .pro-arrow { font-size: 22px; opacity: 0.8; }

/* Backfill loading process */

/* Backfill stat card */

/* Paywall hero */

/* Match-detail sheet */

/* Add-to-watch sheet card */

/* Bulletin context */

/* Bulletin detail hero */

/* Account avatar */

/* Step card */
/* Legacy step-card (home-empty hala kullaniyor) */

/* Section title — kart frame'i olmadan kullanilan baslik.
 * Section-header (15/600/label) yerine standalone tutorial/article basliklari icin.
 * H2-equivalent: 22/700/ink, page-padding ile hizali. */
.section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  padding: 0 var(--page-padding);
}

/* Step list — tutorial/instructional STATIC content (kart frame'i yok, tap'lanmaz).
 * Margin-left'i section-title ile ayni — step-num section-title text'iyle hizada. */
.step-list {
  margin: 0 var(--page-padding) var(--section-gap);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.step-list .step.step-pending { opacity: 0.45; }
.step-list .step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: default;
}
/* Pending durum halkasi — ikon degil sekil; inline <svg> yerine saf CSS (ikon-dosya kurali).
 * Eski 14px svg circle'in (viewBox 24, r10, stroke 2.5) gorsel esdegeri. */
.step-pending-ring {
  width: 13px; height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.step-list .step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--primary);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
  color: #fff;
  -webkit-text-fill-color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.step-list .step-body { flex: 1; min-width: 0; }
.step-list .step-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}
.step-list .step-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

/* Icon circle large */

/* Center hero */
.center-hero { padding: 8px 16px 16px; text-align: center; }       /* default: kart sonrasi CTA — 8 top + onceki section-gap 32 = 40 toplam */
.center-hero.tight { padding: 8px 16px 8px; }
.center-hero.tight-top { padding-top: 0; }                         /* iki center-hero alt alta ise ikincisi (CTA + alt link gibi) */
.center-hero.spaced { padding: 32px 16px 24px; }                   /* empty state hero icin daha gevsek */
.center-hero > .icon { margin-bottom: var(--space-3); }  /* canonical: icon -> h2 nefes alani 12px */
.center-hero .btn-block { max-width: 320px; margin: 0 auto; }      /* centered CTA inside hero: narrow + auto-center */
.center-hero > .text-13-secondary { margin-bottom: 12px; }        /* prompt above feedback buttons (651) */
.center-hero > .flex-row-actions-8 { justify-content: center; gap: 12px; }  /* centered button row */

/* Hero status badge slot — hero-name/hero-meta altinda badge icin tutarli boluk */
.hero-zone .hero-status { margin-top: 12px; }
/* Hero vertical rhythm — token bazli (icon→h2: space-3, h2→p: space-3, p→CTA: space-6) */
.center-hero h2 { font-size: 22px; font-weight: 700; margin: var(--space-3) 0 var(--space-3); letter-spacing: -0.022em; }
.center-hero p  { font-size: 15px; color: var(--text-secondary); line-height: 1.4; margin: 0 0 var(--space-6); letter-spacing: -0.01em; }
.center-hero .icon-circle { width: 88px; height: 88px; border-radius: 22px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.center-hero .icon-circle.primary { background: var(--primary-tinted); color: var(--primary); }

/* Center screen full-takeover */
.center-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; padding: 32px; text-align: center; }
.center-screen .icon-emoji { font-size: 56px; opacity: 0.85; margin-bottom: 16px; }
.center-screen > .icon { margin-bottom: 24px; }            /* fullscreen state icon spacing */
.center-screen h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.022em; }
.center-screen p { font-size: 15px; color: var(--text-secondary); line-height: 1.4; max-width: 280px; margin: 0 0 24px; letter-spacing: -0.01em; }
.center-screen .footnote { font-size: 12px; color: var(--text-tertiary); margin-top: 16px; max-width: 300px; letter-spacing: -0.01em; }

/* Fullscreen confirm */

/* Consent box */
.consent-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--bg-subtle); border-radius: var(--radius-md); margin-bottom: 16px; }
.consent-box input[type="checkbox"] { margin-top: 2px; width: 22px; height: 22px; accent-color: var(--primary); }
.consent-box label { font-size: 14px; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; }

/* KVKK metni */

/* Article body */
.article-body h2 { font-size: 20px; font-weight: 700; margin: 24px 0 8px; letter-spacing: -0.022em; }
.article-body h3 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; letter-spacing: -0.02em; }
.article-body p { font-size: 17px; color: var(--text-primary); line-height: 1.5; margin: 0 0 12px; letter-spacing: -0.01em; }
.article-body ul { font-size: 17px; color: var(--text-primary); line-height: 1.55; padding-left: 22px; margin: 0 0 12px; letter-spacing: -0.01em; }
.article-body .article-disclaimer { margin: 16px 0; padding: 14px; background: var(--warning-light); border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; }

/* Subscription summary */

/* Code block + dropzone */

/* Filter chip toggle */

/* Footer */

/* Info explainer */

/* Howto list */

/* Radio rows */

/* Brand hero */

/* Stat row */

/* Tap row */

/* Info box */

/* Empty state tweaks */

/* Misc text helpers */
.text-14-secondary { font-size: 14px; color: var(--text-secondary); letter-spacing: -0.01em; }
.text-13-helper { font-size: 13px; color: var(--text-secondary); line-height: 1.45; letter-spacing: -0.01em; }
.text-13-secondary { font-size: 13px; color: var(--text-secondary); letter-spacing: -0.01em; }
.text-13-tertiary { font-size: 13px; color: var(--text-tertiary); letter-spacing: -0.01em; }
.text-12-tertiary { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.01em; }
.body-text { font-size: 15px; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; }
.body-text-lg { font-size: 17px; color: var(--text-primary); line-height: 1.5; letter-spacing: -0.01em; margin: 0; }
.fact-list { font-size: 15px; color: var(--text-primary); line-height: 1.55; padding-left: 22px; margin: 0; letter-spacing: -0.01em; }

/* Heading utilities */
.h-page-title { font-size: 22px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.022em; }
.h-section { font-size: 20px; font-weight: 700; margin: 24px 0 8px; letter-spacing: -0.022em; }

/* Width / height helpers */

/* Emoji sizes */

/* Subtitle colors */

/* Inline meta */

/* Spinner sm */
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }

/* Backfill loading */

/* Padding/margin utilities */
.m-0 { margin: 0; }

/* Flex helpers */

/* List item leading variants override */
.list-item .leading.leading-80 { width: 80px; height: 80px; font-size: 28px; margin: 0 auto 12px; border-radius: 20px; }
.list-item .leading.leading-56 { width: 56px; height: 56px; font-size: 22px; border-radius: 14px; }
.list-item .leading.leading-40 { width: 40px; height: 40px; border-radius: var(--radius-sm); }

/* Progress fill width helpers */

/* List item card helper */

/* Footnote/footer-ish helpers */
.footnote-small { padding: 16px; font-size: 12px; color: var(--text-tertiary); line-height: 1.4; letter-spacing: -0.01em; }
.warning-callout { margin: 16px; padding: 14px; background: var(--warning-light); border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; }
.text-block-13 { padding: 12px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; letter-spacing: -0.01em; }

/* Spacers */

/* CTA hint */

/* V2 hint pill */

/* Formal letter (V2 dilekce) */

/* Stat card legacy */

/* KVKK actions sticky */

/* Progress dialog */

/* Match detail skeleton bg */

/* Textarea helper */

/* ==========================================================================
   UTILITIES — feature-specific helper class tanimlari.
   ========================================================================== */
.banner-success-row { padding: 12px 14px; background: var(--success-light); margin: 0 16px 12px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; }
.body-15-300 { font-size: 15px; color: var(--text-secondary); line-height: 1.4; max-width: 300px; margin: 0 auto 20px; letter-spacing: -0.01em; }
.btn-pill-32 { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
.bulletin-meta-success { font-size: 13px; color: var(--success); font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; }
.bulletin-meta-warning { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; }
/* Notr durum satiri — style-guide brand-card spec'inde dokumante ("tertiary notr") ama CSS'te
 * eksikti. Kullanim: pasif bekleme (bizde/kullanicida is yok, sure islemiyor) — orn. "Ilan bekleniyor". */
.bulletin-meta-neutral { font-size: 13px; color: var(--text-tertiary); font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; }
.code-block-mono { padding: 12px 16px; font-size: 12px; font-family: var(--font-numeric); line-height: 1.6; color: var(--text-primary); }
.consent-checkbox { margin-top: 2px; width: 22px; height: 22px; accent-color: var(--primary); }
.dropzone-margin-0 { margin: 16px; background: var(--bg-surface); border: 1.5px dashed var(--ios-gray-3); border-radius: var(--radius-lg); text-align: center; padding: 28px 16px; }
.font-13-tertiary-mb-12 { font-size: 13px; color: var(--text-tertiary); margin-bottom: 12px; letter-spacing: -0.01em; }
.font-600-mb-4 { font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.font-mono { font-family: var(--font-numeric); }
.formal-letter-block { padding: 16px; background: var(--bg-surface); margin: 0 16px; border-radius: var(--radius-lg); font-family: var(--font-serif); font-optical-sizing: auto; line-height: 1.6; font-size: 14px; }
.heading-28 { font-size: 28px; font-weight: 700; /* Plex max 700 */ margin-bottom: 8px; letter-spacing: -0.025em; }
.info-canvas-12 { padding: 14px; background: var(--bg-subtle); margin: 16px; border-radius: var(--radius-md); font-size: 12px; color: var(--text-primary); line-height: 1.4; letter-spacing: -0.01em; }
.padding-16-tertiary-11 { padding: 16px; font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.01em; }
.padding-16-tertiary-center,
.app-meta-footer { padding: 16px var(--page-padding) 24px; text-align: center; font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.01em; }
.app-meta-footer > * + * { margin-top: 4px; }
.soft-update-banner { background: var(--accent-tint); color: var(--accent-dark); margin: 12px 16px; padding: 14px 16px; border-radius: 22px; display: flex; align-items: center; gap: 12px; }

/* Alert banner — tinted static info (NOT tappable, no card frame).
 * Kullanim: itiraz son tarihi, anonim hesap uyarisi gibi statik bilgiler.
 * Leading icon: warning/danger/success icin mandatory (semantic encoding).
 *               alert-info icin optional — feature-specific kullan, generic atla.
 * Padding: info-block ile ayni (14 / --list-item-pad-x) — descriptive multi-line content. */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 var(--page-padding) var(--section-gap);
  padding: 14px var(--list-item-pad-x);
  border-radius: 22px;
  cursor: default;
}
/* Leading yoksa gap'i sifirla, alert-body tam genislik (alert-info'da yaygin).
 * Leading = .leading sarmali VEYA dogrudan .icon (ekranlarda kullanilan bicim: ham <i class="icon">).
 * Onceden yalniz .leading sayiliyordu → ikonlu TUM banner'larda gap 0 kaliyordu (ikon metne
 * bitisik); .leading sarmalini kullanan ekran hic yoktu, yani API oluydu. */
.alert-banner:not(:has(> .leading)):not(:has(> .icon)) { gap: 0; }
/* Alert-banner icindeki inline link */
.alert-banner .alert-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.alert-banner.alert-warning { background: var(--accent-tint); }
.alert-banner.alert-success { background: var(--success-tint); }
.alert-banner.alert-danger  { background: var(--danger-tint); }
.alert-banner.alert-info    { background: var(--brand-tint); }
.alert-banner .alert-body { flex: 1; min-width: 0; }
.alert-banner .alert-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 4px;                  /* descriptive card icin nefes alani — 2px cok bitisikti */
}
.alert-banner .alert-meta {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  line-height: 1.45;                /* multi-line meta okunabilirligi */
}
.alert-banner.alert-warning .alert-meta { color: var(--accent-dark); font-weight: 600; }
.alert-banner.alert-danger  .alert-meta { color: var(--danger);     font-weight: 600; }
.alert-banner.alert-success .alert-meta { color: var(--success);    font-weight: 600; }
.text-12-tertiary { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.01em; }
.text-13-tertiary { font-size: 13px; color: var(--text-tertiary); letter-spacing: -0.01em; }
.text-13-secondary { font-size: 13px; color: var(--text-secondary); letter-spacing: -0.01em; }

/* ============================================================
 * FULLSCREEN MODE — ?fullscreen=1 ile gercek cihazda native test
 * Body scroll kilit: sadece .content scroll eder, tab-bar sabit. */
html:has(body.fullscreen),
body.fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-canvas);
}
body.fullscreen .phone-frame {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  overflow: hidden;
}
body.fullscreen .phone-frame::before { display: none; }
body.fullscreen .status-bar { display: none; }
body.fullscreen .content {
  padding-top: env(safe-area-inset-top);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.fullscreen {
  --safe-bottom: env(safe-area-inset-bottom, 0px);   /* gercek iOS home indicator yuksekligi */
}
body.fullscreen .tab-bar {
  /* bottom: var(--safe-bottom) base rule'da zaten env()'i devraliyor.
   * Fullscreen'de tab-bar genis ekrana adapt olsun diye width/max-width override. */
  width: calc(100% - 32px);
  max-width: 420px;
}
body.fullscreen .app-bar.app-bar-modern { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)); }
body.fullscreen .large-title { padding-top: calc(8px + env(safe-area-inset-top)); }

/* ============================================================
 * BRAND LIST — App Store-style mini-card (with logo + body + chevron)
 * Kullanim: brand entity list (Senin eslesmelerin, watches)
 * card-section yerine kullanilir; her brand kendi mini-card'i. */
.brand-list {
  margin: 0 var(--page-padding) var(--section-gap);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brand-list a { text-decoration: none; color: inherit; }
.brand-card {
  display: flex;
  align-items: stretch;                        /* divider stretch icin */
  background: var(--bg-surface);
  border-radius: 22px;
  padding: 8px var(--list-item-pad-x) 8px 12px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
}
.brand-card:active { opacity: 0.7; transform: scale(0.98); }
/* Kilitli eslesme karti (412 · Free) — ad/sahip maskeli, tiklanamaz (href yok), trail kilit ikonu.
   Skor rengi (title-danger/warning) korunur → kullanici "yuksek eslesme var ama adi gizli" gorur.
   Maskeli metin cozunurlukten bagimsiz esit aralikli okunsun diye tabular-nums + hafif letter-spacing. */
.brand-card.locked { cursor: default; }
.brand-card.locked:active { opacity: 1; transform: none; }
.brand-card.locked .brand-card-title,
.brand-card.locked .brand-card-holder { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.brand-card.locked .brand-card-trail { color: var(--accent-dark); }
/* Kilitli kart trail'i lock + caret ikonunu yan yana tasir (Figma: standalone kilit + caret) */
.brand-card.locked .brand-card-trail { display: inline-flex; align-items: center; gap: var(--space-2); }
.brand-card .brand-card-logo {
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-card .brand-card-logo img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
}
/* Text-fallback (gercek logo yoksa initials) — sage-tinted bg, brand color text */
.brand-card .brand-card-logo:not(:has(img)) {
  background-color: var(--primary-tinted);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
  color: var(--primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-card .brand-card-divider {
  width: 1px;
  background: var(--separator);
  align-self: stretch;
  margin: 10px 12px;                           /* dikey 10 nefes + yatay 12 gap */
  flex-shrink: 0;
}
.brand-card .brand-card-body {
  flex: 1; min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Nice chip row — info-block icindeki flex-wrap badge dizilimi */
.card-section .info-block .nice-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ============ INFO BLOCK — descriptive content inside card-section ============
 * Use case: yardim metni, paragraph descriptions, multi-line info — NON-interactive.
 * list-item nowrap/ellipsis kisitlamalari yok; alert-banner tinted attention degil.
 * iOS 26: Settings Privacy & Security intro card pattern. */
.card-section .info-block {
  padding: 14px var(--list-item-pad-x);
}
/* display:contents tuzagi (CLAUDE.md §5b.3): info-block bir <sc-info-block> wrapper'a sarildiginda
 * iki info-block ardisik kardes olmaz (araya sc-info-block girer) → '+' kirilir. Ham form verbatim
 * korunur (ham ekranlar birebir), sarmal form paralel eklenir. Nomist'te bugun card-section basina
 * tek info-block var → kural pratikte tetiklenmez; defensive parallel (gelecek kompozisyonlar icin). */
.card-section .info-block + .info-block,
.card-section sc-info-block + sc-info-block > .info-block {
  border-top: 1px solid var(--separator);
}
.card-section .info-block .info-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.card-section .info-block .info-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0;
}
.card-section .info-block .nice-chip-row + .info-body { margin-top: 8px; }
.card-section .info-block .info-body.body-primary { color: var(--text-primary); }
.card-section .info-block .info-body a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.brand-card .brand-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0 0 2px;
}
/* Match score color variants — eslesme bandi marka isminin renginde encode edilir */
.brand-card .brand-card-title.title-danger  { color: var(--danger); }   /* Yuksek eslesme (>=85) */
.brand-card .brand-card-title.title-warning { color: var(--accent-dark); } /* Orta eslesme (75-84) */
.brand-card .brand-card-sub {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.brand-card .brand-card-meta {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
/* Brand card sub variants: tabular nums for app number, chips row, bold holder */
.brand-card .brand-card-sub { font-variant-numeric: tabular-nums; }
.brand-card .brand-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.brand-card .brand-card-chips .badge {
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}
.brand-card .brand-card-holder {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.brand-card .brand-card-trail {
  flex-shrink: 0;
  color: var(--text-tertiary);
  align-self: center;
}

/* ============================================================
 * VARYANT (durum) GORUNURLUK — preview.js `data-variant-<axis>` yazar
 * ============================================================
 * Ekran head'i eksenleri deklare eder:
 *   <meta name="variants" content='[{"axis":"tier","label":"Tier","options":["free","pro"],"default":"free"}]'>
 * preview.js secilen degeri .phone-frame'e `data-variant-tier="pro"` olarak yazar; browse-all
 * index'inde durum secici toolbar cikar.
 * Kullanim (842 · on arastirma hakki doldu): .only-free / .only-pro.
 *
 * Gorunur hal DUZ `block` — sarmal, blok konteyner olan .sheet icinde ekstra bir blok kutu
 * olur, icindeki .sheet-prompt (block) / .sheet-actions (flex) kendi display'ini korur
 * (bir elementin display'i cocuklarinin display'ini DEGISTIRMEZ). Once `display:contents`
 * yazilmisti; gorsel sonuc birebir ayni oldugu halde CLAUDE.md §5b.3'teki selektor tuzagini
 * (`>` / :nth-child kirilmasi) bedava riske sokuyordu — sade olan tercih edildi.
 *
 * JS-SIZ DAYANIKLILIK: DEFAULT varyant (tier=free) attribute olmadan da gorunur; preview.js
 * yuklenmezse/gec kalirsa ekran BOS kalmaz, gecerli tek hal gorunur (hepsini gizleyip
 * attribute beklemek bos ekran + FOUC uretiyordu). Attribute geldiginde override eder. */
/* tier ekseni — 842 (on arastirma hakki doldu) */
.only-pro { display: none; }
.only-free { display: block; }
[data-variant-tier="pro"] .only-free { display: none; }
[data-variant-tier="pro"] .only-pro  { display: block; }
/* journey ekseni — 200 (anasayfa: basvuru yolculugu yok / var) */
.only-journey-var { display: none; }
.only-journey-yok { display: block; }
[data-variant-journey="var"] .only-journey-yok { display: none; }
[data-variant-journey="var"] .only-journey-var { display: block; }