/* ==========================================================================
   HOTELIL — ORTAK ARAYÜZ KATMANI (ui.css)

   ⚠ BU DOSYA İKİ DEPODA BİREBİR AYNI OLMALI:
       pansiyon/panel/assets/ui.css
       pansiyonmaster/assets/ui.css

   Elle iki yere yazma. Birini düzenle, sonra:
       php tools/ui-css-esitle.php
   `tests/check_ui_css.php` iki kopyanın özetini karşılaştırır; ayrıştıysa
   test kalır. Yorum satırıyla korunan «ikisi aynı olsun» kuralı sessizce
   bozuluyordu, bu yüzden artık ölçülüyor.

   ---------------------------------------------------------------------------
   NEDEN VAR

   Otel paneli ile master panelin stil dosyaları aynı dosyanın çatallanmış
   iki kopyasıydı: 375 ortak seçici, gövdesi farklı olan yalnızca 7 tane.
   Yani düğme ve tablo zaten aynı görünüyordu — ama tek bir bileşeni
   değiştirmek iki dosyaya elle yazmayı gerektiriyordu ve unutulan taraf
   sessizce geride kalıyordu.

   ---------------------------------------------------------------------------
   YENİ EKRAN YAZARKEN

   1. Önce buradan bir bileşen ara. Düğme, form alanı, tablo, kart, uyarı,
      rozet, sekme, sayaç ve boşluk/metin yardımcıları burada.
   2. Bulamazsan ve iş İKİ panelde de geçiyorsa, bileşeni BURAYA ekle.
   3. Yalnızca tek panele ait bir şeyse (rezervasyon ekranı, otel detayı)
      o panelin kendi dosyasına yaz.
   4. `style="..."` yazma. Boşluk ve punto için aşağıdaki yardımcılar var;
      yoksa bileşene bir sınıf ekle.
   ========================================================================== */

:root {
    /* --- renk -------------------------------------------------------------
       Doğrudan hex yazmak yerine bunları kullan; tema değişirse tek yerden
       döner. Değerler mevcut tasarımdan alındı, hiçbiri değişmedi. */
    --ui-metin:            #1e293b;   /* birincil metin */
    --ui-metin-ikincil:    #475569;   /* etiket, tablo başlığı */
    --ui-metin-soluk:      #64748b;   /* açıklama, ikincil bilgi */
    --ui-cizgi:            #e2e8f0;   /* kenarlık */
    --ui-cizgi-koyu:       #cbd5e1;   /* vurgulu kenarlık */
    --ui-zemin:            #ffffff;
    --ui-zemin-yumusak:    #f8fafc;   /* kart içi kutu, tablo başlığı */
    --ui-zemin-yumusak-2:  #f1f5f9;   /* ayraç, pasif rozet */

    --ui-birincil:         #3b82f6;
    --ui-birincil-koyu:    #1d4ed8;
    --ui-birincil-soluk:   #eef2ff;
    --ui-vurgu:            #4f46e5;   /* aktif sekme çizgisi */

    --ui-iyi:              #166534;
    --ui-iyi-zemin:        #dcfce7;
    --ui-bilgi:            #1e40af;
    --ui-bilgi-zemin:      #dbeafe;
    --ui-uyari:            #92400e;
    --ui-uyari-zemin:      #fef3c7;
    --ui-kotu:             #dc2626;
    --ui-kotu-zemin:       #fee2e2;

    /* --- boşluk ölçeği ---------------------------------------------------
       Yardımcı sınıflar (.mb-1 … .mb-6) bu ölçeğe oturur. Ara değer
       gerekiyorsa ölçeği büyütme — bileşene sınıf yaz. */
    --ui-sp-1: 4px;
    --ui-sp-2: 8px;
    --ui-sp-3: 12px;
    --ui-sp-4: 16px;
    --ui-sp-5: 24px;
    --ui-sp-6: 32px;

    /* --- yuvarlaklık ------------------------------------------------------ */
    --ui-r-sm: 8px;    /* form alanı */
    --ui-r-md: 10px;   /* düğme, uyarı */
    --ui-r-lg: 12px;   /* bölüm kutusu */
    --ui-r-xl: 16px;   /* kart */
    --ui-r-hap: 20px;  /* rozet */

    /* --- punto ------------------------------------------------------------ */
    --ui-yazi-xs: 12px;
    --ui-yazi-sm: 13px;
    --ui-yazi-md: 14px;
    --ui-yazi-lg: 17px;
}

/* ==========================================================================
   METİN
   ========================================================================== */

/*
 * `.muted` iki panelde toplam 573 yerde yazılmıştı ama HİÇBİR dosyada
 * tanımlı değildi — hepsi normal gövde metni olarak çıkıyordu. Yazan
 * herkesin niyeti ikincil metindi; burada karşılığı veriliyor.
 *
 * Yalnızca RENK veriliyor: punto da küçültülseydi bugüne kadar `.muted`
 * yazılmış her satır aynı anda küçülürdü. Küçük punto isteyen yerler
 * `.text-xs` / `.form-hint` ekler.
 */
.muted {
    color: var(--ui-metin-soluk);
}

.text-xs { font-size: var(--ui-yazi-xs); }
.text-sm { font-size: var(--ui-yazi-sm); }
.text-md { font-size: var(--ui-yazi-md); }

.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Bölüm başlığı — kart içindeki en üst başlık. */
.section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ui-metin);
    margin-bottom: var(--ui-sp-5);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* Sekme içi birinci düzey başlık. */
.ui-h3 {
    margin: 0 0 14px;
    font-size: var(--ui-yazi-lg);
}

/* Sekme içi ikinci düzey başlık (bölüm kutusunun başı). */
.ui-h4 {
    margin: 0 0 var(--ui-sp-3);
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}

/* ==========================================================================
   DÜĞMELER
   ========================================================================== */

.btn {
    /* 42 px: metinli düğmenin dolgu+kenarlıkla ulaştığı yükseklik ve form
       alanlarının yüksekliği. 40 iken yalnız ikon taşıyan düğme (ikon 14 px)
       bu tabana düşüyor ve komşusundan 2 px alçak kalıyordu. */
    min-height: 42px;
    padding: 10px 16px;
    border-radius: var(--ui-r-md);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--ui-yazi-sm);
    transition: all 0.3s ease;
    /*
     * Saydam kenarlık: `border: none` idi ve `.btn-secondary` 1 px kenarlık
     * eklediği için yan yana duran birincil/ikincil düğmeler 40 ve 42 px
     * oluyordu — aynı satırda alt hizaları tutmuyordu.
     */
    border: 1px solid transparent;
    /*
     * Açık satır yüksekliği. `<a class="btn">` gövdeden `line-height: 1.6`
     * miras alıyor, `<button>` almıyordu: aynı satırdaki bağlantı düğmesi
     * 43 px, düğme etiketi 40 px oluyordu. Sabitlenince ikisi de 42 px —
     * form alanlarıyla da aynı yükseklik.
     */
    line-height: 20px;
    cursor: pointer;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ui-sp-2);
    max-width: 100%;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
}

.btn i,
.btn svg {
    font-size: var(--ui-yazi-md);
}

.btn-primary {
    background: linear-gradient(135deg, var(--ui-birincil), var(--ui-birincil-koyu));
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: var(--ui-zemin-yumusak);
    color: var(--ui-metin-ikincil);
    border: 1px solid var(--ui-cizgi);
}

.btn-secondary:hover {
    background: var(--ui-cizgi);
}

.btn-danger {
    background: #ef4444;
    color: #fff;
}

/*
 * `btn-sm` bilerek küçültmüyor. Tek dokunma hedefi standardı var; farklı
 * boyda düğmeler aynı satırda hizasız duruyordu. Sınıf yalnızca "satır
 * içinde, sarmasın" anlamına geliyor.
 */
.btn-sm {
    min-height: 42px;
    padding: 10px 16px;
    font-size: var(--ui-yazi-sm);
    white-space: nowrap;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Düğme çubuğu — bir formun altındaki kaydet/vazgeç grubu.
   `hidden` verilince gerçekten gizlenir: satır içi `display:flex`
   `hidden`ı yeniyordu ve kendi kaydet düğmesi olan sekmelerde ana
   çubuk ekranda kalıyordu. */
.ui-actions {
    display: flex;
    gap: 10px;
    margin-top: var(--ui-sp-4);
    flex-wrap: wrap;
}

.ui-actions[hidden] {
    display: none;
}

/* Tabloda satır içi tek düğmelik form — `style="display:inline;margin:0"`
   deseni iki panelde 17 kez yazılmıştı. */
.ui-inline-form {
    display: inline;
    margin: 0;
}

/* ==========================================================================
   KARTLAR VE BÖLÜMLER
   ========================================================================== */

.panel-card {
    background: var(--ui-zemin);
    border-radius: var(--ui-r-xl);
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--ui-cizgi);
    margin-bottom: 28px;
    min-width: 0;
    max-width: 100%;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--ui-sp-5);
    min-width: 0;
    gap: var(--ui-sp-3);
}

.card-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--ui-birincil), var(--ui-birincil-koyu));
    border-radius: var(--ui-r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ui-metin);
    min-width: 0;
    overflow-wrap: anywhere;
}

.card-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--ui-metin);
    margin-bottom: var(--ui-sp-2);
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
}

.card-subtitle {
    color: var(--ui-metin-soluk);
    font-size: var(--ui-yazi-md);
    font-weight: 500;
}

/*
 * Bölüm kutusu — kartın İÇİNDE ilgili alanları gruplar. Uzun bir ayar
 * formunun neresinin nerede bittiği kutusuz okunmuyordu.
 */
.ui-section {
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-lg);
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--ui-zemin);
}

.ui-section > .ui-h4 {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-zemin-yumusak-2);
}

/* Son çocuğun alt boşluğu kutunun dolgusuyla üst üste biniyordu. */
.ui-section > *:last-child {
    margin-bottom: 0;
}

/* Zemini yumuşak, ikincil kutu (eski `.settings-template-block` /
   `.settings-test-mail` deseni). */
.ui-box {
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-lg);
    padding: 14px;
    margin-bottom: 14px;
    background: var(--ui-zemin);
}

.ui-box--soft {
    background: var(--ui-zemin-yumusak);
    border-style: dashed;
    border-color: var(--ui-cizgi-koyu);
}

.ui-box > h4 {
    margin: 0 0 10px;
    font-size: var(--ui-yazi-md);
    color: #0f172a;
}

/* ==========================================================================
   FORMLAR
   ========================================================================== */

/*
 * `align-items: start` masterdan geldi ve tek doğru olarak buraya alındı.
 * Varsayılan `stretch` ile bir sütunun altındaki açıklama komşusunun
 * kutusunu da uzatıyor, alanların altında sebepsiz boşluk kalıyordu.
 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 18px;
    margin-bottom: 18px;
    align-items: start;
    min-width: 0;
}

.form-grid .form-group { min-width: 0; }

.form-grid > * {
    min-width: 0;
}

.form-grid--triple,
.form-grid--quad {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.form-grid--nav {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}

.form-grid--double {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Renk seçici — tarayıcı varsayılanı 60x25 ve kutu gibi durmuyor. */
.ui-color-input {
    width: 54px;
    height: 38px;
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-sm);
    padding: 2px;
    background: var(--ui-zemin);
    cursor: pointer;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: var(--ui-yazi-sm);
    color: var(--ui-metin-ikincil);
}

/*
 * GİRDİ GÖRÜNÜMÜ ETİKETE BAĞLI, SARMALAYICIYA DEĞİL.
 *
 * Daha önce yalnızca `.form-group input` biçimlendiriliyordu. Tablo
 * hücresine ya da satır içine konan bir alan hiçbir kural almıyor ve
 * tarayıcının çıplak kutusu olarak çıkıyordu: Mail sekmesindeki DNS
 * tablosunda keskin köşeli, küçük, dolgusuz kutular hemen altındaki
 * yuvarlak SMTP alanlarının yanında duruyordu.
 *
 * ui.css yalnızca iki panel tarafından yükleniyor (ön yüz sitesi kendi
 * dosyasını kullanır), bu yüzden etiket seçicisi güvenli.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]),
select,
textarea {
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-sm);
    background: var(--ui-zemin);
    color: var(--ui-metin);
    font-family: inherit;
    font-size: var(--ui-yazi-md);
    line-height: 1.4;
    /* `select` iç yüksekliğini kendi hesaplıyordu ve komşusu `input`tan
       1 px alçak kalıyordu; düğmelerle de aynı ölçü. */
    min-height: 42px;
}

/*
 * DOKUNMA HEDEFİ — DAR EKRAN.
 *
 * 44 px altı kutular parmakla ıskalanıyor; 16 px altı yazı ise iOS'ta
 * odaklanınca sayfayı kendiliğinden yakınlaştırıyor ve kullanıcı her
 * girişten sonra elle geri çıkarmak zorunda kalıyor.
 *
 * KURAL BURADA, TABANIN YANINDA: bileşen başına yazılan `.pf-filters input`
 * biçimindeki bir seçici (0,3,1), yukarıdaki dokuz `:not()` taşıyan genel
 * kuralı (0,9,1) YENEMİYOR ve sessizce etkisiz kalıyordu — bu depoda aynı
 * tuzağa beşinci düşüş. Aynı zinciri tekrarlamak yerine kuralın kendisi
 * dar ekranda güncelleniyor; dokunma hedefi zaten her form alanı için
 * geçerli olmalı, yalnızca filtreler için değil.
 */
@media (max-width: 560px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="image"]),
    select,
    textarea {
        min-height: 46px;
        font-size: 16px;
        padding: 11px 13px;
    }

    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        height: 46px;
    }
}

/* Tarih alanı takvim ikonu yüzünden 2 px daha uzun açılıyor. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    height: 42px;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

/* Kod/etiket yapıştırılan alan — eşaralıklı yazı tipi.
   `<head>` kodu, webhook gövdesi gibi yerlerde satır içi stil yazılıyordu. */
.form-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
}

/* Odak halkası. Sistemde yalnızca iki ekrana özel odak kuralı vardı;
   geri kalan her alan tarayıcının varsayılan çerçevesiyle kalıyordu. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ui-birincil);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/*
 * Simge kutusu — tek emoji girilen küçük alan (modül ikonu).
 * Satır içi `style` ile yazılıyordu; ölçüler ortak katmanda dursun.
 */
.ui-icon-input {
    font-size: 20px;
    text-align: center;
    max-width: 96px;
}

/*
 * Devre dışı düğme TIKLANABİLİR GÖRÜNMEMELİ. Tanımlı değildi: `disabled`
 * yazan düğme birebir normal düğme gibi duruyordu ve kullanıcı basıp
 * hiçbir şey olmayınca sistemin bozuk olduğunu sanıyordu.
 */
.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn:disabled:hover,
.btn[disabled]:hover {
    transform: none;
    filter: none;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--ui-zemin-yumusak);
    color: var(--ui-metin-soluk);
    cursor: not-allowed;
}

/* Sarmalayıcının katkısı yalnızca DÜZEN: alanı satırın tamamına yay. */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
}

/* Tablo hücresindeki alan da hücresini doldursun — sütun genişliği
   `th` üzerinde belirleniyor, alan ondan dar kalırsa başlık hizası kayar. */
.data-table td input,
.data-table td select,
.data-table td textarea {
    width: 100%;
}


/*
 * Yukarıdaki `width: 100%` onay ve seçim kutularına da uygulanıyordu:
 * kutu satırın tamamını kaplıyor, yanındaki yazı kalan dar şeride sıkışıp
 * üç satıra bölünüyordu. Tek tek `style="width:auto"` yazmak yerine
 * tipe göre kesiliyor.
 */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
}

/* Alan altındaki açıklama. `style="font-size:12px;margin-top:6px"` deseni
   iki panelde 40'tan fazla yerde elle yazılmıştı. */
.form-hint {
    margin: 6px 0 0;
    font-size: var(--ui-yazi-xs);
    line-height: 1.5;
    color: var(--ui-metin-soluk);
}

/* Genişliği sınırlanan alan — 1400 px'lik kolonda tek başına duran bir
   «KDV oranı» kutusu ekranı boydan boya kaplamasın. */
.form-group--narrow { max-width: 420px; }
.form-group--mini   { max-width: 320px; }

.form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.form-checkboxes label {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-2);
    font-weight: 500;
    cursor: pointer;
}

/*
 * Onay kutusu satırı: kutu solda sabit, başlık ve açıklaması sağda blok.
 * Açıklamayı kutunun altına serbest paragraf olarak koymak, hangi
 * açıklamanın hangi kutuya ait olduğunu belirsiz bırakıyordu.
 */
.ui-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.ui-check + .ui-check {
    padding-top: 14px;
    border-top: 1px solid var(--ui-zemin-yumusak-2);
}

.ui-check input[type="checkbox"],
.ui-check input[type="radio"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    cursor: pointer;
}

.ui-check__text { min-width: 0; }

.ui-check__title {
    display: block;
    font-weight: 600;
    font-size: var(--ui-yazi-md);
    color: #0f172a;
    cursor: pointer;
}

.ui-check__text .form-hint { margin-top: var(--ui-sp-1); }

/* Devre dışı onay kutusunun etiketi de soluklaşsın. */
.ui-check input[type="checkbox"]:disabled + .ui-check__text,
input[type="checkbox"]:disabled + strong { opacity: .75; }

/* ==========================================================================
   TABLOLAR
   ========================================================================== */

.data-table-wrap {
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    /*
     * `contain: layout` — kutu KAYDIRIYOR olmasına rağmen geniş tablo
     * sayfayı yatay kaydırıyordu: 390 px ekranda 571 px sayfa, 185 px
     * gerçek kayma. Kutunun düzeni dış akıştan yalıtılınca taşma içeride
     * kalıyor ve kaydırma çubuğu çalışmaya devam ediyor.
     *
     * ÖLÇÜLDÜ: `overflow-x: hidden`, `width: 100%` ve `max-width: 100vw`
     * bu taşmayı çözmüyor — yalnızca yalıtım çözüyor.
     */
    contain: layout;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ui-yazi-md);
}

.data-table th,
.data-table td {
    padding: var(--ui-sp-3) 14px;
    text-align: left;
    border-bottom: 1px solid var(--ui-cizgi);
}

.data-table th {
    background: var(--ui-zemin-yumusak);
    font-weight: 600;
    color: var(--ui-metin-ikincil);
}

.data-table tr:hover td {
    background: #fafafa;
}

/* ==========================================================================
   UYARI KUTULARI
   ========================================================================== */

.alert {
    padding: 14px 18px;
    border-radius: var(--ui-r-md);
    margin-bottom: var(--ui-sp-5);
    font-size: var(--ui-yazi-md);
}

.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-warn {
    background: var(--ui-uyari-zemin);
    color: var(--ui-uyari);
    border: 1px solid #fde68a;
}

/*
 * Bilgi kutusu — hata da uyarı da değil, "şunu bilin" kutusu.
 * Yoksa sayfalar `.alert alert-info` yazıp renksiz bir kutu alıyordu;
 * `.muted` ve `.btn-secondary` ile aynı tuzak (tanımsız sınıf sessizce
 * hiçbir şey yapmaz).
 */
.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* ==========================================================================
   ROZETLER

   Renk anlamı adın İÇİNDE. Daha önce sayfalar tema sınıflarını elle
   yazıyordu — `status-occupied` = "dolu oda" = amber — ve «Aktif» sarı
   görünüyordu. `state-ok` yazan yeşil olur, başka ihtimali yok.
   ========================================================================== */

.state-badge,
.status-badge {
    padding: 6px var(--ui-sp-3);
    border-radius: var(--ui-r-hap);
    font-size: var(--ui-yazi-xs);
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

/* Olumlu, beklenen durum — aktif, doğrulandı, güncel, çalışıyor */
.state-ok   { background: var(--ui-iyi-zemin);   color: var(--ui-iyi); }
/* Bilgi — nötr ama dikkat çeken; birincil alan adı, sürüyor */
.state-info { background: var(--ui-bilgi-zemin); color: var(--ui-bilgi); }
/* Eylem bekliyor — henüz sorun değil; doğrulanmadı, göç bekliyor */
.state-warn { background: var(--ui-uyari-zemin); color: var(--ui-uyari); }
/* Sorun — kurulamadı, hatalı, süresi geçti */
.state-bad  { background: var(--ui-kotu-zemin);  color: var(--ui-kotu); }
/* Kapalı/nötr — pasif, arşiv, etiket. Renk anlam TAŞIMAZ. */
.state-off  { background: var(--ui-zemin-yumusak-2); color: var(--ui-metin-ikincil); }

/* ==========================================================================
   SEKMELER

   Üç düzey var ve görsel ağırlıkları azalarak gider:
     1. `.ui-tabs`            hap        — ekranın ana bölümleri
     2. `.ui-tabs--sub`       alt çizgi  — bir bölümün içindeki bölmeler
     3. `.ui-tabs--mini`      küçük hap  — bir bölmenin içindeki gruplar

   İşaretleme:
     <div class="ui-tabs" data-ui-tabs>
       <button class="ui-tab is-active" data-ui-tab="x">…</button>
     <div class="ui-tab-panel is-active" data-ui-panel="x">…</div>

   `.settings-tab` ve `.reservation-tab` eski adlar; aynı görünümü alırlar.
   Yeni ekranda `.ui-tab` yaz.
   ========================================================================== */

.ui-tabs,
.settings-tabs,
.reservation-tablist,
.tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-sp-2);
    margin-bottom: var(--ui-sp-4);
}

/*
 * `.panel-card a:not(.btn)` bağlantıları mavi ve altı çizili yapıyor;
 * bağlantı olarak yazılmış sekmeler ondan kurtulmak için daha yüksek
 * belirginlik istiyor. Yükleme sırasından bağımsız çalışsın diye burada.
 */
.ui-tab,
.settings-tab,
.reservation-tab,
.site-editor__tab,
.tab-btn,
.panel-card .ui-tab,
.panel-card a.ui-tab:not(.btn),
.panel-card a.settings-tab:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--ui-cizgi-koyu);
    background: var(--ui-zemin-yumusak);
    color: #334155;
    padding: 9px 13px;
    border-radius: var(--ui-r-md);
    font-family: inherit;
    font-size: var(--ui-yazi-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    /*
     * Sabit iç yükseklik. Düğmelerdeki tuzağın aynısı: `<a class="ui-tab">`
     * satır yüksekliğini gövdeden miras alıyor, `<button>` almıyor —
     * masterda bağlantı sekmeleri 36 px, düğme sekmeleri 42 px çıkıyordu.
     */
    line-height: 18px;
    min-height: 38px;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Sekme içindeki sayaç rozeti sekmeyi uzatmasın — «Talepler 1» sekmesi
   yanındakilerden 4 px yüksek duruyordu. */
.ui-tab .state-badge,
.ui-tab .status-badge,
.ui-tab .nav-badge,
.settings-tab .state-badge {
    /* `.nav-badge` kenar çubuğu için `height: 22px` ile sabitlenmiş; sekme
       içinde o yükseklik sekmeyi 42 px'e çıkarıyordu. */
    height: auto;
    min-width: 18px;
    padding: 1px 7px;
    font-size: 11px;
    line-height: 16px;
}

.ui-tab:hover,
.settings-tab:hover,
.reservation-tab:hover,
.site-editor__tab:hover,
.tab-btn:hover,
.panel-card a.ui-tab:not(.btn):hover,
.panel-card a.settings-tab:not(.btn):hover {
    background: var(--ui-zemin-yumusak-2);
    border-color: #94a3b8;
    color: var(--ui-metin);
    text-decoration: none;
}

.ui-tab:focus,
.ui-tab:active,
.settings-tab:focus,
.settings-tab:active,
.reservation-tab:focus {
    text-decoration: none;
}

.ui-tab.is-active,
.ui-tab--active,
.settings-tab.is-active,
.settings-tab--active,
.reservation-tab.is-active,
.site-editor__tab.is-active,
.tab-btn.is-active,
.tab-btn--active,
.panel-card a.ui-tab--active:not(.btn),
.panel-card a.settings-tab--active:not(.btn) {
    background: var(--ui-birincil-soluk);
    border-color: #818cf8;
    color: #312e81;
    text-decoration: none;
    box-shadow: none;
}

.ui-tab i,
.settings-tab i,
.reservation-tab i,
.site-editor__tab i,
.tab-btn i {
    font-size: var(--ui-yazi-sm);
    opacity: 0.85;
}

/*
 * İkinci düzey. Aynı hap görünümü olsaydı hangisinin hangisinin içinde
 * olduğu okunmazdı; alt çizgili yazı sekmesi hiyerarşiyi taşıyor.
 */
.ui-tabs--sub {
    gap: var(--ui-sp-1);
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ui-cizgi);
}

.ui-tabs--sub .ui-tab,
.ui-tabs--sub .settings-tab,
.ui-tabs--sub .tab-btn {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    padding: var(--ui-sp-2) var(--ui-sp-3);
    margin-bottom: -1px;
    color: var(--ui-metin-soluk);
}

.ui-tabs--sub .ui-tab:hover,
.ui-tabs--sub .settings-tab:hover,
.ui-tabs--sub .tab-btn:hover {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--ui-cizgi-koyu);
    color: #334155;
}

.ui-tabs--sub .ui-tab.is-active,
.ui-tabs--sub .settings-tab.is-active,
.ui-tabs--sub .tab-btn.is-active {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--ui-vurgu);
    color: #312e81;
}

/* Üçüncü düzey — hap kalır ama küçülür, ikinci düzeyden ağır durmasın. */
.ui-tabs--mini .ui-tab,
.ui-tabs--mini .settings-tab,
.ui-tabs--mini .tab-btn {
    font-size: var(--ui-yazi-xs);
    padding: 7px 11px;
}

.ui-tab-panel,
.ui-subpane {
    min-width: 0;
}

.ui-tab-panel[hidden],
.ui-subpane[hidden] {
    display: none !important;
}

/* ==========================================================================
   SAYAÇ ŞERİDİ

   Cümle içine gömülü rakamlar («sırada 3 · kesildi 12 · başarısız 1»)
   göz taramasına direniyordu.
   ========================================================================== */

.ui-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.ui-stat {
    flex: 0 1 auto;
    min-width: 120px;
    padding: 10px 14px;
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-md);
    background: var(--ui-zemin-yumusak);
}

.ui-stat__label {
    display: block;
    font-size: var(--ui-yazi-xs);
    color: var(--ui-metin-soluk);
    margin-bottom: 2px;
}

.ui-stat__value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.ui-stat--ok  .ui-stat__value { color: #15803d; }
.ui-stat--bad .ui-stat__value { color: #b91c1c; }

/* ==========================================================================
   YARDIMCI SINIFLAR

   Yalnızca boşluk, hizalama ve akış. Renk/punto için yukarıdaki bileşenler
   var — yardımcı sınıfla tasarım kurulmaz, yalnızca yerleştirilir.
   ========================================================================== */

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--ui-sp-1); }
.mb-2 { margin-bottom: var(--ui-sp-2); }
.mb-3 { margin-bottom: var(--ui-sp-3); }
.mb-4 { margin-bottom: var(--ui-sp-4); }
.mb-5 { margin-bottom: var(--ui-sp-5); }
.mb-6 { margin-bottom: var(--ui-sp-6); }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--ui-sp-1); }
.mt-2 { margin-top: var(--ui-sp-2); }
.mt-3 { margin-top: var(--ui-sp-3); }
.mt-4 { margin-top: var(--ui-sp-4); }
.mt-5 { margin-top: var(--ui-sp-5); }
.mt-6 { margin-top: var(--ui-sp-6); }

.m-0 { margin: 0 !important; }

/* Yatay dizi — düğme grubu, etiket şeridi. */
.ui-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ui-row--end   { align-items: flex-end; }
.ui-row--top   { align-items: flex-start; }
.ui-row--right { justify-content: flex-end; }

.ui-grow { flex: 1; min-width: 0; }

/* ==========================================================================
   ZENGİN METİN ALANI (.ui-editor)

   İşaretleme ve nedenler: ui.js içindeki "ZENGİN METİN ALANI" bloğu.
   ========================================================================== */

.ui-editor {
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-sm);
    background: var(--ui-zemin);
    overflow: hidden;
}

.ui-editor:focus-within {
    border-color: var(--ui-birincil);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ui-editor__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--ui-zemin-yumusak);
    border-bottom: 1px solid var(--ui-cizgi);
}

.ui-editor__btn {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--ui-metin-ikincil);
    font-family: inherit;
    font-size: var(--ui-yazi-xs);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ui-editor__btn:hover {
    background: var(--ui-zemin);
    border-color: var(--ui-cizgi);
    color: var(--ui-metin);
}

.ui-editor__btn i { font-size: 13px; }

.ui-editor__sep {
    width: 1px;
    height: 18px;
    margin: 0 5px;
    background: var(--ui-cizgi);
}

.ui-editor__area {
    min-height: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: var(--ui-yazi-md);
    line-height: 1.65;
    color: var(--ui-metin);
    outline: none;
}

/* Editörün içi ziyaretçinin göreceğine yakın dursun — otel yazarken
   sonucu tahmin etmek zorunda kalmasın. */
.ui-editor__area > *:first-child { margin-top: 0; }
.ui-editor__area > *:last-child { margin-bottom: 0; }
.ui-editor__area p { margin: 0 0 12px; }
.ui-editor__area h2 { font-size: 21px; font-weight: 700; margin: 22px 0 10px; }
.ui-editor__area h3 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.ui-editor__area ul,
.ui-editor__area ol { margin: 0 0 12px; padding-left: 22px; }
.ui-editor__area li { margin-bottom: 4px; }
.ui-editor__area a { color: var(--ui-birincil-koyu); }
.ui-editor__area img { max-width: 100%; height: auto; border-radius: var(--ui-r-sm); }

.ui-editor__area blockquote {
    margin: 0 0 12px;
    padding: 6px 0 6px 14px;
    border-left: 3px solid var(--ui-cizgi-koyu);
    color: var(--ui-metin-soluk);
}

/* Yeni araçların editör içindeki görünümü — yazarken sonucu tahmin etmek
   zorunda kalmasın diye siteye yakın. */
.ui-editor__area h4 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }

.ui-editor__area pre {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: var(--ui-r-sm);
    background: var(--ui-zemin-yumusak-2);
    border: 1px solid var(--ui-cizgi);
    overflow-x: auto;
    font-size: 13px;
}

.ui-editor__area code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
}

.ui-editor__area hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid var(--ui-cizgi-koyu);
}

.ui-editor__area table {
    width: 100%;
    margin: 0 0 12px;
    border-collapse: collapse;
    font-size: 14px;
}

.ui-editor__area th,
.ui-editor__area td {
    border: 1px solid var(--ui-cizgi);
    padding: 8px 10px;
    text-align: left;
}

.ui-editor__area th {
    background: var(--ui-zemin-yumusak);
    font-weight: 700;
}

/* ——— Kaynak kodu modu ———
   Kod yazılan alan tek aralıklı olmalı: HTML'de girinti ve hizalama,
   metnin kendisi kadar bilgi taşıyor. */
.ui-editor__kaynak {
    display: block;
    width: 100%;
    min-height: 320px;
    max-height: 60vh;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ui-metin);
    background: var(--ui-zemin-yumusak-2);
    outline: none;
}

.ui-editor__kaynak:focus {
    box-shadow: none;
    border: 0;
}

/* Açık düğme: kullanıcı hangi moddaymış görsün. */
.ui-editor__btn.is-active {
    background: var(--ui-birincil);
    border-color: var(--ui-birincil);
    color: #fff;
}

.ui-editor__btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.ui-editor__btn:disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--ui-metin-ikincil);
}

/* Kod modunda araç çubuğu daralmasın; yalnızca biçim düğmeleri sönük. */
.ui-editor.is-kod .ui-editor__bar {
    background: var(--ui-zemin-yumusak-2);
}

/* Boş alan kılavuz metni — kutunun ne beklediği yazmıyordu. */
.ui-editor__area:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
}

/* JavaScript çalışmazsa gizli textarea görünür kalır ve alan yine
   kullanılabilir olur; kutu o zaman kendi kenarlığını taşımasın. */
.ui-editor:not(.is-ready) { border: 0; }
.ui-editor:not(.is-ready) textarea { min-height: 320px; }

/* ==========================================================================
   SUNUCU KAYNAK GÖSTERGESİ (.srv-stat)

   Üst çubukta CPU / RAM / Disk yüzdesi. Ayrıntılı izleme aracı değil:
   «sunucu sıkışıyor mu» sorusunu bir bakışta yanıtlar.

   ui.css'te çünkü otel paneline de aynısı konabilir; iki yerde ayrı
   biçim yazmak bu dosyanın var olma sebebine aykırı.
   ========================================================================== */

.srv-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.srv-stat__item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 9px;
    border: 1px solid var(--ui-cizgi);
    border-radius: 8px;
    background: var(--ui-zemin-yumusak);
    color: var(--ui-metin-soluk);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: default;
}

.srv-stat__item b {
    font-size: var(--ui-yazi-xs);
    font-weight: 700;
    color: var(--ui-metin);
}

/* Renk ANLAM taşır: sarı «bakmaya değer», kırmızı «müdahale gerek».
   Eşikler includes/health.php içinde tek yerde (%75 / %90). */
.srv-stat--warn {
    border-color: #fde68a;
    background: var(--ui-uyari-zemin);
    color: var(--ui-uyari);
}

.srv-stat--warn b { color: var(--ui-uyari); }

.srv-stat--crit {
    border-color: #fca5a5;
    background: var(--ui-kotu-zemin);
    color: var(--ui-kotu);
}

.srv-stat--crit b { color: var(--ui-kotu); }

/* Dar ekranda gizlenir: üst çubukta zaten sıkışan yeri üç kutucukla
   doldurmak, asıl işlevleri (talepler, kullanıcı menüsü) taşırıyordu. */
@media (max-width: 900px) {
    .srv-stat { display: none; }
}

/* ==========================================================================
   PANEL FORM TASLAĞI (.pf-*)

   İçerik girilen ekranların ORTAK düzeni. Yazılma sebebi: tema ayarları,
   site metinleri ve benzeri ekranlarda her alan kendi genişliğini
   buluyordu — bir satırda 212 px'lik bir kutunun yanında 185 px'lik
   başkası, altında yarım kalan bir metin kutusu. Kullanıcının tarifiyle
   "inanılmaz göz yoruyor".

   ÜÇ KURAL:

   1. Kontroller kabın TAMAMINI doldurur. `ui.css` tabanı yalnızca
      `max-width: 100%` veriyor; `width` verilmediği için tarayıcı
      `size` özniteliğine göre ~20 karakterlik bir kutu çiziyordu ve
      genişlikler alan alan değişiyordu.

   2. Sütun sayısı SABİT. `auto-fill` sütun sayısını kapsayıcı genişliğine
      göre değiştiriyor; "iki sütun kapla" diyen bir alan kimi ekranda
      yarım, kimi ekranda tam duruyordu. İki sütun, dar ekranda tek.

   3. Etiket üstte, kontrol ortada, ipucu altta — her alanda aynı sırayla.
      Dikey ritim tek yerden gelir, alanlar birbirine hizalanır.
   ========================================================================== */

.pf-section {
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-lg);
    background: var(--ui-zemin);
    padding: 18px 20px;
}

.pf-section + .pf-section {
    margin-top: 16px;
}

.pf-section__head {
    margin-bottom: 16px;
}

.pf-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-metin);
}

.pf-section__desc {
    margin: 4px 0 0;
    font-size: var(--ui-yazi-sm);
    line-height: 1.5;
    color: var(--ui-metin-ikincil);
}

/* Bölüm içi ara başlık (Görseller / Metinler gibi). */
.pf-subtitle {
    margin: 20px 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-metin-ikincil);
}

.pf-subtitle:first-child {
    margin-top: 0;
}

.pf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}

/* Uzun metin bir sütuna sığmaz: 280 px genişlikte paragraf düzenlemek
   pratikte imkânsız. */
.pf-field--full {
    grid-column: 1 / -1;
}

@media (max-width: 820px) {
    .pf-grid {
        grid-template-columns: 1fr;
    }
}

.pf-field {
    min-width: 0;
}

.pf-field > label,
.pf-field__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ui-metin);
}

/*
 * KONTROLLER TAM GENİŞLİK — taslağın en önemli kuralı. Aynı satırdaki iki
 * alanın farklı genişlikte olması, ekranı "dağınık" gösteren şeydi.
 */
.pf-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pf-field select,
.pf-field textarea {
    width: 100%;
}

.pf-field textarea {
    resize: vertical;
    min-height: 96px;
}

.pf-field--full textarea {
    min-height: 120px;
}

.pf-field__hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ui-metin-ikincil);
}

/* Görsel alanları: küçük önizleme + dosya seçici. */
.pf-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 14px;
    /*
     * `stretch` (varsayılan) BİLEREK: `start` verildiğinde kartlar
     * içeriklerine göre farklı boylarda kalıyor ve satır boyunca alt
     * kenarlar kırık bir çizgi oluşturuyordu. Eşit yükseklik + dosya
     * seçicinin alta yaslanması satırı toparlıyor.
     */
}

.pf-media {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--ui-cizgi);
    border-radius: var(--ui-r-md);
    background: var(--ui-zemin-yumusak);
    min-width: 0;
}

.pf-media__thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 60px;
    border-radius: var(--ui-r-sm);
    background: var(--ui-zemin-yumusak-2) center/cover no-repeat;
    border: 1px solid var(--ui-cizgi);
}

.pf-media__body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Dosya seçici her kartta AYNI hizada: kartların yüksekliği eşitken bile
   içerik uzunluğu değiştiği için düğme yukarı aşağı oynuyordu. */
.pf-media__body input[type="file"] {
    margin-top: auto;
    padding-top: 8px;
}

.pf-media__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

.pf-media__body input[type="file"] {
    width: 100%;
    font-size: 0.78rem;
}

.pf-media__label {
    margin-bottom: 0;
}

.pf-media .pf-field__hint {
    margin: 0;
}

/* ==========================================================================
   FİLTRE ÇUBUĞU (.pf-filters)

   Liste ekranlarının üstündeki arama/süzme satırı. Eskiden her ekran kendi
   esnek satırını kuruyordu ve kutular içeriklerine göre boyutlanıyordu:
   aynı satırda 182 px'lik bir kutunun yanında 111 px'lik bir açılır liste,
   yanında 220 px'lik bir arama kutusu. Beş ekranda aynı görüntü vardı.

   Sütunlar eşit; kutu sayısı ekrandan ekrana değiştiği için `auto-fit`
   BURADA doğru — içerik formlarındaki sabit iki sütun kuralı, "tam satır
   kapla" diyen alanların yarım kalmaması içindi, burada öyle bir alan yok.
   ========================================================================== */

.pf-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 10px;
    align-items: stretch;
    width: 100%;
}

.pf-filters input:not([type="checkbox"]):not([type="radio"]),
.pf-filters select {
    width: 100%;
    min-width: 0;
}

/* Etiketli filtre: etiket üstte, kontrol altta — içerik formlarıyla aynı
   dikey sıra. */
.pf-filters label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: var(--ui-yazi-sm);
    color: var(--ui-metin-ikincil);
}

.pf-filters__field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/*
 * DOĞRUDAN ÇOCUK DÜĞMELER de hizalanır: her formu ayrı bir sarmalayıcıyla
 * güncellemek yerine bileşen düğmeyi olduğu gibi kabul ediyor. Alanların
 * etiketi olduğu için düğme alta yaslanmalı, yoksa etiket hizasında havada
 * kalıyor.
 */
.pf-filters > .btn,
.pf-filters > button {
    align-self: end;
    white-space: nowrap;
}

/* Düğmeler kendi hücresinde, alanların hizasında. */
.pf-filters__actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.pf-filters__actions .btn {
    white-space: nowrap;
}

/* Tek arama kutusu + düğme: kutu genişler, düğme kendi boyunda kalır.
   Düz `auto-fit` burada düğmeye kutu kadar yer verirdi. */
.pf-filters--inline {
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 560px) {
    .pf-filters,
    .pf-filters--inline {
        grid-template-columns: 1fr;
    }

    .pf-filters .btn {
        min-height: 46px;
    }

    .pf-filters__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}