/* ==========================================================================
   e-sinif.com — "Kareli Defter" tasarım sistemi
   --------------------------------------------------------------------------
   Zemin bir okul defteri; içerik o kâğıda yazılmış gibi durur. Tek cesur öğe
   geri sayım rakamıdır — öğretmen kırmızısıyla işaretli. Geri kalan her şey
   sessiz: gradyan yok, ağır kart gölgesi yok, her etikette ikon yok.

   --vurgu değişkeni sayfa içinde admin'in tema ayarından doldurulur; renk
   seçimi özelliği kaybolmasın diye.

   Üç bölüm:
     1. Belirteçler ve temel
     2. Bootstrap uyum katmanı  — mevcut ekranların işaretlemesi değişmeden
                                  defter diline çevrilir
     3. Kendi bileşenleri       — sıfırdan yazılan sayfalar için
   ========================================================================== */

/* ---------- 1. BELİRTEÇLER ---------- */
:root {
    --kagit:     #fcfcfa;
    --kart:      #ffffff;
    --kare:      #f0f3f7;   /* zemin fark edilsin ama öne çıkmasın */
    --murekkep:  #17324c;
    --grafit:    #64707e;
    --kirmizi:   #c62f27;
    --yesil:     #1f7a54;
    --cizgi:     #e4e9ef;
    --vurgu:     #5b6fd6;          /* sayfa içinde ezilir */
    --fosfor:    #ffe57a;          /* fosforlu kalem — az ve yerinde */
    --kirmizi-metin: #ffffff;      /* kırmızı üzerine yazı; koyuda tersine döner */
    --mavi-2:    #3f6f9e;          /* ikinci mürekkep tonu */
    --kare-adim: 19px;
    --yuvarlak:  8px;
}

[data-theme="dark"] {
    --kagit:    #1a1822;
    --kart:     #232130;
    --kare:     #2a2836;
    --murekkep: #e8edf2;
    --grafit:   #9aa7b4;
    --kirmizi:  #ff7469;
    --kirmizi-metin: #1a1822;      /* açık kırmızıda beyaz 2.2:1'de kalıyor */
    --yesil:    #4ec08b;
    --cizgi:    #322f42;
    --fosfor:   #6b5a1f;
    --mavi-2:   #7fb0d8;
}

/* dark-theme.css gövde arka planını !important ile eziyor; gövdeye .defter
   sınıfı verilip özgüllük artırılıyor. background-image ve -size de
   !important olmalı — "background: X !important" kısayolu image'ı none yapar. */
body.defter,
[data-theme="dark"] body.defter {
    background-color: var(--kagit) !important;
    background-image:
        linear-gradient(var(--kare) 1px, transparent 1px),
        linear-gradient(90deg, var(--kare) 1px, transparent 1px) !important;
    background-size: var(--kare-adim) var(--kare-adim) !important;
    color: var(--murekkep);
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    min-height: 100vh;
    margin: 0;
}

body.defter h1, body.defter h2, body.defter h3,
body.defter .baslik {
    font-family: 'Bricolage Grotesque', 'Figtree', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--murekkep);
}

/* ---------- Üst şerit ---------- */
/* Yapışkan şerit: %82 saydamlık ve 2px bulanıklık yetmiyordu, altından
   kayan başlıklar şeridin içinden okunuyordu. */
.ust-sarmal {
    border-bottom: 1px solid var(--cizgi);
    background: color-mix(in srgb, var(--kagit) 94%, transparent);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* backdrop-filter desteklenmiyorsa saydamlık tamamen kapanır. */
@supports not (backdrop-filter: blur(1px)) {
    .ust-sarmal { background: var(--kagit); }
}

.ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 62rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    min-width: 0;
}

.marka {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Bricolage Grotesque', 'Figtree', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--murekkep);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: .2rem 0;
}

/* Logo işareti. alt="" çünkü yanındaki yazı zaten markayı söylüyor —
   ekran okuyucu aynı şeyi iki kez okumasın. */
.marka-im { display: block; width: 30px; height: 30px; object-fit: contain; }

.ust-baglar { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }

.ust-bag {
    color: var(--grafit);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    padding: .25rem 0;
    border-bottom: 1.5px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.ust-bag:hover, .ust-bag:focus-visible { color: var(--murekkep); border-bottom-color: var(--murekkep); }

.ust-bag-vurgu {
    color: #fff;
    background: var(--vurgu);
    border-radius: 6px;
    padding: .4rem .8rem;
    border-bottom: none;
}
.ust-bag-vurgu:hover { color: #fff; filter: brightness(.93); border-bottom-color: transparent; }

.tema-dugme {
    background: none;
    border: 1px solid var(--cizgi);
    border-radius: 6px;
    color: var(--grafit);
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s, border-color .15s;
}
.tema-dugme:hover { color: var(--murekkep); border-color: var(--grafit); }

/* Bulunulan bölüm. Renk tek başına taşımasın diye alt çizgi de veriliyor. */
.ust-bag-aktif { color: var(--murekkep); border-bottom-color: var(--vurgu); }

/* Bölüme özel ikinci satır (araç sayfalarındaki alarm/kronometre gibi).
   Ana menü sabit kalsın, bölüm bağlantıları onu kalabalıklaştırmasın diye ayrı. */
.ust-alt {
    border-bottom: 1px solid var(--cizgi);
    background: color-mix(in srgb, var(--kagit) 94%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
    .ust-alt { background: var(--kagit); }
}
.ust-alt-ic {
    max-width: 62rem;
    margin: 0 auto;
    padding: .55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.ust-alt-ic::-webkit-scrollbar { display: none; }
.ust-alt-bag {
    color: var(--grafit);
    text-decoration: none;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    padding: .2rem 0;
    border-bottom: 1.5px solid transparent;
    transition: color .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.ust-alt-bag:hover, .ust-alt-bag:focus-visible { color: var(--murekkep); border-bottom-color: var(--murekkep); }
.ust-alt-bag-aktif { color: var(--murekkep); border-bottom-color: var(--vurgu); }

/* Ortak üst menü, defter dili kullanmayan sayfalarda da (araçlar) görünüyor.
   dark-theme.css'in a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.notification-item)
   zinciri özgüllük olarak (0,6,1); makul uzunlukta bir seçiciyle yenilmiyor.
   O sayfalarda gövde .defter sınıfı taşımadığı için defter.css'in kendi koruması
   da devreye girmiyor. Menü kendi rengini !important ile savunuyor. */
.ust .ust-bag { color: var(--grafit) !important; }
.ust .ust-bag:hover,
.ust .ust-bag:focus-visible,
.ust .ust-bag-aktif { color: var(--murekkep) !important; }
.ust .ust-bag-vurgu,
.ust .ust-bag-vurgu:hover { color: #fff !important; }
.ust .marka { color: var(--murekkep) !important; }

.ust-alt .ust-alt-bag { color: var(--grafit) !important; }
.ust-alt .ust-alt-bag:hover,
.ust-alt .ust-alt-bag:focus-visible,
.ust-alt .ust-alt-bag-aktif { color: var(--murekkep) !important; }

/* ---------- Geri sayım ---------- */
.sayim { margin-bottom: 1.75rem; position: relative; }

.sayim-kapat {
    position: absolute; top: -.35rem; right: 0;
    background: none; border: none; color: var(--grafit);
    font-size: .8rem; line-height: 1; padding: .35rem; cursor: pointer;
    opacity: .5; transition: opacity .15s;
}
.sayim-kapat:hover { opacity: 1; }

.sayim-satir { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.sayim-ad { font-size: .95rem; font-weight: 500; color: var(--grafit); }

/* Kırmızı kalem işareti — sayfadaki tek cesur öğe. */
.isaret {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--kirmizi);
    border: 2.5px solid var(--kirmizi);
    border-radius: 14px 10px 16px 9px;
    padding: .12em .3em .18em;
    display: inline-block;
    transform: rotate(-1.4deg);
    font-variant-numeric: tabular-nums;
}

.isaret-birim { font-size: 1rem; font-weight: 600; color: var(--murekkep); }

.sayim-alt {
    margin-top: .7rem;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--grafit);
    font-variant-numeric: tabular-nums;
}
.sayim-alt b { font-weight: 600; color: var(--murekkep); }
.sayim-tarih { display: block; margin-top: .15rem; }

.sayim + .sayim { padding-top: 1.5rem; border-top: 1px dashed var(--cizgi); }
.sayim + .sayim .isaret { font-size: 1.9rem; border-width: 2px; }

.countdown-wrapper > .sayim-ad:only-child {
    display: inline-block;
    padding: .35rem .7rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: .82rem;
}

/* ---------- 3. KENDİ BİLEŞENLERİ ---------- */

/* Kareli defterin sol kenarındaki kırmızı marj çizgisi. */
.kart {
    position: relative;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 1.9rem 1.6rem 1.6rem 2.4rem;
    box-shadow: 0 1px 2px rgba(23, 50, 76, .04);
}
.kart::before {
    content: "";
    position: absolute;
    top: .9rem; bottom: .9rem; left: 1.25rem;
    width: 1.5px;
    background: var(--kirmizi);
    opacity: .38;
}

.kart-baslik { font-size: 1.45rem; margin: 0 0 .25rem; }
.kart-alt { font-size: .875rem; color: var(--grafit); margin: 0 0 1.6rem; }

.alan-grup { margin-bottom: 1.35rem; }

.alan-etiket {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--grafit);
    margin-bottom: .3rem;
}

/* Alanlar kutu değil çizgi — deftere yazılıyormuş gibi. */
.alan {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid var(--cizgi);
    background: transparent;
    padding: .45rem 0;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--murekkep);
    border-radius: 0;
    transition: border-color .15s;
}
/* Yer tutucu girilmiş veriyle karışmamalı: bir tık daha soluk.
   Koyu temada karşılığı yoktu; #b4bdc7 koyu kartta 8.3:1 ile gerçek metne
   (13.4:1) yakın çıkıyor ve doldurulmuş alan gibi görünüyordu. */
.alan::placeholder { color: #c6ccd4; }
[data-theme="dark"] .alan::placeholder { color: #5c5870; }
.alan:focus { outline: none; border-bottom-color: var(--vurgu); border-bottom-width: 2px; }

select.alan { appearance: none; padding-right: 1.2rem; cursor: pointer; }

.alan-ipucu { font-size: .78rem; color: var(--grafit); margin-top: .35rem; }

.dugme {
    display: block;
    width: 100%;
    border: none;
    border-radius: 7px;
    padding: .8rem 1rem;
    font-family: inherit;
    font-size: .97rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: filter .15s, background-color .15s, border-color .15s;
}
.dugme-birincil { background: var(--vurgu); color: #fff; }
.dugme-birincil:hover { filter: brightness(.93); color: #fff; }
.dugme-ikincil {
    background: transparent;
    color: var(--murekkep);
    border: 1.5px solid var(--cizgi);
    margin-top: .7rem;
}
.dugme-ikincil:hover { border-color: var(--grafit); color: var(--murekkep); }
.dugme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.yardim {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cizgi);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .875rem;
}
.yardim a {
    color: var(--murekkep);
    text-decoration: none;
    border-bottom: 1.5px solid var(--cizgi);
    padding-bottom: 1px;
    transition: border-color .15s;
}
.yardim a:hover { border-bottom-color: var(--murekkep); }

.dip { margin-top: 1.5rem; text-align: center; font-size: .82rem; color: var(--grafit); }
.dip a { color: var(--grafit); text-decoration: underline; text-underline-offset: 3px; }
.dip a:hover { color: var(--murekkep); }

/* Hata: kırmızı kalemle düşülmüş not. */
.hata {
    border-left: 3px solid var(--kirmizi);
    background: color-mix(in srgb, var(--kirmizi) 6%, transparent);
    padding: .8rem 1rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.4rem;
    font-size: .9rem;
    color: var(--murekkep);
}
.hata ul { margin: 0; padding-left: 1.1rem; }
.hata-baslik { font-weight: 600; margin: 0 0 .3rem; }
.hata a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hata:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 2px; }

.ayirac { display: flex; align-items: center; gap: .75rem; color: var(--grafit); font-size: .8rem; margin: 1.25rem 0; }
.ayirac::before, .ayirac::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }

/* ---------- Levha ----------
   Kareli zemin üstünde duran düz kâğıt yüzeyi.

   NEDEN: zemin kareli kâğıt olunca, üstüne doğrudan yazılan metinlerin
   nerede başlayıp bittiği belirsizleşiyordu — kareler yazının altından
   geçtiği için "burası bir bölge mi, sadece yazı mı" ayırt edilemiyordu.
   Levha o sınırı çiziyor: zemin masa, levha sayfa.

   .kart'tan farkı: kırmızı marj çizgisi yok. Marj çizgisi "buraya yazıldı"
   demek; levha ise sayfanın kendisi. --}} */
.levha {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: 0 1px 2px rgba(23, 50, 76, .04);
    padding: 1.6rem 1.5rem;
}

.levha-bolum + .levha-bolum {
    border-top: 1px solid var(--cizgi);
    margin-top: 1.35rem;
    padding-top: 1.35rem;
}

/* ---------- Kâğıt yaprağı ----------
   Masaya bırakılmış bir sayfa hissi. Sayfada TEK yerde kullanılır — her
   kartı döndürmek gürültü olurdu. */
/* Arkadaki ikinci sayfa AYRI bir sarmalayıcıda duruyor: transform yığın
   bağlamı yarattığı için z-index:-1 ile kartın arkasına düşemiyordu. */
.yaprak-sarmal { position: relative; }

.yaprak-sarmal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    transform: rotate(2.1deg);
}

.yaprak {
    position: relative;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: 0 2px 12px rgba(23, 50, 76, .07);
    transform: rotate(-1.1deg);
}

/* Fosforlu kalem izi — metnin arkasından geçen, uçları düzensiz bir bant. */
.fosfor {
    background: linear-gradient(
        to bottom,
        transparent 12%,
        var(--fosfor) 12%,
        var(--fosfor) 88%,
        transparent 88%
    );
    padding: 0 .12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ---------- 2. BOOTSTRAP UYUM KATMANI ----------
   Mevcut ekranlar Bootstrap işaretlemesiyle yazılmış. Onları yeniden yazmak
   yerine burada defter diline çeviriyoruz: işaretleme aynı kalır, görünüş
   değişir. dark-theme.css bazı yerleri !important ile ezdiği için karşılık
   veriliyor. */
body.defter .card {
    background: var(--kart);
    border: 1px solid var(--cizgi) !important;
    border-radius: var(--yuvarlak);
    box-shadow: 0 1px 2px rgba(23, 50, 76, .04) !important;
}
body.defter .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cizgi);
    color: var(--murekkep) !important;
    font-weight: 600;
}
body.defter .card-body { color: var(--murekkep); }

body.defter .btn-primary {
    background: var(--vurgu) !important;
    border-color: var(--vurgu) !important;
    color: #fff !important;
}
body.defter .btn-primary:hover { filter: brightness(.93); }

body.defter .btn-outline-primary,
body.defter .btn-outline-secondary {
    border-color: var(--cizgi) !important;
    color: var(--murekkep) !important;
    background: transparent !important;
}
body.defter .btn-outline-primary:hover,
body.defter .btn-outline-secondary:hover { border-color: var(--grafit) !important; }

body.defter .btn-warning { background: var(--kirmizi) !important; border-color: var(--kirmizi) !important; color: #fff !important; }
body.defter .btn-outline-warning {
    background: transparent !important;
    border-color: var(--kirmizi) !important;
    color: var(--kirmizi) !important;
}
body.defter .btn-outline-warning:hover { background: var(--kirmizi) !important; color: #fff !important; }
body.defter .btn-outline-danger { background: transparent !important; border-color: var(--kirmizi) !important; color: var(--kirmizi) !important; }
body.defter .btn-outline-success { background: transparent !important; border-color: var(--yesil) !important; color: var(--yesil) !important; }
body.defter .btn-success { background: var(--yesil) !important; border-color: var(--yesil) !important; color: #fff !important; }

body.defter .form-control,
body.defter .form-select {
    background: transparent !important;
    border: 1px solid var(--cizgi) !important;
    border-radius: 6px;
    color: var(--murekkep) !important;
}
body.defter .form-control:focus,
body.defter .form-select:focus {
    border-color: var(--vurgu) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 18%, transparent) !important;
}
body.defter .form-label, body.defter .form-text { color: var(--grafit) !important; }

/* Uyarılar kenara düşülmüş not gibi — dolgulu kutu değil. */
body.defter .alert {
    border: none;
    border-left: 3px solid var(--grafit);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--grafit) 7%, transparent) !important;
    color: var(--murekkep) !important;
}
body.defter .alert-success { border-left-color: var(--yesil); background: color-mix(in srgb, var(--yesil) 8%, transparent) !important; }
body.defter .alert-danger  { border-left-color: var(--kirmizi); background: color-mix(in srgb, var(--kirmizi) 7%, transparent) !important; }
body.defter .alert-warning { border-left-color: #b8860b; background: color-mix(in srgb, #b8860b 8%, transparent) !important; }
body.defter .alert-info    { border-left-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 7%, transparent) !important; }

/* Sekmeler dolgulu hap değil, altı çizili başlık. */
body.defter .nav-pills .nav-link {
    color: var(--grafit) !important;
    background: transparent !important;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: .4rem .1rem;
    margin-right: 1.1rem;
    font-weight: 500;
}
body.defter .nav-pills .nav-link.active {
    color: var(--murekkep) !important;
    border-bottom-color: var(--kirmizi);
    font-weight: 600;
}

/* Rozet metin rengi de verilmeli. bg-secondary'de zemin --grafit; koyu temada
   --grafit AÇIK renge dönüyor (#9aa7b4) ve Bootstrap'ın beyaz rozet metni
   üstünde 2.45:1'e düşüp okunmaz oluyordu. Metin zemine göre seçiliyor. */
body.defter .badge.bg-secondary { background: var(--grafit) !important; color: #fff !important; }
[data-theme="dark"] body.defter .badge.bg-secondary { color: var(--kagit) !important; }

body.defter .badge.bg-primary   { background: var(--vurgu) !important; color: #fff !important; }

/* Bootstrap zemin yardımcıları — eşleme YALNIZCA rozetler için vardı, oysa
   panelde bg-success 79, bg-info 44, bg-danger 28 kez kart/başlık olarak da
   kullanılıyor ve ham Bootstrap renginde kalıyordu. İkisi okunmuyordu:
     bg-info    #0dcaf0 + beyaz metin = 1.96:1
     bg-warning #ffc107 + beyaz metin = 1.63:1
   Kehribarda TON korunup metin koyulaştırıldı (Bootstrap'ın .text-bg-warning
   deseni de bu). bg-dark koyu temada zeminle kaynaşıyordu (1.14:1). */
body.defter .bg-success,
body.defter .badge.bg-success { background-color: #1f7a54 !important; color: #fff !important; }

body.defter .bg-danger,
body.defter .badge.bg-danger  { background-color: var(--kirmizi) !important; color: var(--kirmizi-metin) !important; }

body.defter .bg-info,
body.defter .badge.bg-info    { background-color: var(--mavi-2) !important; color: #fff !important; }
/* --mavi-2 koyu temada AÇIK maviye dönüyor; beyaz metin 2.31:1'e düşüyordu. */
[data-theme="dark"] body.defter .bg-info,
[data-theme="dark"] body.defter .badge.bg-info { color: var(--kagit) !important; }

/* Renkli bir yüzeyin İÇİNDEKİ metin, yüzeyin rengini miras almalı.
   dark-theme.css koyu temada h1-h6'yı ve small'ı global olarak boyuyor
   (satır 445 ve 454); renkli kartın içinde kalan etiketler o yüzden
   okunmuyordu (ör. yeşil kartta #6c6b7a gri "Bugün Kazanılan").
   Bu seçici (0,5,1) ile onları geçiyor; bg-light/bg-white hariç çünkü
   onlar zaten kâğıt yüzey. */
[data-theme="dark"] body.defter [class*="bg-"]:not(.bg-light):not(.bg-white)
    :where(h1, h2, h3, h4, h5, h6, p, small, .small, span, strong, b, li, td, th, div) {
    color: inherit;
}

body.defter .bg-warning,
body.defter .badge.bg-warning { background-color: #d19a0d !important; color: #1a1822 !important; }

body.defter .bg-primary       { background-color: var(--vurgu) !important; color: #fff !important; }

body.defter .bg-dark,
body.defter .badge.bg-dark    { background-color: var(--murekkep) !important; color: var(--kagit) !important; }

/* Bootstrap kipi (modal) — defter kâğıdı olarak. */
body.defter .modal-content {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    color: var(--murekkep);
}
body.defter .modal-header,
body.defter .modal-footer {
    border-color: var(--cizgi);
    background: transparent !important;
    color: var(--murekkep) !important;
}
body.defter .modal-title { font-weight: 600; }
body.defter .btn-close { filter: none; opacity: .5; }
body.defter .btn-close:hover { opacity: 1; }
[data-theme="dark"] body.defter .btn-close { filter: invert(1); }
body.defter .form-check-input:checked { background-color: var(--vurgu); border-color: var(--vurgu); }
body.defter .page-link {
    color: var(--murekkep) !important;
    background: var(--kart) !important;
    border-color: var(--cizgi) !important;
}
body.defter .page-item.active .page-link {
    background: var(--vurgu) !important;
    border-color: var(--vurgu) !important;
    color: #fff !important;
}
body.defter .page-item.disabled .page-link { color: var(--grafit) !important; opacity: .55; }

body.defter .navbar {
    background: color-mix(in srgb, var(--kagit) 82%, transparent) !important;
    border-bottom: 1px solid var(--cizgi);
    box-shadow: none !important;
}
body.defter .navbar-brand { color: var(--murekkep) !important; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }

/* Dar ekranda tablo sayfayı taşırmasın, kendi içinde kaysın (proje kuralı). */
body.defter .table-responsive { overflow-x: auto; }
body.defter .card .table { min-width: 22rem; }
body.defter .table { color: var(--murekkep); }
body.defter .table > :not(caption) > * > * { border-bottom-color: var(--cizgi); background: transparent; }
body.defter .table-light > :not(caption) > * > * { background: color-mix(in srgb, var(--grafit) 5%, transparent) !important; color: var(--grafit) !important; }

body.defter .text-muted { color: var(--grafit) !important; }
body.defter .bg-light, body.defter .bg-white, body.defter .bg-light-subtle {
    background: transparent !important;
}
body.defter code { color: var(--kirmizi); background: color-mix(in srgb, var(--kirmizi) 7%, transparent); padding: .1rem .35rem; border-radius: 4px; }

/* dark-theme.css a:not(.btn):not(...) ile bağlantıları ele geçiriyor;
   altı sınıflık seçiciyi özgüllükle yenmek mümkün değil. */
[data-theme="dark"] body.defter a:not(.btn):not(.dugme):not(.nav-link) { color: var(--murekkep) !important; }
[data-theme="dark"] body.defter .ust-bag { color: var(--grafit) !important; }
[data-theme="dark"] body.defter .ust-bag:hover,
[data-theme="dark"] body.defter .marka { color: var(--murekkep) !important; }
[data-theme="dark"] body.defter .ust-bag-vurgu,
[data-theme="dark"] body.defter .dugme-birincil { color: #fff !important; }
[data-theme="dark"] body.defter .dip,
[data-theme="dark"] body.defter .dip a,
[data-theme="dark"] body.defter .alan-ipucu,
[data-theme="dark"] body.defter .kart-alt { color: var(--grafit) !important; }
[data-theme="dark"] body.defter .alan { color: var(--murekkep) !important; }
[data-theme="dark"] body.defter .kart,
/* Açıkça bir bg-* yardımcısı taşıyan kart kendi rengini korur; yoksa bu kural
   (özgüllük 0,3,1) bg-* eşlemesini (0,2,1) ezip renkli kartları düzleştiriyordu. */
[data-theme="dark"] body.defter .card:not([class*="bg-"]) { background: var(--kart) !important; }

/* ---------- Kırılım noktaları ----------
   36rem = 576px — Bootstrap'ın d-sm-none sınırıyla AYNI olmalı, yoksa arada
   kalan genişliklerde hem ikon hem metin çıkıp üst şerit taşar. */
@media (max-width: 36rem) {
    .ust-bag span { display: none; }
    .ust-bag { font-size: 1rem; }
    .ust-baglar { gap: 1.15rem; }
    .ust-bag-vurgu { font-size: .85rem; padding: .35rem .7rem; }
    .ust-bag-vurgu span { display: none; }
    .ust-bag-vurgu i { font-size: .95rem; }
}

/* 320px gibi çok dar ekranlarda üst şerit taşıyordu: marka + 3 ikon +
   "Giriş" düğmesi + tema düğmesi sığmıyordu. */
@media (max-width: 22.5rem) {
    .ust { padding: .85rem .85rem; gap: .6rem; }
    .ust-baglar { gap: .8rem; }
    .marka { font-size: .95rem; }
    .ust-bag-vurgu { padding: .3rem .55rem; font-size: .8rem; }
    .tema-dugme { width: 1.75rem; height: 1.75rem; }
}

@media (max-width: 26rem) {
    .isaret { font-size: 2.2rem; }
    .kart { padding: 1.6rem 1.2rem 1.4rem 2rem; }
    .kart::before { left: 1rem; }
    .sayim-alt { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.defter *, body.defter *::before, body.defter *::after {
        transition: none !important;
        animation: none !important;
    }
}