/* =====================================================================================
   TV Panel · "Ufuk" temasi
   Klasik yayin paneli duzeni, modern yorumla: solda simge seridi menu (uzerine gelince etiketleriyle acilir, istenirse sabitlenir),
   mavi baslik bandi ve ona bagli bolum sekmeleri, sekmeli ozellik sayfalari, renk gecisli istatistik kartlari, dolgulu form alanlari,
   duz renkli durum rozetleri. Varsayilan temanin bilesenleri ice aktarilir (ayni sinif adlari); bu dosya yalnizca gorunumu degistirir.
   Vurgu tonu --u-h (izleyici secer, tema.js).
   ===================================================================================== */
@import url("../../default/css/app.css?v=6f368081");
@import url("../fonts/fonts.css");

:root, :root[data-scheme="light"] {
  --u-h:232;
  --f-body:"Plus Jakarta Sans","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"Outfit","Plus Jakarta Sans",system-ui,sans-serif;
  --r-card:18px; --r-ctl:11px; --r-sm:9px; --gap:20px;
  --u-rail:78px; --u-open:276px;
  --u-pri:oklch(55% .2 var(--u-h)); --u-pri2:oklch(52% .21 calc(var(--u-h) + 32)); --u-soft:oklch(95% .035 var(--u-h));
  --u-band:linear-gradient(118deg,oklch(47% .19 calc(var(--u-h) + 8)) 0%,oklch(54% .2 var(--u-h)) 46%,oklch(60% .17 calc(var(--u-h) - 26)) 100%);
  --u-band2:oklch(42% .17 calc(var(--u-h) + 6));
  --u-fill:oklch(97.2% .01 var(--u-h)); --u-fill2:oklch(95.6% .016 var(--u-h)); --u-rule:oklch(86% .03 var(--u-h));
  --u-e1:0 1px 2px oklch(30% .05 var(--u-h) / .06), 0 10px 28px -16px oklch(35% .1 var(--u-h) / .28);
  --u-e2:0 4px 10px oklch(30% .05 var(--u-h) / .07), 0 26px 50px -24px oklch(35% .12 var(--u-h) / .42);
  --bg:oklch(96.4% .013 var(--u-h)); --card:#fff; --card2:oklch(98.2% .007 var(--u-h)); --ctl:#fff; --inp:var(--u-fill);
  --line:oklch(91.5% .016 var(--u-h)); --line2:var(--u-rule); --track:oklch(93% .02 var(--u-h));
  --ink:oklch(24% .045 var(--u-h)); --ink2:oklch(38% .045 var(--u-h)); --mut:oklch(55% .035 var(--u-h)); --mut2:oklch(72% .025 var(--u-h));
  --pri:var(--u-pri); --pri-ink:#fff; --acc:var(--u-pri); --acc-soft:var(--u-soft);
  --side:#fff; --side-line:oklch(92% .015 var(--u-h)); --side-ink:oklch(42% .05 var(--u-h)); --side-mut:oklch(62% .03 var(--u-h)); --side-strong:oklch(22% .05 var(--u-h));
  --side-hover:oklch(96% .025 var(--u-h)); --nav-on:linear-gradient(135deg,var(--u-pri),var(--u-pri2)); --nav-on-ink:#fff;
  --wash:0; --glow:oklch(55% .2 var(--u-h) / .3); --spot:transparent; --noise-op:0;
  --shadow:var(--u-e1);
  --btn-pri:linear-gradient(135deg,var(--u-pri),var(--u-pri2)); --btn-pri-ink:#fff;
  --k1a:#6a5cff; --k1b:#a26bff; --k2a:#0fb27c; --k2b:#4fd39a; --k3a:#ff8f2a; --k3b:#ffc246; --k4a:#f2475b; --k4b:#ff8a6e; --k5a:#8f3ff5; --k5b:#d562f0; --k6a:#1f86f0; --k6b:#55b8ff;
}
:root[data-scheme="dark"] {
  --u-soft:oklch(32% .07 var(--u-h)); --u-fill:oklch(25% .035 var(--u-h)); --u-fill2:oklch(28% .04 var(--u-h)); --u-rule:oklch(38% .05 var(--u-h));
  --u-band2:oklch(36% .15 calc(var(--u-h) + 6));
  --u-e1:0 1px 0 oklch(100% 0 0 / .03) inset, 0 18px 40px -22px oklch(5% .02 var(--u-h) / .8);
  --u-e2:0 30px 60px -28px oklch(4% .02 var(--u-h) / .9);
  --bg:oklch(16.5% .03 var(--u-h)); --card:oklch(21% .035 var(--u-h)); --card2:oklch(19% .032 var(--u-h)); --ctl:oklch(23% .038 var(--u-h)); --inp:var(--u-fill);
  --line:oklch(29% .04 var(--u-h)); --line2:var(--u-rule); --track:oklch(27% .04 var(--u-h));
  --ink:oklch(95% .012 var(--u-h)); --ink2:oklch(85% .02 var(--u-h)); --mut:oklch(70% .03 var(--u-h)); --mut2:oklch(52% .03 var(--u-h));
  --pri:oklch(72% .15 var(--u-h)); --acc:oklch(74% .14 var(--u-h)); --acc-soft:var(--u-soft);
  --side:oklch(19% .033 var(--u-h)); --side-line:oklch(27% .04 var(--u-h)); --side-ink:oklch(80% .03 var(--u-h)); --side-mut:oklch(60% .03 var(--u-h)); --side-strong:#fff;
  --side-hover:oklch(25% .045 var(--u-h)); --shadow:var(--u-e1); color-scheme:dark;
  --u-pri:oklch(60% .19 var(--u-h)); --u-pri2:oklch(56% .2 calc(var(--u-h) + 32)); --nav-on:linear-gradient(135deg,var(--u-pri),var(--u-pri2)); --nav-on-ink:#fff;
  --btn-pri:linear-gradient(135deg,var(--u-pri),var(--u-pri2)); --btn-pri-ink:#fff; --pri-ink:#fff;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="auto"] {
    --u-soft:oklch(32% .07 var(--u-h)); --u-fill:oklch(25% .035 var(--u-h)); --u-fill2:oklch(28% .04 var(--u-h)); --u-rule:oklch(38% .05 var(--u-h));
    --u-band2:oklch(36% .15 calc(var(--u-h) + 6));
    --u-e1:0 1px 0 oklch(100% 0 0 / .03) inset, 0 18px 40px -22px oklch(5% .02 var(--u-h) / .8);
    --u-e2:0 30px 60px -28px oklch(4% .02 var(--u-h) / .9);
    --bg:oklch(16.5% .03 var(--u-h)); --card:oklch(21% .035 var(--u-h)); --card2:oklch(19% .032 var(--u-h)); --ctl:oklch(23% .038 var(--u-h)); --inp:var(--u-fill);
    --line:oklch(29% .04 var(--u-h)); --line2:var(--u-rule); --track:oklch(27% .04 var(--u-h));
    --ink:oklch(95% .012 var(--u-h)); --ink2:oklch(85% .02 var(--u-h)); --mut:oklch(70% .03 var(--u-h)); --mut2:oklch(52% .03 var(--u-h));
    --pri:oklch(72% .15 var(--u-h)); --acc:oklch(74% .14 var(--u-h)); --acc-soft:var(--u-soft);
    --side:oklch(19% .033 var(--u-h)); --side-line:oklch(27% .04 var(--u-h)); --side-ink:oklch(80% .03 var(--u-h)); --side-mut:oklch(60% .03 var(--u-h)); --side-strong:#fff;
    --side-hover:oklch(25% .045 var(--u-h)); --shadow:var(--u-e1); color-scheme:dark;
  --u-pri:oklch(60% .19 var(--u-h)); --u-pri2:oklch(56% .2 calc(var(--u-h) + 32)); --nav-on:linear-gradient(135deg,var(--u-pri),var(--u-pri2)); --nav-on-ink:#fff;
  --btn-pri:linear-gradient(135deg,var(--u-pri),var(--u-pri2)); --btn-pri-ink:#fff; --pri-ink:#fff;
  }
}

/* ---- zemin: sade, ince yukseklik izgarasi ve ufuk isigi */
body { font-size:14px; letter-spacing:-.003em;
  background:
    radial-gradient(1200px 380px at 60% -160px, oklch(70% .16 var(--u-h) / .22), transparent 70%),
    radial-gradient(700px 420px at 105% 105%, oklch(75% .12 calc(var(--u-h) - 60) / .12), transparent 70%), var(--bg);
  background-attachment:fixed; }
body::before { opacity:1; mix-blend-mode:normal;
  background-image:linear-gradient(oklch(50% .05 var(--u-h) / .045) 1px, transparent 1px), linear-gradient(90deg, oklch(50% .05 var(--u-h) / .045) 1px, transparent 1px);
  background-size:44px 44px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%); mask-image:linear-gradient(180deg,#000,transparent 55%); }
h1, h2, h3 { letter-spacing:-.02em; }
::selection { background:oklch(55% .2 var(--u-h) / .22); }

/* ---- simge seridi menu (genis ekran): uzerine gelince / klavyeyle etiketleriyle acilir; sabitlenince hep acik */
@media (min-width:861px) {
  .shell { display:block; padding-left:var(--u-rail); transition:padding-left .28s cubic-bezier(.2,.8,.2,1); }
  /* acilan menu sayfanin ustune binmez, icerigi saga iter (tema.js kisa bir beklemeyle .u-ac verir; klavyeyle odakta da) */
  html.u-sabit .shell, .shell:has(> .side.u-ac), .shell:has(> .side:focus-within) { padding-left:var(--u-open); }
  .side { position:fixed; left:0; top:0; bottom:0; z-index:60; width:var(--u-rail); padding:14px 0 12px; overflow:hidden; gap:2px;
    background:var(--side); border-right:1px solid var(--side-line); box-shadow:4px 0 24px -18px oklch(30% .1 var(--u-h) / .5);
    backdrop-filter:none; -webkit-backdrop-filter:none; transition:width .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; }
  .side.u-ac, .side:focus-within, html.u-sabit .side { width:var(--u-open); }
  .side > * { min-width:calc(var(--u-open) - 2px); }
  .brand { padding:4px 0 14px 20px; }
  .brand .mk { width:38px; height:38px; border-radius:13px; background:var(--u-band); box-shadow:0 10px 22px -8px oklch(50% .2 var(--u-h) / .65); }
  .brand > div { transition:opacity .2s; }
  .ch-pick, .ch-one, .nav-q { margin-left:14px !important; margin-right:14px !important; width:auto; min-width:0; transition:opacity .2s; }
  .nav { margin:0; padding:2px 0 6px; overflow-x:hidden; }
  .nav a { position:relative; height:44px; margin:2px 12px; padding:0 14px 0 17px; gap:14px; border-radius:14px; white-space:nowrap; font-weight:650; font-size:13.5px;
    transition:background .18s, color .18s, box-shadow .18s; }
  .nav a svg.i { width:21px; height:21px; color:var(--side-ink); stroke-width:1.8; transition:color .18s, transform .25s; }
  .nav a:hover svg.i { color:var(--u-pri); transform:scale(1.08); }
  .nav a.on { background:var(--nav-on); color:#fff; box-shadow:0 12px 24px -12px oklch(50% .21 var(--u-h) / .8); }
  .nav a.on svg.i { color:#fff; }
  .nav a.on::before { content:""; position:absolute; left:-12px; top:10px; bottom:10px; width:4px; border-radius:0 4px 4px 0; background:var(--u-pri); }
  .nav-sub a { height:38px; margin-left:24px; }
  /* kapali serit: etiketler ve yardimci alanlar gizli, simgeler ortada */
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav a { color:transparent; }
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav a .c, html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav a .soon, html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav a .lk,
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav a .cam-st { opacity:0; }
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav-h { font-size:0; padding:0; height:1px; margin:10px 22px; background:var(--side-line); }
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .brand > div,
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .me .who, html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .me-b > svg.i { opacity:0; }
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .ch-pick, html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .ch-one, html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav-q,
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav-sub, html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav-more { display:none; }
  .nav-h { padding:12px 24px 5px; color:var(--side-mut); }
  .me { margin:0 12px; padding:10px 6px 0; }
  .me-b { padding:6px 5px; }
  .me .avatar { background:var(--u-band); color:#fff; }
  .me-m { left:8px; right:auto; width:calc(var(--u-open) - 30px); }
  /* sabitleme dugmesi (tema.js) */
  .u-pin { position:absolute; top:18px; right:14px; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--side-mut);
    cursor:pointer; opacity:0; transition:opacity .2s, background .2s, color .2s; min-width:0 !important; }
  .side.u-ac .u-pin, .side:focus-within .u-pin, html.u-sabit .u-pin { opacity:1; }
  .u-pin:hover { background:var(--side-hover); color:var(--u-pri); }
  html.u-sabit .u-pin { color:var(--u-pri); }
  .u-pin svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
}
@media (max-width:860px) {
  .side { background:var(--side); box-shadow:0 8px 24px -18px oklch(30% .1 var(--u-h) / .5); }
  .nav a.on { background:var(--nav-on); color:#fff; }
  .u-pin { display:none; }
}

/* ---- icerik */
.main { padding:22px 30px 64px; max-width:1680px; }

/* ---- baslik bandi: sayfa basligi, ust kisim (kanal), aciklama, durum; bolum sekmeleri bandin altina bagli */
.top { position:relative; overflow:hidden; isolation:isolate; align-items:center; gap:14px; margin:0 0 var(--gap); padding:22px 28px 22px;
  border-radius:20px; color:#fff; background:var(--u-band); box-shadow:0 22px 44px -26px oklch(42% .2 var(--u-h) / .85); }
.top::before { content:""; position:absolute; inset:-40% -10% auto auto; width:520px; height:520px; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, oklch(100% 0 0 / .22), transparent 62%); animation:u-orb 14s ease-in-out infinite alternate; }
.top::after { content:""; position:absolute; inset:auto auto -60% -8%; width:420px; height:420px; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, oklch(78% .16 calc(var(--u-h) - 70) / .35), transparent 65%); animation:u-orb 18s ease-in-out infinite alternate-reverse; }
@keyframes u-orb { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-60px,30px,0) scale(1.15); } }
.top h1 { color:#fff; font-size:27px; line-height:1.15; letter-spacing:-.025em; font-weight:700; }
.top .crumb, .top .crumb a, .top .eyebrow { color:oklch(100% 0 0 / .78); letter-spacing:.1em; font-size:11.5px; margin-bottom:6px; }
.top .crumb a:hover { color:#fff; }
.top .lead, .top .lead-sm, .top p { color:oklch(100% 0 0 / .86); max-width:900px; }
.top .mut { color:oklch(100% 0 0 / .72); }
.top .tag { background:oklch(100% 0 0 / .16) !important; color:#fff !important; border:1px solid oklch(100% 0 0 / .32) !important; backdrop-filter:blur(6px); }
.top .btn { background:oklch(100% 0 0 / .14); color:#fff; border-color:oklch(100% 0 0 / .34); box-shadow:none; }
.top .btn:hover { background:oklch(100% 0 0 / .24); }
.top .btn.pri { background:#fff; color:oklch(45% .2 var(--u-h)); }
.top .btn.pri::after { display:none; }
.top a:not(.btn) { color:#fff; }
.u-saat { display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin-left:auto; font:700 13px var(--f-disp); color:oklch(100% 0 0 / .9);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; }
.u-saat small { font:600 10.5px var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:oklch(100% 0 0 / .65); }
.top:has(+ .ak-tabs) { border-radius:20px 20px 0 0; margin-bottom:0; padding-bottom:20px; box-shadow:none; }
.top + .ak-tabs { position:relative; display:flex; width:auto; max-width:none; margin:0 0 var(--gap); padding:6px 12px; gap:4px; border:0; border-radius:0 0 20px 20px;
  background:var(--u-band2); box-shadow:0 22px 44px -26px oklch(42% .2 var(--u-h) / .85); }
.top + .ak-tabs .ak-tab { color:oklch(100% 0 0 / .76); font-weight:750; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; padding:10px 15px; border-radius:11px; }
.top + .ak-tabs .ak-tab svg.i { color:inherit; }
.top + .ak-tabs .ak-tab:hover { background:oklch(100% 0 0 / .1); color:#fff; }
.top + .ak-tabs .ak-tab.on { background:oklch(100% 0 0 / .18); color:#fff; box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .22); }
.ak-tabs { background:var(--card); border:0; box-shadow:var(--u-e1); border-radius:16px; }
.ak-tab.on { background:var(--nav-on); color:#fff; box-shadow:0 10px 22px -12px oklch(50% .21 var(--u-h) / .8); }
.ak-tab.on svg.i { color:#fff; }

/* ---- ozellik sekmeleri: sayfa duzeyinde beyaz serit + renkli hap; kart icinde (form bolumleri) mavi serit */
.sk-nav { gap:4px; padding:6px; margin:0 0 var(--gap); border:0; border-radius:16px; background:var(--card); box-shadow:var(--u-e1); }
.sk-t { padding:10px 16px; border-radius:11px; font-weight:750; font-size:13px; color:var(--mut); }
.sk-t:hover { background:var(--u-fill2); color:var(--ink); }
.sk-t.on { background:var(--nav-on); color:#fff; box-shadow:0 10px 22px -12px oklch(50% .21 var(--u-h) / .8); }
.sk-t.on::after { display:none; }
.sk-t svg.i { color:inherit; }
.card .sk-nav, .sk-p .card .sk-nav { background:var(--u-band); box-shadow:inset 0 -1px 0 oklch(100% 0 0 / .08); border-radius:13px; padding:5px; margin:4px 0 18px; }
.card .sk-t { color:oklch(100% 0 0 / .8); text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; padding:9px 14px; }
.card .sk-t:hover { background:oklch(100% 0 0 / .12); color:#fff; }
.card .sk-t.on { background:#fff; color:oklch(45% .2 var(--u-h)); box-shadow:0 8px 18px -10px oklch(20% .1 var(--u-h) / .6); }
.sk-p:not([hidden]) > * { animation:u-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes u-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- kartlar: beyaz, yumusak golge, baslikta vurgu cizgisi */
.card { border:1px solid transparent; border-radius:var(--r-card); padding:22px; background:var(--card); box-shadow:var(--u-e1); animation:u-in .5s cubic-bezier(.2,.8,.2,1) both; }
.card::before { display:none; }
.card::after { display:none; }
.card.lift:hover { transform:translateY(-3px); box-shadow:var(--u-e2); }
.card.feature { border:1px solid transparent; animation:u-in .5s cubic-bezier(.2,.8,.2,1) both; background:var(--card); }
.card-h { margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.card-h h2 { display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:750; }
.card-h h2::before { content:""; width:4px; height:18px; border-radius:4px; flex:none; background:linear-gradient(180deg,var(--u-pri),var(--u-pri2)); }
.card.danger { box-shadow:var(--u-e1), inset 0 3px 0 var(--bad); }

/* ---- istatistik kartlari: renk gecisli zemin, beyaz yazi, cam simge alani */
.g-kpi { gap:18px; }
.card.kpi { --ka:var(--k1a); --kb:var(--k1b); color:#fff; border:0; padding:20px 22px; overflow:hidden;
  background:linear-gradient(135deg,var(--ka),var(--kb)); box-shadow:0 18px 34px -20px var(--ka); }
/* varsayilan temanin renk siniflarina gore: g1 mor, g2 kirmizi, g3 yesil, g4 turuncu, g5 eflatun, g6 mavi */
.card.kpi.g2 { --ka:var(--k4a); --kb:var(--k4b); } .card.kpi.g3 { --ka:var(--k2a); --kb:var(--k2b); } .card.kpi.g4 { --ka:var(--k3a); --kb:var(--k3b); }
.card.kpi.g5 { --ka:var(--k5a); --kb:var(--k5b); } .card.kpi.g6 { --ka:var(--k6a); --kb:var(--k6b); }
.card.kpi::after { display:block; opacity:1; inset:0; z-index:0;
  background:radial-gradient(circle at 92% 8%, oklch(100% 0 0 / .26) 0 46px, transparent 47px), radial-gradient(circle at 110% 120%, oklch(100% 0 0 / .14) 0 110px, transparent 111px); }
.card.kpi.lift:hover { transform:translateY(-4px); box-shadow:0 26px 44px -22px var(--ka); }
.kpi .lab { color:oklch(100% 0 0 / .9); text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.kpi .lab::before { width:28px; height:28px; border-radius:9px; background:oklch(100% 0 0 / .22); box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .25); }
.kpi .val, .kpi .val * { color:#fff; -webkit-text-fill-color:#fff; background:none; }
.kpi .val small { -webkit-text-fill-color:oklch(100% 0 0 / .78); }
.kpi .sub, .kpi .sub * { color:oklch(100% 0 0 / .86); }
.kpi .tag { background:oklch(100% 0 0 / .2); color:#fff; border-color:transparent; }

/* ---- dugmeler */
.btn { border-radius:var(--r-ctl); font-weight:700; border:1px solid var(--line); background:var(--card); color:var(--ink2); box-shadow:0 1px 2px oklch(30% .05 var(--u-h) / .06);
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s; }
.btn:hover { text-decoration:none; background:var(--u-fill); border-color:var(--u-rule); color:var(--ink); }
.btn:active { transform:translateY(1px); }
.btn.pri { background:var(--btn-pri); color:#fff; border:0; box-shadow:0 12px 24px -12px oklch(50% .21 var(--u-h) / .85); }
.btn.pri:hover { color:#fff; filter:brightness(1.06) saturate(1.05); }
.btn.bad { background:#f2475b; color:#fff; border-color:transparent; box-shadow:0 10px 20px -12px #f2475b; }
.btn.bad:hover { background:#e23347; color:#fff; }

/* ---- durum rozetleri: duz renk */
.tag { border-radius:8px; padding:4px 10px; font-weight:800; font-size:11px; letter-spacing:.02em; }
.tag.ok { background:#0fb27c; color:#fff; } .tag.warn { background:#ff8f2a; color:#fff; } .tag.bad { background:#f2475b; color:#fff; }
.tag.live { background:linear-gradient(90deg,#ff3d6e,#ff7a45); color:#fff; } .tag.fb { background:var(--u-pri); color:#fff; }

/* ---- form alanlari: dolgulu, alt cizgide vurgu */
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], input[type=date], input[type=time], input[type=datetime-local], select, textarea {
  background:var(--u-fill); border:1px solid transparent; border-bottom:2px solid var(--u-rule); border-radius:11px 11px 6px 6px; padding:11px 13px; }
input:not([type]):hover, input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=number]:hover, input[type=url]:hover, select:hover, textarea:hover { background:var(--u-fill2); }
input:focus, select:focus, textarea:focus { background:var(--card); border-color:oklch(55% .2 var(--u-h) / .25); border-bottom-color:var(--u-pri); box-shadow:0 0 0 4px oklch(55% .2 var(--u-h) / .12); }
label.l, .l { font-weight:700; color:var(--ink2); }
.seg { background:var(--u-fill); border:0; border-radius:13px; }
.seg input:checked + span, .seg span.on { background:var(--nav-on); color:#fff; box-shadow:0 8px 18px -10px oklch(50% .21 var(--u-h) / .8); }
input[type=checkbox].ak-sw:checked { background:var(--u-pri); }

/* ---- tablolar */
table.t th { color:oklch(52% .06 var(--u-h)); letter-spacing:.08em; font-size:10.5px; padding:12px; background:var(--card2); border-bottom:1px solid var(--line); }
table.t th:first-child { border-radius:10px 0 0 10px; } table.t th:last-child { border-radius:0 10px 10px 0; }
table.t td { padding:13px 12px; }
table.t tbody tr:hover { background:oklch(55% .2 var(--u-h) / .045); }

/* ---- bildirim seritleri */
.note { border:0; border-radius:14px; border-left:4px solid var(--u-pri); background:var(--card); box-shadow:var(--u-e1); }
.note.ok { border-left-color:#0fb27c; } .note.warn { border-left-color:#ff8f2a; } .note.err { border-left-color:#f2475b; }

/* ---- profil menusu ve alt bilgi */
.me-m { border:0; border-radius:16px; box-shadow:var(--u-e2); }
.me-m a.on { background:var(--u-soft); color:var(--u-pri); }
.app-foot { color:var(--mut); }

/* ---- kaydirma ilerleme cubugu, dalga efekti (tema.js) */
.u-prog { position:fixed; left:0; top:0; height:3px; z-index:90; width:100%; transform-origin:0 50%; transform:scaleX(var(--u-p,0)); background:var(--u-band); pointer-events:none; }
.u-rip { position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:.18; transform:scale(0); animation:u-rip .6s ease-out forwards; z-index:0; }
@keyframes u-rip { to { transform:scale(1); opacity:0; } }
.u-pal { display:flex; flex-wrap:wrap; gap:8px; padding:4px 10px 8px; }
.u-pal button { width:24px; height:24px; border-radius:50%; border:2px solid var(--card); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; }
.u-pal button.on { box-shadow:0 0 0 2px var(--ink); }
.u-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; font-size:13px; color:var(--ink2); }
@media (prefers-reduced-motion: reduce) { .top::before, .top::after, .card, .sk-p:not([hidden]) > * { animation:none !important; } }
html.u-sakin .top::before, html.u-sakin .top::after, html.u-sakin .card, html.u-sakin .sk-p:not([hidden]) > * { animation:none !important; }

/* ---- IP kamera: kamera basligi bandi ve ona bagli kamera sekmeleri; secili kamera menude vurgulu */
.top:has(+ .cam-tabs) { border-radius:20px 20px 0 0; margin-bottom:0; padding-bottom:20px; box-shadow:none; }
.top + .cam-tabs { margin:0 0 var(--gap); padding:6px 12px; gap:4px; border:0; border-radius:0 0 20px 20px; background:var(--u-band2);
  box-shadow:0 22px 44px -26px oklch(42% .2 var(--u-h) / .85); backdrop-filter:none; }
.top + .cam-tabs a { color:oklch(100% 0 0 / .76); font-weight:750; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; padding:10px 15px; border-radius:11px; }
.top + .cam-tabs a:hover { background:oklch(100% 0 0 / .1); color:#fff; }
.top + .cam-tabs a.on { background:oklch(100% 0 0 / .18); color:#fff; box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .22); }
.top .cam-pill { background:oklch(100% 0 0 / .16); color:#fff; border:1px solid oklch(100% 0 0 / .32); }
/* kamera sayfalarinda ince bant: ust kisim, ad ve durum yan yana, tek satir aciklama, kucuk saat; sekme seridi de ince */
.top.cam-top { flex-wrap:nowrap; gap:18px; padding:14px 22px; border-radius:16px; box-shadow:0 16px 32px -24px oklch(42% .2 var(--u-h) / .8); }
.top.cam-top::before { width:300px; height:300px; inset:-90% -3% auto auto; }
.top.cam-top::after { width:240px; height:240px; inset:auto auto -130% -3%; }
.top.cam-top .grow { min-width:0; }
.top.cam-top .crumb { font-size:10.5px; margin-bottom:3px; }
.top.cam-top h1 { font-size:21px; line-height:1.2; }
.top.cam-top .lead-sm { margin:3px 0 0; font-size:13px; line-height:1.45; max-width:860px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top.cam-top .u-saat { font-size:12px; } .top.cam-top .u-saat small { font-size:9.5px; }
.cam-h1 { display:flex; align-items:center; gap:10px; min-width:0; }
.cam-h1 h1 { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top.cam-top .cam-pill { flex:none; padding:3px 10px; gap:6px; font-size:11.5px; }
.top.cam-top .cam-pill i { width:7px; height:7px; }
.top.cam-top:has(+ .cam-tabs) { border-radius:16px 16px 0 0; padding-bottom:12px; }
.top.cam-top + .cam-tabs { padding:6px 10px; border-radius:0 0 16px 16px; box-shadow:0 16px 32px -24px oklch(42% .2 var(--u-h) / .8); }
.top.cam-top + .cam-tabs a { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border-radius:11px; font-size:13px; font-weight:700; letter-spacing:0;
  text-transform:none; color:oklch(100% 0 0 / .82); transition:background .2s, color .2s, box-shadow .2s; }
.top.cam-top + .cam-tabs a svg.i { width:17px; height:17px; opacity:.92; }
.top.cam-top + .cam-tabs a svg.lk { width:12px; height:12px; margin-left:-3px; opacity:.75; }
.top.cam-top + .cam-tabs a:hover { background:oklch(100% 0 0 / .14); color:#fff; }
.top.cam-top + .cam-tabs a.on { background:#fff; color:oklch(45% .2 var(--u-h)); box-shadow:0 8px 18px -10px oklch(20% .1 var(--u-h) / .65); }
.top.cam-top + .cam-tabs a.on svg.i { opacity:1; }
.top.cam-top + .cam-tabs a.locked:not(.on) { color:oklch(100% 0 0 / .6); }
@media (min-width:721px) { .top.cam-top + .cam-tabs { flex-wrap:wrap; overflow:visible; } }   /* dar dizustunde sekmeler gizlenmesin: ikinci satira gecer */
/* kamera sayfalarinda ozellik sekmeleri (sayfa ici serit) ve alt sayfa sekmeleri: her sekme dugme gibi, renkli simge kutusu; secili sekme dolgulu */
.sk-nav.sk-kam, .main:has(.top.cam-top) .ak-tabs { gap:8px; padding:8px; border-radius:18px; background:var(--card); box-shadow:var(--u-e1); }
.sk-kam .sk-t, .main:has(.top.cam-top) .ak-tab { gap:10px; padding:6px 16px 6px 6px; border:1px solid var(--line); border-radius:13px; background:var(--card2); color:var(--ink2);
  font-size:13.5px; font-weight:750; transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.sk-kam .sk-t svg.i, .main:has(.top.cam-top) .ak-tab svg.i { --tc:var(--k6a); box-sizing:border-box; width:32px; height:32px; padding:7px; border-radius:10px; flex:none;
  color:var(--tc); background:color-mix(in srgb,var(--tc) 14%,var(--card)); stroke-width:1.9; transition:background .2s, color .2s; }
.sk-kam .sk-t:nth-child(6n+2) svg.i, .main:has(.top.cam-top) .ak-tab:nth-child(6n+2) svg.i { --tc:var(--k2a); }
.sk-kam .sk-t:nth-child(6n+3) svg.i, .main:has(.top.cam-top) .ak-tab:nth-child(6n+3) svg.i { --tc:var(--k3a); }
.sk-kam .sk-t:nth-child(6n+4) svg.i, .main:has(.top.cam-top) .ak-tab:nth-child(6n+4) svg.i { --tc:var(--k1a); }
.sk-kam .sk-t:nth-child(6n+5) svg.i, .main:has(.top.cam-top) .ak-tab:nth-child(6n+5) svg.i { --tc:var(--k4a); }
.sk-kam .sk-t:nth-child(6n+6) svg.i, .main:has(.top.cam-top) .ak-tab:nth-child(6n+6) svg.i { --tc:var(--k5a); }
.sk-kam .sk-t:hover, .main:has(.top.cam-top) .ak-tab:hover { color:var(--ink); background:var(--card); border-color:color-mix(in srgb,var(--acc) 40%,var(--line)); transform:translateY(-1px);
  box-shadow:0 12px 22px -18px oklch(40% .15 var(--u-h) / .75); }
.sk-kam .sk-t.on, .main:has(.top.cam-top) .ak-tab.on { color:#fff; background:var(--nav-on); border-color:transparent; transform:none; box-shadow:0 14px 26px -14px oklch(50% .21 var(--u-h) / .85); }
.sk-kam .sk-t.on svg.i, .main:has(.top.cam-top) .ak-tab.on svg.i { color:#fff; background:oklch(100% 0 0 / .2); }
.main:has(.top.cam-top) .ak-tab .tl svg.i { width:13px; height:13px; padding:0; background:none; color:inherit; }
.sk-kam .sk-t:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
@media (max-width:640px) {
  .sk-kam .sk-t, .main:has(.top.cam-top) .ak-tab { padding:5px 13px 5px 5px; font-size:13px; }
  .sk-kam .sk-t svg.i, .main:has(.top.cam-top) .ak-tab svg.i { width:28px; height:28px; padding:6px; }
}
@media (max-width:720px) {
  .top.cam-top { padding:12px 16px; }
  .top.cam-top .u-saat { display:none; }
  .top.cam-top h1 { font-size:19px; }
}
@media (min-width:861px) {
  .nav a.nav-cam.cur { background:var(--nav-on); color:#fff; box-shadow:0 12px 24px -12px oklch(50% .21 var(--u-h) / .8); }
  .nav a.nav-cam.cur svg.i, .nav a.nav-cam.cur .cam-st { color:#fff; }
  .nav a.nav-cam { padding-left:24px; }
  .nav a.nav-cam .cam-st { flex:none; }
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav a.nav-cam .cam-st { opacity:1; }
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) .nav-h svg.i { display:none; }
}

/* ---- IP kamera ozet kartlari (Kameralarim): toplam mor, yayinda yesil, uyari turuncu, cevrimdisi kirmizi */
.cam-kpi { --ka:var(--k1a); --kb:var(--k1b); border:0 !important; color:#fff; overflow:hidden; background:linear-gradient(135deg,var(--ka),var(--kb)) !important;
  box-shadow:0 18px 34px -20px var(--ka) !important; }
.cam-kpis > .cam-kpi:nth-child(6n+2) { --ka:var(--k2a); --kb:var(--k2b); } .cam-kpis > .cam-kpi:nth-child(6n+3) { --ka:var(--k3a); --kb:var(--k3b); }
.cam-kpis > .cam-kpi:nth-child(6n+4) { --ka:var(--k4a); --kb:var(--k4b); } .cam-kpis > .cam-kpi:nth-child(6n+5) { --ka:var(--k5a); --kb:var(--k5b); }
.cam-kpis > .cam-kpi:nth-child(6n+6) { --ka:var(--k6a); --kb:var(--k6b); }
.cam-kpi::before { display:none; }
.cam-kpi::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 92% 10%, oklch(100% 0 0 / .26) 0 40px, transparent 41px), radial-gradient(circle at 110% 125%, oklch(100% 0 0 / .14) 0 100px, transparent 101px); }
.cam-kpi span { color:oklch(100% 0 0 / .9); text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.cam-kpi b { color:#fff; } .cam-kpi small { color:oklch(100% 0 0 / .85); }
.cam-kpi.on { box-shadow:0 0 0 3px oklch(100% 0 0 / .9), 0 18px 34px -16px var(--ka) !important; }
.cam-ki { position:relative; z-index:1; color:#fff; background:oklch(100% 0 0 / .2); box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .3); backdrop-filter:blur(4px); }
.cam-kp { background:oklch(100% 0 0 / .25); } .cam-kp i { background:#fff; }
.cam-kgo { color:#fff; }
.cam-kpi[disabled] { opacity:.78; filter:saturate(.55); }
/* ozet kartinin penceresi: baslik karttaki renkte */
.cam-kh.g5 { --ca:var(--k1a); --cb:var(--k1b); } .cam-kh.g3 { --ca:var(--k2a); --cb:var(--k2b); } .cam-kh.g4 { --ca:var(--k3a); --cb:var(--k3b); }
.cam-kh.g2 { --ca:var(--k4a); --cb:var(--k4b); } .cam-kh.g1 { --ca:var(--k5a); --cb:var(--k5b); }
/* ---- yonetici menusu: gorunum / tema secicileri serit kapaliyken gizli, acilinca ortada */
@media (min-width:861px) {
  .side > .scheme { margin-left:14px !important; margin-right:14px; width:auto; min-width:0; }
  html:not(.u-sabit) .side:not(.u-ac):not(:focus-within) > .scheme { display:none; }
}
/* ---- simgeli ozellik sekmeleri (sk-ik): etkin sekmenin hapi kayan gostergede */
.sk-ik .sk-t.on { background:transparent; box-shadow:none; color:#fff; }
.sk-ik .sk-t.on svg.i { color:#fff; background:oklch(100% 0 0 / .2); }
.sk-ik .sk-ind { height:var(--sk-h,0); border-radius:11px; background:var(--nav-on); box-shadow:0 10px 22px -12px oklch(50% .21 var(--u-h) / .8);
  transform:translate(var(--sk-x,0), var(--sk-y,0)); }
html.u-sakin .sk-ind-on .sk-ind, html.u-sakin .sk-ik .sk-t svg.i { transition:none; }
html.u-sakin .sk-ikli > .sk-p:not([hidden]) > * { animation:none !important; }
.si-g { background:var(--card2); border-color:transparent; }