/* ============================================================
   3DLAYERX Enerji İzleme - Kurumsal tema (style.css'ten SONRA yüklenir)
   Lacivert sidebar/topbar + açık gri içerik + beyaz kartlar
   ============================================================ */
:root, html.theme-light {
    --bg: #eef2f8;
    --bg-2: #e6ecf5;
    --panel: #ffffff;
    --panel-2: #f4f7fc;
    --border: #e1e8f2;
    --text: #14233f;
    --muted: #6a7a96;
    --green: #16a34a;
    --red: #e53e3e;
    --purple: #7c5cff;
    --blue: #2563eb;
    --blue-soft: #3b82f6;
    --orange: #f59e0b;
    --navy: #0b1b3a;
    --navy-2: #10264d;
    --navy-3: #17325f;
    --shadow: 0 8px 24px rgba(20,35,63,.10);
    --shadow-sm: 0 2px 10px rgba(20,35,63,.06);
    --radius: 14px;
}
body { background: var(--bg); color: var(--text); }

/* koyu bölgeler kendi renk setini kullanır */
.sidebar, .topbar, .panel-dark {
    --text: #e8eefc; --muted: #8fa3c7; --panel: #10264d; --panel-2: #17325f; --border: #23407a;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: 240px; background: linear-gradient(180deg, #0b1b3a 0%, #0a1830 100%);
    border-right: none; padding: 0;
}
.main-area { margin-left: 240px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 20px; }
.brand-logo {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.4);
}
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: .6px; color: #fff; line-height: 1.1; }
.brand-sub { font-size: 11px; color: #8fa3c7; margin-top: 3px; }
.sidebar-company, .sidebar-usertag, .sidebar-logo { display: none; }
.sidebar-nav { padding: 6px 14px; gap: 4px; }
.sidebar-nav a {
    color: #b4c3e0; font-size: 14px; font-weight: 500; padding: 11px 14px; border-radius: 10px; gap: 13px;
}
.sidebar-nav a .icon { color: #8fa3c7; }
.sidebar-nav a:hover { background: rgba(255,255,255,.07); color: #fff; transform: none; }
.sidebar-nav a.active {
    background: #2563eb; color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(37,99,235,.45);
}
.sidebar-nav a.active .icon { color: #fff; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 14px 20px; color: #8fa3c7; }
.sidebar-brand { color: #dbe5fa; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--navy); border-bottom: none; backdrop-filter: none; padding: 12px 26px; color: #e8eefc;
    box-shadow: 0 2px 12px rgba(11,27,58,.25);
}
.topbar-right { gap: 14px; }
.topbar .ptf-now-chip, .topbar .weather-chip { border-color: rgba(255,255,255,.12); }
.topbar .datetime-chip { color: #e8eefc; }
.topbar .datetime-chip #liveClockTime { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.topbar .weather-chip .icon { color: #fbbf24; }
.topbar .hamburger-btn { color: #fff; }
.status-chip-value.status-badge-blue { background: rgba(59,130,246,.22); color: #93c5fd; }
.status-chip-value.status-badge-gray { background: rgba(255,255,255,.12); color: #cbd5e1; }
.status-chip-value.status-badge-purple { background: rgba(245,158,11,.22); color: #fcd34d; }
.status-chip-value.status-badge-green { background: rgba(34,197,94,.22); color: #86efac; }
.alarm-bell-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #e8eefc; border-radius: 50%; width: 38px; height: 38px; }
.alarm-bell-green { color: #86efac; }
.alarm-popup, .user-menu {
    --text: #14233f; --muted: #6a7a96; --panel: #fff; --panel-2: #f4f7fc; --border: #e1e8f2;
    background: #fff; color: #14233f;
}
.user-chip { position: relative; }
.user-chip summary {
    list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 5px 10px 5px 6px; border-radius: 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.user-chip summary::-webkit-details-marker { display: none; }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#3b82f6,#2563eb);
    color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.user-name { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.2; }
.user-role { font-size: 10.5px; color: #8fa3c7; }
.user-caret { color: #8fa3c7; font-size: 10px; }
.user-menu {
    position: absolute; right: 0; top: 48px; min-width: 170px; border: 1px solid #e1e8f2; border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px; z-index: 70;
}
.user-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: #14233f; }
.user-menu a:hover { background: #f4f7fc; }

/* ---------- İçerik, kartlar ---------- */
.content { padding: 24px 28px; }
.card, .panel, .kpi-card, .icon-box {
    background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cddcf5; }
.card { padding: 16px 18px; min-height: 120px; }
.card-accent-purple, .card-accent-orange, .card-accent-green, .card-accent-red { background: #fff; border-color: var(--border); }
.card-accent-red { border-color: #f5b5b5; }
.card-title { color: var(--text); font-size: 13px; font-weight: 700; gap: 10px; }
.card-title .icon { color: #fff; }
.card-title > .icon:first-child {
    width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0;
}
.card-grid-main > .card:nth-child(2) .card-title > .icon:first-child { background: #16a34a; }
.card-grid-main > .card:nth-child(4) .card-title > .icon:first-child { background: #16a34a; }
.card-grid-main > .card:nth-child(5) .card-title > .icon:first-child { background: #7c5cff; }
.card-mini-controls .card-title > .icon:first-child { background: #0ea5e9; }
.card-value { font-size: 26px; font-weight: 800; color: var(--text); }
.card-sub { color: var(--muted); font-size: 12px; }
.accent-green { color: #16a34a; } .accent-red { color: #e53e3e; } .accent-amber { color: #d97706; }
.mini-btn {
    background: #eaf1ff; color: #2563eb; border: none; border-radius: 8px; padding: 6px 12px; font-size: 10.5px;
}
.mini-btn:hover { background: #d8e5ff; }
.dashboard-top-row { gap: 16px; }
.card-grid-main { gap: 16px; grid-template-columns: repeat(4, 1fr); }
.icon-box-col { display: none; } /* GES TMŞ/Kesici: Cihaz Durumları'nda gösteriliyor */

/* Kumanda butonları (SATIŞ yeşil · ÖZTÜKETİM mavi · OTOMATİK turuncu · KAPAT kırmızı) */
.mini-kumanda-grid { gap: 8px; margin-top: 8px; }
.mini-kumanda-btn {
    height: 38px; border-radius: 10px; font-size: 10.5px; letter-spacing: .3px; box-shadow: 0 3px 8px rgba(20,35,63,.18);
}
.mini-kumanda-btn svg { width: 14px; height: 14px; }
.mini-kumanda-blue   { background: linear-gradient(160deg,#22c55e,#16a34a); }
.mini-kumanda-gray   { background: linear-gradient(160deg,#3b82f6,#2563eb); }
.mini-kumanda-purple { background: linear-gradient(160deg,#fbbf24,#f59e0b); }
.mini-kumanda-red    { background: linear-gradient(160deg,#f87171,#dc2626); }
.mini-kumanda-btn.kumanda-active { box-shadow: 0 0 0 3px rgba(37,99,235,.35); }

/* Reaktif */
.reaktif-box-alis { background: #fff1f1; border-color: #f7c4c4; }
.reaktif-box-veris { background: #eafaf0; border-color: #b7e8c9; }

/* ---------- Paneller ---------- */
.panel { padding: 20px; }
.panel-header { font-size: 15px; font-weight: 800; color: var(--text); }
.panel-header .icon { color: var(--blue); }

/* Koyu lacivert canlı grafik paneli */
.panel-dark { background: linear-gradient(180deg,#0b1b3a,#0e2248); border-color: #1d3a73; color: #e8eefc; }
.panel-dark .panel-header, .panel-dark .details-box summary { color: #fff; }
.panel-dark .panel-header .icon { color: #60a5fa; }
.panel-dark .btn { background: #17325f; border-color: #2a4a86; color: #e8eefc; }
.panel-dark .details-grid strong { color: #fff; }
.tab-row { background: rgba(255,255,255,.06); padding: 4px; border-radius: 10px; display: inline-flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.tab-btn { background: transparent; border: none; color: #8fa3c7; padding: 7px 16px; border-radius: 8px; }
.tab-btn.active { background: #2563eb; color: #fff; box-shadow: 0 3px 10px rgba(37,99,235,.5); }
.panel-dark .chart-mode-select { background: #17325f; border-color: #2a4a86; color: #e8eefc; }
.panel-dark .chart-legend { color: #b4c3e0; }
.panel-dark .details-box { border-top-color: rgba(255,255,255,.1); }
.panel-dark .muted { color: #8fa3c7; }
.chart-wrap { height: 320px; }

/* Cihaz durumları */
.device-box { background: #f4f7fc; border-radius: 12px; }
.device-active { background: #eafaf0; border-color: #b7e8c9; box-shadow: none; }
.device-dim { opacity: .6; }

/* Tablo, butonlar, formlar */
.btn { background: #fff; border-color: var(--border); color: var(--text); border-radius: 10px; }
.btn:hover { filter: none; background: #f4f7fc; }
.btn-primary { background: var(--blue); color: #fff; border: none; box-shadow: 0 4px 12px rgba(37,99,235,.35); }
.btn-primary:hover { background: #1d4ed8; box-shadow: 0 6px 16px rgba(37,99,235,.45); }
.data-table th { background: #f4f7fc; }
.data-table tbody tr:hover { background: #f4f9ff; }
.status-badge-blue { background: #e0ecff; color: #2563eb; }
.status-badge-green { background: #dcf7e6; color: #16a34a; }
.status-badge-red { background: #fde2e2; color: #e53e3e; }
.status-badge-gray { background: #e8edf5; color: #5b6b86; }
.status-badge-purple { background: #ece7ff; color: #6d4af0; }
.form-grid input, .form-grid select, .form-grid textarea, .inv-search, .manual-control-row input[type="number"] {
    background: #fff; border-color: #d5deec; border-radius: 10px;
}
.settings-quicknav a { background: #fff; }
.inv-modal { background: #fff; }
.energy-tooltip { background: #0b1b3a; color: #e8eefc; border-color: #23407a; }
.inv-pill { background: #fff; }
.login-box { background: #fff; }

@media (max-width: 1200px) { .card-grid-main { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
    .main-area { margin-left: 0; }
    .user-name, .user-role { display: none; }
}
@media (max-width: 640px) { .card-grid-main { grid-template-columns: 1fr; } }

/* ============================================================
   Dashboard v2 - kart satırları
   ============================================================ */
.dash-row { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-row-4 { grid-template-columns: repeat(4, 1fr); }
.dash-row-3 { grid-template-columns: repeat(3, 1fr); }
.dash-row .card { position: relative; overflow: hidden; }
.ic-circle { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.ic-circle .icon { color: #fff; }
.ic-blue { background: #2563eb; } .ic-green { background: #16a34a; } .ic-sky { background: #0ea5e9; }
.ic-purple { background: #7c5cff; } .ic-orange { background: #f59e0b; }
.card-spark { position: absolute; right: 14px; bottom: 14px; width: 96px; height: 34px; opacity: .9; }

/* İnverter kartı */
.inv-big { font-size: 28px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.inv-big-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.tag-green { background: #dcf7e6; color: #16a34a; } .tag-red { background: #fde2e2; color: #e53e3e; }
.inv-bar { height: 8px; border-radius: 6px; background: #e8edf7; margin: 12px 0; overflow: hidden; }
.inv-bar-fill { height: 100%; background: linear-gradient(90deg,#22c55e,#16a34a); border-radius: 6px; transition: width .4s; }
.inv-counts { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.inv-counts b { color: var(--text); font-size: 15px; margin-right: 4px; }
.dot-s { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.dot-g { color: #16a34a; } .dot-r { color: #e53e3e; } .dot-gray { color: #9aa8c2; }

/* Reaktif donut */
.react-wrap { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.donut { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.donut-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.donut-text b { font-size: 17px; font-weight: 800; } .donut-text span { font-size: 11px; color: var(--muted); }
.react-list { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.react-list > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--border); padding-bottom: 6px; }
.react-list > div:last-child { border-bottom: none; }

/* Alış - Satış */
.as-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.as-box { border-radius: 12px; padding: 14px; }
.as-red { background: #fff1f1; color: #e53e3e; } .as-green { background: #eafaf0; color: #16a34a; }
.as-label { font-size: 12px; font-weight: 700; }
.as-pct { font-size: 26px; font-weight: 800; margin: 4px 0 2px; }
.as-kwh { font-size: 12px; color: var(--muted); }
.as-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; margin-top: 14px; background: #e8edf7; }
.as-bar-red { background: #ef4444; } .as-bar-green { background: #22c55e; }

/* Hava */
.w-main { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 14px; }
.w-temp { font-size: 34px; font-weight: 800; } .w-text { color: var(--muted); font-size: 13px; }
.w-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.w-grid > div { background: #f4f7fc; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.w-grid b { font-size: 14px; }

/* Cihaz durumu kutuları */
.dev-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.dev-tile {
    background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 12px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; color: var(--text);
    transition: transform .15s, box-shadow .15s; box-shadow: var(--shadow-sm);
}
.dev-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dev-tile-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eaf1ff; color: #2563eb; }
.dev-tile-name { font-size: 13px; font-weight: 700; }
.dev-tile-count { font-size: 22px; font-weight: 800; }
.dev-tile-state { font-size: 12px; font-weight: 700; display: flex; align-items: center; }
.dev-ok .dev-tile-state { color: #16a34a; } .dev-warn .dev-tile-state { color: #d97706; } .dev-bad .dev-tile-state { color: #e53e3e; }
.dev-warn { border-color: #fcd9a0; } .dev-bad { border-color: #f5b5b5; }
.dev-popup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.dev-popup-item { background: #f4f7fc; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.dev-popup-name { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.dev-popup-st { font-size: 11.5px; font-weight: 700; }
.st-online { background: #eafaf0; border-color: #b7e8c9; } .st-online .dev-popup-st { color: #16a34a; }
.st-offline { background: #fff1f1; border-color: #f5b5b5; } .st-offline .dev-popup-st { color: #e53e3e; }
.st-pasif .dev-popup-st { color: #6a7a96; }
.inv-modal-overlay .inv-modal { color: #14233f; }

@media (max-width: 1200px) { .dash-row-4 { grid-template-columns: repeat(2, 1fr); } .dash-row-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .dash-row-4, .dash-row-3 { grid-template-columns: 1fr; } }

/* Gerilim / Akım / Frekans satırı */
.el-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.el-row > div { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.el-row b { font-size: 13px; color: var(--text); }
.card-spark { bottom: auto; top: 54px; }

/* Değer satırı: büyük yazılar iç içe girmesin */
.val-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.val-row .card-value { white-space: nowrap; }
.val-row .card-spark { position: static; width: 84px; height: 34px; flex-shrink: 0; }
.val-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.val-line { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.val-tag { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 52px; text-transform: uppercase; letter-spacing: .3px; }
.val-num { font-size: 22px; font-weight: 800; line-height: 1.2; }

/* Grafik renkleriyle uyumlu kart renkleri */
.ic-red { background: #ef4444; } .ic-chartyellow { background: #f5b942; } .ic-chartblue { background: #3fa1ff; }
.accent-chartyellow { color: #f5b942; } .accent-chartblue { color: #3fa1ff; }

.tag-blue { background: #e0ecff; color: #2563eb; } .dot-b { color: #3b82f6; }
.inv-counts { gap: 6px; } .inv-counts > div { white-space: nowrap; }

/* ============ Hava Durumu kartı: iPhone tarzı dinamik arka plan ============ */
.wx { color: #fff; border: none; position: relative; overflow: hidden; isolation: isolate; }
.wx::before, .wx::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wx .card-title, .wx .w-temp, .wx .w-text, .wx .muted, .wx b { color: #fff; }
.wx .muted { color: rgba(255,255,255,.75); }
.wx .w-grid > div { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.wx .ic-circle { background: rgba(255,255,255,.25); }
.wx .mini-btn { background: rgba(255,255,255,.2); color: #fff; }
.wx .w-temp { font-size: 42px; font-weight: 300; text-shadow: 0 2px 10px rgba(0,0,0,.2); }

/* gündüz / gece zeminleri */
.wx-clear.wx-day   { background: linear-gradient(180deg,#2f8cf0 0%,#69b4ff 60%,#9bd0ff 100%); }
.wx-clear.wx-night { background: linear-gradient(180deg,#0a1230 0%,#1b2a5c 60%,#2b3f7d 100%); }
.wx-partly.wx-day  { background: linear-gradient(180deg,#4a90d9 0%,#7fb1e3 100%); }
.wx-partly.wx-night{ background: linear-gradient(180deg,#0f1a3a 0%,#2a3a66 100%); }
.wx-cloudy.wx-day  { background: linear-gradient(180deg,#6f8197 0%,#98a8b9 100%); }
.wx-cloudy.wx-night{ background: linear-gradient(180deg,#1a2230 0%,#2f3a4d 100%); }
.wx-fog.wx-day     { background: linear-gradient(180deg,#8d9aa6 0%,#b9c3cc 100%); }
.wx-fog.wx-night   { background: linear-gradient(180deg,#2a323b 0%,#4a555f 100%); }
.wx-rain.wx-day    { background: linear-gradient(180deg,#44566b 0%,#6c8099 100%); }
.wx-rain.wx-night  { background: linear-gradient(180deg,#0f1722 0%,#26364a 100%); }
.wx-storm.wx-day   { background: linear-gradient(180deg,#2d3646 0%,#4d5a70 100%); }
.wx-storm.wx-night { background: linear-gradient(180deg,#0a0e18 0%,#222b3d 100%); }
.wx-snow.wx-day    { background: linear-gradient(180deg,#7f96b0 0%,#c5d3e2 100%); }
.wx-snow.wx-night  { background: linear-gradient(180deg,#1c2638 0%,#44546d 100%); }

/* güneş parlaması */
.wx-clear.wx-day::before, .wx-partly.wx-day::before {
    background: radial-gradient(circle at 85% 8%, rgba(255,236,150,.95) 0, rgba(255,214,90,.55) 14%, rgba(255,214,90,0) 42%);
    animation: wxGlow 6s ease-in-out infinite;
}
@keyframes wxGlow { 0%,100% { opacity: .85; } 50% { opacity: 1; } }

/* yıldızlar ve ay */
.wx-clear.wx-night::before, .wx-partly.wx-night::before {
    background:
      radial-gradient(circle at 86% 14%, #fff7d6 0, #fff7d6 6px, rgba(255,247,214,.25) 12px, transparent 26px),
      radial-gradient(1.5px 1.5px at 12% 20%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 30% 55%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 52% 18%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 66% 70%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 76% 35%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 22% 80%, #fff 50%, transparent 51%);
    animation: wxTwinkle 4s ease-in-out infinite;
}
@keyframes wxTwinkle { 0%,100% { opacity: .8; } 50% { opacity: 1; } }

/* bulutlar */
.wx-partly::after, .wx-cloudy::after, .wx-rain::after, .wx-storm::after, .wx-fog::after, .wx-snow::after {
    background:
      radial-gradient(ellipse 90px 30px at 20% 22%, rgba(255,255,255,.55), transparent 70%),
      radial-gradient(ellipse 120px 36px at 65% 14%, rgba(255,255,255,.45), transparent 70%),
      radial-gradient(ellipse 80px 26px at 90% 34%, rgba(255,255,255,.35), transparent 70%);
    animation: wxDrift 28s linear infinite alternate;
}
.wx-night.wx-cloudy::after, .wx-night.wx-rain::after, .wx-night.wx-storm::after, .wx-night.wx-partly::after, .wx-night.wx-snow::after { opacity: .35; }
.wx-fog::after { filter: blur(6px); background-size: 140% 100%; }
@keyframes wxDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* yağmur */
.wx-rain::before, .wx-storm::before {
    background-image:
      repeating-linear-gradient(105deg, rgba(255,255,255,.0) 0 7px, rgba(255,255,255,.45) 7px 8px, rgba(255,255,255,0) 8px 17px),
      repeating-linear-gradient(105deg, rgba(255,255,255,.0) 0 11px, rgba(255,255,255,.3) 11px 12px, rgba(255,255,255,0) 12px 23px);
    background-size: 100% 100%, 100% 100%;
    animation: wxRain .7s linear infinite;
    opacity: .75;
}
@keyframes wxRain { from { background-position: 0 0, 0 0; } to { background-position: -18px 60px, -26px 90px; } }

/* kar */
.wx-snow::before {
    background-image:
      radial-gradient(3px 3px at 10% 10%, #fff 60%, transparent 62%),
      radial-gradient(2px 2px at 30% 40%, #fff 60%, transparent 62%),
      radial-gradient(3px 3px at 55% 20%, #fff 60%, transparent 62%),
      radial-gradient(2px 2px at 75% 55%, #fff 60%, transparent 62%),
      radial-gradient(3px 3px at 90% 30%, #fff 60%, transparent 62%),
      radial-gradient(2px 2px at 45% 75%, #fff 60%, transparent 62%);
    background-size: 100% 120px;
    animation: wxSnow 5s linear infinite;
}
@keyframes wxSnow { from { background-position: 0 0; } to { background-position: 12px 120px; } }

/* şimşek */
.wx-storm::after { animation: wxDrift 28s linear infinite alternate, wxFlash 6s infinite; }
@keyframes wxFlash { 0%,92%,100% { filter: none; } 93% { filter: brightness(2.4); } 95% { filter: brightness(1); } 96% { filter: brightness(2); } }

@media (prefers-reduced-motion: reduce) { .wx::before, .wx::after { animation: none !important; } }

/* Enerji özeti kartları (günlük / aylık / yıllık) */
.ozet-row { margin-top: 16px; }
.ozet-main { margin: 6px 0 12px; }
.ozet-label { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.ozet-val { font-size: 26px; font-weight: 800; line-height: 1.15; }
.ozet-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ozet-sub b { font-size: 15px; }
.ozet-lazy { color: var(--muted); }
.ozet-oz .details-grid { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ozet-oz { padding: 16px 20px; }
.ozet-oz strong { font-size: 16px; }

/* Uyku durumu */
.dot-online.dot-sleep { background: #60a5fa; box-shadow: 0 0 6px #60a5fa; }
.status-pill.status-uyku { background: #e0ecff; color: #2563eb; }
.device-uyku { background: #eef4ff; }
.st-uyku { background: #eef4ff; border-color: #c9dcff; } .st-uyku .dev-popup-st { color: #2563eb; }
.dev-sleep .dev-tile-state { color: #2563eb; } .dev-sleep { border-color: #c9dcff; }

/* ============ Giriş sayfası (login.php) ============ */
.login-body { background: var(--bg); }
.login-visual {
    background:
      radial-gradient(700px 420px at 15% 8%, rgba(251,191,36,.22), transparent 60%),
      radial-gradient(800px 520px at 95% 95%, rgba(37,99,235,.35), transparent 60%),
      linear-gradient(160deg, #0b1b3a 0%, #0e2248 55%, #0a1830 100%);
}
.login-visual-brand { font-size: 20px; letter-spacing: .8px; }
.login-visual-brand .dot {
    width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 4px 16px rgba(245,158,11,.45); animation: none;
    background: linear-gradient(135deg,#fbbf24,#f59e0b);
    position: relative;
}
.login-visual-brand .dot::after { content: '☀'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.login-visual-headline span { background: linear-gradient(90deg,#fbbf24,#60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-feature-icon { background: rgba(59,130,246,.18); border-color: rgba(96,165,250,.35); color: #93c5fd; }
.login-form-side { background: var(--bg); }
.login-box { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 50px rgba(20,35,63,.14); color: #14233f; }
.login-logo { color: var(--blue); letter-spacing: .6px; }
.login-box h1 { color: #14233f; }
.login-box .login-sub, .login-box label, .login-hint { color: #6a7a96; }
.login-box input { background: #f4f7fc; border: 1.5px solid #d5deec; color: #14233f; border-radius: 10px; }
.login-box input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); background: #fff; }
.login-box .btn-primary { padding: 12px; font-size: 14px; border-radius: 10px; }
.alert-error { background: #fde2e2; color: #c53030; border-color: #f5b5b5; }

/* ============ Logo (assets/logo.png) ============ */
.brand.brand-img { display: block; margin: 0; padding: 20px 20px 14px; text-decoration: none; background: transparent; box-shadow: none; }
.brand.brand-img img { display: block; width: 100%; height: auto; max-height: 76px; object-fit: contain; }

.tuk-pct { display: block; font-size: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ============ Reaktif kartı + rapor popup ============ */
.card-click { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.card-click:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,27,61,.14); }
.card-click:focus-visible { outline: 2px solid #3f6fd1; outline-offset: 2px; }
.card-more { margin-left: auto; font-size: 11px; font-weight: 600; color: #3f6fd1; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.card-click:hover .card-more, .card-click:focus-visible .card-more { opacity: 1; }
.rk-modal-ov { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; margin: 0; box-sizing: border-box; background: rgba(8,15,35,.62); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 20px; backdrop-filter: blur(3px); }
.rk-modal-ov.active { display: flex; }
.rk-modal { background: #f1f5fb; width: min(1280px, 100%); height: min(88vh, 900px); max-height: 100%; margin: auto; border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; }
.rk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: #0f1b3d; color: #fff; }
.rk-modal-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; color: #fff; }
.rk-modal-actions { display: flex; gap: 8px; }
.rk-modal-actions .btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); text-decoration: none; }
.rk-modal-actions .btn:hover { background: rgba(255,255,255,.22); }
.rk-modal iframe { flex: 1; width: 100%; border: 0; background: #f1f5fb; }
@media (max-width: 700px) { .rk-modal-ov { padding: 0; } .rk-modal { height: 100vh; border-radius: 0; } }