/* ============================================================
   Windows 11 görünümü (Fluent) — ek tema, AtmoSpace görünümü varsayılan kalır.
   Etkin: <html data-skin="win11"> (Profil → Görünüm; _ThemeInit, yalnız giriş sonrası _Layout sayfalarında).
   Açık/koyu ayrımı aynen çalışır: koyu = :root[data-skin="win11"], açık = ...[data-theme="light"].
   Yaklaşım: önce renk/ölçü değişkenleri (tüm ekranlar değişkenlerle boyalı), sonra ortak parçaların biçimi
   (kenar menü, üst bar, düğme, giriş kutusu, kart, pencere, sekme). Yazı tipi Windows'un kendi Segoe UI Variable'ı
   (sunucudan indirilmez; Windows dışı cihazlarda sistem yazı tipi).
   ============================================================ */

/* ---------- Değişkenler: koyu ---------- */
:root[data-skin="win11"] {
    --bg-deep:        #202020;
    --bg-base:        #202020;
    --bg-surface:     #2b2b2b;
    --bg-surface-2:   #323232;
    --bg-elevated:    #2c2c2c;

    --accent:         #60cdff;
    --accent-bright:  #60cdff;
    --accent-dim:     #4cb6e6;
    --accent-soft:    rgba(96, 205, 255, 0.12);
    --accent-glow:    rgba(96, 205, 255, 0.18);
    --accent2:        #60cdff;
    --accent2-soft:   rgba(96, 205, 255, 0.12);
    --on-accent:      #000000;
    --accent-hover:   #5abce9;

    --topbar-bg:      rgba(32, 32, 32, 0.86);
    --logo-glow:      transparent;

    --text-primary:   #ffffff;
    --text-secondary: #cfcfcf;
    --text-muted:     #9a9a9a;

    --border:         rgba(255, 255, 255, 0.07);
    --border-strong:  rgba(255, 255, 255, 0.12);
    --stroke-bottom:  rgba(255, 255, 255, 0.09);
    --subtle-hover:   rgba(255, 255, 255, 0.06);
    --subtle-press:   rgba(255, 255, 255, 0.04);
    --control-bg:     #2d2d2d;
    --control-hover:  #323232;

    --danger:         #ff99a4;
    --warning:        #fce100;
    --info:           #60cdff;

    --radius:         8px;
    --radius-sm:      4px;
    --shadow:         0 8px 16px rgba(0, 0, 0, 0.26);

    --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    accent-color: var(--accent);
    color-scheme: dark;
}

/* ---------- Değişkenler: açık ---------- */
:root[data-skin="win11"][data-theme="light"] {
    --bg-deep:        #f3f3f3;
    --bg-base:        #f3f3f3;
    --bg-surface:     #fbfbfb;
    --bg-surface-2:   #f6f6f6;
    --bg-elevated:    #ffffff;

    --accent:         #005fb8;
    --accent-bright:  #005fb8;
    --accent-dim:     #0067c0;
    --accent-soft:    rgba(0, 95, 184, 0.08);
    --accent-glow:    rgba(0, 95, 184, 0.16);
    --accent2:        #005fb8;
    --accent2-soft:   rgba(0, 95, 184, 0.08);
    --on-accent:      #ffffff;
    --accent-hover:   #1a6fc0;

    --topbar-bg:      rgba(243, 243, 243, 0.86);

    --text-primary:   #1b1b1b;
    --text-secondary: #5c5c5c;
    --text-muted:     #8a8a8a;

    --border:         rgba(0, 0, 0, 0.07);
    --border-strong:  rgba(0, 0, 0, 0.12);
    --stroke-bottom:  rgba(0, 0, 0, 0.18);
    --subtle-hover:   rgba(0, 0, 0, 0.04);
    --subtle-press:   rgba(0, 0, 0, 0.025);
    --control-bg:     #ffffff;
    --control-hover:  #f9f9f9;

    --danger:         #c42b1c;
    --warning:        #9d5d00;
    --info:           #005fb8;

    --shadow:         0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    color-scheme: light;
}

/* ---------- Temel ---------- */
:root[data-skin="win11"] body { font-size: 14px; letter-spacing: 0; }
:root[data-skin="win11"] :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: 0; }
:root[data-skin="win11"] ::-webkit-scrollbar { width: 8px; height: 8px; }
:root[data-skin="win11"] ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.45); border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
:root[data-skin="win11"] ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.7); background-clip: padding-box; }
:root[data-skin="win11"] ::selection { background: var(--accent); color: var(--on-accent); }

/* İkonlar: Fluent çizgi ikonları gibi — Phosphor duotone'un soluk dolgu katmanı gizli; kenar menüde vurgu renginde ince dolgu (Ayarlar'daki renkli simgeler gibi) */
:root[data-skin="win11"] svg.ic path[opacity] { display: none; }
:root[data-skin="win11"] .nav-item svg.ic path[opacity] { display: inline; fill: var(--accent); opacity: .45; }

/* ---------- Pencere zemini (Mica) ---------- */
:root[data-skin="win11"] .app-shell {
    background:
        radial-gradient(1100px 620px at 0% 0%, rgba(96, 205, 255, 0.05), transparent 60%),
        radial-gradient(900px 600px at 100% 100%, rgba(180, 140, 255, 0.04), transparent 60%),
        var(--bg-deep);
}
:root[data-skin="win11"][data-theme="light"] .app-shell {
    background:
        radial-gradient(1100px 620px at 0% 0%, rgba(0, 120, 212, 0.05), transparent 60%),
        radial-gradient(900px 600px at 100% 100%, rgba(170, 120, 220, 0.04), transparent 60%),
        var(--bg-deep);
}

/* ---------- Kenar menü (Ayarlar uygulamasının gezinme bölmesi) ---------- */
:root[data-skin="win11"] .sidebar { background: transparent; border-right: 0; padding: 18px 12px; }
/* Telefon/tablet: menü içeriğin ÜSTÜNE açılır (çekmece) — şeffaf kalırsa alttaki sayfa görünür, okunmaz. Windows'un açılır
   panelleri gibi dolu zemin + kenarlık + gölge. Kurulu modül uygulamasında (html.pwa-app) çentik payı 26-modules.css'te kalır. */
@media (max-width: 860px) {
    :root[data-skin="win11"] .sidebar {
        background: var(--bg-base);
        border-right: 1px solid var(--border);
        border-radius: 0 8px 8px 0;
        box-shadow: 0 16px 48px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .14);
    }
}
:root[data-skin="win11"] .brand { padding: 4px 10px 16px; gap: 10px; }
:root[data-skin="win11"] .brand-mark { width: 32px; height: 32px; border-radius: 6px; box-shadow: none; line-height: 32px; font-size: 16px; }
:root[data-skin="win11"] .brand-text { font-weight: 600; font-size: 15px; letter-spacing: 0; }
:root[data-skin="win11"] .brand-text span { color: inherit; }
:root[data-skin="win11"] .nav-group { margin-top: 6px; }
:root[data-skin="win11"] .nav-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 12px 12px 4px; }
:root[data-skin="win11"] .nav-item {
    gap: 14px; padding: 9px 12px; margin: 2px 0; border-radius: 4px;
    color: var(--text-primary); font-weight: 400; font-size: 14px; transition: background .1s ease;
}
:root[data-skin="win11"] .nav-item svg { width: 18px; height: 18px; }
:root[data-skin="win11"] .nav-item:hover { background: var(--subtle-hover); color: var(--text-primary); }
:root[data-skin="win11"] .nav-item:active { background: var(--subtle-press); }
:root[data-skin="win11"] .nav-item.active { background: var(--subtle-hover); color: var(--text-primary); font-weight: 600; }
:root[data-skin="win11"] .nav-item.active::before { left: 0; width: 3px; height: 16px; border-radius: 3px; background: var(--accent); }
:root[data-skin="win11"] .nav-item.nav-soon { color: var(--text-muted); }
:root[data-skin="win11"] .nav-search {
    background: var(--control-bg); border: 1px solid var(--border); border-bottom-color: var(--stroke-bottom);
    border-radius: 4px; padding: 7px 10px; margin: 2px 2px 10px;
}
:root[data-skin="win11"] .nav-search:focus-within { border-color: var(--border); border-bottom: 2px solid var(--accent); padding-bottom: 6px; background: var(--bg-elevated); }
:root[data-skin="win11"] .sidebar-footer { border-top: 1px solid var(--border); }
:root[data-skin="win11"] .user-card { border-radius: 4px; }
:root[data-skin="win11"] .user-card:hover { background: var(--subtle-hover); }
:root[data-skin="win11"] .user-avatar { border-radius: 50%; background: var(--accent); color: var(--on-accent); }

/* ---------- Üst bar (başlık çubuğu + ortada arama) ---------- */
:root[data-skin="win11"] .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); height: 64px; backdrop-filter: blur(20px) saturate(1.2); }
:root[data-skin="win11"] .tb-avatar { border-radius: 50%; background: var(--accent); color: var(--on-accent); }
:root[data-skin="win11"] .tb-hi { color: var(--text-secondary); }
:root[data-skin="win11"] .tb-name { font-weight: 600; text-transform: none; }
:root[data-skin="win11"] .gsearch {
    background: var(--control-bg); border: 1px solid var(--border); border-bottom-color: var(--stroke-bottom);
    border-radius: 6px; padding: 8px 14px;
}
:root[data-skin="win11"] .gsearch:focus-within { background: var(--bg-elevated); border-color: var(--border); border-bottom: 2px solid var(--accent); padding-bottom: 7px; box-shadow: none; }
:root[data-skin="win11"] .gsearch-kbd { border-radius: 4px; }
:root[data-skin="win11"] .gsearch-results,
:root[data-skin="win11"] .notif-panel { border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); }
:root[data-skin="win11"] .icon-btn { border-radius: 4px; background: transparent; border-color: transparent; color: var(--text-primary); width: 38px; height: 38px; }
:root[data-skin="win11"] .icon-btn:hover { background: var(--subtle-hover); color: var(--text-primary); border-color: transparent; }
:root[data-skin="win11"] .icon-btn:active { background: var(--subtle-press); }

/* ---------- Düğmeler ---------- */
/* Vurgulu (accent) düğme: düz renk, gölge/kayma yok */
:root[data-skin="win11"] :is(.btn-primary, .pf-btn-primary, .s-btn.primary, .mk-buy, .pl-btn, .cc-btn.cc-primary, .s-ai-go) {
    background: var(--accent); color: var(--on-accent); border: 1px solid rgba(0, 0, 0, 0.08); border-bottom-color: rgba(0, 0, 0, 0.25);
    border-radius: 4px; box-shadow: none; font-weight: 600;
}
:root[data-skin="win11"] :is(.btn-primary, .pf-btn-primary, .s-btn.primary, .mk-buy, .pl-btn, .cc-btn.cc-primary, .s-ai-go):hover {
    background: var(--accent-hover); transform: none; box-shadow: none;
}
:root[data-skin="win11"] :is(.btn-primary, .pf-btn-primary):active { opacity: .85; }
:root[data-skin="win11"] .btn { border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 600; }
:root[data-skin="win11"] .btn:not(.btn-primary):not(.sr-danger) { background: var(--control-bg); border: 1px solid var(--border); border-bottom-color: var(--stroke-bottom); color: var(--text-primary); }
:root[data-skin="win11"] .btn:not(.btn-primary):not(.sr-danger):hover { background: var(--control-hover); }
/* Standart düğme (Windows'un beyaz/gri düğmesi) */
:root[data-skin="win11"] :is(.btn-ghost, .btn-sm-ghost, .pf-edit, .pf-theme-btn, .pf-lang-btn, .pf-skin-btn) {
    background: var(--control-bg); border: 1px solid var(--border); border-bottom-color: var(--stroke-bottom);
    color: var(--text-primary); border-radius: 4px; box-shadow: none;
}
:root[data-skin="win11"] :is(.btn-ghost, .btn-sm-ghost, .pf-edit, .pf-theme-btn, .pf-lang-btn, .pf-skin-btn):hover { background: var(--control-hover); color: var(--text-primary); }
:root[data-skin="win11"] .btn-sm { border-radius: 4px; font-weight: 600; }
:root[data-skin="win11"] .btn-sm.btn-primary { width: auto; }
:root[data-skin="win11"] .btn-sm-ok { background: var(--accent); color: var(--on-accent); border-color: transparent; }
:root[data-skin="win11"] .btn-sm-ok:hover { background: var(--accent-hover); color: var(--on-accent); }
:root[data-skin="win11"] :is(.pf-theme-btn, .pf-lang-btn, .pf-skin-btn).active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
:root[data-skin="win11"] .icon-mini { border-radius: 4px; }

/* Accent zemin üstündeki koyu yazılar → accent üstü renk (açıkta beyaz, koyuda siyah) */
:root[data-skin="win11"] :is(.user-avatar, .tb-avatar, .tab-badge, .s-grp button.on, .s-fx.ai, .chat-u, .chat-tts.playing,
    .ck.eq, .conv-tab.active, .mk-cat.active, .mk-wallet, .pl-badge, .wtab-badge, .rem-check.on, .set-avatar,
    .tool-drawer .s-grp-wide button.on, .pf-avatar, .tm-page .btn.btn-primary, .tm-cart-bar, .lg-doc a.btn.btn-primary) {
    color: var(--on-accent);
}
:root[data-skin="win11"] :is(.chat-u, .s-fx.ai, .mk-wallet, .tm-cart-bar, .pf-avatar, .set-avatar) { background: var(--accent); }

/* ---------- Giriş kutuları ---------- */
:root[data-skin="win11"] :is(.field, .modal .field, .pf-field) :is(input, select, textarea),
:root[data-skin="win11"] .pf-input {
    background-color: var(--control-bg); border: 1px solid var(--border); border-bottom-color: var(--stroke-bottom);
    border-radius: 4px; font-size: 14px;
}
:root[data-skin="win11"] :is(.field, .modal .field, .pf-field) :is(input, select, textarea):hover { background-color: var(--control-hover); }
:root[data-skin="win11"] :is(.field, .modal .field, .pf-field) :is(input, select, textarea):focus,
:root[data-skin="win11"] .pf-input:focus-within {
    background-color: var(--bg-elevated); border-color: var(--border); border-bottom-color: var(--accent);
    box-shadow: inset 0 -1px 0 var(--accent);
}
:root[data-skin="win11"] .field label, :root[data-skin="win11"] .modal .field label { font-weight: 400; color: var(--text-primary); }

/* ---------- Kartlar / paneller (Ayarlar'daki 8px köşeli, ince çizgili kartlar) ---------- */
:root[data-skin="win11"] :is(.pf-card, .dcard, .wsrow, .tp-item, .sr-item, .cf-empty, .sd-kpis > *, .krd-card) {
    border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); box-shadow: none;
}
:root[data-skin="win11"] :is([class*="-card"], [class*="card-"], [class*="-panel"], [class$="card"]):not(svg):not(.user-card) { border-radius: 8px; }
:root[data-skin="win11"] :is(.tp-item, .wsrow, .sr-item):hover { background: var(--control-hover); }
:root[data-skin="win11"] [class*="tile-"] { border-radius: 6px; }

/* ---------- Pencereler (iletişim kutusu) ---------- */
:root[data-skin="win11"] .modal-overlay { background: rgba(0, 0, 0, 0.3); backdrop-filter: none; }
:root[data-skin="win11"] .modal {
    border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--border-strong);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28), 0 2px 21px rgba(0, 0, 0, 0.2); animation: w11pop .18s cubic-bezier(.1, .9, .2, 1) both;
}
:root[data-skin="win11"] .modal-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
:root[data-skin="win11"] .modal-head h3 svg { color: var(--text-primary); }
@keyframes w11pop { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

/* ---------- Sekmeler (Seçici çubuk: seçilende alt vurgu çizgisi) ---------- */
:root[data-skin="win11"] .cf-tabs { background: transparent; border: 0; padding: 0; gap: 2px; border-radius: 0; }
:root[data-skin="win11"] .cf-tab { position: relative; border-radius: 4px; color: var(--text-secondary); font-weight: 400; padding: 7px 12px 9px; }
:root[data-skin="win11"] .cf-tab:hover { background: var(--subtle-hover); color: var(--text-primary); }
:root[data-skin="win11"] .cf-tab.on { background: transparent; box-shadow: none; color: var(--text-primary); font-weight: 600; }
:root[data-skin="win11"] .cf-tab.on svg { color: var(--accent); }
:root[data-skin="win11"] .cf-tab.on::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 16px; height: 3px; border-radius: 3px; background: var(--accent); transform: translateX(-50%); }
:root[data-skin="win11"] :is(.gchip, [class*="chip"]) { border-radius: 4px; }
:root[data-skin="win11"] .gchip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- Uyarılar ---------- */
:root[data-skin="win11"] :is(.flash, .wf-banner) { border-radius: 4px; }

/* ---------- Mobil alt gezinme ---------- */
:root[data-skin="win11"] .bottom-nav { background: var(--topbar-bg); backdrop-filter: blur(20px) saturate(1.2); border-top: 1px solid var(--border); }
:root[data-skin="win11"] .bn-item.active { color: var(--accent); }


/* ---------- Üst bar selamlama: Windows'ta büyük harf etiket yok ---------- */
:root[data-skin="win11"] .tb-hi { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; }

/* ---------- Ana sayfa (Dashboard v2): mor degrade yerine Windows vurgu rengi ---------- */
:root[data-skin="win11"] .nd { --nd-grad: var(--accent); --nd-plan: var(--accent); }
:root[data-skin="win11"] .nd-usage-plan:not(.free), :root[data-skin="win11"] .nd-hero-btn { color: var(--on-accent); }
:root[data-skin="win11"] .nd-hero { border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); }
:root[data-skin="win11"] .nd-hero:focus-within { border-color: var(--border-strong); }
:root[data-skin="win11"] .nd-hero-spk { color: var(--accent); opacity: .35; }
:root[data-skin="win11"] .nd-hero-label { color: var(--accent); letter-spacing: .4px; font-weight: 600; }
:root[data-skin="win11"] .nd-hero-title { font-weight: 600; letter-spacing: 0; }
:root[data-skin="win11"] .nd-hero-title b { color: var(--accent); }
:root[data-skin="win11"] .nd-hero-cta { border-radius: 6px; background: var(--control-bg); border-bottom-color: var(--stroke-bottom); }
:root[data-skin="win11"] .nd-hero-btn { border-radius: 4px; box-shadow: none; }
:root[data-skin="win11"] .nd-hero-chip { border-radius: 4px; background: var(--control-bg); border-bottom-color: var(--stroke-bottom); color: var(--text-primary); }
:root[data-skin="win11"] .nd-hero-chip svg { color: var(--accent); }
:root[data-skin="win11"] :is(button, a).nd-hero-chip:hover { border-color: var(--border); background: var(--control-hover); }
:root[data-skin="win11"] .tb-plan { border-radius: 4px; }

/* ---------- Tablo düzenleyici: hücreler Excel'deki gibi Segoe UI (AtmoSpace'te eş aralıklı) ---------- */
:root[data-skin="win11"] #grid td .cv, :root[data-skin="win11"] #grid td input { font-family: var(--font-body); font-size: 13px; }
:root[data-skin="win11"] #sheetApp { border-radius: 8px; }

/* Ana sayfanın diğer mor vurguları (mobil Atmos AI kutusu, öneri/tanıtım kartları, Atmos AI alt düğmesi) */
:root[data-skin="win11"] .ndm-ai { border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); }
:root[data-skin="win11"] :is(.ndm-ai-spk, .nd-hero-spk) { color: var(--accent); opacity: .35; }
:root[data-skin="win11"] .ndm-ai-label { color: var(--accent); letter-spacing: .4px; font-weight: 600; }
:root[data-skin="win11"] :is(.ndm-ai-title b, .ndw-h-ic, .ndw-card-btn, .ndm-ai-go, .ndx-w-f button) { color: var(--accent); }
:root[data-skin="win11"] .nd-ask:focus-within { border-color: var(--accent); }
:root[data-skin="win11"] :is(.bn-ai, .ndx-promo-ic) { background: var(--accent); color: var(--on-accent); }
:root[data-skin="win11"] .ndx-promo-ic { border-radius: 6px; }
:root[data-skin="win11"] :is(.ndw-card, .ndx-promo) { background: var(--bg-surface); border-radius: 8px; }
:root[data-skin="win11"] .ndw-card-ic { color: var(--on-accent); border-radius: 6px; }