/* ==========================================================================
   Kağıt Üreticileri — Tasarım Tokenları ("Mor-Mavi" / kullanıcı dostu yön)
   Soğuk endüstriyel blueprint kimliğinden, daha sıcak ve davetkar bir
   mor-mavi (indigo) kimliğine geçiş; footer artık göz yormayan orta tonlu.
   ========================================================================== */
:root {
    --color-bg: #F1EFFB; /* yumuşak lavanta-mavi arkaplan */
    --color-surface: #FFFFFF;
    --color-ink: #2B2640; /* mora çalan koyu antrasit metin */
    --color-muted: #6E6790; /* mora çalan ikincil metin */
    --color-border: #DDD8F0;
    --color-primary: #4B3F9E; /* mor-mavi arası (indigo) - nav / başlıklar */
    --color-primary-dark: #372F73;
    --color-primary-contrast: #F1EFFB;
    --color-ink-panel: #3D3480; /* footer / üst bilgi çubuğu - eskisinden çok daha canlı ve açık */

    --color-accent: #C1793A; /* sıcak bakır sinyal - tek vurgu rengi (CTA/link) */
    --color-accent-dark: #9C5F28;
    --font-display: "Poppins", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --font-utility: "Inter", "Segoe UI", Arial, sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-card: 0 1px 3px rgba(75, 63, 158, 0.08);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* İçerik kısa olduğunda bile footer'ı ekranın en altına sabitler (sticky footer),
   böylece footer'ın altında sayfa arkaplanının görünmesini engeller. */
.page-content {
    flex: 1 0 auto;
}

h1, h2, h3, h4, .site-header__brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-primary);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

    a:hover {
        color: var(--color-accent-dark);
    }

    /* Erişilebilirlik: klavye odak halkası her zaman görünür */
    a:focus-visible, button:focus-visible, .nav-link:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: 2px;
    }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-accent);
    color: #fff;
    padding: 10px 16px;
    z-index: 2000;
}

    .skip-link:focus {
        left: 8px;
        top: 8px;
    }

/* ================= Üst bilgi çubuğu ================= */
.utility-bar {
    background: var(--color-ink-panel);
    color: var(--color-primary-contrast);
    font-family: var(--font-utility);
    font-size: 12px;
    border-bottom: 2px solid var(--color-accent);
}

.utility-bar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    gap: 12px;
    flex-wrap: wrap;
}

.utility-bar__contact a {
    color: var(--color-primary-contrast);
    opacity: 0.85;
}

.utility-bar__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.utility-bar__link {
    color: var(--color-primary-contrast);
    opacity: 0.9;
}

.utility-bar__link--accent {
    color: var(--color-accent);
    font-weight: 600;
}

.utility-bar__hello {
    opacity: 0.85;
}

.logout-form {
    display: inline-flex;
    margin: 0;
}

.utility-bar__link--button {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-utility);
    font-size: 12px;
    cursor: pointer;
}

.lang-switch form {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lang-switch__btn {
    background: none;
    border: none;
    color: var(--color-primary-contrast);
    opacity: 0.6;
    font-family: var(--font-utility);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
}

    .lang-switch__btn.is-active {
        opacity: 1;
        color: var(--color-accent);
        font-weight: 600;
    }

.lang-switch__sep {
    opacity: 0.4;
}

/* ================= Ana navigasyon ================= */
.site-header {
    background: var(--color-primary);
    padding: 6px 0;
}

.site-header__nav {
    padding: 6px 0;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-primary-contrast) !important;
}

.site-header__brand-logo {
    background: #fff;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

    .site-header__brand-logo img {
        height: 100%;
        width: auto;
        display: block;
    }

.site-header__brand-name {
    color: var(--color-primary-contrast);
    font-size: 20px;
    letter-spacing: 0.03em;
}

.main-nav .nav-link {
    color: rgba(241, 239, 251, 0.85) !important;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 500;
    padding: 10px 14px !important;
    border-bottom: 2px solid transparent;
}

    .main-nav .nav-link:hover,
    .main-nav .nav-item.dropdown:hover .nav-link {
        color: #fff !important;
        border-bottom-color: var(--color-accent);
    }

.nav-link--cta {
    background: var(--color-accent);
    color: #fff !important;
    border-radius: var(--radius-sm);
    border-bottom-color: transparent !important;
}

    .nav-link--cta:hover {
        background: var(--color-accent-dark);
        border-bottom-color: transparent !important;
    }

.dropdown-menu {
    border: none;
    border-top: 3px solid var(--color-accent);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 6px 18px rgba(75, 63, 158, 0.14);
}

.dropdown-item:active {
    background: var(--color-primary);
}

.navbar-toggler {
    border-color: rgba(241,239,251,0.4);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(241,239,251,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================= İmza öğesi: hassas ölçüm cetveli =================
   Kağıt üretiminde gramaj/kalınlık (kaliper) hassas ölçümüne gönderme yapan,
   kısa/uzun tik işaretlerinden oluşan bir cetvel/blueprint çizgisi. */
.ruler-divider {
    height: 20px;
    width: 100%;
    background-color: var(--color-bg);
    background-image: repeating-linear-gradient(to right, var(--color-accent) 0 1px, transparent 1px 8px), repeating-linear-gradient(to right, var(--color-primary) 0 2px, transparent 2px 40px);
    background-position: bottom left, bottom left;
    background-repeat: repeat-x, repeat-x;
    background-size: 8px 8px, 40px 16px;
}

/* ================= İçerik alanı ================= */
.page-content {
    padding: 40px 0 56px;
}

.page-content--no-title-band {
    padding-top: 48px;
}

.content-col--centered {
    display: flex;
    justify-content: center;
}

.content-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--color-primary);
    padding: 28px clamp(18px, 4vw, 34px);
    box-shadow: var(--shadow-card);
}

.legal-doc h2 {
    font-size: 1.3rem;
    margin-bottom: 18px;
}

.legal-doc h3 {
    font-size: 1.05rem;
    margin-top: 24px;
    margin-bottom: 8px;
}

.legal-doc h4 {
    font-size: 0.95rem;
    text-transform: none;
    color: var(--color-ink);
    margin-top: 16px;
    margin-bottom: 6px;
}

.legal-doc p, .legal-doc li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-ink);
}

.legal-doc ul {
    padding-left: 22px;
    margin-bottom: 14px;
}

.legal-doc li {
    margin-bottom: 8px;
}

.legal-lang-note {
    background: #FBF6E9;
    border: 1px solid #E9DFB8;
    border-left: 3px solid var(--color-accent);
    color: #6B5A1E;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 18px;
}

.widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 18px;
}

.widget__title {
    font-family: var(--font-utility);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* ================= Footer (tek satır, kompakt) ================= */
.site-footer {
    background: var(--color-ink-panel);
    color: rgba(241, 239, 251, 0.85);
    padding: 12px 0 0;
}

    .site-footer a {
        color: rgba(241, 239, 251, 0.85);
    }

        .site-footer a:hover {
            color: var(--color-accent);
        }

.site-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-bottom: 10px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.site-footer__brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.site-footer__tagline {
    font-size: 11.5px;
    color: rgba(241,239,251,0.6);
    line-height: 1.2;
}

.site-footer__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
}

.social-list {
    list-style: none;
    display: flex;
    gap: 12px;
    padding: 0;
    margin: 0;
}

    .social-list a {
        font-size: 14px;
    }

.sub-footer {
    border-top: 1px solid rgba(241,239,251,0.12);
}

.sub-footer__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 16px;
    padding: 8px 0 10px;
    font-size: 11.5px;
    color: rgba(241,239,251,0.6);
}

.sub-footer__credit {
    color: rgba(241,239,251,0.45);
}

/* ================= Giriş / Kayıt Ol formları ================= */
.auth-card {
    max-width: 560px;
    border-top: none;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    padding-top: 34px;
}
    /* Canlı bir vurgu için üstte kobalt-bakır geçişli bir şerit */
    .auth-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
    }

    .auth-card h2 {
        margin-bottom: 22px;
    }

.auth-form .form-group {
    margin-bottom: 18px;
}

.auth-form label,
.consent-list label.form-check {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.form-control {
    width: 100%;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font-family: var(--font-body);
    font-size: 15.5px;
    background: var(--color-surface);
    color: var(--color-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .form-control:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 4px rgba(193, 121, 58, 0.15);
    }

/* "Beni Hatırla" + "Şifremi Unuttum" satırı: sabit bir satır yüksekliği kullanılarak
   checkbox ve her iki metin, font metriklerinden bağımsız olarak birebir hizalanır. */
.form-check-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    height: 24px;
    margin: 6px 0 22px;
}

.form-check {
    display: flex !important;
    align-items: center;
    gap: 9px;
    height: 24px;
    margin: 0 !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: var(--color-ink) !important;
    letter-spacing: normal !important;
    cursor: pointer;
}

.form-check-input {
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.form-check-row .form-check span,
.form-check-row .auth-link {
    line-height: 24px;
    font-size: 14.5px;
}

.auth-link {
    font-size: 13.5px;
    font-weight: 600;
}

.consent-list {
    margin: 4px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .consent-list .form-check {
        align-items: flex-start;
        height: auto;
    }

    .consent-list .form-check-input {
        margin-top: 3px;
        width: 16px;
        height: 16px;
    }

    .consent-list .form-check a {
        color: var(--color-primary);
        font-weight: 600;
    }

    .consent-list .text-danger.d-block {
        font-size: 12.5px;
        margin: -6px 0 2px 25px;
        display: block;
    }

.btn-primary-solid {
    display: inline-block;
    width: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 13px 16px;
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 2px 8px rgba(75, 63, 158, 0.3);
}

    .btn-primary-solid:hover {
        background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 100%);
        box-shadow: 0 4px 14px rgba(75, 63, 158, 0.35);
        transform: translateY(-1px);
    }

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-muted);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 22px 0;
}

    .auth-divider::before, .auth-divider::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid var(--color-border);
    }

    .auth-divider span {
        padding: 0 12px;
    }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #fff;
    color: var(--color-ink);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 11px 16px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

    .btn-google:hover {
        border-color: var(--color-accent);
        box-shadow: 0 2px 10px rgba(75, 63, 158, 0.1);
    }

    .btn-google img {
        width: 19px;
        height: 19px;
    }

.auth-footer-text {
    margin-top: 20px;
    font-size: 14.5px;
    color: var(--color-muted);
}

    .auth-footer-text a {
        font-weight: 600;
    }

.alert-success-box {
    background: #EAF3EA;
    border: 1px solid #BFDAC0;
    border-left: 3px solid var(--color-primary);
    color: #1F4A22;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-error-box {
    background: #FBEAEA;
    border: 1px solid #E9C3C3;
    border-left: 3px solid #B02A2A;
    color: #7A1F1F;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-info-box {
    background: #EAF0FB;
    border: 1px solid #C3D3E9;
    border-left: 3px solid var(--color-primary);
    color: #1F3A5F;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.text-danger {
    color: #B02A2A;
    font-size: 13px;
}

/* ================= Makale listeleme / detay ================= */
.makale-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.makale-filter-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .makale-filter-form .form-control {
        width: auto;
        min-width: 150px;
    }

.makale-filter-form__btn {
    width: auto;
    padding: 9px 18px;
}

.makale-list {
    display: flex;
    flex-direction: column;
}

.makale-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}

    .makale-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.makale-item__content {
    flex: 1;
    min-width: 0;
}

.makale-item__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12.5px;
    color: var(--color-muted);
    margin-bottom: 6px;
}

.makale-item__kategori {
    color: var(--color-accent-dark);
    font-weight: 600;
}

.makale-item h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

    .makale-item h3 a {
        color: var(--color-primary);
    }

        .makale-item h3 a:hover {
            color: var(--color-accent-dark);
        }

.makale-item p {
    color: var(--color-ink);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 10px;
}

.makale-item__footer {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: var(--color-muted);
}

.makale-pagination {
    display: flex;
    gap: 6px;
    margin-top: 26px;
    flex-wrap: wrap;
}

    .makale-pagination a {
        padding: 6px 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        color: var(--color-primary);
        font-size: 13.5px;
    }

        .makale-pagination a.is-active {
            background: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
        }

        .makale-pagination a:hover {
            border-color: var(--color-accent);
        }

.makale-detay__meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-muted);
    margin-bottom: 10px;
}

.makale-detay__icerik {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--color-ink);
    margin: 20px 0;
}

    .makale-detay__icerik img {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        /* TinyMCE bazen görsele float/inline hizalama uygulayabiliyor; makale metninde
           görselin üstteki ve alttaki paragraflarla çakışmaması için burada zorla
           bloklaştırıp kendi satırına alıyoruz. Üst boşluk, alt boşluktan büyük tutuldu
           ki metinle (aynı paragrafta olsa bile) arada belirgin bir "satır" boşluğu olsun. */
        display: block !important;
        float: none !important;
        margin: 32px auto 16px !important;
    }

.makale-detay__etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 18px;
}

.etiket-badge {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
}

.makale-detay__footer {
    display: flex;
    gap: 22px;
    font-size: 14px;
    color: var(--color-muted);
    margin: 8px 0 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

/* Sidebar: Popüler Makaleler widget'ı */
.populer-makale-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .populer-makale-list li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
    }

    .populer-makale-list a {
        font-size: 14px;
        line-height: 1.4;
    }

.populer-makale-list__gorunum {
    font-size: 12px;
    color: var(--color-muted);
    white-space: nowrap;
}

/* ================= Hareket azaltma tercihi ================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================= Mobil / tablet uyarlamaları ================= */
@media (max-width: 991.98px) {
    .main-nav {
        background: var(--color-primary-dark);
        padding: 8px 4px;
        border-radius: var(--radius-sm);
        margin-top: 10px;
    }

        .main-nav .nav-link {
            border-bottom: none;
            border-left: 2px solid transparent;
        }

            .main-nav .nav-link:hover {
                border-left-color: var(--color-accent);
                border-bottom-color: transparent;
            }

    .dropdown-menu {
        background: var(--color-primary-dark);
    }

    .dropdown-item, .dropdown-item:hover {
        color: rgba(241,239,251,0.9);
        background: transparent;
    }
}

@media (max-width: 575.98px) {
    .utility-bar__inner {
        justify-content: center;
        text-align: center;
    }

    .site-footer__row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Makale Ekle / Düzenle Formu + Yazar/Admin Panelleri
   ========================================================================== */
.makale-form .form-group {
    margin-bottom: 18px;
}

.makale-form__kapak-onizleme {
    max-width: 240px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-bottom: 10px;
    display: block;
}

.makale-form__etiket-listesi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    max-height: 180px;
    overflow-y: auto;
}

.makale-form__etiket-listesi .form-check {
    margin-bottom: 0;
}

.makale-form__ingilizce-bolum {
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 20px 4px;
    margin: 8px 0 20px;
    background: var(--color-bg);
}

.makale-form__ingilizce-baslik {
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--color-primary);
}

.makale-form__ingilizce-aciklama {
    font-size: 13.5px;
    margin: 0 0 16px;
}

.makale-form__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}

.btn-solid-sm {
    display: inline-block;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 22px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

    .btn-solid-sm:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(75, 63, 158, 0.3);
    }

.btn-outline-sm {
    display: inline-block;
    background: transparent;
    color: var(--color-ink);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 20px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.12s ease;
}

    .btn-outline-sm:hover {
        color: var(--color-ink);
        border-color: var(--color-accent);
    }

.btn-danger-sm {
    display: inline-block;
    background: #fff;
    color: #B02A2A;
    border: 1.5px solid #E9C3C3;
    border-radius: var(--radius-md);
    padding: 9px 18px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-danger-sm:hover {
        background: #FBEAEA;
    }

.panel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

    .panel-table th, .panel-table td {
        padding: 12px 10px;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        font-size: 14.5px;
        vertical-align: middle;
    }

    .panel-table th {
        color: var(--color-muted);
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .panel-table__thumb {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: var(--color-bg);
    }

    .panel-table__actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

.badge-onay {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.badge-onay--yayinda {
    background: #EAF3EA;
    color: #1F4A22;
}

.badge-onay--bekliyor {
    background: #FDF3E3;
    color: #8A5A0B;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.panel-nav-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.panel-empty {
    color: var(--color-muted);
    padding: 20px 0;
}

/* ==========================================================================
   Makale listesi / detayı — kapak görseli ve yönetim butonları
   ========================================================================== */
.makale-item__kapak-link {
    display: block;
    flex-shrink: 0;
}

.makale-item__kapak {
    display: block;
    width: 160px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

@media (max-width: 576px) {
    .makale-item {
        flex-direction: column;
    }

    .makale-item__kapak {
        width: 100%;
        height: 160px;
    }
}

.makale-item__duzenle {
    margin-left: auto;
    font-weight: 600;
    color: var(--color-primary);
}

.makale-detay__header {
    display: flex;
    gap: 22px;
    align-items: center;
    margin: 14px 0 20px;
}

/* ==========================================================
   SON ÇARE DÜZELTME - MAKALE DETAY GÖRSELİ
   ========================================================== */
.makale-detay__kapak {
    width: 220px !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

.makale-detay__header h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
}

@media (max-width: 576px) {
    .makale-detay__header {
        flex-direction: column;
        align-items: stretch;
    }

    .makale-detay__kapak {
        width: 100%;
        height: 200px;
    }
}

.makale-detay__yonetim-actions {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

/* ==========================================================================
   Site Haritası
   ========================================================================== */
.site-haritasi__gruplar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px;
    margin-top: 20px;
}

.site-haritasi__grup h3 {
    font-size: 16px;
    color: var(--color-primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.site-haritasi__grup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-haritasi__grup li {
    margin-bottom: 8px;
    font-size: 14.5px;
}

/* ==========================================================================
   Raporlar etiketi alanı (Admin) ve Sektör Raporları listesi
   ========================================================================== */
.makale-form__raporlar-alani {
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    background: var(--color-bg);
}

.rapor-listesi {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.rapor-listesi li {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .rapor-listesi li:last-child {
        border-bottom: none;
    }

.rapor-listesi a {
    font-weight: 600;
    font-size: 15.5px;
}

.rapor-listesi__tarih {
    display: block;
    font-size: 13px;
    color: var(--color-muted);
    margin-top: 2px;
}

/* ==========================================================================
   Eğitim videosu gömülü oynatıcı (16:9 duyarlı)
   ========================================================================== */
.video-oynatici-sarmalayici {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 oran */
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
}

    .video-oynatici-sarmalayici iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
/* ==========================================================
   ÜST BİLGİ ÇUBUĞU - ZİYARETÇİ SAYACI RENK AYARI
   ========================================================== */
.utility-bar .ziyaretci-sayaci {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(241, 239, 251, 0.85); /* Menüdeki diğer metinlerle uyumlu, hafif şeffaf beyaz */
    font-size: 13px;
    font-weight: 400;
}

    /* Sayı kısmı biraz daha vurgulu olsun */
    .utility-bar .ziyaretci-sayaci strong {
        color: #FFFFFF;
        font-weight: 600;
    }

/* Küçük ekranlarda (telefon) sayacın ezilmemesi için */
@media (max-width: 768px) {
    .utility-bar .ziyaretci-sayaci {
        font-size: 11px;
    }
}