/* ============================================================================
   SONFORGU // OPERASYON TERMİNAL L
   ---------------------------------------------------------------
   son cilt katmanı. monarc.css → monarc-legacy.css → monarc-compat.css
   sırasından SONRA yüklenir ve TÜM tasarım kararlarını buradan verir.

   Kimlik: bir operasyon odası / CRT gözetim terminali.
     · Fosfor vurgu ailesi (data-accent presetleri fosfor tüpleridir)
     · Mat/parlak lacivert katmanlı yüzeyler + hairline kenarlar
     · Monospace HUD mikro-etiketleri + tabular veri rakamları
     · Tarama çizgisi (scanline), operasyon ızgarası, radar süpürmesi
     · "Sinyal Akışı" bildirimleri (klişe toast DEĞİL), hedef çengelleri

   Tasarım kuralları:
     1) Renk/boşluk/yarıçap asla sabit değerle yazılmaz — token üzerinden.
     2) Tüm hareketler prefers-reduced-motion altında kapanır.
     3) Kontrast eşikleri korunur (ink-3 ≥ 4.5:1, ink-2 ≥ 7:1 koyu temada).
   ========================================================================== */

/* ---------------------------------------------------------------- TONLAR */

:root {
  /* Beyaz kanal — mavi-beyaz hairline/parlama katmanları */
  --hair: 212, 228, 255;
  --glass-rgb: 5, 9, 18;

  /* Zeminler — mat/parlak lacivert, kademeli yükselti (yeşil-kara DEĞİL) */
  --deep: #05080f;
  --bg: #070c18;
  --bg-2: #091123;
  --surface: #0d1830;
  --surface-2: #121f3d;
  --surface-3: #192946;
  --surface-4: #22345a;

  /* Katmanlı yüzey gradyanları */
  --lift: linear-gradient(180deg, rgba(var(--hair), 0.03), rgba(var(--hair), 0) 46%);
  --lift-2: linear-gradient(180deg, rgba(var(--hair), 0.05), rgba(var(--hair), 0) 40%);

  /* Metin */
  --ink: #e9effc;
  --ink-2: #b3c1db;
  --ink-3: #8191b0;
  --ink-4: #5a6a8a;
  --on-accent: #032530;

  /* Çizgiler — hairline ölçeği */
  --line: rgba(var(--hair), 0.06);
  --line-2: rgba(var(--hair), 0.11);
  --line-3: rgba(var(--hair), 0.18);

  /* Vurgu — P1 fosfor siyanı (data-accent="blue" varsayılan) */
  --accent-rgb: 55, 214, 226;
  --accent: #37d6e2;
  --accent-hover: #5be4ee;
  --accent-press: #18aec1;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --accent-line: rgba(var(--accent-rgb), 0.34);
  --accent-glow: rgba(var(--accent-rgb), 0.45);
  --accent-text: #8deef5;
  --accent-top: #4ae0ec;
  --accent-bot: #1db2c6;

  /* Siyan — ikincil ışıma */
  --cyan-rgb: 55, 214, 226;
  --cyan: #37d6e2;
  --cyan-soft: rgba(var(--cyan-rgb), 0.13);
  --cyan-line: rgba(var(--cyan-rgb), 0.3);

  /* Anlam renkleri */
  --green: #3ad98c;
  --green-soft: rgba(58, 217, 140, 0.13);
  --amber: #ffb02e;
  --amber-soft: rgba(255, 176, 46, 0.13);
  --red: #ff5c63;
  --red-soft: rgba(255, 92, 99, 0.13);

  /* Yarıçaplar — terminal kontrolleri küçük kavisli, yumuşak değil */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-card: 16px;
  --r-control: 8px;
  --r-btn: 12px;

  /* Grafik tonları */
  --chart-grid: #162646;
  --chart-dim: #1b2e52;

  /* Gradyanlar */
  --grad-accent: linear-gradient(180deg, var(--accent-top), var(--accent-bot));
  --grad-ink: linear-gradient(180deg, #ffffff, #dde8fc);
  --grad-line: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent);

  /* Gölgeler — katmanlı derinlik */
  --shadow-1: inset 0 1px 0 rgba(var(--hair), 0.025), 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-2: inset 0 1px 0 rgba(var(--hair), 0.04), 0 22px 46px -26px rgba(0, 0, 0, 0.9);
  --shadow-3: inset 0 1px 0 rgba(var(--hair), 0.045), 0 44px 90px -34px rgba(0, 0, 0, 0.96);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ops: cubic-bezier(0.87, 0, 0.13, 1);

  /* Tipografi — yerel değişken fontlar, dış istek YOK */
  --font: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  --serif: "Space Grotesk", "Georgia", serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --nav-h: 66px;

  /* ------------------------------------------------------------------
     cork/system aile takma adları — eski tanımların buralardan beslendiği
     yerler için sigorta. Değerler yukarıdaki kimlikle birebir tutarlı.
     ------------------------------------------------------------------ */
  --accent-1: var(--accent);
  --accent-2: var(--cyan);
  --accent-3: var(--accent-text);
  --primary: var(--accent);
  --primary-2: var(--cyan);
  --primary-dark: var(--accent-press);
  --primary-glow: var(--accent-glow);
  --on-primary: var(--on-accent);

  --success: var(--green);
  --danger: var(--red);
  --warning: var(--amber);
  --info: var(--cyan);

  --bg-primary: var(--bg);
  --bg-secondary: var(--bg-2);
  --bg-elevated: var(--surface);
  --bg-card: rgba(13, 24, 48, 0.72);
  --bg-card-solid: var(--surface);
  --bg-card-hover: rgba(25, 41, 70, 0.82);
  --bg-sidebar: rgba(7, 12, 24, 0.86);
  --bg-sidebar-solid: var(--deep);
  --bg-header: rgba(9, 17, 35, 0.72);
  --bg-sunken: rgba(0, 0, 0, 0.24);

  --fill-hover: rgba(255, 255, 255, 0.055);
  --fill-press: rgba(255, 255, 255, 0.1);
  --fill-select: rgba(255, 255, 255, 0.08);
  --hover-border: var(--line-3);
  --hover-bright: 1.08;
  --body-bg: var(--bg);

  --hairline: 0.5px;
  --border-color: var(--line);
  --border-strong: var(--line-2);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.34), 0 8px 24px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.72), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 44px -12px rgba(0, 0, 0, 0.66);
  --rim: inset 0 var(--hairline) 0 rgba(var(--hair), 0.07);

  --vibrancy: saturate(170%) blur(26px);
  --vibrancy-thick: saturate(190%) blur(44px);

  --radius: var(--r-lg);
  --radius-lg: var(--r-xl);
  --radius-xl: var(--r-xl);
  --r-pill: 999px;

  --ctl-sm: 28px;
  --ctl: 34px;
  --ctl-lg: 40px;

  --ease-spring: var(--ease-ops);
  --t-fast: 130ms var(--ease-out);
  --t-base: 230ms var(--ease-ops);
  --t-slow: 420ms var(--ease-ops);
  --transition: all var(--t-fast);

  --sidebar-width: 252px;
  --header-height: 52px;

  --font-ui: var(--font);
  --font-display: var(--display);
  --font-mono: var(--mono);
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------------------ AÇIK TEMA
   "Operasyon günlüğü" — gümrük dairesi aydınlığı. Aynı HUD dili, kağıtsı zemin. */
[data-theme="light"] {
  --hair: 30, 52, 96;
  --glass-rgb: 237, 240, 247;

  --deep: #e9edf6;
  --bg: #ecf0f7;
  --bg-2: #e4e9f2;
  --surface: #ffffff;
  --surface-2: #f1f4fa;
  --surface-3: #e1e7f1;
  --surface-4: #d2dbe8;

  --ink: #111827;
  --ink-2: #3f4c66;
  --ink-3: #626f8a;
  --ink-4: #868ea6;
  --on-accent: #032530;

  --line: rgba(30, 52, 96, 0.08);
  --line-2: rgba(30, 52, 96, 0.14);
  --line-3: rgba(30, 52, 96, 0.22);

  --accent-rgb: 13, 145, 160;
  --accent: #0d91a0;
  --accent-hover: #0aa6b7;
  --accent-press: #0b7180;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --accent-line: rgba(var(--accent-rgb), 0.3);
  --accent-glow: rgba(var(--accent-rgb), 0.28);
  --accent-text: #096779;
  --accent-top: #12adbd;
  --accent-bot: #0b8796;

  --cyan-rgb: 13, 145, 160;
  --cyan: #0d91a0;
  --cyan-soft: rgba(var(--cyan-rgb), 0.12);
  --cyan-line: rgba(var(--cyan-rgb), 0.28);

  --green: #0e9e5f;
  --green-soft: rgba(14, 158, 95, 0.12);
  --amber: #9a6400;
  --amber-soft: rgba(154, 100, 0, 0.12);
  --red: #c81e2c;
  --red-soft: rgba(200, 30, 44, 0.1);

  --chart-grid: #d4dbe9;
  --chart-dim: #c3cde0;

  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(20, 31, 56, 0.09);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 46px -26px rgba(20, 31, 56, 0.24);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 44px 90px -34px rgba(20, 31, 56, 0.3);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.16);

  --fill-hover: rgba(15, 26, 52, 0.05);
  --fill-press: rgba(15, 26, 52, 0.09);
  --fill-select: rgba(15, 26, 52, 0.06);

  --bg-card: rgba(255, 255, 255, 0.8);
  --bg-card-solid: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-sidebar: rgba(232, 237, 247, 0.86);
  --bg-sidebar-solid: #e6ebf3;
  --bg-header: rgba(243, 246, 251, 0.8);
  --bg-sunken: rgba(15, 26, 52, 0.04);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border-color: var(--line);
  --border-strong: var(--line-2);

  --shadow-sm: 0 1px 2px rgba(20, 31, 56, 0.08);
  --shadow-card: 0 1px 2px rgba(20, 31, 56, 0.05), 0 12px 30px -18px rgba(20, 31, 56, 0.24);
  --shadow-lg: 0 24px 60px -20px rgba(20, 31, 56, 0.3), 0 2px 6px rgba(20, 31, 56, 0.06);
  --shadow-pop: 0 16px 44px -16px rgba(20, 31, 56, 0.26);
  --rim: inset 0 var(--hairline) 0 rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------- FOSFOR TÜPÜ PRESETLERI
   data-accent anahtarları geriye dönük uyumlu tutulur (localStorage 'mn_accent'),
   yalnızca görsel karşılıkları fosfor diliyle yeniden yorumlanır. */

:root {
  --ph-green: 46, 229, 154;
  --ph-cyan: 55, 214, 226;
  --ph-violet: 178, 137, 255;
  --ph-amber: 255, 176, 46;
  --ph-green-t: #2ee59a; --ph-green-h: #52f0ae; --ph-green-p: #18bd7c; --ph-green-x: #8cf5c6;
  --ph-cyan-t: #37d6e2; --ph-cyan-h: #5be4ee; --ph-cyan-p: #18aec1; --ph-cyan-x: #8deef5;
  --ph-violet-t: #b289ff; --ph-violet-h: #c7a6ff; --ph-violet-p: #8f56f0; --ph-violet-x: #d3bcff;
  --ph-amber-t: #ffb02e; --ph-amber-h: #ffc35c; --ph-amber-p: #d98a10; --ph-amber-x: #ffd38a;
}

[data-accent="blue"] {
  --accent-rgb: var(--ph-cyan); --accent: var(--ph-cyan-t); --accent-hover: var(--ph-cyan-h);
  --accent-press: var(--ph-cyan-p); --accent-text: var(--ph-cyan-x);
  --accent-top: #4ae0ec; --accent-bot: #1db2c6;
}
[data-accent="cyan"] {
  --accent-rgb: 88, 166, 255; --accent: #58a6ff; --accent-hover: #79b8ff;
  --accent-press: #2f79e8; --accent-text: #a8cfff;
  --accent-top: #6fb4ff; --accent-bot: #2f79e8;
}
[data-accent="violet"] {
  --accent-rgb: var(--ph-violet); --accent: var(--ph-violet-t); --accent-hover: var(--ph-violet-h);
  --accent-press: var(--ph-violet-p); --accent-text: var(--ph-violet-x);
  --accent-top: #bf9cff; --accent-bot: #9362ee;
}
[data-accent="emerald"] {
  --accent-rgb: var(--ph-amber); --accent: var(--ph-amber-t); --accent-hover: var(--ph-amber-h);
  --accent-press: var(--ph-amber-p); --accent-text: var(--ph-amber-x);
  --accent-top: #ffc059; --accent-bot: #e5961a;
}

/* Açık temada fosforlar biraz karartılır — contrate eşikleri korunsun */
[data-theme="light"][data-accent="blue"] { --accent-rgb: 13, 145, 160; --accent: #0d91a0; --accent-hover: #0aa6b7; --accent-press: #0b7180; --accent-text: #096779; --accent-top: #12adbd; --accent-bot: #0b8796; }
[data-theme="light"][data-accent="cyan"] { --accent-rgb: 23, 110, 206; --accent: #176ece; --accent-hover: #1f7fe2; --accent-press: #105ba8; --accent-text: #0d5295; --accent-top: #1f7fe2; --accent-bot: #105ba8; }
[data-theme="light"][data-accent="violet"] { --accent-rgb: 105, 61, 196; --accent: #693dc4; --accent-hover: #7d51d8; --accent-press: #54309e; --accent-text: #5a30a8; --accent-top: #7d51d8; --accent-bot: #5b33a8; }
[data-theme="light"][data-accent="emerald"] { --accent-rgb: 158, 96, 0; --accent: #9e6000; --accent-hover: #b57407; --accent-press: #7d4c00; --accent-text: #8a5200; --accent-top: #b06c04; --accent-bot: #855000; }

/* ---------------------------------------------------------------- TABAN */

body {
  font-family: var(--font);
  background:
    radial-gradient(85% 70% at 50% -6%, rgba(var(--accent-rgb), 0.07), transparent 58%),
    linear-gradient(rgba(var(--hair), 0.018) 1px, transparent 1px) 0 0 / 100% 4px,
    linear-gradient(90deg, rgba(var(--hair), 0.018) 1px, transparent 1px) 0 0 / 4px 100%,
    var(--bg);
  color: var(--ink);
  letter-spacing: 0.008em;
}

[data-theme="light"] body {
  background:
    radial-gradient(85% 70% at 50% -6%, rgba(var(--accent-rgb), 0.06), transparent 58%),
    linear-gradient(rgba(30, 52, 96, 0.025) 1px, transparent 1px) 0 0 / 100% 4px,
    var(--bg);
}

::selection { background: rgba(var(--accent-rgb), 0.32); color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--surface-4); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); border: 2px solid transparent; background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }

/* Odak — HUD halkası: fosfor çizgi + kesme çengeli, daire gölge DEĞİL */
:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
  box-shadow: none !important;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--display); letter-spacing: -0.018em; }

kbd, .k { font-family: var(--mono); }

/* ----------------------------------------------- HUD yardımcı yardımcıları */


/* Veri rakamları her zaman tabular mono — telemetri hissi */
.stat__value, .amount, .footer-stat,
.table td.num, .table .mono,
.metric, .result-count, .ntf-time, .side-plan strong  {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------- KABUK */

/* Açılış — BOOT SEQUENCE
   Zemin kirli yeşil ışımaydı; istenen lacivert operasyon hali: zemin duz
   derin lacivert, halka yalnizca ince hairline, metin sakin gri. */
.loader { background:
  radial-gradient(65% 58% at 50% 42%, rgba(var(--hair), 0.05), transparent 72%),
  var(--deep); }
.loader__ring {
  width: 52px; height: 52px;
  background:
    conic-gradient(from 0deg, transparent 0deg, var(--ink-3) 140deg, var(--hair) 260deg, transparent 360deg);
  box-shadow: none;
  filter: drop-shadow(0 0 16px rgba(var(--hair), 0.28));
}
.loader__text {
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}
.loader__text::after {
  content: "▍";
  margin-left: 8px;
  animation: opsBlink 1s steps(1) infinite;
}

/* htmx ilerleme — tarama ışını */
.progress {
  height: 2px;
  background: var(--grad-line);
  box-shadow: 0 0 18px var(--accent-glow);
}

/* Sidebar — operasyon modül panosu */
.sidebar,
[class*="sidebar"] { background: var(--bg-sidebar); }
.sidebar {
  border-right: 1px solid var(--line);
  backdrop-filter: var(--vibrancy);
  -webkit-backdrop-filter: var(--vibrancy);
}

.logo { font-family: var(--mono); letter-spacing: 0.3em; }
.logo em { font-style: normal; }
.logo { margin-bottom: 6px; }
.logo__mark {
  border-radius: 8px;
  background: var(--grad-accent);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(var(--hair), 0.3), 0 0 20px var(--accent-glow);
}

/* Sidebar arama — terminal istemi */
.side-search {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.28);
}
.side-search:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.side-search input {
  background: transparent !important;
  border: 0 !important;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  width: 100%;
}
.side-search svg { color: var(--ink-3); }

/* Bölüm etiketleri — HUD */
.side-nav .sec {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-4);
}

/* Menü öğeleri — aktif: fosfor sol çentik + parıltı */
.nav-sub a, .side-nav a.nav-link {
  position: relative;
  border-left: 2px solid transparent;
  border-radius: var(--r-sm);
}
.nav-sub a:hover, .side-nav a.nav-link:hover {
  background: var(--fill-hover);
  color: var(--ink);
}
.nav-sub a.is-current, .side-nav a.nav-link.is-active,
.nav-sub a[aria-current="page"] {
  background: linear-gradient(90deg, var(--accent-soft), transparent 96%);
  border-left-color: var(--accent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(var(--hair), 0.03);
}
.nav-sub a.is-current { color: var(--accent-text); }
.nav-sub a.is-current svg, .side-nav a.nav-link.is-active svg { color: var(--accent-text); }

.nav-parent { border-radius: var(--r-sm); }
.nav-parent:hover { background: var(--fill-hover); }
.nav-parent .np-label { font-weight: 600; }
.nav-parent .badge, .nav-sub .badge {
  font-family: var(--mono);
  font-size: 9.5px;
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.nav-chev { opacity: 0.7; }
.nav-group.is-open .nav-chev { color: var(--accent-text); }

/* Kullanıcı kartı — OPERATOR kartı
   Bakiye karti daha onceden fosfor degrade ile doluydu (yesil leke);
   simdi duz lacivert yuzey, hairline, yalmizca hover'da fosfor dokunuş. */
.side-user { border-top: 1px solid var(--line); background: rgba(var(--glass-rgb), 0.4); }
.side-plan {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(var(--hair), 0.05);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.side-plan:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.side-plan .sp-ico {
  color: var(--ink-2);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  transition: color 0.25s, border-color 0.25s;
}
.side-plan:hover .sp-ico { color: var(--accent-text); border-color: var(--accent-line); }
.side-plan strong { font-size: 13px; color: var(--ink); letter-spacing: 0; }
.side-plan[class] meta span, .side-plan[class] span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); }
.side-plan svg { color: var(--ink-4); transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
.side-plan:hover svg { color: var(--accent-text); transform: translateX(2px); }

/* Avatar — operatör rozeti: lacivert cam + sag-alt durum LED'i */
.avatar {
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: linear-gradient(145deg, var(--surface-3), var(--surface));
  box-shadow: inset 0 1px 0 rgba(var(--hair), 0.08);
  color: var(--accent-text);
  font-family: var(--mono);
  font-weight: 600;
}
.who .meta strong { font-family: var(--display); font-size: 12.5px; transition: color 0.2s; }
.who .meta span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.who .avatar::after {
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 10px var(--accent-glow);
  animation: ledPulse 2.8s ease-in-out infinite;
}
.who-link { border-radius: var(--r-sm); transition: background 0.2s; }
.who-link:hover { background: rgba(var(--glass-rgb), 0.35); }
.who-link:hover .avatar { border-color: var(--accent-line); }
.who-link:hover .meta strong { color: var(--accent-text); }

.side-noresult { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }

/* Topbar — kontrol şeridi
   monarc-compat'taki `.main > * { position: relative; z-index: 1 }`
   topbar'ın sticky + yuksek katmanini ezdiği için acilir menuler
   icerigin altinda kalip tıklanamiyordu; burada geri yuklenir. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--bg-header);
  -webkit-backdrop-filter: var(--vibrancy);
  backdrop-filter: var(--vibrancy);
  border-bottom: 1px solid var(--line);
}
.topbar__title h1 { font-family: var(--display); font-weight: 650; letter-spacing: -0.02em; }
.topbar__title span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.topbar__title span::before { content: " // "; color: var(--accent-text); }

/* Sorgu arama (Ctrl+K) — terminal istemi gibi */
.search--btn {
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.24);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
.search--btn::before { content: ">"; color: var(--accent-text); margin-right: 8px; font-weight: 600; }
.search--btn:hover, .search--btn:focus-visible { border-color: var(--accent-line); color: var(--ink); box-shadow: 0 0 14px var(--accent-soft); }
.search--btn .k {
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--ink-2);
  padding: 1px 5px;
  font-size: 9px;
}

.btn--icon {
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
.btn--icon:hover { background: var(--fill-hover); color: var(--ink); }

/* İkaz lambası — uyarı LED'i */
.bell .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: ledPulse 1.4s ease-in-out infinite;
}

/* Kullanıcı düğmesi */
.who-btn { border-radius: var(--r-sm); }
.who-btn:hover { background: var(--fill-hover); }
.who-btn__meta strong { font-family: var(--display); font-size: 12.5px; }
.who-btn__meta span {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}

/* Açılır kutu (mdrop) — konsol paneli */
.mn-drop__pop, .tweaks__pop {
  z-index: 980;
  background: var(--bg-card-solid);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: var(--vibrancy-thick);
  backdrop-filter: var(--vibrancy-thick);
}
.mn-drop__item:hover { background: var(--fill-hover); }

/* Bildirim açılır — sinyal kaydı */
.ntf-pop { border-radius: var(--r-lg); }
.ntf-head {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.ntf-head a { color: var(--accent-text); font-size: 10px; }
.ntf-item { border-radius: var(--r-sm); }
.ntf-item:hover { background: var(--fill-hover); }
.ntf-item.unread { background: var(--accent-soft); }
.ntf-icon {
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--ink-2);
}
.ntf-icon.ntf-success { color: var(--green); border-color: var(--line-2); }
.ntf-icon.ntf-error { color: var(--red); }
.ntf-icon.ntf-warning { color: var(--amber); }
.ntf-title { font-weight: 650; }
.ntf-time { color: var(--ink-4); font-size: 10px; }
.ntf-empty { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ----------------------------------------------------------------- DURUM */

/* Başlık şeridi / hero — gözetleme merkezi */
.hero__mesh {
  background:
    linear-gradient(rgba(var(--hair), 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(70% 90% at 50% 0%, rgba(var(--accent-rgb), 0.12), transparent 65%);
}
.hero__glow { opacity: 0.55; }


/* ------------------------------------------------------------- BUTONLAR */

.btn {
  border-radius: var(--r-btn);
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 44px;
  padding: 0 22px;
  transition: background 0.16s var(--ease-out), border-color 0.16s, color 0.16s, transform 0.06s, box-shadow 0.2s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
/* Sheen süpürmesi sert duruyordu; milimetrik parlama korundu, keskin süpürme kaldırıldı */
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -65%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(var(--hair), 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.8s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before { left: 130%; }

/* monarc.css'ten gelen sert aksan butonlar burada yumuşatılır */
.btn--accent {
  background: linear-gradient(180deg, var(--accent), var(--accent-bot));
  color: var(--on-accent);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px -12px var(--accent-glow);
}
.btn--accent:hover {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.33), 0 12px 26px -12px var(--accent-glow);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn--accent:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18); }

.btn--primary {
  height: 48px;
  padding: 0 14px 0 22px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, var(--accent), var(--accent-bot));
  color: var(--on-accent);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px -12px var(--accent-glow);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.33), 0 12px 26px -12px var(--accent-glow);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn--primary:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18); }
.btn--primary .arr-chip {
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.btn--primary:hover .arr-chip { background: rgba(255, 255, 255, 0.26); }

.btn--ink {
  background: var(--grad-ink);
  color: #08090d;
  border: 1px solid rgba(var(--hair), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 20px -14px rgba(var(--hair), 0.5);
}

.btn--light {
  background: #fff;
  color: #08090d;
  border: 1px solid rgba(var(--hair), 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px -14px rgba(var(--hair), 0.5);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-bot));
  color: var(--on-accent);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 20px -12px var(--accent-glow);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 26px -12px var(--accent-glow);
}
.btn-primary:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18); }

.btn-outline {
  border-color: var(--line-2);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--fill-hover); color: var(--ink); }

.btn-danger {
  background: var(--red-soft);
  border-color: transparent;
  color: var(--red);
}
.btn-danger:hover { background: rgba(255, 92, 99, 0.2); }

/* Tuş takımı hissi için ikonlar */
.btn--icon {
  border-radius: var(--r-sm);
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------------- FORMLAR */

.form-control, .input, .control input, input[type="text"], input[type="search"],
input[type="password"], input[type="email"], input[type="number"], input[type="tel"],
select, textarea {
  background: var(--bg-sunken);
  border: 1px solid var(--line-2);
  border-radius: var(--r-control);
  color: var(--ink);
  transition: border-color 0.16s, box-shadow 0.2s, background 0.16s;
}
.form-control::placeholder, .input::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-4); }
.form-control:focus, .input:focus, input:focus, select:focus, textarea:focus,
.form-control:focus-within, .input:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
  background: var(--surface-2);
}
.form-label, label { font-size: 12px; font-weight: 600; }
label .req { color: var(--red); }

.field-group > label, .field-group > .lbl, .form-group > label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* Anahtar / toggle */
.toggle input:checked + .toggle-track,
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.toggle .toggle-thumb { background: var(--ink); }
.toggle:hover .toggle-track { border-color: var(--accent-line); }

/* Onay kutusu */
input[type="checkbox"], .form-check-input {
  accent-color: var(--accent);
  border-radius: 4px;
}
input[type="radio"] { accent-color: var(--accent); }

/* Şifre gücü — HUD segmentleri */
.pw-strength span {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-4);
  transition: background 0.3s;
}
.pw-strength span.is-weak { background: var(--red); }
.pw-strength span.is-fair { background: var(--amber); }
.pw-strength span.is-good { background: var(--accent); }
.pw-strength-text.is-weak { color: var(--red); }
.pw-strength-text.is-fair { color: var(--amber); }
.pw-strength-text.is-good, .pw-match.is-ok { color: var(--accent-text); }

/* ---------------------------------------------------------------- KARTLAR */

.card {
  background: var(--bg-card);
  -webkit-backdrop-filter: var(--vibrancy);
  backdrop-filter: var(--vibrancy);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lift);
  pointer-events: none;
}
.card__head { position: relative; }
.card__head h2, .card__head h3 { font-family: var(--display); font-weight: 650; }
.panel-title { font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; color: var(--ink-3); }

/* Telemetri kutuları */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.stat__icon { color: var(--accent-text); background: var(--accent-soft); border-radius: var(--r-xs); }
.stat__value { font-size: 22px; letter-spacing: -0.02em; }
.trend--up { color: var(--green); }
.trend--down { color: var(--red); }

/* Çizelge kutuları */
.chart-area { border-top: 1px solid var(--line); }
.grid-2 > .card { height: 100%; }
canvas  { max-width: 100%; }

/* ----------------------------------------------------------------- TABLOLAR */

.table-wrap { scrollbar-width: thin; }

.table thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.table tbody td { border-bottom: 1px solid var(--line); }
.table tbody tr:hover td {
  background: var(--fill-hover);
  box-shadow: inset 2px 0 0 var(--accent-line);
}
.table-striped tbody tr:nth-child(even) { background: rgba(var(--hair), 0.02); }
.table-striped tbody tr:nth-child(even):hover td { background: rgba(var(--accent-rgb), 0.06); }

/* Sıralama — HUD üçgenleri */
th.sortable .sort-caret::after { color: var(--ink-4); }
th.sortable:hover .sort-caret, th.sortable .sort-caret.active { color: var(--accent-text); }

/* Kopyalanabilir hücre — işaret parmağına hedef çengeli */
.copyable { cursor: copy; }
.copyable:hover { box-shadow: inset 0 -2px 0 var(--accent-line); }
.copied { color: var(--accent-text); }

/* Yatay taşma ipucu — sağ/sol kenar sönmesi (hasil has-more/has-prev) */
.table-responsive, .table-wrap { position: relative; }
.table-responsive.has-more::after, .table-wrap.has-more::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: 0; width: 28px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--surface-3));
  opacity: 0.85;
}
.table-responsive.has-prev::before, .table-wrap.has-prev::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 28px;
  pointer-events: none;
  background: linear-gradient(270deg, transparent, var(--surface-3));
  opacity: 0.85;
}

/* Sonuç tablosu — sarsıntısız, sabit sütunlar
   Eski davranis (system.css/legacy): hucreler nowrap + ellipsis + sag
   maske ile kirpiliyordu; hover'da her hucrenin sag ucunda "cukur" gorunuyor,
   satira tiklayinca max-width/white-space degisip sutunlar yeniden hesaplaniyor
   ve veriler kayiyordu. Yeni: hucreler her durumda kendi genisliginde sarilir;
   tiklanma ya da sıralama yerlesimi degistirmez. */
.result-table td {
  max-width: 300px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip;
}
.result-table td:first-child { max-width: none; white-space: nowrap; }
.result-table tbody tr.is-expanded td {
  max-width: 420px;
  white-space: pre-wrap;
  vertical-align: top;
}
.result-table td[title] { -webkit-mask-image: none; mask-image: none; }
.result-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.result-empty, .result-error {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
.result-empty { color: var(--ink-3); }
.result-error { color: var(--red); }
.result-empty code, .result-error code { font-family: var(--mono); }
.result-kv td:first-child { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }

/* ---------------------------------------------------- PROFİL & FORM DÜZENİ
   Profil sayfasinda butonlar/formlar ic ice girip sikisiyordu; kart ici
   nefes boslugu ve bolum ayiricilari burada toparlanir. */
.stack-col { gap: 16px; }
.stack-col .card { display: flex; flex-direction: column; }
.stack-col .card > .card__head { flex: 0 0 auto; }
.stack-col .card > .card__head { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.stack-col .card > .card__head + .card-body { padding-top: 20px; }
.stack-col .card > .card-body { padding: 20px 22px; }
.card-body .form-group + .form-group { margin-top: 2px; }
.card-body .btn-group { margin-top: 4px; }
.form-group { margin-bottom: 16px; }
.pref-list { padding: 6px 0; }
.pref-row { padding: 12px 0; }
.link-row { padding: 14px 0; }
.ntf-pref-row { padding: 12px 0; }
.stepup-form { flex-wrap: wrap; }
.profile-danger {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-2);
}
.profile-danger .btn { color: var(--red); border-color: var(--line-2); }
.profile-danger .btn:hover { background: var(--red-soft); border-color: var(--red); }

/* ---------------------------------------------------- ROZET · PİL · ÇİP */

.pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; border: 1px solid var(--line-2); }
.pill::before { width: 5px; height: 5px; box-shadow: 0 0 7px currentColor; }
.pill--ok { color: var(--green); background: var(--green-soft); border-color: var(--line-2); }
.pill--warn { color: var(--amber); background: var(--amber-soft); }
.pill--err { color: var(--red); background: var(--red-soft); }

.badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.badge[data-tone="success"], .badge.is-success { color: var(--green); background: var(--green-soft); }
.badge[data-tone="error"], .badge.is-error { color: var(--red); background: var(--red-soft); }
.badge[data-tone="warning"], .badge.is-warning { color: var(--amber); background: var(--amber-soft); }

.chip {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  transition: all 0.15s;
}
.chip:hover, .chip.is-active { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-soft); }
.chip .cost { font-family: var(--mono); color: var(--accent-text); }

/* İskelet yükleme */
.skeleton {
  background: linear-gradient(100deg, var(--surface-2) 40%, var(--surface-3) 50%, var(--surface-2) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-xs);
}
.skeleton-line { height: 11px; margin: 9px 0; }
.skeleton-box { border-radius: var(--r); }

/* ------------------------------------------------------ AÇILIR · SEKMELER */

.dropdown-menu {
  background: var(--bg-card-solid);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.dropdown-menu .dropdown-item:hover { background: var(--fill-hover); }
.dropdown-divider { background: var(--line); }

.tabs .tab-item.is-active, .tab-btn.is-active, .tab-nav .active {
  color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tab-item, .tab-btn { border-radius: var(--r-sm) var(--r-sm) 0 0; }

.segmented {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.segmented > .active {
  color: var(--on-accent);
  background: var(--grad-accent);
  border: 0;
  box-shadow: 0 2px 10px -2px var(--accent-glow);
}


/* -------------------------------------------------- MODAL · DİYALOG · ÇMDK */

.modal-overlay, .dialog-overlay, .cmdk-backdrop, .overlay,
#overlay {
  background: rgba(1, 4, 3, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-overlay .modal-content, .dialog-content {
  background: var(--bg-card-solid);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: var(--vibrancy-thick);
  backdrop-filter: var(--vibrancy-thick);
}
.modal-content .modal-header {
  border-bottom: 1px solid var(--line);
}
.modal-content .modal-footer { border-top: 1px solid var(--line); }
.modal-close {
  color: var(--ink-3);
  border-radius: var(--r-xs);
}
.modal-close:hover { background: var(--fill-hover); color: var(--ink); }
.dialog-icon { border-radius: var(--r-lg); }
.dialog-icon.tone-success { color: var(--green); background: var(--green-soft); }
.dialog-icon.tone-error { color: var(--red); background: var(--red-soft); }
.dialog-icon.tone-warning { color: var(--amber); background: var(--amber-soft); }

/* Scroll kilidi (cork'tan gelen kurallar ana sözlükte yoktu) */
body.modal-open, body.cmdk-open { overflow: hidden; }

/* Komut paleti — terminal katmanı */
.cmdk {
  background: rgba(1, 4, 3, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cmdk-panel {
  background: var(--bg-card-solid);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
}
.cmdk-input-row {
  border-bottom: 1px solid var(--line);
}
.cmdk-input-row::before {
  content: ">";
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent-text);
  margin-right: 10px;
}
.cmdk-input-row input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
}

.cmdk-group {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-4);
}
.cmdk-item {
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
}
.cmdk-item:hover { background: var(--fill-hover); }
.cmdk-item.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent 92%);
  border-left-color: var(--accent);
}
.cmdk-item.active .cmdk-item-name { color: var(--ink); }
.cmdk-item.active i, .cmdk-item i { color: var(--accent-text); }
.cmdk-item-name { font-family: var(--display); font-weight: 600; }
.cmdk-item-desc { color: var(--ink-3); font-size: 12px; }
.cmdk-tag {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 6px;
}
.cmdk-empty { color: var(--ink-4); font-family: var(--mono); font-size: 12px; }
.cmdk-foot { border-top: 1px solid var(--line); color: var(--ink-4); font-family: var(--mono); font-size: 10px; }

/* ------------------------------------------------------ BİLDİRİM · SİNYAL */

.ntf-container {
  position: fixed;
  top: calc(var(--header-height) + 14px);
  right: 16px;
  z-index: 9800;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.ntf-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 30px 1fr 22px;
  gap: 10px;
  align-items: start;
  padding: 12px 12px 14px 10px;
  background: var(--bg-card-solid);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--ink-3);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: signalIn 0.34s var(--ease-ops) both;
}
.ntf-toast.leaving { animation: signalOut 0.32s var(--ease-ops) forwards; }

.ntf-toast-icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
  color: var(--ink-3);
  background: var(--surface-2);
  font-size: 13px;
}
.ntf-toast-success .ntf-toast-icon { color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 1px var(--green-soft), 0 0 12px rgba(58, 217, 140, 0.25); }
.ntf-toast-error   .ntf-toast-icon { color: var(--red); background: var(--red-soft); box-shadow: 0 0 0 1px var(--red-soft), 0 0 12px rgba(255, 92, 99, 0.25); }
.ntf-toast-warning .ntf-toast-icon { color: var(--amber); background: var(--amber-soft); box-shadow: 0 0 0 1px var(--amber-soft), 0 0 12px rgba(255, 176, 46, 0.22); }
.ntf-toast-info    .ntf-toast-icon { color: var(--cyan); background: var(--cyan-soft); box-shadow: 0 0 0 1px var(--cyan-soft), 0 0 12px rgba(55, 214, 226, 0.22); }

.ntf-toast-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 650;
  font-size: 13px;
  color: var(--ink);
}
.ntf-toast-title::before {
  content: "[OK]";
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--green);
}
.ntf-toast-error .ntf-toast-title::before { content: "[!!]"; color: var(--red); }
.ntf-toast-warning .ntf-toast-title::before { content: "[!]"; color: var(--amber); }
.ntf-toast-info .ntf-toast-title::before { content: "[i]"; color: var(--cyan); }

.ntf-toast-count {
  font-family: var(--mono);
  font-size: 9px;
  background: var(--surface-3);
  color: var(--accent-text);
  border-radius: 99px;
  padding: 0 6px;
  min-width: 15px;
  text-align: center;
}
.ntf-toast-msg { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ntf-toast-action {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  padding: 4px 10px;
}
.ntf-toast-action:hover { background: var(--accent); color: var(--on-accent); }

.ntf-toast-close {
  color: var(--ink-3);
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  width: 22px; height: 22px;
}
.ntf-toast-close:hover { background: var(--fill-hover); color: var(--ink); }

.ntf-toast-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  transform-origin: left;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  opacity: 0.9;
}
.ntf-toast-error .ntf-toast-bar { background: var(--red); box-shadow: 0 0 8px var(--red); }
.ntf-toast-warning .ntf-toast-bar { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ntf-toast-info .ntf-toast-bar { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* --------------------------------------------------------------- STEP-UP */


/* ------------------------------------------------------------------ OTP */

.control--otp input {
  font-family: var(--mono);
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.3em;
  border-radius: var(--r-control);
}
.control--otp input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ------------------------------------------------------------------ AUTH */

.auth { background: var(--deep); }
.auth__side {
  background:
    linear-gradient(rgba(var(--hair), 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(75% 60% at 30% 0%, rgba(var(--accent-rgb), 0.14), transparent 65%);
}
.auth-card {
  background: var(--bg-card);
  -webkit-backdrop-filter: var(--vibrancy);
  backdrop-filter: var(--vibrancy);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  position: relative;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lift);
  pointer-events: none;
}
.auth__brand .logo__mark { color: var(--on-accent); }
.auth__headline { font-family: var(--display); letter-spacing: -0.03em; color: var(--ink); }
.auth__lead { color: var(--ink-2); }
.auth__feats { color: var(--ink-2); }
.auth__proof {
  border-left: 2px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.auth__proof strong, .auth__proof b { color: var(--accent-text); }
.auth-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.auth-chip b { color: var(--ink); }

/* Captcha yenileme döngüsü */
.captcha-refresh.is-spin { color: var(--accent-text); }

/* Kimlik kartı kayıt/anım çevirme */
.auth-card__inner.is-animating { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ----------------------------------------------------------------- TEMA GEÇİŞ */

html.theme-switching, html.theme-switching * {
  transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease !important;
}

/* -------------------------------------------------------------- SORGU KONSOLU */


.chips .chip { font-family: var(--mono); font-size: 11px; }


/* ---------------------------------------------------------- SONUÇ GÖRÜNÜMÜ */

.result-body .card { border: 0; box-shadow: none; background: transparent; }
.result-skeleton .card { background: var(--bg-card); }

/* ------------------------------------------------------------------ TREE */

.tree-container .tree-node {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
}
.tree-container .tree-node.merkez, .tree-container .tree-node.is-core {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 30px -12px var(--accent-glow);
  animation: corePulse 3s var(--ease-ops) infinite;
}
.tree-container .rel-badge {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tree-node .avatar { background: var(--surface-3); }

/* ----------------------------------------------------------------- HOLOGRAM */

.hologram-ast { z-index: 7000; }
.holo-avatar {
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.28), transparent 62%),
    var(--surface-2);
  color: var(--accent-text);
  font-family: var(--mono);
  font-weight: 700;
  box-shadow: 0 0 24px var(--accent-glow);
  animation: holoFloat 3.6s ease-in-out infinite;
}
.holo-avatar::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--accent-line);
  opacity: 0.5;
}
.holo-bubble {
  background: var(--bg-card-solid);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
.holo-bubble::before { content: "⟁ "; color: var(--accent-text); }
.holo-arrow { border-top-color: var(--accent-line); }

/* ----------------------------------------------------------------- HARİTA */

.leaflet-container { background: var(--bg-2); }
.leaflet-tile { filter: invert(0.92) hue-rotate(120deg) saturate(0.35) brightness(0.86) contrast(0.95); }
.leaflet-container .leaflet-control-zoom a {
  background: var(--surface-2);
  color: var(--ink-2);
  border-color: var(--line-2);
}
.leaflet-container .leaflet-control-zoom a:hover { background: var(--surface-3); color: var(--ink); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-card-solid); color: var(--ink); }
.leaflet-tooltip { background: var(--bg-card-solid); color: var(--ink); border: 1px solid var(--line-2); }
:is(.leaflet-popup-content-wrapper, .leaflet-tooltip) a { color: var(--accent-text); }

/* ---------------------------------------------------------------- DURUM SAYFALARI */


.hero__grain { opacity: 0.05; }
.st-kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent-text);
}
.st-title { font-family: var(--display); letter-spacing: -0.03em; }
.st-lead { color: var(--ink-2); }
.st-code {
  font-family: var(--mono);
  color: var(--accent-text);
  border: 1px solid var(--line-2);
  background: var(--bg-sunken);
  border-radius: var(--r-xs);
}
.st-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.st-icon { color: var(--accent-text); }
.st-icon.tone-danger { color: var(--red); }
.st-icon.tone-warning { color: var(--amber); }
.st-icon.tone-success { color: var(--green); }

/* Geri sayım halkası */


/* Eski state-* ailesi (error-card.php) */
.state-page { background: var(--bg-2); }
.state-card {
  background: var(--bg-card-solid);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}
.state-code { font-family: var(--mono); color: var(--accent-text); letter-spacing: 0.1em; }
.state-title { font-family: var(--display); }
.state-desc { color: var(--ink-2); }
.state-note { color: var(--ink-3); border-top: 1px solid var(--line); }
.state-note.tone-danger { color: var(--red); }
.state-note.tone-warning { color: var(--amber); }
.state-actions { border-top: 1px solid var(--line); }
.state-sub-btn { color: var(--ink-3); }
.state-sub-btn:hover { color: var(--ink); }
.state-icon { color: var(--accent-text); }
.state-icon.tone-danger { color: var(--red); }
.state-icon.tone-warning { color: var(--amber); }
.state-icon.tone-success { color: var(--green); }


/* ---------------------------------------------------------------- ALT BİLGİ */

.mn-footer {
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.mn-footer a:hover { color: var(--accent-text); }
.footer-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: ledPulse 2.4s ease-in-out infinite;
}
.footer-stat { color: var(--ink-3); }

/* Adres çubuğu / gösterge gibi küçük parçalar */
.text-muted { color: var(--ink-3); }

/* ------------------------------------------------------------- MOBİL TABBAR */

.tabbar {
  background: var(--bg-header);
  -webkit-backdrop-filter: var(--vibrancy-thick);
  backdrop-filter: var(--vibrancy-thick);
  border-top: 1px solid var(--line);
}
.tabbar-item { color: var(--ink-3); }
.tabbar-item.is-active { color: var(--accent-text); }
.tabbar-item.is-active::after { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.tabbar-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ----------------------------------------------------------- MARKET & BAKİYE
   "Servis Market" — bakiye rozeti, servis kartları ve "Bakiye yükle" aksiyonu
   tek HUD diliyle toparlanır: mono rakamlar, hairline, fosfor çengelleri. */

/* Araç çubuğu — HUD okuma satırı */
.mk-toolbar { gap: 12px; }
.mk-toolbar .chips { font-family: var(--mono); }
.mk-toolbar > .pill {
  padding: 7px 14px 7px 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  background: var(--surface);
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(var(--hair), 0.05);
}
.mk-toolbar > .pill::before {
  width: 6px; height: 6px;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent-glow);
  animation: ledPulse 2.4s ease-in-out infinite;
}
.mk-toolbar > .pill .num { font-variant-numeric: tabular-nums; }

/* Servis kartı — operasyon kanalı */
.card.mk {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.card.mk:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.mk__name { font-size: 15.5px; }
.mk__price { margin-top: 18px; }
.mk__now { font-family: var(--mono); font-weight: 650; color: var(--ink); }
.mk--deal .mk__now { color: var(--accent-text); }
.mk__feats { border-top-color: var(--line); }
.mk__feats li { color: var(--ink-2); }

/* Bakiye yetersiz — hedef çengeli (HUD) */
.mk__action .btn--block { width: 100%; }
.mk__short {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.mk__short svg { width: 13px; height: 13px; color: var(--amber); flex: 0 0 auto; }
.mk__short::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--amber), transparent);
  opacity: 0.75;
}
.mk__action .btn--ghost {
  border-color: var(--accent-line);
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mk__action .btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 18px var(--accent-soft);
}

/* Sidebar bakiye kartı — sol fosfor çengeli */
.side-plan .sp-ico { animation: ledPulse 3.2s ease-in-out infinite; }
.side-plan strong { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- İLETİŞİM & KANALLAR
   Dort kart eskiden yan yana yayiliyor, sayfa bos genislik tasiyordu.
   Yeni: kartlar ortalanir, ust sinir 720px; genis ekranda en fazla iki
   kart yan yana, dar ekranda tek kolon. */
.contact-grid {
  max-width: 720px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center;
}
.contact {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.contact:hover { border-color: var(--accent-line); }
.contact__title { font-size: 15px; }
.contact__glow { opacity: 0.22; }
.contact .btn--ghost { color: var(--ink-2); }

/* ------------------------------------------------------------ AİLE/TİPİK SORGU DETAY */
.detail-popup {
  background: var(--bg-card-solid);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}


/* ------------------------------------------------------------ ANİMASYONLAR */

@keyframes opsBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ledPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes signalIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes signalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(34px); } }
@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 30px -12px var(--accent-glow); }
  50% { box-shadow: 0 0 0 6px var(--accent-soft), 0 10px 40px -10px var(--accent-glow); }
}
@keyframes holoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes flickerTxt { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.35; } 94% { opacity: 1; } }

/* Holt scan / radar süpürme elemanı (ops.js enjekte eder) */
.ops-scan {
  position: fixed;
  inset: 0;
  z-index: 9485;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 3px);
  opacity: 0.028;
}
.ops-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb), 0.055) 48%, transparent 52%);
  background-size: 100% 220%;
  background-position: 0 -60%;
  animation: scanSweep 7s var(--ease-ops) infinite;
}
@keyframes scanSweep {
  0% { background-position: 0 -60%; }
  55% { background-position: 0 130%; }
  100% { background-position: 0 130%; }
}
.ops-vignette {
  position: fixed;
  inset: 0;
  z-index: 9486;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 62%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0.45;
}
[data-theme="light"] .ops-scan { opacity: 0.014; }
[data-theme="light"] .ops-scan::after { background: none; }
[data-theme="light"] .ops-vignette { opacity: 0.18; }

/* Tüm hareketler kullanıcı tercihine kapılsın */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .ops-scan::after { animation: none; }
}

/* -------------------------------------------------------------- DURUM ROZETLERİ
   diger-sorgular.php: ölüm kaydı sonucunda kullanılan bg-danger/bg-success
   eski tema katmanında tanımsızdı (undefined → şeffaf rozet). Yeşil burada
   "ölüm kaydı yok" anlamındaki işlevsel durum rengidir. */

.bg-danger  { background: var(--red-soft);   color: var(--red);   border: 1px solid var(--line-2); }
.bg-success { background: var(--green-soft); color: var(--green); border: 1px solid var(--line-2); }

/* Sonuç durum ikonu ve sabit genişlikli KV tablosu — satır içi üsluba bağlı değil */
.result-status-icon { font-size: 64px; line-height: 1; display: inline-flex; }
.kv-table--fixed { max-width: 500px; }

/* Instagram profil fotoğrafları — satır içi JS kaldırıldı, hover CSS ile geldi */
@media (hover: hover) {
  .photo-thumb { display: block; transition: transform .2s var(--ease); }
  .photo-thumb:hover { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-thumb { transition: none; }
}

/* ------------------------------------------------------------- NEON BUTONLAR
   monarc-compat'ın .btn-success/.btn-info'su parlak dolgu + #fff yazıydı.
   Yumuşak anlam tonlarıyla değiştirildi (background, yazı, hover tamamen kapalı). */

.btn-success { background: var(--green-soft); color: var(--green); border: 1px solid var(--line-2); }
.btn-success:hover { background: var(--green-soft); border-color: var(--green); }
.btn-info { background: var(--cyan-soft); color: var(--cyan); border: 1px solid var(--line-2); }
.btn-info:hover { background: var(--cyan-soft); border-color: var(--cyan); }

/* ---------------------------------------------------- MARKA KANAL BUTONLARI
   error-card.php: .btn-discord/.btn-telegram marka mavisi yerine accent tonları.
   ikonlar da aynı aileden (eski ikon kuralı tanımsız --brand-* token'ına bakıyordu). */

.btn-discord, .btn-telegram { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); }
.btn-discord:hover, .btn-telegram:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.ico-discord, .ico-telegram { color: var(--accent-text); }

/* ------------------------------------------------------------- HATA KARTI TON
   error-card.php: satır içi hex (#ef4444 vs.) yerine --tone artık token'dan geliyor. */

.state-card.tone-critical { --tone: var(--red); }
.state-card.tone-warning { --tone: var(--amber); }
.state-card.tone-info { --tone: var(--accent); }

/* ------------------------------------------------------ 2FA ADIM NOKTALARI
   2fa-setup.php: inline 32px daire yerine adım rozeti (mono rakam + accent). */

.step-no {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

/* ----------------------------------------------------------- BİLDİRİM & FORM
   Küçük sarmalayıcılar: satır içi flex/nowrap kalıpları sınıflara taşındı. */

.notif__time-nowrap { flex-shrink: 0; }
.field--grow { flex: 1 1 200px; min-width: 200px; }

/* ------------------------------------------- SEMANTiK TONLAR — TAMAMLAYICI
   Acik temada pastel semantik metinler (yesil/siyan/kirmizi/kehribar) krem
   zemin ustunde soluk kaliyordu; koyu tema degismez, burada yalnizca acik
   temanin koyu tona cekilmesi yapilir. Ayrica .btn-warning neon kalmasi
   icin ayni ailenin yumusak stili verilir; sonuc ikonlari ve sabit tablo
   merkezleme ise diger-sorgular ile hizalanir. */
[data-theme="light"] {
  --green: #0f9d6e;
  --cyan:  #0a8fb2;
  --red:   #d93848;
  --amber: #b07010;
}
.btn-warning {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--line-2);
}
.btn-warning:hover { background: var(--amber-soft); border-color: var(--amber); }
.result-status-icon.is-danger  { color: var(--red); }
.result-status-icon.is-success { color: var(--green); }
.kv-table--fixed { max-width: 500px; margin-inline: auto; }

/* ------------------------------------------------- KAYDIRMA & AÇILIR KUTULAR
   Butona tiklayinca tarayici odaklanan ogeyi gorunur yapmaya calisiyordu;
   html'deki smooth scroll yuzunden bu, sayfayi kaydiran yumusak bir animasyon
   oluyordu ("ortadaki butona dokununca sayfa disari kacar"). Normal
   kaydirma ani olur, smooth kaldirildi; yumusak geci yalnizca htmx swap
   icin isteniyorsa gerek kalmadi (show:top instandir). */
html { scroll-behavior: auto; }

/* Açilir kutular ekran disina tasmasin: max-height + kendi kaydirma cubugu.
   Ayrica kutunun icindeki ogeye odak dusmesi sayfayi kaydirmasin. */
.tweaks__pop, .mn-drop__pop {
  max-height: min(70vh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-margin: 0;
}
.tweaks.is-up .tweaks__pop { max-height: calc(100dvh - 150px); }
.tweaks__btn:focus-visible, .tweaks__seg button:focus-visible, .swatch:focus-visible { outline-offset: 2px; }

/* ------------------------------------------------ IÇ BOŞLUK TIKIZLAMA
   Kartlar arasinda ve sayfa kenarlarinda birikmis gereksiz bosluklar
   daraltildi (34px -> 28px kenar, 16px -> 14px izgara). Iç dolgular
   korundu ki kartlar havasiz kalmasin. */
.content { padding: 28px 28px 0; }
/* Dikey ritim buradan KALDIRILDI -> util.css "YERLESIM RITMI" katmani.
   Eskiden burada `.card + .card` ve `.content > .card + .card` gibi
   KOMSULUK kurallari vardi; kapsamadiklari komsu ciftleri araliksiz
   birakiyor, izgara icinde de tetiklenip yan yana duran kartlari 14px
   asagi kaydiriyordu. Bosluk artik kapsayicinin gap'i. */

@media (max-width: 600px) {
  .content { padding: 20px 14px 0; }
}