/* SmartDine tanıtım sayfası — Structure Technology kurumsal kimliği.
   Fontlar wwwroot/lib/fonts altında yereldir (CSP: font-src 'self';
   data: URI'leri politika gereği engellendiğinden gömülü base64 kullanılmaz). */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('/lib/fonts/space-grotesk_latest_latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('/lib/fonts/space-grotesk_latest_latin-ext-300-normal.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:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/lib/fonts/space-grotesk_latest_latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/lib/fonts/space-grotesk_latest_latin-ext-400-normal.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:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/lib/fonts/space-grotesk_latest_latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/lib/fonts/space-grotesk_latest_latin-ext-500-normal.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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/lib/fonts/inter_latest_latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/lib/fonts/inter_latest_latin-ext-400-normal.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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/lib/fonts/inter_latest_latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/lib/fonts/inter_latest_latin-ext-500-normal.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/lib/fonts/jetbrains-mono_latest_latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/lib/fonts/jetbrains-mono_latest_latin-ext-400-normal.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{
    --ground:#FBFAFB; --surface:#FFFFFF; --surface-2:#F3F0F3; --surface-3:#ECE7EB;
    --ink:#0B090C; --ink-2:#3B343D; --muted:#7B727C; --line:#E8E2E7; --line-2:#D9D0D8;
    --amber:#8B1F38; --amber-ink:#8B1F38; --amber-soft:#F7E7EC;
    --pine:#1A141C; --pine-ink:#0B090C; --pine-soft:#F1EDF1;
    --gold:#8B1F38; --danger:#B23A54; --good:#3B343D;
    --shadow:0 1px 2px rgba(11,9,12,.05), 0 12px 34px -14px rgba(11,9,12,.12);
    --shadow-lg:0 34px 72px -30px rgba(11,9,12,.26);
    --radius:16px; --radius-sm:10px; --maxw:1180px;
    --serif:"Space Grotesk","Segoe UI",system-ui,sans-serif;
    --sans:"Inter","Segoe UI",system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root{
      /* Structure Technology · Void Black / Cosmic Bordeaux / Stellar White */
      --ground:#000000; --surface:#0A090B; --surface-2:#060507; --surface-3:#110D11;
      --ink:#F7F4F5; --ink-2:#CBC3C7; --muted:#867A80; --line:#20171B; --line-2:#33242B;
      --amber:#8B1F38; --amber-ink:#D2637C; --amber-soft:#1A0B10;
      --pine:#E7E2E4; --pine-ink:#FFFFFF; --pine-soft:#120F12;
      --gold:#B23A54; --danger:#D2637C; --good:#CBC3C7;
      --serif:"Space Grotesk","Segoe UI",system-ui,sans-serif;
      --sans:"Inter","Segoe UI",system-ui,sans-serif;
      --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
      --shadow:0 1px 2px rgba(0,0,0,.6), 0 14px 40px -16px rgba(0,0,0,.85);
      --shadow-lg:0 44px 90px -34px rgba(0,0,0,.92);
    }
  }
  :root[data-theme="light"]{
    --ground:#FBFAFB; --surface:#FFFFFF; --surface-2:#F3F0F3; --surface-3:#ECE7EB;
    --ink:#0B090C; --ink-2:#3B343D; --muted:#7B727C; --line:#E8E2E7; --line-2:#D9D0D8;
    --amber:#8B1F38; --amber-ink:#8B1F38; --amber-soft:#F7E7EC;
    --pine:#1A141C; --pine-ink:#0B090C; --pine-soft:#F1EDF1;
    --gold:#8B1F38; --danger:#B23A54; --good:#3B343D;
    --shadow:0 1px 2px rgba(11,9,12,.05), 0 12px 34px -14px rgba(11,9,12,.12);
    --shadow-lg:0 34px 72px -30px rgba(11,9,12,.26);
  }
  :root[data-theme="dark"]{
    /* Structure Technology · Void Black / Cosmic Bordeaux / Stellar White */
    --ground:#000000; --surface:#0A090B; --surface-2:#060507; --surface-3:#110D11;
    --ink:#F7F4F5; --ink-2:#CBC3C7; --muted:#867A80; --line:#20171B; --line-2:#33242B;
    --amber:#8B1F38; --amber-ink:#D2637C; --amber-soft:#1A0B10;
    --pine:#E7E2E4; --pine-ink:#FFFFFF; --pine-soft:#120F12;
    --gold:#B23A54; --danger:#D2637C; --good:#CBC3C7;
    --serif:"Space Grotesk","Segoe UI",system-ui,sans-serif;
    --sans:"Inter","Segoe UI",system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
    --shadow:0 1px 2px rgba(0,0,0,.6), 0 14px 40px -16px rgba(0,0,0,.85);
    --shadow-lg:0 44px 90px -34px rgba(0,0,0,.92);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.08; text-wrap:balance; margin:0}
  h2{font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.01em}
  h3{font-size:1.32rem; line-height:1.2}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  .eyebrow{font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-ink)}
  .tnum{font-variant-numeric:tabular-nums}
  section{position:relative}
  .sec-pad{padding:clamp(64px,9vw,120px) 0}
  .lead{color:var(--ink-2); font-size:1.12rem; max-width:62ch}
  .muted{color:var(--muted)}

  /* ---------- NAV ---------- */
  .nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(12px);
    background:color-mix(in srgb, var(--ground) 82%, transparent); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; gap:22px; height:64px}
  .brand{display:flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:700; font-size:1.22rem; letter-spacing:-.01em}
  .brand .by{font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-left:2px; align-self:center; padding-left:11px; border-left:1px solid var(--line-2)}
  @media (max-width:700px){ .brand .by{display:none} }
  .brand .qr{width:26px; height:26px; flex:none}
  .nav-links{display:flex; gap:26px; margin-left:8px}
  .nav-links a{font-size:.93rem; color:var(--ink-2); font-weight:500; padding:6px 0; border-bottom:2px solid transparent}
  .nav-links a:hover{color:var(--amber-ink); border-color:var(--amber)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:12px}
  .btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:.95rem;
    padding:11px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--amber); color:#fff; box-shadow:0 6px 18px -6px color-mix(in srgb,var(--amber) 70%, transparent)}
  .btn-primary:hover{box-shadow:0 10px 26px -8px color-mix(in srgb,var(--amber) 75%, transparent); transform:translateY(-1px)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
  .btn-ghost:hover{border-color:var(--amber); color:var(--amber-ink)}
  .nav-login{font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--ink-2);
    padding:8px 4px; border-bottom:2px solid transparent; white-space:nowrap}
  .nav-login:hover{color:var(--amber-ink); border-color:var(--amber)}
  @media (max-width:520px){ .nav-login{display:none} }
  .icon-btn{width:40px; height:40px; padding:0; justify-content:center; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink)}
  .icon-btn:hover{border-color:var(--amber)}
  .nav .nav-links, .nav .btn-primary.demo{}
  @media (max-width:880px){ .nav-links{display:none} .nav .btn-primary.demo span{display:none} }

  /* ---------- HERO ---------- */
  .hero{padding:clamp(48px,7vw,92px) 0 clamp(56px,7vw,96px); position:relative; overflow:hidden}
  .hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(120% 90% at 88% -10%, color-mix(in srgb,var(--amber) 20%, transparent), transparent 60%),
      radial-gradient(90% 80% at -10% 20%, color-mix(in srgb,var(--pine) 16%, transparent), transparent 55%);}
  .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
  .hero h1{font-size:clamp(2.4rem,5.6vw,4.15rem); letter-spacing:-.02em; margin:20px 0 0}
  .hero h1 .em{color:var(--amber); font-style:italic}
  .hero .lead{margin-top:22px; font-size:1.2rem}
  .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
  .hero-stats{display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:38px; padding-top:26px; border-top:1px solid var(--line)}
  .hstat{display:flex; flex-direction:column; gap:2px}
  .hstat b{font-family:var(--serif); font-size:1.55rem; color:var(--ink)}
  .hstat span{font-size:.8rem; color:var(--muted); letter-spacing:.02em}

  /* ---------- LIVE FLOOR BOARD ---------- */
  .floor{background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); padding:20px; position:relative}
  .floor-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
  .floor-title{display:flex; align-items:center; gap:9px; font-weight:600; font-family:var(--sans); font-size:.95rem}
  .pulse-dot{width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent); animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .floor-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:11px}
  .tbl{aspect-ratio:1/.82; border-radius:13px; border:1.5px solid var(--line-2); background:var(--surface-2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:relative; overflow:hidden;
    transition:background .6s ease, border-color .6s ease}
  .tbl .tn{font-weight:700; font-size:1.05rem; font-family:var(--serif)}
  .tbl .ts{font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; font-weight:600}
  .tbl.free{color:var(--muted)}
  .tbl.order{background:var(--amber-soft); border-color:color-mix(in srgb,var(--amber) 55%,transparent); color:var(--amber-ink)}
  .tbl.ready{background:var(--pine-soft); border-color:color-mix(in srgb,var(--pine) 45%,transparent); color:var(--pine-ink)}
  .tbl.pay{background:color-mix(in srgb,var(--gold) 22%, var(--surface)); border-color:var(--gold); color:var(--gold)}
  .tbl.pay::after{content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent); animation:blink 1.6s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:.25}50%{opacity:.9}}
  /* choreographed state changes */
  .tbl.a1{animation:st1 12s infinite}
  .tbl.a2{animation:st2 12s infinite}
  @keyframes st1{0%,30%{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 55%,transparent)}45%,70%{background:var(--pine-soft);border-color:color-mix(in srgb,var(--pine) 45%,transparent)}85%,100%{background:color-mix(in srgb,var(--gold) 22%, var(--surface));border-color:var(--gold)}}
  @keyframes st2{0%,40%{background:var(--surface-2);border-color:var(--line-2)}55%,100%{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 55%,transparent)}}
  .legend{display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
  .lg{display:flex; align-items:center; gap:7px; font-size:.76rem; color:var(--muted); font-weight:500}
  .sw{width:12px; height:12px; border-radius:4px; border:1.5px solid}
  .sw.free{border-color:var(--line-2); background:var(--surface-2)}
  .sw.order{border-color:color-mix(in srgb,var(--amber) 55%,transparent); background:var(--amber-soft)}
  .sw.ready{border-color:color-mix(in srgb,var(--pine) 45%,transparent); background:var(--pine-soft)}
  .sw.pay{border-color:var(--gold); background:color-mix(in srgb,var(--gold) 22%, var(--surface))}

  /* ---------- BRAND STRIP ---------- */
  .strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-2)}
  .strip-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; padding:22px 0}
  .strip-in .k{display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--ink-2); font-weight:600}
  .strip-in .k svg{color:var(--pine)}

  /* ---------- SECTION HEAD ---------- */
  .shead{max-width:64ch; margin-bottom:clamp(36px,5vw,58px)}
  .shead h2{margin-top:12px}
  .shead p{margin-top:16px}
  .center{margin-left:auto;margin-right:auto;text-align:center}

  /* ---------- PILLARS ---------- */
  .pillars{background:var(--surface-2)}
  .pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
  @media (max-width:980px){ .pgrid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .pgrid{grid-template-columns:1fr} }
  .pill{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 28px; box-shadow:var(--shadow); position:relative; overflow:hidden}
  .pill .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--amber-soft); color:var(--amber-ink); margin-bottom:18px}
  .pill:nth-child(2) .ic{background:var(--pine-soft); color:var(--pine-ink)}
  .pill:nth-child(3) .ic{background:color-mix(in srgb,var(--gold) 20%, var(--surface)); color:var(--gold)}
  .pill:nth-child(4) .ic{background:var(--amber-soft); color:var(--amber-ink)}
  .pill h3{font-size:1.16rem; margin-bottom:9px}
  .pill p{font-size:.96rem; color:var(--muted)}

  /* ---------- JOURNEY ---------- */
  .jgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:0}
  @media (max-width:960px){ .jgrid{grid-template-columns:repeat(2,1fr); gap:22px} }
  @media (max-width:520px){ .jgrid{grid-template-columns:1fr} }
  .jstep{position:relative; padding:0 22px}
  .jstep:not(:last-child)::after{content:""; position:absolute; top:26px; right:-2px; width:4px; height:4px; border-radius:50%; box-shadow:14px 0 0 var(--line-2),28px 0 0 var(--line-2),42px 0 0 var(--line-2)}
  @media (max-width:960px){ .jstep::after{display:none} }
  .jnum{font-family:var(--serif); font-size:1rem; font-weight:700; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
    background:var(--surface); border:1.5px solid var(--amber); color:var(--amber-ink); box-shadow:var(--shadow); margin-bottom:18px}
  .jstep h3{font-size:1.08rem; margin-bottom:8px}
  .jstep p{font-size:.92rem; color:var(--muted)}

  /* ---------- MODULES ---------- */
  .modules{background:var(--surface-2)}
  .mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  @media (max-width:960px){ .mgrid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:600px){ .mgrid{grid-template-columns:1fr} }
  .mod{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .25s ease, border-color .2s}
  .mod:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}
  .mod-top{display:flex; align-items:center; gap:12px; margin-bottom:14px}
  .mod .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--surface-3); color:var(--pine-ink)}
  .mod .tag{margin-left:auto; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); padding:3px 8px; border-radius:999px}
  .mod h3{font-size:1.1rem}
  .mod p{font-size:.93rem; color:var(--muted); margin:8px 0 14px}
  .mod ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
  .mod li{display:flex; gap:9px; font-size:.86rem; color:var(--ink-2); align-items:flex-start}
  .mod li svg{flex:none; margin-top:3px; color:var(--amber)}

  /* ---------- SPOTLIGHT ---------- */
  .spot{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,66px); align-items:center}
  .spot.rev .spot-media{order:2}
  @media (max-width:900px){ .spot{grid-template-columns:1fr; gap:34px} .spot.rev .spot-media{order:0} }
  .spot h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
  .spot .lead{margin-top:16px; font-size:1.05rem}
  .flist{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
  .flist li{display:flex; gap:12px; align-items:flex-start}
  .flist .fi{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--pine-soft); color:var(--pine-ink)}
  .flist b{font-weight:650; display:block; font-size:.98rem}
  .flist span{font-size:.9rem; color:var(--muted)}
  .spot-media{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); padding:22px; overflow:hidden}

  /* dashboard mock */
  .dash-kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px}
  .kpi{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px 15px}
  .kpi .lab{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
  .kpi .val{font-family:var(--serif); font-size:1.5rem; margin-top:5px; color:var(--ink)}
  .kpi .val small{font-size:.8rem; color:var(--good); font-family:var(--sans); font-weight:700; margin-left:6px}
  .chart-card{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:15px 16px 8px}
  .chart-card .ch-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
  .chart-card .ch-top b{font-size:.9rem}
  .chart-card .ch-top span{font-size:.72rem; color:var(--muted)}
  .bars{display:flex; align-items:flex-end; gap:6px; height:120px}
  .bar{flex:1; border-radius:5px 5px 0 0; background:linear-gradient(var(--pine), color-mix(in srgb,var(--pine) 55%, transparent)); position:relative; min-height:6px; transition:height .8s ease}
  .bar.peak{background:linear-gradient(var(--amber), color-mix(in srgb,var(--amber) 45%, transparent))}
  .bar span{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:.6rem; color:var(--muted)}
  .bar.peak::after{content:"Zirve"; position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:.58rem; font-weight:700; color:var(--amber-ink); white-space:nowrap}
  .mock-note{font-size:.72rem; color:var(--muted); margin-top:26px; text-align:right; font-style:italic}

  /* price tag animated (dynamic pricing) */
  .pricecard{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:14px}
  .menuitem{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
  .menuitem .thumb{width:46px; height:46px; border-radius:9px; flex:none; background:
     radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--amber) 50%,transparent), transparent 60%),
     linear-gradient(135deg, var(--surface-3), var(--surface-2)); border:1px solid var(--line-2)}
  .menuitem .mi-name{font-weight:600; font-size:.95rem}
  .menuitem .mi-sub{font-size:.76rem; color:var(--muted)}
  .menuitem .mi-price{margin-left:auto; text-align:right}
  .mi-price .old{font-size:.8rem; color:var(--muted); text-decoration:line-through}
  .mi-price .new{font-family:var(--serif); font-size:1.15rem; color:var(--amber-ink); font-weight:700}
  .hh-badge{display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    background:var(--amber); color:#fff; padding:4px 10px; border-radius:999px; align-self:flex-start}
  .loyalty-row{display:flex; align-items:center; gap:12px; background:var(--pine-soft); border:1px solid color-mix(in srgb,var(--pine) 30%,transparent); border-radius:12px; padding:12px 14px}
  .loyalty-row .lp{font-family:var(--serif); font-size:1.4rem; color:var(--pine-ink); font-weight:700}

  /* ---------- SEGMENTS ---------- */
  .segments{background:var(--surface-2)}
  .seg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media (max-width:900px){ .seg-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .seg-grid{grid-template-columns:1fr} }
  .seg{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); display:flex; gap:14px; align-items:flex-start}
  .seg .emoji{font-size:1.7rem; line-height:1; flex:none}
  .seg h3{font-size:1.05rem; margin-bottom:6px}
  .seg p{font-size:.87rem; color:var(--muted)}

  /* ---------- TRUST ---------- */
  .trust{background:
      linear-gradient(180deg, transparent, color-mix(in srgb,var(--pine) 5%, transparent)),
      var(--ground)}
  .tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media (max-width:900px){ .tgrid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .tgrid{grid-template-columns:1fr} }
  .tcard{border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--surface)}
  .tcard .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--pine-soft);color:var(--pine-ink);margin-bottom:14px}
  .tcard h3{font-size:1rem; margin-bottom:7px}
  .tcard p{font-size:.86rem; color:var(--muted)}

  /* ---------- PRICING ---------- */
  .prices{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
  @media (max-width:900px){ .prices{grid-template-columns:1fr; max-width:460px; margin:0 auto} }
  .price{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px 26px; display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative}
  .price.feat{border-color:var(--amber); box-shadow:var(--shadow-lg); background:
      linear-gradient(180deg, color-mix(in srgb,var(--amber) 7%, var(--surface)), var(--surface) 30%)}
  .price .rib{position:absolute; top:-13px; left:26px; background:var(--amber); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px}
  .price h3{font-size:1.25rem}
  .price .who{font-size:.85rem; color:var(--muted); margin-top:4px; min-height:2.6em}
  .price .amt{font-family:var(--serif); font-size:2.5rem; margin:16px 0 2px; letter-spacing:-.02em}
  .price .amt small{font-size:.9rem; color:var(--muted); font-family:var(--sans); font-weight:600}
  .price .per{font-size:.8rem; color:var(--muted); margin-bottom:20px}
  .price .btn{width:100%; justify-content:center; margin-bottom:20px}
  .price ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
  .price li{display:flex; gap:10px; font-size:.88rem; align-items:flex-start; color:var(--ink-2)}
  .price li svg{flex:none; margin-top:3px; color:var(--good)}
  .price li.off{color:var(--muted)}
  .price li.off svg{color:var(--line-2)}
  .price-note{text-align:center; font-size:.82rem; color:var(--muted); margin-top:24px}

  /* matrix */
  .matrix-wrap{margin-top:34px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--surface)}
  table.matrix{border-collapse:collapse; width:100%; min-width:620px; font-size:.9rem}
  table.matrix th, table.matrix td{padding:14px 16px; text-align:center; border-bottom:1px solid var(--line)}
  table.matrix thead th{font-family:var(--serif); font-size:1rem; background:var(--surface-2)}
  table.matrix tbody th{text-align:left; font-weight:600; font-family:var(--sans); color:var(--ink-2); font-size:.88rem}
  table.matrix tr:last-child td, table.matrix tr:last-child th{border-bottom:none}
  table.matrix td.on{color:var(--good)}
  table.matrix td .dash{color:var(--line-2)}
  table.matrix col.hl, table.matrix th.hl{background:color-mix(in srgb,var(--amber) 8%, var(--surface))}

  /* ---------- FAQ ---------- */
  .faq{background:var(--surface-2)}
  .faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
  details{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2px 20px; box-shadow:var(--shadow)}
  details[open]{border-color:color-mix(in srgb,var(--amber) 35%,var(--line))}
  summary{cursor:pointer; list-style:none; padding:18px 0; font-weight:600; font-size:1rem; display:flex; align-items:center; justify-content:space-between; gap:16px}
  summary::-webkit-details-marker{display:none}
  summary .chev{flex:none; transition:transform .2s ease; color:var(--amber-ink)}
  details[open] summary .chev{transform:rotate(45deg)}
  details p{padding:0 0 20px; color:var(--muted); font-size:.94rem; margin:0}

  /* ---------- CTA ---------- */
  .cta{position:relative; overflow:hidden}
  .cta-box{background:
      radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--amber) 24%, transparent), transparent 55%),
      radial-gradient(120% 140% at 0% 100%, color-mix(in srgb,var(--pine) 22%, transparent), transparent 55%),
      var(--surface);
     border:1px solid var(--line); border-radius:26px; padding:clamp(38px,6vw,72px); text-align:center; box-shadow:var(--shadow-lg)}
  .cta-box h2{font-size:clamp(2rem,4.4vw,3.2rem)}
  .cta-box p{margin:18px auto 0; max-width:56ch; color:var(--ink-2); font-size:1.12rem}
  .cta-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px}
  .cta-mini{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin-top:30px; font-size:.9rem; color:var(--muted)}
  .cta-mini span{display:flex; align-items:center; gap:8px}

  /* ---------- FOOT ---------- */
  .foot{border-top:1px solid var(--line); background:var(--ground)}
  .foot-in{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; padding:34px 0}
  .foot .brand{font-size:1.1rem}
  .foot p{font-size:.84rem; color:var(--muted)}

  /* reveal */
  .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
  .rv.in{opacity:1; transform:none}
  @media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none} }
  :focus-visible{outline:2.5px solid var(--amber); outline-offset:3px; border-radius:4px}

  /* ============================================================
     STRUCTURE TECHNOLOGY — kozmik kimlik (aydınlık + karanlık ortak)
     Void Black / Stellar White zemin · Cosmic Bordeaux vurgu
     ============================================================ */
  .eyebrow{font-family:var(--mono); letter-spacing:.24em; font-weight:500}
  h1,h2{letter-spacing:-.02em}
  .hero{overflow:hidden}
  .hero::before{
    background:
      radial-gradient(72% 60% at 85% -12%, color-mix(in srgb,var(--amber) 46%, transparent), transparent 62%),
      radial-gradient(58% 55% at 3% 32%, color-mix(in srgb,var(--amber) 15%, transparent), transparent 60%),
      radial-gradient(44% 56% at 52% 128%, color-mix(in srgb,var(--amber) 12%, transparent), transparent 55%);
  }
  /* olay ufku — accretion ring */
  .hero::after{
    content:""; position:absolute; z-index:0; pointer-events:none;
    width:min(66vw,660px); aspect-ratio:1; right:-9%; top:-24%; border-radius:50%;
    border:1px solid color-mix(in srgb,var(--amber) 30%, transparent);
    box-shadow:inset 0 0 150px color-mix(in srgb,var(--amber) 13%, transparent),
               0 0 100px color-mix(in srgb,var(--amber) 7%, transparent);
  }
  .strip-in .k svg{color:var(--amber-ink)}
  .mod .ic{background:var(--surface-3); color:var(--ink)}
  .jnum{border-color:var(--amber); color:var(--amber-ink); background:var(--surface)}
  .cta-box{
    background:
      radial-gradient(92% 130% at 100% 0%, color-mix(in srgb,var(--amber) 40%, transparent), transparent 55%),
      radial-gradient(92% 130% at 0% 100%, color-mix(in srgb,var(--amber) 18%, transparent), transparent 55%),
      var(--surface);
  }
  /* bordo zeminde metin daima beyaz */
  .btn-primary, .hh-badge, .price .rib{color:#fff}
  .price.feat{border-color:var(--amber)}
  .tbl.pay{background:color-mix(in srgb,var(--amber) 82%, var(--ground)); border-color:var(--amber); color:#fff}
  .tbl.pay::after{box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 45%,transparent)}
  .bar{background:linear-gradient(var(--ink-2), color-mix(in srgb,var(--ink-2) 22%, transparent))}
  .bar.peak{background:linear-gradient(var(--amber), color-mix(in srgb,var(--amber) 45%, transparent))}
  .kpi .val small{color:var(--amber-ink)}

  /* ---- Structure Technology imza / footer ---- */
  .st-sig{border-top:1px solid var(--line); background:var(--ground)}
  .st-sig-in{display:flex; flex-wrap:wrap; align-items:center; gap:22px 30px; padding:36px 0}
  .st-lockup{display:flex; align-items:center; gap:16px}
  .st-mark{width:44px; height:52px; flex:none}
  .st-word{font-family:"Space Grotesk","Segoe UI",system-ui,sans-serif; line-height:1.05}
  .st-word .l1{font-size:1.08rem; font-weight:500; letter-spacing:.34em; color:var(--ink)}
  .st-word .l2{font-size:1.08rem; font-weight:300; letter-spacing:.34em; color:var(--amber-ink)}
  .st-powered{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
  .st-tag{margin-left:auto; font-family:var(--mono); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-ink); text-align:right}
  @media (max-width:640px){ .st-tag{margin-left:0; width:100%; text-align:left} }