/* =========================================================================
   responsive.css — uygulamanın TEK breakpoint sahibi
   =========================================================================

   Bu dosya `media.css`'in yerine geçti. Eski dosya, artık kod tabanında
   bulunmayan seçiciler (#kasko, #sigorta, #muhtb, .file-manager-col-view,
   .search-container, #SelPaltform, .liveresult, #mini, #big) için yazılmış
   sorgular ve birbiriyle çelişen altı ayrı `.app-header__logo` genişliği
   içeriyordu. Genişlikler `device-width`/`device-aspect-ratio`/
   `-webkit-device-pixel-ratio` gibi CİHAZ sorgularıyla seçiliyordu; bunlar
   tarayıcı penceresini değil fiziksel ekranı ölçer, masaüstünde pencere
   küçültünce tetiklenmez ve modern cihazlarda hiç eşleşmez.

   YÜKLEME SIRASI: header.php'de EN SON. Böylece breakpoint'ler diğer
   katmanları doğal özgüllükle geçer; `!important` yığmaya gerek kalmaz.
   (Yalnızca daha önce `!important` ile yazılmış kuralları geçmek gerektiğinde
   kullanıldı ve her seferinde gerekçesi yazıldı.)

   BREAKPOINT SÖZLÜĞÜ — başka değer kullanma:
     ≤ 575.98px   küçük telefon      (360–575)
     ≤ 767.98px   telefon
     ≤ 991.98px   telefon + tablet   → kabuk "üste binen kenar çubuğu" modunda
     ≥ 992px      masaüstü           → kabuk "sabit kenar çubuğu" modunda

   KABUK BREAKPOINT'İ NEDEN 768 → 992'YE TAŞINDI:
   Kenar çubuğu 260px sabit. 768px'lik bir tablette içerik alanına 498px
   kalıyordu; `.app-content`'in 30px dolgusuyla birlikte kullanılabilir
   genişlik 438px'e düşüyordu — yani 360px'lik bir telefondan (330px) sadece
   100px fazla. Ama Bootstrap'in `md` kırılımı 768'de devreye girdiği için
   sayfalar o darlıkta HÂLÂ 4 sütunlu ızgara çiziyordu: `col-md-3` bir kart
   104px genişliğe iniyordu. Ölçüldü, tahmin değil.

   İÇİNDEKİLER
     §0  Düzen belirteçleri (--app-gutter)
     §1  Kabuk: kenar çubuğu + içerik breakpoint'i
     §2  Üst çubuk (app-header)
     §3  Kenar çubuğu (app-sidebar)
     §4  İçerik, sayfa başlığı, ızgara
     §5  Tablolar
     §6  Formlar: alanlar, input-group, btn-group
     §7  Modal
     §8  Dokunma hedefleri ve dokunmatik davranış
     §9  Çentik / güvenli alan (safe-area)
     §10 Yazdırma
   ========================================================================= */


/* =========================================================================
   §0  DÜZEN BELİRTEÇLERİ
   =========================================================================
   `.app-content` dolgusu ile `.app-title`'ın taşma marjı birbirine bağlı:
   başlık şeridi kenardan kenara uzansın diye dolgunun negatifi kadar dışarı
   taşar. main.css'te ikisi de elle 30px yazılmıştı, media.css 480px altında
   ikisini de 15px'e çekiyordu — iki dosyada dört sihirli sayı. Tek belirteç
   olunca dolguyu değiştirmek yeterli. */
:root {
    --app-gutter: 30px;
}

.app-content {
    padding: var(--app-gutter);
}

/* `.app-content`'in üst marjı body'nin üstüyle birleşip body'yi 50px aşağı
   itiyordu (body.top = 50). daterangepicker body'yi 0'dan başlıyor sanıp
   takvimi inputun 50px altında açıyordu. flow-root marjı body içinde tutar. */
body.app {
    display: flow-root;
}

.app-title {
    margin: calc(var(--app-gutter) * -1) calc(var(--app-gutter) * -1) var(--app-gutter);
}

@media (max-width: 991.98px) {
    :root { --app-gutter: 20px; }
}

@media (max-width: 575.98px) {
    :root { --app-gutter: 14px; }
}


/* =========================================================================
   §1  KABUK: KENAR ÇUBUĞU + İÇERİK
   ========================================================================= */

/* ---- Masaüstü: kenar çubuğu sabit, içerik yanında ---------------------- */
@media (min-width: 992px) {
    .app-header__logo {
        flex: 0 0 auto;
        display: block;
        width: 259px;
    }

    .app-content {
        margin-inline-start: 260px;
    }

    .app-nav {
        flex: 1 0 auto;
    }

    /* Hamburger = kenar çubuğunu tamamen gizle */
    .app.sidenav-toggled .app-content { margin-inline-start: 0; }
    .app.sidenav-toggled .app-sidebar { inset-inline-start: -260px; }
    .app.sidenav-toggled .app-sidebar__overlay { visibility: hidden; }

    /* ---- "mini" mod: yalnızca ikonlar, etiketler uçarak açılır ---------
       (media.css'ten olduğu gibi taşındı, yalnızca breakpoint değişti) */
    .sidebar-mini.sidenav-toggled .app-sidebar__user-name,
    .sidebar-mini.sidenav-toggled .app-sidebar__user-designation,
    .sidebar-mini.sidenav-toggled .treeview-indicator {
        display: none;
    }

    .sidebar-mini.sidenav-toggled .app-sidebar__user-avatar {
        width: 30px;
        height: 30px;
    }

    .sidebar-mini.sidenav-toggled .app-content { margin-inline-start: 50px; }

    .sidebar-mini.sidenav-toggled .app-sidebar {
        inset-inline-start: 0;
        width: 50px;
        overflow: hidden;
    }

    .sidebar-mini.sidenav-toggled .app-sidebar:hover { overflow: visible; }
    .sidebar-mini.sidenav-toggled .app-menu__item { overflow: hidden; }
    .sidebar-mini.sidenav-toggled .app-menu__item:hover { overflow: visible; }
    .sidebar-mini.sidenav-toggled .app-menu__item:hover .app-menu__label { opacity: 1; }
    .sidebar-mini.sidenav-toggled .app-menu__item:hover + .treeview-menu { visibility: visible; }

    .sidebar-mini.sidenav-toggled .app-menu__label {
        display: block;
        position: absolute;
        top: 0;
        inset-inline-start: 50px;
        min-width: 260px;
        padding: 12px 5px 12px 20px;
        margin-inline-start: -3px;
        line-height: 1;
        opacity: 0;
        border-start-end-radius: 4px;
        border-end-end-radius: 4px;
    }

    .sidebar-mini.sidenav-toggled .treeview:hover .app-menu__item { overflow: visible; }
    .sidebar-mini.sidenav-toggled .treeview:hover .app-menu__label { opacity: 1; }

    .sidebar-mini.sidenav-toggled .treeview:hover .treeview-menu {
        height: auto;
        min-height: 0;
        max-height: 70vh;
        opacity: 1;
        visibility: visible;
        z-index: 99999;
    }

    .sidebar-mini.sidenav-toggled .treeview .app-menu__label {
        border-end-end-radius: 0;
    }

    .sidebar-mini.sidenav-toggled .treeview-menu {
        position: absolute;
        top: 0;
        inset-inline-start: 50px;
        min-width: 260px;
        margin-inline-start: -2px;
        /* Sabit #1e293b idi; koyu/açık temada aynı slate tonunu basıyordu. */
        background-color: var(--app-shell-2);
        opacity: 0;
        border-end-end-radius: 4px;
        z-index: 9;
        visibility: hidden;
        transition: visibility 0.3s ease;
    }
}

/* ---- Telefon + tablet: kenar çubuğu içeriğin ÜSTÜNE biner ------------- */
@media (max-width: 991.98px) {
    .app {
        overflow-x: hidden;
    }

    /* Varsayılan: kapalı */
    .app .app-sidebar { inset-inline-start: -260px; }
    .app .app-sidebar__overlay { visibility: hidden; }

    /* Hamburger = kenar çubuğunu aç. DİKKAT: `sidenav-toggled` sınıfının
       anlamı breakpoint'e göre TERSİNE döner — masaüstünde "daralt/gizle",
       burada "aç". fire.js bu yüzden dar ekranda açılışta sınıfı siliyor. */
    .app.sidenav-toggled .app-content { margin-inline-start: 0; }
    .app.sidenav-toggled .app-sidebar { inset-inline-start: 0; }
    .app.sidenav-toggled .app-sidebar__overlay { visibility: visible; }

    .app-content {
        margin-inline-start: 0;
        margin-top: 50px;
        /* Eskiden `min-width:100%` idi. Bu, üst çubuk gibi bir kardeş eleman
           gövdeyi genişlettiğinde içeriği de o genişliğe zorluyor, yatay
           taşmayı sayfanın tamamına yayıyordu. */
        width: 100%;
    }

    .app-sidebar__toggle {
        order: -1;
    }

    /* Açık kenar çubuğunun arkasına karartma: hem odağı çubuğa verir hem de
       "dışarı dokun, kapat" alanını görünür kılar. Eskiden görünmezdi. */
    .app-sidebar__overlay {
        position: fixed;
        inset: 0;
        z-index: 9;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        transition: opacity .3s ease;
    }

    .app.sidenav-toggled .app-sidebar__overlay {
        opacity: 1;
    }
}


/* =========================================================================
   §2  ÜST ÇUBUK
   ========================================================================= */

@media (max-width: 991.98px) {
    /* Şirket adı ile arama kutusu tablette üst üste biniyordu. */
    .app-header-title {
        display: none;
    }

    /* main.css'te `.app-header__logo { flex: 1 0 auto }` — yani içeriğinden
       büyüyebilir ama küçülemez. */
    .app-header__logo {
        flex: 0 0 auto;
    }

    /* İkonlar logoya yapışık duruyordu. main.css'teki `justify-content:flex-end`
       bunu çözmez: `.app-nav` esnek bir ÖĞE olarak içeriği kadar daralıyor, o
       yüzden hizalanacak boş alanı hiç olmuyor. Masaüstünde §1'deki
       `.app-nav { flex: 1 0 auto }` boşluğu dolduruyor ama o kural yalnızca
       ≥992px'te var; 992 altında boşta kalıyordu.
       `margin-inline-start` mantıksal özellik: LTR'de sola boşluk verip ikonları
       sağa iter, RTL'de kendiliğinden ters çevrilir — rtl.css'te ayrı kural
       gerekmez (o dosya bu dosyadan SONRA yükleniyor, ayrı yazılsa çakışırdı). */
    .app-nav {
        margin-inline-start: auto;
    }
}

/* Yalnızca tablet bandı. Masaüstünde §1'deki 259px, 768 altında ise
   app-tabler.css'in "sadece işaret" 50px kuralı geçerli — bu dosya en son
   yüklendiği için burada genel bir genişlik vermek o 50px'i eziyor ve
   360px'te üst çubuğu taşırıyordu (ölçüldü: gezinme sağ kenarı 448 > 350).
   Kabuk breakpoint'i 992'ye çıkınca boşta kalan tek aralık burası. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .app-header__logo {
        width: 180px;
    }
}

@media (max-width: 767.98px) {
    /* Arama dar ekranda yalnız büyüteç simgesi; dokununca kutu üst çubuğun üstüne tam genişlikte açılır (fire.js).
       Kenar çubuğundaki #msearch kalktı. */
    #search.app-search {
        margin: 0;
        padding: 0;
    }

    #search .app-search__input {
        display: none;
    }

    #search .app-search__button {
        position: static;
        padding: 13px 9px;
        font-size: 1.25rem;
        line-height: 1;
        color: var(--app-shell-text);
    }

    #search.search-open {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 1100;
        height: 50px;
        padding: 6px 8px;
        background-color: var(--app-shell);
    }

    #search.search-open form {
        position: relative;
        width: 100%;
    }

    #search.search-open .app-search__input {
        display: block;
        width: 100%;
        height: 38px;
        padding-inline-end: 44px;
    }

    #search.search-open .app-search__button {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        padding: 0 12px;
    }

    .app-sidebar #msearch {
        display: none !important;
    }
}

/* 360px'te ölçüm: hamburger 45 + logo 97 + 5 ikon 206 = 348 / 350px.
   Sıfır nefes payı; rozetler komşu ikonun üstüne taşıyordu. */
@media (max-width: 575.98px) {
    .app-nav__item {
        padding: 13px 7px;
    }

    .app-nav__item > .ti {
        font-size: 1.25rem;
    }

    /* Dar ekranda büyütme sınırlı: 360px'te beş ikon zaten 350px'i dolduruyor,
       rozet komşu ikonun üstüne taşmamalı. */
    .app-nav__item .badge {
        inset-inline-end: 0;
        min-width: 17px;
        font-size: 11px;
        padding: 2px 4px;
    }

}


/* =========================================================================
   §3  KENAR ÇUBUĞU
   ========================================================================= */

@media (max-width: 991.98px) {
    /* Üst çubuğun altından başlasın; 70px'lik üst dolgu masaüstünde sabit
       başlığın altını dolduruyordu, burada kocaman boş bir blok oluyordu. */
    .app-sidebar {
        top: 50px;
        padding-top: 0;
        width: 260px;
        max-width: 86vw;
        transition: left .3s ease;
    }

    .app-sidebar__user {
        padding: 10px 20px;
        margin: 0 0 5px;
    }

    .app-menu__item {
        margin: 4px 10px;
    }

    .treeview-menu {
        margin-inline-start: 10px;
        padding-inline-start: 10px;
    }

    #msearch {
        margin: 15px 10px;
        display: flex;
    }
}


/* =========================================================================
   §4  İÇERİK, SAYFA BAŞLIĞI, IZGARA
   ========================================================================= */

@media (max-width: 991.98px) {
    .tile {
        padding: 16px;
        margin-bottom: 20px;
    }

    /* Sabit yükseklikli kartlar dar ekranda içeriği kırpıyordu.
       `!important`: regions.php bu yükseklikleri satır içi `style` ile
       veriyor (`style="height:426px"`, `style="height:952px"`) — satır içi
       stili yalnızca `!important` geçebilir. */
    .card,
    .card-inline {
        height: auto !important;
    }

    .card-inline {
        overflow-y: hidden;
    }
}

/* ---- Izgara -----------------------------------------------------------
   Sayfalar `md` (≥768px) kırılımıyla yazıldı ama o genişlikte kenar çubuğu
   260px'i alıyordu; yani `col-md-3` fiilen ~180px demekti, 4 sütun asla
   tasarlanmadı. Kenar çubuğu artık 992'ye kadar üste bindiği için tam
   genişlik geri geldi — ama 4 sütun 768px'te hâlâ okunmuyor. Sütunları
   ekran genişledikçe kademeli açıyoruz.

   `!important` gerekli: Bootstrap'in kendi `.col-md-*` kuralları da
   media query içinde ve aynı özgüllükte (0,1,0). */

/* Tablet: 4 sütun → 2, geniş sütunlar → tam satır */
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .col-md-5, .col-md-6, .col-md-7, .col-md-8,
    .col-md-9, .col-md-10, .col-md-11 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Telefon: her şey tek sütun */
@media (max-width: 767.98px) {
    [class*="col-md-"]:not(.col-md-12),
    [class*="col-lg-"]:not(.col-lg-12),
    [class*="col-xl-"]:not(.col-xl-12) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* İstisna: küçük sayaç kartları telefonda da 2'li dursun. Dördü alt alta
   dizilince ekranın tamamını yiyip asıl içeriği katlama altına itiyordu. */
@media (max-width: 767.98px) {
    .row > .col-sm-6[class*="col-md-"],
    .row > .col-6[class*="col-md-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* İstisna: DataTables'ın kendi düzen sarmalayıcıları. Bunlar `col-md-auto`
   taşıdığı için yukarıdaki "telefonda her şey tek sütun" kuralına takılıyor ve
   "sayfada N kayıt" ile "Ara:" alt alta düşüyordu — ölçüldü: ikisi 100px yiyor,
   tablo ancak 522px'te başlıyordu (740px'lik ekranın %70'i veriye gelmeden
   bitiyor). Aynısı alttaki kayıt sayısı + sayfalama şeridi için de geçerli.

   `!important` şart: genel kural da `!important` ile yazılmış, ondan kurtulmanın
   başka yolu yok. Sarmalayıcıların iç düzeni (boşluk, otomatik marjların
   kapatılması, yazı boyu) app-tabler.css'teki DataTables bloğunda. */
@media (max-width: 767.98px) {
    /* Sarmalayıcılar sınıf ADIYLA seçilemiyor: kod tabanında İKİ farklı
       DataTables düzeni var — sayfa başına yazılan `col-sm-3/3/6` (datas,
       callback…) ve dtjs.php'nin `dt-layout-start/end` + `col-md-auto` şeridi
       (allDatas…). Önce yalnızca ikincisi hedeflenmişti, o yüzden `datas`
       sayfalarında kontroller alt alta kalmaya devam ediyordu.
       `:has()` ile İÇERİĞE göre seçmek ikisini birden kapsıyor.

       `width` de sıfırlanmalı: Tabler'ın `.row > * { width: 100% }` kuralı
       duruyor ve `flex: 0 0 auto` temel genişlik olarak onu okuyor — yalnızca
       `flex`/`max-width` ezildiğinde hepsi tam satır kalıp yine sarıyordu. */
    .dt-container .row > *:has(> .dt-length),
    .dt-container .row > *:has(> .dt-info) {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    /* `flex-basis: 0` — `auto` olsaydı arama kutusunun doğal 300px'i temel
       alınır, 88 + 300 > 332 olduğu için satır yine sarardı. Temel 0 olunca
       kutu kalan yeri (≈236px) alıyor. */
    .dt-container .row > *:has(> .dt-search) {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
    }

    /* Sayfalama kendi satırında. `col-sm-3/3/6` düzeninde uzunluk + arama ile
       AYNI satırda duruyor ve doğal genişliği ~234px; aynı satırda bırakılsa
       arama kutusuna yer kalmıyordu. `flex-basis: 100%` onu her zaman alta
       indiriyor. */
    .dt-container .row > *:has(> .dt-paging) {
        flex: 1 0 100% !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* Raporlar: "Eklenme / Güncellenme" seçici (`.tarihRapor`) satır içi stille
   `position:absolute; right:18px` yazılmış. Masaüstünde sekme çubuğunun
   sağındaki boşluğa oturuyor, ama dar ekranda dokuz sekme iki satıra sarıp o
   boşluğu doldurunca seçici SEKMELERİN ÜSTÜNE biniyor: ölçüldü, "Ülke"
   (216–267px) ve "Şehir" (267–324px) sekmeleri kutunun altında kalıyor ve
   `elementFromPoint` ile doğrulandı — ikisi de tıklanamıyordu.

   Dar ekranda normal akışa alınıyor, sekmelerin altında kendi satırında duruyor.
   `!important` şart: satır içi stili başka türlü geçemiyoruz. İlgili konum
   düzeltmesi app-tabler.css'te `.col-md-12:has(> .tarihRapor)` kuralında. */
@media (max-width: 991.98px) {
    .tarihRapor {
        position: static !important;
        display: block !important;
        margin-top: .5rem;
    }
}


/* =========================================================================
   §5  TABLOLAR
   =========================================================================
   Tablolar `.autoflow` (overflow-x:auto) içinde yatay kayar; ölçümle
   doğrulandı, sayfanın tamamı kaymıyor. Eksik olan kaydırılabilir olduğunun
   BELLİ olması ve dokunmatik kayma hissi. */

.autoflow {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

@media (max-width: 991.98px) {
    /* Sağ kenarda yumuşak bir gölge: "devamı var" işareti. Kaydırma sonuna
       gelince kaybolur (background-attachment: local hilesi). */
    .autoflow {
        background:
            linear-gradient(to right, var(--app-surface) 30%, rgba(0, 0, 0, 0)) left center,
            linear-gradient(to left,  var(--app-surface) 30%, rgba(0, 0, 0, 0)) right center,
            radial-gradient(farthest-side at 0 50%,   rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) right center;
        background-repeat: no-repeat;
        background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
        background-color: var(--app-surface);
    }
    .autoflow:has(table.dt-cards) { background-image: none; }

    /* Satırları biraz sıkıştır — dar ekranda ekrana daha çok kayıt girsin */
    .table > :not(caption) > * > * {
        padding-top: .45rem;
        padding-bottom: .45rem;
    }
}


/* =========================================================================
   §6  FORMLAR
   ========================================================================= */

/* ---- iOS otomatik yakınlaştırma ---------------------------------------
   Safari (iOS), 16px'ten küçük yazılı bir alana odaklanınca sayfayı
   ZORLA yakınlaştırır ve geri çıkmaz — kullanıcı her alandan sonra elle
   uzaklaştırmak zorunda kalır. Tabler'ın `.form-control`'ü .875rem (14px).
   Mobilde 16px'e çekmek bu davranışı tamamen kapatır. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .ts-control,
    .ts-control input,
    textarea.form-control,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="date"] {
        font-size: 16px;
    }
}

/* ---- input-group: sarma yerine daralma -------------------------------
   Bootstrap 5'te `.input-group` varsayılan olarak `flex-wrap: wrap`.
   Dar sütunda sondaki buton alt satıra düşüyor, ön ek ile alan arasında
   yarım yuvarlatılmış köşeler açıkta kalıyor ve grup "iç içe girmiş iki
   input" gibi görünüyordu. Sarmak yerine ortadaki alanın daralmasını
   istiyoruz: `min-width: 0` olmadan flex bir input asla küçülmez. */
@media (max-width: 991.98px) {
    .input-group {
        flex-wrap: nowrap;
    }

    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .ts-wrapper {
        min-width: 0;
    }

    /* Ön ek/son ek metinleri daralmasın, kısalmasın */
    .input-group > .input-group-text,
    .input-group > .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* ---- btn-group: sarınca "grup" olmaktan çıksın -----------------------
   Eski media.css'te global `.btn-group { flex-wrap: wrap !important }`
   vardı. `.btn-group > .btn`'in `flex: 1 1 auto` kuralıyla birleşince
   sarma sonrası her buton kendi satırında farklı genişlikte kalıyor,
   merdiven gibi bir yığın oluşuyordu. Sarmak dar ekranda doğru; yanlış
   olan sarıldıktan sonra hâlâ birleşik grup gibi görünmesi. */
/* 1200'e kadar: 1024px'lik bir dizüstünde kenar çubuğu 260px'i alınca içerik
   764px kalıyor, `col-md-3` bir sütun 191px oluyor ve üç düğme tek satıra
   sığmadan `flex: 1 1 auto` ile ezilip yazıları üst üste biniyordu. */
@media (max-width: 1199.98px) {
    .btn-group,
    .btn-group-vertical {
        flex-wrap: wrap;
        gap: .4rem;
    }

    /* Ayrı ayrı düğmelere dönüştüğü için her birinin köşesi yuvarlansın.
       `!important`: Bootstrap köşe kurallarını `:not(:first-child)` gibi
       daha özgül seçicilerle yazıyor. */
    .btn-group > .btn,
    .btn-group > .btn-group > .btn {
        border-radius: var(--tblr-border-radius, .375rem) !important;
        margin-inline-start: 0 !important;
    }
}

@media (max-width: 575.98px) {
    /* Tek satıra sığmayan form düğmeleri tam genişlik alsın — telefonda
       "Kaydet" düğmesi 86px genişliğinde bir hedef olmamalı. */
    .btn-group > .btn {
        flex: 1 1 auto;
        min-width: 44%;
    }
}

/* Etiket ile alan arası dar ekranda daha okunur */
@media (max-width: 767.98px) {
    .form-label {
        margin-bottom: .25rem;
        font-weight: 500;
    }
}


/* =========================================================================
   §7  MODAL
   =========================================================================
   `#openAjaxModal` bu uygulamada asıl düzenleme yüzeyi: hasta düzenleme,
   sipariş ekleme, avatar, API ayarları hep bunun içinde açılıyor.
   custom.css'te `.modal-body { max-height: 520px }` sabiti var; 640px
   yüksekliğindeki bir telefonda başlık + gövde + kenar boşlukları ekranı
   aşıyor, modal ekranın dışına taşıyordu. Telefonda tam ekran yapıyoruz. */

@media (max-width: 767.98px) {
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog[class*="modal-2"],
    .modal-dialog[class*="modal-3"],
    .modal-dialog[class*="modal-4"],
    .modal-dialog[class*="modal-5"],
    .modal-dialog[class*="modal-6"],
    .modal-dialog[class*="modal-7"],
    .modal-dialog[class*="modal-8"] {
        margin: 0;
        /* custom.css'teki `.modal-XX { width: X%; max-width: X% }` yüzdelerini
           sıfırlar — üçü de yazılmalı, yoksa telefonda %35'lik bir kutu kalır. */
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: 100%;
    }

    .modal-content {
        min-height: 100%;
        border-radius: 0;
        border: 0;
    }

    /* Sabit 520px yerine kalan alanın tamamı; kaydırma gövdede kalsın. */
    .modal-body {
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Başlık ve alt düğme şeridi kaydırma sırasında görünür kalsın */
    .modal-header,
    .modal-footer {
        position: sticky;
        z-index: 2;
        background: var(--app-surface);
    }

    .modal-header { top: 0; }
    .modal-footer { bottom: 0; }

    /* Kapatma düğmesi parmakla vurulabilir olsun */
    .modal-header .btn-close {
        padding: .75rem;
        margin: -.5rem -.5rem -.5rem auto;
    }
}


/* =========================================================================
   §8  DOKUNMA HEDEFLERİ
   =========================================================================
   Ölçülen değerler (360px, gerçek markup):
     tablo içi .btn-sm ....... 21 × 24 px
     .treeview-item .......... 238 × 32 px
     .app-nav__item .......... 41 × 50 px
   WCAG 2.2 (2.5.8) asgari 24×24, Apple 44×44, Material 48×48 önerir.
   Veri tablosunda 44px satırları şişirdiği için orada 38px'te durduk;
   gezinme öğelerinde 44+ kullanıldı. */

@media (max-width: 991.98px) {
    /* Genel taban. Gerçek sayfalarda ölçülen değerler: sayfa başlığındaki
       "Yeni Ürün/Grup/Statü… Ekle" düğmeleri 28px, statü aç/kapa bağlantıları
       ("Aktif"/"Pasif") 29px, ikon düğmeleri 24px yüksekliğindeydi — yani her
       sayfanın BİRİNCİL eylemi parmakla zor vurulur haldeydi.
       `.btn-close` hariç: Bootstrap onu kendi ölçüsüyle konumlandırıyor,
       modal başlığındaki dolgusu §7'de ayrıca büyütüldü. */
    .app-content .btn:not(.btn-close) {
        min-height: 38px;
        /* Genişlik tabanı da gerekli: yalnızca ikon taşıyan düğmeler
           (düzenle/sil/kopyala) 24–27px genişlikte kalıyordu. Metinli
           düğmeler zaten daha geniş, onlara etkisi yok. */
        min-width: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Onay kutusu / anahtar 20×20 idi. */
    .form-check-input {
        min-width: 1.35rem;
        min-height: 1.35rem;
    }

    /* Tablo satırındaki düzenle/sil ikonları */
    .table .btn-sm,
    .autoflow .btn-sm,
    td > .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        min-height: 38px;
    }

    /* Yan yana iki ikon düğmesi arasında ayırt edilebilir boşluk */
    td > .btn-sm + .btn-sm {
        margin-inline-start: .35rem;
    }

    .app-menu__item {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .treeview-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .app-nav__item {
        min-width: 44px;
        text-align: center;
    }

    .app-sidebar__toggle {
        min-width: 48px;
    }

    /* Sayfalama düğmeleri */
    .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Dokununca gri kutu parlaması çıkmasın (Android Chrome varsayılanı) */
a, button, .btn, .app-menu__item, .treeview-item, .app-nav__item {
    -webkit-tap-highlight-color: transparent;
}

/* Sabit üst çubuk yüzünden `#id` bağlantıları başlık altında kalıyordu */
:target {
    scroll-margin-top: 60px;
}


/* =========================================================================
   §9  ÇENTİK / GÜVENLİ ALAN
   =========================================================================
   header.php'de `viewport-fit=cover` var: sayfa çentikli ekranlarda köşe
   köşe uzanır. Karşılığında güvenli alan payını CSS'in vermesi gerekir,
   yoksa yatay çevrildiğinde kenar çubuğu ve içerik çentiğin altında kalır. */

@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 991.98px) {
        .app-header {
            padding-inline-start: env(safe-area-inset-left);
            padding-inline-end: env(safe-area-inset-right);
        }

        .app-content {
            padding-inline-start: calc(var(--app-gutter) + env(safe-area-inset-left));
            padding-inline-end: calc(var(--app-gutter) + env(safe-area-inset-right));
            padding-bottom: calc(var(--app-gutter) + env(safe-area-inset-bottom));
        }

        .app-sidebar {
            padding-inline-start: env(safe-area-inset-left);
        }
    }
}


/* =========================================================================
   §10  YAZDIRMA
   ========================================================================= */

@media print {
    .app-title,
    .app-header,
    .app-sidebar,
    .app-sidebar__overlay,
    #footer,
    .dt-buttons,
    .dt-length,
    .dt-search,
    .dt-paging {
        display: none !important;
    }

    .app-content {
        margin: 0;
        padding: 0;
    }

    .autoflow {
        overflow: visible !important;
    }
}

/* ── Anasayfa (hm-*) ── */
@media (min-width: 1101px) {
    .hm-bar { flex-wrap: nowrap; }
}

@media (max-width: 1100.98px) {
    .hm-bar { flex-wrap: wrap; }
}

@media (max-width: 991.98px) {
    .hm-grid > * { grid-column: span 12; }
    .hm-grid > .hm-s3 { grid-column: span 6; }
    .hm-drawer { flex: 1 1 100%; position: static; }
}

@media (max-width: 575.98px) {
    .hm-bar-title h1 { font-size: 1.25rem; }
    .hm-bar .hm-seg { width: 100%; overflow-x: auto; }
    .hm-kpi-value { font-size: 1.5rem; }
    .hm-w { padding: .875rem; }
    .hm-tools button { width: 2.75rem; height: 2.75rem; }
    .hm-bar .btn { min-height: 2.75rem; }
}

/* Tanımlar listelerindeki satır içi düzenle düğmesi: genel 38/44px dokunma tabanı satır yüksekliğini şişiriyordu. */
@media (max-width: 991.98px) {
    .app-content .card-inline.sc .btn-xs {
        min-width: 32px;
        min-height: 28px;
        padding: .15rem .35rem;
    }
}