/* ══════════════════════════════════════════════════════════════
   TEMA v2 — Aşama 1: Design Tokens
   --------------------------------------------------------------
   Bu dosya style.css'ten sonra yüklenir ve :root değişkenlerini
   override eder. Mevcut CSS var(--kirmizi), var(--sinir) vb.
   kullandığı için değişiklikler otomatik tüm uygulamaya yansır.

   İşlev değişikliği YOK. Sadece görsel ton güncelleme.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Mevcut değişkenler override ─────────────────────── */
    /* Kırmızı paleti: canlı TBMM kırmızı → resmi belge bordosu */
    --kirmizi: #8B1A1A;
    --kirmizi-koyu: #6E1414;
    --kirmizi-acik: #FCF4F4;

    /* Sidebar — Aşama 3: Koyu panel teması */
    --sidebar: #1F1E1C;
    --sidebar-hover: #272522;
    --sidebar-aktif: rgba(139, 26, 26, 0.24);

    /* Zemin ve sınırlar — sıcak bej tonları */
    --arkaplan: #F7F5F2;
    --sinir: #E6E1DA;

    /* Metin renkleri — sıcak gri */
    --metin: #1B1A18;
    --metin2: #55514A;
    --metin3: #8A8479;

    /* Durum renkleri — koyu, resmi tonlar */
    --basari: #2F6B3A;
    --basari-koyu: #26582F;
    --bilgi: #2B4B7A;
    --bilgi-koyu: #1F3858;
    --uyari: #8A5A1A;
    --uyari-koyu: #6B4313;

    /* ── Yeni eklenen tokenlar (Aşama 2+ kullanacak) ─────── */
    --kirmizi-cizgi: #EADBDB;
    --zemin: #F7F5F2;
    --zemin-2: #EFECE7;
    --cizgi: #E6E1DA;
    --cizgi-koyu: #D6D0C6;
    --metin-2: #55514A;
    --metin-3: #8A8479;
    --metin-4: #B4AE9F;

    /* Koyu panel teması (Aşama 3 — sidebar) */
    --panel: #1F1E1C;
    --panel-2: #272522;
    --panel-cizgi: #34322E;
    --panel-metin: #CFC8B9;
    --panel-metin-2: #8F8879;

    /* Font aileleri (Aşama 2'de başlıklarda kullanılacak) */
    --font-sans: var(--font);
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-baslik: var(--font-serif);

    /* Köşe yuvarlaklıkları */
    --r-xs: 3px;
    --r-sm: 5px;
    --r-md: 7px;
    --r-lg: 10px;
}

/* ══════════════════════════════════════════════════════════════
   Aşama 2 — Butonlar: ince köşe + letter-spacing + subtle hover
   ══════════════════════════════════════════════════════════════ */
.btn {
    border-radius: var(--r-sm);
    letter-spacing: 0.01em;
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
}
.btn:active {
    transform: translateY(1px);
}
.btn-kucuk {
    border-radius: var(--r-xs);
}
.btn-birlesim-yeni {
    border-radius: var(--r-sm);
    letter-spacing: 0.01em;
}
.btn-birlesim-yeni:hover {
    background: var(--kirmizi-koyu);
}
.btn-geri {
    border-radius: var(--r-sm);
    transition: background 0.15s, border-color 0.15s;
}

/* ══════════════════════════════════════════════════════════════
   Aşama 2 — Form elemanları: focus ring + radius + placeholder
   ══════════════════════════════════════════════════════════════ */
.form-textarea,
.form-select,
.form-input,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
textarea {
    border-radius: var(--r-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-textarea:focus,
.form-select:focus,
.form-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: var(--kirmizi);
    box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.08);
    outline: none;
}

.form-textarea::placeholder,
.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--metin-4);
}

/* ══════════════════════════════════════════════════════════════
   Aşama 2 — Modal: yumuşak gölge + radius + backdrop blur
   ══════════════════════════════════════════════════════════════ */
.modal,
.modal-kaplama {
    background: rgba(27, 26, 24, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal-icerik {
    border-radius: var(--r-lg);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   Aşama 2 — Başlık fontları: serif dokunuş
   (resmi belge havası — modal + sayfa başlıkları)
   ══════════════════════════════════════════════════════════════ */
.modal-baslik-ic h2,
.sablon-baslik-ic h2,
#brl-detay-baslik,
.form-baslik-beyaz {
    font-family: var(--font-baslik);
    letter-spacing: 0.01em;
}

/* Kart kartlarında kırmızı başlıklar — fontu korur ama hafif genişleme ekleyelim */
.go-birlesim-no,
.kt-liste-ss,
.vy-kart-baslik {
    font-family: var(--font-baslik);
}

/* ══════════════════════════════════════════════════════════════
   Aşama 3 — Koyu Sidebar Teması
   (Değişkenler :root'ta override edildi; hardcoded renkleri de
    bu bölümde düzeltiyoruz — logo/saat/tarih/başlık/buton renkleri)
   ══════════════════════════════════════════════════════════════ */

/* Logo alanı */
.logo-baslik,
.logo-alt {
    color: #F0EAD9;
}

/* Sidebar logo ikonu — koyu zeminde emoji görünürlüğü + boyut */
.logo-ikon {
    font-size: 36px;
    filter: drop-shadow(0 0 6px rgba(240, 234, 217, 0.35));
}

/* Sidebar GKYS başlığı — daha belirgin ve büyük */
.logo-baslik {
    font-size: 22px;
    letter-spacing: 2px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
}

/* Saat + tarih */
#saat { color: #F0EAD9; }
#tarih { color: var(--panel-metin-2); }

/* Ayırıcı çizgiler */
.sidebar-ayirici {
    background: var(--panel-cizgi);
}

/* Kategori başlıkları — mono + uppercase (çok daha zarif) */
.sidebar-baslik {
    color: var(--panel-metin-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 9.5px;
}

/* Buton metin rengi — sıcak bej */
.sidebar-btn {
    color: var(--panel-metin);
}

.sidebar-btn:hover {
    background: var(--panel-2);
    color: #F0EAD9;
}

/* Aktif buton — hafif kırmızı overlay + kırmızı vurgu barı */
.sidebar-btn.aktif {
    background: rgba(139, 26, 26, 0.28);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--kirmizi);
}

/* Kullanıcı bloğu (alt kısım) */
.sidebar-kullanici {
    border-top: 1px solid var(--panel-cizgi);
    background: var(--panel-2);
}

.sidebar-kullanici-bilgi {
    color: var(--panel-metin);
}

.sidebar-cikis-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--panel-metin-2);
}

.sidebar-cikis-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #F0EAD9;
}

/* ══════════════════════════════════════════════════════════════
   Aşama 4 — Kartlar ve Rozet Pattern'i
   ══════════════════════════════════════════════════════════════ */

/* Birleşim kartları — hover lift efekti */
.go-birlesim-kart {
    border-radius: var(--r-md);
    transition: border-color 0.15s, background 0.15s, transform 0.08s, box-shadow 0.15s;
}
.go-birlesim-kart:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(27, 26, 24, 0.05);
    background: var(--kirmizi-acik);
}
.go-birlesim-no {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.go-birlesim-tarih {
    color: var(--metin-2);
    font-size: 13px;
}

/* KT liste kartları — aynı hover pattern */
.kt-liste-kart {
    border-radius: var(--r-md);
    transition: border-color 0.15s, background 0.15s, transform 0.08s, box-shadow 0.15s;
}
.kt-liste-kart:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(27, 26, 24, 0.05);
}

/* KT "S.S. N" rozeti — kırmızı arka plan + mono + uppercase */
.kt-liste-ss {
    display: inline-block;
    background: var(--kirmizi);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--r-xs);
    font-size: 11.5px;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    min-width: 0;
    align-self: center;
    margin-right: 10px;
}

/* KT bilgi metni — mono, koyu gri */
.kt-liste-bilgi {
    font-family: var(--font-mono);
    color: var(--metin-3);
    letter-spacing: 0.02em;
    font-size: 11.5px;
}

/* Veri Yönetimi kartları — hover lift (zaten çekici, inceltelim) */
.vy-kart {
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.vy-kart:active {
    transform: translateY(1px);
}

/* ══════════════════════════════════════════════════════════════
   Aşama 5 — KT Detay Ekranı
   ══════════════════════════════════════════════════════════════ */

/* Usul rozeti — nötr çerçeveli mono */
.kt-usul-etiket {
    background: var(--kart);
    color: var(--metin-2);
    border: 1px solid var(--cizgi);
    padding: 3px 10px;
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Usul bar — hafif zemin */
.kt-usul-bar {
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
}

/* KT detay başlık bloğu — sol: SS rozeti + usul rozeti üst üste; altında kanun başlığı (serif, büyük, geniş) */
.kt-detay-ic {
    align-items: flex-start;
    gap: 18px;
}
.kt-detay-sol {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kt-detay-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
}
/* SS rozeti — kırmızı arka, mono; boyut başlıkla aynı (16px) */
#kt-baslik.kt-ss-rozet {
    display: inline-block;
    background: var(--kirmizi);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--r-xs);
    font-size: 16px;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 0;
    line-height: 1.2;
}
/* KT detay meta satırındaki usul etiketi — boyut başlıkla aynı (16px) */
.kt-detay-meta #kt-usul-etiket {
    font-size: 16px;
    padding: 3px 10px;
    line-height: 1.2;
    letter-spacing: 0.04em;
}
/* Kanun teklifi başlığı — serif, büyük, geniş alan (max-width yok)
   h2 element selector + class ile specificity'yi .sablon-baslik-ic h2 üzerine çıkar */
h2.kt-detay-baslik,
.sablon-baslik-ic h2.kt-detay-baslik {
    font-family: var(--font-baslik);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--metin);
    letter-spacing: -0.005em;
    margin: 0;
    max-width: none;
    word-break: break-word;
}
.kt-detay-butonlar {
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* "+ Madde Ekle" barı — meta/başlık taşındığı için yalnız kalabilir */
.kt-madde-islem-bar {
    display: flex;
    justify-content: flex-end;
}

/* Bölüm kartları — yumuşak radius + hover */
.kt-bolum {
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.15s;
}

.kt-bolum-baslik {
    background: var(--zemin);
    transition: background 0.12s;
    border-bottom: 1px solid transparent;
}
.kt-bolum-baslik:hover {
    background: var(--zemin-2);
}
/* Bölüm açıkken alt kenar ayırıcı */
.kt-bolum .kt-bolum-icerik:not(.kapali) {
    border-top: 1px solid var(--cizgi);
}

/* Bölüm başlık metni — serif dokunuş */
.kt-bolum-baslik-metin {
    font-family: var(--font-baslik);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════════════
   Aşama 6 — El Gündemi Önizleme Paneli (Word'e eş tipografi)
   --------------------------------------------------------------
   Önizlemeyi A4 kağıt simülasyonuna çeviriyoruz. Satır objeleri
   (title/center/dots/empty/bold/boldPrefix/not) _egOnzYazParagraf
   ile class'lara dönüştürülüyor. Word export'taki paragraf
   özellikleri (CENTER/JUSTIFY + first_line_indent 28.35pt +
   line_spacing 1.5 + Times New Roman 20pt) bu CSS ile birebir
   eşleşir; ekranda 13px ölçek kullanılır (20pt × ~0.65 faktör).
   ══════════════════════════════════════════════════════════════ */

.eg-onizleme-bar {
    background: var(--zemin);
    border-radius: var(--r-md) var(--r-md) 0 0;
    border: 1px solid var(--cizgi);
    border-bottom: none;
}

.eg-onizleme-baslik {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--metin-3);
    font-weight: 500;
}

/* Kağıt — beyaz, gölge, A4-benzeri iç padding */
.eg-onizleme-icerik {
    background: #FFFFFF;
    border: 1px solid var(--cizgi);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: 28px 32px;
    font-family: 'Times New Roman', 'Times', Georgia, serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--metin);
    box-shadow: inset 0 1px 0 rgba(27, 26, 24, 0.02);
    min-height: 460px;
}
.eg-onizleme-icerik:focus {
    outline: none;
    border-color: var(--cizgi-koyu);
    box-shadow: inset 0 1px 0 rgba(27, 26, 24, 0.02);
}

/* Varsayılan paragraf — JUSTIFY + first_line_indent 28.35pt (~37.8px@96dpi) */
.eg-onizleme-icerik .eg-onizleme-satir {
    margin: 0 0 2px 0;
    text-align: justify;
    text-indent: 28px;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Title — CENTER + bold + indent YOK (başlıklar) */
.eg-onizleme-icerik .eg-onizleme-title {
    text-align: center;
    text-indent: 0;
    font-weight: 700;
    margin: 0 0 2px 0;
    letter-spacing: 0.02em;
}

/* CENTER + indent var (nadir — Word 'center' tipi) */
.eg-onizleme-icerik .eg-onizleme-orta {
    text-align: center;
    text-indent: 28px;
}

/* CENTER + indent YOK (Word 'center_clean') */
.eg-onizleme-icerik .eg-onizleme-center-clean {
    text-align: center;
    text-indent: 0;
}

/* Dots / alıntı satırı — JUSTIFY + left-indent 35pt (~46px) + indent YOK */
.eg-onizleme-icerik .eg-onizleme-dots {
    text-align: justify;
    text-indent: 0;
    margin-left: 46px;
}

/* Bold — tüm satır kalın */
.eg-onizleme-icerik .eg-onizleme-bold {
    font-weight: 700;
}

/* Not — italik + soluk gri (Word'de genelde center_clean + italik) */
.eg-onizleme-icerik .eg-onizleme-not {
    color: var(--metin-2);
    font-style: italic;
}

/* Boş satır — yalnızca dikey boşluk */
.eg-onizleme-icerik .eg-onizleme-empty {
    text-indent: 0;
    height: 0.9em;
    margin: 0;
}

/* boldPrefix <strong> — mevcut HTML'de <strong>, Times NR'de bold olur */
.eg-onizleme-icerik strong {
    font-weight: 700;
}

/* Komisyonlar akışı doğrudan <p> HTML yazıyor — ona da minimum uygulayalım */
.eg-onizleme-icerik p {
    margin: 0 0 2px 0;
    text-align: justify;
    text-indent: 28px;
}
.eg-onizleme-icerik p b,
.eg-onizleme-icerik p strong {
    font-weight: 700;
}