/* =====================================================================
   style.css
   ---------------------------------------------------------------------
   NE ISE YARAR?
   Bootstrap zaten genel gorunumu (grid, butonlar, tablolar) sagliyor;
   bu dosya ise projeye ozel "modern saglik kabini" hissini veren
   renkleri, kart golgelerini, yuvarlatilmis kosati ve MOBIL EKRANLAR
   icin ozel dokunuslari (kucuk yazi tipleri, daha az bosluk, kaydirilan
   tablolar) ekler.
   ===================================================================== */

:root {
    /* Projede kullanilan ana renkler tek yerden yonetilsin diye
       CSS degiskeni (variable) olarak tanimliyoruz. Renk degistirmek
       istersek sadece burayi degistirmemiz yeterli. */
    --kabin-mavi: #0d6efd;
    --kabin-yesil: #12b886;
    --kabin-koyu: #10182b;
    --kabin-acik-zemin: #f4f7fb;
}

* {
    /* Butun elemanlarda genis/dar ekrana gore tasan (overflow) yatay
       kaydirma cubugu cikmasin diye kutu modelini sabitliyoruz. */
    box-sizing: border-box;
}

html, body {
    /* Mobilde yanlislikla sag-sol kaydirma (yatay scroll) olusmasin diye.
       NE ISE YARAR - "clip" NEDEN "hidden" DEGIL? "overflow-x: hidden"
       yazinca tarayicilar overflow-y'yi de otomatik olarak "auto" yapar
       (CSS'in resmi kurali budur); bu ise Safari/iOS'ta sayfanin
       "position: sticky" ile sabitlenmesi gereken elemanlarin (sol menu
       gibi) DOGRU calismamasina, kaymasina/bulanik/yanlis hizali
       gorunmesine sebep olabilir. "clip" ise sadece tasmayi keser,
       overflow-y'yi degistirmez - boylece sticky elemanlar duzgun calisir. */
    overflow-x: clip;
}

body {
    background-color: var(--kabin-acik-zemin);
    /* NE ISE YARAR? Mac/iPhone/iPad'de (Safari/WebKit) yazilar
       Windows'a gore farkli render edilir ve bazen daha "kalin/bulanik"
       gorunebilir. -apple-system, Apple cihazlarda sistemin kendi
       fontunu (San Francisco) kullanir - bu hem daha net/keskin gorunur
       hem de cihaza native (dogal) hissettirir. font-smoothing
       ozellikleri de WebKit'te metnin daha ince ve net cizilmesini saglar. */
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------
   SOL MENU (SIDEBAR) + MOBIL UST CUBUK
   NE ISE YARAR? header.php'de tek bir HTML blogu olarak yazilan
   ".kabin-sidebar" (offcanvas-lg), buradaki CSS sayesinde >=992px'de
   SABIT bir sol sutuna, altinda ise kenardan kayan bir panele donusur.
   --------------------------------------------------------------------- */
.kabin-app-shell {
    /* NE ISE YARAR? iOS Safari'de adres cubugu kaydirdikca gorunur/
       gizlenir ve bu, "100vh" degerinin surekli degismesine (sayfanin
       "ziplamasi"na) sebep olur. "100dvh" (dynamic viewport height),
       Safari'nin GERCEK o anki gorunur alanini kullanir. Eski
       tarayicilar dvh'yi TANIMAZSA ilk satirdaki 100vh degeri gecerli
       kalir (bu yuzden iki satiri da yaziyoruz - "fallback" teknigi). */
    min-height: 100vh;
    min-height: 100dvh;
}

.kabin-sidebar {
    /* Bootstrap'in offcanvas genislik degiskenini gecersiz kiliyoruz;
       bu deger hem mobildeki kayar panelin hem de masaustundeki sabit
       sutunun genisligini belirler. */
    --bs-offcanvas-width: 250px;
    background: linear-gradient(180deg, var(--kabin-koyu), var(--kabin-mavi));
    border: none;
}

.kabin-sidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kabin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    padding: .65rem .9rem;
    transition: background-color .15s ease, color .15s ease;
}

.kabin-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.kabin-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 600;
}

.kabin-sidebar .nav-link i {
    font-size: 1.05rem;
    width: 1.3rem;
    text-align: center;
}

.kabin-sidebar-kullanici {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* >=992px (lg): sidebar sayfayla birlikte KAYMAZ, ekran boyu sabit
   kalir ve icerigi kendi icinde kaydirir (uzun menu listesi olursa). */
@media (min-width: 992px) {
    .kabin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }
}

/* Sadece mobilde gorunen ince ust cubuk (hamburger + logo) */
.kabin-topbar {
    background: linear-gradient(90deg, var(--kabin-koyu), var(--kabin-mavi));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.kabin-main {
    min-width: 0; /* flex icinde genis tablolarin tasmasini engeller */
}

/* ---------------------------------------------------------------------
   DASHBOARD OZET KARTLARI (index.php'de kullaniliyor)
   --------------------------------------------------------------------- */
.ozet-kart {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ozet-kart:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.ozet-kart .ozet-baslik {
    font-size: .8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ozet-kart .ozet-deger {
    font-size: 1.7rem;
    font-weight: 700;
    word-break: break-word;
}

/* ---------------------------------------------------------------------
   GENEL SAYFA KARTLARI (form + tablo kutulari)
   --------------------------------------------------------------------- */
.sayfa-kart {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 24px;
    margin-bottom: 24px;
}

.sayfa-kart h5 {
    font-weight: 600;
    color: var(--kabin-koyu);
}

/* ---------------------------------------------------------------------
   FORM ELEMANLARI - biraz daha yuvarlak ve odakta (focus) renkli
   --------------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: 10px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--kabin-mavi);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.btn {
    border-radius: 10px;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--kabin-mavi);
    border-color: var(--kabin-mavi);
}

.btn-success {
    background-color: var(--kabin-yesil);
    border-color: var(--kabin-yesil);
}

/* ---------------------------------------------------------------------
   ROZETLER (badge) - yer tipi ve odeme durumlari icin
   --------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 500;
    padding: .45em .8em;
}

.badge-ev {
    background-color: var(--kabin-yesil);
}

.badge-sube {
    background-color: var(--kabin-mavi);
}

/* ---------------------------------------------------------------------
   TABLOLAR - mobilde tasmasini onlemek icin .table-responsive kullanilir
   (her sayfada <div class="table-responsive"> ile sarmalanmistir). Bu
   kisimda sadece gorsel inceltmeler yapiyoruz.
   --------------------------------------------------------------------- */
.table {
    font-size: .95rem;
}

.table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    border-bottom-width: 2px;
    white-space: nowrap;
}

.table-responsive {
    /* Mobilde parmakla kaydirirken daha akici olsun diye. */
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   MOBIL (kucuk ekran) OZEL AYARLAR
   NE ISE YARAR? 576px'den (Bootstrap "sm" kirilma noktasi) dar
   ekranlarda; baslik/kart bosluklarini kuculterek daha fazla icerigin
   ekrana sigmasini sagliyoruz.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .sayfa-kart {
        padding: 16px;
        border-radius: 12px;
    }
    h2 {
        font-size: 1.4rem;
    }
    .ozet-kart .ozet-deger {
        font-size: 1.35rem;
    }
    .btn {
        font-size: .95rem;
    }

    /* NE ISE YARAR? iOS Safari, yazi boyutu 16px'den KUCUK olan bir
       kutuya (input/select) dokunulunca sayfayi otomatik yakinlastirir
       (zoom). Bu, kullaniciya sanki "tasarim bozuk/net degil" gibi
       hissettirir. Tum form kutularini (kucuk olanlar dahil) en az
       16px yaparak bu istenmeyen otomatik yakinlastirmayi onluyoruz. */
    .form-control, .form-select {
        font-size: 16px;
    }
}

footer {
    color: #9aa3af;
}

/* ---------------------------------------------------------------------
   HIZLI ISLEMLER MENUSU (Floating Action Button) - footer.php'de
   markup'u eklenmisti, burada sadece konum/gorunum tanimlaniyor.
   --------------------------------------------------------------------- */
.hizli-menu {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;
}

.hizli-buton {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.45);
    border: none;
}

.hizli-buton:hover,
.hizli-buton:focus {
    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.6);
}

.hizli-menu .dropdown-menu {
    border-radius: 14px;
    border: none;
    padding: .5rem;
    min-width: 240px;
}

.hizli-menu .dropdown-item {
    border-radius: 8px;
    padding: .55rem .75rem;
}

.hizli-menu .dropdown-item:hover {
    background-color: rgba(13, 110, 253, 0.08);
}

/* Kucuk ekranlarda butonun altta menuyle/klavyeyle cakismamasi icin
   biraz daha ic kenardan uzak tutuyoruz. */
@media (max-width: 575.98px) {
    .hizli-menu {
        right: 16px;
        bottom: 16px;
    }
    .hizli-buton {
        width: 52px;
        height: 52px;
        font-size: 1.25rem;
    }
}

/* ---------------------------------------------------------------------
   GIRIS (LOGIN) SAYFASI
   NE ISE YARAR? login.php kendi basit sayfa iskeletini kullanir (sol
   menu yok, cunku kullanici henuz giris yapmadi); bu kurallar o sayfayi
   ekranin ortasinda duran tek bir kart olarak gosterir.
   --------------------------------------------------------------------- */
.kabin-login-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, var(--kabin-koyu), var(--kabin-mavi));
    padding: 16px;
}

.kabin-login-kart {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 32px;
    width: 100%;
    max-width: 380px;
}

/* ---------------------------------------------------------------------
   ANA SAYFA - HIZLI HASTA ARAMA/EKLEME
   NE ISE YARAR? index.php'deki "hasta ara" kutusunun altinda JavaScript
   ile doldurulan eslesme listesinin gorunumu.
   --------------------------------------------------------------------- */
.hasta-sonuc-listesi {
    position: relative;
}

.hasta-sonuc-kutusu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.hasta-sonuc-kutusu .list-group-item {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.hasta-sonuc-kutusu .list-group-item:hover {
    background-color: rgba(13, 110, 253, 0.08);
}

/* ---------------------------------------------------------------------
   SUBE SECIM EKRANI (sube_sec.php)
   NE ISE YARAR? Giristen hemen sonra gorunen, "hangi subede
   calisiyorsun" sorusunu bir kere soran tam-ekran karsilama sayfasi.
   --------------------------------------------------------------------- */
.sube-sec-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--kabin-acik-zemin);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sube-sec-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(18, 184, 134, 0.14);
    color: var(--kabin-yesil);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px;
}

.sube-karti {
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 24px;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.sube-karti:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.sube-numara {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--kabin-yesil);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.sube-karti h5 {
    margin: 0 0 2px;
    font-weight: 700;
    color: var(--kabin-koyu);
    letter-spacing: .02em;
}

.sube-karti .text-muted {
    font-size: .85rem;
}

/* ---------------------------------------------------------------------
   AKTIF SUBE ROZETI (sidebar'da, header.php'de kullaniliyor)
   --------------------------------------------------------------------- */
.aktif-sube-rozeti {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: .5rem .75rem;
}