/* ═══ Kuzgun kabuk: sol menü + üst bar + Genel bakış ölçüleri — 01-genel-bakis mockup'ı (1586×992) birebir ═══
   Yükleme sırası: kuzgun-home.css'ten SONRA (bu dosya onun ölçülerini geçersiz kılar). */

/* ── Sol menü (açık): 270px — 01 mockup'ından piksel ölçümü:
   logo 70px @ (38,44) r20 · "bregvorn" 29px @ x125 · "YAYIN ALANIN" 11px/2.2 aralık ·
   ilk öğe y163, öğe 48px + 7px boşluk, ikon x38 (20px), etiket x83 16px · ayırıcı y574 · Ayarlar y831 ── */
body:not(.railmini){padding-left:270px}
body:not(.railmini) .topbar{left:270px}
.rail{width:270px;padding:0}
.rail-brand{display:flex;align-items:center;gap:17px;padding:44px 0 0 38px}
.rail-brand .logo{width:70px;height:70px;border-radius:20px;box-shadow:0 12px 30px rgba(80,44,150,.38)}
.brand-wrap{display:flex;flex-direction:column;gap:0;padding-top:6px}
.brand-txt{font-size:29px;font-weight:750;letter-spacing:-1.1px;line-height:1;color:var(--kz-text);text-transform:lowercase}
.brand-sub{font-size:11px;letter-spacing:2.2px;line-height:1;margin-top:8px;color:var(--kz-muted);text-transform:uppercase}
.rail-nav{padding:49px 0 0}
.rail-item{position:relative;display:flex;align-items:center;gap:23px;width:100%;min-height:48px;margin:0 0 7px;padding:0 26px 0 38px;border-radius:0;color:var(--kz-muted);font-size:16px;font-weight:500;letter-spacing:-.1px;background:none;border:0;box-shadow:none}
.rail-item svg.sic{width:22px;height:22px;flex:0 0 22px;opacity:1;color:var(--kz-muted)}
.rail-item:hover{color:var(--kz-text);background:rgba(232,204,244,.04)}
.rail-item.active{color:var(--kz-text);font-weight:700;background:#252233}
.rail-item.active svg.sic{color:var(--kz-gold)}
.rail-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:0 4px 4px 0;background:var(--kz-gold);box-shadow:0 0 18px rgba(242,200,121,.55)}
.rail-item.active::after{content:"";position:absolute;right:26px;top:50%;width:9px;height:11px;transform:translateY(-50%);background:var(--kz-gold);clip-path:polygon(0 0,100% 50%,0 100%)}
.ri-label{flex:0 1 auto;min-width:0;overflow:visible;white-space:nowrap}
.rail-tip{display:none}
.rail-item .nav-count{margin-left:10px;font-size:9.5px;letter-spacing:.6px;padding:3px 7px;border-radius:999px}
.rail-item #navLiveTag{font-size:0;width:9px;height:9px;padding:0;border-radius:50%;background:#ff5d7a;box-shadow:0 0 10px rgba(255,93,122,.7);flex:0 0 9px}
.rail-nav::after{content:"";display:block;height:1px;margin:26px 26px 0 26px;background:rgba(213,190,228,.14)}
.rail-settings{margin-top:auto;padding:0 0 6px}
.rail-foot{padding:0 26px 14px}
.user-row{display:flex;align-items:center;gap:14px;padding:16px 0 0 4px;border-top:1px solid rgba(213,190,228,.14)}
.rail-avatar{position:relative;overflow:visible;width:52px;height:52px;border-radius:50%;flex:0 0 52px;background:var(--kz-card-3) center/cover no-repeat;color:var(--kz-gold);font-size:15px;font-weight:700;box-shadow:0 0 0 2px var(--kz-gold),0 0 0 4px var(--kz-bg)}
.rail-avatar::after{content:"";position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px var(--kz-bg)}
.rail-avatar.off::after{background:#7a7189}
.user-meta{flex:1;min-width:0}
.user-name{font-size:15.5px;font-weight:700;color:var(--kz-text);line-height:1.2}
.user-role{font-size:12.5px;color:var(--kz-muted);margin-top:2px}
.rail-collapse{width:34px;height:34px;border:0;background:none;color:var(--kz-muted);display:grid;place-items:center;cursor:pointer;border-radius:8px}
.rail-collapse svg.sic{width:20px;height:20px}
.rail-collapse:hover{color:var(--kz-text);background:rgba(232,204,244,.06)}

/* ── Sol menü (daraltılmış): 76px ── */
body.railmini{padding-left:76px}
body.railmini .topbar{left:76px}
body.railmini .rail{width:76px}
body.railmini .rail-brand{padding:22px 0 18px;justify-content:center}
body.railmini .rail-brand .logo{width:44px;height:44px;border-radius:14px}
body.railmini .rail-item{padding:0;justify-content:center;gap:0;min-height:52px;width:100%;margin:0}
body.railmini .rail-item.active::after{display:none}
body.railmini .ri-label,body.railmini .nav-count{display:none}
body.railmini .rail-nav::after{margin:12px 16px 0}
body.railmini .rail-foot{padding:0 0 18px}
body.railmini .user-row{flex-direction:column;gap:10px;padding:14px 0 0;border-top:0}
body.railmini .rail-avatar{width:40px;height:40px;flex-basis:40px}
body.railmini .user-meta{display:none}

/* ── Canlı durumu: üst bardaki kutu kaldırıldı (Can); süre stüdyodaki metrik satırında ── */
.topbar .tb-live,.topbar .live-pill{display:none!important}

/* ── Üst bar ── */
.topbar{height:60px;min-height:60px;padding:0 30px}
.tb-title{display:flex;align-items:center;gap:10px}
.tb-crumb{font-size:14px;color:var(--kz-muted)}
.tb-sep{display:inline-block!important;margin:0 4px;color:var(--kz-muted);opacity:.8;font-size:16px;line-height:1}
.tb-title h1{font-size:14.5px;font-weight:600;color:var(--kz-text);margin:0}
#tbSub{display:none}
.tb-right{display:flex;align-items:center;gap:14px}
.plat-chips,#tbConnBtn,.tb-hidden-btn{display:none!important}
/* "Twitch bağlı ●" açılır kutusu (mockup: 44px, 10px köşe, mor Twitch glifi, yeşil nokta, ok) */
.kz-conn-wrap{position:relative}
.kz-conn{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px 0 14px;border:1px solid rgba(213,190,228,.2);border-radius:10px;background:rgba(232,204,244,.05);color:var(--kz-text);font:500 15px "Inter",system-ui,sans-serif;cursor:pointer}
.kz-conn svg.sic{width:20px;height:20px}
.kz-conn-brand{position:relative;display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;overflow:hidden}
.kz-conn-brand img{display:block;width:auto;height:25px;max-width:25px;object-fit:contain}
.kz-conn-brand img[src$="youtube-icon.png"]{position:absolute;width:37px;max-width:none;height:auto;left:-6px;top:-3px}
.kz-conn .kz-conn-dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.7)}
.kz-conn.off .kz-conn-dot{background:#7a7189;box-shadow:none}
.kz-conn .kz-conn-chev{color:var(--kz-muted);width:16px;height:16px;margin-left:2px;transition:transform .18s}
.kz-conn.open .kz-conn-chev{transform:rotate(180deg)}
.kz-conn:hover,.kz-conn.open{border-color:rgba(213,190,228,.4)}
.kz-conn-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:340px;padding:8px;border:1px solid rgba(213,190,228,.18);border-radius:12px;background:var(--kz-card);box-shadow:0 18px 44px rgba(9,6,16,.55)}
.kz-conn-row{display:grid;grid-template-columns:26px 1fr auto;grid-template-areas:"ic name state" ". form form";align-items:center;column-gap:12px;row-gap:8px;padding:10px 10px;border-radius:9px}
.kz-conn-row+.kz-conn-row{margin-top:2px}
.kz-conn-row:hover{background:rgba(232,204,244,.05)}
.kz-conn-ic{grid-area:ic;position:relative;display:grid;place-items:center;width:26px;height:26px;overflow:hidden}
.kz-conn-ic img{display:block;width:auto;height:25px;max-width:25px;object-fit:contain}
.kz-conn-ic-youtube img{position:absolute;width:37px;max-width:none;height:auto;left:-6px;top:-3px}
.kz-conn-name{grid-area:name;font-weight:600;font-size:14.5px;color:var(--kz-text)}
.kz-conn-state{grid-area:state;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--kz-muted)}
.kz-conn-state .kz-conn-dot{width:8px;height:8px;border-radius:50%;background:#7a7189}
.kz-conn-row.on .kz-conn-state .kz-conn-dot{background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.7)}
.kz-conn-row.on .kz-conn-lbl{color:#3ddc84}
.kz-conn-act{grid-area:state;justify-self:end;height:32px;padding:0 14px;border:1px solid rgba(255,228,169,.5);border-radius:8px;background:linear-gradient(130deg,#ffe2a2,#e4b76c);color:#1a1422;font:700 12.5px "Inter",system-ui,sans-serif;cursor:pointer}
.kz-conn-row.on .kz-conn-act,.kz-conn-row.on .kz-conn-form{display:none}
.kz-conn-row:not(.on) .kz-conn-state{display:none}
.kz-conn-form{grid-area:form;display:flex;gap:8px}
.kz-conn-form .kz-conn-act{grid-area:auto}
.kz-conn-in{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--kz-line);border-radius:8px;background:var(--kz-card-2);color:var(--kz-text);font:500 13px "Inter",system-ui,sans-serif}
.kz-conn-in:focus{outline:2px solid var(--kz-gold);outline-offset:1px}
/* zil */
.kz-bell{position:relative;width:44px;height:44px;border:0;background:none;color:var(--kz-muted);display:grid;place-items:center;border-radius:10px;cursor:pointer}
.kz-bell svg.sic{width:24px;height:24px}
.kz-bell:hover{color:var(--kz-text);background:rgba(232,204,244,.06)}
.kz-bell .tb-more-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.kz-tb-div{width:1px;height:28px;background:rgba(213,190,228,.2);margin:0 4px}
/* tema anahtarı: güneş altın, ay lila-beyaz; aktif olanın arkasında koyu daire (mockup) */
.kz-theme{display:flex;align-items:center;gap:8px;height:44px;padding:0 2px}
.kz-theme button{width:36px;height:36px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#d9c9f0}
.kz-theme button[data-mode=light]{color:#f2c879}
.kz-theme button svg.sic{width:21px;height:21px}
.kz-theme button[data-mode=dark] svg.sic{width:19px;height:19px}
.kz-theme button[data-mode=light] svg.sic{filter:drop-shadow(0 0 6px rgba(242,200,121,.55))}
.kz-theme button.on{background:rgba(22,18,31,.95);box-shadow:0 0 0 1px rgba(213,190,228,.16)}
.kz-theme button[data-mode=light].on{background:rgba(242,200,121,.12);box-shadow:0 0 0 1px rgba(242,200,121,.25)}
html[data-bvmode=light] .kz-theme button{color:#8a7aa6}
html[data-bvmode=light] .kz-theme button[data-mode=light]{color:#c98f1e}
html[data-bvmode=light] .kz-theme button.on{background:#fff;box-shadow:0 0 0 1px rgba(107,69,213,.18),0 4px 10px rgba(32,33,44,.1)}

/* ── Genel bakış ölçüleri (mockup) ── */
.kz-wing{display:none}
.kz-wing-img{position:absolute;right:0;top:0;height:100%;width:auto;max-width:78%;object-fit:cover;object-position:right center;pointer-events:none;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.kz-head{margin-bottom:18px}
.kz-head h1{font-size:36px;letter-spacing:-1.4px}
.kz-head p{font-size:20px;margin-top:4px}
.kz-head-button{min-height:50px;padding:0 26px;font-size:17px;border-radius:12px;gap:14px}
.kz-button{font-size:16px;font-weight:800;letter-spacing:-.2px;border-radius:11px;box-shadow:0 10px 26px rgba(214,163,76,.28),0 0 22px rgba(255,214,140,.22)}
.kz-button:hover{box-shadow:0 14px 32px rgba(214,163,76,.36),0 0 28px rgba(255,214,140,.3)}
.kz-hero{min-height:220px;padding:24px 40px;border-radius:12px}
.kz-eyebrow{font-size:12px;letter-spacing:4.5px}
.kz-hero h2{font-size:38px;margin:10px 0 8px;letter-spacing:-1.3px}
.kz-hero p{font-size:16.5px;max-width:520px;margin-bottom:18px}
.kz-hero .kz-button{min-height:48px;padding:0 26px;font-size:16px}
.kz-hero-mark{font-size:10px;letter-spacing:5.5px;right:4%;bottom:12%}
.kz-hero-mark::before{content:"";position:absolute;left:-58px;top:50%;width:46px;height:1px;background:var(--kz-gold);opacity:.7}
.kz-metrics{margin:16px 0}
.kz-metric{padding:8px 26px 10px;gap:16px}
.kz-metric-icon{font-size:28px;min-width:30px;color:var(--kz-lilac)}
.kz-metric-label{font-size:15px}
.kz-metric strong{font-size:42px;margin-top:4px;letter-spacing:-1.8px;white-space:nowrap}
.kz-delta{font-size:12.5px;font-weight:600;padding-bottom:6px}
.kz-delta small{display:block;font-weight:400;font-size:11px;color:var(--kz-muted);margin-top:2px}
.kz-main{gap:16px}
.kz-panel{border-radius:12px}
.kz-panel-head{padding:20px 24px 10px}
.kz-panel-head h2{font-size:22px;letter-spacing:-.5px}
.kz-panel-head p{font-size:13px;margin-top:2px}
.kz-period{font-size:13px;padding:9px 14px;border-radius:9px}
.kz-chart{height:190px;padding-top:0;margin-top:-6px}
.kz-chart-panel .kz-panel-head{padding-bottom:0}
.kz-y-axis{font-size:11px;padding:21px 5px 12px 0}
.kz-x-axis{font-size:11px}
/* Sahneye hazır mısın? — mockup: sağ üst köşe 45° kesik, kesiğin dışında ayrı bir altın üçgen (aralıklı) */
.kz-ready-wrap{position:relative;display:flex}
.kz-ready-panel{flex:1;display:flex;flex-direction:column}
.kz-ready-panel .kz-ready-row{flex:1 1 auto}
.kz-ready-wrap::after{content:"";position:absolute;top:0;right:0;width:26px;height:26px;background:linear-gradient(135deg,#ffe1a0,#d9a856);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none;filter:drop-shadow(0 0 8px rgba(242,200,121,.35))}
.kz-ready-panel{position:relative;overflow:hidden;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
.kz-ready-row{min-height:62px;font-size:15px;gap:16px;margin:0 24px;width:calc(100% - 48px)}
.kz-ready-row>span:nth-child(2){display:flex;flex-direction:column;gap:3px}
.kz-ready-row small{font-weight:400;font-size:12.5px;color:var(--kz-muted)}
.kz-ready-row .kz-ico-chev{width:14px;height:14px;color:var(--kz-muted);flex:0 0 14px}
.kz-check svg.sic{width:14px;height:14px;display:none}
.kz-ready-row.done .kz-check svg.sic{display:block}
.kz-ready-row.done .kz-check::before{content:none}
.kz-button .kz-ico-play{width:16px;height:16px;flex:0 0 16px}
.kz-button .kz-ico-chev{width:14px;height:14px;flex:0 0 14px;margin-left:2px}
.kz-check{flex-basis:30px;width:30px;height:30px}
.kz-events-panel{margin-top:14px}
.bgrid.pg .wb > #pane-home,#bvhome.kz-ready{padding-bottom:28px}
.kz-events-panel .kz-panel-head button{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;text-decoration:none;color:var(--kz-lilac)}
.kz-events-panel .kz-panel-head button .kz-link{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.kz-events-panel .kz-panel-head button svg.sic{width:16px;height:16px;color:var(--kz-lilac)}
.kz-event{display:grid;grid-template-columns:34px auto auto minmax(0,1fr) auto 28px;align-items:center;column-gap:10px;min-height:44px;font-size:13.5px;overflow:hidden}
.kz-event strong,.kz-event>span:nth-child(3){white-space:nowrap}
.kz-event .kz-event-msg{color:var(--kz-muted);text-align:center;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kz-event time{color:var(--kz-muted);font-size:12.5px;white-space:nowrap}
.kz-event .kz-event-more{color:var(--kz-muted);text-align:right;letter-spacing:1px;font-weight:700}
.kz-event-icon svg.sic{width:20px;height:20px}
.kz-event-icon.gold{color:var(--kz-gold)}
.kz-event-icon.ice{color:#a9d8ff}
.kz-event-icon.green{color:#3ddc84}
html[data-bvmode=light] .kz-event-icon.ice{color:#2f7fc8}
html[data-bvmode=light] .kz-event-icon.green{color:#1d9a57}
.kz-event{min-height:37px;font-size:13px;margin:0 24px;gap:12px}
.kz-event-icon{font-size:20px}
.kz-event-empty{font-size:13px}

/* Genel bakış ekleri */
.kz-metric-icon svg.sic{width:24px;height:24px;color:var(--kz-lilac)}
.kz-delta b{display:block;font-weight:700;color:inherit}
.kz-chart{position:relative}
.kz-chart-last{position:absolute;transform:translate(-50%,-100%);padding:4px 9px;border-radius:7px;background:var(--kz-card-3);border:1px solid var(--kz-line);font:700 12px "Inter",system-ui,sans-serif;color:var(--kz-text);pointer-events:none;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.kz-x-axis{margin:-12px 24px 4px 60px}
.kz-chart-last::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:var(--kz-drop,120px);border-left:1px dashed rgba(214,195,231,.35)}
.kz-vgrid{fill:none;stroke:rgba(214,195,231,.07);stroke-width:1}
#kzDots circle{fill:#b480f7;stroke:none}
#kzDots circle.last{fill:#fff;stroke:#b480f7;stroke-width:2.5}
/* dönem açılır kutusu */
.kz-period-wrap{position:relative}
.kz-period{display:inline-flex;align-items:center;gap:14px;height:38px;padding:0 14px;border:1px solid rgba(213,190,228,.2);border-radius:9px;background:rgba(232,204,244,.04);color:var(--kz-text);font:500 13.5px "Inter",system-ui,sans-serif;cursor:pointer}
.kz-period svg.sic{width:15px;height:15px;color:var(--kz-muted)}
.kz-period-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;min-width:150px;padding:6px;border:1px solid rgba(213,190,228,.18);border-radius:10px;background:var(--kz-card);box-shadow:0 14px 36px rgba(9,6,16,.5)}
.kz-period-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:7px;background:none;color:var(--kz-text);font:500 13.5px "Inter",system-ui,sans-serif;cursor:pointer}
.kz-period-menu button:hover,.kz-period-menu button.on{background:rgba(232,204,244,.07);color:var(--kz-gold)}
/* stüdyo metrik ikonları (Codex seti) */
.kz-studio-metrics svg.sic{width:28px;height:28px;color:var(--kz-lilac)}
.kz-studio-metrics>div:nth-child(3) svg.sic{color:var(--kz-gold)}

/* Sol menü: yazı ve ikon büyütüldü; seçili öğe oku menü kenarına bitişik, içeri bakan (mockup 21-v2).
   Canlı noktası seçilince kaymıyor (Can, 28 Eyl): ok en kenarda, nokta 26px içeride; çakışmıyorlar,
   eski 18px'lik itme ise noktayı "stüdyosu" yazısının üstüne bindiriyordu. */
body .rail-item{min-height:54px;font-size:18px}
body .rail-item .ri-label{font-size:18px}
body .rail-item svg.sic{width:24px;height:24px;flex:0 0 24px}
body .rail-item.active::after{right:0;left:auto;top:50%;width:12px;height:26px;transform:translateY(-50%);clip-path:polygon(100% 0,0 50%,100% 100%);background:var(--kz-gold);box-shadow:none}
body.railmini .rail-item.active::after{display:none}

/* Codex'in mockup durum örnekleri (paftalar 60–90: "Tasarım önerisi" blokları) üründe gizli; ?durumlar=1 ile görünür (testler bu bayrağı açar) */
html:not([data-durumlar]) :is(#kzChatBoxStates,#kzEmoteWallStates,#kzEmoteSources,#kzLoyaltyBalanceStates,#kzMobileEmoteLoading,#kzMobileChatStates,#kzMobileEmoteHelp,#kzMobileLoyaltyQuery,#kzMobileEmoteSources,#kzMobileMediaQueue,#kzMobileLoyaltySession,#kzMobileMediaErrors,#kzMobileMediaSettings,#kzMobilePlayerHelp,#kzMobileRewardFocus,#kzMobileRewardManage,#kzMobileRewardAdd,#kzMobileRewardLimits,#kzOverlayDataStates,#kzOverlayEmpty){display:none!important}

/* mockup 04 ölçümü: sol menü yazısı 19px */
body .rail-item{font-size:19px}body .rail-item .ri-label{font-size:19px}
html[data-bvmode=light] .rail{background:var(--kz-card);border-right-color:var(--kz-line)}html[data-bvmode=light] .rail-item.active{background:var(--kz-card-3)}

/* Tüm menülerde aynı yatay hiza (Genel bakış ölçüsü): içerik raydan 30px, sağdan 30px. Bazı sayfaların kendi 18px iç + 8px dış boşluğu vardı. */
@media(min-width:761px){html body .bgrid .wb>:is(#pane-izleyiciler,#pane-denetim,#pane-sadakat,#pane-minigames,#pane-analiz,#pane-sounds,#pane-rules,#pane-toolbox,#pane-klipgec,#pane-overlay,#pane-home).tab-pane{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;max-width:none!important;width:auto!important}
html body #pane-sounds.kz-settings-ready :is(.kzs-head,.kzc-head,.kzsb-head,.kzmb-head){padding-left:0;padding-right:0}}