/* ============================================================
 * Cam görünüm
 *
 * Yalnız html[data-gorunum="cam"] varken uygulanır (appnav.js, kişisel tercih).
 * Her zaman koyu: cam etkisi koyu zeminde görünür.
 *
 * Zemin değiştirilebilir (kullanıcı menüsü → Arka planı değiştir):
 *  - "Canlı sistem odası": satır içi SVG (#camZemin), dolaplardaki port/disk ışıkları
 *    yanıp söner. Satır içi çünkü arka plan görseli olarak her kıpırtıda bütün sayfa
 *    yeniden çizilirdi; böyle yalnız değişen küçük ışık boyanır.
 *  - Hazır görseller ve kullanıcının kendi fotoğrafı: --cam-foto (CSS arka planı).
 * Camı cam gösteren şey arkadaki net kenarlardır: kart üstüne gelince bulanıklaşırlar.
 *
 * Ölçüler ürünün sıkı ölçeğindedir (2026-11-02 kararı): klasik görünümden büyük değil.
 * ============================================================ */

html[data-gorunum="cam"] {
    --cam-bosluk: 10px;
    --cam-ust: 34px;                      /* üst haplarının yüksekliği */
    --cam-ray: 54px;                      /* dar kenar çubuğu */
    --cam-ray-genis: 216px;
    --cam-ust-alan: calc(var(--cam-ust) + var(--cam-bosluk) * 2);
    --appnav-height: var(--cam-ust-alan);
    --cam-r-kart: 14px;

    --cam-yuzey: linear-gradient(180deg, rgba(20, 26, 37, 0.56), rgba(9, 12, 19, 0.50));
    --cam-yuzey-duz: rgba(255, 255, 255, 0.07);
    --cam-yuzey-kat: rgba(16, 20, 29, 0.90);
    --cam-kenar: rgba(255, 255, 255, 0.11);
    --cam-kenar-isik: linear-gradient(150deg, rgba(235, 244, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 28%,
                      rgba(255, 255, 255, 0.03) 58%, rgba(200, 225, 255, 0.18) 100%);
    --cam-cizgi: rgba(0, 0, 0, 0.35);
    --cam-isik: rgba(255, 255, 255, 0.15);
    --cam-golge: 0 14px 30px -14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.3);
    --cam-golge-kucuk: 0 4px 12px -6px rgba(0, 0, 0, 0.6);
    --cam-hover: rgba(255, 255, 255, 0.07);
    --cam-secili: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.10));
    --cam-secili-kenar: rgba(255, 255, 255, 0.26);
    --cam-secili-golge: 0 4px 12px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    --cam-ipucu-bg: rgba(232, 236, 242, 0.95);
    --cam-ipucu-fg: #12161D;
    --cam-dugme: linear-gradient(180deg, #FBB27A 0%, #F08A45 55%, #DE6C2C 100%);
    --cam-dugme-fg: #241009;
    --cam-dugme-golge: 0 4px 14px -6px rgba(240, 138, 69, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --cam-marka: radial-gradient(circle at 32% 26%, #FFC08F 0%, #EE7C3A 48%, #B8461A 100%);
    --cam-parilti: rgba(242, 146, 79, 0.18);
    --cam-bulanik: blur(18px) saturate(115%);
    --cam-perde: rgba(4, 6, 9, 0.6);
    /* Fotoğrafın üstüne binen karartma: yazı her zemin üstünde okunur kalsın. */
    --cam-karartma: linear-gradient(180deg, rgba(5, 7, 10, 0.30) 0%, rgba(5, 7, 10, 0.48) 100%);

    --gray-50:  #0F1217; --gray-100: #141820; --gray-150: #1A1F28; --gray-200: #222833; --gray-300: #2E3541;
    --gray-400: #67707D; --gray-500: #8C95A1; --gray-600: #AAB2BC; --gray-700: #C7CDD5; --gray-800: #E1E5EA; --gray-900: #F2F4F7;

    /* Sayfaların kendi bölümleri zeminini --bg'den alır: fotoğraf üstünde okunur, koyu yarı saydam. */
    --bg:               rgba(14, 18, 26, 0.62);
    --bg-elevated:      rgba(18, 23, 32, 0.92);
    --bg-subtle:        rgba(255, 255, 255, 0.03);
    --bg-muted:         rgba(255, 255, 255, 0.07);
    --bg-overlay:       rgba(4, 6, 9, 0.6);
    --bg-frosted:       rgba(14, 18, 26, 0.66);

    --fg:               #F1F4F8;
    --fg-secondary:     #AEB6C1;
    --fg-tertiary:      #8A929E;
    --fg-muted:         #6B737F;
    --fg-inverse:       #0B0E13;

    --border-subtle:    rgba(255, 255, 255, 0.08);
    --border-default:   rgba(255, 255, 255, 0.13);
    --border-strong:    rgba(255, 255, 255, 0.22);
    --rule:             rgba(255, 255, 255, 0.07);
    --rule-strong:      rgba(255, 255, 255, 0.12);

    /* Vurgu, hem koyu zeminde yazı (≥4.5) hem üstünde beyaz yazı (~4.3) okunacak tonda. */
    --color-blue:       #D9692A;
    --color-blue-dark:  #E57B3C;
    --color-blue-light: #F9C29A;
    --color-green:      #4FD18B;
    --color-orange:     #F4B649;
    --color-red:        #F26B61;
    --color-cyan:       #6CB9EC;

    --accent:           #D9692A;
    --accent-hover:     #E57B3C;
    --accent-fg:        #FFFFFF;
    --accent-bg-soft:   rgba(242, 146, 79, 0.15);
    --accent-border:    rgba(242, 146, 79, 0.40);
    --accent-ring:      rgba(242, 146, 79, 0.34);

    --success:          var(--color-green);
    --success-bg-soft:  rgba(79, 209, 139, 0.14);
    --warning:          var(--color-orange);
    --warning-bg-soft:  rgba(244, 182, 73, 0.15);
    --danger:           var(--color-red);
    --danger-bg-soft:   rgba(242, 107, 97, 0.15);
    --info:             var(--color-cyan);
    --info-bg-soft:     rgba(108, 185, 236, 0.14);

    --shell-fg:         #F1F4F8;
    --shell-fg-dim:     #B9C1CB;
    --shell-fg-faint:   #8A929E;
    --shell-hover:      rgba(255, 255, 255, 0.07);
    --shell-active:     rgba(255, 255, 255, 0.11);
    --shell-accent:     #F2924F;
    --shell-border:     rgba(255, 255, 255, 0.08);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.65);
    --shadow-xl: 0 30px 60px -16px rgba(0, 0, 0, 0.7);

    /* Eski sayfaların kendi değişken adları (sistemde tanımsız; yedek değerleri açık renkti). */
    --bg-primary:       rgba(255, 255, 255, 0.05);
    --bg-secondary:     rgba(255, 255, 255, 0.07);
    --bg-tertiary:      rgba(255, 255, 255, 0.10);
    --bg-card:          var(--cam-yuzey-kat);
    --bg-2:             rgba(255, 255, 255, 0.05);
    --text-primary:     var(--fg);
    --text-secondary:   var(--fg-secondary);
    --text-tertiary:    var(--fg-tertiary);
    --text-muted:       var(--fg-tertiary);
    --primary-color:    var(--accent);
    --success-color:    var(--success);
    --warning-color:    var(--warning);
    --danger-color:     var(--danger);
    --border-light:     var(--border-subtle);
    --border-color:     var(--border-default);
    --un-primary:       var(--accent);
    --un-gray-150:      rgba(255, 255, 255, 0.07);
    --un-gray-200:      rgba(255, 255, 255, 0.12);
    --un-gray-300:      rgba(255, 255, 255, 0.18);
    --un-gray-500:      var(--fg-tertiary);
    --un-gray-600:      var(--fg-secondary);
    --un-gray-900:      var(--fg);
    color-scheme: dark;
}

html[data-gorunum="cam"][data-ray="genis"] { --cam-ray: var(--cam-ray-genis); }

/* Cam görünüm hep koyu: tema düğmesi bu görünümde iş görmez. */
html[data-gorunum="cam"] #appnavTheme { display: none; }

/* ---------------------------------------------------------------- zemin */
html[data-gorunum="cam"] body {
    background: var(--cam-karartma), var(--cam-foto, none) center / cover no-repeat, #05070A;
    background-attachment: fixed;
    color: var(--fg);
    padding: var(--cam-ust-alan) 0 var(--cam-bosluk) calc(var(--cam-ray) + var(--cam-bosluk) * 2);
}
/* Canlı sistem odası: sayfanın arkasında sabit katman */
#camZemin {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: #05070A;
}
#camZemin > svg { width: 100%; height: 100%; display: block; }
#camZemin::after { content: ''; position: absolute; inset: 0; background: var(--cam-karartma); }

html[data-gorunum="cam"] .layout { min-height: calc(100vh - var(--cam-ust-alan)); }
html[data-gorunum="cam"] .layout__main,
html[data-gorunum="cam"] .layout__content { background: transparent; }

/* ---------------------------------------------------------------- cam yüzey (kartlar) */
html[data-gorunum="cam"] :is(.card, .panel, .stat, .stat-card, .info-card, .readout__cell, .ob-block, .empty) {
    position: relative;
    background: var(--cam-yuzey);
    border: 0;
    border-radius: var(--cam-r-kart);
    box-shadow: 0 0 0 1px var(--cam-cizgi), var(--cam-golge);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
}
/* Kenar ışığı: 1 px degrade çerçeve (maske ile yalnız kenar boyanır). */
html[data-gorunum="cam"] :is(.card, .panel, .stat, .stat-card, .info-card, .readout__cell, .ob-block, .empty)::after,
html[data-gorunum="cam"] .appnav__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--cam-kenar-isik);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
html[data-gorunum="cam"] :is(.card--hover, a.stat, a.readout__cell, .stat-card) {
    transition: transform var(--duration-base) var(--ease-out);
}
html[data-gorunum="cam"] :is(.card--hover, a.stat, a.readout__cell, .stat-card):hover { transform: translateY(-1px); }
html[data-gorunum="cam"] .card__header,
html[data-gorunum="cam"] .card__footer { border-color: var(--rule); }

/* Üstte açılan katmanlar: daha az saydam ki altındaki yazı karışmasın. */
html[data-gorunum="cam"] :is(.sheet, .toast, .tooltip, .appnav__panel, .appnav__usermenu, .appnav__results, .appnav__drawer, .appnav-uyari, ._cd_dialog, .dropdown-menu, .cam-zemin-pencere) {
    background: var(--cam-yuzey-kat);
    border: 1px solid var(--cam-kenar);
    box-shadow: inset 0 1px 0 var(--cam-isik), 0 0 0 1px var(--cam-cizgi), var(--cam-golge);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
}
html[data-gorunum="cam"] .sheet { border-radius: var(--radius-2xl); }
html[data-gorunum="cam"] .sheet-backdrop {
    background: var(--cam-perde);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------- denetimler (ölçü klasikle aynı) */
html[data-gorunum="cam"] .btn { border-radius: var(--radius-full); }
html[data-gorunum="cam"] :is(.btn--primary, .btn-primary) {
    background: var(--cam-dugme);
    color: var(--cam-dugme-fg);
    border: 0;
    box-shadow: var(--cam-dugme-golge);
    font-weight: var(--fw-semibold);
}
html[data-gorunum="cam"] :is(.btn--primary, .btn-primary):hover:not(:disabled) { background: var(--cam-dugme); filter: brightness(1.06); }
html[data-gorunum="cam"] :is(.btn--secondary, .btn-secondary, .btn-outline, .btn--ghost:hover) {
    background: var(--cam-yuzey-duz);
    color: var(--fg);
    border: 1px solid var(--cam-kenar);
    box-shadow: inset 0 1px 0 var(--cam-isik), 0 0 0 1px var(--cam-cizgi);
}
html[data-gorunum="cam"] :is(.btn--secondary, .btn-secondary, .btn-outline):hover:not(:disabled) { background: var(--cam-hover); }
html[data-gorunum="cam"] :is(.btn-primary, .btn-secondary, .btn-outline, .icon-btn) { border-radius: var(--radius-full); }
/* Durum düğmeleri: açık yeşil/sarı üstünde koyu yazı; kırmızı biraz koyulaşır, beyaz yazı kalır. */
html[data-gorunum="cam"] :is(.btn--success, .btn--warning, .btn-success, .btn-warning) { color: #0E1319; }
html[data-gorunum="cam"] :is(.btn--danger, .btn-danger) { background: #D24A40; color: #FFFFFF; }

html[data-gorunum="cam"] :is(.input, .select, .textarea, .form-control, .searchbox input) {
    background: var(--cam-yuzey-duz);
    border: 1px solid var(--cam-kenar);
    box-shadow: inset 0 1px 2px var(--cam-cizgi);
    color: var(--fg);
}
html[data-gorunum="cam"] :is(.input, .select, .textarea, .form-control):focus {
    border-color: var(--accent-border);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
html[data-gorunum="cam"] option { background: var(--gray-100); color: var(--fg); }

html[data-gorunum="cam"] .segmented { background: var(--cam-yuzey-duz); border: 1px solid var(--cam-kenar); border-radius: var(--radius-full); }
html[data-gorunum="cam"] .segmented__item { border-radius: var(--radius-full); }
html[data-gorunum="cam"] :is(.segmented__item--active, .segmented__item[aria-pressed="true"]) {
    background: var(--cam-secili);
    box-shadow: var(--cam-secili-golge);
    color: var(--fg);
}
html[data-gorunum="cam"] :is(.badge, .version-tag) { border-radius: var(--radius-full); }

html[data-gorunum="cam"] :is(.table, table) thead th { background: transparent; border-bottom: 1px solid var(--rule-strong); }
html[data-gorunum="cam"] .table td { border-color: var(--rule); }
html[data-gorunum="cam"] .table tbody tr:hover { background: var(--cam-hover); }

html[data-gorunum="cam"] *::-webkit-scrollbar-thumb { background: var(--border-default); background-clip: content-box; }

/* Sayfanın kendi yapışkan başlık şeridi: yüzen cam şerit. */
html[data-gorunum="cam"] .topbar {
    margin: 0 var(--cam-bosluk) var(--space-3) 0;
    background: var(--cam-yuzey-kat);
    border: 1px solid var(--cam-kenar);
    border-radius: var(--radius-xl);
    box-shadow: inset 0 1px 0 var(--cam-isik), var(--cam-golge-kucuk);
}

/* ================================================================
 * KABUK — yüzen cam kenar çubuğu + üst haplar
 * Camın bulanıklığı çubuğun kendisinde değil ::before katmanındadır: bulanıklık
 * süzgeci olan öğe, içindeki "fixed" öğelerin (üst haplar) konum referansı olur.
 * ================================================================ */
html[data-gorunum="cam"] .appnav {
    position: fixed;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
    background: none;
    border: 0;
    color: var(--shell-fg);
}

html[data-gorunum="cam"] .appnav__inner {
    position: fixed;
    z-index: var(--z-topbar);
    top: var(--cam-bosluk);
    bottom: var(--cam-bosluk);
    left: var(--cam-bosluk);
    width: var(--cam-ray);
    height: auto;
    max-width: none;
    margin: 0;
    padding: 9px 7px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    border-radius: 22px;
    isolation: isolate;
}
html[data-gorunum="cam"] .appnav__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(130% 30% at 50% 100%, var(--cam-parilti), transparent 72%), var(--cam-yuzey);
    box-shadow: 0 0 0 1px var(--cam-cizgi), var(--cam-golge);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
}

/* marka */
html[data-gorunum="cam"] .appnav__brand {
    border: 0;
    padding: 0 0 6px;
    height: auto;
    justify-content: center;
    color: var(--shell-fg);
    gap: 8px;
}
html[data-gorunum="cam"] .appnav__mark {
    width: 30px;
    height: 30px;
}
html[data-gorunum="cam"] .appnav__brand-text { display: none; }
html[data-gorunum="cam"] .appnav__brand-meta { color: var(--shell-fg-faint); }

/* genişlet/daralt düğmesi: çubuğun sağ kenarına binen küçük beyaz yuvarlak */
html[data-gorunum="cam"] .appnav__ray-dugme {
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: -10px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: #FFFFFF;
    color: #1A1F27;
    box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    z-index: 2;
}
html[data-gorunum="cam"] .appnav__ray-dugme svg { width: 11px; height: 11px; }
html[data-gorunum="cam"] .appnav__ray-dugme:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 2px; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__ray-dugme svg { transform: rotate(180deg); }

/* grup listesi */
html[data-gorunum="cam"] .appnav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    flex: 1;
    min-height: 0;
}
html[data-gorunum="cam"] .appnav__group:first-child::after {
    content: '';
    display: block;
    width: 14px;
    height: 2px;
    margin: 5px auto 4px;
    border-radius: 2px;
    background: var(--border-default);
}
html[data-gorunum="cam"] .appnav__group:last-child { margin-top: auto; }

html[data-gorunum="cam"] .appnav__trigger {
    position: relative;
    width: 38px;
    height: 38px;
    margin-inline: auto;
    padding: 0;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--shell-fg-dim);
}
html[data-gorunum="cam"] .appnav__ikon { display: inline-flex; flex-shrink: 0; }
html[data-gorunum="cam"] .appnav__ikon svg { width: 17px; height: 17px; }
html[data-gorunum="cam"] .appnav__etiket,
html[data-gorunum="cam"] .appnav__trigger .appnav__chev {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
html[data-gorunum="cam"] .appnav__trigger:hover,
html[data-gorunum="cam"] .appnav__trigger[aria-expanded="true"] {
    background: var(--shell-hover);
    color: var(--shell-fg);
}
html[data-gorunum="cam"] .appnav__trigger--current,
html[data-gorunum="cam"] .appnav__trigger--current:hover {
    background: var(--cam-secili);
    border-color: var(--cam-secili-kenar);
    box-shadow: var(--cam-secili-golge);
    color: var(--shell-fg);
}

/* dar çubukta grup adı: sağda beliren küçük hap */
html[data-gorunum="cam"] .appnav__trigger::after {
    content: attr(data-etiket);
    position: absolute;
    left: calc(100% + 12px);
    right: auto;
    top: 50%;
    bottom: auto;
    height: auto;
    width: max-content;
    transform: translate(-3px, -50%);
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--cam-ipucu-bg);
    color: var(--cam-ipucu-fg);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    box-shadow: var(--cam-golge-kucuk);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    z-index: 3;
}
html[data-gorunum="cam"] .appnav__trigger:is(:hover, :focus-visible):not([aria-expanded="true"])::after {
    opacity: 1;
    transform: translate(0, -50%);
}

/* bekleyen sayısı: simgenin köşesinde kırmızı nokta */
html[data-gorunum="cam"] .appnav__trigger .appnav__rozet {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 14px;
    height: 14px;
    margin: 0;
    padding: 0 3px;
    font-size: 9px;
    box-shadow: 0 0 0 2px var(--cam-yuzey-kat);
}

/* açılır panel: çubuğun sağında */
html[data-gorunum="cam"] .appnav__panel {
    top: -4px;
    left: calc(100% + 14px);
    min-width: 280px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--radius-xl);
    animation-name: camPanel;
}
html[data-gorunum="cam"] .appnav__group:nth-last-child(-n+2) .appnav__panel { top: auto; bottom: -4px; }
html[data-gorunum="cam"] .appnav__panel--wide { min-width: 520px; }
@keyframes camPanel {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: none; }
}
html[data-gorunum="cam"] .appnav__link:hover { background: var(--cam-hover); }
html[data-gorunum="cam"] .appnav__link--current { background: var(--cam-secili); box-shadow: var(--cam-secili-golge); }
html[data-gorunum="cam"] .appnav__link--current .appnav__link-title { color: var(--fg); }

/* ---------------------------------------------------------------- geniş kenar çubuğu */
html[data-gorunum="cam"][data-ray="genis"] .appnav__inner { padding: 10px 8px; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__brand { justify-content: flex-start; padding: 0 4px 8px; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__brand-text { display: flex; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__menu {
    overflow-y: auto;
    margin-right: -4px;
    padding-right: 4px;
}
html[data-gorunum="cam"][data-ray="genis"] .appnav__group:first-child::after { margin: 4px 8px; width: auto; height: 1px; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__group:last-child { margin-top: auto; padding-top: 4px; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__trigger {
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 9px;
    justify-content: flex-start;
    border-radius: 10px;
    font-size: var(--text-base);
}
html[data-gorunum="cam"][data-ray="genis"] .appnav__ikon svg { width: 16px; height: 16px; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__etiket {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip: auto;
    flex: 1;
    text-align: left;
}
html[data-gorunum="cam"][data-ray="genis"] .appnav__trigger .appnav__chev {
    position: static;
    width: 12px; height: 12px;
    overflow: visible;
    clip: auto;
}
html[data-gorunum="cam"][data-ray="genis"] .appnav__trigger::after { display: none; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__trigger .appnav__rozet { position: static; box-shadow: none; }
/* Grubun kendisi değil, içindeki sayfa seçili görünür; tek sayfalık grup (Genel Bakış) hap olur. */
html[data-gorunum="cam"][data-ray="genis"] button.appnav__trigger--current {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    font-weight: var(--fw-semibold);
}
html[data-gorunum="cam"][data-ray="genis"] button.appnav__trigger--current:hover { background: var(--shell-hover); }
html[data-gorunum="cam"][data-ray="genis"] .appnav__panel {
    position: static;
    min-width: 0;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin: 1px 0 4px 17px;
    padding: 1px 0 1px 9px;
    background: none;
    border: 0;
    border-left: 1px solid var(--border-default);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
}
html[data-gorunum="cam"][data-ray="genis"] .appnav__panel[hidden] { display: none; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__link { padding: 4px 8px; border-radius: 8px; }
html[data-gorunum="cam"][data-ray="genis"] .appnav__link-title { font-size: var(--text-sm); color: var(--shell-fg-dim); }
html[data-gorunum="cam"][data-ray="genis"] .appnav__link:hover .appnav__link-title,
html[data-gorunum="cam"][data-ray="genis"] .appnav__link--current .appnav__link-title { color: var(--shell-fg); }
html[data-gorunum="cam"][data-ray="genis"] .appnav__link-desc { display: none; }

/* ---------------------------------------------------------------- üst haplar */
html[data-gorunum="cam"] .appnav__right {
    position: fixed;
    z-index: var(--z-topbar);
    top: var(--cam-bosluk);
    right: var(--cam-bosluk);
    left: calc(var(--cam-ray) + var(--cam-bosluk) * 2);
    height: var(--cam-ust);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    pointer-events: none;
}
html[data-gorunum="cam"] .appnav__right > * { pointer-events: auto; }

/* Hapların ortak cam yüzeyi */
html[data-gorunum="cam"] :is(.appnav__iz, .appnav__search input, .appnav__btn, .appnav__user) {
    background: var(--cam-yuzey);
    border: 1px solid var(--cam-kenar);
    box-shadow: inset 0 1px 0 var(--cam-isik), 0 0 0 1px var(--cam-cizgi), var(--cam-golge-kucuk);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
    color: var(--shell-fg);
}

html[data-gorunum="cam"] .appnav__iz {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: var(--cam-ust);
    padding: 0 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    white-space: nowrap;
    min-width: 0;
}
html[data-gorunum="cam"] .appnav__iz:empty { display: none; }
html[data-gorunum="cam"] .appnav__iz svg { width: 11px; height: 11px; color: var(--shell-fg-faint); }
html[data-gorunum="cam"] .appnav__iz-grup { color: var(--shell-fg-faint); }
html[data-gorunum="cam"] .appnav__iz-sayfa { font-weight: var(--fw-semibold); }

html[data-gorunum="cam"] .appnav__search { width: min(340px, 32vw); margin-inline: auto; }
html[data-gorunum="cam"] .appnav__search input {
    height: var(--cam-ust);
    padding: 0 52px 0 30px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}
html[data-gorunum="cam"] .appnav__search input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-ring); }
html[data-gorunum="cam"] .appnav__search-icon { left: 11px; width: 13px; height: 13px; }
html[data-gorunum="cam"] .appnav__kbd {
    display: inline-flex;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-default);
    color: var(--shell-fg-faint);
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    pointer-events: none;
}
html[data-gorunum="cam"] .appnav__results { top: calc(100% + 8px); left: 0; right: auto; width: 100%; border-radius: var(--radius-xl); }

html[data-gorunum="cam"] .appnav__btn {
    width: var(--cam-ust);
    height: var(--cam-ust);
    border-radius: 50%;
}
html[data-gorunum="cam"] .appnav__btn svg { width: 15px; height: 15px; }
html[data-gorunum="cam"] .appnav__btn:hover { color: var(--shell-fg); }
html[data-gorunum="cam"] .appnav__zil-sayi { top: -3px; right: -3px; }

html[data-gorunum="cam"] .appnav__user {
    height: var(--cam-ust);
    padding: 0 11px 0 4px;
    margin: 0;
    border-radius: var(--radius-full);
    gap: 7px;
}
html[data-gorunum="cam"] .appnav__avatar {
    position: relative;
    width: 24px;
    height: 24px;
    background: var(--cam-marka);
    color: #2A1206;
    font-weight: var(--fw-bold);
}
/* çevrimiçi noktası */
html[data-gorunum="cam"] .appnav__avatar::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3DCB7A;
    box-shadow: 0 0 0 2px var(--cam-yuzey-kat);
}
html[data-gorunum="cam"] .appnav__usermenu { top: calc(100% + 8px); border-radius: var(--radius-xl); }
html[data-gorunum="cam"] .appnav__usermenu a:hover,
html[data-gorunum="cam"] .appnav__usermenu button:hover { background: var(--cam-hover); }
html[data-gorunum="cam"] .appnav__usermenu-head { border-color: var(--rule); }
/* "Arka planı değiştir" yalnız cam görünümde */
#appnavZemin { display: none; }
html[data-gorunum="cam"] #appnavZemin { display: block; }

/* geniş masaüstünde çekmece yok */
html[data-gorunum="cam"] .appnav__burger { display: none; }
@media (max-width: 1100px) {
    html[data-gorunum="cam"] .appnav__menu { display: flex; }
}
@media (max-width: 1180px) {
    html[data-gorunum="cam"] .appnav__user-name { display: none; }
    html[data-gorunum="cam"] .appnav__user { padding-right: 4px; }
}

/* ---------------------------------------------------------------- arka plan seçici */
.cam-zemin-pencere {
    position: fixed;
    z-index: var(--z-modal);
    top: calc(var(--cam-ust-alan, 60px) + 4px);
    right: var(--cam-bosluk, 10px);
    width: min(420px, calc(100vw - 20px));
    padding: 10px;
    border-radius: var(--radius-xl);
    color: var(--fg);
    font-size: var(--text-sm);
}
.cam-zemin-pencere__bas { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: var(--fw-semibold); }
.cam-zemin-pencere__kapat { width: 24px; height: 24px; border-radius: 50%; color: var(--fg-secondary); font-size: 16px; line-height: 1; }
.cam-zemin-pencere__kapat:hover { background: var(--cam-hover); color: var(--fg); }
.cam-zemin-pencere__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 60vh; overflow-y: auto; }
.cam-zemin-secenek {
    display: grid;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-align: left;
    color: var(--fg-secondary);
    font-size: var(--text-xs);
}
.cam-zemin-secenek:hover { background: var(--cam-hover); color: var(--fg); }
.cam-zemin-secenek[aria-pressed="true"] { border-color: var(--accent-border); color: var(--fg); background: var(--accent-bg-soft); }
.cam-zemin-secenek:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cam-zemin-secenek__onizleme {
    display: block;
    height: 56px;
    border-radius: 7px;
    background: #05070A center / cover no-repeat;
    box-shadow: inset 0 0 0 1px var(--cam-kenar);
}
.cam-zemin-pencere__alt { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cam-zemin-pencere__not { margin-top: 8px; font-size: var(--text-2xs); color: var(--fg-tertiary); line-height: 1.4; }
.cam-zemin-pencere__hata { margin-top: 6px; font-size: var(--text-xs); color: var(--danger); }
.cam-zemin-pencere__hata:empty { display: none; }

/* ================================================================
 * Telefon / dar ekran: kenar çubuğu alt cam rıhtım olur
 * ================================================================ */
@media (max-width: 900px) {
    html[data-gorunum="cam"] {
        --cam-bosluk: 8px;
        --cam-ray: 0px;
    }
    html[data-gorunum="cam"] body { padding: var(--cam-ust-alan) 0 70px; }

    html[data-gorunum="cam"] .appnav__inner {
        top: auto;
        bottom: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        height: 50px;
        padding: 5px 8px;
        flex-direction: row;
        align-items: center;
        border-radius: 18px;
    }
    html[data-gorunum="cam"] .appnav__brand,
    html[data-gorunum="cam"] .appnav__ray-dugme { display: none; }
    html[data-gorunum="cam"] .appnav__menu { flex-direction: row; justify-content: space-around; gap: 2px; }
    html[data-gorunum="cam"] .appnav__group:first-child::after { display: none; }
    html[data-gorunum="cam"] .appnav__group:last-child { margin-top: 0; }
    html[data-gorunum="cam"] .appnav__group:nth-child(n+6) { display: none; }   /* kalanlar çekmecede */
    html[data-gorunum="cam"] .appnav__trigger::after { display: none; }
    html[data-gorunum="cam"] .appnav__panel,
    html[data-gorunum="cam"] .appnav__group:nth-last-child(-n+2) .appnav__panel {
        position: fixed;
        left: 8px;
        right: 8px;
        top: auto;
        bottom: 66px;
        min-width: 0;
        max-height: 60vh;
        animation-name: camPanelYukari;
    }
    html[data-gorunum="cam"] .appnav__panel--wide { grid-template-columns: 1fr; }
    @keyframes camPanelYukari {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }

    html[data-gorunum="cam"] .appnav__right { left: var(--cam-bosluk); gap: 5px; }
    html[data-gorunum="cam"] .appnav__iz { margin-right: auto; padding: 0 10px; }
    html[data-gorunum="cam"] .appnav__iz-grup,
    html[data-gorunum="cam"] .appnav__iz svg { display: none; }
    html[data-gorunum="cam"] .appnav__search { display: none; }
    html[data-gorunum="cam"] .appnav__burger { display: inline-flex; }

    html[data-gorunum="cam"] .appnav__drawer {
        inset: calc(var(--cam-ust-alan) + 2px) 8px 66px 8px;
        border-radius: var(--radius-2xl);
        padding: var(--space-4);
    }
    html[data-gorunum="cam"] .appnav__drawer-title,
    html[data-gorunum="cam"] .appnav__drawer-link { border-color: var(--rule); }
}

/* ================================================================
 * Sayfalar — ölçüler klasik görünümle aynı ya da daha sıkı
 * ================================================================ */

/* Genel Bakış: okuma şeridi → küçük cam ölçüm kartları, bloklar → cam kartlar */
html[data-gorunum="cam"] .ob { padding-top: var(--space-2); }
html[data-gorunum="cam"] .ob-head { border-bottom: 0; padding-bottom: var(--space-3); }
html[data-gorunum="cam"] .ob-head h1 { font-size: var(--text-2xl); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
html[data-gorunum="cam"] .ob-head__meta { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
html[data-gorunum="cam"] .readout { gap: 8px; border-bottom: 0; }
html[data-gorunum="cam"] .readout__cell,
html[data-gorunum="cam"] .readout__cell + .readout__cell {
    padding: 9px 12px 10px;
    border: 0;
}
html[data-gorunum="cam"] .readout__value {
    margin-top: 4px;
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
}
html[data-gorunum="cam"] .readout__note { margin-top: 2px; }
html[data-gorunum="cam"] a.readout__cell:hover { background: var(--cam-yuzey); color: inherit; }
html[data-gorunum="cam"] .ob-cols { gap: 10px; margin-top: 10px; }
html[data-gorunum="cam"] .ob-block { padding: 10px 14px 12px; }
html[data-gorunum="cam"] .ob-block + .ob-block { margin-top: 10px; }
html[data-gorunum="cam"] .ob-block__head { border-bottom-color: var(--rule); }
html[data-gorunum="cam"] .queue tbody tr:hover { background: var(--cam-hover); }
html[data-gorunum="cam"] .vers__bar { height: 4px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
html[data-gorunum="cam"] .vers__bar span { border-radius: 999px; background: var(--cam-dugme); }
html[data-gorunum="cam"] .tag { border-left: 0; padding: 1px 7px; border-radius: 999px; background: var(--bg-muted); }
html[data-gorunum="cam"] .tag--kritik  { background: var(--danger-bg-soft); }
html[data-gorunum="cam"] .tag--yuksek  { background: var(--warning-bg-soft); }
html[data-gorunum="cam"] .tag--acik    { background: var(--accent-bg-soft); }
html[data-gorunum="cam"] .tag--cozuldu { background: var(--success-bg-soft); }
html[data-gorunum="cam"] .ob-foot { border-top: 0; margin-top: var(--space-6); }

/* ---- Satır içi sabit açık renkler (eski sayfalar ve betiklerin ürettiği kutular) ----
 * Önce nötr açık zeminler koyu cama döner; ardından renkli uyarı kutuları kendi renginin
 * koyu-saydam hâline (aynı özgüllük, sonra yazılan kazanır: #fff önekli renkler düzelir). */
html[data-gorunum="cam"] :is([style*="background:#fff" i], [style*="background: #fff" i], [style*="background-color:#fff" i], [style*="background-color: #fff" i],
    [style*="background:white" i], [style*="background: white" i], [style*="background:#f8f9fa" i], [style*="background: #f8f9fa" i],
    [style*="background:#f1f3f5" i], [style*="background: #f1f3f5" i], [style*="background:#f5f5f5" i], [style*="background: #f5f5f5" i],
    [style*="background:#fafafa" i], [style*="background: #fafafa" i], [style*="background:#f0f0f0" i], [style*="background: #f0f0f0" i],
    [style*="background:#f8fafc" i], [style*="background: #f8fafc" i], [style*="background:#f9fafb" i], [style*="background: #f9fafb" i],
    [style*="background:#f3f4f6" i], [style*="background: #f3f4f6" i]) {
    background: var(--cam-yuzey-kat) !important;
    color: var(--fg) !important;
    border-color: var(--cam-kenar) !important;
}
html[data-gorunum="cam"] :is([style*="background:#fff3cd" i], [style*="background: #fff3cd" i], [style*="background:#fff8e1" i], [style*="background: #fff8e1" i],
    [style*="background:#fff7ed" i], [style*="background: #fff7ed" i], [style*="background:#fef3c7" i], [style*="background: #fef3c7" i]) {
    background: var(--warning-bg-soft) !important; color: var(--warning) !important;
}
html[data-gorunum="cam"] :is([style*="background:#e7f5ff" i], [style*="background: #e7f5ff" i], [style*="background:#e3f2fd" i], [style*="background: #e3f2fd" i],
    [style*="background:#e0f2fe" i], [style*="background: #e0f2fe" i], [style*="background:#eff6ff" i], [style*="background: #eff6ff" i]) {
    background: var(--info-bg-soft) !important; color: var(--info) !important;
}
html[data-gorunum="cam"] :is([style*="background:#d5f5e3" i], [style*="background: #d5f5e3" i], [style*="background:#e8f5e9" i], [style*="background: #e8f5e9" i],
    [style*="background:#dcfce7" i], [style*="background: #dcfce7" i], [style*="background:#ecfdf5" i], [style*="background: #ecfdf5" i]) {
    background: var(--success-bg-soft) !important; color: var(--success) !important;
}
html[data-gorunum="cam"] :is([style*="background:#fde8e8" i], [style*="background: #fde8e8" i], [style*="background:#ffebee" i], [style*="background: #ffebee" i],
    [style*="background:#fee2e2" i], [style*="background: #fee2e2" i], [style*="background:#fef2f2" i], [style*="background: #fef2f2" i]) {
    background: var(--danger-bg-soft) !important; color: var(--danger) !important;
}
html[data-gorunum="cam"] :is([style*="background:#faf5ff" i], [style*="background: #faf5ff" i], [style*="background:#f0e5ff" i], [style*="background: #f0e5ff" i]) { background: rgba(167, 139, 250, 0.16) !important; color: #C4B5FD !important; }
/* Koyu sabit yazı renkleri koyu zeminde kaybolur. */
html[data-gorunum="cam"] :is([style*="color:#333" i], [style*="color: #333" i], [style*="color:#212529" i], [style*="color: #212529" i],
    [style*="color:#495057" i], [style*="color: #495057" i], [style*="color:#222" i], [style*="color: #222" i], [style*="color:#1f2937" i],
    [style*="color: #1f2937" i], [style*="color:#374151" i], [style*="color: #374151" i], [style*="color:#000" i], [style*="color: #000" i]) {
    color: var(--fg) !important;
}

/* Ters renkli kısa bildirimler ve ipucu: yazı rengini --bg'den alıyorlardı; camda --bg saydam. */
html[data-gorunum="cam"] :is(.tooltip, .gl-toast, .hd-toast, .gmz-bildirim div) {
    background: var(--cam-yuzey-kat);
    color: var(--fg);
    border: 1px solid var(--cam-kenar);
}
html[data-gorunum="cam"] .gl-toast.hata { background: #D24A40; color: #FFFFFF; }
/* Vurgu degradeli satır içi kartlar (ör. Cihaz İmha OCR): camda iki ucu da turuncu olup düz bloğa dönüyordu. */
html[data-gorunum="cam"] [style*="var(--color-blue-dark),var(--accent)" i] {
    background: linear-gradient(135deg, rgba(217, 105, 42, 0.34), rgba(217, 105, 42, 0.12)), var(--cam-yuzey) !important;
}
/* Lisans kartı: renkli degrade üstündeki soluk yazılar */
html[data-gorunum="cam"] .lic-hero .footnote { color: rgba(255, 255, 255, 0.82); }

/* Cihaz Zimmet: sekme çubuğu, adım göstergesi */
html[data-gorunum="cam"] :is(.tabs, .stepper) {
    background: var(--cam-yuzey);
    border-color: var(--cam-kenar);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
}
html[data-gorunum="cam"] .step-number { background: rgba(255, 255, 255, 0.06); border-color: var(--border-default); color: var(--fg-secondary); }
html[data-gorunum="cam"] .tab-btn.tab-btn-admin { color: var(--warning); }
html[data-gorunum="cam"] .tab-btn.tab-btn-admin.active { background: #B9601F; color: #FFFFFF; }

/* Karantina ve M365 rozetleri: açık zemin yerine renkli saydam */
html[data-gorunum="cam"] :is(.badge-q--phish, .badge-q--highconfphish) { background: rgba(234, 88, 12, 0.18); color: #FDBA74; }
html[data-gorunum="cam"] .badge-q--malware { background: rgba(124, 58, 237, 0.22); color: #C4B5FD; }
html[data-gorunum="cam"] .badge-green { color: #6EE7A0; }
html[data-gorunum="cam"] .badge-blue { color: #93C5FD; }

/* Ajan Güncelleme: ölçüm kartlarının üst renk çizgisi yerine renkli simge yeter */
html[data-gorunum="cam"] .stat-card::before { display: none; }
html[data-gorunum="cam"] .as-lejant button { background: var(--cam-yuzey-duz); border-color: var(--cam-kenar); }

/* Giriş ekranı (js/cam-giris.js): kenar çubuğu yok, renkli lekeler yerine fotoğraf; kart cam. */
html[data-gorunum="cam"][data-sayfa="giris"] body { padding: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
html[data-gorunum="cam"][data-sayfa="giris"] .card { text-shadow: none; }
html[data-gorunum="cam"][data-sayfa="giris"] body::before,
html[data-gorunum="cam"][data-sayfa="giris"] body::after { display: none; }
html[data-gorunum="cam"] .urun-logo__acik-zemin { display: none !important; }
html[data-gorunum="cam"] .urun-logo__koyu-zemin { display: block !important; }
html[data-gorunum="cam"] .input-wrapper input { background: var(--cam-yuzey-duz); border-color: var(--cam-kenar); }
html[data-gorunum="cam"] .login-btn { background: var(--cam-dugme); color: var(--cam-dugme-fg); box-shadow: var(--cam-dugme-golge); }
html[data-gorunum="cam"] .spinner { border-color: rgba(36, 16, 9, 0.3); border-top-color: var(--cam-dugme-fg); }

/* ================================================================
 * Erişilebilirlik ve geri dönüş
 * ================================================================ */
/* Bulanıklık desteklenmiyor ya da saydamlık azaltılmış: yüzeyler opaklaşır. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-gorunum="cam"] { --cam-yuzey: var(--cam-yuzey-kat); --cam-yuzey-duz: var(--cam-yuzey-kat); }
}
@media (prefers-reduced-transparency: reduce) {
    html[data-gorunum="cam"] { --cam-yuzey: var(--cam-yuzey-kat); --cam-yuzey-duz: var(--cam-yuzey-kat); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-gorunum="cam"] :is(.card--hover, a.stat, a.readout__cell, .stat-card):hover { transform: none; }
}
@media print {
    html[data-gorunum="cam"] body { background: #fff; padding: 0; }
    html[data-gorunum="cam"] .appnav,
    #camZemin { display: none; }
}