/* ============================================================================
   XPANEL MASTER V3.0 — TURUNCU / SİYAH TEMA
   style.css'ten SONRA yuklenir; gorsel tokenlari ve bilesenleri ezer.

   Tasarim notu: token ISIMLERI style.css ile birebir ayni tutuldu. Boylece
   style.css icindeki ~1370 var(--...) kullanimi tek satir bile degistirilmeden
   yeni paleti alir. Bilesen kurallari yalnizca "monokrom" gorunumu kiran
   yerlerde ezilir.
   ========================================================================= */

/* ─────────────────────────  1. TOKENLAR  ───────────────────────── */
:root,
:root[data-theme="dark"],
:root[data-theme="oled"],
:root[data-theme="midnight"] {
  /* Yuzeyler — saf siyah taban, yukari dogru cok hafif sicak kayma */
  --bg:        #060606;
  --bg2:       #0b0b0c;
  --bg3:       #121213;
  --bg4:       #1b1b1d;
  --surface:   #0b0b0c;
  --surface2:  #121213;
  --surface3:  #1b1b1d;
  --glass:     rgba(10, 10, 11, .84);
  --glass-bdr: rgba(255, 138, 46, .14);
  --glass-blur: blur(18px) saturate(130%);

  /* Metin */
  --txt:  #f7f7f8;
  --txt2: #b0b0b4;
  --txt3: #7a7a80;
  --txt4: #55555a;

  /* Kenarlik — notr + turuncu sicaklik karisimi */
  --bdr:  rgba(255, 255, 255, .09);
  --bdr2: rgba(255, 255, 255, .05);
  --bdr-accent: rgba(255, 138, 46, .32);

  /* ── VURGU: TURUNCU ── */
  --h-accent: 26;
  --s-accent: 100%;
  --l-accent: 56%;
  --accent:       #ff8a2e;
  --accent-hover: #ffa053;
  --accent-soft:  #ffb887;
  --accent-deep:  #e0670c;
  --accent-fg:    #1a0d00;
  --accent-a08: rgba(255, 138, 46, .07);
  --accent-a10: rgba(255, 138, 46, .10);
  --accent-a15: rgba(255, 138, 46, .15);
  --accent-a20: rgba(255, 138, 46, .21);
  --accent-a30: rgba(255, 138, 46, .30);
  --accent-glow: 0 0 0 3px rgba(255, 138, 46, .22);
  --accent-grad: linear-gradient(135deg, #ffa053 0%, #ff8a2e 45%, #f4720f 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(255,160,83,.16), rgba(255,138,46,.05));
  --accent-ring: 0 0 22px rgba(255, 138, 46, .35);

  /* Durum renkleri — turuncuyla catismayacak sekilde */
  --grn: #2fd07a; --grn-bg: rgba(47, 208, 122, .11); --grn-bdr: rgba(47, 208, 122, .28);
  --red: #ff5a5a; --red-bg: rgba(255, 90, 90, .11);  --red-bdr: rgba(255, 90, 90, .28);
  --ora: #ffb020; --ora-bg: rgba(255, 176, 32, .11); --ora-bdr: rgba(255, 176, 32, .28);
  --cyn: #3fb9f0; --cyn-bg: rgba(63, 185, 240, .11); --cyn-bdr: rgba(63, 185, 240, .26);
  --pur: #b98cff; --pur-bg: rgba(185, 140, 255, .11); --pur-bdr: rgba(185, 140, 255, .26);
  --pnk: #ff7ab8; --pnk-bg: rgba(255, 122, 184, .11);

  /* Geometri — biraz daha yumusak */
  --rad:    11px;
  --rad-sm:  8px;
  --rad-lg: 16px;
  --rad-xl: 22px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .55);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, .62);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, .72);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 138, 46, .26);
  --scrollbar-thumb-hover: rgba(255, 138, 46, .48);
  --code-bg: #0e0e0f;
  --body-gradient: none;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.28, .64, 1);

  /* style.css bu 5 tokeni kullaniyor ama HICBIR yerde tanimlanmamislardi
     (fallback'siz olanlar gecersiz deger olarak dusuyordu — orn. --accent-a05,
     --accent-rgb, --bg-main). Burada tanimlanip turuncuya baglandilar. */
  --accent-a05: rgba(255, 138, 46, .05);
  --accent-light: #ffb887;
  --accent-rgb: 255, 138, 46;
  --bg-main: var(--bg);
  --grp-c: #ff8a2e;

  color-scheme: dark;
}

/* Acik tema — ayni turuncu dil, aydinlik yuzeyler */
:root[data-theme="light"] {
  --bg: #ffffff; --bg2: #fbfaf9; --bg3: #f4f2f0; --bg4: #e9e6e2;
  --surface: #ffffff; --surface2: #fbfaf9; --surface3: #f4f2f0;
  --glass: rgba(255, 255, 255, .88); --glass-bdr: rgba(224, 103, 12, .18);
  --txt: #131211; --txt2: #4d4a47; --txt3: #78736e; --txt4: #a5a09a;
  --bdr: rgba(0, 0, 0, .12); --bdr2: rgba(0, 0, 0, .07);
  --bdr-accent: rgba(224, 103, 12, .34);
  /* #e0670c beyaz zemine 3.43:1 veriyordu — kucuk buton yazisi icin AA'nin
     altinda. #c05408 ayni turuncu tonunu korur, 4.65:1 ile AA'yi gecer. */
  --accent: #c05408; --accent-hover: #a8490a; --accent-soft: #8f3e07;
  --accent-deep: #8f3e07; --accent-fg: #ffffff;
  --accent-a08: rgba(224, 103, 12, .06); --accent-a10: rgba(224, 103, 12, .09);
  --accent-a15: rgba(224, 103, 12, .13); --accent-a20: rgba(224, 103, 12, .18);
  --accent-a30: rgba(224, 103, 12, .26);
  --accent-glow: 0 0 0 3px rgba(192, 84, 8, .20);
  --accent-grad: linear-gradient(135deg, #e0670c 0%, #c05408 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(224,103,12,.10), rgba(224,103,12,.03));
  --accent-ring: 0 0 18px rgba(224, 103, 12, .22);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .10);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, .12);
  --scrollbar-thumb: rgba(224, 103, 12, .30); --scrollbar-thumb-hover: rgba(224, 103, 12, .55);
  --code-bg: #f4f2f0;
  --accent-a05: rgba(224, 103, 12, .05);
  --accent-light: #ff8a2e;
  --accent-rgb: 224, 103, 12;
  --grp-c: #e0670c;
  color-scheme: light;
}

/* ─────────────────────  2. ARAYUZ OLCEGI ("uzaklastirma")  ─────────────────
   style.css'te olcu birimlerinin tamami px (2088 px'e karsi 1 rem) — bu yuzden
   html{font-size} ile kucultme ISE YARAMAZ.

   `body{zoom}` da KULLANILMADI: .side sabit konumlu ve height:100vh — zoom
   viewport birimlerini de olcekledigi icin kenar cubugunun altinda bosluk
   birakiyordu. Onun yerine yogunluk degerleri dogrudan kucultuldu; davranis
   her tarayicida ayni ve ongorulebilir.

   Daha genis/dar istersen tek yer: asagidaki --side-w ve font/padding degerleri.
   ------------------------------------------------------------------------- */
:root { --side-w: 212px; }

@media (min-width: 1025px) {
  /* Kenar cubugu + ana alan birlikte daralir (ikisi ayni degeri kullanmali,
     yoksa icerik cubugun altinda kalir). */
  .side, .side.app-sidebar {
    width: var(--side-w) !important;
    min-width: var(--side-w) !important;
    max-width: var(--side-w) !important;
  }
  .main, .main.app-main {
    margin-left: var(--side-w) !important;
    width: calc(100% - var(--side-w)) !important;
  }
  .topbar, .topbar.app-topbar { left: var(--side-w); }
}

/* Yogunluk: ayni ekrana daha cok icerik sigsin */
@media (min-width: 769px) {
  .nav-i        { padding: 6px 9px !important; font-size: 12px !important; }
  .side-head    { padding: 12px 13px 10px !important; }
  .topbar       { padding: 0 14px !important; }
  .topbar-title { font-size: 14px !important; }
  .ph-left h2   { font-size: 15.5px !important; }
  .ph-left p    { font-size: 11.5px !important; }
  .stat-card    { padding: 13px !important; }
  .stat-val     { font-size: 22px !important; }
  .stat-label   { font-size: 11px !important; }
  .card-head    { padding: 10px 12px !important; }
  .btn          { font-size: 12.5px !important; }
}

/* ─────────────────────────  3. TABAN  ───────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg) !important;
  color: var(--txt) !important;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(255, 138, 46, .09), transparent 62%),
    radial-gradient(880px 460px at 88% 4%, rgba(224, 103, 12, .06), transparent 60%) !important;
  background-attachment: fixed !important;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -.006em;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(255, 138, 46, .10), transparent 62%),
    radial-gradient(880px 460px at 88% 4%, rgba(224, 103, 12, .05), transparent 60%) !important;
}
body::before, body::after { display: none !important; content: none !important; }

::selection { background: rgba(255, 138, 46, .30); color: #fff; }
:root[data-theme="light"] ::selection { background: rgba(224, 103, 12, .22); color: #000; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
* { scrollbar-color: var(--scrollbar-thumb) transparent; }

h1, h2, h3, h4 { color: var(--txt); letter-spacing: -.022em; font-weight: 700; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
code, pre, .mono { background: var(--code-bg); color: var(--accent-soft); }
hr { border-color: var(--bdr); }

/* Klavye odagi — her yerde gorunur turuncu halka */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rad-sm);
}

/* ─────────────────────────  4. ANIMASYONLAR  ───────────────────────── */
@keyframes xm-fade-up   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes xm-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes xm-pop       { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes xm-shimmer   { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes xm-pulse     { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes xm-glow      { 0%,100% { box-shadow: 0 0 0 0 rgba(255,138,46,.30); } 50% { box-shadow: 0 0 0 7px rgba(255,138,46,0); } }
@keyframes xm-sweep     { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }

/* Sayfa girisi */
.page.on { animation: xm-fade-up .3s var(--ease) both; }
.card    { animation: xm-fade-in .32s var(--ease) both; }
.modal   { animation: xm-pop .22s var(--ease-spring) both; }

/* Yukleniyor iskeleti */
.skeleton, .loading-shimmer {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 840px 100%;
  animation: xm-shimmer 1.4s linear infinite;
  border-radius: var(--rad-sm);
}

/* ─────────────────────────  5. KABUK  ───────────────────────── */
.shell.app-shell { background: transparent; }

.side.app-sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--bdr) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.side-head.app-brand {
  border-bottom: 1px solid var(--bdr);
  background: transparent !important;
  padding: 16px 14px;
}
/* Marka rozeti — turuncu gradyan + hafif isik */
.side-logo.app-brand-mark {
  background: var(--accent-grad) !important;
  border-radius: var(--rad-sm);
  box-shadow: var(--accent-ring) !important;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease);
}
.side-logo.app-brand-mark:hover { transform: rotate(-6deg) scale(1.06); }
.side-logo.app-brand-mark svg { fill: var(--accent-fg) !important; }
.side-title { color: var(--txt) !important; letter-spacing: -.02em; }

/* Menu ogeleri — solda kayan turuncu gosterge */
.nav-i {
  position: relative;
  color: var(--txt2) !important;
  border-radius: var(--rad-sm);
  transition: color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.nav-i::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--accent-grad);
  transform: translateY(-50%);
  transition: height .22s var(--ease-spring);
}
.nav-i:hover { color: var(--txt) !important; background: var(--accent-a08) !important; }
.nav-i:hover::before { height: 42%; }
.nav-i.on {
  color: var(--accent) !important;
  background: var(--accent-grad-soft) !important;
  font-weight: 600;
}
.nav-i.on::before { height: 66%; }
.nav-i svg { transition: transform .2s var(--ease); }
.nav-i:hover svg { transform: translateX(2px); }

/* Ust bar */
.topbar.app-topbar {
  background: var(--glass) !important;
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--bdr) !important;
}
.topbar-title { color: var(--txt) !important; }
.topbar-chip, .topbar-stat {
  background: var(--bg3) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txt2) !important;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.topbar-chip:hover, .topbar-stat:hover { border-color: var(--bdr-accent) !important; color: var(--txt) !important; }

/* ─────────────────────────  6. SAYFA / KART  ───────────────────────── */
.ph { border-bottom: 1px solid var(--bdr); }
.ph-left h2 { color: var(--txt); }
.ph-left p  { color: var(--txt3); }

.card {
  background: var(--surface) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--rad-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover {
  border-color: var(--bdr-accent) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 138, 46, .08) !important;
}
.card-head { border-bottom: 1px solid var(--bdr) !important; background: transparent !important; }
.card-head h3 { color: var(--txt) !important; }

/* Istatistik kartlari — ustte ince turuncu serit */
.stat-card, .stats-grid > * {
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.stat-card::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--accent-grad);
  opacity: .55;
  transition: opacity .22s var(--ease);
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--bdr-accent) !important; }
.stat-card:hover::after { opacity: 1; }
.stat-val { color: var(--txt) !important; }
.stat-label { color: var(--txt3) !important; }

/* ─────────────────────────  7. BUTONLAR  ───────────────────────── */
.btn {
  border-radius: var(--rad-sm);
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Birincil — turuncu gradyan + parlama sweep */
.btn.btn-p {
  position: relative;
  overflow: hidden;
  background: var(--accent-grad) !important;
  color: var(--accent-fg) !important;
  border: 1px solid transparent !important;
  font-weight: 650;
  box-shadow: 0 2px 12px rgba(255, 138, 46, .22);
}
.btn.btn-p::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: translateX(-120%);
}
.btn.btn-p:hover { box-shadow: 0 4px 20px rgba(255, 138, 46, .38); filter: brightness(1.05); }
.btn.btn-p:hover::after { animation: xm-sweep .7s var(--ease); }

/* Ikincil / hayalet */
.btn.btn-s, .btn.btn-w {
  background: transparent !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txt2) !important;
}
.btn.btn-s:hover, .btn.btn-w:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-a08) !important;
}
.btn.btn-d {
  background: transparent !important;
  border: 1px solid var(--red-bdr) !important;
  color: var(--red) !important;
}
.btn.btn-d:hover { background: var(--red-bg) !important; }

/* ─────────────────────────  8. FORMLAR  ───────────────────────── */
.fi, input, select, textarea, .form-input {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--txt) !important;
  border-radius: var(--rad-sm) !important;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.fi:hover, input:hover, select:hover, textarea:hover { border-color: var(--bdr-accent) !important; }
.fi:focus, input:focus, select:focus, textarea:focus, .form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--accent-glow) !important;
  background: var(--bg) !important;
  outline: none;
}
::placeholder { color: var(--txt4) !important; }
.form-label { color: var(--txt2) !important; }

/* Onay kutusu / radyo — turuncu */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Anahtar (switch) */
.switch input:checked + .slider,
.toggle input:checked + .track { background: var(--accent-grad) !important; }

/* ─────────────────────────  9. TABLO  ───────────────────────── */
table { border-color: var(--bdr) !important; }
thead th {
  background: var(--bg2) !important;
  color: var(--txt3) !important;
  border-bottom: 1px solid var(--bdr) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
tbody td { border-bottom: 1px solid var(--bdr2) !important; color: var(--txt) !important; }
tbody tr { transition: background .15s var(--ease); }
tbody tr:hover td { background: var(--accent-a08) !important; }

/* ─────────────────────  10. SEKME / ROZET / MODAL  ───────────────────── */
.tabs { border-bottom: 1px solid var(--bdr); }
.tab {
  position: relative;
  color: var(--txt3) !important;
  background: transparent !important;
  border: none !important;
  transition: color .18s var(--ease);
}
.tab::after {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px;
  background: var(--accent-grad);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s var(--ease-spring);
}
.tab:hover { color: var(--txt) !important; }
.tab.on, .tab.active { color: var(--accent) !important; font-weight: 650; }
.tab.on::after, .tab.active::after { transform: scaleX(1); }

.badge, .pill {
  background: var(--accent-a10) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-a20) !important;
  border-radius: 999px;
}
.badge.ok,   .pill.ok   { background: var(--grn-bg) !important; color: var(--grn) !important; border-color: var(--grn-bdr) !important; }
.badge.fail, .pill.fail { background: var(--red-bg) !important; color: var(--red) !important; border-color: var(--red-bdr) !important; }
.badge.warn, .pill.warn { background: var(--ora-bg) !important; color: var(--ora) !important; border-color: var(--ora-bdr) !important; }

.modal {
  background: var(--surface) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--rad-lg) !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 138, 46, .08) !important;
}
.modal-bg { background: rgba(0, 0, 0, .68) !important; backdrop-filter: blur(6px); }

/* Ilerleme cubugu */
.prog, .progress { background: var(--bg3) !important; border-radius: 999px; overflow: hidden; }
.prog-bar, .progress-bar, .prog > i {
  background: var(--accent-grad) !important;
  transition: width .35s var(--ease);
}

/* Bildirim */
.toast {
  background: var(--surface2) !important;
  border: 1px solid var(--bdr) !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: xm-fade-up .26s var(--ease-spring) both;
}
.toast.ok   { border-left-color: var(--grn) !important; }
.toast.err  { border-left-color: var(--red) !important; }

/* Canli/aktif nokta */
.dot-live, .status-dot.on { background: var(--accent); animation: xm-glow 2s infinite; border-radius: 50%; }

/* ──────────  9b. HESAP YONETIMI: MANUEL / OTOMASYON ANAHTARI  ────────── */
.am-modesw {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 12px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 999px;
}
.am-modesw-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  border: none; background: transparent;
  color: var(--txt3);
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  border-radius: 999px; cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.am-modesw-btn:hover { color: var(--txt); }
.am-modesw-btn.on {
  background: var(--accent-grad);
  color: var(--accent-fg);
  box-shadow: 0 2px 10px rgba(255, 138, 46, .28);
}
@media (max-width: 480px) {
  .am-modesw { display: flex; width: 100%; }
  .am-modesw-btn { flex: 1 1 0; justify-content: center; }
}

/* ──────────────  9c. YAPAY ZEKA: SAGLAYICI KARTLARI  ────────────── */
.ai-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.ai-pcard {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--rad);
  padding: 12px; transition: border-color .18s var(--ease);
}
.ai-pcard.on { border-color: var(--bdr-accent); }
.ai-pcard:hover { border-color: var(--accent); }
.ai-phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-pname { font-weight: 700; font-size: 13px; color: var(--txt); }
.ai-pnote { font-size: 11px; color: var(--txt3); margin: 4px 0 8px; line-height: 1.5; }
.ai-pnote a { color: var(--accent); }
.ai-pgrid { display: grid; gap: 8px; }
.ai-pgrid .fg { margin: 0; }
.ai-test-out { margin-top: 8px; font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-test-out:empty { display: none; }
.ai-test-out.on  { color: var(--txt3); }
.ai-test-out.ok  { color: var(--grn); }
.ai-test-out.err { color: var(--red); }

/* ──────────────────────  9d. AI SOHBET  ────────────────────── */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.chat-card .card-body { display: flex; flex-direction: column; gap: 10px; }
.chat-msgs {
  height: 54vh; min-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 4px;
}
.chat-row { display: flex; }
.chat-row.user { justify-content: flex-end; }
.chat-bubble {
  max-width: 82%; padding: 9px 13px; border-radius: 14px;
  font-size: 13px; line-height: 1.6; overflow-wrap: anywhere;
  animation: xm-fade-up .2s var(--ease) both;
}
.chat-row.user .chat-bubble {
  background: var(--accent-grad); color: var(--accent-fg);
  border-bottom-right-radius: 4px; font-weight: 500;
}
.chat-row.assistant .chat-bubble {
  background: var(--bg3); color: var(--txt); border: 1px solid var(--bdr);
  border-bottom-left-radius: 4px;
}
.chat-bubble code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
/* Hangi saglayici/model cevapladi — zayif model teshisi icin */
.chat-meta {
  margin-top: 6px; padding-top: 5px;
  border-top: 1px solid var(--bdr2);
  font-size: 10px; color: var(--txt4);
  font-family: var(--font-mono); overflow-wrap: anywhere;
}
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }

/* Mikrofon / hoparlor — sesli asistan */
.chat-icon-btn {
  flex: 0 0 auto;
  width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
}
.chat-icon-btn.off { opacity: .4; cursor: not-allowed; }
/* Sesli yanit ACIK */
.chat-icon-btn.on {
  background: var(--accent-grad) !important;
  color: var(--accent-fg) !important;
  border-color: transparent !important;
}
/* Kayit sirasinda nabiz efekti */
.chat-icon-btn.rec {
  background: var(--red-bg) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
  animation: xm-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes xm-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, .45); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 90, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-icon-btn.rec { animation: none; }
}
@media (max-width: 480px) {
  .chat-icon-btn { width: 40px; min-height: 40px; }
}
.chat-input { flex: 1; resize: vertical; min-height: 44px; max-height: 160px; }
.chat-ctx-lbl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--txt3); }
.chat-empty { text-align: center; color: var(--txt3); padding: 40px 16px; margin: auto; }
.chat-empty-icon { font-size: 34px; margin-bottom: 10px; }
.chat-sug { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }

/* Sohbette onay karti — AI gorev olusturmadan ONCE burada onaylanir */
.chat-act-card {
  margin: 6px 4px 0;
  padding: 12px 14px;
  background: var(--accent-grad-soft);
  border: 1px solid var(--accent-a30);
  border-radius: var(--rad);
  animation: xm-fade-up .22s var(--ease-spring) both;
}
.chat-act-head { font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.chat-act-link {
  font-family: var(--font-mono); font-size: 11px; color: var(--txt2);
  overflow-wrap: anywhere; margin-bottom: 8px;
}
.chat-act-rows { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-act-note { font-size: 11.5px; color: var(--txt3); margin-bottom: 6px; }
.chat-act-note.warn { color: var(--ora); }
.chat-act-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Telegram: gorulen sohbetler (chat ID kesfi) */
.tg-chat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: var(--rad-sm);
}
.tg-chat-row.on { border-color: var(--grn-bdr); background: var(--grn-bg); }
.tg-chat-title { font-size: 12.5px; font-weight: 600; color: var(--txt); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-chat-msg { font-size: 11px; color: var(--txt3); margin-top: 2px; overflow-wrap: anywhere; }

/* Panel taramasi bulgulari */
.diag-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.diag-ai {
  background: var(--accent-grad-soft); border: 1px solid var(--accent-a20);
  border-radius: var(--rad-sm); padding: 10px 12px; margin-bottom: 12px;
  font-size: 12.5px; line-height: 1.65; color: var(--txt);
}
.diag-item {
  border-left: 3px solid var(--bdr); background: var(--bg2);
  border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
  padding: 8px 11px; margin-bottom: 8px;
}
.diag-item.kritik { border-left-color: var(--red); }
.diag-item.uyari  { border-left-color: var(--ora); }
.diag-item.bilgi  { border-left-color: var(--cyn); }
.diag-title  { font-weight: 650; font-size: 12.5px; color: var(--txt); }
.diag-detail { font-size: 11.5px; color: var(--txt2); margin-top: 2px; line-height: 1.5; }
.diag-fix    { font-size: 11.5px; color: var(--accent); margin-top: 4px; line-height: 1.5; }

@media (max-width: 1100px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-msgs { height: 44vh; }
}
@media (max-width: 768px) {
  .ai-plist { grid-template-columns: 1fr; }
  .chat-bubble { max-width: 92%; }
  .chat-msgs { height: 50vh; }
}

/* ─────────────────────────  10a. FOOTER (SABIT)  ─────────────────────────
   Onceki hali position:sticky + margin-top:auto idi; icerik kisa olan
   sayfalarda "asagi kayiyor" gorunumu buradan geliyordu. Artik viewport'un
   altina SABIT. Kenar cubugu genisligi kadar iceriden baslar (masaustu),
   ve ana icerik alanina alt bosluk verilir ki son kart footer'in altinda
   kalmasin.                                                                */
.app-footer {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  margin-top: 0 !important;
  z-index: 60;
}
.footer-content {
  background: var(--glass) !important;
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--bdr) !important;
  padding: 7px 20px !important;
}
.footer-logo { color: var(--accent) !important; }
/* Footer yuksekligi kadar alt bosluk — son kart gizlenmesin */
.main, .main.app-main { padding-bottom: 54px !important; }

@media (min-width: 1025px) {
  .app-footer { left: var(--side-w); }
}
@media (max-width: 768px) {
  .footer-content { padding: 6px 12px !important; font-size: 11px; }
  .main, .main.app-main { padding-bottom: 60px !important; }
}
@media (max-width: 480px) {
  /* Dar ekranda ikincil bilgiyi gizle, marka + surum kalsin */
  .footer-info { display: none !important; }
}

/* ───────────────────  10b. ANALITIK: KAYDIRMALI LISTELER  ───────────────────
   Sorun: "En Aktif Proxyler" rotating-proxy dizeleri 100+ karakter; tablo her
   satirda 2 satira sariyor ve kart ekrani asiyordu. Cozum: sabit yuksekli
   kaydirma alani + tek satirlik kirpilmis kutucuklar.                       */
.an-scroll {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.an-scroll table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg2);
}
.an-empty { padding: 26px 14px; text-align: center; color: var(--txt3); font-size: 12.5px; }

.an-prox-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.an-prox-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--bdr2);
  border-radius: var(--rad-sm);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.an-prox-row:hover { border-color: var(--bdr-accent); background: var(--accent-a05); }
.an-prox-addr {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; color: var(--txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-prox-meta { flex: 0 0 auto; display: flex; gap: 5px; }
.an-chip {
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px;
  background: var(--accent-a10); color: var(--accent);
  border: 1px solid var(--accent-a20);
}
.an-chip.bad { background: var(--red-bg); color: var(--red); border-color: var(--red-bdr); }

@media (max-width: 600px) {
  .an-prox-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .an-prox-meta { justify-content: flex-start; flex-wrap: wrap; }
}

/* ─────────────────────────  11. RESPONSIVE  ───────────────────────── */

/* Genis masaustu — icerigi asiri yaymayi engelle */
@media (min-width: 1700px) {
  .main.app-main > .page { max-width: 1560px; margin-inline: auto; }
}

/* Tablet ve alti: sidebar cekmece */
@media (max-width: 1024px) {
  .side.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 268px; max-width: 84vw;
    z-index: 1200;
    transform: translateX(-102%);
    transition: transform .24s var(--ease);
    will-change: transform;
  }
  .side.app-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl) !important; }
  .side-overlay { position: fixed; inset: 0; z-index: 1150; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .side-overlay.vis { opacity: 1; pointer-events: auto; }
  .side-close { display: flex !important; }
  .main.app-main { margin-left: 0 !important; width: 100% !important; }
  .topbar-menu { display: inline-flex !important; }
}

/* Kucuk tablet */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .ph { flex-wrap: wrap; gap: 12px; }
  .ph-right { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  /* Cok sutunlu form/izgara duzenleri tek/cift sutuna dusum */
  .form-grid, .grid-2, .grid-3, .grid-4, .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Telefon */
@media (max-width: 768px) {
  .main.app-main { padding: 12px !important; }
  .topbar.app-topbar { padding: 10px 12px !important; }
  .topbar-crumb-root, .topbar-crumb-sep { display: none; }
  .topbar-title { font-size: 15px; }
  .topbar-right, .topbar-end { gap: 6px; }
  .topbar-stat, .topbar-chip { padding: 5px 9px !important; font-size: 11px !important; }

  .ph { padding-bottom: 12px; margin-bottom: 14px; }
  .ph-left h2 { font-size: 17px; }
  .ph-left p  { font-size: 12px; }

  .card { border-radius: var(--rad) !important; }
  .card-head, .card-body { padding: 12px !important; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid, .grid-2, .grid-3, .grid-4, .dash-grid { grid-template-columns: 1fr !important; }

  /* Dokunma hedefleri */
  .btn { min-height: 42px; padding: 10px 14px !important; font-size: 13.5px !important; }
  .btn.btn-xs { min-height: 36px; padding: 7px 10px !important; font-size: 12px !important; }
  /* 16px: iOS Safari'nin odakta otomatik yakinlasmasini engeller */
  .fi, input, select, textarea { font-size: 16px !important; min-height: 44px; }

  /* Tablolar kendi kapsayicisinda yatay kayar — SAYFA tasmaz */
  .card-body, .tbl-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }

  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }

  /* Modal: tam ekrana yakin, tasan icerik kayar */
  .modal {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    max-height: 88vh; overflow-y: auto;
    border-radius: var(--rad-lg) !important;
  }

  /* Giris: tanitim panelini gizle */
  .auth-promo, .auth-left { display: none !important; }
  .auth-layout, .auth-split { grid-template-columns: 1fr !important; display: block !important; }
  .auth-card { margin: 0 auto; width: 100%; max-width: 420px; }

  /* Uzun metin/URL'ler tasmasin */
  td, .card-body, .log-l { overflow-wrap: anywhere; }
}

/* Kucuk telefon */
@media (max-width: 480px) {
  .main.app-main { padding: 10px !important; }
  .stats-grid { grid-template-columns: 1fr; }
  .ph-right .btn { flex: 1 1 auto; }
  .side.app-sidebar { width: 256px; }
  .card-head, .card-body { padding: 10px !important; }
  .ph-left h2 { font-size: 16px; }
  .modal { width: calc(100vw - 12px) !important; max-height: 92vh; }
}

/* Cok dar cihaz */
@media (max-width: 380px) {
  .topbar-stat, .topbar-chip { display: none !important; }
  .btn { font-size: 13px !important; padding: 9px 11px !important; }
}

/* Dokunmatik: yapisan :hover durumlarini temizle */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-i, .tab, .card { transition-duration: .1s; }
  .btn:hover                          { background: var(--surface2) !important; }
  .btn.btn-p:hover                    { background: var(--accent-grad) !important; filter: none; }
  .btn.btn-s:hover, .btn.btn-w:hover  { background: transparent !important; border-color: var(--bdr) !important; color: var(--txt2) !important; }
  .btn.btn-d:hover                    { background: transparent !important; }
  .nav-i:hover                        { background: transparent !important; color: var(--txt2) !important; }
  .nav-i.on:hover                     { background: var(--accent-grad-soft) !important; color: var(--accent) !important; }
  .tab:hover                          { color: var(--txt3) !important; }
  .tab.on:hover, .tab.active:hover    { color: var(--accent) !important; }
  .card:hover                         { border-color: var(--bdr) !important; box-shadow: var(--shadow-sm) !important; }
  .stat-card:hover                    { transform: none; }
  tbody tr:hover td                   { background: transparent !important; }
  .btn.btn-p:hover::after             { animation: none; }
  .btn, .nav-i, .tab, .topbar-menu, .side-close {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .btn:active   { filter: brightness(.94); }
  .nav-i:active { background: var(--accent-a10) !important; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body { background-attachment: scroll !important; }
}

/* Yatay tasmayi kesin engelle */
html, body { max-width: 100%; overflow-x: hidden; }