/* CamiNet — Bootstrap 5.3 üzerine tema ve düzen.
   CSP style-src 'self': görünümlerde style="" ve <style> YOK; tüm stil bu dosyada. */

/* ── Tema renkleri ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --cn-primary: #C8A36A;
  --cn-primary-hover: #E8CA9B;
  --cn-primary-rgb: 200, 163, 106;
  --cn-bg: #222222;
  --cn-surface: #2A2A2A;
  --cn-chrome: #1A1A1A;
  --cn-text: #EBE1D3;
  --cn-muted: #A89F92;
  --cn-border: #424242;
  --cn-on-primary: #1A1A1A;
}

[data-bs-theme="light"] {
  --cn-primary: #B8935A;
  --cn-primary-hover: #A38047;
  --cn-primary-rgb: 184, 147, 90;
  --cn-bg: #F9F6F0;
  --cn-surface: #FFFFFF;
  --cn-chrome: #EBE0CD;
  --cn-text: #2B1D12;
  --cn-muted: #6E5E4E;
  --cn-border: #E0D5C1;
  --cn-on-primary: #FFFFFF;
}

[data-bs-theme] {
  --bs-body-bg: var(--cn-bg);
  --bs-body-color: var(--cn-text);
  --bs-secondary-color: var(--cn-muted);
  --bs-border-color: var(--cn-border);
  --bs-primary: var(--cn-primary);
  --bs-primary-rgb: var(--cn-primary-rgb);
  --bs-link-color: var(--cn-primary);
  --bs-link-color-rgb: var(--cn-primary-rgb);
  --bs-link-hover-color: var(--cn-primary-hover);
  --bs-link-hover-color-rgb: var(--cn-primary-rgb);
  --bs-emphasis-color: var(--cn-text);
  --bs-tertiary-bg: var(--cn-chrome);
  --bs-secondary-bg: var(--cn-surface);
  --bs-focus-ring-color: rgba(var(--cn-primary-rgb), .35);
}

body { background: var(--cn-bg); color: var(--cn-text); min-height: 100vh; }

.card, .modal-content, .offcanvas, .dropdown-menu, .list-group-item, .table {
  --bs-card-bg: var(--cn-surface);
  --bs-modal-bg: var(--cn-surface);
  --bs-offcanvas-bg: var(--cn-surface);
  --bs-dropdown-bg: var(--cn-surface);
  --bs-list-group-bg: var(--cn-surface);
  --bs-table-bg: var(--cn-surface);
  --bs-card-border-color: var(--cn-border);
}

.btn-primary {
  --bs-btn-bg: var(--cn-primary);
  --bs-btn-border-color: var(--cn-primary);
  --bs-btn-color: var(--cn-on-primary);
  --bs-btn-hover-bg: var(--cn-primary-hover);
  --bs-btn-hover-border-color: var(--cn-primary-hover);
  --bs-btn-hover-color: var(--cn-on-primary);
  --bs-btn-active-bg: var(--cn-primary-hover);
  --bs-btn-active-border-color: var(--cn-primary-hover);
  --bs-btn-disabled-bg: var(--cn-primary);
  --bs-btn-disabled-border-color: var(--cn-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--cn-primary);
  --bs-btn-border-color: var(--cn-primary);
  --bs-btn-hover-bg: var(--cn-primary);
  --bs-btn-hover-border-color: var(--cn-primary);
  --bs-btn-hover-color: var(--cn-on-primary);
  --bs-btn-active-bg: var(--cn-primary);
  --bs-btn-active-color: var(--cn-on-primary);
}

.text-primary { color: var(--cn-primary) !important; }
.bg-primary { background-color: var(--cn-primary) !important; color: var(--cn-on-primary) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--cn-primary); --bs-nav-pills-link-active-color: var(--cn-on-primary); }
.nav-link { color: var(--cn-text); }
.form-control, .form-select { background-color: var(--cn-surface); color: var(--cn-text); border-color: var(--cn-border); }
.form-control:focus, .form-select:focus { border-color: var(--cn-primary); }
.form-check-input:checked { background-color: var(--cn-primary); border-color: var(--cn-primary); }
.pagination { --bs-pagination-active-bg: var(--cn-primary); --bs-pagination-active-border-color: var(--cn-primary); --bs-pagination-color: var(--cn-primary); --bs-pagination-bg: var(--cn-surface); }

/* ── İkonlar ───────────────────────────────────────────────────────────────── */
.icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.icon-lg { width: 1.6em; height: 1.6em; }
.icon-xl { width: 3rem; height: 3rem; }
.icon-primary { color: var(--cn-primary); }

/* ── Cami düzeni: kenar menü + başlık ──────────────────────────────────────── */
.cn-shell { display: flex; min-height: 100vh; }

.cn-sider {
  --bs-offcanvas-width: 260px;
  background: var(--cn-chrome);
  border-right: 1px solid var(--cn-border);
}

@media (min-width: 768px) {
  .cn-sider { width: 240px; flex: 0 0 240px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

.cn-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem; color: var(--cn-text); text-decoration: none; font-weight: 600; }
.cn-brand img { width: 40px; height: 40px; }
.cn-brand span { line-height: 1.2; }

.cn-menu { list-style: none; margin: 0; padding: .25rem .5rem 1rem; }
.cn-menu a, .cn-menu summary {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: .5rem;
  color: var(--cn-text); text-decoration: none; cursor: pointer; list-style: none;
}
.cn-menu summary::-webkit-details-marker { display: none; }
.cn-menu summary .chev { margin-left: auto; transition: transform .15s; }
.cn-menu details[open] > summary .chev { transform: rotate(180deg); }
.cn-menu a:hover, .cn-menu summary:hover { background: rgba(var(--cn-primary-rgb), .12); }
.cn-menu a.active { background: rgba(var(--cn-primary-rgb), .22); color: var(--cn-primary); font-weight: 600; }
.cn-menu ul { list-style: none; padding-left: 1rem; margin: 0; }

.cn-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.cn-header {
  display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem;
  background: var(--cn-chrome); border-bottom: 1px solid var(--cn-border);
  position: sticky; top: 0; z-index: 1020;
}
.cn-header .cn-title { font-weight: 600; margin: 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-header .cn-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.cn-content { padding: 1.5rem; flex: 1 1 auto; }
@media (max-width: 767.98px) { .cn-content { padding: 1rem; } }

.cn-footer { padding: 1rem 1.5rem; color: var(--cn-muted); font-size: .85rem; border-top: 1px solid var(--cn-border); }
.cn-footer a { color: var(--cn-muted); }

.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.inline-form { display: inline; margin: 0; }

/* ── Portal ────────────────────────────────────────────────────────────────── */
.cn-hero {
  text-align: center; padding: 3.5rem 1rem 2.5rem;
  background: linear-gradient(180deg, var(--cn-surface) 0%, var(--cn-bg) 100%);
  border-bottom: 1px solid var(--cn-border);
}
.cn-hero img { height: 88px; width: auto; margin-bottom: 1rem; }
.cn-hero .lead { color: var(--cn-muted); }
.cn-search { max-width: 420px; margin: 0 auto; }

.cn-card-cover { height: 170px; overflow: hidden; background: rgba(var(--cn-primary-rgb), .08); }
.cn-card-cover img { width: 100%; height: 100%; object-fit: cover; }

.cn-portal-bar { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; }

/* ── Hata sayfaları ────────────────────────────────────────────────────────── */
.cn-error { max-width: 520px; margin: 4rem auto; text-align: center; }
.cn-error .code { font-size: 4rem; font-weight: 700; color: var(--cn-primary); line-height: 1; }
.cn-trace { font-family: var(--bs-font-monospace); font-size: .8rem; color: var(--cn-muted); }

/* ── Zengin metin (Quill çıktısı) ──────────────────────────────────────────── */
.rich-text img { max-width: 100%; height: auto; }
.rich-text .ql-align-center { text-align: center; }
.rich-text .ql-align-right { text-align: right; }
.rich-text .ql-align-justify { text-align: justify; }
.rich-text .ql-indent-1 { padding-left: 3em; }
.rich-text .ql-indent-2 { padding-left: 6em; }
.rich-text .ql-size-small { font-size: .75em; }
.rich-text .ql-size-large { font-size: 1.5em; }
.rich-text .ql-size-huge { font-size: 2.5em; }
.rich-text blockquote { border-left: 4px solid var(--cn-border); padding-left: 1rem; color: var(--cn-muted); }
.rich-text pre { background: var(--cn-chrome); padding: .75rem; border-radius: .375rem; }

/* ── htmx ──────────────────────────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.htmx-request.cn-dim { opacity: .55; transition: opacity .2s; }

/* ── Yardımcılar ───────────────────────────────────────────────────────────── */
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.text-pre-wrap { white-space: pre-wrap; }
.w-fit { width: fit-content; }
.mw-420 { max-width: 420px; }
.mw-460 { max-width: 460px; }
.mw-720 { max-width: 720px; }
.mw-960 { max-width: 960px; }