/*
   Proje geneli stil jetonlari.
   KURAL (kurallar.md): bu dosyada MEDIA QUERY YAZILMAZ. Responsive davranis yalnizca
   Bootstrap grid/utility kirilimlariyla (row/col + sm/md/lg/xl/xxl) kurulur.
   Burada yalnizca Bootstrap 5.3 CSS degiskenleri ezilir ve kucuk yardimci sinif tanimlanir.
*/

:root {
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dokunmatik hedef alt siniri (WCAG 2.5.5 onerisi ~44px) — mobil oncelikli tasarimin geregi */
.btn,
.form-control,
.form-select {
    min-height: 2.75rem;
}

/* Dikeyde ortalanan bos-durum / karsilama bloklari icin */
.min-vh-75 {
    min-height: 75vh;
}

/* ============================================================
   YONETIM UST CUBUGU (acilir menuler)
   ============================================================ */

/* Acilir menu, ust cubugun AKISINDA yer kaplamamalidir.
   Bootstrap `.navbar-nav .dropdown-menu`'yu `position: static` yapar; o kural
   `navbar-expand-*` sinifi tasiyan navbar'lar icindir ve orada kirilim ustunde
   yeniden `absolute`'a doner. Biz expand sinifi KULLANMIYORUZ (menuler dar
   ekranda sarabilsin diye), bu yuzden static kalip menu acilinca cubugu itiyor
   ve yerlesimi bozuyordu. Konumu (top/left) Bootstrap'in kendi
   `.dropdown-menu[data-bs-popper]` kurali veriyor; burada yalniz akistan
   cikarmak yeterli. */
.admin-ust-menu .dropdown-menu {
    position: absolute;
}

/* Baslik dugmeleri yan menudeki ogelerle ayni vurgu dilini kullansin;
   `.show` acik menunun basligini da vurgulu tutar. */
.admin-ust-menu .nav-link {
    border-radius: var(--bs-border-radius);
}

.admin-ust-menu .nav-link:hover,
.admin-ust-menu .nav-link:focus-visible,
.admin-ust-menu .nav-link.show {
    background-color: rgba(255, 255, 255, .09);
}

/* Menu satirlari mobilde de rahat dokunulabilir olsun (kurallar.md §4.5). */
.admin-ust-menu .dropdown-item {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* ============================================================
   ADMIN YAN MENU
   ------------------------------------------------------------
   Yerlesim Bootstrap'in isi: mobilde `offcanvas-lg` panel olarak
   acilir, lg+ ekranlarda .admin-cerceve icinde tepeden dibe sabit
   durur. Burada YALNIZCA genislik ve daralma tanimlanir.

   BURADA MEDIA QUERY YOKTUR (kurallar.md §4.2). Daralma sinifi
   `daraltilmis` yalnizca masaustunde takilir; bu karari admin.js
   verir ve lg kirilimi (992px) orada TEK yerde durur. Ayni esigi
   hem CSS'e hem JS'e yazmak, ikisinin ayrisacagi ilk yer olurdu.
   ============================================================ */

.admin-yan-menu {
    /* Mobil offcanvas genisligi — Bootstrap degiskeni uzerinden
       (varsayilan 400px telefonda ekranin tamamini kapatiyor). */
    --bs-offcanvas-width: 15rem;

    /* lg+ ekranlarda sutun genisligi. */
    width: 15rem;
    transition: width .2s ease-in-out;

    /* Koyu zeminde gezinme baglantilari: renk Bootstrap degiskeni
       ezilerek verilir, tek tek utility sinifi dagitilmaz. */
    --bs-nav-link-color: var(--bs-secondary-color);
    --bs-nav-link-hover-color: var(--bs-emphasis-color);
}

/* Dokunmatik hedef alt siniri yan menu ogeleri icin de gecerli (kurallar.md §4.5).
   Buradaki ogeler .btn degil .nav-link oldugu icin ayrica yaziliyor. */
.admin-yan-menu .nav-link {
    min-height: 2.75rem;
}

/* Vurgu: koyu zeminde ayri bir gri ton yerine hafif bir aydinlik daha temiz durur. */
.admin-yan-menu .nav-link:hover,
.admin-yan-menu .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, .07);
}

/* Cikis, yan menudeki diger ogelerle ayni bicimde ama kirmizi vurguyla durur;
   dolu kirmizi bir dugme dipte gereginden fazla dikkat cekiyordu. */
.yan-menu-cikis:hover,
.yan-menu-cikis:focus-visible {
    background-color: rgba(var(--bs-danger-rgb), .18);
}

/* Menunun tepesi navbar ile ayni hizada bitsin:
   navbar yuksekligi = padding (2 x .5rem) + buton (2.75rem) = 3.75rem */
.yan-menu-tepe {
    min-height: 3.75rem;
}

/* Kisa marka ("KT") yalnizca menu daralmisken gorunur. */
.yan-menu-kisa {
    display: none;
}

/* --- Daraltilmis hal: yalniz ikonlar --- */

.admin-yan-menu.daraltilmis {
    width: 4.5rem;
}

.admin-yan-menu.daraltilmis .yan-menu-metin {
    display: none;
}

.admin-yan-menu.daraltilmis .yan-menu-kisa {
    display: inline;
}

/* Metin gizlenince ikon sola yapismasin, seridin ortasinda dursun. */
.admin-yan-menu.daraltilmis .nav-link,
.admin-yan-menu.daraltilmis .yan-menu-tepe,
.admin-yan-menu.daraltilmis .btn {
    justify-content: center;
}

/* Daralmis seritte acilir menu oku yer kaplamasin. */
.admin-yan-menu.daraltilmis .dropdown-toggle::after {
    display: none;
}

/* ------------------------------------------------------------
   TALEP LISTESINDE YERINDE TUTAR DUZENLEME
   ------------------------------------------------------------ */

/* Cift tiklanabilir tutar. Imlec bunu SOYLEMEK zorunda: cift tiklama gorunmez bir
   ozelliktir, ipucu vermezse kimse denemez. `title` de var ama o ancak beklemekle
   ortaya cikar. Metin secimi kapatilir — cift tiklama once rakami secer, secili
   mavi blok duzenleme kutusu acilirken bir an ekranda kalirdi. */
.tutar-duzenlenebilir {
    cursor: pointer;
    user-select: none;
}

/* Duzenleme kutusu.

   MIN: alt sinir olmadan input-group tutar sutununa sikisiyor ve rakam okunmuyor.
   MAX: ust sinir olmadan kutu hucrenin tamamini kapliyor, sutun genisliyor ve
   duzenleme acilip kapandikca butun tablo saga sola oynuyordu. Ikisi arasinda
   kutu sutuna gore esner.

   `ms-auto` (view'da) blok ogeyi max-width ile SAGA yaslar — tutar sutunu saga
   hizali, kutu da oyle durmali. */
.tutar-duzen {
    min-width: 10rem;
    max-width: 12rem;
}

/* ------------------------------------------------------------
   KITAPLIK TABLOSU — ana kitap sutunlari
   ------------------------------------------------------------ */

/* Proje sahibinin taslaginda ANA KITABA ait sutunlar kirmizi, nushaya ait
   olanlar siyahti. Burada RENK yerine ince bir ZEMIN kullanildi:
     · kirmizi yazi tabloda "hata" gibi okunuyor,
     · renk korlugunde iki grup ayirt edilemezdi.
   Zemin ikisinde de calisir ve tablonun okunurlugunu bozmaz. */
.kitaplik-ana {
    background-color: var(--bs-tertiary-bg);
}

/* ------------------------------------------------------------
   ARANABILIR SECIM KUTUSU (js/aranabilir-secim.js)
   ------------------------------------------------------------ */

/* Suzulmus secenekler kutunun ALTINDA asili durur. `position: absolute` +
   kapsayicidaki `position: relative` ile: akisa dahil olsaydi liste acilinca
   altindaki her sey asagi kayar, tablo zipladi. */
.aranabilir-liste {
    position: absolute;
    z-index: 1056;          /* Bootstrap modal (1055) UZERINDE: pencere icinde de gorunsun. */
    top: 100%;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
}

/* Liste ogeleri tek satir: uzun kitap adlari kutuyu genisletmesin. */
.aranabilir-liste .list-group-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   KITAPLIK — konum secimi
   ------------------------------------------------------------ */

/* Tablo hucresindeki konum kutusu. Alt sinir olmadan "Depoda" gibi kisa bir
   secenek kutuyu daraltip sutunu satirdan satira oynatiyordu. */
.konum-secim {
    min-width: 8.5rem;
}

/* Etiket ekranindaki karekod. Ust sinir var cunku PNG buyuk uretiliyor
   (10x olcek) — kucuk ekranda tasmasin, buyuk ekranda da devlesmesin.
   Dar ekranda `img-fluid` zaten kucultur. */
.kitap-karekod {
    max-width: 16rem;
}

/* Odeme yontemi kartlarindaki kare ikon alani (durum-ikonu'nun kucugu). */
.odeme-ikonu {
    width: 2.75rem;
    height: 2.75rem;
}

/* Uye listesinde uyenin ALTINDA duran kullanici satiri.
   Ustten cizgisiz: ust satirin devami oldugu belli olsun, ayri bir kayit gibi
   durmasin. Vurgu da ustteki satirla birlikte degil, bagimsiz olmasin diye
   `table-hover`in bu satirdaki etkisi sonduruluyor. */
.uye-kullanicilari > td {
    border-top: 0;
    padding-top: 0;
}

.table-hover > tbody > tr.uye-kullanicilari:hover > * {
    --bs-table-bg-state: transparent;
}

/* Kullanicilar ALT ALTA. Soldaki dikey cizgi listeyi ustteki uyeye baglar:
   girintiyi tek basina bosluk ile vermek, uzun listelerde hangi uyeye ait
   oldugunu belirsiz birakiyordu. */
.uye-kullanici-listesi {
    border-left: 2px solid var(--bs-border-color);
    padding-left: .75rem;
    margin-left: .25rem;
}

.uye-kullanici-listesi > li {
    padding-block: .125rem;
}

/* Bos-durum ve uyari bloklarindaki yuvarlak ikon alani.
   Gomulu style yerine sinif (kurallar.md §4.4) — ayrica sıkı bir CSP'de
   satir ici stil engellenecegi icin bugunden temiz tutuluyor. */
.durum-ikonu {
    width: 4rem;
    height: 4rem;
}

/* ============================================================
   YONETIM CERCEVESI
   Dis catki (yan menu + ust cubuk) SABIT durur, yalniz icerik alani kayar.

   Neden `position-sticky` degil: sticky bir elementin yapismasi icin
   EBEVEYNINDE kayacak alan bulunmasi gerekir. Yan menunun ebeveyni tam da
   menu yuksekliginde oldugu icin sticky hic devreye girmiyor, menu sayfayla
   birlikte yukari kayiyordu. Cerceveyi viewport'a sabitleyip kaydirmayi
   `main` icine almak bu hesabi tamamen ortadan kaldirir.
   ============================================================ */
.admin-cerceve {
    height: 100vh;
    /* Mobil tarayicilarda adres cubugu 100vh'yi tasirir; dvh destekleyen
       tarayicilar bu satiri kullanir, desteklemeyenler ustteki 100vh'de kalir. */
    height: 100dvh;
    overflow: hidden;
}

/* ============================================================
   MUSTERI TARAFI — SADECE MOBIL
   ------------------------------------------------------------
   Musteri ekranlari yalnizca mobil icin tasarlanir; masaustu
   tarayicida da AYNI mobil duzen gorunur. Butun uygulama
   `.musteri-uygulama` cercevesine sikisir ve genis ekranda
   ortalanir — telefon ekrani gibi.

   DIKKAT — kirilim kullanmayin: Bootstrap'in sm/md/lg/xl esikleri
   VIEWPORT'a bakar, bu cerceveye degil. Genis ekranda `col-lg-5`
   hala "lg" sayilir ve 30rem'in %41'ini alir; sonuc kirik bir
   sutundur. Musteri view'larinda `col-12` / `col-6` / `col-4` gibi
   SABIT oranlar kullanilir — mobil tasarimda dogru olan da budur.
   (Yonetim tarafi masaustu icindir ve kirilimli col kullanmaya
   devam eder.)
   ============================================================ */

/* Telefon cercevesi: butun musteri arayuzu bunun icinde yasar. */
.musteri-uygulama {
    max-width: 30rem;        /* ~480px: buyuk telefon genisligi */
    margin-inline: auto;
    min-height: 100vh;
    min-height: 100dvh;      /* mobilde adres cubugu payi */
    background-color: var(--bs-body-bg);
    /* Genis ekranda cerceveyi zeminden ayirir; dar ekranda zaten tam
       genislik oldugu icin golge gorunmez. */
    box-shadow: 0 0 2rem rgba(0, 0, 0, .08);
    /* Cerceveden disari hicbir sey tasmaz. */
    overflow-x: hidden;
}

/* Cerceve disinda kalan alan: telefonun "masasi". */
.musteri-zemin {
    background-color: var(--bs-secondary-bg);
}

/* Ust cubuktaki ve menudeki kucuk kare logo alani. */
.musteri-logo {
    width: 2rem;
    height: 2rem;
}

/* MENU PANELI VE KARARTMA CERCEVEYE HAPSEDILIR.

   Bootstrap paneli `left: 0` ile VIEWPORT'un soluna yapistirir; cerceve ortalanmis
   oldugu icin panel disarida, bos alanda aciliyordu.

   SECICI OZGULLUGU KRITIK: Bootstrap'in kurali `.offcanvas.offcanvas-start` yani
   IKI sinif (0,2,0). Tek sinifla (`.musteri-menu-panel`) yazilan kural site.css
   sonra yuklense bile KAYBEDER. Bu yuzden burada uc sinifla yaziliyor (0,3,0).

   `max()` / `min()` ile: dar ekranda cerceve zaten tam genislik oldugu icin panel
   sol kenardan baslar; genis ekranda cercevenin sol kenarina hizalanir.
   Media query gerekmez — tek hesap iki durumu da karsilar. */
.musteri-menu-panel {
    --bs-offcanvas-width: 17rem;
}

.musteri-uygulama .offcanvas.offcanvas-start {
    left: max(0px, calc(50% - 15rem));   /* 15rem = cerceve genisliginin yarisi */
}

/* Karartma da cerceveyle sinirli: telefonun disi kararmaz.
   `body.musteri-zemin` oneki sart — bu kural YALNIZ musteri tarafinda gecerli olmali,
   yonetim panelindeki offcanvas (mobil yan menu) tam ekran kararmaya devam etmeli. */
body.musteri-zemin .offcanvas-backdrop {
    left: max(0px, calc(50% - 15rem));
    width: min(100vw, 30rem);
}

/* Alt bilgi telefon ekraninin DIBINDE sabit durur: sayfa kaysa da gorunur kalir.
   `sticky` (fixed degil) secildi — cerceve icinde akista kalir, boylece genis
   ekranda cercevenin disina tasmaz ve kendi genisligini cerceveden alir.

   Torun seciciyle yaziliyor (`>` degil): footer artik cercevenin DOGRUDAN cocugu
   degil, icerik sutununun icinde duruyor — arada yan serit var. */
.musteri-uygulama footer {
    position: sticky;
    bottom: 0;
    background-color: var(--bs-body-bg);
}

/* ------------------------------------------------------------
   UYE PANELI — giris yapmis uyenin duzeni
   ------------------------------------------------------------
   Yan serit HER ZAMAN aciktir: acilip kapanmaz, hamburger'i yoktur.
   Serit sayfayla birlikte yukari kaymasin diye cerceve viewport'a
   sabitlenir ve kaydirma <main> icine alinir (yonetim tarafindaki
   .admin-cerceve ile ayni cozum).

   BURADA MEDIA QUERY YOKTUR (kurallar.md §4.2): cerceve zaten tek
   genislikte (30rem) tasarlanir, kirilim gerekmez.
   ------------------------------------------------------------ */

/* .musteri-uygulama'dan SONRA gelmeli: `overflow` kisayolu oradaki
   `overflow-x: hidden` kuralini kapsayarak ezer. */
.musteri-panel {
    height: 100vh;
    height: 100dvh;          /* mobilde adres cubugu payi */
    overflow: hidden;
}

/* Yan serit. 30rem'lik cerceveden 4.75rem alir, geriye ~25.25rem icerik kalir.
   En uzun baslik ("Seviyeler") .75rem puntoda tek satirda sigar ve iki yaninda
   bir tik nefes payi kalir; daha genisi icerikten bosuna yer aliyordu. */
.musteri-serit {
    width: 4.75rem;
    background-color: var(--bs-tertiary-bg);
}

/* Ogeler KENDI boylarinda durur, seridi doldurmak icin gerilmez; son ogenin
   altinda kalan bosluk oldugu gibi birakilir.

   Dokunmatik hedef alt siniri (kurallar.md §4.5) burada da gecerli — ogeler
   .btn degil .nav-link oldugu icin ayrica yaziliyor.

   RENK: serit varsayilan olarak GOVDE RENGINDE (siyah) durur; mavi yalnizca
   uzerinde bulunulan bolumun isaretidir.

   NEDEN DEGISKEN DEGIL DE DOGRUDAN `color`: Bootstrap'in `.nav` sinifi
   `--bs-nav-link-color: var(--bs-link-color)` satirini KENDI UZERINDE yeniden
   tanimliyor. Degiskeni disaridaki `.musteri-serit`e yazmak ise yaramaz —
   `.nav`in kendi tanimi onu golgeler ve baglantilar mavi kalir. */
.musteri-serit .nav-link {
    min-height: 2.75rem;
    color: var(--bs-body-color);
}

/* Uzerinde bulunulan bolum. Yalnizca KENDI ekrani olan oge aktif olabilir
   (bkz. _Layout.cshtml'deki `Aktif`), yoksa anasayfada butun serit yanardi. */
.musteri-serit .musteri-serit-aktif {
    color: var(--bs-primary);
    background-color: var(--bs-secondary-bg);
    font-weight: 600;
}

/* IKONUN KUTUSU. Font Awesome buyuk boyutlara (fa-xl, fa-2xl) `line-height`
   olarak 0.03125em veriyor — ikonun satir kutusu neredeyse SIFIR yukseklikte
   kaliyor, altindaki yazi da glyph'in uzerine biniyordu. Kutuyu punto kadar
   yuksek yapmak bunu duzeltir; `gap` de ancak boyle gercek bir bosluga donusur. */
.musteri-serit .nav-link i {
    line-height: 1;
}

/* Ikonun altindaki baslik. Govde yazisindan bir tik kucuk: seride sigsin ama
   okunakli kalsin. Ortalanir ve kelime bolunmez — bolunse "Seviye-ler" okunurdu. */
.musteri-serit-yazi {
    font-size: .75rem;     /* 12px */
    line-height: 1.2;
    text-align: center;
    word-break: keep-all;
}

/* Vurgu: seritte dokunulan ogenin geri bildirimi. */
.musteri-serit .nav-link:hover,
.musteri-serit .nav-link:focus-visible {
    background-color: var(--bs-secondary-bg);
}

.musteri-serit-cikis:hover,
.musteri-serit-cikis:focus-visible {
    background-color: rgba(var(--bs-danger-rgb), .12);
}

/* Ust cubugun altindaki geri/ileri dugmeleri.

   ONAYLI SAPMA (kurallar.md §4.5): dokunmatik hedef alt siniri 2.75rem'dir, bu
   iki dugme 1.75rem'dir. Proje sahibinin istegi uzerine kucultuldu; ikisi de
   tarayicinin KENDI geri/ileri okunun kopyasi, yani ana eylem degil kolaylik. */
.musteri-gezinme {
    min-width: 2.25rem;
    min-height: 1.75rem;
    padding: .0625rem .375rem;
}

/* Icerik sutunu. min-width:0 SART: flex ogesi varsayilan olarak icerigi kadar
   daralmaz; genis bir tablo/satir sutunu buyutup seridi cerceve disina iterdi. */
.musteri-icerik {
    min-width: 0;
}

/* ------------------------------------------------------------
   AYARLANABILIR BUTONLAR (uye anasayfasi)
   ------------------------------------------------------------ */

/* IKONUN KUTUSU. Font Awesome buyuk boyutlara (fa-lg, fa-xl...) `line-height`
   olarak neredeyse sifir veriyor; ikonun satir kutusu cokuyor ve altindaki yazi
   glyph'in uzerine biniyor. Yan seritte de ayni duzeltme var. */
.kisayol-ikon {
    line-height: 1;
    margin-bottom: .375rem;
}

/* Dort sutunlu izgarada bir kutuya ~5rem dusuyor; govde yazisi sigmaz.
   Kelime bolunmez — "Seviye-ler" gibi okunmasin. */
.kisayol-yazi {
    font-size: .6875rem;   /* 11px */
    line-height: 1.15;
    word-break: keep-all;
}

/* Dolu buton: hafif zemin olmadan beyaz uzerinde beyaz kaliyor ve dokunulabilir
   bir sey oldugu anlasilmiyordu. */
.kisayol-dolu .card-body {
    background-color: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
}

/* Bos yuva: kesikli cerceve "burasi doldurulabilir" demenin en kisa yolu. */
.kisayol-bos .card-body,
.kisayol-yuva .card-body {
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.kisayol-bos {
    opacity: .75;
}

/* Uyelik sozlesmesi metni: sabit yukseklikte, kendi icinde kayan alan.
   Yukseklik `dvh` ile ekrana oranli — telefonda da bilgisayarda da metnin
   sonuna inmek gercek bir okuma eylemi olsun, tek ekranda bitmesin. */
.sozlesme-metin {
    max-height: 55dvh;
    overflow-y: auto;
    /* Kaydirmanin sonuna geldigini tarayicinin dogru bildirmesi icin. */
    overscroll-behavior: contain;
}

/* Alti cizgili sekmeler (.nav-underline) — arka plan yok; YAZI SIYAH, yalnizca
   AKTIF olanin alti mavi cizgili.

   Bootstrap'ta cizgi rengi `currentcolor`dur, yani yazi ile cizgi ZORUNLU olarak
   ayni renktir. Yazinin govde rengi, cizginin marka rengi olmasi icin ikisi
   AYRILIYOR: renk degiskenden, cizgi ayrica veriliyor.

   UC RENK DE GOVDE RENGI: secili olmayan sekme Bootstrap'ta baglanti mavisiyle
   gelir; sekme bir baglanti degil bir SECIM oldugu icin mavi burada "tiklanabilir"
   demiyor, sadece hangisinin secili oldugunu bulaniklastiriyordu. Ayirt edici tek
   isaret ALT CIZGI olsun diye yazilarin hepsi siyah.

   Renk degeri degiskenle veriliyor (kurallar.md §4.4): focus/disabled halleri
   Bootstrap'ta kalsin, elle bakim gerekmesin. */
.nav-underline {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-body-color);
    --bs-nav-underline-link-active-color: var(--bs-body-color);
}

/* Bootstrap fare uzerine gelince de alt cizgi cizer (currentcolor). Cizgi TEK
   basina "secili olan bu" demesi gereken isaret oldugu icin hover'da kaldirildi;
   aksi halde uzerine gelinen sekme secili gibi gorunuyordu. */
.nav-underline .nav-link:hover,
.nav-underline .nav-link:focus {
    border-bottom-color: transparent;
}

/* AKTIF SEKME KALIN YAZILMAZ: Bootstrap font-weight 700 veriyor ve secili sekme
   digerinden gorsel olarak sicriyordu. Ayirt edici tek isaret ALT CIZGI olsun —
   daha sakin bir gorunum. Kalinlik govde degerinden alinir, sabit yazilmaz. */
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
    font-weight: var(--bs-body-font-weight);
    border-bottom-color: var(--bs-primary);
}