/* ==========================================================================
   apicloud — "apicloud design" yeniden giydirme katmanı (v3400)
   Temel: enhance-apicloud-project-design template'i (DM Sans + Manrope,
   #f9f9f9 zemin, #eaeaea çizgi, mono-koyu aksan). Yalnızca panel (body.shell)
   kapsamlıdır; landing / giriş / kayıt sayfaları mevcut tasarımında kalır.
   Kural: iş mantığı yok, yalnız görünüm. app.css SONRASI yüklenir.
   ========================================================================== */

/* ---------- 1. FONTLAR (self-hosted, CSP 'self') ---------- */
@font-face{
  font-family:"DM Sans"; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url("/fonts/dmsans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"DM Sans"; font-style:normal; font-weight:100 1000; font-display:swap;
  src:url("/fonts/dmsans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. TOKEN YENİDEN EŞLEME (template -> mevcut değişkenler) ---------- */
body:has(.shell){
  /* yüzeyler */
  --canvas:#f9f9f9;
  --surface:#ffffff;
  --surface-2:#fcfcfc;
  --surface-3:#f4f4f4;
  --inset:#ffffff;
  --inset-hover:#fafafa;

  /* metin — template gri basamakları */
  --ink-1:#262626;
  --ink-2:#5b5b5b;
  --ink-3:#8e8e8e;
  --ink-4:#a6a6a6;

  /* çizgiler — template solid hex */
  --line:#eaeaea;
  --line-soft:#f0f0f0;
  --line-strong:#dcdcdc;
  --line-focus:#b7b7b7;

  /* aksan — mono koyu (var(--signal)) */
  --signal:#202020;
  --signal-strong:#000000;
  --signal-soft:#f4f4f4;
  --signal-softer:#fafafa;
  --signal-on:#ffffff;
  --signal-ring:rgba(0,0,0,.14);

  /* anlamsal — yumuşak, template ruhunda */
  --ok:#16a34a;      --ok-soft:#f0faf4;   --ok-ring:rgba(22,163,74,.22);
  --warn:#b45309;    --warn-soft:#fdf6ec; --warn-ring:rgba(180,83,9,.2);
  --danger:#c22a1e;  --danger-soft:#fdf1f0;--danger-ring:rgba(194,42,30,.2);

  /* derinlik — template kartlar çizgi tanımlı, gölge yalnız yüzen katmanda */
  --shadow-xs:0 0 0 1px #f2f2f2;
  --shadow-sm:0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 20px 80px rgba(40,40,40,.16);
  --card-shadow:var(--shadow-sm);

  /* tipografi — DM Sans taban + Manrope başlık; template 13px taban */
  --font-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-head:"Manrope",var(--font-sans);
  --fs-100:10px; --fs-200:11px; --fs-300:12px; --fs-400:13px;
  --fs-500:14px; --fs-600:16px; --fs-700:20px; --fs-800:24px; --fs-900:30px;

  /* yarıçap — template cömert */
  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;

  font-family:var(--font-sans);
  color:var(--ink-1);
  font-size:13px;
}

/* v4900: panel koyu — routeway paleti (light seçiminde üstteki açık blok geçerli) */
html[data-theme="dark"] body:has(.shell){
  --canvas:#0a0a0a; --surface:#101014; --surface-2:#14141a; --surface-3:#1a1a21;
  --inset:#0c0c0f; --inset-hover:#08080a;
  --ink-1:#f2f2f5; --ink-2:#b9b9c2; --ink-3:#8a8a94; --ink-4:#6f6f7a; --ink-inv:#0a0a0a;
  --line:#232329; --line-soft:#17171c; --line-strong:#3a3a42; --line-focus:rgba(103,232,249,.5);
  --signal:#67e8f9; --signal-strong:#8ff0fc; --signal-soft:#12171c; --signal-softer:#0d1518;
  --signal-on:#06262b; --signal-ring:rgba(103,232,249,.3);
  --ok:#3ecf7a; --ok-soft:#0e1a13; --ok-ring:rgba(62,207,122,.25);
  --warn:#e0a83c; --warn-soft:#241c0c; --warn-ring:rgba(224,168,60,.26);
  --danger:#f2726a; --danger-soft:#26120f; --danger-ring:rgba(242,114,106,.26);
  --shadow-xs:0 0 0 1px #17171c; --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.5); --shadow-lg:0 20px 80px rgba(0,0,0,.6);
  color-scheme:dark; color:#d6d6de;
}
/* sabit açık hex'lerin koyu karşılıkları */
html[data-theme="dark"] body:has(.shell) .workspace strong{ color:#f2f2f5; }
html[data-theme="dark"] body:has(.shell) .workspace small{ color:#8a8a94; }
html[data-theme="dark"] body:has(.shell) .side-brand .brand-light{ color:#6f6f7a; }
html[data-theme="dark"] body:has(.shell) .nav-item:hover{ background:#15151a; color:#f2f2f5; }
html[data-theme="dark"] body:has(.shell) .nav-item[aria-current="page"]{ background:#1b1b22; color:var(--ink-1); }
html[data-theme="dark"] body:has(.shell) .nav-item[aria-current="page"] .ic{ color:#67e8f9; }
html[data-theme="dark"] body:has(.shell) .upgrade-card h4{ color:#f2f2f5; }
html[data-theme="dark"] body:has(.shell) .upgrade-card p{ color:#8a8a94; }
html[data-theme="dark"] body:has(.shell) .pro-badge{ background:#12171c; color:#8ff0fc; border-color:rgba(103,232,249,.3); }
html[data-theme="dark"] body:has(.shell) :focus-visible{ outline-color:#3a3a42; }
html[data-theme="dark"] body:has(.shell) .input:focus-visible,
html[data-theme="dark"] body:has(.shell) select.input:focus-visible{ border-color:#3a3a44; box-shadow:0 0 0 3px rgba(103,232,249,.12); }

html[data-theme="dark"] body:has(.shell) .btn.primary:hover{ background:var(--signal-strong); }
html[data-theme="dark"] body:has(.shell) select.input{ background:var(--surface); color:var(--ink-1); }
html[data-theme="dark"] body:has(.shell) .notice.signal{ color:var(--ink-2); }
html[data-theme="dark"] body:has(.shell) .modal-overlay{ background:rgba(37,37,37,.36); }

/* ---------- 3. ODAK — template imzası: 3px #b7b7b7 outline ---------- */
body:has(.shell) :focus-visible{ outline:3px solid #b7b7b7; outline-offset:3px; border-radius:4px; }
body:has(.shell) .input:focus-visible,
body:has(.shell) select.input:focus-visible{ outline:none; border-color:#bdbdbd; box-shadow:0 0 0 3px rgba(0,0,0,.05); }

/* ---------- 4. İSKELET: SIDEBAR ---------- */
body:has(.shell) .sidebar{
  background:var(--surface);
  border-right:1px solid var(--line);
  box-shadow:none;
}
body:has(.shell) .side-brand{
  font-family:var(--font-head);
  font-size:24px; font-weight:800; letter-spacing:-.6px;
  color:var(--signal); gap:8px; padding:10px var(--sp-2) var(--sp-5);
}
body:has(.shell) .side-brand .mark{ width:26px; height:26px; }
body:has(.shell) .side-brand .brand-light{ color:#9d9d9d; font-weight:800; }
body:has(.shell) .pro-badge{
  font-family:var(--font-sans); font-size:8px; font-weight:700; letter-spacing:.08em;
  color:var(--ink-3); border:1px solid var(--line); border-radius:4px;
  padding:2px 5px; margin-left:2px; transform:translateY(-6px);
}
/* çalışma alanı kartı (renderApp ekler) */
body:has(.shell) .workspace{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; margin:0 0 var(--sp-4);
  background:var(--surface-2); min-width:0; cursor:default;
}
body:has(.shell) .workspace .ws-av{ width:27px; height:27px; font-size:10px; flex:none; }
body:has(.shell) .workspace .ws-meta{ min-width:0; display:flex; flex-direction:column; }
body:has(.shell) .workspace strong{ font-size:11.5px; font-weight:700; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body:has(.shell) .workspace small{ font-size:10px; color:var(--ink-3); }
body:has(.shell) .nav-group{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); padding:2px 4px var(--sp-2);
}
body:has(.shell) .nav-item{
  font-size:12px; color:var(--ink-3); font-weight:500;
  padding:10px 12px; border-radius:8px; gap:11px;
  box-shadow:none; background:transparent;
}
body:has(.shell) .nav-item .ic{ width:15px; height:15px; }
body:has(.shell) .nav-item:hover{ background:var(--surface-3); color:var(--ink-1); }
body:has(.shell) .nav-item[aria-current="page"]{
  background:var(--surface-3); color:var(--ink-1); font-weight:700; box-shadow:none;
}
body:has(.shell) .nav-item[aria-current="page"] .ic{ color:var(--signal); }
/* PRO yükseltme kartı */
body:has(.shell) .upgrade-card{
  margin:var(--sp-4) 2px 0; border:1px solid var(--line); border-radius:12px;
  padding:14px; background:var(--surface-2);
}
body:has(.shell) .upgrade-card h4{ font-family:var(--font-head); font-size:12px; font-weight:800; color:var(--ink-1); }
body:has(.shell) .upgrade-card p{ font-size:10.5px; color:var(--ink-3); line-height:1.6; margin:6px 0 10px; }
body:has(.shell) .side-foot{ border-top:1px solid var(--line-soft); padding-top:var(--sp-4); margin-top:var(--sp-4); }
body:has(.shell) .side-user{ padding:6px 4px; }
body:has(.shell) .side-user:hover{ background:transparent; }
body:has(.shell) .avatar{ background:var(--signal); color:var(--signal-on); }

/* ---------- 5. TOPBAR ---------- */
body:has(.shell) .topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
  box-shadow:none; height:62px;
}
body:has(.shell) .topbar .crumb{
  font-family:var(--font-sans); font-size:12px; color:var(--ink-4); font-weight:500; letter-spacing:0;
}
body:has(.shell) .topbar .crumb svg{ width:11px; height:11px; vertical-align:-1px; }
body:has(.shell) .topbar h1{
  font-family:var(--font-head); font-size:15px; font-weight:800; letter-spacing:-.3px; color:var(--ink-1);
}
body:has(.shell) .topbar .icon-btn{
  border-radius:8px; color:var(--ink-3);
}
body:has(.shell) .topbar .icon-btn:hover{ background:var(--surface-3); color:var(--ink-1); }

/* ---------- 6. KARTLAR ---------- */
body:has(.shell) .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--card-shadow);
}
body:has(.shell) .card-head{ padding:18px 20px 0; }
body:has(.shell) .card-head h3{
  font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:-.2px; color:var(--ink-1);
}
body:has(.shell) .card-head p{ font-size:11px; color:var(--ink-3); }
body:has(.shell) .card-body{ padding:16px 20px 20px; }

/* ---------- 7. BUTONLAR ---------- */
body:has(.shell) .btn{
  background:var(--surface-3); color:var(--ink-1);
  border:1px solid transparent; border-radius:8px;
  font-size:11px; font-weight:600; padding:9px 12px;
  box-shadow:none;
}
body:has(.shell) .btn:hover{ background:var(--surface-3); }
body:has(.shell) .btn.primary{ background:var(--signal); color:var(--signal-on); }
body:has(.shell) .btn.primary:hover{ background:var(--signal-strong); }
body:has(.shell) .btn.quiet{ background:transparent; border-color:var(--line); color:var(--ink-2); }
body:has(.shell) .btn.quiet:hover{ background:var(--inset-hover); }
body:has(.shell) .btn.danger{ background:var(--danger-soft); color:var(--danger); }
body:has(.shell) .btn.danger:hover{ background:var(--danger-soft); }
body:has(.shell) .btn.sm{ padding:7px 10px; font-size:10.5px; border-radius:7px; }
body:has(.shell) .btn.block{ width:100%; }

/* ---------- 8. FORM ---------- */
body:has(.shell) .input,
body:has(.shell) select.input,
body:has(.shell) textarea.input{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  color:var(--ink-1); font-size:12px; padding:9px 11px;
  box-shadow:none;
}
body:has(.shell) .input::placeholder{ color:var(--ink-4); }
body:has(.shell) .field > .label,
body:has(.shell) label.label{ font-size:11px; font-weight:600; color:var(--ink-3); }
body:has(.shell) .hint{ font-size:10px; color:var(--ink-4); }

/* ---------- 9. TABLOLAR ---------- */
body:has(.shell) table{ border-collapse:collapse; }
body:has(.shell) th{
  font-size:10px; font-weight:600; color:var(--ink-4); text-align:left;
  padding:10px 14px; border-bottom:1px solid var(--line-soft); background:transparent;
}
body:has(.shell) td{
  font-size:12px; color:var(--ink-1); padding:13px 14px;
  border-bottom:1px solid var(--line-soft);
}
body:has(.shell) tbody tr{ transition:background .12s; }
body:has(.shell) tbody tr:hover{ background:var(--inset-hover); }
body:has(.shell) .num-cell{ font-family:var(--font-mono); font-size:11px; }

/* ---------- 10. ROZET / DURUM ---------- */
body:has(.shell) .badge{
  background:var(--surface-3); color:var(--ink-3); border:none;
  font-size:10px; font-weight:600; padding:4px 9px; border-radius:999px; gap:6px;
}
body:has(.shell) .badge .dot{ width:6px; height:6px; background:var(--ink-4); }
body:has(.shell) .badge.ok{ background:var(--ok-soft); color:var(--ok); }
body:has(.shell) .badge.ok .dot{ background:var(--ok); }
body:has(.shell) .badge.warn{ background:var(--warn-soft); color:var(--warn); }
body:has(.shell) .badge.warn .dot{ background:var(--warn); }
body:has(.shell) .badge.danger{ background:var(--danger-soft); color:var(--danger); }
body:has(.shell) .badge.danger .dot{ background:var(--danger); }

/* ---------- 11. MINI METRİKLER ---------- */
body:has(.shell) .mini-metrics{ gap:13px; }
body:has(.shell) .mini-metric{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 17px; box-shadow:none;
}
body:has(.shell) .mini-metric .k{ font-size:11px; color:var(--ink-3); font-weight:500; gap:7px; }
body:has(.shell) .mini-metric .k svg{ width:14px; height:14px; }
body:has(.shell) .mini-metric .v{
  font-family:var(--font-head); font-size:23px; font-weight:800; letter-spacing:-.5px; color:var(--ink-1);
}
body:has(.shell) .mini-metric .s{ font-size:10px; color:var(--ink-4); }

/* ---------- 12. BİLDİRİM (notice) ---------- */
body:has(.shell) .notice{ border-radius:10px; font-size:12px; border:1px solid transparent; }
body:has(.shell) .notice.warn{ background:var(--warn-soft); border-color:var(--warn-ring); color:var(--warn); }
body:has(.shell) .notice.danger{ background:var(--danger-soft); border-color:var(--danger-ring); color:var(--danger); }
body:has(.shell) .notice.signal{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
body:has(.shell) .notice .n-body b{ font-weight:700; }

/* ---------- 13. ÖLÇÜ ALETİ (meter) ---------- */
body:has(.shell) .meter-rail{ background:var(--line-soft); border-radius:999px; }
body:has(.shell) .meter-fill{ background:var(--signal); border-radius:999px; }
body:has(.shell) .meter.warn .meter-fill{ background:var(--warn); }
body:has(.shell) .meter.over .meter-fill{ background:var(--danger); }
body:has(.shell) .meter-pct{ color:var(--ink-3); }

/* ---------- 14. MODAL / TOAST / STATE ---------- */
body:has(.shell) .modal-overlay{ background:rgba(37,37,37,.36); backdrop-filter:blur(5px); }
body:has(.shell) .modal{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:28px; box-shadow:0 20px 80px rgba(40,40,40,.16);
}
body:has(.shell) .modal h2{ font-family:var(--font-head); font-size:20px; font-weight:800; letter-spacing:-.4px; color:var(--ink-1); }
body:has(.shell) .toast{
  background:var(--signal); color:var(--signal-on); border:none; border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.25); font-size:12px;
}
body:has(.shell) .state .glyph{ background:var(--surface-3); color:var(--ink-3); }
body:has(.shell) .state h4{ font-family:var(--font-head); color:var(--ink-1); }
body:has(.shell) .state p{ color:var(--ink-3); }

/* ---------- 15. SEKME / SWITCH / CODEBLOCK ---------- */
body:has(.shell) .role-tabs{
  background:var(--surface-3); border-radius:9px; padding:3px; border:none;
}
body:has(.shell) .role-tabs button{ border-radius:7px; color:var(--ink-3); font-size:11px; }
body:has(.shell) .role-tabs button[aria-selected="true"], 
body:has(.shell) .role-tabs button.active{ background:var(--surface); color:var(--ink-1); font-weight:700; box-shadow:var(--shadow-xs); }
body:has(.shell) .switch input:checked + .switch-track{ background:var(--signal); }
body:has(.shell) .codeblock, body:has(.shell) pre{
  background:#181818; color:#cbcbcb; border:1px solid #303030; border-radius:10px; font-size:11px;
}
body:has(.shell) .side-scroll, body:has(.shell) #content{ scrollbar-width:thin; scrollbar-color:#e0e0e0 transparent; }

/* ---------- 16. KARŞILAMA BANNERI (template imzası) ---------- */
body:has(.shell) .welcome-banner{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(135deg,#fdfdfd 0%,var(--line-soft) 100%);
  min-height:186px; padding:26px 30px;
  display:flex; flex-direction:column; justify-content:center;
}
body:has(.shell) .welcome-banner .eyebrow{
  font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:8px;
}
body:has(.shell) .welcome-banner h2{
  font-family:var(--font-head); font-size:25px; font-weight:800; letter-spacing:-.7px;
  color:var(--ink-1); margin:0; line-height:1.25; max-width:62%;
}
body:has(.shell) .welcome-banner p{
  font-size:11.5px; color:var(--ink-3); line-height:1.7; margin-top:8px; max-width:56%;
}
body:has(.shell) .banner-chips{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
body:has(.shell) .b-chip{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:7px 11px; font-size:11px; color:var(--ink-3);
}
body:has(.shell) .b-chip b{ color:var(--signal); font-weight:700; }
body:has(.shell) .b-chip .num{ color:var(--signal); font-weight:700; }
body:has(.shell) .banner-version{
  position:absolute; top:14px; right:16px;
  font-family:var(--font-mono); font-size:9px; color:#c3c3c3; letter-spacing:.04em;
}
body:has(.shell) .welcome-banner .head-actions{
  position:absolute; top:14px; right:16px; display:flex; gap:8px; align-items:center;
}
body:has(.shell) .welcome-banner .head-actions .banner-version{ position:static; }

/* orbital hero-art — saf CSS */
body:has(.shell) .hero-art{ position:absolute; right:34px; top:50%; transform:translateY(-50%); width:290px; height:290px; pointer-events:none; }
body:has(.shell) .hero-art .orbital{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid rgba(0,0,0,.06); border-radius:50%; }
body:has(.shell) .hero-art .orbital-one{ width:132px; height:132px; }
body:has(.shell) .hero-art .orbital-two{ width:196px; height:196px; border-color:rgba(0,0,0,.045); }
body:has(.shell) .hero-art .orbital-three{ width:262px; height:262px; border-color:rgba(0,0,0,.035); }
body:has(.shell) .hero-art .art-grid{
  position:absolute; inset:30px; border-radius:50%;
  background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
  background-size:22px 22px; opacity:.5;
  -webkit-mask-image:radial-gradient(circle,black 30%,transparent 70%);
  mask-image:radial-gradient(circle,black 30%,transparent 70%);
}
body:has(.shell) .hero-art .art-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; background:var(--signal); color:var(--signal-on);
  border-radius:16px; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
body:has(.shell) .hero-art .art-center svg{ width:24px; height:24px; }
body:has(.shell) .hero-art .art-node{
  position:absolute; width:38px; height:38px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; color:var(--ink-2);
  display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
body:has(.shell) .hero-art .art-node svg{ width:17px; height:17px; }
body:has(.shell) .hero-art .node-one{ top:8%; left:14%; }
body:has(.shell) .hero-art .node-two{ top:16%; right:8%; }
body:has(.shell) .hero-art .node-three{ bottom:12%; left:22%; }
body:has(.shell) .hero-art .node-four{ bottom:4%; right:20%; }
body:has(.shell) .hero-art .art-line{ position:absolute; height:1px; background:rgba(0,0,0,.07); transform-origin:left center; }
body:has(.shell) .hero-art .line-one{ width:88px; top:26%; left:24%; transform:rotate(24deg); }
body:has(.shell) .hero-art .line-two{ width:74px; top:58%; left:38%; transform:rotate(-18deg); }
body:has(.shell) .hero-art .line-three{ width:96px; top:40%; left:52%; transform:rotate(9deg); }
body:has(.shell) .hero-art .art-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:#d4d4d4; }
body:has(.shell) .hero-art .dot-one{ top:20%; left:52%; }
body:has(.shell) .hero-art .dot-two{ bottom:26%; left:12%; background:var(--signal); }
body:has(.shell) .hero-art .dot-three{ top:48%; right:6%; }

@media(max-width:1100px){
  body:has(.shell) .hero-art{ right:-60px; opacity:.55; }
}
@media(max-width:820px){
  body:has(.shell) .hero-art{ display:none; }
  body:has(.shell) .welcome-banner h2,
  body:has(.shell) .welcome-banner p{ max-width:100%; }
  body:has(.shell) .welcome-banner{ padding:22px; min-height:0; }
}

/* ---------- 17. SAYFA BAŞLIĞI (banner dışı view başları) ---------- */
body:has(.shell) .page-head h2{
  font-family:var(--font-head); font-size:19px; font-weight:800; letter-spacing:-.4px; color:var(--ink-1);
}
body:has(.shell) .page-head p{ font-size:11.5px; color:var(--ink-3); }

/* ---------- 18. RÖTÜŞLAR ---------- */
body:has(.shell) hr{ border-color:var(--line-soft); }
body:has(.shell) .split{ align-items:start; }
body:has(.shell) a{ text-underline-offset:3px; }
body:has(.shell) ::selection{ background:var(--signal); color:var(--signal-on); }
body:has(.shell) .vh{ position:absolute!important; clip:rect(0 0 0 0); }

/* ==========================================================================
   v3401 — EKRAN DİLİMİ DÜZELTMELERİ (breadcrumb, banner-art, kod bloğu)
   ========================================================================== */

/* --- 1. Topbar breadcrumb: tek satır, küçük ok, taşma yok --- */
body:has(.shell) .topbar .crumb-wrap{
  display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto;
}
body:has(.shell) .topbar .crumb-wrap .svgic{
  width:12px; height:12px; flex:none; color:#c9c9c9;
}
body:has(.shell) .topbar .crumb-wrap .crumb{
  flex:none; white-space:nowrap;
}
body:has(.shell) .topbar h1{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- 2. Banner sanatı: çakışma ve katman düzeni --- */
body:has(.shell) .hero-art{
  width:250px; height:250px; right:14px; opacity:.92;
}
body:has(.shell) .hero-art .art-node{
  background:rgba(255,255,255,.94);
}
body:has(.shell) .hero-art .node-one{ top:10%; left:12%; }
body:has(.shell) .hero-art .node-two{ top:24%; right:9%; }
body:has(.shell) .hero-art .node-three{ bottom:14%; left:18%; }
body:has(.shell) .hero-art .node-four{ bottom:6%; right:16%; }
/* banner metinleri sanatın üstünde */
body:has(.shell) .welcome-banner .eyebrow,
body:has(.shell) .welcome-banner h2,
body:has(.shell) .welcome-banner p,
body:has(.shell) .welcome-banner .banner-chips{
  position:relative; z-index:2;
}
/* sağ üst aksiyon kutusu: beyaz hap, sanattan bağımsız okunur */
body:has(.shell) .welcome-banner .head-actions{
  z-index:3; background:rgba(255,255,255,.92);
  border:1px solid var(--line); border-radius:10px;
  padding:6px 8px; backdrop-filter:blur(3px);
}
/* sürüm etiketi sağ alta, okunur zeminde */
body:has(.shell) .welcome-banner .banner-version{
  top:auto; bottom:12px; right:16px; z-index:2;
  background:rgba(255,255,255,.85); padding:2px 8px; border-radius:6px;
}

/* v4900 koyu: banner + hero-art + sürüm hapı */
html[data-theme="dark"] body:has(.shell) .welcome-banner{
  background:linear-gradient(135deg,#14141a 0%,#0d0d11 100%);
}
html[data-theme="dark"] body:has(.shell) .hero-art .art-node{ background:var(--surface-2); }
html[data-theme="dark"] body:has(.shell) .welcome-banner .head-actions{ background:rgba(16,16,20,.85); }
html[data-theme="dark"] body:has(.shell) .welcome-banner .banner-version{ background:rgba(16,16,20,.7); color:#8a8a94; }
html[data-theme="dark"] body:has(.shell) .hero-art .orbital{ border-color:rgba(255,255,255,.07); }
html[data-theme="dark"] body:has(.shell) .hero-art .orbital-two{ border-color:rgba(255,255,255,.05); }
html[data-theme="dark"] body:has(.shell) .hero-art .orbital-three{ border-color:rgba(255,255,255,.04); }
html[data-theme="dark"] body:has(.shell) .hero-art .art-grid{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
}
html[data-theme="dark"] body:has(.shell) .hero-art .art-line{ background:rgba(255,255,255,.08); }
html[data-theme="dark"] body:has(.shell) .hero-art .art-dot{ background:#2a2a31; }
html[data-theme="dark"] body:has(.shell) .topbar .crumb-wrap .svgic{ color:#4a4a52; }
body:has(.shell) .msearch .input{ padding-left:32px; }


/* --- 3. Kod bloğu: koyu zeminde OKUNUR token renkleri --- */
body:has(.shell) .codeblock{
  background:#181818; color:#d6d6d6;
  border:none; box-shadow:none;
}
body:has(.shell) .codeblock .c-str{ color:#8fe3b0; }
body:has(.shell) .codeblock .c-key{ color:var(--surface-3); }
body:has(.shell) .codeblock .c-com{ color:#8f8f8f; }
body:has(.shell) .codeblock .c-pun{ color:#a8a8a8; }
body:has(.shell) .codeblock .c-num{ color:#f2c07e; }
body:has(.shell) .codeblock a{ color:#bfd7ff; }
body:has(.shell) pre:not(.codeblock){
  background:#181818; color:#d6d6d6; border-color:#303030;
}

/* ==========================================================================
   v3402 — GENİŞLİK UYUMU (mini-metrik sarma + banner/sanat çakışması)
   ========================================================================== */

/* 5 kartlık metrik dizisi: sonda tek kart kalırsa tam genişliğe büyüsün
   (grid auto-fit'in "4+1 + boşluk" kırılması yerine flex-grow) */
body:has(.shell) .mini-metrics{
  display:flex; flex-wrap:wrap; gap:13px; background:none; border-radius:0; overflow:visible;
}
body:has(.shell) .mini-metric{
  flex:1 1 158px; min-width:0;
}

/* banner: geniş ekranda metin alanı sağda sanatla çakışmasın */
@media(min-width:1201px){
  body:has(.shell) .welcome-banner{ padding-right:330px; }
  body:has(.shell) .welcome-banner h2,
  body:has(.shell) .welcome-banner p{ max-width:100%; }
  body:has(.shell) .welcome-banner .banner-chips{ max-width:100%; padding-right:40px; }
}
/* 1200px ve altında sanat tamamen gizlenir: metin/rozetler serbest */
@media(max-width:1200px){
  body:has(.shell) .hero-art{ display:none !important; }
  body:has(.shell) .welcome-banner h2,
  body:has(.shell) .welcome-banner p{ max-width:100%; }
}

/* ==========================================================================
   v4400 — ROUTEWAY STANDARDI (landing + auth)
   Referans: routeway.ai görsel dili — birebir tasarım kopyası, içerik bizim.
   • Zemin #0a0a0a + indigo glow + yıldız canvas + dikey ışık çizgileri
   • Buz-mavi wordmark (#bdeffd) + camgöbeği CTA (#67e8f9) + mavi vurgu (#4468f5)
   • Yüzen eğik kartlar (görsel + token kartları)
   • Manrope (self-hosted) · kartlar #141419 · border #26262e
   Panel (shell) bu katmandan ETKİLENMEZ (sahip kararları saklı).
   ========================================================================== */

/* ---------- 1. TOKEN KÖPRÜSÜ (landing + auth) ---------- */
body:has(.landing),
body:has(.auth-split){
  --canvas:#0a0a0a;
  --surface:#141419;
  --surface-2:#101014;
  --surface-3:#1b1b21;
  --inset:#0d0d11; --inset-hover:#15151b;

  --ink-1:#f2f2f5; --ink-2:#9c9ca6; --ink-3:#6f6f7a; --ink-4:#585862;

  --line:#26262e; --line-soft:#1c1c22; --line-strong:#34343e; --line-focus:#8ff0fc;

  --signal:#67e8f9; --signal-strong:#8ff0fc;
  --signal-soft:#10262b; --signal-softer:#0c1d21;
  --signal-on:#06262b; --signal-ring:rgba(103,232,249,.35);

  --ok:#4ade80;    --ok-soft:#10241a;
  --warn:#e0a83c;  --warn-soft:#2a2008;
  --danger:#f2726a;--danger-soft:#2b1210;

  --shadow-xs:0 0 0 1px #23232b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 12px 40px rgba(0,0,0,.55);

  --font-sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-head:"Manrope",var(--font-sans);

  color-scheme:dark;
  font-family:var(--font-sans);
  color:var(--ink-2);
}
/* tema tercihi ne olursa olsun landing/auth bu eksende kalır (referans koyu) */
html[data-theme="light"] body:has(.landing),
html[data-theme="light"] body:has(.auth-split){ color-scheme:dark; }

/* ---------- 2. ODAK / SEÇİM ---------- */
body:has(.landing) :focus-visible,
body:has(.auth-split) :focus-visible{ outline:2px solid var(--line-focus); outline-offset:3px; border-radius:4px; }
body:has(.landing) ::selection,
body:has(.auth-split) ::selection{ background:#67e8f9; color:#06262b; }

/* ---------- 3. NAV ---------- */
body:has(.landing) .lnav{ background:rgba(10,10,10,.72); backdrop-filter:blur(12px); border-bottom-color:transparent; }
body:has(.landing) .lnav.stuck{ border-bottom-color:var(--line-soft); }
body:has(.landing) .brand{ color:#fff; font-weight:800; }
body:has(.landing) .lnav-links a{ color:#b9b9c3; }
body:has(.landing) .lnav-links a:hover{ color:#fff; background:rgba(255,255,255,.06); }
body:has(.landing) .lnav-cta .btn.quiet{ background:transparent; color:#d6d6de; }
body:has(.landing) .lnav-cta .btn.quiet:hover{ background:rgba(255,255,255,.07); color:#fff; }
body:has(.landing) .lnav-cta .btn.primary{ background:#fff; color:#0a0a0a; border-radius:10px; }
body:has(.landing) .lnav-cta .btn.primary:hover{ background:#e8e8ee; }

/* ---------- 4. HERO ---------- */
body:has(.landing) .hero.rw{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(1100px 520px at 50% -18%, rgba(64,58,255,.52), rgba(30,28,120,.22) 46%, transparent 72%),
    radial-gradient(700px 300px at 12% 4%, rgba(64,58,255,.20), transparent 60%),
    radial-gradient(700px 300px at 88% 4%, rgba(64,58,255,.20), transparent 60%),
    #0a0a0a;
  padding:clamp(72px,10vw,128px) 0 clamp(64px,8vw,110px);
}
/* dikey ışık çizgileri */
body:has(.landing) .hero.rw::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 96px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 90%);
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 55%, transparent 90%);
}
body:has(.landing) canvas.stars{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
body:has(.landing) .hero-in{ position:relative; z-index:2; grid-template-columns:1fr; justify-items:center; }
body:has(.landing) .hero-copy{ max-width:880px; display:flex; flex-direction:column; align-items:center; }

body:has(.landing) .wordmark{
  font-family:var(--font-head);
  font-size:clamp(64px,11.5vw,164px);
  line-height:.98; letter-spacing:-.02em; font-weight:300;
  color:#bdeffd;
  text-shadow:0 0 24px rgba(143,240,252,.28), 0 0 90px rgba(103,232,249,.22);
  margin:0 0 var(--sp-4);
}
body:has(.landing) .hero-lead{ color:#9c9ca6; font-size:clamp(15px,1.4vw,18px); max-width:56ch; margin:0 auto var(--sp-7); }
body:has(.landing) .hero-cta{ justify-content:center; margin-bottom:var(--sp-9); }
body:has(.landing) .hero-cta .btn{ border-radius:999px; }
body:has(.landing) .hero-cta .btn.primary{
  background:#67e8f9; color:#06262b; font-weight:700;
  box-shadow:0 0 0 1px rgba(103,232,249,.4), 0 8px 40px -6px rgba(103,232,249,.45);
}
body:has(.landing) .hero-cta .btn.primary:hover{ background:#8ff0fc; }
body:has(.landing) .hero-cta .btn:not(.primary){
  background:#17171c; color:#f2f2f5; border:1px solid #2a2a31;
}
body:has(.landing) .hero-cta .btn:not(.primary):hover{ background:#1f1f26; }

/* stat kartları */
body:has(.landing) .hero-stats{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
body:has(.landing) .stat-card{
  width:290px; text-align:left;
  background:rgba(13,13,17,.72); border:1px solid #232329; border-radius:14px;
  padding:22px 24px; display:flex; flex-direction:column; gap:2px;
  backdrop-filter:blur(6px);
}
body:has(.landing) .stat-card .k{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a8a93; margin-bottom:8px; }
body:has(.landing) .stat-card .v{ font-size:44px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1; }
body:has(.landing) .stat-card .s{ font-size:14px; font-weight:600; color:#e6e6ec; margin-top:4px; }
body:has(.landing) .stat-card .s2{ font-size:11.5px; color:#77777f; margin-top:6px; }

/* ---------- 5. YÜZEN KARTLAR ---------- */
body:has(.landing) .rw-float{ position:absolute; z-index:1; pointer-events:none; }
body:has(.landing) .rw-float img{
  display:block; width:250px; height:250px; object-fit:cover;
  border-radius:20px; border:1px solid #2a2a2e;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
body:has(.landing) .f-cosmos{ top:64px; left:4%; transform:rotate(-8deg); }
body:has(.landing) .f-wave{ bottom:26px; right:3%; transform:rotate(7deg); }
body:has(.landing) .tokcard{
  width:280px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(160deg,#e3e3e3,#c9c9cb);
  color:#3c3c40; box-shadow:0 24px 60px -18px rgba(0,0,0,.75);
}
body:has(.landing) .tokcard p{
  font-size:11.5px; line-height:1.55; color:#4a4a4f; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
body:has(.landing) .tokcard .tk-row{ display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:#6d6d72; }
body:has(.landing) .f-tok-a{ top:96px; right:6%; transform:rotate(6deg); }
body:has(.landing) .f-tok-b{ bottom:120px; left:5%; transform:rotate(-7deg); }
@media (max-width:1200px){
  body:has(.landing) .f-cosmos{ left:-70px; } body:has(.landing) .f-wave{ right:-70px; }
  body:has(.landing) .f-tok-a{ right:-40px; } body:has(.landing) .f-tok-b{ left:-40px; }
}
@media (max-width:900px){ body:has(.landing) .rw-float{ display:none; } }

/* ---------- 6. LOGO DUVARI ---------- */
body:has(.landing) .logos-sec{ padding:clamp(56px,7vw,88px) 0; background:#0a0a0a; }
body:has(.landing) .logo-wall{ display:flex; flex-direction:column; gap:26px; align-items:center; margin-bottom:clamp(40px,5vw,64px); }
body:has(.landing) .lw-row{ display:flex; gap:clamp(28px,4vw,56px); align-items:center; justify-content:center; flex-wrap:wrap; }
body:has(.landing) .lw-ic{ display:inline-flex; filter:grayscale(1) brightness(1.9); opacity:.55; transition:opacity .2s, filter .2s; }
body:has(.landing) .lw-ic:hover{ opacity:.95; filter:grayscale(0) brightness(1); }
body:has(.landing) .lw-ic svg{ width:22px; height:22px; }
body:has(.landing) .sec-head.center{ text-align:center; margin-inline:auto; }
body:has(.landing) .sec-head.center h2{ color:#fff; }

/* ---------- 7. BÖLÜMLER ---------- */
body:has(.landing) .sec{ background:#0a0a0a; }
body:has(.landing) .sec.alt{ background:#0b0b0e; border-block:1px solid var(--line-soft); }
body:has(.landing) .glow-purple{
  background:
    radial-gradient(1000px 560px at 50% 42%, rgba(84,62,255,.22), transparent 70%),
    #0b0b0e;
}
body:has(.landing) .sec-head h2{ color:#fff; }
body:has(.landing) .sec-head p{ color:#9c9ca6; }
body:has(.landing) .eyebrow{ color:#8ff0fc; }

/* masonry (referansın tanıklık ızgarası) */
body:has(.landing) .masonry{ columns:3; column-gap:16px; }
@media (max-width:1100px){ body:has(.landing) .masonry{ columns:2; } }
@media (max-width:760px){ body:has(.landing) .masonry{ columns:1; } }
body:has(.landing) .m-card{
  break-inside:avoid; margin:0 0 16px;
  background:rgba(20,20,26,.78); border:1px solid #26262e; border-radius:14px;
  padding:20px 20px 22px;
}
body:has(.landing) .m-card h3{ color:#f2f2f5; font-size:15px; font-weight:800; margin:12px 0 6px; }
body:has(.landing) .m-card p{ color:#9c9ca6; font-size:13px; line-height:1.65; }
body:has(.landing) .feat-ic{
  width:36px; height:36px; border-radius:10px;
  background:rgba(103,232,249,.10); color:#8ff0fc; display:grid; place-items:center;
}
body:has(.landing) .feat-ic .svgic{ width:17px; height:17px; }

/* ---------- 8. SHIP (console) BÖLMESİ ---------- */
body:has(.landing) .ship{ align-items:center; }
body:has(.landing) .ship-copy h2{ font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; color:#fff; margin-bottom:var(--sp-4); }
body:has(.landing) .ship-copy h2 .accent{ color:#8ff0fc; text-decoration:none; }
body:has(.landing) .ship-copy > p{ color:#9c9ca6; font-size:14.5px; line-height:1.7; margin-bottom:var(--sp-6); max-width:46ch; }
body:has(.landing) .checks{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
body:has(.landing) .checks li{ display:flex; gap:12px; align-items:flex-start; }
body:has(.landing) .checks li > .svgic{ flex:none; width:18px; height:18px; color:#4ade80; margin-top:2px; }
body:has(.landing) .checks b{ display:block; color:#f2f2f5; font-size:13.5px; font-weight:700; }
body:has(.landing) .checks li > div > span{ display:block; color:#8a8a93; font-size:12.5px; margin-top:2px; }

/* konsol kartı — koyu zemin cila */
body:has(.landing) .console{ background:#101014; border-color:#26262e; border-radius:16px; box-shadow:0 30px 90px -30px rgba(0,0,0,.9); }
body:has(.landing) .con-head{ background:#0c0c10; border-bottom-color:#1e1e25; }
body:has(.landing) .con-title{ color:#9c9ca6; }
body:has(.landing) .con-live{ color:#77777f; }
body:has(.landing) .con-line .m{ color:#e8e8ee; }
body:has(.landing) .con-line .tk{ color:#8ff0fc; }
body:has(.landing) .con-foot{ background:#0c0c10; border-top-color:#1e1e25; }
body:has(.landing) .con-count .v{ color:#fff; }

/* ---------- 9. KART / TABLO / FİYAT BANDI ---------- */
body:has(.landing) .card,
body:has(.landing) .band{ background:#101014; border:1px solid #232329; box-shadow:none; }
body:has(.landing) .band-row:not(.head):hover{ background:#17171c; }
body:has(.landing) .band-row .num{ color:#f2f2f5; }
body:has(.landing) .band-row .resmi{ color:#6f6f7a; }
body:has(.landing) .band-row .bizde{ color:#8ff0fc; }
body:has(.landing) .band-note{ color:#77777f; }
body:has(.landing) .band-chip{ background:#17171c; color:#c9c9d2; }
body:has(.landing) .card-head h3{ color:#f2f2f5; }

/* model kolonları */
body:has(.landing) .model-cols .model-col{ background:#101014; border-color:#232329; }
body:has(.landing) .model-row{ border-color:#1c1c22; }
body:has(.landing) .model-row:hover{ background:#17171c; }

/* ---------- 10. PAKETLER: ortadaki mavi vurgulu ---------- */
body:has(.landing) .pack{ background:#101014; border:1px solid #232329; border-radius:16px; }
body:has(.landing) .pack-grid{ align-items:stretch; }
body:has(.landing) .pack-grid .pack:nth-child(2){
  position:relative; border-color:#4468f5;
  box-shadow:0 0 0 1px #4468f5, 0 24px 80px -24px rgba(68,104,245,.55);
}
body:has(.landing) .pack-grid .pack:nth-child(2)::before{
  content:"En çok tercih"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:#4468f5; color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
}
body:has(.landing) .pack .btn.primary{ background:#4468f5; color:#fff; }
body:has(.landing) .pack .btn.primary:hover{ background:#5a7bff; }

/* ---------- 11. HESAPLAYICI / FORM ---------- */
body:has(.landing) .calc-big{ color:#fff; }
body:has(.landing) input[type="range"]{ accent-color:#67e8f9; }
body:has(.landing) .input,
body:has(.auth-split) .input{
  background:#0d0d11; border:1px solid #26262e; border-radius:10px; color:#f2f2f5; box-shadow:none;
}
body:has(.landing) .input:focus-visible,
body:has(.auth-split) .input:focus-visible{ outline:none; border-color:#8ff0fc; box-shadow:0 0 0 3px rgba(103,232,249,.18); }
body:has(.landing) label.label,
body:has(.auth-split) label.label{ color:#9c9ca6; }
body:has(.landing) .notice.signal{ background:#101014; border-color:#26262e; color:#9c9ca6; }

/* ---------- 12. KOD BLOĞU ---------- */
body:has(.landing) .codeblock{ background:#0d0d11; border:1px solid #26262e; color:#d6d6d6; border-radius:12px; }
body:has(.landing) .codeblock .c-str{ color:#8fe3b0; }
body:has(.landing) .codeblock .c-key{ color:#ececec; }
body:has(.landing) .codeblock .c-com{ color:#8f8f8f; }
body:has(.landing) .codeblock .c-pun{ color:#a8a8a8; }
body:has(.landing) .codeblock .c-num{ color:#f2c07e; }

/* ---------- 13. SSS ---------- */
body:has(.landing) .faq{ background:#101014; border:1px solid #232329; border-radius:12px; }
body:has(.landing) .faq summary{ color:#e6e6ec; font-weight:600; }
body:has(.landing) .faq details[open] summary{ color:#fff; }
body:has(.landing) .faq .badge{ background:#17171c; color:#9c9ca6; }

/* ---------- 14. WHATSAPP / ÜYE OL ---------- */
body:has(.landing) .su-copy h2{ color:#fff; }
body:has(.landing) .su-ic{ background:#17171c; color:#8ff0fc; }
body:has(.auth-split) .su-ic{ background:#17171c; color:#8ff0fc; }
body:has(.landing) .auth-card, body:has(.landing) .su-card{ background:#101014; border-color:#232329; }

/* ---------- 15. FİNAL CTA ---------- */
body:has(.landing) .cta-final{ position:relative; overflow:hidden; background:
  radial-gradient(900px 420px at 50% 118%, rgba(64,58,255,.4), transparent 70%), #0a0a0a; }
body:has(.landing) .cta-final .container{ background:transparent; border:none; box-shadow:none; padding:clamp(64px,9vw,120px) 24px; }
body:has(.landing) .cta-final .container::before{ content:none; }
body:has(.landing) .cta-final h2{ color:#fff; }
body:has(.landing) .cta-final p{ color:#9c9ca6; }
body:has(.landing) .cta-final .btn{ border-radius:999px; }
body:has(.landing) .cta-final .btn.primary{ background:#67e8f9; color:#06262b; font-weight:700; box-shadow:0 8px 40px -6px rgba(103,232,249,.45); }
body:has(.landing) .cta-final .btn.primary:hover{ background:#8ff0fc; }
body:has(.landing) .cta-final .btn:not(.primary){ background:#17171c; color:#f2f2f5; border:1px solid #2a2a31; }

/* ---------- 16. FOOTER ---------- */
body:has(.landing) .lfoot{ background:#050507; border-top:1px solid #1c1c22; }
body:has(.landing) .lfoot a, body:has(.landing) .lfoot button{ color:#8a8a93; }
body:has(.landing) .lfoot a:hover, body:has(.landing) .lfoot button:hover{ color:#fff; }
body:has(.landing) .copy{ color:#6f6f7a; }

/* ---------- 17. GİRİŞ / KAYIT ---------- */
body:has(.auth-split) .auth-main{ background:#0a0a0a; }
body:has(.auth-split) .auth-aside{ background:#0a0a0a; border-right:1px solid #1c1c22; }
body:has(.auth-split) .auth-card{ background:#101014; border:1px solid #232329; border-radius:16px; box-shadow:var(--shadow-md); padding:26px; }
body:has(.auth-split) h2, body:has(.auth-split) .auth-head h1{ color:#fff; }
body:has(.auth-split) .auth-quote{ color:#9c9ca6; }
body:has(.auth-split) .auth-quote h2{ color:#bdeffd; }
body:has(.auth-split) .auth-head p{ color:#77777f; }
body:has(.auth-split) .auth-alt{ color:#77777f; }
body:has(.auth-split) .auth-alt button{ color:#8ff0fc; }
body:has(.auth-split) .role-tabs{ background:#17171c; }
body:has(.auth-split) .role-tabs button{ color:#8a8a93; }
body:has(.auth-split) .role-tabs button[aria-selected="true"],
body:has(.auth-split) .role-tabs button.active{ background:#23232b; color:#fff; }
body:has(.auth-split) .btn.primary{ background:#67e8f9; color:#06262b; font-weight:700; }
body:has(.auth-split) .btn.primary:hover{ background:#8ff0fc; }
body:has(.auth-split) .eco-chip{ background:#141419; border-color:#26262e; }
body:has(.auth-split) .eco-name{ color:#9c9ca6; }
body:has(.auth-split) .eco-cap{ color:#6f6f7a; }
body:has(.auth-split) .pw-toggle{ color:#77777f; }
body:has(.auth-split) .pw-toggle:hover{ background:#1b1b21; color:#fff; }
body:has(.auth-split) .auth-top-r{ color:#6f6f7a; }
body:has(.auth-split) .btn.ghost{ background:transparent; border:1px solid #2a2a31; color:#d6d6de; }

/* ---------- 18. REVEAL + HAREKET AZALTMA ---------- */
.rv{ opacity:0; translate:0 14px; transition:opacity .35s cubic-bezier(.23,1,.32,1), translate .35s cubic-bezier(.23,1,.32,1); }
.rv-in{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; translate:0 0; transition:none; }
  body:has(.landing) .con-line{ animation:none; }
}

/* ---------- 19. v4400 ek: bilgi sayfaları (lpage) + WhatsApp ---------- */
body:has(.landing) .lpage-h{ color:#fff; }
body:has(.landing) .lpage h2{ color:#f2f2f5; margin:28px 0 8px; }
body:has(.landing) .lpage p, body:has(.landing) .lpage li{ color:#9c9ca6; line-height:1.7; }
body:has(.landing) .lpage a{ color:#8ff0fc; }
body:has(.landing) .lpage .dim{ color:#6f6f7a; }
body:has(.landing) .wa-panel h3{ color:#fff; }
body:has(.landing) .wa-panel .btn.primary,
body:has(.landing) .wa-block .btn.primary{ background:#1faf54; color:#fff; }
body:has(.landing) .wa-panel .btn.primary:hover,
body:has(.landing) .wa-block .btn.primary:hover{ background:#25d366; }

/* ---------- 20. v4500: routeway yapısal geçiş — arama, planlar, footer, modeller sayfası ---------- */
/* nav: arama çubuğu + beyaz giriş hapı */
body:has(.landing) .rw-nav{ display:flex; align-items:center; gap:18px; }
body:has(.landing) .rw-search{ position:relative; flex:1; max-width:420px; display:flex; align-items:center; gap:9px;
  background:#2727d8; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:8px 14px; color:#e6e6ff; }
body:has(.landing) .rw-search:focus-within{ border-color:rgba(255,255,255,.32); box-shadow:0 0 0 3px rgba(96,92,255,.35); }
body:has(.landing) .rw-search svg{ width:16px; height:16px; opacity:.85; flex:none; }
body:has(.landing) .rw-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; font:500 14px/1 "Plex Sans",sans-serif; }
body:has(.landing) .rw-search input::placeholder{ color:rgba(230,230,255,.72); }
body:has(.landing) .rw-search input::-webkit-search-cancel-button{ display:none; }
body:has(.landing) .rw-search .kbd{ font:600 11px/1 var(--mono,ui-monospace,monospace); border:1px solid rgba(255,255,255,.3); border-radius:6px; padding:3px 6px; color:rgba(255,255,255,.75); flex:none; }
body:has(.landing) .rw-drop{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60; background:#101014;
  border:1px solid #232329; border-radius:14px; padding:6px; box-shadow:0 18px 44px rgba(0,0,0,.55); max-height:320px; overflow:auto; }
body:has(.landing) .rw-drop[hidden]{ display:none; }
body:has(.landing) .rw-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent;
  border:0; border-radius:10px; padding:9px 10px; color:#d6d6de; font:500 14px/1.2 "Plex Sans",sans-serif; cursor:pointer; }
body:has(.landing) .rw-item:hover{ background:#1b1b21; color:#fff; }
body:has(.landing) .rw-item svg{ width:14px; height:14px; opacity:.6; }
body:has(.landing) .rw-empty{ padding:10px; color:#8a8a94; font-size:13.5px; }
body:has(.landing) .rw-empty button{ background:none; border:0; color:#8ff0fc; cursor:pointer; font:inherit; padding:0; }
body:has(.landing) .rw-nav .lnav-cta .btn.primary{ background:#fff; color:#0a0a0a; border:0; }
body:has(.landing) .rw-nav .lnav-cta .btn.primary:hover{ background:#e6e6ea; }
@media (max-width:900px){ body:has(.landing) .rw-search{ display:none; } }

/* planlar: toggle + 3 kart (ortadaki mavi, glow'lu) */
body:has(.landing) .plans-sec{ position:relative; overflow:hidden; }
body:has(.landing) .plans-sec::before{ content:""; position:absolute; inset:auto 0 -40%; height:120%;
  background:radial-gradient(60% 70% at 50% 100%, rgba(64,58,255,.28), transparent 70%); pointer-events:none; }
body:has(.landing) .plan-toggle{ display:flex; justify-content:center; gap:4px; margin:22px 0 34px; position:relative; z-index:1; }
body:has(.landing) .pl-t{ background:#141419; border:1px solid #232329; color:#9c9ca6; border-radius:999px;
  padding:9px 20px; font:600 13.5px/1 "Plex Sans",sans-serif; cursor:pointer; }
body:has(.landing) .pl-t.active{ background:#4468f5; border-color:#4468f5; color:#fff; }
body:has(.landing) .plan-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; position:relative; z-index:1; }
body:has(.landing) .plan{ position:relative; background:#101014; border:1px solid #232329; border-radius:18px; padding:28px 26px;
  display:flex; flex-direction:column; gap:16px; }
body:has(.landing) .plan.hi{ background:linear-gradient(180deg, #161c3d, #10131f); border-color:#3d5ae8;
  box-shadow:0 0 0 1px rgba(97,127,247,.35), 0 22px 60px rgba(50,72,220,.28); }
body:has(.landing) .plan-badge{ position:absolute; top:-12px; left:50%; translate:-50% 0; background:#4468f5; color:#fff;
  font:700 11.5px/1 "Plex Sans",sans-serif; letter-spacing:.04em; border-radius:999px; padding:7px 14px; white-space:nowrap; }
body:has(.landing) .plan-name{ margin:0; font:600 15px/1 "Plex Sans",sans-serif; letter-spacing:.02em; color:#c9c9d1; text-transform:uppercase; }
body:has(.landing) .plan-price{ display:flex; align-items:baseline; gap:4px; color:#fff; }
body:has(.landing) .plan-price .cur{ font-size:22px; font-weight:500; color:#9c9ca6; }
body:has(.landing) .plan-price .amt{ font-size:52px; font-weight:650; letter-spacing:-.02em; }
body:has(.landing) .plan-price .per{ font-size:14px; color:#8a8a94; margin-left:6px; }
body:has(.landing) .plan-feats{ list-style:none; margin:0; padding:0; display:grid; gap:10px; flex:1; }
body:has(.landing) .plan-feats li{ display:flex; align-items:flex-start; gap:9px; color:#b9b9c2; font-size:14.5px; line-height:1.45; }
body:has(.landing) .plan-feats svg{ width:16px; height:16px; color:#8ff0fc; flex:none; margin-top:2px; }
body:has(.landing) .plan .btn.full{ width:100%; justify-content:center; }
body:has(.landing) .plan .btn.ghost{ background:transparent; border:1px solid #2a2a31; color:#d6d6de; }
body:has(.landing) .plan.hi .btn.primary{ background:#67e8f9; color:#06262b; border:0; }
body:has(.landing) .plan.hi .btn.primary:hover{ background:#8ff0fc; }
body:has(.landing) .payg-note{ margin:26px auto 0; max-width:760px; text-align:center; color:#6f6f7a; font-size:13.5px; line-height:1.65; position:relative; z-index:1; }
body:has(.landing) .payg-note b{ color:#9c9ca6; font-weight:600; }
body:has(.landing) .linklike{ background:none; border:0; color:#8ff0fc; cursor:pointer; font:inherit; padding:0; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:960px){ body:has(.landing) .plan-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

/* routeway 4 kolonlu footer */
body:has(.landing) .lfoot.rw{ border-top:1px solid #17171c; padding:56px 0 26px; }
body:has(.landing) .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
body:has(.landing) .fb-mark{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:17px; }
body:has(.landing) .fb-desc{ margin:14px 0 16px; max-width:300px; color:#77777f; font-size:14px; line-height:1.65; }
body:has(.landing) .fb-wa{ color:#9c9ca6; font-size:13.5px; text-decoration:none; border:1px solid #232329; border-radius:999px; padding:8px 14px; display:inline-block; }
body:has(.landing) .fb-wa:hover{ color:#fff; border-color:#3a3a42; }
body:has(.landing) .foot-col h4{ margin:0 0 16px; color:#fff; font:650 13.5px/1 "Plex Sans",sans-serif; }
body:has(.landing) .foot-col button, body:has(.landing) .foot-col a{ display:block; background:none; border:0; padding:0 0 11px;
  color:#77777f; font:500 14px/1 "Plex Sans",sans-serif; text-align:left; cursor:pointer; text-decoration:none; }
body:has(.landing) .foot-col button:hover, body:has(.landing) .foot-col a:hover{ color:#fff; }
body:has(.landing) .foot-bottom{ margin-top:44px; padding-top:20px; border-top:1px solid #141418; color:#55555e; font-size:13px; }
@media (max-width:900px){ body:has(.landing) .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ body:has(.landing) .foot-grid{ grid-template-columns:1fr; } }

/* #/modeller sayfa başlığı */
body:has(.landing) .page-hero{ position:relative; padding:170px 0 70px; text-align:left; overflow:hidden; }
body:has(.landing) .page-hero::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(58% 80% at 50% -10%, rgba(64,58,255,.4), transparent 72%); pointer-events:none; }
body:has(.landing) .page-hero h1{ margin:14px 0 14px; font:550 clamp(34px, 5vw, 54px)/1.08 "Plex Sans",sans-serif; letter-spacing:-.02em; color:#fff; }
body:has(.landing) .page-hero h1 .accent{ color:#8ff0fc; }
body:has(.landing) .page-hero p{ margin:0; max-width:640px; color:#9c9ca6; font-size:17px; line-height:1.65; }

/* ---------- 21. v4600: index baştan — routeway birebir ---------- */
body:has(.landing) .rw2 .sec{ padding:88px 0; }
/* hero */
body:has(.landing) .rw2-hero{ position:relative; overflow:hidden; padding:150px 0 76px; text-align:center;
  background:
    radial-gradient(72% 58% at 50% -6%, rgba(64,62,255,.46), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 120px),
    #0a0a0a; }
body:has(.landing) .rw2-hero canvas.stars{ position:absolute; inset:0; width:100%; height:100%; }
body:has(.landing) .rw2-hero-in{ position:relative; z-index:2; }
body:has(.landing) .rw2-mark{ margin:0; font:300 clamp(72px,11.5vw,158px)/1.05 "Plex Sans",sans-serif; letter-spacing:-.02em; color:#bdeffd;
  text-shadow:0 0 34px rgba(140,220,255,.42), 0 0 90px rgba(90,160,255,.28); }
body:has(.landing) .rw2-sub{ margin:18px auto 26px; max-width:560px; color:#9c9ca6; font-size:16px; }
body:has(.landing) .rw2-cta{ display:flex; gap:12px; justify-content:center; }
body:has(.landing) .rw2-cta .btn{ border-radius:999px; padding:11px 20px; font-size:14px; }
body:has(.landing) .rw2-cta .btn.primary{ background:#67e8f9; color:#06262b; border:0; font-weight:700; }
body:has(.landing) .rw2-cta .btn.primary:hover{ background:#8ff0fc; }
body:has(.landing) .rw2-cta .btn.quiet{ background:#141419; border:1px solid #2a2a31; color:#d6d6de; }
body:has(.landing) .rw2-stats{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:44px; }
body:has(.landing) .rw2-stat{ width:290px; text-align:left; background:rgba(13,13,17,.72); border:1px solid #232329;
  border-radius:14px; padding:20px 24px; display:flex; flex-direction:column; gap:2px; backdrop-filter:blur(6px); }
body:has(.landing) .rw2-stat .lbl{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a8a93; margin-bottom:8px; }
body:has(.landing) .rw2-stat .big{ font-size:42px; font-weight:700; letter-spacing:-.02em; color:#fff; line-height:1; }
body:has(.landing) .rw2-stat .s1{ font-size:14px; font-weight:600; color:#e6e6ec; margin-top:4px; }
body:has(.landing) .rw2-stat .s2{ font-size:11.5px; color:#77777f; margin-top:6px; }
/* ortak başlık dili */
body:has(.landing) .rw2-h2{ margin:0 0 10px; text-align:center; color:#fff; font:600 clamp(24px,3vw,32px)/1.2 "Plex Sans",sans-serif; letter-spacing:-.01em; }
body:has(.landing) .rw2-p{ margin:0 auto 26px; max-width:620px; text-align:center; color:#8a8a94; font-size:15px; line-height:1.6; }
/* logo duvarı */
body:has(.landing) .rw2-logos{ padding:44px 0 84px; text-align:center; }
body:has(.landing) .rw2-logos .logo-wall{ margin-bottom:44px; }
body:has(.landing) .rw2-logos .btn{ border-radius:999px; }
/* planlar */
body:has(.landing) .rw2-plans{ position:relative; overflow:hidden; }
body:has(.landing) .rw2-plans::before{ content:""; position:absolute; left:50%; top:-30%; width:140%; height:90%; translate:-50% 0;
  background:radial-gradient(58% 74% at 50% 26%, rgba(64,66,255,.55), transparent 74%); pointer-events:none; }
body:has(.landing) .rw2-plans .container{ position:relative; z-index:1; }
body:has(.landing) .rw2-plans .plan-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
body:has(.landing) .rw2-plan{ position:relative; background:rgba(12,12,16,.85); border:1px solid #232329; border-radius:16px;
  padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
body:has(.landing) .rw2-plan h3{ margin:0; color:#e6e6ea; font:600 15px/1 "Plex Sans",sans-serif; }
body:has(.landing) .rw2-plan .price{ display:flex; align-items:baseline; gap:3px; color:#fff; }
body:has(.landing) .rw2-plan .price .cur{ font-size:18px; color:#9c9ca6; }
body:has(.landing) .rw2-plan .price .amt{ font-size:38px; font-weight:700; letter-spacing:-.02em; }
body:has(.landing) .rw2-plan .price .per{ font-size:12.5px; color:#77777f; margin-left:4px; }
body:has(.landing) .rw2-plan .desc{ margin:0; color:#8a8a94; font-size:13px; line-height:1.55; min-height:40px; }
body:has(.landing) .rw2-plan .sep{ height:1px; background:#1e1e24; margin:4px 0; }
body:has(.landing) .rw2-plan .feats{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
body:has(.landing) .rw2-plan .feats li{ display:flex; gap:9px; align-items:flex-start; color:#9c9ca6; font-size:12.5px; line-height:1.5; }
body:has(.landing) .rw2-plan .feats svg{ width:12px; height:12px; color:#6f79f0; flex:none; margin-top:2px; }
body:has(.landing) .rw2-plan .btn.full{ width:100%; justify-content:center; border-radius:10px; padding:10px 14px; font-size:13.5px; }
body:has(.landing) .rw2-plan .btn.ghost{ background:transparent; border:1px solid #2a2a31; color:#d6d6de; }
body:has(.landing) .rw2-plan .btn.blue{ background:#3e63f4; border:0; color:#fff; font-weight:700; }
body:has(.landing) .rw2-plan .btn.blue:hover{ background:#5376ff; }
body:has(.landing) .rw2-plan.hi{ background:linear-gradient(180deg,#141a3a,#0e1120); border-color:#3d5ae8;
  box-shadow:0 0 0 1px rgba(97,127,247,.35), 0 22px 60px rgba(50,72,220,.3); }
body:has(.landing) .rw2-plan .badge{ position:absolute; top:-12px; left:50%; translate:-50% 0; background:#3e63f4; color:#fff;
  font:700 11px/1 "Plex Sans",sans-serif; letter-spacing:.04em; border-radius:999px; padding:6px 13px; white-space:nowrap; }
body:has(.landing) .rw2-payg{ display:block; margin:26px auto 0; color:#8a8a94; font-size:13px; }
@media (max-width:960px){ body:has(.landing) .rw2-plans .plan-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
/* özellik kartları (tanıklık dili) */
body:has(.landing) .rw2-quotes{ position:relative; overflow:hidden; }
body:has(.landing) .rw2-quotes::before{ content:""; position:absolute; inset:10% -20%; background:radial-gradient(45% 50% at 30% 45%, rgba(96,64,255,.22), transparent 70%), radial-gradient(45% 50% at 75% 60%, rgba(150,60,240,.16), transparent 70%); pointer-events:none; }
body:has(.landing) .rw2-quotes .container{ position:relative; z-index:1; }
body:has(.landing) .rw2-masonry{ columns:3; column-gap:14px; }
body:has(.landing) .q-card{ break-inside:avoid; margin:0 0 14px; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px; }
body:has(.landing) .q-card.t1{ background:rgba(88,80,255,.13); border:1px solid rgba(120,112,255,.26); }
body:has(.landing) .q-card.t2{ background:rgba(18,18,24,.72); border:1px solid #232329; }
body:has(.landing) .q-card.t3{ background:rgba(150,70,240,.11); border:1px solid rgba(170,110,255,.24); }
body:has(.landing) .q-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:#8ff0fc; }
body:has(.landing) .q-ic svg{ width:15px; height:15px; }
body:has(.landing) .q-card p{ margin:0; color:#c9c9d2; font-size:13.5px; line-height:1.62; }
body:has(.landing) .q-ft{ color:#6f6f7a; font-size:11px; letter-spacing:.02em; }
@media (max-width:960px){ body:has(.landing) .rw2-masonry{ columns:2; } }
@media (max-width:640px){ body:has(.landing) .rw2-masonry{ columns:1; } }
/* SSS */
body:has(.landing) .rw2-acc{ max-width:760px; margin:0 auto; }
body:has(.landing) .rw2-acc details{ background:#101014; border:1px solid #1d1d24; border-radius:12px; margin-bottom:10px; overflow:hidden; }
body:has(.landing) .rw2-acc summary{ display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer;
  list-style:none; padding:15px 18px; color:#e6e6ea; font-size:14px; font-weight:500; }
body:has(.landing) .rw2-acc summary::-webkit-details-marker{ display:none; }
body:has(.landing) .rw2-acc summary .pl{ width:15px; height:15px; color:#8a8a94; flex:none; transition:transform .25s; }
body:has(.landing) .rw2-acc details[open] summary .pl{ transform:rotate(45deg); }
body:has(.landing) .rw2-acc .a{ padding:0 18px 16px; color:#9c9ca6; font-size:13.5px; line-height:1.65; }

/* ---------- 22. v4700: model tarayıcı (routeway models) ---------- */
body:has(.models-page) .rw-search{ background:#141419; border-color:#232329; }
body:has(.models-page) .rw-search input{ color:#e6e6ea; }
body:has(.models-page) .mb-sec{ padding:100px 0 40px; }
body:has(.models-page) .mb-wrap{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:36px; align-items:start; }
/* sidebar */
body:has(.models-page) .mb-side{ position:sticky; top:84px; max-height:calc(100vh - 108px); overflow:auto;
  border:1px solid #1d1d24; border-radius:14px; padding:18px 16px; background:#0c0c0f; scrollbar-width:thin; }
body:has(.models-page) .mb-g{ margin-bottom:22px; }
body:has(.models-page) .mb-g:last-child{ margin-bottom:4px; }
body:has(.models-page) .mb-g h5{ margin:0 0 10px; color:#6f6f7a; font:700 10px/1 "Plex Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
body:has(.models-page) .mb-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%;
  background:none; border:0; border-radius:8px; padding:7px 8px; color:#9c9ca6; font:500 13px/1.2 "Plex Sans",sans-serif; cursor:pointer; text-align:left; }
body:has(.models-page) .mb-row:hover{ background:#15151a; color:#fff; }
body:has(.models-page) .mb-row.on{ background:#1b1b22; color:#fff; }
body:has(.models-page) .mb-row .n{ color:#55555e; font-size:11px; }
/* üst araçlar */
body:has(.models-page) .mb-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:22px; }
body:has(.models-page) .mb-head h1{ margin:0 0 6px; color:#fff; font:700 26px/1.1 "Plex Sans",sans-serif; letter-spacing:-.01em; }
body:has(.models-page) .mb-head p{ margin:0; color:#8a8a94; font-size:14px; }
body:has(.models-page) .mb-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
body:has(.models-page) .mb-search{ display:flex; align-items:center; gap:8px; width:280px; background:#101014;
  border:1px solid #232329; border-radius:10px; padding:9px 12px; }
body:has(.models-page) .mb-search:focus-within{ border-color:#3a3a44; }
body:has(.models-page) .mb-search svg{ width:14px; height:14px; color:#6f6f7a; flex:none; }
body:has(.models-page) .mb-search input{ flex:1; min-width:0; background:none; border:0; outline:0; color:#e6e6ea; font:500 13px/1 "Plex Sans",sans-serif; }
body:has(.models-page) .mb-search input::placeholder{ color:#6f6f7a; }
body:has(.models-page) .mb-sort{ position:relative; }
body:has(.models-page) .mb-sort select{ appearance:none; background:#101014; border:1px solid #232329; border-radius:10px;
  color:#d6d6de; font:600 13px/1 "Plex Sans",sans-serif; padding:10px 34px 10px 14px; cursor:pointer; outline:0; }
body:has(.models-page) .mb-sort .chev{ position:absolute; right:12px; top:50%; translate:0 -50%; width:14px; height:14px; color:#6f6f7a; pointer-events:none; }
body:has(.models-page) .mb-views{ display:flex; gap:6px; }
body:has(.models-page) .mv{ width:38px; height:38px; display:grid; place-items:center; background:#101014; border:1px solid #232329;
  border-radius:10px; color:#8a8a94; cursor:pointer; }
body:has(.models-page) .mv svg{ width:15px; height:15px; }
body:has(.models-page) .mv.active{ background:#1b1b22; border-color:#3a3a44; color:#fff; }
/* chips */
body:has(.models-page) .mb-chips{ display:flex; gap:10px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid #17171c; margin-bottom:22px; }
body:has(.models-page) .mb-chip{ background:transparent; border:1px solid #232329; border-radius:10px; color:#9c9ca6;
  font:600 13px/1 "Plex Sans",sans-serif; padding:10px 16px; cursor:pointer; }
body:has(.models-page) .mb-chip:hover{ color:#fff; border-color:#3a3a44; }
body:has(.models-page) .mb-chip.on{ background:#1b1b22; border-color:#3a3a44; color:#fff; }
/* ızgara kartları */
body:has(.models-page) .mb-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body:has(.models-page) .mb-card{ display:flex; flex-direction:column; background:#0d0d10; border:1px solid #1d1d24; border-radius:14px; overflow:hidden; }
body:has(.models-page) .mb-card:hover{ border-color:#2c2c34; }
body:has(.models-page) .mb-logo{ height:172px; display:grid; place-items:center; color:#fff; border-bottom:1px solid #1d1d24;
  background:radial-gradient(60% 80% at 50% 40%, #141419, #0d0d10); }
body:has(.models-page) .mb-logo svg{ width:84px; height:84px; }
body:has(.models-page) .mb-body{ padding:16px 18px 14px; flex:1; }
body:has(.models-page) .mb-body h3{ margin:0 0 4px; color:#fff; font:700 16px/1.25 "Plex Sans",sans-serif; }
body:has(.models-page) .mb-prov{ display:block; color:#77777f; font-size:12.5px; margin-bottom:12px; }
body:has(.models-page) .mb-tags{ display:flex; gap:6px; flex-wrap:wrap; }
body:has(.models-page) .mb-tags .tag{ background:#141419; border:1px solid #26262e; border-radius:8px; color:#9c9ca6;
  font:500 11px/1 "Plex Sans",sans-serif; padding:6px 9px; }
body:has(.models-page) .mb-tags .tag.vio{ background:rgba(124,92,255,.1); border-color:rgba(124,92,255,.38); color:#a78bfa; }
body:has(.models-page) .mb-price{ border-top:1px solid #1d1d24; padding:12px 18px; text-align:right; }
body:has(.models-page) .mb-price .p{ display:block; color:#e6e6ea; font:600 13px/1.3 "Plex Sans",sans-serif; }
body:has(.models-page) .mb-price .p.inc{ color:#a78bfa; }
body:has(.models-page) .mb-price .u{ display:block; color:#6f6f7a; font-size:11px; margin-top:2px; }
body:has(.models-page) .mb-empty{ grid-column:1/-1; padding:40px; text-align:center; color:#8a8a94; font-size:14px; }
/* liste görünümü */
body:has(.models-page) .mb-grid.list{ grid-template-columns:1fr; }
body:has(.models-page) .mb-grid.list .mb-card{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; }
body:has(.models-page) .mb-grid.list .mb-logo{ height:64px; border-bottom:0; border-right:1px solid #1d1d24; }
body:has(.models-page) .mb-grid.list .mb-logo svg{ width:30px; height:30px; }
body:has(.models-page) .mb-grid.list .mb-body{ padding:12px 16px; }
body:has(.models-page) .mb-grid.list .mb-prov{ margin-bottom:6px; }
body:has(.models-page) .mb-grid.list .mb-price{ border-top:0; border-left:1px solid #1d1d24; padding:12px 18px; }
@media (max-width:1100px){ body:has(.models-page) .mb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  body:has(.models-page) .mb-wrap{ grid-template-columns:1fr; }
  body:has(.models-page) .mb-side{ position:static; max-height:none; }
}
@media (max-width:640px){ body:has(.models-page) .mb-grid{ grid-template-columns:1fr; } }

/* ---------- 23. v4800: doküman sayfası + bayi kartı ---------- */
body:has(.docs-page) .doc-sec{ padding:120px 0 60px; }
body:has(.docs-page) .doc-wrap{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:44px; align-items:start; }
body:has(.docs-page) .doc-side{ position:sticky; top:84px; display:flex; flex-direction:column; gap:2px; }
body:has(.docs-page) .doc-side h5{ margin:0 0 10px; color:#6f6f7a; font:700 10px/1 "Plex Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
body:has(.docs-page) .doc-side button{ background:none; border:0; border-left:2px solid #1d1d24; color:#9c9ca6; text-align:left;
  font:500 13.5px/1.2 "Plex Sans",sans-serif; padding:8px 12px; cursor:pointer; }
body:has(.docs-page) .doc-side button:hover{ color:#fff; border-color:#3a3a44; }
body:has(.docs-page) .doc-head h1{ margin:0 0 10px; color:#fff; font:700 30px/1.15 "Plex Sans",sans-serif; letter-spacing:-.01em; }
body:has(.docs-page) .doc-head p{ margin:0 0 8px; max-width:640px; color:#8a8a94; font-size:15px; line-height:1.65; }
body:has(.docs-page) .doc-blk{ padding:26px 0 10px; border-top:1px solid #17171c; }
body:has(.docs-page) .doc-blk:first-of-type{ border-top:0; }
body:has(.docs-page) .doc-blk h2{ margin:0 0 14px; color:#fff; font:650 20px/1.2 "Plex Sans",sans-serif; }
body:has(.docs-page) .doc-blk p{ color:#9c9ca6; font-size:14.5px; line-height:1.7; max-width:720px; }
body:has(.docs-page) .doc-steps{ margin:0; padding-left:20px; display:grid; gap:8px; color:#9c9ca6; font-size:14.5px; line-height:1.6; }
body:has(.docs-page) .doc-steps b{ color:#e6e6ea; }
body:has(.docs-page) .doc-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
body:has(.docs-page) .doc-list li{ display:flex; gap:9px; color:#9c9ca6; font-size:14px; line-height:1.6; }
body:has(.docs-page) .doc-list svg{ width:15px; height:15px; color:#8ff0fc; flex:none; margin-top:3px; }
body:has(.docs-page) .doc-tabs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:14px; }
body:has(.docs-page) .doc-code{ border:1px solid #1d1d24; border-radius:14px; overflow:hidden; background:#0c0c0f; }
body:has(.docs-page) .dc-head{ padding:9px 14px; border-bottom:1px solid #1d1d24; color:#6f6f7a; font:600 11px/1 "Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
body:has(.docs-page) .doc-code .codeblock{ background:transparent; border:0; margin:0; padding:14px 16px; font-size:12.5px; line-height:1.7; overflow:auto; }
body:has(.docs-page) .doc-table{ border:1px solid #1d1d24; border-radius:14px; overflow:hidden; }
body:has(.docs-page) .dt-r{ display:grid; grid-template-columns:70px 1fr 1fr; gap:14px; padding:12px 16px; border-top:1px solid #1d1d24;
  color:#9c9ca6; font-size:13.5px; align-items:baseline; }
body:has(.docs-page) .dt-r:first-child{ border-top:0; }
body:has(.docs-page) .dt-r.head{ background:#101014; color:#6f6f7a; font:700 10.5px/1 "Plex Sans",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
body:has(.docs-page) .dt-r .mono{ color:#8ff0fc; }
@media (max-width:900px){ body:has(.docs-page) .doc-wrap{ grid-template-columns:1fr; } body:has(.docs-page) .doc-side{ position:static; flex-direction:row; flex-wrap:wrap; } body:has(.docs-page) .doc-side h5{ width:100%; } body:has(.docs-page) .doc-side button{ border-left:0; border:1px solid #232329; border-radius:999px; } }
/* bayi kartı */
body:has(.landing) .rw2-plan.bayi .bayi-note{ margin:0; color:#8a8a94; font-size:13px; line-height:1.6; }
body:has(.landing) .rw2-plan.bayi h3{ color:#fff; }

/* ==========================================================================
   §25 v4904 — AUTH KART: bulanık sahne üzerinde ortalanmış bölünmüş kart
   ========================================================================== */
.auth-split.auth-stage{
  display:grid; height:100dvh;
  position:relative; overflow:auto; padding:44px 16px;
  background:#0a0a0a;
}
/* bulanık "landing" sahnesi */
.auth-stage .auth-bg{
  position:fixed; inset:-30px; pointer-events:none; z-index:0;
  filter:blur(16px) brightness(.5) saturate(1.05); transform:scale(1.06);
}
.auth-stage .ab-glow{ position:absolute; inset:0; background:
  radial-gradient(1000px 480px at 50% -12%, rgba(64,58,255,.5), rgba(30,28,120,.18) 48%, transparent 72%),
  radial-gradient(600px 280px at 85% 30%, rgba(103,232,249,.06), transparent 60%); }
.auth-stage .ab-word{
  position:absolute; top:14%; left:50%; transform:translateX(-50%);
  font:200 clamp(70px,10vw,130px)/1 Manrope,system-ui,sans-serif; letter-spacing:-2px;
  color:rgba(189,239,253,.42); white-space:nowrap;
}
.auth-stage .ab-card{ position:absolute; border-radius:14px; }
.auth-stage .ab-1{ width:200px; height:112px; top:12%; left:6%; transform:rotate(-8deg);
  background:linear-gradient(160deg,#e6e6ea,#b9b9c2); opacity:.38; }
.auth-stage .ab-2{ width:240px; height:150px; bottom:12%; right:7%; transform:rotate(7deg);
  background:#101014; border:1px solid #2a2a31; }
.auth-stage .ab-1::after,.auth-stage .ab-2::after{ content:""; position:absolute; inset:14px;
  border-radius:8px; background:repeating-linear-gradient(0deg, rgba(90,90,100,.35) 0 6px, transparent 6px 18px); }

/* ortalanmış bölünmüş kart */
.auth-stage .auth-card.ac-split{
  position:relative; z-index:1; width:min(920px,100%); max-width:none; margin:auto; transform:none;
  display:grid; grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  padding:0; gap:0; border-radius:20px; overflow:hidden;
  background:#101014; border:1px solid #232329;
  box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.auth-stage .ac-art{ position:relative; min-height:560px; background:#0d0d11; }
.auth-stage .ac-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.auth-stage .ac-art-ov{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,10,14,.10) 30%, rgba(10,10,14,.82) 92%),
  linear-gradient(90deg, transparent 62%, rgba(16,16,20,.9) 100%); }
.auth-stage .ac-art-txt{ position:absolute; left:26px; right:18px; top:28px; }
.auth-stage .ac-art-ov{ background:
  linear-gradient(0deg, rgba(10,10,14,.25) 0%, transparent 40%),
  linear-gradient(180deg, rgba(10,10,14,.55) 0%, transparent 45%),
  linear-gradient(90deg, transparent 62%, rgba(16,16,20,.9) 100%); }
.auth-stage .ac-wel{ font-size:12.5px; font-weight:600; color:#d6d6de; }
.auth-stage .ac-art-txt h2{ margin:8px 0 0; font:800 27px/1.22 Manrope,system-ui,sans-serif;
  letter-spacing:-.6px; color:#fff; }
.auth-stage .ac-body{ padding:36px 40px 28px; min-width:0; display:flex; flex-direction:column; gap:18px; justify-content:center; }
.auth-stage .ac-body .auth-head{ margin:0; }
.auth-stage .ac-body .auth-head h1{ font-size:24px; letter-spacing:-.5px; }
.auth-stage .ac-body .auth-form{ gap:14px; }
.auth-stage .auth-alt{ justify-content:center; }

@media (max-width:900px){
  .auth-stage .auth-card.ac-split{ grid-template-columns:1fr; }
  .auth-stage .ac-art{ min-height:180px; }
  .auth-stage .ac-art-txt h2{ font-size:21px; }
  .auth-stage .ac-body{ padding:26px 22px 22px; }
}