/* ============================================================================
   onox.css — ONOXSOFT KANONIK TASARIM SISTEMI
   Kaynak: onox-lcs/_design/*.html (16 mockup) inline-style'larindan damitildi.
   "PANELTR tadinda": acik tema icerik + koyu siber-slate sidebar, rose #EF305E,
   Figtree govde + JetBrains Mono kod, ferah spacing, ince hairline kartlar.

   Faz 2 view'lari SADECE bu dosyadaki sinif adlarini emit eder; boylece render
   edilen sayfa mockup ekran goruntusuyle birebir esler. DIS FONT/CDN ISTEGI YOK.

   ICINDEKILER
     0. Vendored fonts (@font-face)
     1. :root tasarim tokenlari (renk paleti, spacing, radius, shadow, type)
     2. Reset + temel govde
     3. App shell (koyu sidebar + acik icerik)
     4. Sidebar nav (kategori ustyazi, aktif=rose-tint, badge, kullanici karti)
     5. Topbar (baslik/altyazi, arama, rose aksiyon butonu, bell, kullanici)
     6. Butonlar (rose primary / outline / ghost / dark)
     7. Kartlar + paneller (sade, koyu-vurgu, mavi-gradient featured)
     8. Stat / KPI kartlari + ikon rozetleri
     9. Tablolar (uppercase header, hairline satir, hucre yardimcilari)
    10. Rozetler / pill / etiket (rose/emerald/amber/azure/slate + nokta)
    11. Progress / usage bar + paket dagilimi
    12. Grafik konteynerleri (area/line/sparkline + eksen + legend)
    13. Aktivite feed + sistem-saglik satiri + leak kart
    14. Formlar / input / select / checkbox / toggle
    15. Callout / empty-state / toast
    16. Auth split-screen (sol koyu marka + sag form) + 2FA
    17. Landing (topbar, hero, panel-mockup, tech-band, pricing, faq, cta, footer)
    18. Checkout stepper + sipariş özeti
    19. Status / durum sayfasi
    20. Yardimci siniflar (spacing, flex/grid, text, mono, dot)
   ========================================================================== */

/* ====================== 0. VENDORED FONTS ====================== */
/* Inter (degisken) = govde/baslik — modern, yogun-veri panelleri icin optimize. */
/* font-display:SWAP + metrik-uyumlu "Inter Fallback" (local Arial + override) →
   Inter HER ZAMAN tutarlı uygulanır; yüklenene kadar fallback AYNI metriklerle yer
   kaplar → SIFIR layout-shift, yükler-arası font DEĞİŞMEZ. Preload Inter'i ilk
   boyamaya yetiştirir. (optional KALDIRILDI: tutarsız uygulama yapıyordu; Figtree
   ikinci web-font'u ayrı swap edip "bi anda oturuyor" FOUT'una yol açıyordu.) */
@font-face{ font-family:"Inter"; font-style:normal; font-display:swap; font-weight:300 900; src:url("fonts/inter-var.woff2") format("woff2"); }
@font-face{ font-family:"Inter Fallback"; src:local("Arial"); ascent-override:90.20%; descent-override:22.48%; line-gap-override:0%; size-adjust:107.40%; }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-display:swap; font-weight:100 800; src:url("fonts/jetbrains-mono-var.woff2") format("woff2"); }

/* ====================== 1. TOKENLAR ====================== */
:root{
  /* -- marka rose -- */
  --ox-rose:#EF305E; --ox-rose-600:#E11D48; --ox-rose-500:#F43F5E; --ox-rose-400:#FB7185;
  --ox-rose-glow:#F55E83; --ox-rose-700:#BE123C; --ox-rose-ink:#C0271F;
  --ox-rose-tint:#FDEEF4; --ox-rose-tint-2:#FFF1F3; --ox-rose-line:#FBD9D4; --ox-rose-line-2:#FBD5DC;
  --ox-rose-soft:#FECDD3; --ox-rose-soft-2:#FDA4AF;
  /* rose gradyan (buton/aksiyon) */
  --ox-rose-grad:linear-gradient(140deg,#FB7185,#E11D48);
  --ox-rose-grad-2:linear-gradient(140deg,#F55E83,#EF305E);

  /* -- slate paleti -- */
  --ox-ink:#0F172A;          /* govde metin / slate-900 */
  --ox-ink-2:#1E293B;        /* slate-800 */
  --ox-slate-700:#334155;
  --ox-slate-600:#475569;    /* ikincil metin */
  --ox-slate-500:#64748B;
  --ox-slate-400:#94A3B8;    /* muted / placeholder */
  --ox-slate-300:#CBD5E1;
  --ox-line-strong:#E3E6EB;  /* input border */
  --ox-line:#EAECEF;         /* kart border (kanonik hairline) */
  --ox-line-2:#EEF0F3;       /* daha acik ayrac */
  --ox-line-3:#F0F1F4;       /* en acik ayrac (satir) */
  --ox-row-line:#F4F5F7;     /* tablo satir cizgisi */
  --ox-tablehead:#A6AEBB;    /* tablo basligi metni */

  /* -- yuzeyler -- */
  --ox-bg:#F6F7F9;           /* uygulama arka plani */
  --ox-bg-2:#F1F3F6;         /* arama/segment dolgu */
  --ox-bg-3:#F8FAFC;         /* hover yuzey */
  --ox-bg-soft:#FAFBFC;      /* satir hover */
  --ox-bg-faint:#FCFCFD;     /* tablo header dolgu */
  --ox-surface:#FFFFFF;      /* kart */

  /* -- koyu siber-slate (sidebar / marka panelleri) -- */
  --ox-dark:#0E1525;         /* sidebar bg (kanonik) */
  --ox-dark-2:#0B1020;       /* landing nav / footer */
  --ox-dark-3:#13182B;       /* gradyan ucu */
  --ox-dark-ink:#0F172A;     /* koyu kart */
  --ox-dark-cat:#5A6377;     /* sidebar kategori ustyazi */
  --ox-dark-sub:#7E8AA0;     /* sidebar altyazi */
  --ox-dark-muted:#9AA4B5;
  --ox-dark-soft:#8A93A6;
  --ox-dark-ink-2:#E2E8F0;

  /* -- durum renkleri -- */
  --ox-emerald:#16A34A; --ox-emerald-700:#15803D; --ox-emerald-300:#34D399;
  --ox-emerald-tint:#ECFDF3; --ox-emerald-line:#C6F0D5;
  --ox-amber:#EA8A04; --ox-amber-700:#B45309; --ox-amber-900:#92400E;
  --ox-amber-tint:#FFF7ED; --ox-amber-line:#FCE7C8;
  --ox-red:#DC2626; --ox-red-700:#B91C1C; --ox-red-tint:#FEF2F2; --ox-red-line:#FBD5DC;
  --ox-blue:#2563EB; --ox-blue-700:#1D4ED8; --ox-blue-tint:#EFF6FF;
  --ox-sky:#0EA5E9; --ox-sky-300:#7DD3FC; --ox-sky-100:#BAE6FD;
  --ox-violet:#7C3AED; --ox-violet-tint:#F3E8FF;

  /* mavi gradient featured (bayi cuzdan) */
  --ox-blue-grad:linear-gradient(150deg,#1D4ED8,#13182B);
  --ox-sky-grad:linear-gradient(150deg,#0EA5E9,#1D4ED8);

  /* -- tipografi -- */
  --ox-font:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --ox-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* -- radius -- */
  --ox-r-xs:6px; --ox-r-sm:8px; --ox-r:10px; --ox-r-md:11px; --ox-r-lg:14px; --ox-r-xl:16px; --ox-r-2xl:18px; --ox-r-pill:9999px;

  /* -- shadow -- */
  --ox-shadow-card:0 1px 2px rgba(15,23,42,0.04);
  --ox-shadow-pop:0 26px 56px -22px rgba(15,23,42,0.28);
  --ox-shadow-rose:0 8px 18px -8px rgba(225,29,72,0.6);
  --ox-shadow-rose-lg:0 14px 28px -12px rgba(239,48,94,0.6);
  --ox-shadow-blue:0 16px 32px -18px rgba(29,78,216,0.5);
  --ox-shadow-lift:0 14px 30px -18px rgba(15,23,42,0.35);

  --ox-sidebar-w:262px;
  --ox-topbar-h:72px;
}

/* ====================== 2. RESET + GOVDE ====================== */
*,*::before,*::after{ box-sizing:border-box; }
.onox, .onox *{ font-family:var(--ox-font); }
.onox{ color:var(--ox-ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-0.011em;
  /* Inter: tabular rakamlar (tablo/KPI hizasi) + stilistik set (modern 'a'/'g') */
  font-feature-settings:"tnum" 1,"cv05" 1,"ss01" 1; font-variant-numeric:tabular-nums; }
.onox a{ text-decoration:none; color:inherit; }
.onox img{ display:block; max-width:100%; }
.onox input::placeholder,.onox textarea::placeholder{ color:var(--ox-slate-400); }
.onox ::selection{ background:#FBD9D4; color:#7F1D1D; }

.onox-scroll::-webkit-scrollbar,
.onox ::-webkit-scrollbar{ width:10px; height:10px; }
.onox ::-webkit-scrollbar-thumb{ background:#D7DBE2; border-radius:8px; border:3px solid transparent; background-clip:padding-box; }
.onox ::-webkit-scrollbar-track{ background:transparent; }
.onox-app__side ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-color:transparent; }

@keyframes onoxPulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
@keyframes onoxSlideIn{ from{transform:translateX(28px);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes onoxToastIn{ from{transform:translateY(12px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes onoxFloat{ 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-9px) rotate(1.5deg);} }

/* ====================== 3. APP SHELL ====================== */
.onox-app{ display:flex; height:100vh; overflow:hidden; background:var(--ox-bg); color:var(--ox-ink); font-family:var(--ox-font); }
.onox-app__side{ width:var(--ox-sidebar-w); flex-shrink:0; background:var(--ox-dark); display:flex; flex-direction:column; overflow-y:auto; }
.onox-app__main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.onox-app__body{ flex:1; overflow:auto; padding:24px 26px 44px; }
.onox-app__inner{ min-width:0; }                 /* dashboardlarda min-width:1180px set edilebilir */

/* ====================== 4. SIDEBAR NAV ====================== */
.onox-brand{ display:flex; align-items:center; gap:12px; padding:20px 18px 18px; position:sticky; top:0; background:var(--ox-dark); z-index:2; }
.onox-brand__logo{ width:38px; height:38px; flex-shrink:0; }
.onox-brand__name{ font-weight:800; font-size:15.5px; letter-spacing:-0.3px; line-height:1; color:#fff; }
.onox-brand__sub{ font-size:11px; color:var(--ox-dark-sub); font-weight:600; letter-spacing:0.3px; margin-top:3px; }

.onox-nav{ display:flex; flex-direction:column; gap:2px; padding:6px 12px; }
.onox-nav__cat{ font-size:10.5px; font-weight:700; color:var(--ox-dark-cat); letter-spacing:0.9px; padding:14px 10px 6px; }
.onox-nav__cat:first-of-type{ padding-top:12px; }
.onox-nav__link{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  font-family:var(--ox-font); font-size:13.5px; font-weight:500; color:var(--ox-dark-muted);
  text-align:left; width:100%; border:1px solid transparent; outline:none; cursor:pointer;
  background:transparent; transition:background .12s,color .12s,border-color .12s;
}
.onox-nav__link:hover{ background:rgba(255,255,255,0.04); color:#E2E8F0; }
.onox-nav__link .ox-ic{ width:18px; height:18px; flex-shrink:0; }
.onox-nav__link.is-active{
  font-weight:600; color:var(--ox-rose-soft);
  background:rgba(244,63,94,0.13); border-color:rgba(244,63,94,0.22);
}
.onox-nav__badge{ margin-left:auto; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:20px; }
.onox-nav__badge--amber{ color:#FED7AA; background:rgba(234,138,4,0.22); }
.onox-nav__badge--rose{ color:var(--ox-rose-soft); background:rgba(244,63,94,0.2); }
.onox-nav__live{ margin-left:auto; display:flex; align-items:center; gap:5px; }

.onox-side-foot{ margin-top:auto; padding:14px 14px 16px; position:sticky; bottom:0; background:var(--ox-dark); }
.onox-userchip{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); }
.onox-userchip__av{ width:34px; height:34px; border-radius:50%; background:var(--ox-rose-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0; }
.onox-userchip__name{ font-weight:700; font-size:12.5px; line-height:1.2; color:#E2E8F0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.onox-userchip__meta{ font-size:10.5px; color:var(--ox-dark-sub); font-weight:600; display:flex; align-items:center; gap:4px; margin-top:2px; }

/* ====================== 5. TOPBAR ====================== */
.onox-topbar{ height:var(--ox-topbar-h); flex-shrink:0; background:rgba(255,255,255,0.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--ox-line); display:flex; align-items:center; gap:16px; padding:0 26px; }
.onox-topbar__titles{ flex:1; min-width:0; }
.onox-topbar__title{ margin:0; font-size:19px; font-weight:800; letter-spacing:-0.4px; line-height:1.1; }
.onox-topbar__sub{ font-size:12.5px; color:var(--ox-slate-400); font-weight:500; margin-top:2px; }
.onox-search{ display:flex; align-items:center; background:var(--ox-bg-2); border:1px solid var(--ox-line); border-radius:10px; padding:0 12px; height:40px; width:280px; }
.onox-search .ox-ic{ width:16px; height:16px; color:var(--ox-slate-400); flex-shrink:0; }
.onox-search input{ border:none; background:transparent; outline:none; font-family:inherit; font-size:13px; color:var(--ox-ink); padding:0 9px; width:100%; }
.onox-iconbtn{ width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid var(--ox-line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:background .12s; }
.onox-iconbtn:hover{ background:var(--ox-bg-3); }
.onox-iconbtn .ox-ic{ width:18px; height:18px; color:var(--ox-slate-600); }
.onox-iconbtn__dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--ox-rose-600); border:1.5px solid #fff; }

/* ====================== 6. BUTONLAR ====================== */
.onox-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 16px; border-radius:10px; border:1px solid transparent; font-family:var(--ox-font); font-weight:700; font-size:13px; cursor:pointer; transition:background .12s,filter .12s,border-color .12s; white-space:nowrap; }
.onox-btn .ox-ic{ width:16px; height:16px; }
.onox-btn--primary{ background:var(--ox-rose-grad); color:#fff; border-color:transparent; box-shadow:var(--ox-shadow-rose); }
.onox-btn--primary:hover{ filter:brightness(1.05); }
.onox-btn--rose-glow{ background:var(--ox-rose-grad-2); color:#fff; box-shadow:var(--ox-shadow-rose-lg); }
.onox-btn--rose-glow:hover{ filter:brightness(1.05); }
.onox-btn--outline{ background:#fff; color:var(--ox-slate-600); border-color:var(--ox-line); font-weight:600; }
.onox-btn--outline:hover{ background:var(--ox-bg-3); }
.onox-btn--ghost{ background:transparent; color:var(--ox-rose-600); border:none; font-weight:700; }
.onox-btn--ghost:hover{ filter:brightness(1.05); }
.onox-btn--dark{ background:var(--ox-ink); color:#fff; }
.onox-btn--dark:hover{ background:var(--ox-ink-2); }
.onox-btn--blue{ background:var(--ox-blue-700); color:#fff; }
.onox-btn--blue:hover{ filter:brightness(1.05); }
.onox-btn--emerald{ background:var(--ox-emerald); color:#fff; }
.onox-btn--emerald:hover{ filter:brightness(1.05); }
.onox-btn--danger{ background:var(--ox-rose-600); color:#fff; }
.onox-btn--danger:hover{ background:var(--ox-rose-700); }
.onox-btn--danger-soft{ background:var(--ox-rose-tint-2); color:var(--ox-red-700); border-color:var(--ox-rose-line-2); font-weight:700; }
.onox-btn--danger-soft:hover{ background:#FFE4E9; }
.onox-btn--lg{ height:46px; padding:0 22px; font-size:14px; }
.onox-btn--block{ width:100%; }
.onox-btn--sm{ height:34px; padding:0 13px; font-size:12.5px; }
.onox-btn[disabled],.onox-btn.is-disabled{ background:var(--ox-bg-2); color:var(--ox-tablehead); cursor:not-allowed; box-shadow:none; filter:none; }

/* segment toggle (3A/6A/12A, Aylik/Yillik, filtre pill grubu) */
.onox-seg{ display:inline-flex; gap:5px; background:var(--ox-bg-2); border-radius:9px; padding:3px; }
.onox-seg--bordered{ background:#fff; border:1px solid var(--ox-line); border-radius:11px; padding:5px; }
.onox-seg__btn{ padding:7px 14px; border-radius:8px; font-family:var(--ox-font); font-size:12.5px; font-weight:500; color:var(--ox-slate-500); background:transparent; border:none; cursor:pointer; transition:all .12s; }
.onox-seg__btn.is-active{ font-weight:700; color:var(--ox-rose-600); background:var(--ox-rose-tint-2); }

/* ====================== 7. KARTLAR ====================== */
.onox-card{ background:var(--ox-surface); border:1px solid var(--ox-line); border-radius:var(--ox-r-lg); padding:16px; }
.onox-card--xl{ border-radius:var(--ox-r-xl); padding:22px; }
.onox-card--flush{ padding:0; overflow:hidden; }
.onox-card--dark{ background:var(--ox-dark); border-color:var(--ox-dark); color:#fff; }
.onox-card--ink{ background:var(--ox-dark-ink); border-color:var(--ox-dark-ink); color:#fff; }
.onox-card__hd{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--ox-line-3); }
.onox-card__title{ font-size:15px; font-weight:700; }
.onox-card__title--sm{ font-size:14px; font-weight:700; }
.onox-card__sub{ font-size:12.5px; color:var(--ox-slate-400); font-weight:500; margin-top:2px; }

/* mavi-gradient featured kart (bayi cuzdan) */
.onox-featured{ background:var(--ox-blue-grad); border-radius:var(--ox-r-xl); padding:22px; color:#fff; box-shadow:var(--ox-shadow-blue); }
.onox-featured--sky{ background:var(--ox-sky-grad); }
.onox-featured__label{ font-size:12.5px; color:#BFD3F5; font-weight:600; }
.onox-featured__value{ font-size:30px; font-weight:800; letter-spacing:-1px; margin-top:8px; }

/* ====================== 8. STAT / KPI ====================== */
.onox-stat{ background:var(--ox-surface); border:1px solid var(--ox-line); border-radius:var(--ox-r-lg); padding:16px; }
.onox-stat--dark{ background:var(--ox-dark); border-color:var(--ox-dark); }
.onox-stat__label{ font-size:12px; color:var(--ox-slate-400); font-weight:600; }
.onox-stat--dark .onox-stat__label{ color:var(--ox-dark-muted); }
.onox-stat__value{ font-size:25px; font-weight:800; letter-spacing:-0.8px; margin-top:6px; }
.onox-stat--dark .onox-stat__value{ color:#fff; }
.onox-stat__value--lg{ font-size:28px; }
.onox-stat__delta{ font-size:11.5px; font-weight:700; margin-top:3px; }
.onox-stat__delta--up{ color:var(--ox-emerald-700); }
.onox-stat__delta--down{ color:var(--ox-red-700); }
.onox-stat__delta--warn{ color:var(--ox-amber-700); }
.onox-stat__delta--rose{ color:var(--ox-rose-soft-2); }
.onox-stat__delta--muted{ color:var(--ox-slate-400); font-weight:600; }
/* renkli zemin mini-stat (filo ozeti: cevrimici/bayat/cevrimdisi) */
.onox-stat-tile{ flex:1; text-align:center; padding:14px 8px; border-radius:11px; }
.onox-stat-tile__n{ font-size:22px; font-weight:800; }
.onox-stat-tile__l{ font-size:11px; font-weight:700; margin-top:3px; }
.onox-stat-tile--green{ background:var(--ox-emerald-tint); color:var(--ox-emerald-700); }
.onox-stat-tile--amber{ background:var(--ox-amber-tint); color:var(--ox-amber-700); }
.onox-stat-tile--slate{ background:#F1F5F9; color:var(--ox-slate-500); }

/* ikon rozeti (yumusak zemin + renkli ikon) */
.onox-ibadge{ display:flex; align-items:center; justify-content:center; border-radius:10px; flex-shrink:0; }
.onox-ibadge--32{ width:32px; height:32px; } .onox-ibadge--36{ width:36px; height:36px; }
.onox-ibadge--42{ width:42px; height:42px; }
.onox-ibadge .ox-ic{ width:18px; height:18px; }
.onox-ibadge--green{ background:var(--ox-emerald-tint); color:var(--ox-emerald); }
.onox-ibadge--blue{ background:var(--ox-blue-tint); color:var(--ox-blue); }
.onox-ibadge--rose{ background:var(--ox-rose-tint); color:var(--ox-rose); }
.onox-ibadge--red{ background:var(--ox-red-tint); color:var(--ox-red); }
.onox-ibadge--amber{ background:var(--ox-amber-tint); color:var(--ox-amber-700); }
.onox-ibadge--slate{ background:#F1F5F9; color:var(--ox-slate-600); }
/* avatar/initials */
.onox-av{ display:flex; align-items:center; justify-content:center; border-radius:9px; flex-shrink:0; font-weight:700; }
.onox-av--30{ width:30px; height:30px; font-size:11px; } .onox-av--34{ width:34px; height:34px; font-size:12px; } .onox-av--46{ width:46px; height:46px; font-size:15px; }
.onox-av--slate{ background:var(--ox-bg-2); color:var(--ox-slate-500); }
.onox-av--rose{ background:linear-gradient(140deg,#FECDD3,#FDA4AF); color:#9F1239; }
.onox-av--sky{ background:linear-gradient(140deg,#BAE6FD,#7DD3FC); color:#0C4A6E; }

/* ====================== 9. TABLOLAR ====================== */
.onox-table{ width:100%; }
.onox-thead{ display:grid; padding:13px 22px; font-size:11px; font-weight:700; color:var(--ox-tablehead); letter-spacing:0.4px; border-bottom:1px solid var(--ox-line-3); background:var(--ox-bg-faint); }
.onox-thead--plain{ background:transparent; }
.onox-trow{ display:grid; align-items:center; padding:14px 22px; border-bottom:1px solid var(--ox-row-line); transition:background .1s; }
.onox-trow:last-child{ border-bottom:0; }
.onox-trow.is-clickable{ cursor:pointer; }
.onox-trow.is-clickable:hover{ background:var(--ox-bg-soft); }
.onox-td-strong{ font-size:13.5px; font-weight:700; }
.onox-td{ font-size:13px; font-weight:600; color:var(--ox-slate-600); }
.onox-td-muted{ font-size:12.5px; color:var(--ox-slate-500); font-weight:600; }
.onox-td-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.onox-td-sub{ font-size:11px; color:var(--ox-tablehead); font-weight:600; }
.onox-empty-row{ padding:54px; text-align:center; color:var(--ox-slate-400); font-size:14px; font-weight:500; }

/* ====================== 10. ROZET / PILL / ETIKET ====================== */
.onox-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:7px; }
.onox-badge .onox-dot{ width:6px; height:6px; }
.onox-badge--green{ background:var(--ox-emerald-tint); color:var(--ox-emerald-700); }
.onox-badge--rose{ background:var(--ox-rose-tint); color:var(--ox-red-700); }
.onox-badge--red{ background:var(--ox-red-tint); color:var(--ox-red-700); }
.onox-badge--amber{ background:var(--ox-amber-tint); color:var(--ox-amber-700); }
.onox-badge--blue{ background:var(--ox-blue-tint); color:var(--ox-blue-700); }
.onox-badge--slate{ background:var(--ox-bg-2); color:var(--ox-slate-600); }
.onox-badge--violet{ background:var(--ox-violet-tint); color:var(--ox-violet); }
/* notice pill (bekleyen talep, canli) */
.onox-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:5px 11px; border-radius:20px; }
.onox-pill--amber{ color:var(--ox-amber-700); background:var(--ox-amber-tint); border:1px solid var(--ox-amber-line); }
.onox-pill--live{ color:var(--ox-emerald-700); }
/* mono kod etiketi (IP/UUID/slug) */
.onox-chip-mono{ font-family:var(--ox-mono); font-size:11px; font-weight:600; color:var(--ox-slate-600); background:var(--ox-bg-2); padding:3px 9px; border-radius:6px; }
.onox-chip-mono--rose{ color:var(--ox-red-700); background:var(--ox-red-tint); border:1px solid var(--ox-rose-line-2); }
/* tier etiketi */
.onox-tag{ font-size:11.5px; font-weight:600; color:var(--ox-slate-600); background:var(--ox-bg-2); padding:4px 9px; border-radius:6px; }

/* ====================== 11. PROGRESS / USAGE / DAGILIM ====================== */
.onox-bar{ height:7px; border-radius:5px; background:var(--ox-bg-2); overflow:hidden; }
.onox-bar--sm{ height:5px; border-radius:4px; }
.onox-bar--lg{ height:8px; }
.onox-bar__fill{ height:100%; border-radius:inherit; background:var(--ox-rose-600); }
.onox-bar__fill--rose-grad{ background:linear-gradient(90deg,#FB7185,#E11D48); }
.onox-bar__fill--green{ background:var(--ox-emerald); }
.onox-bar__fill--amber{ background:var(--ox-amber); }
.onox-bar__fill--slate{ background:var(--ox-slate-500); }
/* paket dagilimi satiri */
.onox-dist{ display:flex; flex-direction:column; gap:15px; }
.onox-dist__row{ }
.onox-dist__head{ display:flex; justify-content:space-between; margin-bottom:6px; font-size:13px; font-weight:600; }
.onox-dist__legend{ display:flex; align-items:center; gap:8px; }

/* ====================== 12. GRAFIK KONTEYNERLERI ====================== */
.onox-chart{ width:100%; }
.onox-chart svg{ display:block; width:100%; height:auto; }
.onox-chart__axis{ display:flex; justify-content:space-between; margin-top:8px; }
.onox-chart__axis span{ font-size:11px; color:#B0B7C2; font-weight:600; }
.onox-chart__legend{ display:flex; align-items:center; gap:14px; font-size:12px; font-weight:600; color:var(--ox-slate-600); }
.onox-spark{ width:100%; min-height:34px; line-height:0; }
.onox-spark--lg{ min-height:44px; }
/* mini sutun grafik (kazanc trendi) */
.onox-bars{ display:flex; align-items:flex-end; gap:8px; }
.onox-bars__col{ width:100%; background:linear-gradient(180deg,#FB7185,#E11D48); border-radius:8px 8px 0 0; min-height:6px; }

/* ====================== 13. FEED / SAGLIK / LEAK ====================== */
.onox-feed{ display:flex; flex-direction:column; }
.onox-feed__item{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--ox-bg); }
.onox-feed__item:last-child{ border-bottom:0; }
.onox-feed__body{ flex:1; min-width:0; }
.onox-feed__title{ font-size:12.5px; font-weight:600; line-height:1.35; }
.onox-feed__meta{ font-size:11px; color:var(--ox-slate-400); font-weight:600; margin-top:2px; }

/* sistem-saglik satiri */
.onox-health{ background:#fff; border:1px solid var(--ox-line); border-radius:var(--ox-r-lg); padding:13px 18px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.onox-health__label{ font-size:12.5px; font-weight:700; color:var(--ox-slate-600); margin-right:6px; white-space:nowrap; }
.onox-health__node{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; background:var(--ox-bg-3); border:1px solid var(--ox-line-2); border-radius:9px; }
.onox-health__name{ font-size:12px; font-weight:600; color:var(--ox-slate-700); }
.onox-health__ms{ font-size:11px; font-weight:600; color:var(--ox-slate-400); font-family:var(--ox-mono); }
.onox-health__ok{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ox-emerald-700); font-weight:700; white-space:nowrap; }

/* sizinti/leak kart (sol renk seridi) */
.onox-leak{ background:#fff; border:1px solid var(--ox-line); border-left:3px solid var(--ox-rose-600); border-radius:var(--ox-r-lg); padding:20px; }
.onox-leak__head{ display:flex; align-items:flex-start; gap:14px; }
.onox-leak__rule{ font-size:14.5px; font-weight:700; }

/* ====================== 14. FORMLAR ====================== */
.onox-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.onox-label{ font-size:12.5px; font-weight:700; color:var(--ox-slate-600); }
.onox-input,.onox-select,.onox-textarea{
  height:48px; border:1px solid var(--ox-line-strong); border-radius:11px; padding:0 14px;
  font-family:var(--ox-font); font-size:14px; color:var(--ox-ink); background:#fff; outline:none;
  transition:border-color .15s,box-shadow .15s; width:100%;
}
.onox-textarea{ height:auto; min-height:96px; padding:12px 14px; line-height:1.5; resize:vertical; }
.onox-input:focus,.onox-select:focus,.onox-textarea:focus{ border-color:var(--ox-rose); box-shadow:0 0 0 4px rgba(239,48,94,0.15); }
.onox-input--sm,.onox-select--sm{ height:46px; font-size:13.5px; border-radius:11px; padding:0 13px; }
.onox-input-wrap{ position:relative; }
.onox-input-wrap .onox-input{ padding-right:44px; }
.onox-input-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ox-slate-400); }
/* checkbox (custom) */
.onox-check{ width:19px; height:19px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff; border:1px solid var(--ox-slate-300); }
.onox-check--lg{ width:20px; height:20px; }
.onox-check.is-on{ background:var(--ox-rose); border-color:var(--ox-rose); }
.onox-checkrow{ display:flex; align-items:center; gap:9px; cursor:pointer; }
/* divider "veya" */
.onox-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; }
.onox-divider::before,.onox-divider::after{ content:""; flex:1; height:1px; background:var(--ox-line-2); }
.onox-divider span{ font-size:11.5px; color:var(--ox-tablehead); font-weight:600; }

/* ====================== 15. CALLOUT / EMPTY / TOAST ====================== */
.onox-callout{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; font-size:12px; font-weight:600; }
.onox-callout--amber{ background:var(--ox-amber-tint); border:1px solid var(--ox-amber-line); color:var(--ox-amber-900); }
.onox-callout--rose{ background:var(--ox-rose-tint); border:1px solid var(--ox-rose-line); color:var(--ox-rose-ink); }
.onox-callout--info{ background:var(--ox-bg); border:1px solid var(--ox-line-2); color:var(--ox-slate-600); }

.onox-empty{ text-align:center; padding:54px 22px; color:var(--ox-slate-400); font-size:14px; font-weight:500; }
.onox-empty__glyph{ width:60px; height:60px; margin:0 auto 14px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--ox-rose-tint); }
.onox-empty__glyph .ox-ic{ width:28px; height:28px; color:var(--ox-rose); }
.onox-empty__title{ font-size:15px; font-weight:700; color:var(--ox-ink); }
.onox-empty__text{ font-size:13px; color:var(--ox-slate-500); margin:5px 0 0; max-width:340px; margin-left:auto; margin-right:auto; line-height:1.5; }

/* toast host (alt-orta veya ust-sag) */
#onox-toast-host{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:1080; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.onox-toast{ pointer-events:auto; display:inline-flex; align-items:center; gap:10px; background:var(--ox-ink); color:#fff; font-size:13px; font-weight:600; padding:12px 20px; border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,0.4); animation:onoxToastIn 0.2s ease; }
.onox-toast__dot{ width:8px; height:8px; border-radius:50%; background:var(--ox-emerald-300); flex-shrink:0; }
.onox-toast--rose .onox-toast__dot{ background:var(--ox-rose-400); }
.onox-toast--amber .onox-toast__dot{ background:var(--ox-amber); }
.onox-toast.is-out{ opacity:0; transform:translate(-50%,12px); transition:opacity .2s,transform .2s; }

/* ====================== 16. AUTH SPLIT-SCREEN ====================== */
.onox-auth{ font-family:var(--ox-font); color:var(--ox-ink); background:var(--ox-bg-2); min-height:100vh; display:flex; flex-direction:column; }
.onox-auth__head{ background:#fff; border-bottom:1px solid var(--ox-line-2); }
.onox-auth__head-in{ max-width:1100px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; gap:14px; }
.onox-auth__brandlink{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; letter-spacing:-0.4px; }
.onox-auth__main{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.onox-auth__card{ width:100%; max-width:1040px; background:#fff; border:1px solid var(--ox-line); border-radius:24px; box-shadow:0 30px 70px -40px rgba(15,23,42,0.35); overflow:hidden; display:grid; grid-template-columns:0.92fr 1.08fr; }
/* sol koyu marka paneli */
.onox-auth__brand{ position:relative; background:linear-gradient(160deg,#1A1030,#0B1020 62%); color:#fff; padding:46px 40px; display:flex; flex-direction:column; overflow:hidden; }
.onox-auth__glow-1{ position:absolute; top:-80px; right:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(239,48,94,0.5),transparent 68%); }
.onox-auth__glow-2{ position:absolute; bottom:-90px; left:-70px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,0.32),transparent 70%); }
.onox-auth__brand-top{ position:relative; display:flex; align-items:center; gap:10px; margin-bottom:38px; font-weight:800; font-size:16px; }
.onox-auth__hero{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; }
.onox-auth__eyebrow{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px; padding:5px 12px; border-radius:30px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16); margin-bottom:18px; font-size:11.5px; font-weight:700; letter-spacing:0.4px; }
.onox-auth__hero h1{ margin:0; font-size:30px; font-weight:800; letter-spacing:-0.9px; line-height:1.12; }
.onox-auth__lede{ font-size:14.5px; color:var(--ox-dark-muted); font-weight:500; line-height:1.6; margin:14px 0 26px; max-width:330px; }
.onox-auth__bullets{ display:flex; flex-direction:column; gap:13px; }
.onox-auth__bullet{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; color:#E2E8F0; }
.onox-auth__bcheck{ width:24px; height:24px; border-radius:7px; background:rgba(52,211,153,0.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.onox-auth__stats{ position:relative; display:flex; align-items:center; gap:20px; margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1); }
.onox-auth__stat-n{ font-size:17px; font-weight:800; }
.onox-auth__stat-l{ font-size:10.5px; color:var(--ox-dark-soft); font-weight:600; }
.onox-auth__vline{ width:1px; height:26px; background:rgba(255,255,255,0.1); }
.onox-auth__mascot{ position:absolute; right:26px; bottom:30px; width:120px; height:auto; opacity:0.97; pointer-events:none; filter:drop-shadow(0 14px 30px rgba(0,0,0,0.5)); animation:onoxFloat 5s ease-in-out infinite; }
/* sag form paneli */
.onox-auth__form{ padding:44px 46px; display:flex; flex-direction:column; justify-content:center; }
.onox-auth__title{ margin:0 0 6px; font-size:23px; font-weight:800; letter-spacing:-0.5px; }
.onox-auth__subtitle{ font-size:13.5px; color:var(--ox-slate-400); font-weight:500; margin:0 0 22px; }
.onox-auth__foot{ text-align:center; padding:0 24px 32px; font-size:12px; color:var(--ox-slate-400); font-weight:500; }
/* 2FA buyuk mono kod */
.onox-auth__code{ width:100%; height:64px; text-align:center; font-family:var(--ox-mono); font-size:30px; font-weight:600; letter-spacing:.42em; text-indent:.42em; color:var(--ox-ink); background:#fff; border:1px solid var(--ox-slate-300); border-radius:13px; outline:none; transition:border-color .15s,box-shadow .15s; }
.onox-auth__code:focus{ border-color:var(--ox-rose); box-shadow:0 0 0 4px rgba(239,48,94,0.15); }

/* ====================== 17. LANDING ====================== */
.onox-site{ font-family:var(--ox-font); color:var(--ox-ink); background:#fff; overflow-x:hidden; }
.onox-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }
.onox-wrap--lg{ max-width:1200px; }
/* duyuru cubugu */
.onox-topstrip{ background:var(--ox-dark-2); color:#fff; }
.onox-topstrip__in{ max-width:1240px; margin:0 auto; padding:0 28px; height:38px; display:flex; align-items:center; gap:16px; font-size:12.5px; overflow:hidden; }
/* sticky nav */
.onox-sitenav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--ox-line-2); }
.onox-sitenav__in{ max-width:1240px; margin:0 auto; padding:0 28px; height:70px; display:flex; align-items:center; gap:16px; }
.onox-sitenav__link{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:600; color:var(--ox-slate-600); background:transparent; border:none; cursor:pointer; padding:9px 12px; border-radius:9px; transition:background .12s,color .12s; }
.onox-sitenav__link:hover{ color:var(--ox-ink); background:var(--ox-bg); }
/* mega-menu popover */
.onox-menu{ background:#fff; border:1px solid var(--ox-line-2); border-radius:18px; box-shadow:var(--ox-shadow-pop); padding:12px; }
.onox-menu__item{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:11px; transition:background .12s; }
.onox-menu__item:hover{ background:var(--ox-bg); }
.onox-menu__name{ font-size:13.5px; font-weight:700; color:var(--ox-ink); }
.onox-menu__desc{ font-size:11.5px; color:var(--ox-slate-400); font-weight:500; margin-top:2px; }
/* hero */
.onox-hero{ position:relative; background:radial-gradient(1100px 460px at 80% -10%, #FDEDF2 0%, rgba(254,240,238,0) 60%), #FFFFFF; }
.onox-hero__mesh{ position:absolute; inset:0; background-image:radial-gradient(#E6E8EC 1.2px,transparent 1.2px); background-size:24px 24px; opacity:0.6; -webkit-mask-image:radial-gradient(760px 360px at 78% 8%,#000,transparent 72%); mask-image:radial-gradient(760px 360px at 78% 8%,#000,transparent 72%); pointer-events:none; }
.onox-hero__in{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:78px 28px 64px; display:grid; grid-template-columns:1fr 1.08fr; gap:50px; align-items:center; }
.onox-hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:30px; background:var(--ox-rose-tint); border:1px solid var(--ox-rose-line); margin-bottom:22px; font-size:12.5px; font-weight:700; color:var(--ox-rose-ink); }
.onox-hero__title{ margin:0; font-size:50px; line-height:1.05; font-weight:800; letter-spacing:-1.8px; }
.onox-hero__title .ox-accent{ color:var(--ox-rose); }
.onox-hero__lede{ font-size:18px; line-height:1.6; color:var(--ox-slate-600); font-weight:500; margin:22px 0 30px; max-width:520px; }
.onox-hero__cta{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
/* bolum basligi */
.onox-section{ max-width:1200px; margin:0 auto; padding:70px 28px 84px; }
.onox-eyebrow{ font-size:13px; font-weight:800; color:var(--ox-rose); letter-spacing:1.2px; margin-bottom:14px; }
.onox-h2{ margin:0; font-size:40px; font-weight:800; letter-spacing:-1.2px; line-height:1.1; }
/* tech-stack band */
.onox-techband{ background:var(--ox-bg-3); border-top:1px solid var(--ox-line-2); border-bottom:1px solid var(--ox-line-2); }
.onox-techband__in{ max-width:1200px; margin:0 auto; padding:40px 28px; display:flex; align-items:center; justify-content:center; gap:38px; flex-wrap:wrap; }
.onox-techband__item{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--ox-slate-600); }
/* fiyat kartlari */
.onox-price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.onox-price{ position:relative; display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--ox-line); border-radius:18px; padding:26px; }
.onox-price--featured{ border-color:var(--ox-rose); }
.onox-price--dark{ background:var(--ox-dark-2); border-color:var(--ox-dark-2); color:#fff; }
.onox-price__pop{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:10.5px; font-weight:800; letter-spacing:0.5px; color:#fff; background:var(--ox-rose); padding:4px 13px; border-radius:20px; box-shadow:var(--ox-shadow-rose); }
.onox-price__name{ font-size:15px; font-weight:800; }
.onox-price__accounts{ font-size:13px; font-weight:500; color:var(--ox-slate-500); margin-top:4px; }
.onox-price__amount{ display:flex; align-items:baseline; gap:5px; margin:18px 0 4px; }
.onox-price__amount b{ font-size:34px; font-weight:800; letter-spacing:-1.3px; }
.onox-price__per{ font-size:14px; font-weight:600; color:var(--ox-slate-500); }
.onox-price__note{ font-size:12px; font-weight:600; color:var(--ox-slate-500); min-height:18px; }
.onox-price__div{ height:1px; background:var(--ox-line); margin:20px 0; }
.onox-price__feats{ display:flex; flex-direction:column; gap:11px; flex:1; }
.onox-price__feat{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; font-weight:500; color:var(--ox-slate-600); }
/* faq */
.onox-faq{ background:#fff; border:1px solid var(--ox-line); border-radius:14px; overflow:hidden; }
.onox-faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; }
.onox-faq__qt{ font-size:15.5px; font-weight:700; color:var(--ox-ink); }
.onox-faq__sign{ width:28px; height:28px; flex-shrink:0; border-radius:8px; background:var(--ox-rose-tint); color:var(--ox-rose); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; line-height:1; }
.onox-faq__a{ padding:0 22px 20px; font-size:14.5px; line-height:1.65; color:var(--ox-slate-500); font-weight:500; }
.onox-faq__a[hidden]{ display:none; }
/* cta band */
.onox-ctaband{ position:relative; background:linear-gradient(140deg,#1A0E10,#0B1020 55%); border-radius:26px; padding:58px 56px; overflow:hidden; color:#fff; }
.onox-ctaband__glow{ position:absolute; top:-60px; right:-40px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(239,48,94,0.4),rgba(239,48,94,0) 70%); }
/* footer */
.onox-footer{ background:var(--ox-dark-2); color:#fff; }
.onox-footer__in{ max-width:1240px; margin:0 auto; padding:64px 28px 0; }
.onox-footer__cols{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:36px; }
.onox-footer__cat{ font-size:12px; font-weight:800; color:#fff; letter-spacing:0.4px; margin-bottom:15px; }
.onox-footer__link{ font-size:13.5px; color:var(--ox-dark-muted); font-weight:500; transition:color .12s; }
.onox-footer__link:hover{ color:#fff; }
.onox-footer__social{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; transition:background .12s; }
.onox-footer__social:hover{ background:rgba(255,255,255,0.12); }
.onox-footer__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding:22px 0; border-top:1px solid rgba(255,255,255,0.08); }

/* ====================== 18. CHECKOUT STEPPER ====================== */
.onox-steps{ display:flex; align-items:center; gap:14px; }
.onox-steps__sep{ flex:1; height:2px; background:var(--ox-line); border-radius:2px; }
.onox-step{ display:flex; align-items:center; gap:11px; }
.onox-step__n{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:var(--ox-bg-2); color:var(--ox-slate-400); }
.onox-step__l{ font-size:13.5px; font-weight:600; color:var(--ox-slate-400); }
.onox-step.is-active .onox-step__n{ background:var(--ox-rose); color:#fff; }
.onox-step.is-active .onox-step__l{ color:var(--ox-ink); }
.onox-step.is-done .onox-step__n{ background:var(--ox-emerald); color:#fff; }
.onox-step.is-done .onox-step__l{ color:var(--ox-ink); }
.onox-summary{ background:#fff; border:1px solid var(--ox-line); border-radius:var(--ox-r-xl); padding:22px; }
.onox-summary__title{ font-size:14px; font-weight:800; margin-bottom:16px; }
.onox-summary__row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:13.5px; }
.onox-summary__total{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; margin-top:6px; border-top:1px solid var(--ox-line); font-size:17px; font-weight:800; }

/* ====================== 19. STATUS / DURUM ====================== */
.onox-status-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--ox-line-3); }
.onox-status-row:last-child{ border-bottom:0; }
.onox-status-row__name{ font-size:14px; font-weight:700; flex:1; }
.onox-status-row__up{ font-size:12.5px; font-weight:700; color:var(--ox-emerald-700); white-space:nowrap; width:64px; text-align:right; }

/* ====================== 20. YARDIMCI SINIFLAR ====================== */
.ox-ic{ width:18px; height:18px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle; }
.ox-ic--fill{ fill:currentColor; stroke:none; }
.onox-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.onox-dot--live{ animation:onoxPulse 1.6s infinite; }
.onox-dot--green{ background:var(--ox-emerald); } .onox-dot--green-300{ background:var(--ox-emerald-300); }
.onox-dot--amber{ background:var(--ox-amber); } .onox-dot--red{ background:var(--ox-rose-600); }
.onox-dot--slate{ background:var(--ox-slate-400); } .onox-dot--rose{ background:var(--ox-rose); }

.onox-mono{ font-family:var(--ox-mono); }
.onox-truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* renk yardimcilari (metin) */
.ox-rose{ color:var(--ox-rose)!important; } .ox-rose-600{ color:var(--ox-rose-600)!important; }
.ox-green{ color:var(--ox-emerald-700)!important; } .ox-amber{ color:var(--ox-amber-700)!important; }
.ox-red{ color:var(--ox-red-700)!important; } .ox-blue{ color:var(--ox-blue-700)!important; }
.ox-muted{ color:var(--ox-slate-400)!important; } .ox-secondary{ color:var(--ox-slate-600)!important; }
.ox-white{ color:#fff!important; }
/* font-weight + size kisayollari */
.ox-w5{ font-weight:500; } .ox-w6{ font-weight:600; } .ox-w7{ font-weight:700; } .ox-w8{ font-weight:800; }
/* grid yardimcilari (dashboard yerlesimleri) */
.onox-grid{ display:grid; gap:18px; }
.onox-grid--14{ gap:14px; }
.onox-grid-2{ grid-template-columns:1fr 1fr; }
.onox-grid-3{ grid-template-columns:repeat(3,1fr); }
.onox-grid-4{ grid-template-columns:repeat(4,1fr); }
.onox-grid-6{ grid-template-columns:repeat(6,1fr); }
.onox-grid-main{ grid-template-columns:1.7fr 1fr; }
.onox-grid-main-2{ grid-template-columns:1.55fr 1fr; }
.onox-flex{ display:flex; } .onox-flex-center{ display:flex; align-items:center; }
.onox-between{ display:flex; align-items:center; justify-content:space-between; }
.onox-mb-18{ margin-bottom:18px; } .onox-mt-auto{ margin-top:auto; } .onox-ml-auto{ margin-left:auto; }

/* ====================== RESPONSIVE ====================== */
@media (max-width:920px){
  .onox-auth__card{ grid-template-columns:1fr; }
  .onox-auth__brand{ padding:30px 26px; }
  .onox-auth__mascot{ display:none; }
  .onox-hero__in{ grid-template-columns:1fr; gap:30px; }
  .onox-price-grid{ grid-template-columns:1fr 1fr; }
  .onox-footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1100px){
  .onox-app__side{ position:fixed; inset:0 auto 0 0; z-index:200; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 60px rgba(0,0,0,0.4); }
  .onox-app.is-side-open .onox-app__side{ transform:translateX(0); }
  .onox-app__scrim{ display:none; position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:150; }
  .onox-app.is-side-open .onox-app__scrim{ display:block; }
}
@media (max-width:680px){
  .onox-grid-6,.onox-grid-4,.onox-grid-3,.onox-grid-2,.onox-grid-main,.onox-grid-main-2{ grid-template-columns:1fr; }
  .onox-price-grid,.onox-footer__cols{ grid-template-columns:1fr; }
  .onox-hero__title{ font-size:34px; letter-spacing:-1px; }
  .onox-h2{ font-size:30px; }
}

/* ====================== REDUCED MOTION ====================== */
@media (prefers-reduced-motion:reduce){
  .onox-dot--live,.onox-auth__mascot{ animation:none; }
  .onox-toast{ animation:none; }
}