/* ==========================================================================
   EKLER.CSS — temada karşılığı olmayan küçük, GENEL eklemeler
   --------------------------------------------------------------------------
   NE İŞE YARAR:
     Temanın CSS'i (tema.css) önceden derlenmiştir; içinde yalnız temanın kendi demo
     sayfalarında kullanılan sınıflar vardır. Bu dosyada, temada OLMAYAN ama hemen her
     projede gereken birkaç küçük kural bulunur. Buradaki kendi sınıflarımızın hepsi
     "ek-" ile başlar (temanın sınıflarıyla karışmasın diye).

   NASIL EKLENİR (her sayfanın <head> bölümünde, tema.css'ten HEMEN SONRA):
     <link rel="stylesheet" href="/tema/font/google-sans-flex.css">
     <link rel="stylesheet" href="/tema/tema.css">
     <link rel="stylesheet" href="/tema/yardimci/ekler.css">

   KURALLAR:
     - Renkler DAİMA temanın değişkenleriyle verilir: var(--color-primary), var(--color-danger),
       var(--color-gray-500) ... Böylece koyu modda da doğru görünür. Sabit renk (#fff, red) yazmayın.
     - Yeni bir ek gerekiyorsa buraya "ek-" önekiyle ekleyin ve başına ne işe yaradığını yazın.

   İÇİNDEKİLER:
     1) Yan menü: pasif ("Yakında") öğe ............................ .ek-pasif
     2) Yan menü: çıkış düğmesi bir <form> içindeyse ............... .log-out button
     3) Form doğrulama: hatalı alanın kırmızı çerçevesi ............ .input-validation-error, [aria-invalid="true"]
     4) Form doğrulama: boş hata metni yer kaplamasın .............. .ek-alan-hata, .field-validation-valid
     5) Giriş ekranları: sol taraftaki gösterge paneli ............. .ek-giris-pano, .ek-giris-pano-grafik, .ek-giris-cubuk--soluk
     6) Tarih alanı genişliği ve koyu mod ......................... .ek-tarih-alani
     7) Açılır alan (<details>/<summary>) ......................... .ek-acilir, .ek-acilir__ok
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) YAN MENÜ: PASİF ("YAKINDA") ÖĞE
   Henüz hazır olmayan sayfalar için. Tıklanamaz görünür, soluk renklidir,
   temanın üzerine gelince çıkan renkli vurgusu uygulanmaz.
   Kullanım (href YAZMAYIN):
     <li>
       <a class="ek-pasif" role="link" aria-disabled="true" title="Yakında">
         <i class="iconoir-page" aria-hidden="true"></i><span>Sayfa Adı</span><span class="sr-only">(yakında)</span>
       </a>
     </li>
   -------------------------------------------------------------------------- */
.sidebar .sidebar-menu > ul > li > a.ek-pasif {
    cursor: not-allowed;
    color: var(--color-gray-500);
}
.sidebar .sidebar-menu > ul > li > a.ek-pasif:hover {
    background-image: none;
    color: var(--color-gray-500);
}


/* --------------------------------------------------------------------------
   2) YAN MENÜ: ÇIKIŞ DÜĞMESİ BİR <form> İÇİNDEYSE
   Temada yan menünün altındaki "Çıkış" bir <a> bağlantısıdır. Güvenli çıkış için onu
   POST gönderen bir <form> içindeki <button> yaptık. Temanın ".log-out a" kuralları
   <button>'a uygulanmadığı için aynısını burada <button> için yazıyoruz:
     - menü daraltılmışken: küçük kare düğme,
     - daraltılmış menü üzerine gelinip açıldığında: tam genişlik.
   -------------------------------------------------------------------------- */
.mini-sidebar .sidebar .log-out button {
    width: calc(var(--spacing) * 8) !important;
    height: calc(var(--spacing) * 8) !important;
    padding: 0 !important;
    justify-content: center !important;
}
.mini-sidebar.expand-menu .sidebar .log-out button {
    width: 100% !important;
    height: auto !important;
    padding: calc(var(--spacing) * 3) !important;
    justify-content: space-between !important;
}


/* --------------------------------------------------------------------------
   3) FORM DOĞRULAMA: HATALI ALANIN KIRMIZI ÇERÇEVESİ
   Sunucu bir alanı (input / select / textarea) hatalı bulduğunda o alana şunlardan BİRİNİ ekleyin:
     - aria-invalid="true" özniteliği (her framework'te çalışır; ÖNERİLEN), veya
     - class="input-validation-error" (ASP.NET bunu kendisi ekler).
   Örnek:
     <input id="eposta" name="eposta" class="form-input ..." aria-invalid="true" aria-describedby="eposta-hata">
     <span id="eposta-hata" class="ek-alan-hata block text-sm text-danger mt-1">E-posta adresi geçersiz.</span>
   -------------------------------------------------------------------------- */
.input-validation-error,
.input-validation-error:focus,
input[aria-invalid="true"],
input[aria-invalid="true"]:focus,
select[aria-invalid="true"],
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"],
textarea[aria-invalid="true"]:focus {
    border-color: var(--color-danger);
}


/* --------------------------------------------------------------------------
   4) FORM DOĞRULAMA: BOŞ HATA METNİ YER KAPLAMASIN
   Hata metni kutusu boşsa (hata yoksa) hiç görünmez; içine yazı gelince görünür.
   -------------------------------------------------------------------------- */
.ek-alan-hata:empty,
.field-validation-valid {
    display: none;
}


/* --------------------------------------------------------------------------
   5) GİRİŞ EKRANLARI: SOL TARAFTAKİ GÖSTERGE PANELİ
   Giriş / şifremi unuttum / doğrulama kodu / yeni şifre sayfalarının solunda,
   temadaki stok fotoğrafın yerinde duran süs paneli (bkz. sablonlar/02-giris.html).
   -------------------------------------------------------------------------- */

/* Panelin genişliği: dönen çemberler üzerindeki ikon balonlarına değmeyecek kadar. */
.ek-giris-pano {
    width: 300px;
}

/* Alçak ekranlarda (ör. 1366x657 dizüstü) panel üstteki başlığa binmesin: süs grafiği gizlenir. */
@media (max-height: 760px) {
    .ek-giris-pano-grafik {
        display: none;
    }
}

/* Paneldeki soluk (ikinci) çubuk: her iki modda da yarı saydam açık renk. */
.ek-giris-cubuk--soluk {
    background-color: color-mix(in srgb, var(--color-dark-white) 40%, transparent);
}


/* --------------------------------------------------------------------------
   6) TARİH ALANI GENİŞLİĞİ VE KOYU MOD
   Sayfa başlığındaki filtre satırında tarih alanı içerik genişliğinde kalsın.
   Takvim kütüphanesi yüklenemezse tarayıcının kendi tarih alanı kalır; koyu modda
   onun takvimi de koyu olsun.
   Kullanım: <input type="date" class="ek-tarih-alani form-input ..." ...>
   -------------------------------------------------------------------------- */
.ek-tarih-alani {
    width: 9.5rem;
}
[data-theme="dark"] .ek-tarih-alani {
    color-scheme: dark;
}


/* --------------------------------------------------------------------------
   7) AÇILIR ALAN (<details> / <summary>)
   Tarayıcının kendi üçgen işareti yerine temanın ikonu kullanılır; açılınca ikon döner.
   Kullanım:
     <details class="ek-acilir">
       <summary class="flex items-center gap-2 cursor-pointer">
         Başlık <i class="ph ph-caret-down ek-acilir__ok" aria-hidden="true"></i>
       </summary>
       <div class="pt-3">Açılan içerik</div>
     </details>
   -------------------------------------------------------------------------- */
.ek-acilir > summary {
    list-style: none;
    user-select: none;
}
.ek-acilir > summary::-webkit-details-marker {
    display: none;
}
.ek-acilir > summary::marker {
    content: "";
}
.ek-acilir > summary:hover {
    opacity: .85;
}
.ek-acilir > summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.ek-acilir__ok {
    transition: transform .2s ease;
}
.ek-acilir[open] .ek-acilir__ok {
    transform: rotate(180deg);
}