/* ============================================================
   admin-theme.css
   Admin paneli zemin temasi - "Lobi isigi"

   Fikir:
   Panelin iki rengi zaten belli - ustte lacivert navbar
   (rgba(15,23,42,.94)), vurgu olarak pirinc sarisi (#b5a479).
   Bugune kadar bu ikisi bembeyaz bir sayfanin uzerinde duruyordu,
   yani lacivert bar kagida cizilmis siyah bir serit gibiydi.

   Tema bu iki rengi birbirine baglar: tavan koyu, zemin sicak,
   ikisinin arasinda navbar'in altindan sizan yumusak bir pirinc
   isigi. Bir otel koridorunun aydinlatmasi.

   Neden krem degil de "grej":
   Krem + altin kombinasyonu dugun davetiyesine benziyor ve
   #b5a479'u tereyagi sarisina cekiyor. Hafif yesilimsi-gri bir
   zemin ise ayni altini PIRINC gibi okutuyor - lobi zemini.

   Hareket YOK. Personel gun boyu bu ekranda form dolduruyor;
   arka planda kipirdayan hicbir sey olmamali.

   Yapi hatirlatmasi (_AdminLayout):
   body.home > .site-wrapper > section.hero.bg-image
                                 > .hero-inner > .container > main
   ============================================================ */

:root {
    --floor: #efece5;          /* sicak grej zemin */
    --floor-deep: #e6e2d9;     /* sayfa dibine dogru koyulasan ton */
    --ceiling: #0f172a;        /* mevcut navbar lacivertı */
    --brass: #b5a479;          /* mevcut vurgu */
    --brass-light: rgba(181, 164, 121, 0.16);
    --surface: #fdfcfa;        /* panel yuzeyi - sicak beyaz */
    --ink-shadow: 60, 50, 25;  /* golgeler notr siyah degil, sicak kahve */
}

/* Sayfa disina tasan kaydirmada da (overscroll) zemin gorunsun */
html,
body.home {
    background-color: var(--floor);
}

/* ------------------------------------------------------------
   Liste / tablo yazi tipi (.table100 - tum surumler: ver1..ver6)

   Su ana kadar tablolar main.css'teki genel govde fontunu
   (Lato) miras aliyordu - duz, geometrik, sogutucu bir gorunum.
   Navbar/butonlar/formlar zaten Plus Jakarta Sans kullaniyor;
   tablo bu ailenin disinda kaldigi icin panelin geri kalanindan
   kopuk duruyordu.

   Font-size'a DOKUNULMUYOR: ver1-ver6 arasinda 12-14px gibi
   surume ozel degerler var, onlari degistirmek satir yuksekligini
   ve kolon genisligini kaydirir. Sadece aile, agirlik, harf
   araligi ve renk yumusatiliyor.

   Metin rengi duz siyah yerine sicak murekkep tonu (--ink-shadow) -
   zeminin geri kalaniyla ayni palet, gozu daha az yoruyor. */
.table100,
.table100 th,
.table100 td {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
}

.table100 td {
    color: rgba(var(--ink-shadow), 0.92);
    font-weight: 500;
    letter-spacing: 0.005em;
}

.table100 th {
    font-weight: 600;
    letter-spacing: 0.035em;
}

/* Housekeeping detay aksiyonlari masaustunde sagda, mobilde formun altinda kalir. */
.housekeeping-task-actions {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    max-width: calc(33.333333% - 40px);
}

@media (max-width: 767.98px) {
    .housekeeping-task-actions {
        position: static;
        max-width: none;
        margin: 20px 0 44px;
        justify-content: flex-start;
    }
}

/* ------------------------------------------------------------
   Guncelle/Sil aksiyon kolonlari

   .table100 td varsayilan olarak sola hizali (main.css). Icinde
   tek basina bir .grid-btn (Duzenle/Sil ikon dugmesi) barindiran
   hucreler ise sola yasli degil, ORTALANMIS durmali - 16 liste
   sayfasinin tumunde tekrarlanan bir kalip, tek tek duzeltmek
   yerine :has() ile hedefleniyor.

   :has() destegi yoksa kural devreye girmez, hucreler eski (sola
   yasli) haliyle kalir - kirilma olmaz.
   ------------------------------------------------------------ */
@supports selector(:has(a, b)) {
    .table100 td:has(> .grid-btn) {
        text-align: center;
    }
}

/* ------------------------------------------------------------
   Ekle / Guncelle / Kaydet dugmeleri (.theme-btn)

   Panel genelinde tum birincil eylem dugmeleri (formlarin altindaki
   Ekle, Guncelle, Kaydet, Giris) ayni ".theme-btn" sinifini
   paylasiyor - yani tek yerden degistirmek TUM panele yayiliyor.

   Eskisi kahverengi-tondaydi (#886A49, style.css) ve panelin geri
   kalaninda kullandigimiz pirinc/altin (#b5a479) ile ayni aile
   degildi - yan yana durunca iki farkli marka gibi gorunuyorlardi.
   Simdi dosya secme dugmesi ve grid-btn.default hover'iyla AYNI
   gradyani kullaniyor, boylece "birincil eylem" rengi panelde
   tek ve tutarli.

   Kalkma/basma hareketi (translateY, scale) buraya YAZILMIYOR:
   ui-transitions.css'teki genel ".btn:hover/:active" kurallari
   zaten ".theme-btn"leri kapsiyor (hepsi "btn" sinifini da tasiyor -
   tek istisna login sayfasindaki gonder dugmesi, ona asagida ayrica
   deginiliyor). Burada sadece renk/golge/yuzey yenileniyor.
   ------------------------------------------------------------ */
.theme-btn,
a.theme-btn,
.btn.theme-btn {
    background: linear-gradient(135deg, var(--brass) 0%, #8c7b53 100%);
    border: 1px solid rgba(140, 123, 83, 0.4);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(181, 164, 121, 0.35);
}

.theme-btn:hover,
a.theme-btn:hover,
.btn.theme-btn:hover {
    background: linear-gradient(135deg, #c2b087 0%, #96835a 100%);
    border-color: rgba(140, 123, 83, 0.6);
    color: #fff;
    box-shadow: 0 8px 22px rgba(181, 164, 121, 0.45);
}

.theme-btn:focus-visible,
.btn.theme-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(181, 164, 121, 0.35),
                0 8px 22px rgba(181, 164, 121, 0.35);
}

.theme-btn:disabled,
.btn.theme-btn:disabled,
.theme-btn.disabled,
.btn.theme-btn.disabled {
    background: #cbc3ae;
    border-color: transparent;
    color: #f4f1ea;
    box-shadow: none;
    cursor: not-allowed;
}

/* Login sayfasindaki gonder dugmesi "btn" sinifini tasimiyor,
   bu yuzden ui-transitions.css'teki genel kalkma/basma hareketini
   miras almiyor - burada ayrica taniyor. */
#submit.theme-btn {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease, background-color 0.18s ease;
}

#submit.theme-btn:hover {
    transform: translateY(-2px);
}

#submit.theme-btn:active {
    transform: translateY(0) scale(0.97);
}

/* "Sifremi Unuttum" linki - eskisi ciplak, alt cizgili, mavimsi
   varsayilan link rengindeydi (tarayici varsayilani). Panelin
   pirinc tonuna cekildi, alt cizgi statik degil hover'da beliren
   bir cizgiye donusturuldu - daha az "unutulmus bir kenar notu",
   daha cok bilinerek konmus ikincil bir eylem gibi dursun. */
.forgot-password-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    /* main.css'teki ".form-body.without-side .form-content .form-button a"
       kurali 4 sinif + 1 tip iceriyor (0,4,1) - tek siniflik bu secicinin
       (0,1,0) uzerinde, dosyanin yuklenme sirasindan bagimsiz olarak
       kazanir. !important disinda beklenmedik bir yol yok. */
    color: #8c7b53 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.forgot-password-link:hover,
.forgot-password-link:focus-visible {
    color: var(--brass) !important;
    border-bottom-color: var(--brass);
}

/* ------------------------------------------------------------
   Giris/Sifre hata mesaji ("Kullanici Adi veya Sifre Yanlis")

   asp-validation-summary=All, Login/PasswordReset/RecoveryMypassword
   uctu de kullanilan TEK gercek hata gosterme mekanizmasi (Login'de
   ayrica elle yazilmis ikinci bir alert-danger blogu da vardi -
   AYNI ModelState.AddModelError("", ...) mesajini ikinci kez
   yazdiriyordu, kaldirildi).

   Bu kutu su ana kadar hicbir CSS almiyordu, sade bir <ul><li>
   olarak _Layout'un ".font-white" kapsayicisinin (color:#fff)
   icinde kaliyordu - yani metin acik zeminde BEYAZ, gorunmezdi.
   Sadece "container.font-white" altinda hedefleniyor; admin
   panelindeki (koyu metinli, zaten okunan) surumune dokunulmuyor.
   ------------------------------------------------------------ */
.font-white .validation-summary-errors {
    display: block;
    /* Kartla (.form-items.login, .form-content'in %35'i - olcduk:
       ~432px genislikte 1235px'lik bir govdede) ayni eksende
       hizalanmasi icin kart genisligine yakin, biraz daha genis
       bir sinir: uzun mesajlarda nefes payi birakiyor, kisa
       mesajda da bomboş bir serit gibi durmuyor. */
    max-width: 480px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    /* Onceki surum parlak/pembe bir "bootstrap kirmizisi" idi - panelin
       geri kalaninda hic gecmeyen bir ton, sanki baska bir kutuphaneden
       oduncmus gibi duruyordu. Burada aynı "sicak kahve" golge ailesine
       (--ink-shadow) ve zeminin kagit dokusuna yakin bir toprak/kiremit
       kirmizisina cekildi - hala net bir "hata" ama artik bu sitenin
       hatasi gibi. */
    background: #f8ede9;
    border: 1px solid rgba(176, 71, 56, 0.32);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(var(--ink-shadow), 0.05),
                0 10px 24px rgba(139, 58, 45, 0.14);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    /* Tek seferlik, amacli bir giris hareketi - yukaridan hafifce
       suzulerek beliriyor. Sayfadaki diger her sey hareketsiz
       (bkz. admin-theme.css basindaki "Hareket YOK" karari); bu
       istisna cunku dogrudan bir etkilesime (basarisiz giris) cevap
       veriyor, atmosfer icin degil. */
    animation: otelapp-alert-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes otelapp-alert-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .font-white .validation-summary-errors {
        animation: none;
    }
}

.font-white .validation-summary-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.font-white .validation-summary-errors li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #8a3529 !important;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.font-white .validation-summary-errors li + li {
    margin-top: 6px;
}

/* Yuvarlak unlem isareti - Bootstrap ikon paketine bagli olmadan,
   salt CSS ile (border-radius + icerik). */
.font-white .validation-summary-errors li::before {
    content: "!";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: #a8483a;
    color: #fdf1ee;
    font-size: 11px;
    font-weight: 800;
}

/* ------------------------------------------------------------
   ONEMLI: Bu proje Bootstrap4'un flex-grid'ini DEGIL, eski
   float tabanli grid'ini kullaniyor (.row{margin:-15px}, .col-*
   {float:left;width:%}, bootstrap.min.css). "align-items-center",
   "justify-content-*", ".col-auto" gibi Bootstrap4 flex-utility
   siniflari yuklu CSS zincirinde HICBIR YERDE tanimli degil -
   panelin baska sayfalarinda da (yaklasik 20 dosya) kullanilmis
   ama sessizce hicbir sey yapmiyorlar. Sadece ".d-flex" (main.css)
   ve ".justify-content-center" gibi gorunumler GERCEKTEN calisiyor
   sanip yazilan markup, aslinda hicbir etkisi olmadan duruyordu.

   Bu iki kural, bu oturumda YAZILAN markup'in (Login butonu/link
   ortalamasi + Notify/Module/TourismPolicy "Aktif yani sira Ekle")
   gercekten calismasi icin GEREKLI. Digerlerine (20 dosya) kasitli
   olarak dokunulmuyor - genel bir ".justify-content-between {...}"
   tanimi eklemek, incelenmemis o sayfalarda beklenmedik yerlesim
   degisikliklerine yol acabilir. Bunun yerine sadece BU OTURUMDA
   yazilan spesifik sinif kombinasyonlari hedefleniyor.
   ------------------------------------------------------------ */

/* Login: "Giris" butonu ve "Sifremi Unuttum" linki ortalansin */
.form-items.login .d-flex.justify-content-center,
.form-items.login .form-button.justify-content-center {
    justify-content: center;
}

/* NotifyItemCreate/Update, ModuleCreate, TourismPolicyCreate,
   UpdateTourismPolicy: "Aktif" checkbox solda, "Ekle/Guncelle"
   butonu sagda, ayni satirda. */
.row.mt-4.align-items-center.justify-content-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.row.mt-4.align-items-center.justify-content-between .form-check {
    /* Bootstrap.min.css'te ".form-check-input" icin BIRBIRINE ZIT iki
       kural var: biri "position:absolute; margin-left:-1.25rem"
       (checkbox'i etiketin SOLUNA, akisin disina ceker - klasik
       Bootstrap3 numarasi), digeri "position:relative; margin-left:0"
       (inline varyant). Hangisinin kazandigi minified dosyada belirsiz;
       bu satirda checkbox akis-disi kalinca .col-auto'nun "width:auto"
       ile daralan kutusunun disina tasip kartin solundaki bosluga
       (hatta kartin disina) kayiyordu - "]" gibi kirpilmis goruntu
       bu yuzdendi.

       Tahmin etmek yerine kesin bir davranis zorlaniyor: checkbox ve
       etiket normal akista, yan yana, bosluklu bir flex satiri. */
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.row.mt-4.align-items-center.justify-content-between .form-check-input {
    position: static !important;
    margin: 0 !important;
}

.row.mt-4.align-items-center.justify-content-between .form-check-label {
    padding-left: 0;
    margin: 0;
}

.row.mt-4.align-items-center.justify-content-between > .col-auto {
    flex: 0 0 auto;
    width: auto;
}

/* ------------------------------------------------------------
   "Ekle" / "Guncelle" dugmesini sag alt koseye iten satir

   ModuleCreate, ApartmentItemCreate/Update, HotelInfoItemCreate/
   Update, LogoUpdate, NotifyItemCreate/Update, SettingCreate,
   TourismPolicyCreate, UpdateTourismPolicy - hepsinde AYNI
   kopyala-yapistir kalip var:

       <div class="row mt-5 float-right">
           <div class="col-sm-12"><button ...>Ekle</button></div>
       </div>

   float-right, dugmeyi formun sonunda saga yapistiriyor. 11 dosyada
   birebir ayni sinif kombinasyonu oldugu icin (baska hicbir yerde
   bu ucluye rastlanmadi) tek CSS kuraliyla hepsi duzeltiliyor -
   11 dosyayi tek tek acmaya gerek yok.
   ------------------------------------------------------------ */
.row.mt-5.float-right {
    float: none !important;
}

.row.mt-5.float-right > div {
    text-align: center;
}

/* ------------------------------------------------------------
   Metin secimi vurgusu

   Tarayicinin varsayilan mavisi temanin disinda kaliyordu.
   Butonlardaki pirinc rengi kullaniliyor - ancak ::selection
   yalnizca DUZ renk kabul eder, butonlardaki gradient burada
   uygulanamaz, o yuzden gradientin baslangic tonu alindi.

   Yazi rengi beyaz DEGIL: beyaz metnin #b5a479 uzerindeki
   kontrasti 2.2:1'de kaliyor ve secili metin okunmuyordu.
   Koyu kahve ile oran ~8:1'e cikiyor.

   -moz-selection ayri blokta olmali; tarayici tanimadigi bir
   pseudo-element gorurse tum kural listesini atar.
   ------------------------------------------------------------ */

::selection {
    background-color: var(--brass);
    color: #241f14;
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--brass);
    color: #241f14;
    text-shadow: none;
}

/* ------------------------------------------------------------
   Zemin katmanlari

   style.css'te ".hero { background: white !important }" var,
   bu yuzden !important zorunlu.
   ------------------------------------------------------------ */
section.hero.bg-image {
    background:
        /* 1 - navbar'in altindan sizan pirinc isigi */
        radial-gradient(120% 55% at 50% 0%,
            var(--brass-light) 0%,
            rgba(181, 164, 121, 0) 60%),
        /* 2 - tavanin sayfaya dusen golgesi */
        linear-gradient(180deg,
            rgba(15, 23, 42, 0.10) 0px,
            rgba(15, 23, 42, 0) 240px),
        /* 3 - zeminin kendisi */
        linear-gradient(180deg,
            var(--floor) 0%,
            var(--floor-deep) 100%)
        !important;
}

/* Keten dokusu.
   .hero:before zaten style.css'te bos bir kaplama katmani olarak
   tanimli (tam boy, absolute). Yeni markup eklemek yerine onu
   kullaniyoruz - sadece background-image ekleniyor, konum ve
   boyut kurallari oradan miras kaliyor.
   Opaklik kasitli olarak cok dusuk: desen degil, kagit dokusu. */
section.hero.bg-image::before {
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(120, 105, 70, 0.035) 0 1px,
            transparent 1px 5px),
        repeating-linear-gradient(-45deg,
            rgba(120, 105, 70, 0.022) 0 1px,
            transparent 1px 7px);
}

/* Icerik sarmalayicisi beyazdi ve zemini tamamen orutuyordu */
section.hero .hero-inner {
    background-color: transparent;
}

/* Login sayfasindaki ".img-holder" - bizden ONCE de var olan bir
   hata. Sayfa "without-side" (yan gorsel paneli olmadan) varyantini
   kullaniyor ama main.css sadece icindeki resmi gizliyor
   (.form-body.without-side .img-holder .info-holder img), kutunun
   kendisini degil. Kutu hala "position:absolute; background:white
   !important; z-index:999" ile TUM ekrani kapliyor - ustunde hicbir
   sey olmayan, gorunmez bir hayalet perde.

   Bugune kadar sayfa zaten bastan sona beyaz oldugu icin fark
   edilmiyordu; zemine renk katinca altindaki her seyi (temayi da)
   maskelemeye basladi. Login "without-side" oldugu icin kutuyu
   tamamen kaldirmak dogru olan - adin kendisi zaten bunu soyluyor. */
.form-body.without-side .img-holder {
    display: none;
}

/* ------------------------------------------------------------
   Paneller

   Zemin artik renkli oldugu icin panellerin ondan ayrilmasi
   gerekiyor. Golge notr siyah degil sicak kahve tonunda -
   grej zeminin uzerinde gri golge kirli gorunuyor.
   ------------------------------------------------------------ */
.menu-widget,
.widget {
    background: var(--surface);
    border: 1px solid rgba(var(--ink-shadow), 0.10);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(var(--ink-shadow), 0.05),
        0 10px 28px rgba(var(--ink-shadow), 0.07);
    /* Kartin ust kenarinda ince bir isik cizgisi - "yuzey" hissi.
       Golgeyle birlikte panelin zeminden kabarik durmasini pekistirir. */
    position: relative;
}

.widget::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* Panel basligini gri cizgi yerine pirinc bir cizgi ayirsin */
.widget-heading {
    border-bottom: 1px solid rgba(181, 164, 121, 0.30);
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg,
        rgba(181, 164, 121, 0.07) 0%,
        rgba(181, 164, 121, 0) 100%);
    display: flex;
    align-items: center;
}

.widget-heading .widget-title {
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
}

/* Baslik onune kucuk bir pirinc isaret - anahtar rafinin devami.
   Sayfa icerigine gore degismesi gerekmedigi icin dekoratif ve tek tip. */
.widget-heading .widget-title::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 2px;
    background: var(--brass);
    transform: rotate(45deg);
}

/* ------------------------------------------------------------
   Form panelleri icin genislik sinirlamasi

   Panel genelinde ".widget" sinifi HEP form icin kullaniliyor -
   40+ Create/Update sayfasi taranarak dogrulandi. Liste/tablo
   sayfalari (RestaurantMenuGetAll, UserList, RoomList, ...) hicbir
   zaman ".widget" kullanmiyor, ayri bir sinifla (.container-table100)
   aciliyorlar - yani bu kural liste sayfalarina hic dokunmuyor,
   ayrica haric tutmaya gerek yok.

   Tek istisna MaintenanceMachineDetail.cshtml: aynı sayfada iki ayri
   ".widget" var, ikincisinin icinde bir tablo (.table100) da var.
   O tek widget'i genislikten muaf tutmak icin :has() ile hedefleniyor -
   sayfadaki detay/form widget'i yine daralip ortalaniyor, sadece
   tabloyu tasiyan widget tam genislikte kaliyor.

   Once ".container > .widget.clearfix" gibi dar bir secici
   kullanilmisti ama ModuleCreate gibi sayfalarda widget ".container
   > .row > .col-md-12 > .widget" seklinde daha derinde oturuyor -
   o yuzden nesting'e bagli olmayan duz ".widget" seçicisine
   genisletildi.

   GENISLIK SABIT DEGIL, EKRANA GORE:
   Once duz "max-width: 960px" yazilmisti. 960 sabit bir sayi
   oldugu icin genis ekranda (veya tarayici %50'ye kucultuldugunde,
   ki bu da ekrani "genisletmek" demektir) panel ortada kucuk bir
   ada gibi kaliyordu - etrafindaki bosluk panelden buyuktu.

   clamp() ucunu de tanimlar:
     alt sinir 960px - dar/orta ekranda BUGUNKU genislik korunur,
                       hicbir sey degismez;
     tercih   66vw   - ekran buyudukce panel de buyur;
     ust sinir 1320px - form satirlarinin okunaksiz derecede
                       uzamasini engeller (goz bir satirda kaybolmasin).

   width:100% ile birlikte kucuk ekranda kolonu tamamen doldurur;
   max-width sadece tavan koydugu icin tasma yapmaz.

   :has() destegi yoksa (eski tarayici) kural hic devreye girmiyor -
   panel eski (tam genislik) haliyle calismaya devam eder, kirilma
   olmaz.
   ------------------------------------------------------------ */
@supports selector(:has(a, b)) {
    .widget:not(:has(.table100)) {
        width: 100%;
        max-width: clamp(960px, 66vw, 1320px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ------------------------------------------------------------
   Dar kolona sikismis paneller (RoleCreate, RoleUpdate,
   AddRoleToUser)

   Bu 3 sayfada panel ".row > .col-md-8 > .widget" seklinde -
   yukaridaki kural widget'i KENDI kolonunun icinde ortaliyor,
   ama kolonun kendisi (%66) satirin solunda durdugu icin panel
   yine de sola yasli gorunuyordu.

   .col-md-8 Bootstrap4'te flex item (float degil); "margin: 0
   auto" bir flex item'i, kapsayan satirda bosluk oldugunda kendi
   ekseni uzerinde ortalar - bilinen bir flexbox davranisi.
   ------------------------------------------------------------ */
@supports selector(:has(a, b)) {
    .row > .col-md-8:has(> .widget) {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ------------------------------------------------------------
   Kaydet/Guncelle/Ekle butonunun durdugu alan - "footer" bandi

   Markup'a dokunulmadan, dugmeyi saran son div :has() ile
   yakalanip ust hat + hafif pirinc zeminle ayriliyor. Boylece
   panel tek duz blok degil, govde + eylem alani olarak okunuyor.
   Yalnizca formun SON cocugu hedeflenir; formun ortasindaki
   (mesela modal acan) butonlar etkilenmez.
   ------------------------------------------------------------ */
@supports selector(:has(a, b)) {
    .widget-body form > .row > .col-12 > div:last-child:has(> .btn.theme-btn),
    .widget-body form > .row > .col-12 > div:last-child:has(> .theme-btn) {
        margin-top: 28px !important;
        padding-top: 22px;
        border-top: 1px solid rgba(181, 164, 121, 0.22);
        background: linear-gradient(180deg,
            rgba(181, 164, 121, 0) 0%,
            rgba(181, 164, 121, 0.05) 100%);
        border-radius: 0 0 10px 10px;
    }
}

/* ------------------------------------------------------------
   Acilir listeler (select)

   SINIR: Bir <select> acildiginda gorunen option listesini
   isletim sistemi cizer, sayfa degil. Oradaki mavi vurgu
   Windows'un rengi; CSS ile degistirilemez. Bu yuzden burada
   sadece KAPALI kutu bicimlendiriliyor - o kisim tamamen bizim.

   Fikir: otel resepsiyonundaki anahtar rafi. Bir yuvadan tek bir
   sey secilir ve yuvayi metinden ince bir pirinc cizgi ayirir.
   Jenerik gri ucgen yerine, cizgi + pirinc chevron.
   ------------------------------------------------------------ */

select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Chevron + ayirici cizgiye yer acar */
    padding-right: 54px;

    /* Native picker acik temada kalsin (koyu mod kullanicilari icin) */
    color-scheme: light;

    background-color: var(--surface);
    background-image:
        /* 1 - pirinc chevron */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' stroke='%23b5a479' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        /* 2 - anahtar yuvasi cizgisi */
        linear-gradient(rgba(181, 164, 121, 0.35), rgba(181, 164, 121, 0.35));
    background-repeat: no-repeat, no-repeat;
    background-position: right 16px center, right 40px center;
    background-size: 12px 8px, 1px 18px;
}

select.form-control:not([multiple]):not([size]):hover:not(:disabled) {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' stroke='%23967f4a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(rgba(181, 164, 121, 0.6), rgba(181, 164, 121, 0.6));
    background-repeat: no-repeat, no-repeat;
    background-position: right 16px center, right 40px center;
    background-size: 12px 8px, 1px 18px;
}

/* Pasif listelerde tiklanabilir izlenimi verilmemeli */
select.form-control:disabled {
    background-image: none;
    padding-right: 14px;
}

/* Cok secimli listeler chevron almaz; sadece yuzey uyumu */
select.form-control[multiple],
select.form-control[size] {
    padding-right: 14px;
    background-color: var(--surface);
}

/* ------------------------------------------------------------
   ACIK LISTE (picker)

   Buradan itibarasi "customizable select": appearance: base-select
   destekleyen tarayicilarda acilan liste de sayfaya devrediliyor,
   yani isletim sisteminin mavi/beyaz listesi yerine kendi
   tasarimimiz ciziliyor.

   Tamami @supports icinde. Desteklemeyen tarayici tek bir satiri
   bile gormez, yukaridaki kapali kutu stili ve native liste ile
   calismaya devam eder. Kirilma riski yok.

   Fikir yukaridakiyle ayni: anahtar rafi. Liste rafin kendisi,
   her satir bir yuva. Secili yuva mavi bir dolgu ile degil,
   soldaki sabit olukta duran kucuk bir PIRINC ETIKET ile
   isaretlenir - resepsiyondaki anahtar etiketi gibi.
   ------------------------------------------------------------ */

@supports (appearance: base-select) {

    select.form-control:not([multiple]):not([size]) {
        appearance: base-select;
        padding-right: 16px;

        /* base-select select'i bir dugmeye cevirir; icerik hizasi elle */
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }

    /* Ok isini artik ::picker-icon goruyor; arka plana cizilen chevron ve
       ayirici cizgi TUM durumlarda kalkmali. Hover/open kurallari daha
       yuksek specificity'e sahip oldugu icin burada ayrica eziliyor -
       aksi halde iki ok ust uste binip yildiz gibi gorunuyor. */
    select.form-control:not([multiple]):not([size]),
    select.form-control:not([multiple]):not([size]):hover:not(:disabled),
    select.form-control:not([multiple]):not([size]):open {
        background-image: none;
    }

    /* Kapali kutuda secili metin - uzun kategori adlari tasmasin.
       Anahtar yuvasi cizgisi artik buranin sag kenarligi: okla birlikte
       donmesin diye ::picker-icon'a degil buraya veriliyor. */
    select.form-control selectedcontent {
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 12px;
        border-right: 1px solid rgba(181, 164, 121, 0.35);
    }

    select.form-control:hover:not(:disabled) selectedcontent {
        border-right-color: rgba(181, 164, 121, 0.6);
    }

    /* Ok. Acikken yukari doner - "raf acildi" geri bildirimi */
    select.form-control::picker-icon {
        flex: 0 0 auto;
        color: var(--brass);
        transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                    color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    select.form-control:hover::picker-icon {
        color: #967f4a;
    }

    select.form-control:open::picker-icon {
        transform: rotate(180deg);
    }

    select.form-control:open {
        border-color: var(--brass);
        box-shadow: 0 0 0 3px rgba(181, 164, 121, 0.18);
    }

    /* --- Rafin kendisi --- */
    ::picker(select) {
        appearance: base-select;

        margin-block-start: 6px;
        padding: 6px;
        max-block-size: 20rem;
        overflow-y: auto;
        overscroll-behavior: contain;

        background: var(--surface);
        border: 1px solid rgba(var(--ink-shadow), 0.12);
        border-radius: 14px;
        box-shadow:
            0 2px 6px rgba(var(--ink-shadow), 0.08),
            0 18px 42px rgba(var(--ink-shadow), 0.16);

        /* SADECE ACILIS animasyonlu: 120ms. Ortam animasyonu degil,
           dogrudan etkilesime cevap - listenin nereden geldigini gosterir.

           Kapanista bilerek animasyon YOK. Popover kapanirken ust
           katmandan (top layer) dusuyor; gecisi surdurmek icin display
           ve overlay'in ayri ayri allow-discrete ile tasinmasi gerekiyor,
           aksi halde liste bir kare boyunca yeniden olculenip goz kirpma
           gibi bir sicrama yapiyor. Kapanis animasyonu zaten hicbir bilgi
           tasimadigi icin ekleyip riske girmek yerine kaldirildi. */
        opacity: 1;
        translate: 0 0;
        transition: opacity 0.12s ease, translate 0.12s ease;
    }

    @starting-style {
        ::picker(select) {
            opacity: 0;
            translate: 0 -6px;
        }
    }

    /* --- Yuvalar --- */
    select.form-control option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 14px;
        border-radius: 9px;
        font-size: 14px;
        line-height: 1.35;
        color: #2d3748;
        cursor: pointer;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

    /* Klavye ve fare ayni gorunumu paylasir */
    select.form-control option:hover,
    select.form-control option:focus {
        background-color: rgba(181, 164, 121, 0.14);
        outline: none;
    }

    select.form-control option:checked {
        background-color: rgba(181, 164, 121, 0.22);
        color: #5c4f2e;
        font-weight: 600;
    }

    /* Anahtar etiketi: secili satiri isaretleyen kucuk pirinc dikdortgen.
       Isaret alani her satirda ayni genislikte durur, boylece secim
       degistiginde metinler saga sola kaymaz. */
    select.form-control option::checkmark {
        content: "";
        flex: 0 0 auto;
        inline-size: 3px;
        block-size: 14px;
        border-radius: 2px;
        background: var(--brass);
        opacity: 0;
    }

    select.form-control option:checked::checkmark {
        opacity: 1;
    }

    /* Raf kaydirma cubugu da sicak tonda */
    ::picker(select)::-webkit-scrollbar {
        width: 10px;
    }

    ::picker(select)::-webkit-scrollbar-thumb {
        background: rgba(181, 164, 121, 0.45);
        border: 3px solid var(--surface);
        border-radius: 6px;
    }

    ::picker(select)::-webkit-scrollbar-thumb:hover {
        background: rgba(181, 164, 121, 0.7);
    }

    /* "Hareketi azalt" acikken acilis animasyonu olmaz.
       ui-transitions.css'teki genel kural pseudo-element olan
       ::picker'i kapsamiyor, bu yuzden ayrica yaziliyor. */
    @media (prefers-reduced-motion: reduce) {
        ::picker(select),
        select.form-control::picker-icon,
        select.form-control option {
            transition-duration: 0.01ms;
        }

        @starting-style {
            ::picker(select) {
                opacity: 1;
                translate: 0 0;
            }
        }
    }
}

/* ============================================================
   SAYFA ISKELETI - olculer ekrana gore, sabit degil

   Sorun neydi:
   style.css'te ".hero { min-height: 900px }" var. 900 sabit bir
   sayi; ekran (veya tarayici %50'ye kucultuldugunde olusan genis
   gorunum) 900px'den uzun oldugunda hero orada bitiyor, footer
   sayfanin ORTASINDA asili kaliyor ve altinda bos bir serit
   olusuyordu.

   Cozum: yukseklik artik ekrandan turetiliyor. site-wrapper en az
   bir ekran boyu, hero de artan boslugu yutuyor - boylece footer
   ne kadar az icerik olursa olsun her zaman en altta.
   ============================================================ */

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Mobil tarayicilarda adres cubugu acilip kapandikca 100vh
   kayar; dvh varsa o kullanilir. Destek yoksa ustteki 100vh
   yururlukte kalir. */
@supports (min-height: 100dvh) {
    .site-wrapper {
        min-height: 100dvh;
    }
}

/* Artan dikey bosluk hero'nun: icerik kisa olsa bile zemin
   ekrani doldurur, footer dibe iner.
   min-height:0 - style.css'teki 900px sabitini iptal eder;
   artik yukseklik icerige + ekrana gore belirleniyor. */
section.hero.bg-image {
    flex: 1 0 auto;
    min-height: 0;
}

.site-wrapper > .footer {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Icerik kolonu

   Bootstrap ".container" basamakli ve 1140px'te duruyor. Ekranin
   geri kalani ne kadar genis olursa olsun icerik o 1140'ta
   kaliyordu - "%50'de ortada kucuk bir sayfa" gorunumunun ikinci
   sebebi buydu.

   min() ile: normalde ekranin %92'si (yani her genislikte
   akiskan), cok genis ekranlarda 1440px'te durur - satirlar
   okunamayacak kadar uzamasin diye.

   Kapsam: navbar ve footer'daki .container'lar disarida (secici
   hero govdesine bagli). ".font-white" de disarida - o, bu dosyada
   baska yerlerde de kullanilan ayirt edici sinif: _Layout'un
   (giris/sifre sayfalari) container'i. Oradaki kart genisligi
   govdenin %35'i olarak tanimli, container'i genisletmek kartin
   olcusunu de degistirirdi; o sayfalar oldugu gibi kaliyor.
   ------------------------------------------------------------ */
section.hero .hero-inner > .container:not(.font-white) {
    width: 100%;
    max-width: min(1440px, 92vw);
}

/* ------------------------------------------------------------
   Ust bosluk

   main.css'te ".hero { padding-top: 7% }" var. Yuzde padding
   YUKSEKLIGE degil GENISLIGE oranlanir - yani ekran genisledikce
   ustteki bosluk da buyuyor, panel asagi kaciyordu.

   min() bir tavan koyar: dar/orta ekranda bugunku 7% aynen
   surer, genis ekranda 110px'i gecmez.

   Mobildeki 17% degeri (navbar'in altindan cikmak icin gerekli)
   bilerek disarida birakildi - kural 768px'ten sonra basliyor.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    section.hero.bg-image {
        padding-top: min(7%, 110px);
    }
}

/* Admin menusu sigmadiginda iki satira iner ve sabit header uzar.
   _AdminLayout header yuksekligini --admin-header-h olarak yaziyor;
   bosluk hicbir zaman header'dan kisa kalmasin. Degisken yoksa
   (diger layout'lar) 0px'e duser ve kural etkisiz kalir. */
@media (min-width: 992px) {
    section.hero.bg-image {
        padding-top: max(min(7%, 110px), calc(var(--admin-header-h, 0px) + 12px));
    }
}