/* ===== Sidebar Logo Boyutu =====
   Sablonun kendi CSS'i sidebar logosuna bir yukseklik siniri koymuyor
   (bu sinir yalnizca yatay menu modunda gecerli). Kendi logomuz buyuk
   oldugu icin sidebar genisligine yayilip menu ogelerinin ustune
   tasiyordu; bu yuzden burada acikca sinirlaniyor. */
.main-sidebar-header .header-logo img { 
    max-height: 2.25rem;
    width: auto;
    max-width: 80%;
    object-fit: contain;
}

/* ===== Giris Ekrani: Logo boyutu ve konumu =====
   Kendi logomuz (817x835) buyuk oldugu icin sablonun konumlandirma
   alaninda cercevenin disina tasiyordu. Alan (position:absolute
   sablonun .details:before katmaninin USTUNDE kalabilmesi icin
   korunuyor) panelin tum yuksekligini/genisligini kaplayip flex ile
   iceriği hem yatayda hem dikeyde ortalar — logo/simge/metin boyuttan
   bagimsiz, panelin gercek yuksekligine (sag taraftaki formla ayni)
   sigacak sekilde kucultuldu. */
.giris-logo-alan {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;  
    align-items: center;
    justify-content: center;
}

.giris-logo {
    max-width: 130px;
    width: 45%;
    height: auto;
}

.giris-ikon {
    height: 46px; 
    width: auto; 
}

/* ===== Giris Ekrani: Sol panel beyaz, cerceve mavi =====
   Sablon .details:before katmaninda dolgu rengi olarak mavi
   (--primary-color) kullaniyordu; beyaza cevrildi. Yazi renkleri
   beyaz-uzerine tasarlandigi icin beyaz arka planda okunabilir
   olsun diye mavi yapildi. Kartin dis cercevesi de mavi cizildi. */
.signpages .details:before {
    background: #ffffff;
}

.signpages .details h5,
.signpages .details .text-white-6 {
    color: var(--primary-color) !important;
}

.main-signin-wrapper .card {
    border: 1px solid var(--primary-color);
}

/* ===== Sinif Rozetleri ===== */
.rozet-sinif {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35em 0.65em;
}

/* ===== Yazdirma Stilleri ===== */
@media print {
    .app-header,
    .app-sidebar,
    .footer,
    .page-header-breadcrumb,
    .scrollToTop,
    #responsive-overlay,
    .rapor-yazdir-gizle {
        display: none !important;
    }

    .main-content.app-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .page {
        margin: 0 !important;
    }

    @page {
        margin: 1.5cm;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .custom-card {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    [id^="rapor-"],
    [id^="ozet-"],
    [id^="mali-"] {
        max-width: 100% !important;
    }

    .rapor-yazdir-alt {
        display: block !important;
        text-align: center;
        font-size: 10px;
        color: #666;
        margin-top: 1rem;
    }
}

/* ===== Anket Formu: Kademeli Soru Gizleme/Gosterme ===== */
.kademe-gizli {
    display: none !important;
}

.kademe-soru {
    transition: opacity 0.15s ease-in-out;
}

/* ===== Anasayfa Pano: Gosterge Olcek Cubugu =====
   0'dan PanoServisi'nin hesapladigi max_deger'e (endeks turu
   gostergelerde SABIT olcek/olcek_katsayisi, digerlerinde gozlenen
   en yuksek deger) kadar cizilen yatay cubuk. Uzerinde 3 isaret
   olur: en az/en yuksek (kucuk gri cizgi) ve ortalama (buyuk nokta).
   Tum konumlar (en_az_yuzde/ortalama_yuzde/en_yuksek_yuzde) view'da
   inline style ile yerlestirilir. */
.pano-range-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: #e9ecef;
}

.pano-range-dot {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    z-index: 2;
}

.pano-range-tick {
    position: absolute;
    top: 50%;
}

.pano-range-tick-muted {
    width: 3px;
    height: 12px;
    margin-top: -6px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #adb5bd;
    z-index: 1;
}

.pano-gosterge-satiri {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--default-border, #e9ecef);
}

.pano-gosterge-satiri:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pano-kpi-icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

/* ===== Anasayfa Pano: YOGUN (sade) Gorunum =====
   sayfalar/_pano_istatistik_sade.php icindir. Klasik gorunumdeki
   ~120px yuksekliginde gosterge satirlari ve ApexCharts cubuk grafigi
   yerine, tek satirlik yogun tablolar ve satir ici ince olcek cubuklari
   kullanilir. Ek kutuphane YOKTUR, hepsi CSS'tir.
   Begenilirse klasik gorunum de buna cevrilecek. */
.pano-sade-rozet {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb, 91, 110, 244), .12);
}

.pano-sade-ozet > div {
    padding-left: 1rem;
    border-left: 1px solid var(--default-border, #e9ecef);
}

.pano-sade-ozet > div:first-child {
    padding-left: 0;
    border-left: none;
}

.pano-sade-baslik {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8c9097;
    margin-bottom: .5rem;
}

/* Yogun tablo: satir yuksekligi klasik gorunumun ~ucte biri. */
.pano-sade-tablo > :not(caption) > * > * {
    padding: .45rem .5rem;
    vertical-align: middle;
}

.pano-sade-tablo thead th {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #8c9097;
    border-bottom: 1px solid var(--default-border, #e9ecef);
    white-space: nowrap;
}

/* Satir ayraci hem acik hem koyu temada gorunsun diye notr gri
   (rgba(0,0,0,...) koyu temada kayboluyordu). */
.pano-sade-tablo tbody tr + tr > td {
    border-top: 1px solid rgba(132, 142, 161, .15);
}

.pano-sade-tablo tbody td {
    border-bottom: none;
    font-size: .82rem;
}

/* Deger + sinif rozeti ayni satirda; kurum adi altta kucuk ve kirpik. */
.pano-sade-uc {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    font-weight: 600;
    line-height: 1.2;
}

.pano-sade-sinif {
    display: inline-block;
    padding: 0 .3rem;
    border-radius: .25rem;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.pano-sade-kurum {
    font-size: .68rem;
    color: #8c9097;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pano-sade-ortalama {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Olcek: 0'dan max_deger'e uzanan yol; dolu bant en az-en yuksek
   araligi, nokta ortalama. Konumlar view'da inline style ile verilir. */
.pano-sade-olcek {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: rgba(132, 142, 161, .22);
}

.pano-sade-olcek-aralik {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb, 91, 110, 244), .35);
}

.pano-sade-olcek-nokta {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.pano-sade-olcek-etiket {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .2rem;
    font-size: .64rem;
    color: #8c9097;
    white-space: nowrap;
}

.pano-sade-dagilim {
    display: flex;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(132, 142, 161, .22);
}

.pano-sade-dagilim-alt {
    background: #f7b84b;
}

.pano-sade-dagilim-ust {
    background: #26bf94;
}

/* Duyarlilik oran cubugu — grafik yerine satir ici olcu. */
.pano-sade-oran {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.pano-sade-oran-yol {
    flex: 1 1 auto;
    height: 5px;
    border-radius: 999px;
    background: rgba(132, 142, 161, .22);
    overflow: hidden;
}

.pano-sade-oran-dolu {
    height: 100%;
    border-radius: 999px;
}

.pano-sade-oran-kadin {
    background: #e83e8c;
}

.pano-sade-oran-genc {
    background: #f7b84b;
}

.pano-sade-oran-deger {
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 2.6rem;
    text-align: right;
}

/* ===== Mali Analiz Radar Grafigi =====
   Chart.js maintainAspectRatio:false ile calisir; olcuyu BURASI belirler.
   Radar dairesel oldugu icin kutu kare-ye yakin ve ORTALANMIS tutulur —
   kart genisligi kadar yayilirsa grafik gereksiz buyur. */
.mali-radar-kutu {
    position: relative;
    height: 320px;
    max-width: 420px;
    width: 100%;
}

@media (max-width: 575.98px) {
    .mali-radar-kutu {
        height: 300px; 
    }
}

/* ===== Puan Rozeti (bicim_helper.php → puan_rozeti) ===== */
/* Sutundaki sayilar rozet icinde de alt alta hizali dursun. */
.puan-rozeti {
    min-width: 3.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;  
}

/* Yazdirmada arka plan renkleri kaybolmasin (rapor ciktisi). */
@media print {
    .puan-rozeti {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ===== Istemci Tarafi Tablo (js/tablo.js) ===== */
th.tablo-siralanabilir {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.25rem;
}

th.tablo-siralanabilir::after {
    content: "\2195"; /* yukari-asagi ok: siralanabilir */
    position: absolute;
    right: 0.45rem;
    opacity: 0.25;
    font-size: 0.8em; 
}

th.tablo-artan::after {
    content: "\2191";
    opacity: 0.9;
}

th.tablo-azalan::after {
    content: "\2193";
    opacity: 0.9;
}

/* ===== Yogun/Compact Tablo Stili ===== */
.tablo-sikisik td,
.tablo-sikisik th {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    vertical-align: middle;
}

/* ===== Haberlesme Bildirimi (ust menu can ikonu) =====
   Sablonun styles.min.css dosyasinda yalniz "pulse-secondary"
   animasyonu var. Okunmamis mesaj rozeti kirmizi oldugu icin
   ayni halka efektinin danger rengi burada tanimlandi. */
.pulse.pulse-danger {
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%   { box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--danger-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb), 0); }
}

/* Bildirim listesindeki baglantilar dropdown icinde duz gorunsun */
#haberlesme-bildirim-listesi .dropdown-item a {
    text-decoration: none;
}