/* INCI AI App — app.css */
/* index.html'den ayrıldı — dokunma */

    /* ============================================================
       CSS VARIABLES — TEMA SİSTEMİ
    ============================================================ */
    :root {
      /* Brand (default: Forest Green) */
      --c-primary:    #2F453A;
      --c-secondary:  #5A7666;
      --c-accent:     #9DC6AB;
      --c-light:      #DBEEDC;
      --c-bg:         #FBFDFC;
      --c-surface:    #F2F8F4;
      --c-text:       #2F453A;
      --c-muted:      #5A7666;
      --c-border:     #B8D8C4;

      /* Semantic */
      --c-safe:       #2e7d32;
      --c-safe-bg:    #e8f5e9;
      --c-warn:       #e65100;
      --c-warn-bg:    #fff8e1;
      --c-danger:     #c62828;
      --c-danger-bg:  #ffebee;
      --c-white:      #ffffff;

      /* Layout */
      --radius:       5px;
      --radius-lg:    8px;
      --nav-h:        54px;
      --left-w:       460px;

      /* Typography */
      --font-head:    'Montserrat', sans-serif;
      --font-body:    'DM Sans', sans-serif;

      /* Transitions */
      --ease:         cubic-bezier(0.4, 0, 0.2, 1);
      --t-fast:       0.18s;
      --t-med:        0.35s;
      --t-slow:       0.5s;

      /* Font scale */
      --fs-base:      1.0625rem; /* 17px — orta yaş+ okunabilirlik */
    }

    /* DARK MODE */
    [data-theme="dark"] {
      --c-bg:       #1a2420;
      --c-surface:  #243028;
      --c-light:    #1a2e22;
      --c-text:     #e8f2ed;
      --c-muted:    #9DC6AB;
      --c-border:   #3a5548;
    }

    /* TEMA VARYANTLARI */
    [data-color="g2"] { --c-primary:#4A7C60; --c-secondary:#5A9070; --c-accent:#8DC8A8; --c-light:#D5EDE0; --c-bg:#F8FDFA; }
    [data-color="g3"] { --c-primary:#6BA888; --c-secondary:#7AB898; --c-accent:#A8D8C0; --c-light:#E0F4EC; --c-bg:#F5FDF9; }
    [data-color="r1"] { --c-primary:#7B2D3E; --c-secondary:#9B4D5E; --c-accent:#D4A0AA; --c-light:#F5E0E3; --c-bg:#FDFBFB; }
    [data-color="r2"] { --c-primary:#A04060; --c-secondary:#B86080; --c-accent:#E0A8BC; --c-light:#FAE8EF; --c-bg:#FDFBFC; }
    [data-color="r3"] { --c-primary:#C46070; --c-secondary:#D48090; --c-accent:#EAB8C0; --c-light:#FAEAEC; --c-bg:#FDFBFC; }
    [data-color="b1"] { --c-primary:#1F3A5F; --c-secondary:#2E5285; --c-accent:#7EB3D4; --c-light:#D8EAF5; --c-bg:#F8FBFD; }
    [data-color="b2"] { --c-primary:#3D5A80; --c-secondary:#5A7AA0; --c-accent:#98B8D8; --c-light:#DCE8F2; --c-bg:#F8FBFD; }
    [data-color="b3"] { --c-primary:#4A80A8; --c-secondary:#6A98B8; --c-accent:#A8CCE4; --c-light:#DFF0F8; --c-bg:#F5FBFF; }
    [data-color="y1"] { --c-primary:#7A5020; --c-secondary:#9A7030; --c-accent:#D4A870; --c-light:#F5E8D0; --c-bg:#FDFAF5; }
    [data-color="y2"] { --c-primary:#9A7030; --c-secondary:#BA9050; --c-accent:#DEC080; --c-light:#FAF0D8; --c-bg:#FDFCF5; }
    [data-color="y3"] { --c-primary:#C49040; --c-secondary:#D4A850; --c-accent:#E8CC90; --c-light:#FFF8E0; --c-bg:#FFFDF5; }

    /* FONT SIZE SCALE — Sprint B */
    [data-fontsize="sm"] { --fs-base: 0.875rem;  } /* 14px */
    [data-fontsize="md"] { --fs-base: 1rem;       } /* 16px */
    [data-fontsize="lg"] { --fs-base: 1.1875rem;  } /* 19px */
    [data-fontsize="xl"] { --fs-base: 1.375rem;   } /* 22px */

    /* Mobilde varsayılan boyutu bir adım büyüt (telefon okunabilirliği) */
    @media (max-width: 768px) {
      [data-fontsize="md"] { --fs-base: 1.0625rem; } /* 17px */
      [data-fontsize="lg"] { --fs-base: 1.25rem;   } /* 20px */
    }

    /* Element overrides — hardcoded px → fontsize sistemine bağla
       [data-fontsize] selector: body üzerindeki attribute'ü hedefler,
       descendant elementlere uygulanır (specificity artırır, kazanır) */
    [data-fontsize] .hero-sub       { font-size: calc(var(--fs-base) * 0.82); }
    [data-fontsize] #inci-input     { font-size: calc(var(--fs-base) * 0.82); }
    [data-fontsize] .product-select { font-size: calc(var(--fs-base) * 0.82); }
    [data-fontsize] .analyze-btn    { font-size: calc(var(--fs-base) * 0.84); }
    [data-fontsize] .drawer-item    { font-size: calc(var(--fs-base) * 0.88); }
    [data-fontsize] .acc-title      { font-size: calc(var(--fs-base) * 0.82); }
    [data-fontsize] .acc-body       { font-size: calc(var(--fs-base) * 0.82); }
    [data-fontsize] .ing-tag        { font-size: calc(var(--fs-base) * 0.72); }
    [data-fontsize] .guest-note     { font-size: calc(var(--fs-base) * 0.76); }
    [data-fontsize] .breakdown-name { font-size: calc(var(--fs-base) * 0.72); }
    [data-fontsize] .result-action-btn { font-size: calc(var(--fs-base) * 0.78); }


    /* ============================================================
       GRADIENTS & ANIMATIONS — Sprint 3
    ============================================================ */

    /* Navbar gradient */
    #navbar {
      background: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 80%, var(--c-secondary)) 100%) !important;
    }

    /* Dark mode navbar */
    [data-theme="dark"] #navbar {
      background: linear-gradient(135deg, #0f1e1a 0%, var(--c-primary) 100%) !important;
    }

    /* Sol panel gradient */
    .left-panel {
      background: linear-gradient(180deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 95%, var(--c-accent)) 100%) !important;
    }

    /* Analyze butonu gradient + glow */
    .analyze-btn {
      background: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 70%, var(--c-secondary)) 100%) !important;
      box-shadow: 0 4px 16px color-mix(in srgb, var(--c-primary) 40%, transparent);
      transition: transform .25s, box-shadow .25s !important;
    }
    .analyze-btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px color-mix(in srgb, var(--c-primary) 50%, transparent) !important;
    }

    /* Skor dairesi gradient */
    .score-ring-progress {
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-accent) 60%, transparent));
    }

    /* Sonuç kartı gradient */
    .result-header, .score-section {
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-primary) 8%, var(--c-bg)) 0%,
        color-mix(in srgb, var(--c-accent) 6%, var(--c-bg)) 100%
      ) !important;
    }

    /* Dark mode özel gradientler */
    [data-theme="dark"] .left-panel {
      background: linear-gradient(180deg, #1a2420 0%, #1e2c28 100%) !important;
    }
    [data-theme="dark"] .result-header,
    [data-theme="dark"] .score-section {
      background: linear-gradient(135deg, #1a2e2a 0%, #243028 100%) !important;
    }

    /* Fade-in animasyonu */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.95); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Sonuç ekranı animasyonu */
    #result-section { animation: fadeInUp .5s ease both; }
    .score-wrap     { animation: scaleIn .6s .1s ease both; }
    .verdict-badge  { animation: fadeInUp .5s .2s ease both; }
    .result-summary { animation: fadeInUp .5s .3s ease both; }
    .result-accordion { animation: fadeInUp .5s .4s ease both; }

    /* Loading animasyonu — yaprak */
    .loading-leaf {
      filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-accent) 50%, transparent));
    }

    /* Feature kartları hover */
    .punya-card, .accordion-item {
      transition: transform .25s, box-shadow .25s !important;
    }
    .punya-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--c-primary) 15%, transparent) !important;
    }

    /* Drawer gradient */
    .drawer {
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--c-primary) 98%, var(--c-accent)) 0%,
        var(--c-primary) 100%
      ) !important;
    }
    [data-theme="dark"] .drawer {
      background: linear-gradient(180deg, #0f1e1a 0%, #1a2e2a 100%) !important;
    }

    /* Puan badge gradient */
    .points-badge {
      background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 70%, var(--c-primary)));
    }

    /* Disclaimer banner */
    .ai-disclaimer {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
      border-left: 3px solid #f59e0b !important;
    }
    [data-theme="dark"] .ai-disclaimer {
      background: linear-gradient(135deg, #2a2010 0%, #332810 100%) !important;
      border-left-color: #d97706 !important;
      color: #fcd34d !important;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      overflow-x: hidden;
      max-width: 100vw;
    }

    body {
      font-family: var(--font-body);
      font-size: var(--fs-base);
      background: var(--c-bg);
      color: var(--c-text);
      line-height: 1.6;
      min-height: 100vh;
      transition:
        background-color var(--t-med) var(--ease),
        color var(--t-med) var(--ease);
      overflow-x: hidden;
      max-width: 100vw;
    }

    /* ============================================================
       NAVBAR
    ============================================================ */
    #navbar {
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--nav-h);
      background: var(--c-primary);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 8px;
      transition: background-color var(--t-med) var(--ease);
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    }

    /* Logo */
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
    }

    .nav-logo-img {
      height: 32px;
      width: auto;
      transition: opacity var(--t-fast) var(--ease);
    }

    .nav-logo-text {
      display: flex;
      flex-direction: column;
    }

    .nav-logo-name {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.04em;
      line-height: 1;
    }

    .nav-logo-sub {
      font-size: 10px;
      color: var(--c-accent);
      letter-spacing: 0.08em;
      font-weight: 500;
    }

    .nav-sep {
      width: 1px;
      height: 28px;
      background: rgba(255,255,255,0.2);
      margin: 0 4px;
    }

    /* Desktop nav links */
    .nav-links {
      display: none;
      align-items: center;
      gap: 4px;
      margin-left: 8px;
    }

    .nav-link {
      color: rgba(255,255,255,0.75);
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-head);
      letter-spacing: 0.04em;
      padding: 6px 10px;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition:
        color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
    }

    .nav-link:hover,
    .nav-link.active {
      color: #fff;
      background: rgba(255,255,255,0.1);
    }

    .nav-spacer { flex: 1; }

    /* Right side */
    .nav-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-lang {
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-head);
      padding: 5px 10px;
      border-radius: var(--radius);
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.2);
      transition: background var(--t-fast) var(--ease);
      position: relative;
    }

    .nav-lang:hover { background: rgba(255,255,255,0.2); }

    .nav-login {
      background: #fff;
      color: var(--c-primary);
      font-size: 11px;
      font-weight: 800;
      font-family: var(--font-head);
      padding: 6px 14px;
      border-radius: var(--radius);
      cursor: pointer;
      letter-spacing: 0.04em;
      border: none;
      white-space: nowrap;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    }

    .nav-login:hover { transform: translateY(-1px); }

    /* Mobil nav düzeltme */
    @media (max-width: 480px) {
      .nav-login { font-size: 10px; padding: 5px 10px; }
      .nav-lang { font-size: 10px; padding: 4px 8px; }
      .nav-right { gap: 4px; }
      #theme-toggle-btn { display: flex; }
    }

    /* Hamburger */
    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 6px;
      border-radius: var(--radius);
      transition: background var(--t-fast) var(--ease);
      margin-left: 4px;
    }

    .hamburger:hover { background: rgba(255,255,255,0.1); }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2.5px;
      background: rgba(255,255,255,0.9);
      border-radius: 2px;
      transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
    }

    .hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    /* Guest info */
    .nav-guest-badge {
      display: none;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: rgba(255,255,255,0.7);
      padding: 4px 8px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius);
      white-space: nowrap;
    }

    .nav-guest-badge span { color: var(--c-accent); font-weight: 700; }

    /* ============================================================
       MOBILE DRAWER MENU
    ============================================================ */
    #drawer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 200;
      opacity: 0;
      transition: opacity var(--t-med) var(--ease);
    }

    #drawer-overlay.open {
      display: block;
      opacity: 1;
    }

    #drawer {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 280px;
      background: var(--c-bg);
      z-index: 201;
      transform: translateX(100%);
      transition: transform var(--t-med) var(--ease);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    }

    #drawer.open { transform: translateX(0); }

    .drawer-header {
      background: var(--c-primary);
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .drawer-logo {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.04em;
    }

    .drawer-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: var(--radius);
      background: rgba(255,255,255,0.1);
      color: #fff;
      font-size: 18px;
      transition: background var(--t-fast) var(--ease);
    }

    .drawer-close:hover { background: rgba(255,255,255,0.2); }

    .drawer-body { flex: 1; padding: 12px 0; }

    .drawer-section-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 12px 18px 4px;
    }

    .drawer-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      cursor: pointer;
      color: var(--c-text);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: background var(--t-fast) var(--ease);
      position: relative;
    }

    .drawer-item:hover { background: var(--c-light); }

    .drawer-item .di-icon {
      width: 20px;
      text-align: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .drawer-item .di-badge {
      margin-left: auto;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 99px;
      background: var(--c-accent);
      color: var(--c-primary);
    }

    .drawer-item .di-soon {
      margin-left: auto;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 99px;
      background: var(--c-surface);
      color: var(--c-muted);
      border: 1px solid var(--c-border);
    }

    .drawer-divider {
      height: 1px;
      background: var(--c-border);
      margin: 8px 18px;
      opacity: 0.5;
    }

    .drawer-pro-cta {
      margin: 12px 14px;
      padding: 12px 14px;
      background: var(--c-primary);
      border-radius: var(--radius-lg);
      color: #fff;
      cursor: pointer;
      transition: opacity var(--t-fast) var(--ease);
    }

    .drawer-pro-cta:hover { opacity: 0.9; }

    .drawer-pro-cta .dpc-label {
      font-size: 10px;
      color: var(--c-accent);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 3px;
    }

    .drawer-pro-cta .dpc-title {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .drawer-pro-cta .dpc-sub {
      font-size: 11px;
      color: rgba(255,255,255,0.7);
    }

    /* ============================================================
       LANGUAGE DROPDOWN
    ============================================================ */
    .lang-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--c-bg);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      min-width: 140px;
      display: none;
      z-index: 300;
    }

    .lang-dropdown.open { display: block; }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--c-text);
      transition: background var(--t-fast) var(--ease);
    }

    .lang-option:hover { background: var(--c-light); }
    .lang-option.active { color: var(--c-primary); font-weight: 700; }
    .lang-flag { font-size: 16px; }

    /* ============================================================
       MAIN LAYOUT
    ============================================================ */
    #app {
      min-height: calc(100vh - var(--nav-h));
      display: flex;
      flex-direction: column;
    }

    /* Desktop: two column */
    @media (min-width: 1280px) {
      #app { flex-direction: row; align-items: flex-start; }
      .nav-links { display: flex; }
      .hamburger { display: none; }
      .nav-guest-badge { display: flex; }
    }

    /* ============================================================
       LEFT PANEL — INPUT
    ============================================================ */
    #left-panel {
      width: 100%;
      padding: 24px 20px;
      background: var(--c-bg);
      transition: background-color var(--t-med) var(--ease);
    }

    @media (min-width: 1280px) {
      #left-panel {
        width: var(--left-w);
        flex-shrink: 0;
        min-height: calc(100vh - var(--nav-h));
        position: sticky;
        top: var(--nav-h);
        border-right: 1px solid var(--c-border);
        overflow-y: auto;
        max-height: calc(100vh - var(--nav-h));
      }
    }

    /* Hero text */
    .hero-title {
      font-family: var(--font-head);
      font-size: clamp(22px, 5vw, 28px);
      font-weight: 900;
      color: var(--c-text);
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 6px;
      transition: color var(--t-med) var(--ease);
    }

    .hero-sub {
      font-size: 13px;
      color: var(--c-muted);
      margin-bottom: 20px;
      line-height: 1.6;
      transition: color var(--t-med) var(--ease);
    }

    /* Language pills — mobile only */
    .lang-pills {
      display: flex;
      gap: 5px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    @media (min-width: 1280px) { .lang-pills { display: none; } }

    .lang-pill {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      padding: 4px 10px;
      border: 1.5px solid var(--c-primary);
      color: var(--c-primary);
      cursor: pointer;
      border-radius: var(--radius);
      background: transparent;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
    }

    .lang-pill.active {
      background: var(--c-primary);
      color: #fff;
    }

    /* Form label */
    .form-label {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 6px;
      display: block;
      transition: color var(--t-med) var(--ease);
    }

    /* Product type select */
    .product-select {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid var(--c-accent);
      border-radius: var(--radius);
      background: var(--c-surface);
      font-size: 13px;
      font-family: var(--font-body);
      color: var(--c-text);
      cursor: pointer;
      margin-bottom: 14px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A7666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      transition:
        border-color var(--t-fast) var(--ease),
        background-color var(--t-med) var(--ease);
      outline: none;
    }

    .product-select:focus { border-color: var(--c-primary); }

    /* INCI textarea */
    .inci-wrap {
      border: 1.5px solid var(--c-accent);
      border-radius: var(--radius);
      background: var(--c-surface);
      padding: 12px;
      margin-bottom: 12px;
      position: relative;
      transition:
        border-color var(--t-fast) var(--ease),
        background-color var(--t-med) var(--ease);
    }

    .inci-wrap:focus-within { border-color: var(--c-primary); }

    #inci-input {
      width: 100%;
      min-height: 100px;
      border: none;
      background: transparent;
      font-size: 13px;
      font-family: var(--font-body);
      color: var(--c-text);
      resize: none;
      outline: none;
      line-height: 1.7;
      transition: color var(--t-med) var(--ease);
    }

    #inci-input::placeholder { color: var(--c-muted); opacity: 0.7; }

    .paste-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: var(--c-primary);
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      font-family: var(--font-head);
      padding: 4px 10px;
      border-radius: var(--radius);
      cursor: pointer;
      letter-spacing: 0.06em;
      border: none;
      transition:
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    }

    .paste-btn:hover { transform: translateY(-1px); }

    /* Action buttons row */
    .action-row {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .action-btn {
      flex: 1;
      min-width: 0;
      padding: 10px 8px;
      border: 1.5px solid var(--c-secondary);
      border-radius: var(--radius);
      background: transparent;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    }

    .action-btn:hover {
      background: var(--c-light);
      border-color: var(--c-primary);
      color: var(--c-primary);
      transform: translateY(-1px);
    }

    /* Desktop: no "Foto Çek" button */
    .mobile-only { display: flex; }
    @media (min-width: 1280px) { .mobile-only { display: none !important; } }

    /* Analyze button */
    .analyze-btn {
      width: 100%;
      padding: 14px;
      background: var(--c-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 13px;
      font-weight: 800;
      font-family: var(--font-head);
      letter-spacing: 0.08em;
      cursor: pointer;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition:
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
      position: relative;
      overflow: hidden;
    }

    .analyze-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: background var(--t-fast) var(--ease);
    }

    .analyze-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(47, 69, 58, 0.3);
    }

    .analyze-btn:hover::after { background: rgba(255,255,255,0.06); }
    .analyze-btn:active { transform: translateY(0); }

    .analyze-btn.loading {
      pointer-events: none;
      opacity: 0.8;
    }

    /* Guest note */
    .guest-note {
      font-size: 11px;
      color: var(--c-muted);
      text-align: center;
      margin-bottom: 8px;
      transition: color var(--t-med) var(--ease);
    }

    .guest-note a {
      color: var(--c-primary);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
    }

    /* AI powered badge */
    .ai-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 10px;
      color: var(--c-muted);
      margin-top: 4px;
    }

    .ai-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--c-accent);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* ============================================================
       RIGHT PANEL — RESULTS
    ============================================================ */
    #right-panel {
      flex: 1;
      min-height: 300px;
      background: var(--c-surface);
      transition: background-color var(--t-med) var(--ease);
    }

    @media (min-width: 1280px) {
      #right-panel { min-height: calc(100vh - var(--nav-h)); }
    }

    /* Empty state */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      text-align: center;
      min-height: 300px;
      opacity: 0.6;
    }

    .empty-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--c-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-bottom: 16px;
    }

    .empty-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: 6px;
    }

    .empty-sub {
      font-size: 13px;
      color: var(--c-muted);
      max-width: 280px;
    }

    /* Loading state */
    .loading-state {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      text-align: center;
      min-height: 300px;
    }

    .loading-state.visible { display: flex; }

    .loading-leaf {
      width: 56px;
      height: 56px;
      margin-bottom: 20px;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .loading-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: 6px;
    }

    .loading-step {
      font-size: 12px;
      color: var(--c-muted);
      margin-bottom: 20px;
      min-height: 18px;
      transition: opacity var(--t-fast) var(--ease);
    }

    .loading-bar-wrap {
      width: 200px;
      height: 3px;
      background: var(--c-border);
      border-radius: 99px;
      overflow: hidden;
    }

    .loading-bar {
      height: 100%;
      background: var(--c-primary);
      border-radius: 99px;
      width: 0%;
      transition: width 0.4s var(--ease);
    }

    /* ============================================================
       BARCODE SCANNER OVERLAY
    ============================================================ */
    #barcode-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.92);
      z-index: 500;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #barcode-overlay.open { display: flex; }

    .barcode-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      color: #fff;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      transition: background var(--t-fast) var(--ease);
    }

    .barcode-close:hover { background: rgba(255,255,255,0.2); }

    .barcode-title {
      font-family: var(--font-head);
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
    }

    .barcode-sub {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      margin-bottom: 24px;
      text-align: center;
    }

    #barcode-video-wrap {
      position: relative;
      width: min(360px, 90vw);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: #000;
    }

    #barcode-video {
      width: 100%;
      display: block;
    }

    .barcode-frame {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .barcode-frame-inner {
      width: 80%;
      height: 40%;
      border: 2px solid var(--c-accent);
      border-radius: 4px;
      position: relative;
    }

    .barcode-scan-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--c-accent);
      animation: scan 2s ease-in-out infinite;
      opacity: 0.8;
    }

    @keyframes scan {
      0%, 100% { top: 0; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      50% { top: calc(100% - 2px); }
    }

    .barcode-status {
      margin-top: 20px;
      font-size: 13px;
      color: rgba(255,255,255,0.7);
      text-align: center;
    }

    /* Manual barcode input */
    .barcode-manual {
      margin-top: 16px;
      display: flex;
      gap: 8px;
      width: min(360px, 90vw);
    }

    .barcode-manual-input {
      flex: 1;
      padding: 10px 14px;
      border: 1.5px solid rgba(255,255,255,0.2);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.08);
      color: #fff;
      font-size: 13px;
      outline: none;
      transition: border-color var(--t-fast) var(--ease);
    }

    .barcode-manual-input::placeholder { color: rgba(255,255,255,0.4); }
    .barcode-manual-input:focus { border-color: var(--c-accent); }

    .barcode-manual-btn {
      padding: 10px 16px;
      background: var(--c-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-head);
      cursor: pointer;
      transition: opacity var(--t-fast) var(--ease);
    }

    .barcode-manual-btn:hover { opacity: 0.85; }

    /* Product found toast */
    .barcode-found {
      display: none;
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--c-primary);
      color: #fff;
      padding: 14px 24px;
      border-radius: var(--radius-lg);
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      z-index: 600;
      transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
      opacity: 0;
      white-space: nowrap;
      max-width: 90vw;
      text-align: center;
    }

    .barcode-found.show {
      display: block;
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ============================================================
       TOAST NOTIFICATION
    ============================================================ */
    #toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--c-text);
      color: var(--c-bg);
      padding: 12px 20px;
      border-radius: var(--radius-lg);
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      z-index: 1000;
      opacity: 0;
      transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
      pointer-events: none;
      white-space: nowrap;
    }

    #toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: var(--c-primary);
      padding: 16px 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      transition: background-color var(--t-med) var(--ease);
    }

    .footer-copy {
      font-size: 10px;
      color: rgba(255,255,255,0.45);
    }

    .footer-links {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .footer-link {
      font-size: 10px;
      color: rgba(255,255,255,0.45);
      cursor: pointer;
      text-decoration: none;
      transition: color var(--t-fast) var(--ease);
    }

    .footer-link:hover { color: rgba(255,255,255,0.8); }

    /* ============================================================
       RESULT SCREEN — Sprint C (görsel iyileştirme)
    ============================================================ */
    .result-score-wrap {
      display: none; /* score-dashboard ile değiştirildi */
    }

    /* ── SCORE DASHBOARD ─────────────────────────────────────── */
    .score-dashboard {
      display: grid;
      grid-template-columns: 144px 1px 1fr;
      gap: 0 20px;
      align-items: center;
      padding: 22px 24px;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: 16px;
      margin-bottom: 16px;
    }
    .score-dash-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .score-dash-sep {
      width: 1px;
      align-self: stretch;
      background: var(--c-border);
    }
    .score-dash-right {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .sub-rings-row {
      display: flex;
      gap: 14px;
      align-items: flex-end;
      flex-wrap: wrap;
    }
    .sub-ring-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .sub-ring-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--c-muted);
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .score-dash-summary {
      font-size: 13px;
      color: var(--c-muted);
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .score-dash-summary strong { color: var(--c-text); }
    .score-dash-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .score-dash-btn {
      height: 30px;
      padding: 0 14px;
      border-radius: 99px;
      border: 1.5px solid var(--c-border);
      background: transparent;
      color: var(--c-text);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-body);
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all .15s;
    }
    .score-dash-btn:hover { background: var(--c-surface-2); border-color: var(--c-accent); }
    .score-dash-btn.primary {
      background: var(--c-primary);
      color: #fff;
      border-color: var(--c-primary);
    }

    @media (max-width: 900px) {
      .score-dashboard {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 14px 0;
        padding: 18px 16px;
      }
      .score-dash-sep { display: none; }
      .sub-rings-row { justify-content: center; }
      .score-dash-actions { justify-content: center; }
    }

    /* Score Circle — mevcut kullanımlar için koru */
    .score-circle {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 5px solid var(--c-primary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--c-bg);
      position: relative;
      box-shadow: 0 0 0 8px var(--c-surface), 0 6px 24px rgba(0,0,0,0.12);
      transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
    }
    .score-circle.good { border-color: #22c55e; box-shadow: 0 0 0 8px var(--c-surface), 0 6px 24px rgba(34,197,94,.25); }
    .score-circle.warn { border-color: #f59e0b; box-shadow: 0 0 0 8px var(--c-surface), 0 6px 24px rgba(245,158,11,.25); }
    .score-circle.bad  { border-color: #ef4444; box-shadow: 0 0 0 8px var(--c-surface), 0 6px 24px rgba(239,68,68,.25); }
    .score-num {
      font-family: var(--font-head);
      font-size: 38px;
      font-weight: 900;
      color: var(--c-primary);
      line-height: 1;
      transition: color var(--t-med) var(--ease);
    }
    .score-circle.good .score-num { color: #16a34a; }
    .score-circle.warn .score-num { color: #d97706; }
    .score-circle.bad  .score-num { color: #dc2626; }
    [data-theme="dark"] .score-circle.good .score-num { color: #4ade80; }
    [data-theme="dark"] .score-circle.warn .score-num { color: #fbbf24; }
    [data-theme="dark"] .score-circle.bad  .score-num { color: #f87171; }
    .score-label { font-size: 10px; color: var(--c-muted); font-weight: 600; letter-spacing: .04em; margin-top: 1px; }
    .score-badge {
      font-size: 11px; font-weight: 800; font-family: var(--font-head);
      padding: 6px 20px; border-radius: 99px; letter-spacing: .08em;
      text-transform: uppercase; border: 2px solid transparent;
      background: var(--c-accent); color: var(--c-primary);
    }
    .score-badge.good  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
    .score-badge.warn  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
    .score-badge.bad   { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
    [data-theme="dark"] .score-badge.good { background: rgba(34,197,94,0.15); color: #4ade80; border-color: rgba(34,197,94,0.35); }
    [data-theme="dark"] .score-badge.warn { background: rgba(245,158,11,0.15); color: #fbbf24; border-color: rgba(245,158,11,0.35); }
    [data-theme="dark"] .score-badge.bad  { background: rgba(239,68,68,0.15);  color: #f87171; border-color: rgba(239,68,68,0.35); }

    /* ── Analiz Sonuç Kutusu — Sprint 9 ── */
    .result-summary {
      background: var(--c-surface);
      border-top: 3px solid var(--c-primary);
      padding: 24px 28px;
      margin: 0;
      font-size: calc(var(--fs-base) * 0.9375);
      color: var(--c-text);
      line-height: 1.8;
      width: 100%;
      box-sizing: border-box;
      transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
    }
    [data-fontsize="lg"] .result-summary { font-size: 1rem; line-height: 1.85; }

    /* AI HTML Typography — okunabilirlik öncelikli */
    .result-summary h1, .result-summary h2 {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 1.1);
      font-weight: 800;
      color: var(--c-primary);
      margin: 20px 0 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid var(--c-border);
      line-height: 1.3;
    }
    .result-summary h2:first-child { margin-top: 0; }
    .result-summary h3 {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 0.975);
      font-weight: 700;
      color: var(--c-secondary);
      margin: 16px 0 8px;
    }
    .result-summary h4 {
      font-size: calc(var(--fs-base) * 0.9375);
      font-weight: 700;
      color: var(--c-text);
      margin: 12px 0 6px;
    }
    .result-summary p { margin: 0 0 12px; }
    .result-summary p:last-child { margin-bottom: 0; }
    .result-summary strong { color: var(--c-primary); font-weight: 700; }
    .result-summary em { color: var(--c-secondary); font-style: italic; }
    .result-summary ul, .result-summary ol { padding-left: 20px; margin: 8px 0 12px; }
    .result-summary li { margin-bottom: 6px; line-height: 1.7; }
    .result-summary table {
      width: 100%; border-collapse: collapse;
      margin: 12px 0; font-size: calc(var(--fs-base) * 0.875);
      border-radius: 6px; overflow: hidden;
    }
    .result-summary table th {
      background: var(--c-primary); color: #fff;
      padding: 8px 12px; text-align: left; font-weight: 700;
    }
    .result-summary table td {
      padding: 7px 12px;
      border-bottom: 1px solid var(--c-border);
      color: var(--c-text);
    }
    .result-summary table tr:nth-child(even) td { background: var(--c-light); }
    .result-summary hr {
      border: none; border-top: 1px solid var(--c-border); margin: 14px 0;
    }
    /* Inline badge override — AI çıktısından gelen renkli span'lar */
    .result-summary span[style*="background"],
    .result-summary span[style*="background-color"] {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: calc(var(--fs-base) * 0.8125);
      line-height: 1.6;
    }
    /* Colored divs from AI — dark/light safe */
    .result-summary div[style*="background:#f0fdf4"],
    .result-summary div[style*="background: #f0fdf4"] {
      background: color-mix(in srgb, #22c55e 10%, var(--c-surface)) !important;
      color: var(--c-text) !important;
      border: 1px solid color-mix(in srgb, #22c55e 30%, var(--c-border)) !important;
    }
    .result-summary div[style*="background:#fef2f2"],
    .result-summary div[style*="background: #fef2f2"] {
      background: color-mix(in srgb, #ef4444 10%, var(--c-surface)) !important;
      color: var(--c-text) !important;
      border: 1px solid color-mix(in srgb, #ef4444 30%, var(--c-border)) !important;
    }
    .result-summary div[style*="background:#fffbeb"],
    .result-summary div[style*="background: #fffbeb"] {
      background: color-mix(in srgb, #f59e0b 10%, var(--c-surface)) !important;
      color: var(--c-text) !important;
      border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--c-border)) !important;
    }
    .result-summary div[style*="background:#f8fafc"],
    .result-summary div[style*="background: #f8fafc"],
    .result-summary div[style*="background:#f9fafb"],
    .result-summary div[style*="background: #f9fafb"] {
      background: var(--c-light) !important;
      color: var(--c-text) !important;
      border: 1px solid var(--c-border) !important;
    }
    /* Force text color in AI output divs */
    .result-summary div[style*="color:#"] { color: var(--c-text) !important; }
    .result-summary div[style*="color: #"] { color: var(--c-text) !important; }
    /* Koruma: hardcoded dark renk yazılar light modda sorun çıkarmaz,
       dark modda ise bunları override et */
    [data-theme="dark"] .result-summary *[style*="color:#1"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#2"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#3"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#4"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#5"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#6"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#7"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#8"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#9"] { color: var(--c-text) !important; }
    /* Dark mode: AI hardcoded arka planları override */
    [data-theme="dark"] .result-summary *[style*="background:#f"],
    [data-theme="dark"] .result-summary *[style*="background: #f"],
    [data-theme="dark"] .result-summary *[style*="background-color:#f"],
    [data-theme="dark"] .result-summary *[style*="background:#e"],
    [data-theme="dark"] .result-summary *[style*="background:#d"] {
      background: var(--c-surface) !important;
    }
    /* Inline badges from AI output */
    .result-summary span[style*="#22c55e"],
    .result-summary span[style*="#ef4444"],
    .result-summary span[style*="#f59e0b"] {
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: calc(var(--fs-base) * 0.8125);
    }

    /* ── AI Çıktı CSS Sistemi — Sprint 9 ──────────────────────────────
       Tüm dillerde aynı görünüm. inline CSS yok, sadece bu class'lar.
    ────────────────────────────────────────────────────────────────── */
    .ai-section {
      margin: 0 0 20px;
      padding: 0;
    }
    .ai-title {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 1.05);
      font-weight: 800;
      color: var(--c-primary);
      margin: 0 0 10px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--c-border);
      line-height: 1.3;
    }
    .ai-subtitle {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 0.95);
      font-weight: 700;
      color: var(--c-secondary);
      margin: 14px 0 6px;
    }
    .ai-text {
      font-size: calc(var(--fs-base) * 0.9375);
      color: var(--c-text);
      line-height: 1.8;
      margin: 0 0 10px;
    }
    .ai-text:last-child { margin-bottom: 0; }

    /* Badges */
    .ai-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 5px;
      font-size: calc(var(--fs-base) * 0.75);
      font-weight: 700;
      font-family: var(--font-head);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      vertical-align: middle;
      margin-right: 6px;
    }
    .ai-badge.safe    { background: #dcfce7; color: #15803d; }
    .ai-badge.caution { background: #fef3c7; color: #92400e; }
    .ai-badge.danger  { background: #fee2e2; color: #b91c1c; }
    .ai-badge.neutral { background: var(--c-light); color: var(--c-muted); border: 1px solid var(--c-border); }
    [data-theme="dark"] .ai-badge.safe    { background: #14532d; color: #86efac; }
    [data-theme="dark"] .ai-badge.caution { background: #451a03; color: #fcd34d; }
    [data-theme="dark"] .ai-badge.danger  { background: #450a0a; color: #fca5a5; }
    [data-theme="dark"] .ai-badge.neutral { background: var(--c-surface); color: var(--c-muted); }

    /* Ingredient highlight */
    .ai-ingredient {
      font-weight: 600;
      color: var(--c-secondary);
      text-decoration: underline;
      text-decoration-style: dotted;
      text-decoration-color: var(--c-accent);
      text-underline-offset: 3px;
      cursor: default;
    }
    [data-theme="dark"] .ai-ingredient {
      color: var(--c-accent);
      text-decoration-color: var(--c-secondary);
    }

    .result-action-btn.fit-btn {
      background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 20%, transparent), color-mix(in srgb, var(--c-accent) 10%, transparent));
      border-color: var(--c-accent);
      color: var(--c-accent);
      font-weight: 700;
    }
    .result-action-btn.fit-btn:hover {
      background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
      color: #fff;
    }

    /* ================================================================
       GLOBAL: Taşma Önleme (DE/FR uzun metinler)
    ================================================================ */
    .hero-title, .hero-sub, .form-label, .guest-note,
    .ai-text, .ai-title, .ai-subtitle, .result-action-btn, h1, h2, h3, p {
      overflow-wrap: break-word;
      word-break: break-word;
    }
    [data-lang="de"] .nav-link,
    [data-lang="fr"] .nav-link {
      font-size: 11px;
      padding: 6px 8px;
      letter-spacing: 0.02em;
    }
    @media (max-width: 480px) {
      [data-lang="de"] .hero-title,
      [data-lang="fr"] .hero-title { font-size: clamp(18px, 4.5vw, 24px); }
      [data-lang="de"] .hero-sub,
      [data-lang="fr"] .hero-sub   { font-size: clamp(12px, 3vw, 14px); }
    }
    .model-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
    @media (max-width: 640px) {
      .result-actions { flex-wrap:wrap; gap:6px; }
      .result-action-btn { flex:1 1 auto; min-width:110px; font-size:11px; padding:8px 10px; text-align:center; }
    }

    /* ================================================================
       DARK MODE — Eksik Alanlar
    ================================================================ */
    [data-theme="dark"] input,
    [data-theme="dark"] select,
    [data-theme="dark"] textarea { color-scheme: dark; }
    [data-theme="dark"] .drawer-item { color: var(--c-text); }
    [data-theme="dark"] .drawer-item:hover { background: var(--c-light); }
    [data-theme="dark"] .result-summary h1,
    [data-theme="dark"] .result-summary h2,
    [data-theme="dark"] .result-summary h3,
    [data-theme="dark"] .result-summary h4,
    [data-theme="dark"] .result-summary strong { color: var(--c-text) !important; }
    [data-theme="dark"] .acc-item { border-color: var(--c-border); }
    [data-theme="dark"] .acc-head { color: var(--c-text); }

    .rm-wrap {
      overflow: hidden;
      transition: max-height 0.4s var(--ease);
    }
    .rm-wrap.collapsed {
      max-height: 12em;  /* ~6 satır — yeterli içerik görünür */
      position: relative;
    }
    .rm-wrap.collapsed::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3em;
      background: linear-gradient(transparent, var(--c-surface));
      pointer-events: none;
    }
    /* Dark mode: section arka planları ve metin renkleri */
    [data-theme="dark"] .ai-title {
      color: var(--c-text);  /* Dark modda her zaman okunabilir açık renk */
      border-bottom-color: var(--c-border);
    }
    [data-theme="dark"] .ai-subtitle {
      color: var(--c-text);
      opacity: 0.85;
    }
    [data-theme="dark"] .rm-wrap.collapsed::after {
      background: linear-gradient(transparent, var(--c-bg));
    }
    [data-theme="dark"] .result-summary {
      color: var(--c-text) !important;
    }
    /* Dark modda hard-coded beyaz/açık arka planları override et */
    [data-theme="dark"] .result-summary *[style*="background:white"],
    [data-theme="dark"] .result-summary *[style*="background: white"],
    [data-theme="dark"] .result-summary *[style*="background:#fff"],
    [data-theme="dark"] .result-summary *[style*="background: #fff"] {
      background: var(--c-surface) !important;
      color: var(--c-text) !important;
    }
    /* Dark modda tüm text renkleri */
    [data-theme="dark"] .result-summary p,
    [data-theme="dark"] .result-summary li,
    [data-theme="dark"] .result-summary span:not(.ai-ingredient) {
      color: var(--c-text) !important;
    }
    .rm-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: calc(var(--fs-base) * 0.75);
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-secondary);
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px 0 2px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      transition: color var(--t-fast) var(--ease);
    }
    .rm-btn:hover { color: var(--c-primary); }
    .rm-btn .rm-arr { display: inline-block; transition: transform 0.3s var(--ease); }
    .rm-btn.open .rm-arr { transform: rotate(180deg); }

    /* Flag items */
    .ai-flag {
      padding: 12px 16px;
      margin: 8px 0;
      border-radius: 8px;
      border-left: 3px solid var(--c-border);
      background: var(--c-light);
    }
    .ai-flag.danger  { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 8%, var(--c-surface)); }
    .ai-flag.caution { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, var(--c-surface)); }
    .ai-flag.safe    { border-left-color: #22c55e; background: color-mix(in srgb, #22c55e 8%, var(--c-surface)); }
    .ai-flag.neutral { border-left-color: var(--c-muted); background: var(--c-light); }
    .ai-flag-title {
      font-weight: 700;
      font-size: calc(var(--fs-base) * 0.9);
      color: var(--c-text);
      margin: 0 0 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-flag-body {
      font-size: calc(var(--fs-base) * 0.875);
      color: var(--c-text);
      line-height: 1.7;
      margin: 0;
      opacity: 0.9;
    }

    /* Info box */
    .ai-infobox {
      padding: 14px 18px;
      margin: 10px 0;
      border-radius: 8px;
      background: var(--c-light);
      border: 1px solid var(--c-border);
      font-size: calc(var(--fs-base) * 0.9);
      color: var(--c-text);
      line-height: 1.75;
    }

    /* Verdict */
    .ai-verdict {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 8px;
      background: var(--c-light);
      border: 1px solid var(--c-border);
      font-weight: 700;
      font-size: calc(var(--fs-base) * 0.95);
      color: var(--c-text);
    }

    /* Score breakdown bar — Sprint C */
    .score-breakdown {
      padding: 0 20px 20px;
    }

    .breakdown-label {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 14px;
    }

    .breakdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .breakdown-name {
      font-size: 12px;
      font-weight: 500;
      color: var(--c-text);
      width: 115px;
      flex-shrink: 0;
      transition: color var(--t-med) var(--ease);
    }

    .breakdown-bar-wrap {
      flex: 1;
      height: 8px;
      background: var(--c-surface);
      border-radius: 99px;
      overflow: hidden;
      border: 1px solid var(--c-border);
    }

    .breakdown-bar {
      height: 100%;
      border-radius: 99px;
      width: 0%;
      transition: width 1s var(--ease);
    }

    .breakdown-val {
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-muted);
      width: 40px;
      text-align: right;
      transition: color var(--t-med) var(--ease);
    }

    /* Accordions — Sprint C */
    .accordion-wrap {
      padding: 0 20px;
      margin-bottom: 16px;
    }

    .acc-item {
      border-radius: var(--radius);
      margin-bottom: 4px;
      border: 1px solid transparent;
      transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
    }

    .acc-item + .acc-item {
      border-top: 0.5px solid var(--c-border);
    }

    .acc-item.open {
      background: var(--c-surface);
      border-color: var(--c-border);
      padding: 0 12px;
      margin: 6px 0;
    }
    .acc-item.open + .acc-item { border-top: none; }

    .acc-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 0;
      cursor: pointer;
      user-select: none;
      gap: 8px;
    }

    .acc-title {
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 700;
      color: var(--c-text);
      transition: color var(--t-med) var(--ease);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .acc-count {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 99px;
      background: var(--c-surface);
      color: var(--c-muted);
      border: 1px solid var(--c-border);
    }
    .acc-item.open .acc-count {
      background: var(--c-primary);
      color: #fff;
      border-color: transparent;
    }

    .acc-arrow {
      font-size: 12px;
      color: var(--c-muted);
      transition: transform 0.3s var(--ease);
      flex-shrink: 0;
    }

    .acc-body {
      font-size: 13px;
      color: var(--c-muted);
      padding: 0 0 14px;
      line-height: 1.75;
      display: none;
      transition: color var(--t-med) var(--ease);
    }

    .acc-item.open .acc-arrow { transform: rotate(180deg); }
    .acc-item.open .acc-body  { display: block; }

    /* Ingredient tags — Sprint C (pill + border + dark mode) */
    .ing-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .ing-tag {
      font-size: 11px;
      padding: 5px 12px;
      border-radius: 99px;
      font-weight: 600;
      cursor: default;
      border: 1.5px solid transparent;
      transition:
        opacity var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
      display: inline-flex;
      align-items: center;
    }

    .ing-tag:hover { opacity: 0.8; transform: translateY(-1px); }

    .ing-tag.safe {
      background: #f0fdf4;
      color: #15803d;
      border-color: #bbf7d0;
    }
    .ing-tag.warn {
      background: #fffbeb;
      color: #92400e;
      border-color: #fde68a;
    }
    .ing-tag.bad {
      background: #fff1f2;
      color: #be123c;
      border-color: #fecdd3;
    }
    .ing-tag.active {
      background: var(--c-surface);
      color: var(--c-secondary);
      border-color: var(--c-border);
    }

    [data-theme="dark"] .ing-tag.safe   { background: rgba(34,197,94,0.12);  color: #86efac; border-color: rgba(34,197,94,0.3); }
    [data-theme="dark"] .ing-tag.warn   { background: rgba(245,158,11,0.12); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
    [data-theme="dark"] .ing-tag.bad    { background: rgba(239,68,68,0.12);  color: #fca5a5; border-color: rgba(239,68,68,0.3); }
    [data-theme="dark"] .ing-tag.active { background: var(--c-surface);      color: var(--c-muted); border-color: var(--c-border); }

    /* Action row — Sprint C */
    .result-actions {
      display: flex;
      gap: 8px;
      padding: 4px 20px 20px;
      flex-wrap: wrap;
    }

    .result-action-btn {
      flex: 1;
      min-width: 110px;
      padding: 11px 14px;
      border: 1.5px solid var(--c-border);
      border-radius: var(--radius-lg);
      background: transparent;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-secondary);
      cursor: pointer;
      text-align: center;
      transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    }

    .result-action-btn:hover {
      background: var(--c-light);
      border-color: var(--c-primary);
      color: var(--c-primary);
      transform: translateY(-1px);
    }
    .result-action-btn:active { transform: translateY(0); }

    .result-action-btn.pro {
      border-color: var(--c-accent);
      color: var(--c-muted);
      font-size: 11px;
    }
    .result-action-btn.pro:hover {
      background: var(--c-surface);
      border-color: var(--c-secondary);
      color: var(--c-secondary);
    }

    /* Punya section */
    .punya-section {
      margin: 0 20px 24px;
      padding: 16px;
      background: var(--c-surface);
      border-radius: var(--radius-lg);
      border: 1px solid var(--c-border);
      transition:
        background-color var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease);
    }

    .punya-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .punya-title {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .punya-sub {
      font-size: 10px;
      color: var(--c-muted);
      text-decoration: underline;
      cursor: pointer;
    }

    .punya-cards {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .punya-cards::-webkit-scrollbar { display: none; }

    .punya-card {
      flex-shrink: 0;
      width: 150px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      padding: 10px;
      background: var(--c-bg);
      cursor: pointer;
      transition:
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        background-color var(--t-med) var(--ease);
    }

    .punya-card:hover {
      border-color: var(--c-primary);
      transform: translateY(-2px);
    }

    .punya-card-img {
      width: 100%;
      height: 80px;
      background: var(--c-light);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-bottom: 8px;
      transition: background-color var(--t-med) var(--ease);
    }

    .punya-card-name {
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: 3px;
      transition: color var(--t-med) var(--ease);
    }

    .punya-card-score {
      font-size: 10px;
      color: var(--c-primary);
      font-weight: 600;
      margin-bottom: 8px;
      transition: color var(--t-med) var(--ease);
    }

    .punya-cmp-btn {
      width: 100%;
      padding: 6px;
      border: 1.5px solid var(--c-primary);
      border-radius: var(--radius);
      background: transparent;
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-primary);
      cursor: pointer;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
    }

    .punya-cmp-btn:hover {
      background: var(--c-primary);
      color: #fff;
    }

    /* ============================================================
       LOGIN MODAL
    ============================================================ */
    #login-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 400;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    #login-overlay.open { display: flex; }

    .login-modal {
      background: var(--c-bg);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      width: 100%;
      max-width: 360px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      position: relative;
      transition: background-color var(--t-med) var(--ease);
    }

    .login-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--c-surface);
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: var(--c-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--t-fast) var(--ease);
    }

    .login-close:hover { background: var(--c-light); }

    .login-logo {
      text-align: center;
      margin-bottom: 20px;
    }

    .login-logo-name {
      font-family: var(--font-head);
      font-size: 22px;
      font-weight: 900;
      color: var(--c-primary);
      letter-spacing: 0.04em;
    }

    .login-logo-sub {
      font-size: 11px;
      color: var(--c-muted);
      letter-spacing: 0.07em;
    }

    .login-tagline {
      font-size: 11px;
      color: var(--c-muted);
      text-align: center;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .login-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 800;
      color: var(--c-text);
      margin-bottom: 4px;
    }

    .login-sub {
      font-size: 12px;
      color: var(--c-muted);
      margin-bottom: 18px;
      line-height: 1.5;
    }

    .login-btn {
      width: 100%;
      padding: 12px;
      border: 1.5px solid var(--c-border);
      border-radius: var(--radius);
      background: transparent;
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-text);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 8px;
      cursor: pointer;
      transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
    }

    .login-btn:hover { background: var(--c-light); border-color: var(--c-primary); }

    .login-btn.primary {
      background: var(--c-primary);
      border-color: var(--c-primary);
      color: #fff;
    }

    .login-btn.primary:hover { opacity: 0.9; }

    .login-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0;
    }

    .login-divider-line {
      flex: 1;
      height: 0.5px;
      background: var(--c-border);
    }

    .login-divider-text {
      font-size: 11px;
      color: var(--c-muted);
    }

    .login-guest {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: var(--c-muted);
      cursor: pointer;
      padding: 8px;
      text-decoration: underline;
      background: none;
      border: none;
    }

    .login-guest-note {
      font-size: 11px;
      color: var(--c-muted);
      text-align: center;
      margin-top: 10px;
      line-height: 1.6;
    }

    .login-lang-row {
      display: flex;
      gap: 5px;
      justify-content: center;
      margin-top: 16px;
    }

    /* ============================================================
       UTILITY
    ============================================================ */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* Smooth all color transitions */
    * {
      transition-property: background-color, border-color, color;
      transition-duration: var(--t-med);
      transition-timing-function: var(--ease);
    }

    /* Override for elements that need instant or custom transitions */
    .hamburger span,
    .analyze-btn,
    .action-btn,
    .nav-login,
    .paste-btn,
    .drawer-item,
    .lang-option,
    .lang-pill,
    .drawer-close,
    .barcode-close { transition: all var(--t-fast) var(--ease); }

    #drawer, #drawer-overlay { transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
    @media (min-width: 1280px) {
      #empty-tips { display: block !important; }
      .empty-state { opacity: 1; padding: 32px; }
    }
  
    [data-theme="dark"][data-color="g1"] { --c-bg:#0e1812; --c-surface:#1a2420; }
    [data-theme="dark"][data-color="g2"] { --c-bg:#0a1a10; --c-surface:#142615; }
    [data-theme="dark"][data-color="g3"] { --c-bg:#0d2016; --c-surface:#182e20; }
    [data-theme="dark"][data-color="b1"] { --c-bg:#090f1c; --c-surface:#0f1a2e; }
    [data-theme="dark"][data-color="b2"] { --c-bg:#0a1020; --c-surface:#101c32; }
    [data-theme="dark"][data-color="b3"] { --c-bg:#0c1428; --c-surface:#142038; }
    [data-theme="dark"][data-color="y1"] { --c-bg:#120c04; --c-surface:#1e1408; }
    [data-theme="dark"][data-color="y2"] { --c-bg:#160e04; --c-surface:#24180a; }
    [data-theme="dark"][data-color="y3"] { --c-bg:#1a1004; --c-surface:#2c1e08; }
    [data-theme="dark"][data-color="r1"] { --c-bg:#130608; --c-surface:#1e0c10; }
    [data-theme="dark"][data-color="r2"] { --c-bg:#160608; --c-surface:#240e14; }
    [data-theme="dark"][data-color="r3"] { --c-bg:#180808; --c-surface:#281010; }

    .model-btn{padding:8px 14px;flex-direction:column;align-items:flex-start;border-radius:var(--radius);font-size:10px;font-weight:700;font-family:var(--font-head);border:1.5px solid var(--c-border);background:transparent;color:var(--c-muted);cursor:pointer;transition:all var(--t-fast) var(--ease);display:inline-flex;align-items:center;gap:4px}
    .model-btn.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
    .pro-tag{font-size:8px;padding:1px 4px;border-radius:3px;background:var(--c-accent);color:var(--c-primary);font-weight:800}
    #ai-model-row{margin:0 0 10px;display:none;flex-wrap:wrap;gap:6px;}

    [data-theme="dark"] .result-summary {
      background: var(--c-light);
      border-left-color: var(--c-primary);
    }
    [data-theme="dark"] .result-summary h2,
    [data-theme="dark"] .result-summary h3 { border-bottom-color: #2a4035; }
    [data-theme="dark"] .result-summary table tr:nth-child(even) td { background: #1e2e24; }

/* ── MOBİL BOTTOM SHEET ────────────────────────────────────────── */
@media (max-width:899px) {
  /* Desktop input elemanlarını mobilde gizle */
  .inci-wrap,.action-row,.form-label,.product-select,
  #analyze-btn,#ai-model-row,.paste-btn,
  .guest-note,.ai-badge,.skin-cta-card { display:none !important }

  /* Mobil hero - büyük aksiyonlar */
  #mobile-hero { display:flex !important }

  /* Analiz butonu sayfanın altında sabit - sheet içinde */
}
@media (min-width:900px) {
  #mobile-hero { display:none !important }
  #mobile-sheet-overlay { display:none !important }
  #mobile-sheet { display:none !important }
}

/* Mobil hero */
#mobile-hero {
  display:none;
  flex-direction:column;
  gap:10px;
  padding:16px 0 8px;
}
.mob-action-btn {
  width:100%;height:54px;border-radius:14px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  border:none;color:#fff;font-size:16px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);letter-spacing:-.3px;
  transition:transform .15s;
}
.mob-action-btn:active { transform:scale(.98) }
.mob-icon-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.mob-icon-btn {
  background:var(--c-surface);border:1.5px solid var(--c-border);
  border-radius:12px;padding:14px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.mob-icon-btn:active { opacity:.7 }
.mob-icon-em { font-size:22px }
.mob-icon-lbl { font-size:11px;font-weight:600;color:var(--c-muted) }

/* Bottom sheet overlay */
#mobile-sheet-overlay {
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:1000;
  animation:fadeIn .25s ease;
}
#mobile-sheet-overlay.open { display:block }

/* Bottom sheet */
#mobile-sheet {
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--c-bg);border-radius:20px 20px 0 0;
  border-top:1px solid var(--c-border);
  padding:12px 16px 32px;z-index:1001;
  max-height:85vh;overflow-y:auto;
  animation:slideUp .3s cubic-bezier(.4,0,.2,1);
}
#mobile-sheet.open { display:block }
@keyframes slideUp {
  from { transform:translateY(100%) }
  to   { transform:translateY(0) }
}
.sheet-handle {
  width:36px;height:4px;border-radius:2px;
  background:var(--c-border);margin:0 auto 14px;
}
.sheet-title {
  font-size:16px;font-weight:800;color:var(--c-text);
  margin-bottom:12px;font-family:var(--font-head);
}