/* =====================================================================
   TÜRKİYE MAARİF ARŞİVİ — ORTAK TASARIM DİLİ  (Görsellik Adım 1 · 12.11.2026)

   Bütün sayfalarda ortak: renkler, yazı tipleri, düğmeler, formlar,
   tablolar, kartlar, uyarılar, pencereler, menü ve üst çubuk.
   Sayfaların kendi özel stilleri bunun ÜZERİNE çalışmaya devam eder.

   Renk ya da yazı tipi değiştirmek için sadece aşağıdaki :root
   bölümündeki değerleri değiştirmek yeterlidir.
   ===================================================================== */

/* ---------- 1) YAZI TİPLERİ (sitenin kendi sunucusundan; dış bağlantı yok) ---------- */
@font-face {
    font-family: "Inter TMA";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Inter TMA";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif TMA";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Source Serif TMA";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2) RENKLER VE ÖLÇÜLER (tek yerden yönetilir) ---------- */
:root {
    /* Ana renkler */
    --tma-bordo:        #7f1d1d;   /* ana renk: düğme, bağlantı, vurgu */
    --tma-bordo-koyu:   #5f1414;
    --tma-bordo-acik:   #fbeaea;
    --tma-altin:        #b8964f;   /* ikinci renk: çizgi, ikon, odak */
    --tma-altin-acik:   #efe3c4;
    --tma-murekkep:     #2b2118;   /* yazı */
    --tma-murekkep-2:   #5b4a3a;   /* ikincil yazı */
    --tma-soluk:        #8a7a68;   /* açıklama yazısı */
    --tma-kagit:        #fbf8f2;   /* kart zemini */
    --tma-kagit-2:      #f4efe4;   /* sayfa zemini */
    --tma-cizgi:        #e4d9c4;   /* kenarlık */
    --tma-yesil:        #2f6f4f;
    --tma-mavi:         #2b5a84;
    --tma-turuncu:      #b45309;

    /* Yazı tipleri */
    --tma-font:   "Inter TMA", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --tma-serif:  "Source Serif TMA", Georgia, "Times New Roman", serif;

    /* Ölçüler */
    --tma-radius:    12px;
    --tma-radius-sm: 8px;
    --tma-golge-1:   0 1px 2px rgba(43,33,24,.06), 0 2px 8px rgba(43,33,24,.06);
    --tma-golge-2:   0 4px 12px rgba(43,33,24,.08), 0 12px 32px rgba(43,33,24,.10);

    /* Bootstrap'in kendi değişkenleri (bütün site bunlara uyar) */
    --bs-body-font-family: var(--tma-font);
    --bs-body-font-size: .95rem;
    --bs-body-color: var(--tma-murekkep);
    --bs-body-bg: var(--tma-kagit-2);
    --bs-emphasis-color: var(--tma-murekkep);
    --bs-secondary-color: var(--tma-soluk);
    --bs-primary: var(--tma-bordo);
    --bs-primary-rgb: 127, 29, 29;
    --bs-link-color: var(--tma-bordo);
    --bs-link-color-rgb: 127, 29, 29;
    --bs-link-hover-color: var(--tma-bordo-koyu);
    --bs-link-hover-color-rgb: 95, 20, 20;
    --bs-border-color: var(--tma-cizgi);
    --bs-border-radius: .6rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .9rem;
    --bs-focus-ring-color: rgba(184, 150, 79, .35);
}

/* ---------- 3) GENEL ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--tma-font);
    color: var(--tma-murekkep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";   /* Inter: daha okunaklı rakam ve harfler */
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--tma-serif);
    font-weight: 600;
    letter-spacing: -.01em;
    /* Renk verilmez: başlık bulunduğu yerin rengini alır
       (koyu menüde açık, beyaz zeminde koyu). */
}
h4, h5, h6, .h4, .h5, .h6 { font-weight: 650; letter-spacing: -.005em; }

small, .small { color: inherit; }
.text-muted { color: var(--tma-soluk) !important; }

a { text-underline-offset: .18em; }

::selection { background: var(--tma-altin-acik); color: var(--tma-murekkep); }

/* Klavye ile gezinirken odak halkası (fare ile tıklamada görünmez) */
:focus-visible {
    outline: 3px solid rgba(184,150,79,.55);
    outline-offset: 2px;
    border-radius: 4px;
}

/* İnce kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: #cdbd9c transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d6c8aa; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #bfae88; background-clip: padding-box; border: 2px solid transparent; }

hr { border-color: var(--tma-cizgi); opacity: 1; }

/* ---------- 4) DÜĞMELER ---------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 10px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-focus-box-shadow: 0 0 0 .22rem rgba(184,150,79,.35);
    letter-spacing: .005em;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-border-radius: 8px; --bs-btn-padding-x: .7rem; }
.btn-lg { --bs-btn-border-radius: 12px; }

.btn-primary {
    --bs-btn-bg: var(--tma-bordo);
    --bs-btn-border-color: var(--tma-bordo);
    --bs-btn-hover-bg: var(--tma-bordo-koyu);
    --bs-btn-hover-border-color: var(--tma-bordo-koyu);
    --bs-btn-active-bg: var(--tma-bordo-koyu);
    --bs-btn-active-border-color: var(--tma-bordo-koyu);
    --bs-btn-disabled-bg: #b58080;
    --bs-btn-disabled-border-color: #b58080;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(127,29,29,.22);
}
.btn-outline-primary {
    --bs-btn-color: var(--tma-bordo);
    --bs-btn-border-color: rgba(127,29,29,.45);
    --bs-btn-hover-bg: var(--tma-bordo);
    --bs-btn-hover-border-color: var(--tma-bordo);
    --bs-btn-active-bg: var(--tma-bordo-koyu);
    --bs-btn-active-border-color: var(--tma-bordo-koyu);
}
.btn-secondary {
    --bs-btn-bg: #6f6253;
    --bs-btn-border-color: #6f6253;
    --bs-btn-hover-bg: #5b4f42;
    --bs-btn-hover-border-color: #5b4f42;
}
.btn-outline-secondary {
    --bs-btn-color: var(--tma-murekkep-2);
    --bs-btn-border-color: #cdbfa5;
    --bs-btn-hover-bg: var(--tma-kagit-2);
    --bs-btn-hover-color: var(--tma-murekkep);
    --bs-btn-hover-border-color: #b9a888;
    --bs-btn-active-bg: #ebe2cf;
    --bs-btn-active-color: var(--tma-murekkep);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--tma-cizgi);
    --bs-btn-hover-bg: var(--tma-kagit);
    --bs-btn-hover-border-color: #d3c4a6;
}
.btn-success {
    --bs-btn-bg: var(--tma-yesil);
    --bs-btn-border-color: var(--tma-yesil);
    --bs-btn-hover-bg: #255a40;
    --bs-btn-hover-border-color: #255a40;
}
.btn-danger {
    --bs-btn-bg: #b42318;
    --bs-btn-border-color: #b42318;
    --bs-btn-hover-bg: #912018;
    --bs-btn-hover-border-color: #912018;
}
.btn-link { --bs-btn-color: var(--tma-bordo); --bs-btn-hover-color: var(--tma-bordo-koyu); }

/* ---------- 5) FORMLAR ---------- */
.form-label { font-size: .82rem; font-weight: 600; color: var(--tma-murekkep-2); margin-bottom: .3rem; }
.form-text { color: var(--tma-soluk); font-size: .78rem; }

.form-control, .form-select {
    border-radius: 10px;
    border-color: #d9ccb3;
    background-color: #fff;
    color: var(--tma-murekkep);
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: #a89a86; }
.form-control:hover, .form-select:hover { border-color: #c9b894; }
.form-control:focus, .form-select:focus {
    border-color: var(--tma-altin);
    box-shadow: 0 0 0 .22rem rgba(184,150,79,.22);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #f6f2ea; }

.form-check-input { border-color: #c4b496; }
.form-check-input:checked { background-color: var(--tma-bordo); border-color: var(--tma-bordo); }
.form-check-input:focus { border-color: var(--tma-altin); box-shadow: 0 0 0 .22rem rgba(184,150,79,.25); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b8964f'/%3e%3c/svg%3e"); }

.input-group-text { background: var(--tma-kagit-2); border-color: #d9ccb3; color: var(--tma-murekkep-2); }

.invalid-feedback, .text-danger.field-validation-error, span.field-validation-error { font-size: .8rem; }

/* ---------- 6) KARTLAR ---------- */
.card {
    --bs-card-border-color: var(--tma-cizgi);
    --bs-card-border-radius: var(--tma-radius);
    --bs-card-cap-bg: var(--tma-kagit);
    --bs-card-bg: #fff;
    box-shadow: var(--tma-golge-1);
}
.card-header { font-weight: 650; color: var(--tma-murekkep); border-bottom-color: var(--tma-cizgi); }
.card-footer { border-top-color: var(--tma-cizgi); }

/* ---------- 7) TABLOLAR ---------- */
.table {
    --bs-table-border-color: #ece3d1;
    --bs-table-striped-bg: rgba(244,239,228,.55);
    --bs-table-hover-bg: rgba(184,150,79,.10);
    --bs-table-color: var(--tma-murekkep);
    vertical-align: middle;
}
.table > thead th,
.table > thead td {
    background: #efe6d2;
    color: #4a3b2a;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #d9ccb3;
    white-space: nowrap;
}
.table-dark > thead th, .table > thead.table-dark th { background: #3a342c; color: #f5f1e8; }
.table-responsive { border-radius: var(--tma-radius-sm); }

/* ---------- 8) ROZETLER, UYARILAR, SAYFALAMA ---------- */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: .38em .7em; }

.alert {
    border-radius: var(--tma-radius);
    border-width: 1px;
    border-left-width: 4px;
}
.alert-info    { --bs-alert-bg: #eef5fb; --bs-alert-border-color: #bcd4ea; --bs-alert-color: #24476a; border-left-color: var(--tma-mavi); }
.alert-success { --bs-alert-bg: #edf6f0; --bs-alert-border-color: #bcdcc8; --bs-alert-color: #1f4f37; border-left-color: var(--tma-yesil); }
.alert-warning { --bs-alert-bg: #fff8e6; --bs-alert-border-color: #f1dfb0; --bs-alert-color: #6b4a00; border-left-color: #d4a017; }
.alert-danger  { --bs-alert-bg: #fdf0f0; --bs-alert-border-color: #efc4c4; --bs-alert-color: #6f1d1b; border-left-color: var(--tma-bordo); }

.pagination {
    --bs-pagination-color: var(--tma-murekkep-2);
    --bs-pagination-border-color: var(--tma-cizgi);
    --bs-pagination-hover-bg: var(--tma-kagit-2);
    --bs-pagination-hover-color: var(--tma-bordo);
    --bs-pagination-hover-border-color: var(--tma-cizgi);
    --bs-pagination-active-bg: var(--tma-bordo);
    --bs-pagination-active-border-color: var(--tma-bordo);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(184,150,79,.3);
}

.nav-tabs { --bs-nav-tabs-border-color: var(--tma-cizgi); --bs-nav-tabs-link-active-border-color: var(--tma-cizgi) var(--tma-cizgi) #fff; }
.nav-tabs .nav-link { color: var(--tma-murekkep-2); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--tma-bordo); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--tma-bordo); }

.progress { --bs-progress-bg: #efe6d2; --bs-progress-bar-bg: var(--tma-bordo); border-radius: 999px; }

/* ---------- 9) PENCERELER (modal), AÇILIR MENÜ, BİLGİ BALONU ---------- */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(30,20,10,.28);
}
.modal-header { background: var(--tma-kagit); border-bottom-color: var(--tma-cizgi); border-radius: 16px 16px 0 0; }
.modal-title { font-family: var(--tma-serif); font-weight: 600; }
.modal-footer { border-top-color: var(--tma-cizgi); }
.modal-backdrop.show { opacity: .45; }

.dropdown-menu {
    border-color: var(--tma-cizgi);
    border-radius: 12px;
    box-shadow: var(--tma-golge-2);
    padding: .35rem;
    --bs-dropdown-link-active-bg: var(--tma-bordo);
    --bs-dropdown-link-hover-bg: var(--tma-kagit-2);
}
.dropdown-item { border-radius: 8px; }

.tooltip { --bs-tooltip-bg: #2b2118; --bs-tooltip-border-radius: 8px; font-family: var(--tma-font); }

/* SweetAlert2 pencereleri */
.swal2-popup { font-family: var(--tma-font) !important; border-radius: 16px !important; }
.swal2-title { font-family: var(--tma-serif) !important; color: var(--tma-murekkep) !important; }
.swal2-styled.swal2-confirm { background-color: var(--tma-bordo) !important; border-radius: 10px !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; }

/* ---------- 10) ÜST ÇUBUK VE SOL MENÜ (yönetim paneli) ---------- */
.admin-topbar {
    background: rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--tma-cizgi) !important;
    box-shadow: 0 1px 0 rgba(184,150,79,.25), 0 4px 14px rgba(43,33,24,.05);
}

.sidebar a { font-size: .9rem; }
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 { color: #e6d8a8; }
.sidebar small, .sidebar .archive-subtitle { color: rgba(245,241,232,.7); }
/* Koyu menüde başlık bağlantıları (ör. "İl Temsilcisi Yönetim Paneli") açık renkte kalır */
.sidebar h1 a, .sidebar h2 a, .sidebar h3 a, .sidebar h4 a, .sidebar h5 a, .sidebar h6 a,
.sidebar .link-primary {
    color: #e6d8a8 !important;
    background: none !important;
    transform: none !important;
    padding: 0;
}
.sidebar h4 a:hover, .sidebar .link-primary:hover { color: #f3e6bd !important; }
.sidebar .nav-link.active {
    background: linear-gradient(90deg, #c8b075, #a48c50) !important;
    box-shadow: inset 3px 0 0 #f3e6bd, 0 2px 8px rgba(0,0,0,.25) !important;
}
.sidebar .nav-link:focus-visible { outline-color: #e6d8a8; }

.content { background: var(--tma-kagit-2); }

/* ---------- 11) HAZIR PARÇALAR (sonraki adımlarda sayfalarda kullanılacak) ---------- */

/* Sayfa başlığı:  <div class="tma-page-head"><h2>Başlık</h2><p>Açıklama</p></div> */
.tma-page-head { margin: 4px 0 22px; }
.tma-page-head h1, .tma-page-head h2 { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); }
.tma-page-head p { margin: 6px 0 0; color: var(--tma-soluk); max-width: 760px; }
.tma-page-head::after {
    content: ""; display: block; width: 64px; height: 3px; margin-top: 12px; border-radius: 3px;
    background: linear-gradient(90deg, var(--tma-bordo), var(--tma-altin));
}

/* Zemin kartı */
.tma-card {
    background: #fff;
    border: 1px solid var(--tma-cizgi);
    border-radius: var(--tma-radius);
    box-shadow: var(--tma-golge-1);
    padding: 20px;
}
.tma-card-kagit { background: var(--tma-kagit); }

/* Bölüm başlığı */
.tma-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tma-murekkep-2); margin: 0 0 12px;
}
.tma-section-title::after { content: ""; flex: 1; height: 1px; background: var(--tma-cizgi); }

/* Sayı kartı:  <div class="tma-stat"><b>1.234</b><span>Materyal</span></div> */
.tma-stat {
    background: #fff; border: 1px solid var(--tma-cizgi); border-radius: var(--tma-radius);
    padding: 14px 16px; box-shadow: var(--tma-golge-1);
}
.tma-stat b { display: block; font-family: var(--tma-serif); font-size: 1.7rem; font-weight: 700; color: var(--tma-bordo); line-height: 1.1; }
.tma-stat span { font-size: .78rem; color: var(--tma-soluk); font-weight: 600; letter-spacing: .02em; }

/* Etiket (chip) */
.tma-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: var(--tma-kagit-2); color: var(--tma-murekkep-2); border: 1px solid var(--tma-cizgi);
}
.tma-chip-bordo { background: var(--tma-bordo-acik); color: var(--tma-bordo); border-color: #f0caca; }
.tma-chip-altin { background: #fbf3df; color: #7a5b1e; border-color: #ecd9a8; }

/* Boş durum:  <div class="tma-empty"><div>📭</div><b>Kayıt yok</b><p>…</p></div> */
.tma-empty { text-align: center; padding: 36px 16px; color: var(--tma-soluk); }
.tma-empty > div { font-size: 2.4rem; margin-bottom: 6px; }
.tma-empty b { display: block; color: var(--tma-murekkep-2); font-size: 1rem; }

/* ---------- 12) HAREKETİ AZALTMA ve YAZDIRMA ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .sidebar, .admin-topbar, #sidebarOverlay, #scrollTopBtn, .no-print { display: none !important; }
    .content { padding: 0 !important; margin: 0 !important; background: #fff !important; }
    body { background: #fff !important; }
    .card, .tma-card, .tma-stat { box-shadow: none !important; }
}