/* =====================================================================
   OnlySoft Kurumsal Tasarım Sistemi
   Tek kaynak: site sayfaları, gölge DOM ürün bölümleri, kayıt/sepet ve paneller aynı jetonları kullanır.
   Kurallar (taste-skill / redesign-skill): tek vurgu rengi (<%80 doygunluk), tek gri ailesi (soğuk lacivert),
   Geist + Geist Mono, mor "AI" geçişleri yok, belirgin odak halkası, tabular rakamlar.
   Eski sayfa stilleri katmanlı olduğu için bu dosya en son uygulanır ve gerektiğinde önceliği yükseltir.
   ===================================================================== */

/* ---------- Jetonlar: koyu (varsayılan) ---------- */
html:root, html:not(.light):root, :host, :host(:not(.light)) {
  color-scheme: dark;
  --os-bg: #0b0e13; --os-bg2: #10141b; --os-surface: #141922; --os-surface2: #1a202b;
  --os-line: #252c38; --os-line2: #1b212b;
  --os-text: #e8ecf2; --os-muted: #9aa3b2; --os-dim: #7d8694;
  --os-accent: #3a6fe0; --os-accent-h: #3263cc; --os-accent-t: #8aaef5;
  --os-ok: #2fb36b; --os-warn: #d9922b; --os-bad: #dc4c4c;
  --os-radius: 12px; --os-radius-sm: 9px;
  --os-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 16px 40px -28px rgba(3,8,20,.9);
  --os-font: "Geist", "Segoe UI", system-ui, sans-serif;
  --os-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* site kabuğu + gölge DOM şablonu */
  --bg: var(--os-bg); --bg2: var(--os-bg2); --panel: var(--os-surface); --panel2: var(--os-surface2);
  --line: var(--os-line); --text: var(--os-text); --muted: var(--os-muted); --dim: var(--os-dim);
  --accent: var(--os-accent); --accent2: var(--os-accent-t); --ok: var(--os-ok); --red: var(--os-bad); --hot: var(--os-warn);
  --hero: var(--os-bg2); --top-bg: var(--os-bg2);
  --display: var(--os-font); --body: var(--os-font); --mono: var(--os-mono);
  /* kayıt / sepet */
  --card: var(--os-surface); --inp: var(--os-bg2); --font: var(--os-font); --bad: var(--os-bad); --warn: var(--os-warn);
  /* kod penceresi */
  --w-bg: var(--os-bg2); --w-bg2: #0d1117; --w-side: #0e1218; --w-line: var(--os-line); --w-line2: var(--os-line2); --w-sel: #172030;
}

/* ---------- Jetonlar: açık tema ---------- */
html.light:root, html body.light, :host(.light) {
  color-scheme: light;
  --os-bg: #f6f7f9; --os-bg2: #ffffff; --os-surface: #ffffff; --os-surface2: #f0f2f5;
  --os-line: #e2e5ea; --os-line2: #eceef2;
  --os-text: #111620; --os-muted: #4f5866; --os-dim: #69717e; --os-ok: #17803f; --os-warn: #a8650a; --os-bad: #c23b3b;
  --os-accent: #2f63d6; --os-accent-h: #2856bd; --os-accent-t: #2f63d6;
  --os-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 32px -24px rgba(16,24,40,.22);
  --bg: var(--os-bg); --bg2: var(--os-bg2); --panel: var(--os-surface); --panel2: var(--os-surface2);
  --line: var(--os-line); --text: var(--os-text); --muted: var(--os-muted); --dim: var(--os-dim);
  --accent: var(--os-accent); --accent2: var(--os-accent-t); --hero: var(--os-bg); --top-bg: #eef0f4;
  --card: var(--os-surface); --inp: var(--os-bg2);
  --w-bg: #ffffff; --w-bg2: #f7f8fa; --w-side: #fafbfc; --w-line: var(--os-line); --w-line2: var(--os-line2); --w-sel: #eef3fc; --w-dim: #737b88; --w-muted: #555e6c;
}

/* ---------- Temel tipografi ---------- */
html body, :host {
  font-family: var(--os-font) !important;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html body { background-color: var(--os-bg); }
/* Yatay taşma (kayan şeritler, gizli çekmece) mobilde sayfayı genişletmesin */
html, html body { overflow-x: clip; }
html body .drawer { max-width: 100vw; }
:host h1, :host h2, :host h3, html body h1, html body h2, html body h3 {
  font-family: var(--os-font) !important; font-weight: 600; letter-spacing: -0.028em; text-wrap: balance;
}
:host p, html body p { text-wrap: pretty; }
:host code, :host kbd, :host .mono, html body code, html body kbd, html body .mono { font-family: var(--os-mono) !important; }
.pr, .amt, .tot, .price, .ptbl td, table td, .stat b, .kv b { font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--os-accent) 35%, transparent); color: var(--os-text); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Odak halkası: klavye kullanıcıları için tek ve belirgin */
:focus-visible { outline: 2px solid var(--os-accent-t) !important; outline-offset: 2px !important; border-radius: 6px; }

/* ---------- "AI geçişleri" yerine düz, kurumsal yüzeyler ---------- */
:host h1 span, html body h1 span { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--os-muted) !important; }
:host .hero, html body .hero { box-shadow: none !important; }
html body .hero { background: var(--os-bg2) !important; border: 1px solid var(--os-line) !important; }
:host .hero { background: transparent !important; }

/* ---------- Üst menü ---------- */
html body .navbox { background: color-mix(in srgb, var(--os-bg2) 97%, transparent) !important; border-color: var(--os-line) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body header.main.scrolled .navbox { background: color-mix(in srgb, var(--os-bg) 97%, transparent) !important; box-shadow: 0 10px 30px -20px rgba(3,8,20,.8) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .topbar { background: var(--os-bg) !important; }

/* Navbar etiketleri: periyodik ışık süpürmesi + hafif zıplama (yalnızca transform/translate, GPU) */
html body .navbox .badge { overflow: hidden; isolation: isolate; animation: osBob 3.6s cubic-bezier(.3,.7,.4,1) infinite; }
html body .navbox .badge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7) 50%, transparent);
  transform: translateX(-120%) skewX(-12deg); animation: osShine 3.6s cubic-bezier(.45,0,.25,1) infinite;
}
html body .navbox .badge.b-org, html body .navbox .badge.b-org::after { animation-delay: 1.8s; }

@keyframes osShine { 0%, 55% { transform: translateX(-120%) skewX(-12deg); } 80%, 100% { transform: translateX(260%) skewX(-12deg); } }
@keyframes osBob { 0%, 55%, 100% { translate: 0 0; } 64% { translate: 0 -2.5px; } 74% { translate: 0 0; } 79% { translate: 0 -1px; } 84% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html body .navbox .badge, html body .navbox .badge::after { animation: none; } html body .navbox .badge::after { display: none; } }
/* Menü bildirim rozetleri (zil, sepet): tek stil, beyaz rakam, zemin rengi halka */
html body .navbox .icon-btn .dot, html body .navbox .icon-btn .cnt {
  background: var(--os-accent) !important; color: #fff !important;
  min-width: 18px; width: auto !important; height: 18px !important; padding: 0 5px; border-radius: 9px !important;
  font: 600 10.5px/18px var(--os-font) !important; font-variant-numeric: tabular-nums; text-align: center;
  top: -6px !important; right: -6px !important; box-shadow: 0 0 0 2px var(--os-bg2);
}
html body .navbox .icon-btn { border-color: var(--os-line) !important; color: var(--os-text) !important; transition: border-color .2s, background-color .2s; }
html body .navbox .icon-btn:hover { border-color: color-mix(in srgb, var(--os-accent) 45%, var(--os-line)) !important; background: color-mix(in srgb, var(--os-accent) 6%, transparent) !important; }

/* Mobil üst menü: tüm düğmeler ekrana sığsın */
@media (max-width: 440px) {
  html body .navbox { gap: 8px !important; padding-inline: 10px !important; width: calc(100% - 16px) !important; }
  html body .navbox .actions { gap: 6px !important; }
  html body .navbox .notif-wrap { display: none !important; }
  html body .navbox .login { padding-inline: 4px !important; }
  html body .navbox .cta { padding: 8px 12px !important; white-space: nowrap; }
  html body .navbox .logo { gap: 6px !important; }
  html body .navbox .logo .lg { width: 32px !important; height: 32px !important; margin-block: 0 !important; }
  html body .navbox .logo .wm { font-size: 19px !important; }
}
@media (max-width: 370px) {
  html body .navbox a.login[href^="kayit"] { display: none !important; }
  html body .navbox .logo .wm { font-size: 17px !important; }
}

/* ---------- Butonlar: tek dil ---------- */
html body .cta, html body .pay, :host .btn.p, html body .btn.p, html body button.btn.w {
  background: var(--os-accent) !important; border: 1px solid var(--os-accent) !important; color: #fff !important;
  border-radius: var(--os-radius-sm) !important; font-weight: 600 !important; box-shadow: none !important;
  transition: background-color .2s, border-color .2s, transform .12s;
}
html body .cta:hover, html body .pay:hover:not(:disabled), :host .btn.p:hover, html body .btn.p:hover, html body button.btn.w:hover:not(:disabled) {
  background: var(--os-accent-h) !important; border-color: var(--os-accent-h) !important;
}
html body .pay:disabled, html body button.btn.w:disabled { background: var(--os-surface2) !important; border-color: var(--os-line) !important; color: var(--os-dim) !important; }
:host .btn:not(.p), html body .btn:not(.p):not(.w) { border-radius: var(--os-radius-sm) !important; font-weight: 600 !important; }

/* Ürün tablosu / kart "Satın Al" düğmeleri: vurgu tonlu ikincil buton, hover'da dolar */
:host .ord, html body .buy {
  background: color-mix(in srgb, var(--os-accent) 13%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--os-accent) 34%, transparent) !important;
  color: var(--os-accent-t) !important; border-radius: var(--os-radius-sm) !important; font-weight: 600 !important;
  transition: background-color .2s, color .2s, border-color .2s;
}
:host .ord svg { stroke: currentColor !important; }
:host .ord:hover, html body .buy:hover { background: var(--os-accent) !important; border-color: var(--os-accent) !important; color: #fff !important; }

/* Logo yazısı: "soft" kurumsal mavi */
html body .wm i { color: var(--os-accent-t) !important; }

/* Seçili filtre ve indirim etiketleri */
:host .faq-f button.on { background: var(--os-accent) !important; color: #fff !important; border-color: var(--os-accent) !important; }
:host(.light) .toggle em, html.light body .toggle em { color: #17803f !important; }

/* Rozetler: yuvarlak hap yerine köşeli etiket. Navbar etiketleri (YENİ, CLOUD SERVER) her iki temada okunur, tonlu */
html body .navbox .badge { color: #fff !important; background: var(--os-accent) !important; border: 0; font-weight: 700 !important; letter-spacing: .06em; padding: 1px 6px !important; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--os-accent) 60%, transparent); }
html body .navbox .badge.b-org { color: #fff !important; background: #d9691e !important; box-shadow: 0 2px 6px -2px rgba(217,105,30,.6); }
:host .badge, :host .tag, html body .navbox .badge { border-radius: 5px !important; }

/* ---------- Kartlar ve yüzeyler ---------- */
:host .bx, :host .pd, :host .sv, :host .crit > *, :host .kb-tabs button, :host .faq2 details,
html body .svc > *, html body .card {
  border-color: var(--os-line) !important;
}
:host .bx, :host .pd, :host .sv { background-color: var(--os-surface) !important; box-shadow: var(--os-shadow); border-radius: var(--os-radius) !important; }

/* Fiyat tablosu (ana sayfa): tek çerçeveli kutu, kartlar içinde düz bölmeler */
html body .plans { border: 1px solid var(--os-line) !important; border-radius: 14px !important; background: var(--os-surface) !important; box-shadow: var(--os-shadow); overflow: hidden; }
html body .plans .plan { background: transparent !important; border-color: var(--os-line) !important; border-radius: 0 !important; box-shadow: none !important; position: relative; min-width: 0; }
html body .plans .plan.pop { background: color-mix(in srgb, var(--os-accent) 5%, var(--os-surface)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--os-accent) 40%, transparent), inset 0 3px 0 var(--os-accent) !important; }
html body .plan h3 { flex-wrap: wrap; row-gap: 6px; }
html body .popb { background: color-mix(in srgb, var(--os-accent) 14%, var(--os-surface)) !important; color: var(--os-accent-t) !important; border: 1px solid color-mix(in srgb, var(--os-accent) 30%, transparent); border-radius: 5px !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .02em; padding: 2px 7px !important; white-space: nowrap; line-height: 1.4; }
html body .plan.pop .buy { background: var(--os-accent) !important; border-color: var(--os-accent) !important; color: #fff !important; }
html body .plan.pop .buy:hover { background: var(--os-accent-h) !important; }
html body .plan .buy { width: 100%; }

/* Form alanları */
html body .inp, html body input.inp, html body select, html body textarea { border-radius: var(--os-radius-sm); }
html body .inp:focus, html body select:focus, html body textarea:focus { border-color: var(--os-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--os-accent) 20%, transparent) !important; outline: none; }

/* ---------- Alt bilgi ---------- */
html body footer { background: var(--os-bg2) !important; border-top: 1px solid var(--os-line) !important; }

/* ---------- Performans ---------- */
/* Ekran dışındaki bölümler ekrana yaklaşana kadar çizilmez (kaydırma ve ilk yükleme hızlanır) */
html body main > section:nth-of-type(n+3), html body footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- Teknoloji logo bandı (ana sayfa, "Ürünlerimiz" bandıyla aynı akış) ---------- */
html body .tband { margin-top: 8px !important; border-bottom: 0 !important; }
html body .tband .pb-track { align-items: center; animation-duration: 80s; }
html body .tband .tl { display: inline-flex; align-items: center; gap: 10px; color: var(--os-muted); white-space: nowrap; transition: color .25s; }
html body .tband .tl svg { width: 28px; height: 28px; fill: currentColor; flex: none; transition: fill .25s, transform .25s; }
html body .tband .tl em { font-style: normal; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
html body .tband .tl .wmk { font-weight: 800; font-size: 20px; letter-spacing: .02em; }
html body .tband .tl:hover { color: var(--os-text); }
html body .tband .tl:hover svg, html body .tband .tl:hover .wmk { fill: var(--c); color: var(--c); }
@media (prefers-reduced-motion: reduce) { html body .tband .pb-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } html body .tband .pb-track > span[aria-hidden] { display: none !important; } }

/* ---------- Yakında: pasif ürünler (menü ve ürün bandı) ---------- */
html body .soon { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font: 600 10px/1.5 var(--os-font); letter-spacing: .04em; text-transform: uppercase; font-style: normal; color: var(--os-warn); background: color-mix(in srgb, var(--os-warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--os-warn) 30%, transparent); }
html body .mi.mi-soon, html body .pb-soon { cursor: default; pointer-events: none; }
html body .mi.mi-soon svg { opacity: .55; }
html body .mi.mi-soon strong { color: var(--os-muted) !important; }
html body .mi.mi-soon span { opacity: .75; }
html body .pb-track .pb-soon { color: var(--os-dim) !important; }

/* ---------- Navbar logosu: giriş sayfasıyla aynı (Only koyu, soft mavi) + açılışta bir kez parlama ---------- */
html body header.main .logo { position: relative; }
html body header.main .logo .wm { font-family: var(--os-font) !important; font-weight: 700; letter-spacing: -.03em; }
html body header.main .logo .wm b { color: var(--os-text) !important; font-weight: 700; }
html body header.main .logo .wm i { color: var(--os-accent-t) !important; font-weight: 500; }
html body header.main .logo .shine {
  position: absolute; inset: 0; display: inherit; align-items: inherit; gap: inherit; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%); mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: osLogoShine 1.2s cubic-bezier(.45,0,.25,1) .5s 1 both;
}
html body header.main .logo .shine img { filter: brightness(2.1) saturate(.5); }
html body header.main .logo .shine .wm b, html body header.main .logo .shine .wm i { color: #fff !important; }
html.light body header.main .logo .shine { filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
html:not(.light) body header.main .logo .shine { filter: drop-shadow(0 0 8px rgba(138,174,245,.8)); }
@keyframes osLogoShine { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { html body header.main .logo .shine { display: none; } }

/* ---------- Üst şerit: Discord ve tema düğmeleri ---------- */
html body .topbar .tb-dc, html body .topbar .tb-th {
  width: 28px !important; height: 28px !important; padding: 0 !important; display: inline-grid !important; place-items: center;
  border-radius: 8px !important; border: 1px solid var(--os-line) !important; background: var(--os-surface) !important; color: var(--os-muted) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.05); cursor: pointer; text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}
html body .topbar .tb-dc svg { width: 15px !important; height: 15px !important; }
html body .topbar .tb-th svg { width: 15px !important; height: 15px !important; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.16,1,.3,1); }
html body .topbar .tb-dc:hover { background: #5865F2 !important; border-color: #5865F2 !important; color: #fff !important; }
html body .topbar .tb-th:hover { background: color-mix(in srgb, var(--os-accent) 10%, var(--os-surface)) !important; border-color: color-mix(in srgb, var(--os-accent) 40%, var(--os-line)) !important; color: var(--os-accent-t) !important; }
html body .topbar .tb-th:hover svg { transform: rotate(-20deg); }
html body .topbar .tb-dc:active, html body .topbar .tb-th:active { transform: scale(.94); }
html body .topbar .tb-dc:focus-visible, html body .topbar .tb-th:focus-visible { outline: 2px solid var(--os-accent-t) !important; outline-offset: 2px !important; }
@media (prefers-reduced-motion: reduce) { html body .topbar .tb-th svg { transition: none; } }