/* ==========================================================================
   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 (#202020) */
  --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:#313131;
  font-size:13px;
}

/* panelde yalnız açık tema (kapsam kararı: light only) */
html[data-theme="dark"] body:has(.shell){
  --canvas:#f9f9f9; --surface:#ffffff; --surface-2:#fcfcfc; --surface-3:#f4f4f4;
  --inset:#ffffff; --inset-hover:#fafafa;
  --ink-1:#262626; --ink-2:#5b5b5b; --ink-3:#8e8e8e; --ink-4:#a6a6a6; --ink-inv:#ffffff;
  --line:#eaeaea; --line-soft:#f0f0f0; --line-strong:#dcdcdc; --line-focus:#b7b7b7;
  --signal:#202020; --signal-strong:#000; --signal-soft:#f4f4f4; --signal-softer:#fafafa;
  --signal-on:#ffffff; --signal-ring:rgba(0,0,0,.14);
  color-scheme:light;
}
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:#202020; 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:#8e8e8e; 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:#313131; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body:has(.shell) .workspace small{ font-size:10px; color:#8e8e8e; }
body:has(.shell) .nav-group{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#b3b3b3; padding:2px 4px var(--sp-2);
}
body:has(.shell) .nav-item{
  font-size:12px; color:#8e8e8e; 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:#f4f4f4; color:#313131; }
body:has(.shell) .nav-item[aria-current="page"]{
  background:#f4f4f4; color:#202020; font-weight:700; box-shadow:none;
}
body:has(.shell) .nav-item[aria-current="page"] .ic{ color:#202020; }
/* 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:#202020; }
body:has(.shell) .upgrade-card p{ font-size:10.5px; color:#8e8e8e; 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:#202020; color:#fff; }

/* ---------- 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:#b3b3b3; 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:#202020;
}
body:has(.shell) .topbar .icon-btn{
  border-radius:8px; color:#8e8e8e;
}
body:has(.shell) .topbar .icon-btn:hover{ background:#f4f4f4; color:#313131; }

/* ---------- 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:#202020;
}
body:has(.shell) .card-head p{ font-size:11px; color:#8e8e8e; }
body:has(.shell) .card-body{ padding:16px 20px 20px; }

/* ---------- 7. BUTONLAR ---------- */
body:has(.shell) .btn{
  background:#f4f4f4; color:#313131;
  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:#ececec; }
body:has(.shell) .btn.primary{ background:#202020; color:#fff; }
body:has(.shell) .btn.primary:hover{ background:#000; }
body:has(.shell) .btn.quiet{ background:transparent; border-color:var(--line); color:#5b5b5b; }
body:has(.shell) .btn.quiet:hover{ background:#fafafa; }
body:has(.shell) .btn.danger{ background:#fdf1f0; color:#c22a1e; }
body:has(.shell) .btn.danger:hover{ background:#fbe4e2; }
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:#fff; border:1px solid #e7e7e7; border-radius:8px;
  color:#313131; font-size:12px; padding:9px 11px;
  box-shadow:none;
}
body:has(.shell) .input::placeholder{ color:#b3b3b3; }
body:has(.shell) .field > .label,
body:has(.shell) label.label{ font-size:11px; font-weight:600; color:#6b6b6b; }
body:has(.shell) .hint{ font-size:10px; color:#a6a6a6; }

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

/* ---------- 10. ROZET / DURUM ---------- */
body:has(.shell) .badge{
  background:#f4f4f4; color:#6b6b6b; 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:#a3a3a3; }
body:has(.shell) .badge.ok{ background:#f0faf4; color:#15803d; }
body:has(.shell) .badge.ok .dot{ background:#16a34a; }
body:has(.shell) .badge.warn{ background:#fdf6ec; color:#b45309; }
body:has(.shell) .badge.warn .dot{ background:#d97706; }
body:has(.shell) .badge.danger{ background:#fdf1f0; color:#c22a1e; }
body:has(.shell) .badge.danger .dot{ background:#dc2626; }

/* ---------- 11. MINI METRİKLER ---------- */
body:has(.shell) .mini-metrics{ gap:13px; }
body:has(.shell) .mini-metric{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 17px; box-shadow:none;
}
body:has(.shell) .mini-metric .k{ font-size:11px; color:#8e8e8e; 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:#202020;
}
body:has(.shell) .mini-metric .s{ font-size:10px; color:#a6a6a6; }

/* ---------- 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:#fdf6ec; border-color:#f3e3c3; color:#7a5206; }
body:has(.shell) .notice.danger{ background:#fdf1f0; border-color:#f5cfcb; color:#a3251b; }
body:has(.shell) .notice.signal{ background:#f6f7f8; border-color:#e8eaee; color:#4a5561; }
body:has(.shell) .notice .n-body b{ font-weight:700; }

/* ---------- 13. ÖLÇÜ ALETİ (meter) ---------- */
body:has(.shell) .meter-rail{ background:#f0f0f0; border-radius:999px; }
body:has(.shell) .meter-fill{ background:#202020; border-radius:999px; }
body:has(.shell) .meter.warn .meter-fill{ background:#d97706; }
body:has(.shell) .meter.over .meter-fill{ background:#dc2626; }
body:has(.shell) .meter-pct{ color:#8e8e8e; }

/* ---------- 14. MODAL / TOAST / STATE ---------- */
body:has(.shell) .modal-overlay{ background:rgba(37,37,37,.36); backdrop-filter:blur(5px); }
body:has(.shell) .modal{
  background:#fff; border:1px solid #efefef; 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:#202020; }
body:has(.shell) .toast{
  background:#202020; color:#fff; border:none; border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.25); font-size:12px;
}
body:has(.shell) .state .glyph{ background:#f4f4f4; color:#8e8e8e; }
body:has(.shell) .state h4{ font-family:var(--font-head); color:#202020; }
body:has(.shell) .state p{ color:#8e8e8e; }

/* ---------- 15. SEKME / SWITCH / CODEBLOCK ---------- */
body:has(.shell) .role-tabs{
  background:#f4f4f4; border-radius:9px; padding:3px; border:none;
}
body:has(.shell) .role-tabs button{ border-radius:7px; color:#8e8e8e; font-size:11px; }
body:has(.shell) .role-tabs button[aria-selected="true"], 
body:has(.shell) .role-tabs button.active{ background:#fff; color:#202020; font-weight:700; box-shadow:var(--shadow-xs); }
body:has(.shell) .switch input:checked + .switch-track{ background:#202020; }
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%,#f5f5f5 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:#a6a6a6; margin-bottom:8px;
}
body:has(.shell) .welcome-banner h2{
  font-family:var(--font-head); font-size:25px; font-weight:800; letter-spacing:-.7px;
  color:#202020; margin:0; line-height:1.25; max-width:62%;
}
body:has(.shell) .welcome-banner p{
  font-size:11.5px; color:#8e8e8e; 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:#fff; border:1px solid var(--line); border-radius:8px;
  padding:7px 11px; font-size:11px; color:#8e8e8e;
}
body:has(.shell) .b-chip b{ color:#202020; font-weight:700; }
body:has(.shell) .b-chip .num{ color:#202020; 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:#202020; color:#fff;
  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:#fff;
  border:1px solid var(--line); border-radius:10px; color:#5b5b5b;
  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:#202020; }
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:#202020;
}
body:has(.shell) .page-head p{ font-size:11.5px; color:#8e8e8e; }

/* ---------- 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:#202020; color:#fff; }
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;
}

/* --- 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:#ececec; }
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%; }
}

/* ==========================================================================
   v3500 — LANDING + GİRİŞ SAYFALARI (aynı tasarım dili)
   Kapsam: body:has(.landing) ve body:has(.auth-split)
   ========================================================================== */

/* ---------- TOKEN KÖPRÜSÜ (landing + auth) ---------- */
body:has(.landing),
body:has(.auth-split){
  --canvas:#f9f9f9;
  --surface:#ffffff;
  --surface-2:#fcfcfc;
  --surface-3:#f4f4f4;
  --inset:#ffffff; --inset-hover:#fafafa;
  --ink-1:#262626; --ink-2:#5b5b5b; --ink-3:#8e8e8e; --ink-4:#a6a6a6;
  --line:#eaeaea; --line-soft:#f0f0f0; --line-strong:#dcdcdc; --line-focus:#b7b7b7;
  --signal:#202020; --signal-strong:#000000; --signal-soft:#f4f4f4; --signal-softer:#fafafa;
  --signal-on:#ffffff; --signal-ring:rgba(0,0,0,.14);
  --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);
  --font-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-head:"Manrope",var(--font-sans);
  --r-md:12px; --r-lg:16px; --r-xl:20px;
  font-family:var(--font-sans); color:#313131;
}
/* koyu tema tercihi olsa bile landing/açılış sayfaları açık kalır (panelle aynı karar) */
html[data-theme="dark"] body:has(.landing),
html[data-theme="dark"] body:has(.auth-split){
  --canvas:#f9f9f9; --surface:#ffffff; --surface-2:#fcfcfc; --surface-3:#f4f4f4;
  --inset:#ffffff; --ink-1:#262626; --ink-2:#5b5b5b; --ink-3:#8e8e8e; --ink-4:#a6a6a6; --ink-inv:#ffffff;
  --line:#eaeaea; --line-soft:#f0f0f0; --line-strong:#dcdcdc;
  --signal:#202020; --signal-strong:#000; --signal-soft:#f4f4f4; --signal-on:#fff;
  color-scheme:light;
}
body:has(.landing) :focus-visible,
body:has(.auth-split) :focus-visible{ outline:3px solid #b7b7b7; outline-offset:3px; border-radius:4px; }
body:has(.landing) ::selection{ background:#202020; color:#fff; }

/* ---------- TİPOGRAFİ ---------- */
body:has(.landing) .sec-head h2,
body:has(.landing) .hero h1,
body:has(.landing) .wa-panel h3,
body:has(.auth-split) h2{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; color:#202020;
}
body:has(.landing) .hero h1{ font-size:clamp(38px,5vw,56px); line-height:1.06; letter-spacing:-.035em; }
body:has(.landing) .sec-head h2{ font-size:clamp(26px,3.2vw,36px); }
body:has(.landing) .hero-lead{ color:#6b6b6b; font-size:15px; line-height:1.75; }
body:has(.landing) .eyebrow,
body:has(.auth-split) .eyebrow{
  font-family:var(--font-sans); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#a6a6a6;
}

/* ---------- NAV ---------- */
body:has(.landing) .lnav{
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
body:has(.landing) .brand{
  font-family:var(--font-head); font-weight:800; font-size:19px; letter-spacing:-.4px; color:#202020;
}

/* ---------- HERO ---------- */
body:has(.landing) .hero-status{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 13px; font-size:12px; color:#6b6b6b;
}
body:has(.landing) .hero-status .pulse{ background:#16a34a; }
body:has(.landing) .hero-facts{ gap:10px; }
body:has(.landing) .fact{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:12px 16px;
}
body:has(.landing) .fact .k{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#a6a6a6; }
body:has(.landing) .fact .v{ font-family:var(--font-head); font-weight:800; font-size:17px; color:#202020; }

/* ---------- ŞERİT (strip) ---------- */
body:has(.landing) .strip{
  background:#fff; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
body:has(.landing) .strip-item{ color:#8e8e8e; font-size:12px; font-weight:500; }
body:has(.landing) .strip-item.hot{
  background:#202020; color:#fff; border-radius:999px; padding:7px 13px; font-weight:600;
}

/* ---------- BÖLÜMLER ---------- */
body:has(.landing) .sec{ background:#fff; border-top:1px solid var(--line-soft); }
body:has(.landing) .sec.alt{ background:#f9f9f9; }
body:has(.landing) .sec-head p{ color:#8e8e8e; font-size:13.5px; line-height:1.75; }

/* ---------- KART AİLESİ ---------- */
body:has(.landing) .feat,
body:has(.landing) .pack,
body:has(.landing) .card{
  border:1px solid var(--line); box-shadow:none; border-radius:16px;
  transition:box-shadow .18s, transform .18s;
}
body:has(.landing) .feat:hover,
body:has(.landing) .pack:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
body:has(.landing) .feat-ic{
  width:40px; height:40px; border-radius:12px;
  background:#202020; color:#fff; display:grid; place-items:center;
}
body:has(.landing) .band-row{ transition:background .12s; }
body:has(.landing) .band-row:not(.head):hover{ background:#fafafa; }
body:has(.landing) .card-head h3{ font-family:var(--font-head); font-weight:800; color:#202020; }

/* ---------- BUTONLAR / FORM ---------- */
body:has(.landing) .btn,
body:has(.auth-split) .btn{
  border-radius:10px; font-weight:600; box-shadow:none;
}
body:has(.landing) .btn.primary,
body:has(.auth-split) .btn.primary{ background:#202020; color:#fff; }
body:has(.landing) .btn.primary:hover,
body:has(.auth-split) .btn.primary:hover{ background:#000; }
body:has(.landing) .btn.lg,
body:has(.auth-split) .btn.lg{ padding:13px 20px; font-size:13px; }
body:has(.landing) .btn.quiet,
body:has(.auth-split) .btn.ghost{
  background:#fff; border:1px solid var(--line); color:#5b5b5b;
}
body:has(.landing) .btn.quiet:hover{ background:#fafafa; }
body:has(.landing) .input,
body:has(.auth-split) .input{
  background:#fff; border:1px solid #e7e7e7; border-radius:10px;
  color:#313131; box-shadow:none;
}
body:has(.landing) .input:focus-visible,
body:has(.auth-split) .input:focus-visible{ outline:none; border-color:#bdbdbd; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
body:has(.landing) label.label,
body:has(.auth-split) label.label{ font-size:11px; font-weight:600; color:#6b6b6b; }

/* ---------- KOD BLOĞU (landing) ---------- */
body:has(.landing) .codeblock{
  background:#181818; color:#d6d6d6; border:none; box-shadow:none; 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; }

/* ---------- HESAPLAYICI / PAKET / SS ---------- */
body:has(.landing) .calc-slider{ accent-color:#202020; }
body:has(.landing) .faq{
  border:1px solid var(--line); border-radius:14px; background:#fff;
}
body:has(.landing) .faq summary{ border-radius:14px; }
body:has(.landing) .badge{ border-radius:999px; background:#f4f4f4; color:#6b6b6b; border:none; }

/* ---------- ALT BANT / WHATSAPP ---------- */
body:has(.landing) .wa-panel h3{ font-size:20px; }
body:has(.landing) .wa-panel > p{ color:#8e8e8e; }

/* ---------- GİRİŞ / KAYIT SAYFALARI ---------- */
body:has(.auth-split) .auth-main{ background:#f9f9f9; }
body:has(.auth-split) .auth-aside{
  background:#fff; border-right:1px solid var(--line);
}
body:has(.auth-split) .auth-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-md); padding:26px;
}
body:has(.auth-split) .auth-quote{ color:#6b6b6b; }
body:has(.auth-split) .auth-head p{ color:#8e8e8e; }

/* ==========================================================================
   v3510 — LANDING DERİN ÖZELLEŞTİRME
   (animasyonlu hero + marquee + scroll-reveal + koyu CTA + cila)
   ========================================================================== */

/* ---------- HERO: katmanlı zemin + ızgara ---------- */
body:has(.landing) .hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(720px 360px at 88% -12%, rgba(32,32,32,.07), transparent 62%),
    radial-gradient(560px 320px at -12% 112%, rgba(32,32,32,.05), transparent 60%),
    #f9f9f9;
}
body:has(.landing) .hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(720px 480px at 70% 10%, black 20%, transparent 75%);
  mask-image:radial-gradient(720px 480px at 70% 10%, black 20%, transparent 75%);
}
body:has(.landing) .hero-in{ position:relative; }

/* giriş animasyonu: hero içeriği kademeli yükselerek gelir */
body:has(.landing) .hero-copy > *{
  opacity:0; translate:0 16px;
  animation:apk-rise .75s cubic-bezier(.2,.7,.2,1) forwards;
}
body:has(.landing) .hero-copy > :nth-child(1){ animation-delay:.05s }
body:has(.landing) .hero-copy > :nth-child(2){ animation-delay:.14s }
body:has(.landing) .hero-copy > :nth-child(3){ animation-delay:.23s }
body:has(.landing) .hero-copy > :nth-child(4){ animation-delay:.32s }
body:has(.landing) .hero-copy > :nth-child(5){ animation-delay:.41s }
body:has(.landing) .orb{ opacity:0; animation:apk-fade .9s .4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes apk-rise{ to{ opacity:1; translate:0 0 } }
@keyframes apk-fade{ to{ opacity:1 } }

/* başlık vurgusu: gradyan metin */
body:has(.landing) .hero h1 .accent{
  background:linear-gradient(92deg,#101010 20%,#6b6b6b 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* orbital: yavaş dönen kesikli halka + yumuşak ping + chip süzülmesi */
body:has(.landing) .orb-dashring{ animation:apk-spin 46s linear infinite; }
@keyframes apk-spin{ to{ transform:rotate(360deg) } }
body:has(.landing) .orb-chip{ animation:apk-float 5.6s ease-in-out infinite; }
body:has(.landing) .orb-item:nth-child(2n) .orb-chip{ animation-delay:-1.8s }
body:has(.landing) .orb-item:nth-child(3n) .orb-chip{ animation-delay:-3.4s }
@keyframes apk-float{ 0%,100%{ translate:0 0 } 50%{ translate:0 -5px } }

/* ---------- MARQUEE ŞERİT ---------- */
body:has(.landing) .strip{
  overflow:hidden; background:#fff;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
body:has(.landing) .strip-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
body:has(.landing) .strip-track{
  display:flex; width:max-content;
  animation:apk-marquee 30s linear infinite;
}
body:has(.landing) .strip-marquee:hover .strip-track{ animation-play-state:paused; }
body:has(.landing) .strip-in{
  display:flex; align-items:center; gap:36px;
  padding:15px 18px; white-space:nowrap;
}
@keyframes apk-marquee{ to{ transform:translateX(-50%) } }
body:has(.landing) .strip-item{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#8e8e8e; }
body:has(.landing) .strip-item svg{ width:14px; height:14px; color:#b3b3b3; }
body:has(.landing) .strip-item.hot{
  background:#202020; color:#fff; border-radius:999px; padding:7px 14px; font-weight:600;
}
body:has(.landing) .strip-item.hot svg{ color:#fff; }

/* ---------- SCROLL-REVEAL ---------- */
.rv{ opacity:0; translate:0 24px; transition:opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1); }
.rv-in{ opacity:1; translate:0 0; }

/* ---------- FİYAT BANDI (#fiyat) ---------- */
body:has(.landing) .band{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-sm); overflow:hidden; padding:6px 0;
}
body:has(.landing) .band-row:not(.head):hover{ background:#fafafa; }
body:has(.landing) .band-row .num{ font-weight:700; color:#202020; }

/* ---------- HESAPLAYICI ---------- */
body:has(.landing) #hesaplayici .card,
body:has(.landing) #hesaplayici .pack{
  background:linear-gradient(160deg,#ffffff 30%,#f6f6f6 100%);
}
body:has(.landing) .calc-big{
  font-family:var(--font-head); font-weight:800; font-size:clamp(34px,4vw,46px);
  letter-spacing:-.03em; color:#202020;
}
body:has(.landing) .calc-big small{ font-weight:600; color:#a6a6a6; }
body:has(.landing) input[type="range"]{ accent-color:#202020; }

/* ---------- ADIMLAR / AKIŞ ---------- */
body:has(.landing) .flow-node{
  border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:none;
}
body:has(.landing) .su-steps .card,
body:has(.landing) .su-steps > div{ border-radius:16px; }
body:has(.landing) .su-steps .step-n,
body:has(.landing) .su-steps .n{
  font-family:var(--font-head); font-weight:800; color:#e2e2e2; font-size:42px; line-height:1;
}

/* ---------- SSS ---------- */
body:has(.landing) .faq summary{ font-weight:600; border-radius:14px; }
body:has(.landing) .faq details[open] summary{ color:#202020; }

/* ---------- FİNAL CTA: KOYU PANEL ---------- */
body:has(.landing) .cta-final{ background:#f9f9f9; }
body:has(.landing) .cta-final .container{
  position:relative; overflow:hidden;
  background:#181818; border-radius:26px;
  padding:clamp(44px,6vw,72px) clamp(24px,5vw,56px);
  text-align:center; color:#fff;
}
body:has(.landing) .cta-final .container::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(480px 260px at 50% -30%, rgba(255,255,255,.14), transparent 65%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(560px 320px at 50% 0%, black 30%, transparent 80%);
  mask-image:radial-gradient(560px 320px at 50% 0%, black 30%, transparent 80%);
}
body:has(.landing) .cta-final .container > *{ position:relative; }
body:has(.landing) .cta-final h2{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(26px,3.6vw,40px); color:#fff;
}
body:has(.landing) .cta-final p{ color:#a8a8a8; }
body:has(.landing) .cta-final .btn.primary{ background:#fff; color:#161616; }
body:has(.landing) .cta-final .btn.primary:hover{ background:#e9e9e9; }
body:has(.landing) .cta-final .btn:not(.primary){ background:transparent; border:1px solid #3d3d3d; color:#fff; }
body:has(.landing) .cta-final .btn:not(.primary):hover{ background:#242424; }

/* ---------- FOOTER ---------- */
body:has(.landing) .lfoot{ border-top:1px solid var(--line-soft); background:#fff; }
body:has(.landing) .lfoot a, body:has(.landing) .lfoot button{ color:#8e8e8e; }
body:has(.landing) .lfoot a:hover, body:has(.landing) .lfoot button:hover{ color:#202020; }

/* ---------- HAREKET AZALTMA ---------- */
@media(prefers-reduced-motion:reduce){
  body:has(.landing) .hero-copy > *,
  body:has(.landing) .orb,
  body:has(.landing) .orb-dashring,
  body:has(.landing) .orb-chip,
  body:has(.landing) .strip-track{ animation:none !important; opacity:1 !important; translate:0 0 !important; }
  .rv{ opacity:1; translate:0 0; transition:none; }
}