/* CamiNet — yönetim alanı (IBAN, sertifika, mail, yükleme ayarları, camiler).
   CSP style-src 'self': görünümlerde satır içi stil yok; hepsi burada. Renkler site.css
   tema değişkenlerinden (--cn-*) gelir, karanlık/aydınlık temada birlikte çalışır. */

/* ── Sayfa başlığı ─────────────────────────────────────────────────────────── */
.cn-page-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .75rem; margin-bottom: 1.25rem;
}
.cn-page-title { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.cn-page-title h2 { font-weight: 600; }

/* ── Boş durum ─────────────────────────────────────────────────────────────── */
.cn-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--cn-muted);
  border: 1px dashed var(--cn-border); border-radius: .75rem; background: rgba(var(--cn-primary-rgb), .03);
}
.cn-empty .icon { opacity: .5; margin-bottom: .5rem; }

/* ── Kartlar / tablolar ────────────────────────────────────────────────────── */
.card { border-color: var(--cn-border); }
.card-header, .card-footer { background: rgba(var(--cn-primary-rgb), .06); border-color: var(--cn-border); }
.cn-table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(var(--cn-primary-rgb), .07); }
.cn-table thead th { color: var(--cn-muted); font-weight: 600; font-size: .85rem; border-bottom-color: var(--cn-border); white-space: nowrap; }
.cn-table td, .cn-table th { border-color: var(--cn-border); }
.cn-col-check { width: 2.5rem; }
.cn-col-id { width: 4.5rem; }
.cn-dashed { border-style: dashed; background: transparent; }

/* ── Sekmeler ──────────────────────────────────────────────────────────────── */
.cn-tabs { --bs-nav-tabs-border-color: var(--cn-border); --bs-nav-tabs-link-active-bg: var(--cn-surface); --bs-nav-tabs-link-active-border-color: var(--cn-border) var(--cn-border) var(--cn-surface); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.cn-tabs .nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; color: var(--cn-muted); }
.cn-tabs .nav-link.active { color: var(--cn-primary); font-weight: 600; }
.cn-subtabs .nav-link { padding: .3rem .8rem; font-size: .9rem; }
@media (max-width: 575.98px) { .cn-tabs .nav-link { padding: .5rem .65rem; font-size: .92rem; } }

/* ── IBAN ──────────────────────────────────────────────────────────────────── */
.cn-mono { font-family: var(--bs-font-monospace); }
.cn-iban { font-family: var(--bs-font-monospace); letter-spacing: .06em; overflow-wrap: anywhere; } /* 4'lü gruplar boşlukta kırılır */
.cn-iban-lg {
  font-size: 1rem; letter-spacing: .12em; padding: .35rem .75rem; border-radius: .5rem;
  background: rgba(var(--cn-primary-rgb), .08); color: var(--cn-text); display: inline-block;
}
.cn-iban-line { display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; min-width: 0; }
.cn-iban-card { transition: border-color .15s; }
.cn-iban-card:hover { border-color: rgba(var(--cn-primary-rgb), .6); }
.cn-status-approved { border-left: 4px solid var(--bs-success); }
.cn-status-rejected { border-left: 4px solid var(--bs-danger); }
.cn-status-pending { border-left: 4px solid var(--cn-primary); }

.cn-tag-imam { background: rgba(13, 110, 253, .18); color: #7fb0ff; border: 1px solid rgba(13, 110, 253, .35); }
.cn-tag-admin { background: rgba(var(--cn-primary-rgb), .16); color: var(--cn-primary); border: 1px solid rgba(var(--cn-primary-rgb), .4); }
[data-bs-theme="light"] .cn-tag-imam { color: #0b5ed7; }
.badge.cn-tag-imam, .badge.cn-tag-admin { font-weight: 500; }

.cn-waiting {
  padding: .5rem .75rem; border-radius: .5rem;
  background: rgba(255, 193, 7, .10); border: 1px solid rgba(255, 193, 7, .25);
}
.cn-waiting-title { font-size: .75rem; font-weight: 700; color: #e0b44c; margin-bottom: .35rem; display: flex; align-items: center; gap: .3rem; }
[data-bs-theme="light"] .cn-waiting-title { color: #8a6100; }

.cn-divider-label {
  display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--cn-muted); margin-bottom: .5rem;
}
.cn-divider-label::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--cn-border); }

.cn-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--cn-border); }
.cn-timeline li { position: relative; padding: 0 0 .75rem .5rem; }
.cn-timeline li::before {
  content: ""; position: absolute; left: -1.4rem; top: .3rem; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--cn-surface); border: 2px solid var(--cn-muted);
}
.cn-timeline li.is-ok::before { border-color: var(--bs-success); }
.cn-timeline li.is-bad::before { border-color: var(--bs-danger); }

.cn-desc { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.cn-desc dt { color: var(--cn-muted); font-weight: 500; font-size: .9rem; }
.cn-desc dd { margin: 0; min-width: 0; }
@media (max-width: 420px) { .cn-desc { grid-template-columns: 1fr; } .cn-desc dd { margin-bottom: .35rem; } }

.cn-no-resize { resize: none; }

/* ── Arama / formlar ───────────────────────────────────────────────────────── */
.cn-search-form { max-width: 420px; }
.cn-w-220 { max-width: 220px; }
.cn-chip { border-radius: 999px; padding: .15rem .65rem; }
.cn-offcanvas { --bs-offcanvas-width: 420px; }

.cn-fieldset {
  border: 1px solid var(--cn-border); border-radius: .75rem; padding: 1rem 1.25rem 1.25rem; margin-bottom: 1.25rem;
  background: var(--cn-surface);
}
.cn-fieldset legend {
  float: none; width: auto; font-size: .95rem; font-weight: 600; color: var(--cn-primary);
  padding: 0 .5rem; margin: 0 0 .25rem -.5rem;
}
@media (max-width: 575.98px) { .cn-fieldset { padding: .75rem .9rem 1rem; } }
.cn-form-actions { position: sticky; bottom: 0; padding: .75rem 0; background: var(--cn-bg); border-top: 1px solid var(--cn-border); }

.cn-photo {
  aspect-ratio: 4 / 3; border: 1px dashed var(--cn-border); border-radius: .75rem; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: rgba(var(--cn-primary-rgb), .05);
}
.cn-photo-img { width: 100%; height: 100%; object-fit: cover; }
.cn-photo-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--cn-muted); }

/* ── Cami listesi ──────────────────────────────────────────────────────────── */
.cn-thumb { width: 64px; height: 64px; border-radius: .5rem; object-fit: cover; flex: 0 0 64px; }
.cn-thumb-empty {
  display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--cn-muted);
  background: rgba(var(--cn-primary-rgb), .08); text-align: center;
}
.cn-mosque-resp { min-width: 12rem; }
@media (max-width: 767.98px) { .cn-mosque-resp { min-width: 0; flex: 1 1 100%; } }