/* ============================================================================
   OPS — YARDIMCI SINIFLAR (utility layer)

   Amac: 60 dosyaya dagilmis ~375 satir ici `style=""` bildirimini tema
   belirteclerine bagli, tek yerden yonetilen siniflara tasimak. Satir ici
   stil tema degisiminde ve belirtec guncellemesinde kirilir, ozgullugu de
   asiri yuksektir (yalnizca !important ile ezilebilir).

   Ad kurali: `u-` oneki (utility). Cakisma riski yok — projedeki hicbir
   bilesen bu oneki kullanmiyor.

   Yukleme sirasi (en son): monarc -> monarc-legacy -> monarc-compat ->
   ops-skin -> **util**. En sonda durmasi kasitli: yardimci sinif, bilesen
   kuralini ezebilmeli.

   VERIYE BAGLI degerler (ornek: `width:<?= $yuzde ?>%`) burada YOKTUR;
   onlar `--u-*` ozel ozellikleriyle verilir (dosyanin sonuna bakin).
   ========================================================================== */

/* ---------------------------------------------------------------- GORUNUM */
.u-none          { display: none; }
.u-block         { display: block; }
.u-inline-block  { display: inline-block; }
.u-flex          { display: flex; }
.u-grid          { display: grid; }
.u-col           { flex-direction: column; }
.u-wrap          { flex-wrap: wrap; }
.u-nowrap        { white-space: nowrap; }
.u-ac            { align-items: center; }
.u-ae            { align-items: end; }
.u-as            { align-items: stretch; }
.u-asfs          { align-self: flex-start; }
.u-jc            { justify-content: center; }
.u-jb            { justify-content: space-between; }
.u-f1            { flex: 1; }
.u-shrink0       { flex-shrink: 0; }
.u-rel           { position: relative; }
.u-cols2         { grid-template-columns: 1fr 1fr; }

/* ------------------------------------------------------------------ ARALIK */
.u-g4  { gap: 4px; }   .u-g6  { gap: 6px; }   .u-g8  { gap: 8px; }
.u-g12 { gap: 12px; }  .u-g16 { gap: 16px; }

.u-m0     { margin: 0; }
.u-mauto  { margin: 0 auto; }
.u-mauto12{ margin: 0 auto 12px; }
.u-mlauto { margin-left: auto; }
.u-ml4    { margin-left: 4px; }
.u-mt4 { margin-top: 4px; }  .u-mt8 { margin-top: 8px; }
.u-mt12{ margin-top: 12px; } .u-mt16{ margin-top: 16px; }
.u-mb2 { margin-bottom: 2px; }  .u-mb4 { margin-bottom: 4px; }
.u-mb8 { margin-bottom: 8px; }  .u-mb12{ margin-bottom: 12px; }
.u-mb16{ margin-bottom: 16px; } .u-mb24{ margin-bottom: 24px; }
.u-m0b8{ margin: 0 0 8px; }     .u-m8t { margin: 8px 0 0; }

.u-p0  { padding: 0; }      .u-p8  { padding: 8px; }
.u-p12 { padding: 12px; }   .u-p16 { padding: 16px; }
.u-p20 { padding: 20px; }   .u-p24 { padding: 24px; }
.u-p30 { padding: 30px; }   .u-p32 { padding: 32px; }
.u-p40 { padding: 40px; }
.u-py4  { padding: 4px 0; }
.u-p2x8 { padding: 2px 8px; }  .u-p4x8 { padding: 4px 8px; }
.u-p8x12{ padding: 8px 12px; } .u-p26x16 { padding: 26px 16px; }
.u-pb6 { padding-bottom: 6px; }  .u-pb16 { padding-bottom: 16px; }
.u-pl14{ padding-left: 14px; }   .u-pl18 { padding-left: 18px; }

/* ------------------------------------------------------------------- YAZI */
.u-fs9  { font-size: 9px; }   .u-fs10 { font-size: 10px; }
.u-fs11 { font-size: 11px; }  .u-fs12 { font-size: 12px; }
.u-fs13 { font-size: 13px; }  .u-fs14 { font-size: 14px; }
.u-fs18 { font-size: 18px; }  .u-fs20 { font-size: 20px; }
.u-fs32 { font-size: 32px; }  .u-fs48 { font-size: 48px; }
.u-fs64 { font-size: 64px; }
.u-fw600 { font-weight: 600; }  .u-fw700 { font-weight: 700; }
.u-mono  { font-family: var(--mono); }
.u-center{ text-align: center; }  .u-left { text-align: left; }
.u-lh15  { line-height: 1.5; }    .u-lh18 { line-height: 1.8; }
.u-ls6   { letter-spacing: 6px; }
.u-break     { word-break: break-word; overflow-wrap: break-word; }
.u-break-all { word-break: break-all; }
.u-pre       { white-space: pre-wrap; }
.u-ellipsis  { text-overflow: ellipsis; }
.u-vmid      { vertical-align: middle; }

/* ------------------------------------------------------------------ RENKLER
   Hepsi tema belirteci — sabit renk yok, acik/koyu temada dogru calisir. */
.u-muted { color: var(--ink-3); }
.u-sec   { color: var(--ink-2); }
.u-pri   { color: var(--ink); }
.u-ok    { color: var(--green); }
.u-warn  { color: var(--amber); }
.u-err   { color: var(--red); }
.u-accent{ color: var(--accent-text); }
.u-bg-ok { background: var(--green); }

/* ---------------------------------------------------------------- YUZEYLER */
.u-sunken   { background: var(--bg-2); }
.u-surface  { background: var(--surface); }
.u-bordered { border: 1px solid var(--line-2); }
.u-bordered2{ border: 2px solid var(--line-2); }
.u-bb       { border-bottom: 1px solid var(--line); }
.u-r4  { border-radius: 4px; }   .u-r8  { border-radius: 8px; }
.u-r10 { border-radius: 10px; }  .u-r12 { border-radius: 12px; }
.u-r    { border-radius: var(--r); }
.u-rlg  { border-radius: var(--r-lg); }
.u-rfull{ border-radius: 50%; }
.u-shadow { box-shadow: var(--shadow-2); }
.u-ovh  { overflow: hidden; }
.u-ovy  { overflow-y: auto; }
.u-pointer { cursor: pointer; }
.u-cover   { object-fit: cover; }

/* ------------------------------------------------------------------ OLCULER
   Tablo sutunu / filtre alani genislikleri. */
.u-w10 { width: 10px; }   .u-w24 { width: 24px; }   .u-w32 { width: 32px; }
.u-w60 { width: 60px; }   .u-w70 { width: 70px; }   .u-w80 { width: 80px; }
.u-w90 { width: 90px; }   .u-w100{ width: 100px; }  .u-w110{ width: 110px; }
.u-w120{ width: 120px; }  .u-w130{ width: 130px; }  .u-w140{ width: 140px; }
.u-w150{ width: 150px; }  .u-w160{ width: 160px; }  .u-w180{ width: 180px; }
.u-w200{ width: 200px; }  .u-w250{ width: 250px; }
.u-wauto { width: auto; }  .u-wfull { width: 100%; }
.u-h10 { height: 10px; }  .u-h22 { height: 22px; }  .u-h24 { height: 24px; }
.u-h32 { height: 32px; }  .u-h100{ height: 100%; }
.u-h120{ height: 120px; } .u-h180{ height: 180px; }
.u-mw0  { min-width: 0; }
.u-mw120{ min-width: 120px; } .u-mw132{ min-width: 132px; }
.u-mw140{ min-width: 140px; } .u-mw160{ min-width: 160px; }
.u-maxw220{ max-width: 220px; } .u-maxw250{ max-width: 250px; }
.u-maxw300{ max-width: 300px; } .u-maxw400{ max-width: 400px; }
.u-maxw460{ max-width: 460px; } .u-maxw600{ max-width: 600px; }
.u-maxh300{ max-height: 300px; } .u-maxh400{ max-height: 400px; }
.u-maxh60vh{ max-height: 60vh; } .u-maxh70vh{ max-height: 70vh; }
.u-minh200{ min-height: 200px; } .u-minh500{ min-height: 500px; }
.u-minh520{ min-height: 520px; }
.u-bw2 { border-width: 2px; }  .u-bw3 { border-width: 3px; }
.u-m24a { margin: 24px auto; }
.u-w20 { width: 20px; }  .u-w28 { width: 28px; }  .u-w50 { width: 50px; }
.u-h12 { height: 12px; } .u-h30 { height: 30px; }
.u-g3  { gap: 3px; }     .u-g10 { gap: 10px; }
.u-f2  { flex: 2; }
.u-maxw160 { max-width: 160px; } .u-maxw550 { max-width: 550px; } .u-maxw650 { max-width: 650px; }
.u-fade { opacity: 0.4; }
.u-nodec { text-decoration: none; }

/* ============================================================================
   VERIYE BAGLI DEGERLER
   Yuzde/piksel gibi calisma aninda hesaplanan olculer satir ici `style` ile
   DEGIL, ozel ozellikle verilir:  <div class="u-bar" style="--u-w:73%">
   Boylece deger veri olarak kalir, gorunum kurali burada durur.
   ========================================================================== */
/* ---- Tam ekran onay/uyari katmani (footer.php: bosta kalma + sozlesme) ----
   Onceden ikisi de tamamen satir ici stille kuruluyordu (14 nitelik). */
.ov {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ov__card {
  width: 100%; max-width: 420px; padding: 32px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-2xl, 24px); box-shadow: var(--shadow-3);
}
.ov__card--lg { max-width: 560px; padding: 40px; }
.ov__card--warn { border-color: color-mix(in srgb, var(--amber) 34%, transparent); }
.ov__ico {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 16px;
  font-size: 26px; border-radius: 50%; color: var(--accent-text);
  background: var(--accent-soft); border: 2px solid var(--accent-line);
}
.ov__ico--warn {
  color: var(--amber); border-color: color-mix(in srgb, var(--amber) 36%, transparent);
  background: var(--amber-soft);
}
.ov__title { margin: 0 0 4px; font-family: var(--display); font-size: 22px; font-weight: 650; }
.ov__lead  { margin: 0; font-size: 13px; color: var(--ink-3); }
.ov__body {
  margin: 24px 0; padding: 20px; max-height: 300px; overflow-y: auto; text-align: left;
  font-size: 13px; line-height: 1.7; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.ov__body ul { padding-left: 18px; margin: 8px 0 16px; }
.ov__body ul:last-child { margin-bottom: 0; }
.ov__btn { width: 100%; height: 48px; font-size: 15px; font-weight: 650; }
.ov__note { margin: 12px 0 0; font-size: 11px; text-align: center; color: var(--ink-4); }

/* ---- Durum noktasi (canli/pasif gosterge) ---- */
.dot-ind {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--u-tone, var(--ink-3)); flex-shrink: 0;
}
.dot-ind--live { background: var(--green); box-shadow: 0 0 8px var(--green); }

@media (prefers-reduced-motion: no-preference) {
  .dot-ind--live { animation: dotPulse 1.6s ease-in-out infinite; }
}
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---- Hologram avatar secici (admin/hologram.php) ---- */
.holo-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.holo-opt {
  display: grid; place-items: center; width: 52px; height: 52px; cursor: pointer;
  color: var(--ink-3); background: var(--surface); border: 2px solid var(--line-2);
  border-radius: var(--r); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.holo-opt:hover { color: var(--ink); border-color: var(--line-3); }
.holo-opt input { display: none; }
.holo-opt svg { width: 22px; height: 22px; }
.holo-opt.is-on {
  color: var(--accent-text); border-color: var(--accent);
  background: var(--accent-soft); box-shadow: var(--ring);
}

/* Hologram on izlemesi */
.holo-prev {
  position: relative; min-height: 350px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border-radius: var(--r-lg);
}
.holo-prev__av {
  display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 12px;
  border-radius: 50%; color: var(--accent-text);
  background: linear-gradient(135deg, var(--accent-soft), var(--cyan-soft));
  border: 2px solid var(--accent-line);
  box-shadow: 0 0 30px -6px var(--accent-glow);
}
.holo-prev__av svg { width: 34px; height: 34px; }
.holo-prev__bubble {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  padding: 12px 18px; max-width: 80%; font-size: 12.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}

.u-bar      { width: var(--u-w, 0); }
.u-bar-h    { height: var(--u-h, 0); }
.u-tone     { color: var(--u-tone, currentColor); }
.u-tone-bg  { background: var(--u-tone, transparent); }
.u-tone-bd  { border-color: var(--u-tone, var(--line-2)); }
.u-tone-left{ border-left: 3px solid var(--u-tone, var(--line-2)); }
/* Tonun soluk zemini. Onceden PHP tarafinda hex'in sonuna "15"/"60" eklenerek
   uretiliyordu; bu numara var() ile calismaz, color-mix() ile calisir. */
.u-tone-soft{ background: color-mix(in srgb, var(--u-tone, var(--accent)) 14%, transparent); }
.u-tone-ring{ box-shadow: 0 0 10px color-mix(in srgb, var(--u-tone, var(--accent)) 55%, transparent); }

/* ---- Kaynak sagligi kuresi (admin/source-monitor.php) ---- */
.orb {
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--u-tone, var(--accent)) 12%, transparent);
  border: 2px solid var(--u-tone, var(--accent));
}
.orb__core {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--u-tone, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--u-tone, var(--accent)) 60%, transparent);
}

/* ---- Bildirim satiri (admin/notifications.php) ----
   Ikon dairesinin zemini eskiden tonun KENDISIYDI ve uzerine ayni ton renkte
   ikon basiliyordu; ikon gorunmuyordu. Zemin artik soluk varyant. */
.nrow {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.nrow.is-read { opacity: 0.6; }
.nrow__ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%; color: var(--u-tone, var(--accent));
  background: color-mix(in srgb, var(--u-tone, var(--accent)) 14%, transparent);
}

/* ---- Anomali satiri (admin/anomaly-detection.php) ---- */
.arow { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.arow__bar { width: 4px; flex-shrink: 0; border-radius: 4px; background: var(--u-tone, var(--accent)); }

/* ---- Otopsi adim ikonu (admin/query-autopsies.php) ---- */
.autopsy-step-icon.is-ok  { color: var(--green); background: var(--green-soft); }
.autopsy-step-icon.is-bad { color: var(--red);   background: var(--red-soft); }

/* ---- Mini sutun grafigi (admin/dashboard.php) ----
   Yukseklik veri, renk tema: --u-h satir ici, gradyan burada. */
.spark {
  width: 100%; min-height: 4px; height: var(--u-h, 4px);
  border-radius: 6px 6px 0 0; opacity: 0.9;
  background: linear-gradient(to top, var(--accent), var(--accent-hover));
}
@media (prefers-reduced-motion: no-preference) { .spark { transition: height 0.5s var(--ease, ease); } }

/* ---- Konsol uyari serridi (includes/footer.php) ---- */
.devtools-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999999;
  padding: 16px; text-align: center;
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--red), var(--amber));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s;
}
@media (prefers-reduced-motion: no-preference) {
  .devtools-bar { animation: devtoolsIn 0.3s var(--ease, ease); }
}
@keyframes devtoolsIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ==========================================================================
   YERLESIM RITMI  —  tek kaynak
   util.css EN SON yuklendigi icin asagidaki kurallar oteki dort katmani
   (monarc / legacy / compat / ops-skin) baglar.

   COZULEN IKI KOK SORUN
   ---------------------
   A) "Kartlar arasinda bosluk yok."
      Dikey bosluk KOMSULUK secicileriyle veriliyordu:
        ops-skin.css:1839  .card + .card { margin-top: 14px }
        ops-skin.css:1840  .content > .card + .card, .content > .row + .card,
                           .content > .card + .row { margin-top: 14px }
      Bu seciciler yalnizca sayili komsu ciftini kapsiyor. Kapsamadigi her
      cift ARALIKSIZ yapisiyordu: .stats + .grid-2, .chips + .stats,
      .grid-2 + .card, details.card + herhangi bir sey ... Anasayfada
      olculen aralıklar: 16 / 18 / 14 / 14 / 14 / 16 / 0 px.

   B) "Yazilar kayiyor."
      `.card + .card` IZGARA icinde de tetikleniyordu. Yan yana duran
      kartlardan ilki haric hepsi 14px asagi iniyordu; ayni satirdaki
      kartlar hizasiz duruyordu (.stats'ta olculdu: 1. kart -205px,
      2. kart -191px — ayni satir, 14px fark).

   COZUM: boslugu komsuluk degil KAPSAYICI verir (flex/grid + gap).
   Boylece hangi bilesenin yan yana geldigi onemsizlesir; yeni bir blok
   eklendiginde ayrica marj tanimlamak gerekmez ve hicbir kosulda
   sifira dusmez.
   ========================================================================== */

:root { --stack: 20px; }

/* Sayfa akisi */
.content { display: flex; flex-direction: column; gap: var(--stack); }

/* Izgaralar ayni ritmi kullanir */
.stats, .grid-2, .profile-grid,
.mk-grid, .contact-grid, .row, .stack-col {
  gap: var(--stack);
}

/* Bosluk artik kapsayicinin isi: gap'i olan bir kapsayicinin dogrudan
   cocuklari kendi dikey marjini TASIMAZ. Aksi halde marj gap'in ustune
   binip (A) duzensiz aralik, (B) izgarada kayma uretiyordu. */
.content > *,
.stats > *, .grid-2 > *,
.profile-grid > *, .mk-grid > *, .contact-grid > *,
.row > *, .stack-col > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Duz blok akisinda ust uste gelen kartlar (gap'i olmayan bir kapsayici
   icinde) yine nefes alsin — ayni olcu. */
.card + .card { margin-top: var(--stack); }
.content > .card + .card, .content > .row + .card, .content > .card + .row,
.stats > .card + .card, .grid-2 > .card + .card, .row > .card + .card, .mk-grid > .card + .card,
.profile-grid > .card + .card, .contact-grid > .card + .card,
.stack-col > .card + .card { margin-top: 0; }

/* Sayfa alt kenarinda nefes payi: .content'in padding-bottom'u 0 idi,
   son kart ekranin dibine yapisiyordu. */
.content { padding-bottom: var(--stack); }

/* --------------------------------------------------------------------------
   ESKI BOOTSTRAP OLUK NUMARASI'nin etkisizlestirilmesi
   monarc-legacy.css hala su uc kurali tasiyor:
     .row              { margin-inline: calc(var(--gx, 12px) / -2) }
     .row > *          { padding-inline: calc(var(--gx, 12px) / 2); margin-top: var(--gy, 0px) }
     .row[class*="g-"] { margin-top: calc(var(--gy, 0px) * -1) }
   Bu, gap'in olmadigi donemin cozumu: satiri disari tasirip cocuga dolgu
   verirsin. Ama .row artik GERCEK bir flex + gap kapsayicisi; ikisi ust uste
   binince negatif marj gap'i yiyor. Olculdu: profil sayfasinda .tabs ile
   .row.g-3 arasi 20px yerine 4px kaliyordu (-16px, cunku .g-3 --gy:16px).
   Ayrica negatif yan marj satiri kapsayicisindan 8px disari tasiriyordu.
   Seciciler legacy ile AYNI ozgullukte ve util.css sonra yuklendigi icin
   burasi kazanir. -------------------------------------------------------- */
.row, .row[class*="g-"] { margin-inline: 0; margin-top: 0; }
.row > * { padding-inline: 0; margin-top: 0; }

@media (max-width: 600px) {
  :root { --stack: 14px; }
}