/* ==========================================================================
   Yönetim görünümleri — canlı, denetim, ekip, profil, modüller
   (gorunum/canli.js, denetim.js, ekip.js, profil.js, moduller.js)
   Yalnız belirtec.css değişkenleri; sabit renk yok. Sınıf önekleri ekrana özel:
   cnl- (canlı), dnt- (denetim), ekp- (ekip), prf- (profil), mgz- (modül mağazası).
   ========================================================================== */

/* ==========================================================================
   Canlı nabız
   ========================================================================== */
.cnl-kontrol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cnl-durum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-tam);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.cnl-oto { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--text-2); }
.cnl-oto-ad { cursor: pointer; user-select: none; }

.cnl-ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cnl-ozet-oge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 84px;
  padding: 14px 16px;
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--golge-1);
  text-align: left;
  transition: box-shadow var(--t-hizli) var(--egri), background-color var(--t-hizli);
}
.cnl-ozet-oge:hover { box-shadow: inset 0 0 0 1px var(--border-guclu), var(--golge-1); }
.cnl-ozet-oge[aria-pressed="true"] {
  background: var(--accent-ince);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, var(--border)), var(--golge-1);
}
.cnl-ozet-ad { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12.5px; font-weight: 560; color: var(--text-2); }
.cnl-ozet-ad .ikon { color: var(--text-3); }
.cnl-ozet-oge[aria-pressed="true"] .cnl-ozet-ad .ikon { color: var(--accent); }
.cnl-ozet-tik { margin-left: auto; opacity: 0; color: var(--accent) !important; }
.cnl-ozet-oge[aria-pressed="true"] .cnl-ozet-tik { opacity: 1; }
.cnl-ozet-sayi { font-size: 30px; font-weight: 650; line-height: 1.05; letter-spacing: -.02em; color: var(--text); }
.cnl-uyari:not(:empty) { margin-bottom: 12px; }
.cnl-tablo { padding: 4px 8px 8px; }
.cnl-tablo tr.cnl-sohbetsiz { cursor: default; }
.cnl-tablo tr.cnl-sohbetsiz:hover td { background: none; }
.cnl-sayfa, .cnl-son, .cnl-sohbet { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: 100%; }
.cnl-yol { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.cnl-sayfa small, .cnl-son small, .cnl-sohbet small { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.cnl-sohbet small { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnl-cihaz { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; }
.cnl-cihaz .ikon { color: var(--text-3); }
.cnl-eylemler { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
@container icerik (max-width: 760px) {
  .cnl-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cnl-ozet-oge { min-height: 72px; padding: 12px 14px; }
  .cnl-ozet-sayi { font-size: 26px; }
}
@container (max-width: 640px) {
  .cnl-tablo .tablo td.cnl-islem { grid-column: 1 / -1; }
  .cnl-eylemler { justify-content: flex-start; }
  .cnl-yol { max-width: 100%; }
}

/* ==========================================================================
   Denetim & Erişim
   ========================================================================== */
.dnt-zincir-yer { display: flex; align-items: center; gap: 6px; }
.dnt-zincir {
  --z-renk: var(--text-3);
  --z-bg: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px 6px 12px;
  border-radius: 12px;
  background: var(--z-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--z-renk) 35%, var(--border));
  color: var(--text);
}
.dnt-zincir > .ikon { color: var(--z-renk); }
.dnt-zincir[data-durum="tamam"] { --z-renk: var(--success); --z-bg: var(--success-soft); }
.dnt-zincir[data-durum="kirik"] { --z-renk: var(--danger); --z-bg: var(--danger-soft); }
.dnt-zincir[data-durum="bilinmiyor"] { --z-renk: var(--warning); --z-bg: var(--warning-soft); }
.dnt-zincir-metin { display: flex; flex-direction: column; line-height: 1.25; }
.dnt-zincir-metin strong { font-size: 13.5px; font-weight: 650; }
.dnt-zincir[data-durum="tamam"] .dnt-zincir-metin strong { color: var(--success); }
.dnt-zincir[data-durum="kirik"] .dnt-zincir-metin strong { color: var(--danger); }
.dnt-zincir-metin small { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dnt-zincir-uyari:not(:empty) { margin: -8px 0 20px; }

.dnt-arac { align-items: flex-end; }
.dnt-eylem-sec { width: auto; min-width: 200px; max-width: 280px; }
.dnt-arac .arama { flex: 1 1 200px; max-width: 280px; }
.dnt-hedef-girdi { flex: 1 1 200px; max-width: 280px; width: auto; }
.dnt-tarih { display: flex; align-items: flex-end; gap: 6px; }
.dnt-tarih-oge { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.dnt-tarih-oge .girdi { width: 152px; }
.dnt-tarih-ara { padding-bottom: 8px; color: var(--text-3); }
.dnt-ozet:empty { display: none; }
.dnt-liste[data-yukleniyor] { opacity: .55; transition: opacity var(--t-orta); pointer-events: none; }
.dnt-cizelge { margin-bottom: 4px; }
.dnt-oge { cursor: pointer; border-radius: 10px; }
.dnt-oge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dnt-oge:hover .dnt-govde { box-shadow: inset 0 0 0 1px var(--border-guclu); }
.dnt-oge[data-acik] .dnt-govde { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, var(--border)); }
.dnt-bas { display: flex; align-items: flex-start; gap: 8px; }
.dnt-bas .zc-baslik { flex: 1; min-width: 0; }
.dnt-eylem { font-weight: 620; }
.dnt-kim { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.dnt-kim .ikon { color: var(--text-3); }
.dnt-hedef { max-width: 100%; font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
code.dnt-hedef { color: var(--text-2); }
.dnt-ac { flex: none; margin: -2px -4px 0 0; }
.dnt-ac .ikon:last-child { transition: transform var(--t-orta) var(--egri); }
.dnt-ac[aria-expanded="true"] .ikon:last-child { transform: rotate(180deg); }
.dnt-ayrinti {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-guclu);
  cursor: auto;
}
.dnt-ayrinti[hidden] { display: none; }
.dnt-tanim { font-size: 13px; }
.dnt-tanim dd { overflow-wrap: anywhere; }
.dnt-meta { padding: 10px 12px; border-radius: 9px; background: var(--surface-2); font-size: 12.5px; }
.dnt-meta dt { color: var(--text-3); }
.dnt-deger { white-space: pre-wrap; }
.dnt-ayrinti-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
.dnt-not { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-3); }
.dnt-not .ikon { flex: none; }
.dnt-erisim-kart { padding: 4px 8px 8px; }
.dnt-erisim-kart tr[data-basarisiz] td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.dnt-kisi, .dnt-sonuc, .dnt-zaman { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.dnt-sonuc { align-items: flex-start; }
.dnt-zaman { align-items: flex-end; }
.dnt-kisi small, .dnt-sonuc small, .dnt-zaman small { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.dnt-kisi small { overflow-wrap: anywhere; }
.dnt-ip { font-size: 12px; color: var(--text-2); }
@container icerik (max-width: 760px) {
  .dnt-arac { align-items: stretch; }
  .dnt-eylem-sec, .dnt-arac .arama, .dnt-hedef-girdi { flex: 1 1 100%; max-width: none; min-width: 0; }
  .dnt-tarih { flex: 1 1 100%; flex-wrap: wrap; }   /* 320 px'de iki tarih yan yana sığmıyordu (yatay taşma) */
  .dnt-tarih-oge { flex: 1 1 128px; min-width: 0; }
  .dnt-tarih-oge .girdi { width: 100%; min-width: 0; }
  .zc-oge.dnt-oge { grid-template-columns: 44px 34px minmax(0, 1fr); }
  .dnt-zincir-yer { width: 100%; }
  .dnt-zincir { flex: 1; }
}
@container (max-width: 640px) {
  .dnt-zaman { align-items: flex-start; }
  .dnt-erisim-kart tr[data-basarisiz] td:first-child { box-shadow: none; }
  .dnt-erisim-kart tr[data-basarisiz] { box-shadow: inset 3px 0 0 var(--danger); }
}

/* ==========================================================================
   Ekip & Roller
   ========================================================================== */
.ekp-sekme { display: flex; flex-direction: column; gap: 14px; }
.ekp-tablo { padding: 4px 8px 8px; }
.ekp-uye { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ekp-uye-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ekp-uye-ad { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ekp-uye-metin small { font-size: 12px; font-weight: 400; color: var(--text-3); overflow-wrap: anywhere; }
.ekp-son { display: inline-flex; flex-direction: column; gap: 2px; }
.ekp-son code, .ekp-son small { font-size: 11.5px; color: var(--text-3); }
.ekp-davet { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ekp-davet .ikon { color: var(--text-3); flex: none; }
.ekp-not { display: flex; align-items: flex-start; gap: 4px; }
.ekp-not .ikon { margin-top: 2px; flex: none; }

/* rol seçici (radyo kartları) */
.ekp-roller { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 8px; }
.ekp-rol-secenek {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-guclu);
  cursor: pointer;
  transition: box-shadow var(--t-hizli), background-color var(--t-hizli);
}
.ekp-rol-secenek:hover { box-shadow: inset 0 0 0 1px var(--text-3); }
.ekp-rol-secenek:has(input:checked) { background: var(--accent-ince); box-shadow: inset 0 0 0 2px var(--accent); }
.ekp-rol-secenek:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ekp-radyo { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.ekp-radyo:focus-visible { outline: none; }
.ekp-rol-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ekp-rol-ad { font-weight: 620; }
.ekp-rol-ad small { font-weight: 400; color: var(--text-3); }
.ekp-rol-aciklama { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.ekp-fieldset { display: flex; flex-direction: column; gap: 8px; }
.ekp-fieldset > legend { margin-bottom: 8px; }

/* özel rol izin seçici */
.ekp-ozel { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.ekp-ozel[hidden] { display: none; }
.ekp-ozel .kucuk-baslik, .ekp-ozel p { margin: 0; }
.ekp-izin-secici { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ekp-izin-grup { padding: 10px 12px 12px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
/* legend'i kutunun içine al (kenarlık çizgisinin üstünde yüzmesin) */
.ekp-izin-bas { float: left; width: 100%; padding: 0 0 8px; margin: 0 0 8px; border-bottom: 1px solid var(--border); }
.ekp-izin-bas + * { clear: both; }
.ekp-izin-tumu .onay-metin strong { font-size: 13px; font-weight: 650; }
.ekp-izin-liste { display: flex; flex-direction: column; gap: 6px; }
.ekp-izin-liste .onay-metin { font-size: 13px; }

/* davet kipi */
.ekp-davet-govde { display: flex; flex-direction: column; gap: 16px; }
.ekp-davet-notlar { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-2); }
.ekp-davet-notlar li { display: flex; align-items: flex-start; gap: 8px; }
.ekp-davet-notlar .ikon { flex: none; margin-top: 2px; color: var(--champagne-text); }

/* roller sekmesi */
.ekp-rol-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.ekp-rol-kart { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--golge-1); }
.ekp-rol-kart p { margin: 0; font-size: 13px; color: var(--text-2); }
.ekp-rol-kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ekp-rol-sayi { font-size: 12px; color: var(--text-3); white-space: nowrap; }
/* position: relative — hücrelerdeki .gorunmez (mutlak konumlu) metinler kaydırma kabının dışına taşıp sayfayı genişletmesin */
.ekp-matris-kap { position: relative; overflow-x: auto; margin: 0 calc(var(--kart-ic) * -1) calc(var(--kart-ic) * -1); border-top: 1px solid var(--border); }
.ekp-matris-kap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ekp-matris { width: 100%; min-width: 620px; font-size: 13px; }
.ekp-matris th, .ekp-matris td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.ekp-matris thead th {
  position: sticky;
  top: 0;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface);
  white-space: nowrap;
}
.ekp-matris th[scope="row"], .ekp-matris thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.ekp-matris th[scope="row"] { font-weight: 560; color: var(--text); }
.ekp-matris th[scope="row"] code { display: block; font-size: 11px; font-weight: 400; color: var(--text-3); }
.ekp-matris-grup th {
  padding-top: 14px;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 650;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
}
.ekp-matris td[data-var] { color: var(--accent); }
.ekp-matris td .ikon { display: inline-block; }
.ekp-yok { color: var(--text-3); }   /* "yok" imi okunmalı (--border-guclu 1.6:1 idi) */
.ekp-kaydir-ipucu { display: none; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 12px; color: var(--text-3); }
@container icerik (max-width: 760px) { .ekp-kaydir-ipucu { display: flex; } }
.ekp-matris tbody tr:not(.ekp-matris-grup):hover td, .ekp-matris tbody tr:not(.ekp-matris-grup):hover th { background: var(--accent-ince); }

/* ==========================================================================
   Profil ve güvenlik
   ========================================================================== */
.prf-ust { display: flex; flex-direction: column; gap: 16px; }
.prf-ust:has(> .kart) { margin-bottom: 20px; }
.prf-zorunlu:empty { display: none; }
.prf-izgara { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.prf-sutun { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@container icerik (max-width: 900px) { .prf-izgara { grid-template-columns: minmax(0, 1fr); } }
.prf-kart-durum { display: inline-flex; }
.prf-kart[data-vurgu] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--golge-1); }
.prf-kart:focus-visible { outline: none; }
.prf-metin { margin: 0; color: var(--text-2); font-size: 13.5px; text-wrap: pretty; }
.prf-maddeler { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--text-2); }
.prf-maddeler li { display: flex; align-items: flex-start; gap: 8px; }
.prf-maddeler .ikon { flex: none; margin-top: 2px; color: var(--champagne-text); }
.prf-eylemler { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.prf-iki-adim .prf-eylemler { justify-content: flex-start; }

.prf-adimlar { display: flex; flex-direction: column; gap: 18px; }
.prf-adim { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.prf-adim-no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--champagne) 45%, transparent);
}
.prf-adim-govde { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 3px; }
.prf-adim-baslik { font-size: 14px; font-weight: 620; }
.prf-qr-alan { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; }
.prf-anahtar { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* elle girilecek anahtar kesilmeden görünmeli (kopya-kutusu varsayılanı tek satır + üç nokta) */
code.kopya-deger.prf-sir { letter-spacing: .08em; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.6; }
.prf-kod { max-width: 360px; }

/* QR: koyu modül her temada açık zemin üzerinde (okunabilirlik) — yalnız belirteçlerle */
.prf-qr {
  --qr-zemin: var(--surface);
  --qr-murekkep: var(--text);
  flex: none;
  width: 196px;
  padding: 0;
  border-radius: 12px;
  background: var(--qr-zemin);
  color: var(--qr-murekkep);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
:root[data-tema="koyu"] .prf-qr { --qr-zemin: var(--text); --qr-murekkep: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .prf-qr { --qr-zemin: var(--text); --qr-murekkep: var(--bg); }
}
.prf-qr .qr { display: block; width: 100%; height: auto; }
@media (forced-colors: active) { .prf-qr { forced-color-adjust: none; background: Canvas; color: CanvasText; } }

.prf-kurtarma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: kurtarma; }
.prf-kurtarma li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  counter-increment: kurtarma;
}
.prf-kurtarma li::before { content: counter(kurtarma); min-width: 16px; font-size: 11px; font-weight: 650; color: var(--text-3); font-variant-numeric: tabular-nums; }
.prf-kurtarma code { font-size: 14.5px; letter-spacing: .06em; color: var(--text); user-select: all; }
.prf-kurtarma-kip .prf-eylemler { justify-content: flex-start; margin-top: 0; }
@media (max-width: 420px) { .prf-kurtarma { grid-template-columns: minmax(0, 1fr); } }

.prf-parola { display: flex; flex-direction: column; gap: 16px; }
.prf-form-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.prf-form-alt .alan-aciklama { flex: 1 1 220px; }

.prf-oturumlar { display: flex; flex-direction: column; }
.prf-oturum { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.prf-oturum:first-child { padding-top: 2px; }
.prf-oturum:last-child { border-bottom: 0; }
.prf-oturum-ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.prf-oturum[data-bu] .prf-oturum-ikon { background: var(--accent-soft); color: var(--accent); }
.prf-oturum-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prf-oturum-metin small { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.prf-oturum-metin code { font-size: 11.5px; color: var(--text-2); }
.prf-bos { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; }
.prf-bos .ikon { color: var(--success); }
@container icerik (max-width: 520px) {
  .prf-oturum { grid-template-columns: 36px minmax(0, 1fr); }
  .prf-oturum > :last-child { grid-column: 2; justify-self: start; }
}

.prf-tercihler { display: flex; flex-direction: column; gap: 14px; }
.prf-tercih { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.prf-tercih-metin { display: flex; flex-direction: column; gap: 2px; }
.prf-tercih-metin small { font-size: 12px; color: var(--text-3); }
.prf-tanim { font-size: 13.5px; }

/* ==========================================================================
   Modüller (mağaza)
   ========================================================================== */
.mgz-paket { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mgz-sayac { font-size: 12.5px; color: var(--text-3); }
.mgz-ust-uyari:not(:empty) { margin-bottom: 16px; }
.mgz-sekme-yeri .sekme-panel { display: flex; flex-direction: column; }
.mgz-govde { display: flex; flex-direction: column; gap: 28px; }
.mgz-grup { display: flex; flex-direction: column; gap: 12px; }
.mgz-grup-baslik { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; font-family: var(--font-serif); font-size: 22px; font-weight: 650; }
.mgz-grup-baslik .hap { align-self: center; }
.mgz-grup-baslik small { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-3); }
.mgz-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 14px; }
.mgz-kart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px 16px 12px;
  border-radius: var(--r-2);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--golge-1);
  transition: border-color var(--t-orta) var(--egri), box-shadow var(--t-orta) var(--egri);
}
.mgz-kart[data-acik]:not([data-cekirdek]) { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.mgz-kart[data-kilitli] { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.mgz-kart-ust { display: flex; align-items: flex-start; gap: 12px; }
.mgz-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mgz-kart[data-acik] .mgz-ikon { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--champagne) 40%, transparent); }
.mgz-kart-baslik { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mgz-ad { font-size: 15px; font-weight: 640; line-height: 1.25; }
.mgz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--text-3); }
.mgz-meta .rozet { height: 20px; font-size: 11.5px; }
.mgz-aciklama { flex: 1; margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; text-wrap: pretty; }
.mgz-gerek { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text-3); }
.mgz-not {
  --n-renk: var(--info);
  --n-bg: var(--info-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--n-bg);
  box-shadow: inset 3px 0 0 var(--n-renk);
  font-size: 12.5px;
  color: var(--text);
}
.mgz-not > .ikon, .mgz-not p > .ikon { flex: none; margin-top: 1px; color: var(--n-renk); }
.mgz-not[data-ton="uyari"] { --n-renk: var(--warning); --n-bg: var(--warning-soft); }
.mgz-not[data-ton="sampanya"] { --n-renk: var(--champagne); --n-bg: var(--champagne-soft); }
.mgz-zincir { flex-direction: column; align-items: stretch; gap: 8px; }
.mgz-zincir p { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.mgz-zincir .dugme { align-self: flex-start; }
.mgz-kart-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding-top: 10px; border-top: 1px solid var(--border); }
.mgz-kontrol { display: flex; align-items: center; min-height: 32px; }
.mgz-baglantilar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mgz-daima { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
@container icerik (max-width: 640px) {
  .mgz-izgara { grid-template-columns: minmax(0, 1fr); }
  .mgz-paket { width: 100%; }
}

/* ---------------- Abonelik ve kontör (gorunum/abonelik.js) ---------------- */
.ab-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ab-izgara { grid-template-columns: 1fr; } }
.ab-buyuk { margin: 0; font-family: var(--f-sayi); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.ab-buyuk small { font-family: var(--f-govde); font-size: var(--fs-13); font-weight: 500; color: var(--metin3); letter-spacing: 0; }
.ab-cerceve iframe { display: block; width: 100%; height: min(640px, 70vh); border: 0; border-radius: var(--r); background: var(--yuzey); }

/* şubeler */
/* Çok şube (js/sube.js, gorunum/takvim.js "Şubeler" kartı, gorunum/ekip.js şube ataması). 375 px'te taşma yok: seçici ve uzun adres/bağlantı sarar. */
.sube-secici { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.sube-secici-etiket { flex: none; font-size: 13px; font-weight: 600; color: var(--text-2); }
.sube-secici .secim { width: auto; min-width: 0; max-width: 100%; }
.sb-secici-kap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; min-width: 0; }
.sb-kart-kap { margin-top: 16px; min-width: 0; }
.sb-kural { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-1); }
.sb-kural .esnek p { margin: 0; }
.sb-kural > .anahtar { flex: none; white-space: nowrap; }
.sb-kural-ad { font-size: 14px; font-weight: 600; color: var(--text); }
.sb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sb-oge { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-1); }
.sb-oge-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.sb-oge-ad { min-width: 0; overflow-wrap: anywhere; }
.sb-oge-bas .dugme { margin-left: auto; }
.sb-tanim { grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); font-size: 13px; }
.sb-gunler { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ekp-sube-liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ekp-subeler { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }

/* ---------------- Mobil (≤759 px): ad ve etiket kesilmez, harf kuyruğu kırpılmaz, dokunma hedefi ≥ 40 px ---------------- */
@media (max-width: 759px) {
  /* canlı nabız: ziyaretçinin sayfa yolu ve son sohbet satırı 36ch / 32ch'te "…" ile kesiliyordu */
  .cnl-yol, .cnl-sohbet small { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; }
  .cnl-cihaz { white-space: normal; }
  .cnl-oto { min-height: 40px; }
  /* ekip: yetki matrisinde sabit (sticky) ilk sütun: izin adı ve kodu sarar, kesilmez; ama sütun ekranı da kaplamaz (140 px, kalanında rol sütunları kayar) */
  .ekp-matris th[scope="row"], .ekp-matris thead th:first-child { width: 140px; min-width: 140px; max-width: 140px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  .ekp-matris th[scope="row"] code { overflow-wrap: anywhere; }
  .ekp-rol-ad, .ekp-uye-ad { line-height: 1.35; }
  /* denetim: ayrıntı aç/kapa düğmesi */
  .dnt-ac { min-width: 40px; min-height: 40px; }
  .dnt-eylem, .dnt-hedef, .dnt-kim { line-height: 1.4; }
  /* modüller / şubeler / profil */
  .mgz-ad, .sb-oge-ad, .prf-oturum-metin, .prf-tercih-metin { line-height: 1.35; overflow-wrap: anywhere; }
  .mgz-meta .rozet { height: auto; min-height: 20px; padding-block: 2px; line-height: 1.25; white-space: normal; }
  .mgz-meta .rozet > span:last-child { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .sb-oge-bas .dugme { min-height: 40px; }
  .prf-oturum .dugme { min-height: 40px; }
}