/* ==========================================================================
   style.css
   Ön Muhasebe Uygulaması - Özel Stil Dosyası

   appFramework 3.0'ın kendi stilleri css/af.ui.base.css ve css/icons.css
   içindedir; bu dosya onların üzerine proje özelinde renk/font/karanlık
   mod gibi kuralları ekler (Radyolar projesindeki yaklaşımın aynısı).
   ========================================================================== */

/* ---- Renk paleti: açık ve koyu tema ---- */
:root {
    --hp-bg:          #ffffff;
    --hp-bg-alt:      #f5f6f8;
    --hp-text:        #1b2430;
    --hp-text-muted:  #6b7280;
    --hp-border:      #e2e5ea;
    --hp-header-bg:   #1c3557;  /* lacivert */
    --hp-header-text: #ffffff;
    --hp-accent:      #4a6285;  /* mavi-gri: açık temada altın sarısı yerine */
    --hp-accent-text: #ffffff;  /* accent ZEMİN üstündeki yazı (ör. .mbtn-primary) */
    --hp-uyari-bg:    #c0392b;  /* bağlantı uyarısı şeridi */
    --hp-uyari-text:  #ffffff;
    --hp-pozitif:     #2e7d32;  /* bilançoda firmanın alt hesapları (ASP'deki yeşil) */
    --hp-borc:        #0f766e;  /* Borçlu hesap etiketi: hesaba giriş (yeşil-mavi) */
    --hp-alacak:      #c2410c;  /* Alacaklı hesap etiketi: hesaptan çıkış (kırmızı-turuncu) */
    --hp-bakiye-b:    #1d4ed8;  /* Borç bakiyesi (B) ve artı tutar: mavi */
    --hp-bakiye-a:    #c62828;  /* Alacak bakiyesi (A) ve bilançoda eksi tutar: kırmızı */
}

/* Karanlık tema: js/app.js tarafından <html> etiketine eklenen/kaldırılan
   "theme-dark" class'ı ile uygulanır (sistem tercihi + elle seçim,
   bkz. app.js - hpApplyThemeClass). */
:root.theme-dark {
    --hp-bg:          #12161d;
    --hp-bg-alt:      #1a212b;
    --hp-text:        #e7ebf0;
    --hp-text-muted:  #8a94a3;
    --hp-border:      #2a323d;
    --hp-header-bg:   #0d1520;
    --hp-header-text: #f0f0f0;
    --hp-accent:      #d9a94a;
    --hp-accent-text: #12161d;
    --hp-uyari-bg:    #a93226;
    --hp-uyari-text:  #ffffff;
    --hp-pozitif:     #7cc47f;
    --hp-borc:        #4dd0b1;
    --hp-alacak:      #f0955a;
    --hp-bakiye-b:    #6ea8fe;
    --hp-bakiye-a:    #ff7b7b;
}

/* ---- Font ve temel renkler (appFramework'ün varsayılanlarının üzerine) ---- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--hp-bg);
    color: var(--hp-text);
}

.view header,
.view footer {
    background: var(--hp-header-bg);
    border-color: var(--hp-header-bg);
}
.view header h1 {
    color: var(--hp-header-text);
}
.view footer > a {
    color: var(--hp-header-text);
}

nav {
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}

/* Sol menü başlığı: logo + uygulama adı.
   App Framework başlığı ortadaki düğmelere yer bırakmak için %45 genişlikte
   (sol menüde düğme yok); logo ve ad sığsın diye genişletiliyor, yoksa ad
   "Hesap2000 M…" diye kesiliyor ve logo kutunun dışında kalıyordu. */
#navView1 > header h1.hp-menu-baslik {
    width: auto;
    left: 10px;
    right: 10px;
}
.hp-menu-baslik {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.hp-menu-logo {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* Çıkış Yap'ın üstünde oturum bilgisi: firma adı ve kişi adı.
   Menü listesiyle footer arasında; flex yerleşimde kendi yüksekliği kadar yer
   kaplar, liste kısalır. */
/* Karanlık / Aydınlık mod düğmesi: sol menüde oturum bilgisinin üstünde */
.hp-tema-satir {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-top: 1px solid var(--hp-border);
    background: var(--hp-bg-alt);
}
.hp-tema-satir a {
    display: block;
    padding: 4px 0;
    font-size: 13px;
    color: var(--hp-text);
    text-decoration: none;
    cursor: pointer;
}
.hp-tema-simge {
    display: inline-block;
    width: 22px;
    margin-right: 4px;
    text-align: center;
}
.hp-oturum-bilgi {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-top: 1px solid var(--hp-border);
    background: var(--hp-bg-alt);
    font-size: 13px;
    line-height: 1.4;
}
.hp-form label.yi-onay-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    margin: 0 0 10px;
    padding: 0;
    text-align: left;
    font-size: 14px;
    color: var(--hp-text);
}
/* appFramework yerel onay kutusunu gizleyip label'dan sonra kendi çiziyor; burada kutu label'ın içinde, yerel hali gösteriliyor (.bl-toolbar gibi) */
.yi-onay-satir input[type="checkbox"] {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
}
.hp-oturum-bilgi strong {
    display: block;
    color: var(--hp-text);
}
.hp-oturum-bilgi span {
    color: var(--hp-text-muted);
}

/* Sol menünün en altındaki Çıkış Yap (menü listesinden ayrı, sabit).
   appFramework'ün footer'ı 49px yüksekliğinde; metin dikeyde ortalansın. */
#navView1 > footer .hp-cikis {
    line-height: 49px;
    font-size: 14px;
}

/* Sol menü simgeleri (index.php, micon): metnin solunda sabit genişlikte,
   metinler alt alta hizalı kalsın. */
#menuList a.micon:before,
#navView1 > footer .hp-cikis.micon:before {
    display: inline-block;
    width: 22px;
    margin-right: 8px;
    left: 0;
    top: 1px;
    text-align: center;
    color: var(--hp-accent);
}

.list {
    background-color: var(--hp-bg);
    color: var(--hp-text);
    border-color: var(--hp-border);
}
.list li {
    border-bottom-color: var(--hp-border);
}

/* ---- Sol menü: kutucuk / liste görünümü ----
   Başlığın sağındaki düğme #menuList'e .hp-liste-gorunum ekler ya da kaldırır
   (js/app.js hpGorunum*; varsayılan liste). Kutucukta tek sütun, sabit genişlikte
   ortalı kutular, simge üstte, yazı altta (kullanıcının seçimi; önce iki sütundu).
   Başlık sağdan düğme kadar daraltılır. */
#navView1 > header h1.hp-menu-baslik {
    right: 44px;
}
#navView1 > header .hp-gorunum-dugme {
    position: absolute;
    top: 50%;
    right: 8px;
    margin: -16px 0 0;
}
#menuList:not(.hp-liste-gorunum) .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
}
#menuList:not(.hp-liste-gorunum) .list li {
    box-sizing: border-box;
    width: 130px;
    padding: 0;
    border: 1px solid var(--hp-border);
    border-radius: 8px;
    background: var(--hp-bg-alt);
    text-align: center;
}
/* margin: 0 ve ok gizleme: af.ui.base.css ".list > li > a"ya li'nin dolgusunu telafi
   eden eksi margin veriyor; kutucukta li dolgusu 0 olduğu için bağlantı taşıp telefonda
   kutucuklar üst üste biniyordu, liste okları da kutucukta görünüyordu. */
#menuList:not(.hp-liste-gorunum) .list li > a {
    display: block;
    margin: 0;
    padding: 12px 6px;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
}
#menuList:not(.hp-liste-gorunum) .list li > a:after {
    display: none;
}
#menuList:not(.hp-liste-gorunum) .list li > a.micon:before {
    display: block;
    width: auto;
    margin: 0 auto 6px;
    font-size: 22px;
    top: 0;
}
/* Bağlantısız satırlar (boş ayraç, © satırı) kutucuk olmaz, alta tam genişlikte */
#menuList:not(.hp-liste-gorunum) .list li:empty {
    display: none;
}
#menuList:not(.hp-liste-gorunum) .list li:last-child {
    width: 100%;
    border: none;
    background: none;
}
.list > li > a:after {
    color: var(--hp-accent);
}

a {
    color: var(--hp-accent);
}

/* ---- Özel simge düğmesi (appFramework'ün .button'u yerine) ----
   Header'daki "Detay Bilgiler" ve tema değiştirme düğmeleri için. */
.mbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 7px 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--hp-header-text);
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
    font-family: inherit; /* appFramework'ün .button font ayarlarını miras almasın */
}
.mbutton:active {
    background: rgba(255, 255, 255, .24);
}
.mbutton.icon:before {
    left: 0; top: 0; /* appFramework'ün icon ofsetini sıfırla, dairenin ortasına al */
}

/* Başlıktaki hızlı "+ Hareket" düğmesi: geniş ekranda metinli, dar ekranda
   (aşağıdaki 760px kuralı) sadece "+" dairesi. */
.mbutton.hp-hizli-hareket {
    width: auto;
    padding: 0 12px;
    border-radius: 16px;
    font-weight: 600;
    position: relative;
    z-index: 2; /* ortalanmış h1 (appFramework, z-index:1) dar ekranda üstüne binip tıklamayı engellemesin */
}
/* "+ Yeni Hesap": geniş ekranda "+ Yeni Hesap" yazısı, dar ekranda "+" yerine klasör simgesi (iki "+" dairesi karışmasın) */
.mbutton.hp-hizli-hesap .hp-hizli-simge {
    display: none;
}

/* ==========================================================================
   Hesap Planı: Kategori / Hesap / Hareket - responsive görünüm

   Masaüstü: üstte Kategoriler + Hesaplar yan yana, altta Hareketler
             tam genişlikte bir tablo.
   Mobil (<=760px): tek sütun, "‹ Geri" ile adım adım gezinme.
   ========================================================================== */

.hp-wrap {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    box-sizing: border-box;
}

.hp-top {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--hp-border);
}

.hp-top .hp-col {
    flex: 1 1 0;
    min-width: 0;
    max-height: 40vh;
    overflow-y: auto;
    border-right: 1px solid var(--hp-border);
    box-sizing: border-box;
}
.hp-top .hp-col:last-child {
    border-right: none;
}

.hp-bottom .hp-col-full {
    width: 100%;
    box-sizing: border-box;
}

/* appFramework'ün .list kuralı "margin: 0 -10px" veriyor (panelin 10px
   dolgusunu iptal etmek için). Liste .hp-col içinde olduğundan sütundan
   taşıyor ve gereksiz bir yatay kaydırma çubuğu çıkıyordu; sütuna 10px yan
   dolgu verilerek dengeleniyor (kullanıcının bulduğu çözüm). */
#colKategoriler,
#colHesaplar {
    padding: 0 10px;
}

/* Başlık kutusu: solda seçili kaydın adı (h3), sağda ekleme düğmesi. Bölüm
   adları yazılmadığı için h3 çoğu zaman boş; yükseklik ve
   sağa yaslanan düğmenin kapsanması bu yüzden kutunun kendi işi (boş h3
   yüksekliğe katkı vermez, float da kutunun dışına taşardı). */
.hp-col-header {
    padding: 8px 12px 4px;
    min-height: 30px;
    overflow: hidden;
    border-bottom: 1px solid var(--hp-border);
}
.hp-col-header h3 {
    margin: 4px 0;
}
/* Sütun başlığındaki "+ Ekle" düğmesi (yeni kayıt ekleme Ana Sayfa'dan) */
.hp-col-header .hp-ekle {
    float: right;
    margin: 3px 0 0 8px;
    padding: 4px 10px;
    font-size: 13px;
}
/* Hesap adının yanındaki "Borç İşlemi" / "Alacak İşlemi" düğmeleri.
   Renkler hesap etiketlerindekiyle aynı: --hp-borc hesaba giriş, --hp-alacak
   hesaptan çıkış. Böylece düğmenin rengi ile kaydın yönü aynı dili konuşuyor.
   h3 ile aynı satırda dursunlar diye başlık inline-block. */
.hp-col-header h3 {
    display: inline-block;
    vertical-align: middle;
}
.hp-taraf-dugmeler {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    white-space: nowrap;
}
.hp-taraf {
    display: inline-block;
    padding: 3px 9px;
    margin-right: 6px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.6;
}
.hp-taraf-borc {
    color: var(--hp-borc);
    border-color: var(--hp-borc);
}
.hp-taraf-alacak {
    color: var(--hp-alacak);
    border-color: var(--hp-alacak);
}
.hp-kilit-notu {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
    color: var(--hp-text-muted);
}
.hp-taraf-stok {
    color: var(--hp-accent);
    border-color: var(--hp-accent);
}
.hp-taraf:active {
    background: var(--hp-bg-alt);
}
/* Popup'ta sabit tarafın (ekrandaki hesabın) okunur satırı */
.hp-sabit-taraf {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--hp-bg-alt);
    font-size: 13px;
    line-height: 1.5;
}
.hp-sabit-taraf strong {
    display: block;
}

/* Hesaplar başlığındaki grup seçme düğmesi sadece mobilde (aşağıdaki medya sorgusu) */
.hp-serit-sec {
    display: none;
}
/* Popup'tan hesap grubu seçme listesi (js/app.js hpKategoriSecPopup) */
.hp-kategori-ara {
    width: 100%;
    margin: 0 0 8px;
    padding: 7px 10px;
    box-sizing: border-box;
    border: 1px solid var(--hp-border);
    border-radius: 6px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
.hp-kategori-sec {
    max-height: 50vh;
    overflow-y: auto;
    margin: 0;
}
.hp-kategori-sec li.selected > a {
    font-weight: bold;
    color: var(--hp-accent);
}
/* Hesabı olmayan grup; popup'ta da şeritteki gibi sonda (js/app.js hpKategoriSecPopup) */
.hp-kategori-sec li.hp-bos-grup:not(.selected) > a {
    opacity: 0.5;
}

.hp-back {
    display: none; /* masaüstünde her şey zaten görünür olduğu için gerek yok */
    text-decoration: none;
    font-size: 14px;
    color: var(--hp-accent);
}

.hp-col .list li.hp-empty,
.hp-col .list li.hp-loading,
.hp-table-wrap .hp-empty,
.hp-table-wrap .hp-loading {
    opacity: .7;
    font-style: italic;
    color: var(--hp-text-muted);
    padding: 10px 12px;
}

.hp-col .list li.selected > a {
    font-weight: bold;
    color: var(--hp-accent); /* accent-text accent zemin için; seçili satır vurgu rengiyle */
}

/* Hesap listesinde hesabın bakiyesi (js/app.js hpBakiyeleriTazele): adın sağında,
   App Framework'ün liste okuna yer bırakacak kadar içeride. Seçili satırda da
   kalın değil, normal kalsın diye ayrıca font-weight veriliyor. */
#listHesaplar .hp-bakiye {
    float: right;
    margin-right: 16px;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
    color: var(--hp-text-muted);
}

/* ---- Hesap Hareketleri tablosu ---- */
.hp-table-wrap {
    padding: 4px 12px 12px;
    overflow-x: auto;
}
.hp-hareket-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.hp-hareket-table th,
.hp-hareket-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--hp-border);
    text-align: left;
    white-space: nowrap;
}
.hp-hareket-table td:nth-child(2),
.hp-hareket-table th:nth-child(2) {
    white-space: normal; /* açıklama sütunu satır kırabilir */
}
.hp-hareket-table .hp-num {
    text-align: right;
}
/* Bakiye sütunundaki B / A harfi: tutarın yanında ama daha silik
   (hesap listesindeki bakiyede de aynı biçim) */
.hp-hareket-table .hp-ba,
#listHesaplar .hp-ba {
    font-size: 11px;
    font-weight: 600;
    margin-left: 2px;
}
/* Bakiye tutarı ve harfi birlikte renkli: Borç (B) mavi, Alacak (A) kırmızı (js/app.js hpFormatBakiye).
   Sıfır bakiye renksiz kalır. */
.hp-bk-b {
    color: var(--hp-bakiye-b);
}
.hp-bk-a {
    color: var(--hp-bakiye-a);
}
/* Bilançoda eksi tutar (ters bakiye, zarar): kırmızı (js/app.js blSatirlarHtml) */
.hp-eksi {
    color: var(--hp-bakiye-a);
}
.hp-hareket-table .hp-tarih {
    text-align: center;
}

/* ---- Sayfalama çubuğu (js/app.js hpSayfaCubuguHtml) ---- */
.hp-sayfalama {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--hp-text-muted);
}
.hp-sayfalama .mbtn-secondary {
    height: 33px;
    padding: 6px 12px;
    line-height: 19px;
    white-space: nowrap;
}
.hp-sayfalama .hp-pasif {
    opacity: .35;
    pointer-events: none;
}
.hp-sayfa-bilgi {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* App Framework select'lere %100 genişlik ve 10px alt boşluk veriyor */
.hp-sayfalama select {
    width: auto;
    height: 33px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
/* Dar ekranda sadece oklar ve aralık: "‹  51–100 / 312  ›  [50 satır]" */
@media (max-width: 760px) {
    .hp-sayfa-yazi,
    .hp-sayfa-no {
        display: none;
    }
}
/* Başlık satırı: tek satırlı tablolarda thead'in ilk satırı, rapor
   tablosunda filtre satırının altındaki .rp-baslik-satir. */
.hp-hareket-table thead tr:first-child:not(.rp-filtre-satir) th,
.hp-hareket-table thead tr.rp-baslik-satir th {
    color: var(--hp-text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--hp-border);
    position: sticky;
    top: 0;
    background: var(--hp-bg);
    z-index: 2;
}
.hp-hareket-table tfoot th {
    border-top: 2px solid var(--hp-border);
    border-bottom: none;
    padding-top: 9px;
    position: sticky;
    bottom: 0;
    background: var(--hp-bg);
    z-index: 2;
}

/* Geçici olarak gizlenen öğeler (ör. başlıktaki "Detay Bilgiler" düğmesi) */
.hp-gizli {
    display: none !important;
}

/* Kurulum teklifi ve ipucu toast'ları (js/app.js): App Framework'ün toast'ı koyu zeminli,
   düğme onun üstünde dursun. Düğme <a> değil <span>; kütüphane bağlantı
   tıklamalarını kendi yükleyicisine alıyor. */
/* Toast'lar popup'ın ve maskesinin üstünde: kütüphanede toast 99999, popup
   1000000, maske 999999. Demo uyarısı açık formun üstüne çıkıyor ve düğmesine
   tıklanabilmeli; yoksa toast popup'ın gerisinde kalıyor. */
.afToastContainer {
    z-index: 1000001;
}
.afToast .hp-kur,
.afToast .hp-demo-kayit,
.afToast .hp-ipucu-git {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 12px;
    font-size: 14px;
    white-space: nowrap;
}
/* İpucu toast'ının alt satırı: sağda Göster ve kapatma işareti yan yana.
   Dokunulunca toast'ın tamamı kapanır; × bunu belli eder ve rahat dokunulsun diye büyük. */
.afToast .hp-ipucu-alt {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.afToast .hp-ipucu-alt .hp-ipucu-git {
    margin-left: 0;
}
.afToast .hp-ipucu-kapat {
    display: inline-block;
    min-width: 34px;
    padding: 3px 0 5px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    opacity: 0.85;
}
/* Alttaki toast (position: 'bc') dar ekranda alt menünün üstünde kalsın;
   App Framework onu ekranın en altına yapıştırıyor, düğme menünün altında
   kalıyordu (49px menü + boşluk). Masaüstünde alt menü gizli, kural da yok. */
@media (max-width: 767px) {
    .afToastContainer.bc {
        bottom: 58px;
    }
}

/* ---- Masaüstünde tablo içeriği seçilebilsin (js/app.js, .hp-masaustu) ----
   af.ui.base.css'in ilk kuralı her öğeye user-select: none veriyor; burada
   sadece tablolar için geri açılıyor. Sınıfı app.js dokunmatik olmayan
   tarayıcıda <html>'e ekler, yani mobilde bu kural hiç devreye girmez. */
.hp-masaustu .hp-table-wrap,
.hp-masaustu .hp-table-wrap *,
.hp-masaustu .bl-sutunlar,
.hp-masaustu .bl-sutunlar * {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    cursor: auto;
}
/* Tablo içindeki tıklanabilirler seçilemez kalsın (sıralanabilir başlık,
   düzenle/sil bağlantıları, bilançoda açılıp kapanan grup satırı) */
.hp-masaustu .rp-siralanabilir,
.hp-masaustu .bl-acilir,
.hp-masaustu .hp-table-wrap a,
.hp-masaustu .hp-table-wrap button {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* ---- Rapor tablosu: sıralanabilir başlıklar + sütun filtreleri ---- */
.rp-siralanabilir {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.rp-siralanabilir:hover {
    color: var(--hp-accent);
}
.rp-filtre-satir {
    display: none;
}
.rp-filtre-satir.rp-gorunur {
    display: table-row;
}
/* Filtre satırı başlıkların üstünde ve o da sticky: kaydırınca ikisi birlikte
   üstte kalır. Yüksekliği sabit: 34px = 26 kutu + 2x4 iç boşluk; alt çizgiyle
   birlikte ekranda 35px ve başlık satırı açıkken tam o kadar aşağı yapışıyor. */
.rp-filtre-satir th {
    padding: 4px 8px;
    height: 34px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--hp-border);
    background: var(--hp-bg);
    position: sticky;
    top: 0;
    z-index: 3;
}
.rp-filtre-satir.rp-gorunur + .rp-baslik-satir th {
    top: 35px;
}
/* İki sınıflı seçici şart: appFramework'ün input[type="text"] kuralı (40px
   yükseklik + 10px alt boşluk) tek sınıflı seçiciden güçlü çıkıyor ve filtre
   satırının yüksekliğini kaydırıyordu. */
.rp-filtre-satir .rp-filtre-input {
    width: 100%;
    height: 26px;
    margin: 0;
    box-sizing: border-box;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: normal;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}

/* ---- Raporlar: combobox sabit üstte, tablo alanı panelin geri kalan
   yüksekliğini doldurup kendi scroll'uyla kaysın (başlık/alt toplam
   sticky kalsın) ---- */
/* Flex tabanlı yaklaşım (display:flex + flex:1) appFramework'ün panel/view
   iç içe konumlandırma yapısıyla çalışmadı (Şahap sunucusunda test etti).
   Bunun yerine, araç çubuğuna SABİT bir yükseklik verip tablo alanını
   "kalan yükseklik" olarak hesaplıyoruz - Şahap'ın doğruladığı çözüm. */
/* appFramework panele 10px yan/alt boşluk veriyor; rapor tablosu ve toplam
   satırı ekranın kenarına dayansın diye kaldırıldı (araç çubuğunun ve tablo
   hücrelerinin kendi iç boşlukları kalıyor). */
#raporlar {
    padding: 0;
}
/* 57px = 10 üst boşluk + 36 seçici + 10 alt boşluk + 1 çizgi. Seçiciye ve
   düğmelere sabit yükseklik veriliyor: yazı tipi ölçüsü değişse de toplam
   kaymasın, içerik çubuğu taşıp tablonun başlık satırının üstüne binmesin
   (49px'te biniyordu). */
#raporlar .hp-tn-toolbar {
    height: 57px;
    box-sizing: border-box;
}
/* appFramework'ün genel "label" kuralı 15px iç boşluk veriyor; araç çubuğunda
   satır yüksekliğini şişirip sabit yüksekliği taşırıyordu. */
#raporlar .hp-tn-toolbar label {
    padding: 0;
}
#raporlar .hp-tn-toolbar select {
    height: 36px;
}
#raporlar .hp-tn-toolbar .mbtn-secondary {
    height: 33px;
    line-height: 19px;
}
/* Rapor seçimi ortada, düğmeler sağda. İki yanda esneyen boşluk
   kutusu var; ortadaki etiket böyle gerçekten ortalanıyor (sadece
   margin-left:auto ile boşluk eşit bölünmüyordu). */
.rp-bosluk,
.rp-dugmeler {
    flex: 1 1 0;
    min-width: 0;
}
.rp-dugmeler {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
#raporlar .hp-tn-toolbar > label {
    flex: 0 0 auto;
}
/* Düğmelerdeki ikon metnin soluna; .micon:before'un genel ofseti sıfırlanıyor */
.mbtn-secondary.micon:before,
.mbtn-primary.micon:before {
    left: 0;
    top: 2px;
    margin-right: 6px;
}
/* Dar ekranda düğme metinleri yer kaplıyor; ikon kalsın, yazı gitsin */
@media (max-width: 560px) {
    .rp-dugmeler .mbtn-secondary {
        font-size: 0; /* metni gizle, :before ikonu kalır */
        padding: 0 10px;
    }
    .rp-dugmeler .mbtn-secondary.micon:before {
        font-size: 15px;
        margin-right: 0;
    }
}
#rpTabloIcerik {
    height: calc(100% - 57px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 0; /* .hp-table-wrap'in iç boşluğu sticky başlık/toplam satırını
                   kenardan uzaklaştırıyordu; rapor tablosu kenara dayansın */
}
/* Sayfa çubuğu varken (#raporlar.rp-sayfali) tablo alanı çubuğun sabit
   yüksekliği (46px) kadar kısalır; çubuk tablo alanının altında durur. */
#rpSayfalama .hp-sayfalama {
    height: 46px;
    box-sizing: border-box;
    border-top: 1px solid var(--hp-border);
}
#raporlar.rp-sayfali #rpTabloIcerik {
    height: calc(100% - 57px - 46px);
}

/* Mobilde araç çubuğu iki satıra iner: rapor seçici üstte tam genişlikte,
   düğmeler altında. Tablo alanının yüksekliği araç çubuğunun sabit
   yüksekliğinden hesaplandığı için ikisi birlikte değişmeli. */
@media (max-width: 760px) {
    /* 100px = 10 + 36 seçici + 10 satır arası + 33 düğme + 10 + 1 çizgi */
    #raporlar .hp-tn-toolbar {
        height: 100px;
        align-content: flex-start;
    }
    #raporlar .hp-tn-toolbar label {
        flex: 1 0 100%;
    }
    #raporlar .hp-tn-toolbar select {
        flex: 1 1 auto;
        min-width: 0;
    }
    #rpTabloIcerik {
        height: calc(100% - 100px);
    }
    #raporlar.rp-sayfali #rpTabloIcerik {
        height: calc(100% - 100px - 46px);
    }
}

/* ---- Mobil: tek sayfa (kategori şeridi + hesap listesi + hareket tablosu) ----
   Eski ASP uygulamasındaki dashboard düzeni: üç bölüm alt
   alta, kategoriler yatay kaydırılan şerit. Seçimden sonra ilgili bölüme
   kaydırma js/app.js'te (hpGoTo). */
@media (max-width: 760px) {
    .hp-top {
        display: block;
        border-bottom: none;
    }
    .hp-top .hp-col {
        max-height: none;
        overflow: visible;
        border-right: none;
    }
    .hp-back {
        display: none; /* adım adım gezinme kalktı */
    }

    /* Kategoriler bölümü mobilde görünmez: hesap grubu Hesaplar başlığındaki
       düğmeyle popup'tan seçilir. DOM'da kalır; popup listesi ve seçim akışı
       (tıklatma, kaydırma, son bakılan grup) #listKategoriler'den çalışır. */
    #colKategoriler {
        display: none;
    }
    /* Ana Sayfa'daki ekleme düğmeleri dar ekranda sadece "+": dikey alan
       hareket tablosuna kalsın; ne yaptıkları bulundukları bölümden
       anlaşılıyor, `title` da yerinde. */
    .hp-ekle-yazi {
        display: none;
    }
    .hp-col-header .hp-ekle {
        padding: 4px 11px;
        font-size: 16px;
    }
    /* Koyu temada dolu vurgu rengi (mat altın) dar ekranda fazla parlak
       duruyordu; başlıktaki .mbutton'larla
       aynı silik zemin veriliyor. */
    :root.theme-dark .hp-col-header .hp-ekle {
        background: rgba(255, 255, 255, .12);
        color: var(--hp-header-text);
    }
    :root.theme-dark .hp-col-header .hp-ekle:active {
        background: rgba(255, 255, 255, .24);
    }
    /* Hesaplar başlığında kategori adının solundaki grup seçme düğmesi: uzun
       listede arama kutulu popup'tan grup seçilir (js/app.js hpKategoriSecPopup). */
    .hp-serit-sec {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        margin-right: 8px;
        width: 34px;
        height: 32px;
        border: 1px solid var(--hp-border);
        border-radius: 6px;
        background: var(--hp-bg-alt);
        color: var(--hp-accent);
        font-size: 18px;
        text-decoration: none;
    }

    /* Hesaplar: kendi içinde kaydırılan kutu; hareket tablosu ekranda kalsın */
    #colHesaplar {
        max-height: 34vh;
        overflow-y: auto;
    }
    /* Sütunun 10px yan dolgusu (App Framework'ün ".list { margin: 0 -10px }"
       kuralını dengeler) başlığı da içeri itiyor: "+" düğmesi diğer iki
       bölümünkinden 10px solda kalıyordu.
       Başlık kutusu sağda o kadar dışarı taşınıyor; başlık metni yerinden
       oynamasın diye sadece sağda. Kutu sütunun dolgu kenarında biter,
       taşma olmaz. */
    #colHesaplar .hp-col-header {
        margin-right: -10px;
    }
    /* Beş sütun (Tarih/Açıklama/Borç/Alacak/Bakiye) dar ekrana sığsın; yoksa
       Bakiye sütunu görüntünün dışında kalıp yatay kaydırma gerektiriyor. */
    .hp-table-wrap {
        padding: 4px 6px 12px;
    }
    .hp-hareket-table th,
    .hp-hareket-table td {
        padding: 6px 4px;
        font-size: 13px;
    }
    .mbutton.hp-hizli-hareket {
        width: 32px;
        padding: 0;
        border-radius: 50%;
        font-size: 20px;
    }
    .mbutton.hp-hizli-hareket span {
        display: none;
    }
    .mbutton.hp-hizli-hesap {
        font-size: 0; /* "+" metni gizlenir, yerine simge */
    }
    .mbutton.hp-hizli-hesap .hp-hizli-simge {
        display: inline-block;
        font-size: 16px;
    }
}

/* Popup ve sol menü view'larında geri düğmesi gerekmiyor: popup kendi kapatma
   düğmesiyle kapanır. Ana view'da (#mainview) ise görünür:
   panel değişince App Framework kendiliğinden ekliyor,
   böylece Ana Sayfa'dan asistana geçip vazgeçen kullanıcı geri dönebiliyor. */
.view:not(#mainview) .backButton {
    visibility: hidden;
}

/* Geri düğmesi başlıkta solda, diğer başlık düğmeleriyle aynı görünümde.
   App Framework'ün kendi biçimi açık zemine göre ve `width: 50px`,
   `padding/margin: 0 !important` veriyor; bu yüzden burada da !important var.
   Metin sadece "Geri" (js/app.js backButtonText); ok kütüphanenin kendi
   chevron'u, aşağıda kutunun içine alınıyor. Soldaki dolgu ona yer açar. */
#mainview > header .backButton {
    left: 8px;
    top: 6px;
    width: auto !important;
    height: 32px;
    padding: 0 12px 0 27px !important;
    margin: 0 !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    color: var(--hp-header-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
}
/* Kütüphanenin chevron oku (af.ui.base.css): kutunun 30px soluna, ekran dışına
   düşüyor ve `z-index: -1` ile zeminin arkasında kalıyor. Hepsi burada
   sıfırlanıp ok kutunun soluna, dikeyde ortalanarak alınıyor. */
#mainview > header .backButton:before {
    z-index: auto;
    top: 9px;
    left: 11px;
    padding: 0;
    font-size: 13px;
}
/* Menü düğmesi sağda: App Framework onu 8px dışarı taşıyor (`right: -8px`),
   dar ekranda ekranın dışında kalıyordu. */
#mainview > header .menuButton {
    right: 0;
}
@media (min-width: 768px) {
    #altMenu {
        display: none; /* masaüstünde gezinme sol menüden (drawer) yapılıyor */
    }
}

/* ==========================================================================
   $.afui.popup() formları (Ana Sayfa'daki Ekle, Tanımlar'daki Düzenle/Sil)
   ========================================================================== */

.afPopup {
    background: var(--hp-bg);
    color: var(--hp-text);
    border-color: var(--hp-border);
}
.afPopup > header {
    color: var(--hp-text);
}

.hp-form label {
    display: block;
    font-size: 12px;
    color: var(--hp-text-muted);
    margin: 8px 0 2px;
}
.hp-form-row {
    display: flex;
    gap: 8px;
}
.hp-form-row > div {
    flex: 1 1 0;
    min-width: 0;
}
.hp-form input,
.hp-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    font-size: 14px;
}
.hp-form .hp-form-error {
    color: #c0392b;
    font-size: 12px;
    margin-top: 6px;
    display: none;
}
.hp-form .hp-form-error a {
    color: inherit;
    text-decoration: underline;
}
/* Otomatik verilen, elle değiştirilmeyen alan (sihirbazdaki hesap kodu) */
.hp-form input[readonly] {
    background: transparent;
}
/* Serbest kayıt (Borç/Alacak) formu:
   her etiket kendi alanının üstünde ve tam genişlikte; borçlu hesap solda ve
   "para girişi" renginde, alacaklı hesap sağda ve "para çıkışı" renginde. Aynı
   form çift taraflı kaydı düzenlerken de kullanılıyor.
   App Framework'ün genel kuralı etiketi float, %33 genişlik ve sağa yaslı
   yapıyor; alan etiketin yanına düşüyordu. */
.hp-form-ustte label {
    float: none;
    clear: both;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}
/* Etiketten sonra gelen alan da tam genişlikte: App Framework "label + input"a
   %66 veriyor ve o kural bizim ".hp-form input"tan daha güçlü. */
.hp-form.hp-form-ustte label + input {
    width: 100%;
}
.hp-form .hp-borclu-etiket,
.hp-form .hp-alacakli-etiket {
    font-size: 13px;
    font-weight: 600;
}
.hp-form .hp-borclu-etiket {
    text-align: left;
    color: var(--hp-borc);
}
.hp-form .hp-alacakli-etiket {
    text-align: right;
    color: var(--hp-alacak);
}
/* Alanın altındaki küçük bağlantı/not (Hesap Grubu formundaki
   "Tüm hesap planını göster"). appFramework'ün etiketleri float olduğu için
   kendi satırına insin diye clear. */
.hp-form .hp-form-not {
    clear: both;
    text-align: right;
    font-size: 12px;
    padding: 2px 0 4px;
}

.hp-form .tn-plan-tumu {
    color: var(--hp-accent);
    text-decoration: underline;
    cursor: pointer;
}

/* Hesap Grubu Ekle: plandaki hiyerarşi girintili liste (js/app.js tnPlanAgacHtml) */
.hp-form .tn-plan-ara {
    width: 100%;
    margin: 0 0 6px;
    box-sizing: border-box;
}
.tn-plan-agac {
    clear: both;
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--hp-border);
    border-radius: 6px;
    text-align: left;
}
.tn-plan-sinif {
    padding: 6px 10px;
    font-weight: bold;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
.tn-plan-grup {
    padding: 5px 10px 5px 22px;
    font-weight: 600;
    color: var(--hp-text-muted);
}
.tn-plan-hesap {
    display: block;
    cursor: pointer;
    padding: 7px 10px 7px 38px;
    color: var(--hp-text);
    text-decoration: none;
}
.tn-plan-hesap.selected {
    font-weight: bold;
    color: var(--hp-accent);
    background: var(--hp-bg-alt);
}
.tn-plan-hesap.tn-plan-tanimli {
    color: var(--hp-text-muted);
    opacity: 0.6;
    cursor: default;
}
.tn-plan-bos {
    padding: 10px;
    color: var(--hp-text-muted);
}
.tn-plan-agac .tn-plan-gizli {
    display: none;
}

/* ---- İnternet bağlantısı uyarısı (js/app.js, hpBaglantiUyarisi) ----
   Sayfa akışına girmesin diye sabit: appFramework'ün başlığı 44px, şerit
   hemen altında içeriğin üstüne biner. */
.hp-baglanti-serit {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 8px 12px;
    background: var(--hp-uyari-bg);
    color: var(--hp-uyari-text);
    font-size: 13px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* ---- Demo (giriş yapmamış) görünümünün şeridi: başlığın hemen altında ---- */
/* Sol menüdeki demo notu (oturum bilgisinin yerinde). Sayfanın üstündeki demo
   şeridi yok; uyarı kayıt denendiğinde popup'ta. */
.hp-demo-bilgi .mbtn-primary {
    display: block;
    margin-top: 8px;
    padding: 6px 10px;
    text-align: center;
    font-size: 13px;
}

.mbtn-primary,
.mbtn-secondary {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}
.mbtn-primary {
    background: var(--hp-accent);
    color: var(--hp-accent-text);
}
.mbtn-secondary {
    background: transparent;
    color: var(--hp-text);
    border: 1px solid var(--hp-border);
}

/* ==========================================================================
   Tanımlar paneli: Hesap Kategorileri / Hesap Kartları / Hesap Hareketleri
   yönetim (düzenle / sil) ekranları
   ========================================================================== */

.hp-subnav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--hp-border);
}
.hp-subnav-item {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 6px;
    text-decoration: none;
    color: var(--hp-text-muted);
    font-size: 13px;
    border-bottom: 2px solid transparent;
}
/* Görünür sekmeyi/bölümü işaretleyen sınıf `active` değil `tn-aktif`:
   App Framework panelden çıkarken panelin içindeki ilk `.active` öğenin
   sınıfını siliyor (js/appframework.ui.js). Ayrıntı: docs/arayuz.md. */
.hp-subnav-item.tn-aktif {
    color: var(--hp-text);
    border-bottom-color: var(--hp-accent);
    font-weight: 600;
}

.hp-tn-section {
    display: none;
}
.hp-tn-section.tn-aktif {
    display: block;
}

.hp-tn-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hp-border);
    flex-shrink: 0;
}
.hp-tn-toolbar label {
    font-size: 12px;
    color: var(--hp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hp-tn-toolbar select {
    padding: 5px 6px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
/* Tanımlar → Hesap Hareketleri: tarihe göre süzme (tarih kutusu + "Tarihli işlemler") */
.tn-tarih-suzgec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tn-tarih-suzgec input {
    width: auto;
    margin: 0;
    padding: 5px 6px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
:root.theme-dark .tn-tarih-suzgec input {
    color-scheme: dark; /* takvim açılırken de koyu */
}
.tn-tarih-yazi {
    font-size: 14px;
    color: var(--hp-text);
}
.tn-tarih-temizle {
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    color: var(--hp-text-muted);
    cursor: pointer;
}

/* Tanımlar'daki Kategori / Hesap kutuları: dar ekranda iki kutu yan yana sıkışıp "1" ve "10("
   olarak kesiliyordu; her biri tam satır, kutu etiketin yanında kalan genişliği doldurur */
@media (max-width: 767px) {
    #tnHesaplar .hp-tn-toolbar label,
    #tnHareketler .hp-tn-toolbar label,
    #tnHareketler .tn-tarih-suzgec {
        flex: 1 1 100%;
    }
    #tnHesaplar .hp-tn-toolbar select,
    #tnHareketler .hp-tn-toolbar select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 0; /* App Framework select altına boşluk veriyordu */
    }
}

.hp-row-actions {
    float: right;
}
.hp-row-actions a {
    text-decoration: none;
    margin-left: 12px;
    color: var(--hp-text-muted);
    font-size: 13px;
}
.hp-row-actions a:hover,
.hp-row-actions a:active {
    color: var(--hp-accent);
}

.hp-hareket-table .hp-row-actions a {
    margin-left: 10px;
}
.hp-hareket-table td.hp-row-actions {
    float: none;
    text-align: right;
    white-space: nowrap;
}

/* ==========================================================================
   Hesap Sihirbazı (#sihirbaz) ve İşlem Asistanı (#asistan): 1. adım kutucuklar,
   2. adım form. İkisi aynı görünümde; asistana özel kurallar bölümün sonunda.
   ========================================================================== */

.sh-adim,
.ia-adim {
    display: none;
    max-width: 760px;
    margin: 0 auto;
}
.sh-adim.sh-aktif,
.ia-adim.ia-aktif {
    display: block;
}
.sh-baslik,
.ia-baslik {
    margin: 12px 0 2px;
}
.sh-alt,
.ia-alt {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--hp-text-muted);
}
.sh-bolum,
.ia-bolum {
    margin: 18px 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text-muted);
}
/* "Bu hesapla ilgili" başlığında hesabın adı: başlıktan daha silik */
.ia-bolum-hesap {
    font-weight: normal;
    opacity: .8;
}
#sihirbaz .hp-empty,
#sihirbaz .hp-loading,
#asistan .hp-empty,
#asistan .hp-loading,
#yardimci .hp-empty,
#yardimci .hp-loading {
    font-style: italic;
    color: var(--hp-text-muted);
}

/* Kutucuklar: dar ekranda iki, geniş ekranda dört-beş sütun */
.sh-kutular,
.ia-kutular {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
/* Başlıksız duran ilk kutu (Serbest kayıt): altındaki bölüm başlığıyla arasında
   bölümlerin kendi aralığı kadar boşluk kalsın. */
.ia-kutular-ust {
    margin-bottom: 14px;
}
.sh-kutu,
.ia-kutu {
    display: block;
    padding: 12px;
    border: 1px solid var(--hp-border);
    border-radius: 8px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    text-align: center;
    text-decoration: none;
}
/* Kutucuk simgesi (js/app.js hpKutuSimge): metnin üstünde, alt menüdeki gibi.
   Simgesiz kutucukta da yer ayrılır, başlıklar aynı hizada kalır. */
.hp-kutu-simge {
    display: block;
    height: 26px;
    margin-bottom: 6px;
    font-size: 24px;
    font-style: normal;
    line-height: 26px;
    color: var(--hp-accent);
}
.hp-kutu-simge.micon:before {
    left: 0;
    top: 0;
}
.sh-kutu:hover,
.sh-kutu:active,
.ia-kutu:hover,
.ia-kutu:active {
    border-color: var(--hp-accent);
}
.sh-kutu strong,
.ia-kutu strong {
    display: block;
    font-size: 15px;
}
.sh-kutu span,
.ia-kutu span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--hp-text-muted);
}

/* ---- Kutucuk / liste görünümü (İşlem Asistanı, Yardımcı İşlemler) ----
   1. adımın sağ üstündeki düğme panele .hp-liste-gorunum ekler (js/app.js
   hpGorunum*). İşaretleme aynı kalır; liste görünümü Hesap Sihirbazı'nın
   satırlarına benzer: simge solda, başlık ve açıklama alt alta. */
#iaAdim1,
#yiAdim1,
#shAdim1 {
    position: relative;
}
/* .mbutton başlık çubuğu için renklenmiş; içerik alanında çerçeveli, soluk */
.mbutton.hp-gorunum-dugme {
    position: absolute;
    top: 8px;
    right: 0;
    margin: 0;
    border: 1px solid var(--hp-border);
    background: var(--hp-bg-alt);
    color: var(--hp-text-muted);
}
.mbutton.hp-gorunum-dugme:hover,
.mbutton.hp-gorunum-dugme:active {
    border-color: var(--hp-accent);
    color: var(--hp-accent);
}
.hp-gorunum-dugme.micon:before {
    left: 0;
    top: 0;
}
#iaAdim1 .ia-baslik,
#iaAdim1 .ia-alt,
#yiAdim1 .ia-baslik,
#yiAdim1 .ia-alt,
#shAdim1 .sh-baslik,
#shAdim1 .sh-alt {
    padding-right: 40px; /* metin düğmenin altına girmesin */
}
.hp-liste-gorunum .ia-kutular {
    display: block;
    max-width: 640px;
    border-top: 1px solid var(--hp-border);
}
.hp-liste-gorunum .ia-kutu {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 11px 4px;
    border: none;
    border-bottom: 1px solid var(--hp-border);
    border-radius: 0;
    background: none;
    text-align: left;
}
.hp-liste-gorunum .ia-kutu:hover,
.hp-liste-gorunum .ia-kutu:active {
    background: var(--hp-bg-alt);
}
.hp-liste-gorunum .ia-kutu .hp-kutu-simge {
    grid-row: 1 / span 2;
    height: auto;
    margin: 0;
    font-size: 22px;
    line-height: 1;
    text-align: center;
}
.hp-liste-gorunum .ia-kutu strong {
    font-size: 16px;
    font-weight: 600;
}
.hp-liste-gorunum .ia-kutu span {
    margin-top: 2px;
    font-size: 13px;
}

/* Sihirbaz formu: etiket üstte, alan altında. appFramework'ün etiketleri
   float ve %33 genişlikte; tam genişlikteki panelde alanlar dağılıyordu. */
#shForm,
#iaForm,
#abForm {
    max-width: 420px;
}
#shForm label,
#iaForm label,
#abForm label {
    float: none;
    width: auto;
    text-align: left;
    padding: 0;
}
#shForm input,
#iaForm input,
#abForm input {
    width: 100%;
}

/* 1. adıma dönüş (js/app.js hpGeriBaglantisi): büyük simge ve "Geri" */
.sh-geri,
.ia-geri {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 4px 8px 4px 0;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: var(--hp-accent);
}
.sh-geri .micon,
.ia-geri .micon {
    font-size: 26px;
    font-style: normal;
}
.sh-geri .micon:before,
.ia-geri .micon:before {
    left: 0;
    top: 0;
}
.sh-dugmeler,
.ia-dugmeler {
    clear: both; /* appFramework'ün float etiketlerinin altına insin */
    padding-top: 12px;
    text-align: right;
}
.sh-sonuc,
.ia-sonuc {
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--hp-accent);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    font-size: 14px;
}

/* ---- Kullanıcılar (Yardımcı İşlemler → Kullanıcılar, js/app.js ku*) ---- */
.ku-ust {
    margin: 10px 0;
}
/* Platform yöneticisinin firma süzgeci; App Framework select'e %100 genişlik
   ve 10px alt boşluk veriyor, araç çubuğunda yan yana dursun diye eziliyor */
.ku-filtre {
    width: auto;
    max-width: 60%;
    height: 33px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ku-tablo .ku-eposta {
    color: var(--hp-text-muted);
    font-size: 13px;
}
.ku-tablo .ku-siz {
    color: var(--hp-text-muted);
    font-size: 12px;
}
/* Pasif kullanıcı satırı soluk; ad ve e-posta yine okunur kalsın diye .6 */
.ku-tablo tr.ku-pasif td {
    opacity: .6;
}
/* Satır işlemleri: Tanımlar'daki ✎/🗑 gibi düz bağlantı, simgeli */
.ku-tablo .ku-islem {
    white-space: nowrap;
    text-align: right;
}
.ku-tablo .ku-islem a {
    margin-left: 12px;
    font-size: 16px;
    color: var(--hp-accent);
    text-decoration: none;
}
/* ---- Stok (js/app.js st*) ---- */
.st-ust {
    margin: 10px 0;
}
.st-ust .mbtn-primary,
.st-ust .mbtn-secondary {
    margin-left: 6px;
}
.st-ozet {
    margin: 0 0 8px;
    font-size: 14px;
}
.st-tablo tr.st-satir {
    cursor: pointer;
}
.st-tablo .st-birim {
    color: var(--hp-text-muted);
    font-size: 12px;
}
.st-tablo .st-islem {
    white-space: nowrap;
    text-align: right;
}
.st-tablo .st-islem a {
    margin-left: 12px;
    font-size: 16px;
    color: var(--hp-accent);
    text-decoration: none;
}
.st-tablo .st-giris {
    color: var(--hp-borc);
}
.st-tablo .st-cikis {
    color: var(--hp-alacak);
}
.st-eksi {
    color: var(--hp-alacak);
}
/* Ürün / Stok formu (js/app.js stIslem*): Giriş / Çıkış seçimi, ürün satırları, toplam.
   Popup'ın içinde <a> yok (App Framework her <a>'yı "Kaydet" yapar), tıklanan öğeler <span>. */
.afPopup.st-genis {
    width: 94vw;
    max-width: 680px;
    box-sizing: border-box;
}
.afPopup.st-genis > div {
    max-height: 62vh;
    overflow-y: auto;
}
.st-yon {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
}
.st-yon .st-yon-sec {
    flex: 1;
    padding: 6px 4px;
    border-bottom: 3px solid transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-text-muted);
    cursor: pointer;
}
.st-yon .st-yon-sec.st-yon-aktif[data-yon="giris"] {
    color: var(--hp-borc);
    border-bottom-color: var(--hp-borc);
}
.st-yon .st-yon-sec.st-yon-aktif[data-yon="cikis"] {
    color: var(--hp-alacak);
    border-bottom-color: var(--hp-alacak);
}
.st-yon .st-yon-sec.st-yon-aktif[data-yon="musteri_iade"] {
    color: var(--hp-borc);
    border-bottom-color: var(--hp-borc);
}
.st-yon .st-yon-sec.st-yon-aktif[data-yon="tedarikci_iade"] {
    color: var(--hp-alacak);
    border-bottom-color: var(--hp-alacak);
}
.st-yon.st-yon-kilit .st-yon-sec:not(.st-yon-aktif) {
    display: none;
}
.st-baslik {
    display: none; /* sütun başlıkları sadece masaüstünde (aşağıda) */
}
.st-urun {
    margin: 0 0 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--hp-border);
}
.st-urun input {
    margin-bottom: 4px;
}
.st-urun-sayilar {
    display: flex;
    gap: 6px;
}
.st-urun-sayilar input {
    flex: 1;
    min-width: 0;
    text-align: right;
}
.st-urun-sayilar .st-ad {
    text-align: left;
}
.st-urun-sayilar .st-tutar {
    background: var(--hp-bg-alt);
}
.st-urun-sil {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 6px;
    font-size: 18px;
    color: var(--hp-text-muted);
    cursor: pointer;
}
.st-toplam {
    margin: 6px 0;
    text-align: right;
    font-size: 15px;
}
.st-urun-ekle {
    display: inline-block;
    margin: 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--hp-accent);
    cursor: pointer;
}
/* Masaüstü: geniş popup, ürün adı - miktar - fiyat - tutar tek satırda, üstte sütun başlıkları.
   Telefonda ad üstte, üç sayı altta (dört sütun sığmaz). */
@media (min-width: 768px) {
    .st-baslik {
        display: flex;
        gap: 6px;
        margin-top: 8px;
        font-size: 12px;
        color: var(--hp-text-muted);
    }
    .st-baslik span:nth-child(1) { flex: 1 1 auto; }
    .st-baslik span:nth-child(2) { width: 90px; text-align: right; }
    .st-baslik span:nth-child(3) { width: 110px; text-align: right; }
    .st-baslik span:nth-child(4) { width: 130px; text-align: right; }
    .st-baslik::after { content: ''; width: 24px; }
    .st-urun {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .st-urun-sayilar {
        display: contents; /* iki grubun çocukları tek satırda dizilir */
    }
    .st-urun input {
        margin-bottom: 0;
    }
    .st-urun .st-ad { order: 1; flex: 1 1 auto; }
    .st-urun .st-miktar { order: 2; flex: none; width: 90px; }
    .st-urun .st-fiyat { order: 3; flex: none; width: 110px; }
    .st-urun .st-tutar { order: 4; flex: none; width: 130px; }
    .st-urun .st-urun-sil { order: 5; flex: none; width: 24px; padding: 0; text-align: center; }
}
/* Kritik stok: liste satırı etiketi ve özet kutusu */
.st-kritik-etiket {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--hp-alacak);
    border-radius: 10px;
    color: var(--hp-alacak);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}
.ia-sonuc.st-kritik-ozet {
    border-left-color: var(--hp-alacak);
}
/* Stok listesi arama kutusu ve kod satırı */
.st-ara {
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    padding: 6px 8px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    font-size: 14px;
}
.st-tablo .st-kodlar {
    letter-spacing: .02em;
}
/* Muhasebe ile stok kartları arasındaki fark satırları */
.st-fark {
    margin: 4px 0;
    font-size: 13px;
    color: var(--hp-text-muted);
}
.sh-mevcut {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sh-mevcut li {
    padding: 6px 0;
    border-bottom: 1px solid var(--hp-border);
    font-size: 14px;
}

/* ==========================================================================
   Bilanço (#bilanco): araç çubuğu, iki sütunlu bilanço ve gelir tablosu.
   Seviyeler ASP'deki bilanço sayfasındaki gibi: sınıf kalın büyük harf,
   grup, ana hesap kalın italik, firmanın alt hesabı italik yeşil.
   ========================================================================== */

/* appFramework'ün genel label (float, %33, 15px dolgu) ve input (tam
   genişlik, 40px) kuralları araç çubuğunu dağıtıyordu. */
.bl-toolbar label {
    float: none;
    width: auto;
    padding: 0;
}
.bl-toolbar input[type="date"] {
    width: auto;
    height: 32px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    font-size: 13px;
}
/* appFramework yerel onay kutusunu gizleyip label'dan sonra kendi çiziyor;
   burada kutu label'ın içinde, yerel hali gösteriliyor. */
.bl-toolbar input[type="checkbox"] {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
}

#blIcerik {
    padding: 8px 0 16px;
}
#blIcerik .hp-empty,
#blIcerik .hp-loading {
    font-style: italic;
    color: var(--hp-text-muted);
    padding: 10px 12px;
}
.bl-donem {
    margin: 4px 0 10px;
    font-size: 13px;
    color: var(--hp-text-muted);
}
.bl-bolum {
    margin: 22px 0 8px;
}

.bl-sutunlar {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.bl-sutun {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--hp-border);
    border-radius: 6px;
    overflow: hidden;
}
.bl-baslik {
    margin: 0;
    padding: 10px 12px;
    text-align: center;
    background: var(--hp-bg-alt);
    border-bottom: 1px solid var(--hp-border);
}

.bl-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.bl-tablo td,
.bl-tablo th {
    padding: 5px 10px;
    text-align: left;
    vertical-align: top;
}
.bl-tablo .hp-num {
    text-align: right;
    white-space: nowrap;
}
.bl-tablo tfoot th {
    border-top: 2px solid var(--hp-border);
    padding-top: 8px;
    font-weight: 600;
}
.bl-s1 td {
    padding-top: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.bl-s2 td:first-child {
    padding-left: 22px;
}
.bl-s3 td {
    font-weight: 600;
    font-style: italic;
}
.bl-s3 td:first-child {
    padding-left: 40px;
}
.bl-s4 td {
    font-style: italic;
    color: var(--hp-pozitif);
}
.bl-s4 td:first-child {
    padding-left: 58px;
}
.bl-ozel td {
    font-weight: 600;
}
.bl-sayi {
    font-size: 11px;
    font-weight: normal;
    color: var(--hp-text-muted);
}

/* Grup satırı: tıklayınca altındaki hesaplar kapanır (ASP'deki ∨ işaretleri) */
.bl-acilir {
    cursor: pointer;
}
.bl-acilir td:first-child:before {
    content: '▾';
    display: inline-block;
    width: 14px;
    margin-left: -14px;
    color: var(--hp-text-muted);
}
.bl-acilir.bl-kapali td:first-child:before {
    content: '▸';
}

.bl-uyari {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--hp-uyari-bg);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    font-size: 13px;
}
.bl-uyari ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* "Bilançoyu Yapay Zekâya Yorumlat": araç çubuğunun sağında; metin tam ekran
   popup'ta (#popupDetay), kutu ekranın kalanını doldurur */
#btnBlYapayZeka {
    margin-left: auto;
}
.bl-yz {
    padding: 10px 12px;
}
.bl-yz-aciklama {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--hp-text-muted);
}
.bl-yz-baglantilar {
    font-size: 13px;
    color: var(--hp-text-muted);
}
/* af.ui.base.css her öğeye user-select: none veriyor; kutudaki metin seçilebilsin */
.bl-yz-metin {
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 230px);
    min-height: 250px;
    margin: 0 0 8px;
    padding: 6px 8px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}
.bl-yz-dugmeler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 10px;
}

/* Mobil: sütunlar alt alta, girinti azalır */
@media (max-width: 760px) {
    #btnBlYapayZeka {
        margin-left: 0;
    }
    .bl-sutunlar {
        flex-direction: column;
        align-items: stretch;
    }
    /* Dikey yönde "flex: 1 1 0" yüksekliği sıfırlıyor (overflow: hidden ile
       tablo tamamen kayboluyordu); içerik kadar uzasın. */
    .bl-sutun {
        flex: none;
    }
    .bl-tablo {
        font-size: 13px;
    }
    .bl-tablo td,
    .bl-tablo th {
        padding: 5px 8px;
    }
    .bl-s2 td:first-child { padding-left: 18px; }
    .bl-s3 td:first-child { padding-left: 30px; }
    .bl-s4 td:first-child { padding-left: 42px; }
}

/* ---- İşlem Asistanı'na özel ---- */
/* Soru seçiminin altındaki "+ Yeni ekle" bağlantısı; float etiketlerin altına insin */
.ia-yeni-bag {
    clear: both;
    text-align: right;
    font-size: 13px;
    padding: 2px 0 4px;
}
/* İşlemden çıkmadan hesap açma kutusu */
.ia-yeni {
    margin: 4px 0 8px;
    padding: 8px 10px 10px;
    border: 1px dashed var(--hp-border);
    border-radius: 6px;
    background: var(--hp-bg-alt);
}
.ia-yeni .ia-dugmeler {
    padding-top: 8px;
}
.ia-dugmeler .mbtn-secondary {
    margin-right: 6px;
}
/* Muhasebe kaydı özeti: kullanıcı ne olduğunu görsün, zamanla öğrensin */
.ia-ozet {
    clear: both;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--hp-text-muted);
}
.ia-sonuc a {
    margin-left: 6px;
    white-space: nowrap;
}

/* ---- Yardımcı İşlemler → Açılış Bakiyeleri (#abForm) ----
   Kutucuk ve form düzeni İşlem Asistanı'nınkiyle aynı (.ia-*); burada sadece
   hesap / tutar tablosu ve özet. */
#abForm {
    max-width: 520px;
}
.ab-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ab-tablo td {
    padding: 4px 0;
    border-bottom: 1px solid var(--hp-border);
    vertical-align: middle;
}
.ab-tablo td:last-child {
    width: 140px;
    padding-left: 8px;
}
#abForm .ab-tablo input {
    text-align: right;
    margin: 0;
}
.ab-ozet {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--hp-bg-alt);
    font-size: 14px;
    line-height: 1.6;
}
.ab-karsi {
    font-size: 13px;
    color: var(--hp-text-muted);
}
.ab-karsi select {
    width: auto;
    margin-left: 4px;
}
.ab-tarih-uyari {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--hp-uyari-bg);
}
.ab-tarih-uyari:empty {
    display: none;
}

/* ---- Hakkında (pages/hakkinda.php, #hakkinda paneli) ----
   Sadece metin; İşlem Asistanı'yla aynı genişlikte ve ortalı dursun. */
.hk-govde {
    max-width: 760px;
    margin: 0 auto;
    /* Metin panelin kenarına yapışmasın */
    padding: 0 10px;
}
.hk-baslik {
    margin: 12px 0 2px;
}
.hk-alt {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--hp-text-muted);
}
.hk-bolum {
    margin: 18px 0 0;
}
.hk-bolum h4 {
    margin: 0 0 6px;
    font-size: 15px;
}
/* Bölüm başlığındaki küçük simge; proje setinden (micon). Kütüphane simgeyi
   kutunun soluna kaydırıyor, başlık içinde metne bitişik dursun diye sıfırlanır. */
.hk-simge {
    margin-right: 7px;
    font-size: 15px;
    font-style: normal;
    line-height: 1;
    color: var(--hp-accent);
}
.hk-simge.micon:before {
    left: 0;
    top: 1px;
}
.hk-bolum p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
}
/* Ana metinden ayrılan not (uyarı ya da "bunu bilmeniz gerekmez" cümlesi) */
.hk-not {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--hp-bg-alt);
    color: var(--hp-text-muted);
}
/* Hesap grubu → hesap kartı → işlem sırası; oklar metnin içinde */
.hk-zincir {
    color: var(--hp-text-muted);
}
.hk-zincir span {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--hp-border);
    border-radius: 14px;
    color: var(--hp-text);
    font-size: 13px;
}
.hk-adimlar {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
}
.hk-adimlar li {
    margin-bottom: 4px;
}
/* İpuçları listesi; Göster bağlantısı ilgili paneli açar */
.hk-ipuclari {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
}
.hk-ipuclari li {
    margin-bottom: 6px;
}
.hk-git {
    margin-left: 6px;
    font-size: 13px;
    white-space: nowrap;
}

/* ---- Sık Sorulan Sorular (pages/sss.php, #sss paneli) ----
   Bölümler Hakkında'nın .hk-bolum düzenini kullanır; her soru bir <details>. */
.hk-govde .ss-ara {
    width: 100%;
    margin: 6px 0 4px;
    box-sizing: border-box;
}
.ss-soru {
    border: 1px solid var(--hp-border);
    border-radius: 6px;
    margin: 0 0 6px;
    background: var(--hp-bg);
}
.ss-soru summary {
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    color: var(--hp-text);
}
.ss-soru[open] summary {
    color: var(--hp-accent);
    border-bottom: 1px solid var(--hp-border);
}
.ss-soru .ss-cevap {
    padding: 8px 12px 2px;
}
.hk-bolum .ss-cevap p {
    font-size: 14px;
}

/* ---- Hesap Sihirbazı: ağaç görünümlü tür listesi ----
   Kutucuk ızgarasının yerini aldı: bölüm başlıkları üst
   satır, hesap türleri altlarında girintili satırlar. Bölüm başlığına tıklanınca
   kapanır (.sh-kapali); açılışta hepsi açık. Kutucuk sınıfları (.sh-kutu) İşlem
   Asistanı'nda kullanılmaya devam ediyor, o yüzden duruyorlar. */
.sh-agac {
    max-width: 640px;
}
.sh-dal {
    margin-bottom: 6px;
    border-bottom: 1px solid var(--hp-border);
}
.sh-dal-baslik {
    display: block;
    padding: 9px 4px 9px 20px;
    position: relative;
    color: var(--hp-text-muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
/* Açık/kapalı oku; kapalıyken sağa döner */
.sh-dal-baslik:before {
    content: "▾";
    position: absolute;
    left: 4px;
    font-size: 11px;
}
.sh-dal.sh-kapali .sh-dal-baslik:before {
    content: "▸";
}
.sh-dal-liste {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.sh-dal.sh-kapali .sh-dal-liste {
    display: none;
}
.sh-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px 11px 20px;
    color: var(--hp-text);
    text-decoration: none;
    border-top: 1px solid var(--hp-border);
}
.sh-dal-liste li:first-child .sh-satir {
    border-top: none;
}
.sh-satir:active {
    background: var(--hp-bg-alt);
}
/* Simge satır içinde: hpKutuSimge'nin blok düzeni burada geçerli değil */
.sh-satir .hp-kutu-simge {
    display: inline-block;
    width: 32px;
    height: auto;
    margin: 0;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    flex: 0 0 auto;
}
.sh-satir strong {
    font-weight: 600;
    font-size: 16px;
}
/* Plandaki kod ve ad: satırın sağında, soluk */
.sh-satir span {
    margin-left: auto;
    color: var(--hp-text-muted);
    font-size: 13px;
    text-align: right;
}
@media (max-width: 480px) {
    .sh-satir span {
        display: none; /* dar ekranda sadece sihirbaz başlığı kalsın */
    }
}

/* Sihirbazın kutucuk görünümü: varsayılan liste, düğmeyle kutucuğa
   geçilir (js/app.js hpGorunum*; panelde .hp-liste-gorunum yokken). Aynı ağaç
   işaretlemesi; bölüm başlıkları duruyor ve kapanıyor, satırlar kutucuk olur. */
#sihirbaz:not(.hp-liste-gorunum) .sh-agac {
    max-width: none;
}
#sihirbaz:not(.hp-liste-gorunum) .sh-dal {
    border-bottom: none;
}
#sihirbaz:not(.hp-liste-gorunum) .sh-dal-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
#sihirbaz .sh-dal.sh-kapali .sh-dal-liste {
    display: none; /* üstteki grid kuralı kapalı bölümü açmasın */
}
#sihirbaz:not(.hp-liste-gorunum) .sh-satir {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--hp-border);
    border-radius: 8px;
    background: var(--hp-bg-alt);
    text-align: center;
}
#sihirbaz:not(.hp-liste-gorunum) .sh-satir:hover,
#sihirbaz:not(.hp-liste-gorunum) .sh-satir:active {
    border-color: var(--hp-accent);
}
#sihirbaz:not(.hp-liste-gorunum) .sh-satir .hp-kutu-simge {
    display: block;
    width: auto;
    height: 26px;
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 26px;
}
#sihirbaz:not(.hp-liste-gorunum) .sh-satir strong {
    display: block;
    font-size: 15px;
}
#sihirbaz:not(.hp-liste-gorunum) .sh-satir span {
    display: block;
    margin: 4px 0 0;
    font-size: 12px; /* asistan kutucuklarıyla aynı */
    text-align: center;
}

/* ==========================================================================
   Destek / Geri Bildirim (#destek, js/app.js ds*)
   ========================================================================== */

/* Sol menüde okunmamış cevap sayısı */
.ds-rozet {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--hp-accent);
    color: var(--hp-accent-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}
.ds-rozet.hp-gizli {
    display: none;
}
.ds-dugmeler {
    margin: 12px 0;
}
.ds-dugmeler a + a {
    margin-left: 8px;
}
.ds-konular {
    border-top: 1px solid var(--hp-border);
}
.ds-konu {
    display: block;
    padding: 10px 4px;
    border-bottom: 1px solid var(--hp-border);
    color: var(--hp-text);
    text-decoration: none;
}
.ds-konu strong {
    display: block;
    margin-top: 4px;
    font-weight: 500;
}
/* Okunmamış cevabı olan konu */
.ds-konu.ds-okunmadi strong {
    font-weight: 700;
}
.ds-konu-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--hp-text-muted);
}
.ds-konu .ds-konu-ust {
    margin: 0;
}
.ds-tarih {
    margin-left: auto;
}
.ds-durum {
    padding: 1px 8px;
    border-radius: 9px;
    border: 1px solid var(--hp-border);
    font-size: 11px;
}
.ds-bekliyor {
    border-color: var(--hp-accent);
    color: var(--hp-accent);
}
.ds-cevaplandi {
    border-color: var(--hp-pozitif);
    color: var(--hp-pozitif);
}
/* Yazışma: kullanıcının mesajları sağda, bizimkiler solda */
.ds-mesajlar {
    margin: 8px 0 16px;
}
.ds-mesaj {
    max-width: 85%;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid var(--hp-border);
    border-radius: 8px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
.ds-mesaj-kullanici {
    margin-left: auto;
}
.ds-mesaj-destek {
    border-left: 3px solid var(--hp-accent);
}
.ds-mesaj-ust {
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--hp-text-muted);
}
/* af.ui.base.css her öğeye user-select: none veriyor; mesaj metni kopyalanabilsin */
.ds-mesaj-metin {
    white-space: pre-wrap;
    word-wrap: break-word;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}
.ds-ekler,
.ds-onizleme {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.ds-ekler img,
.ds-onizleme img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: cover;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
}
/* Formlardaki metin kutusu (Destek, Hesabı Kapat): .hp-form input ile aynı. Renk
   verilmeyince karanlık modda yazı açık zeminde kalıp görünmüyordu */
.hp-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    font-family: inherit;
    font-size: 14px;
}
.ds-form input[type="file"] {
    width: 100%;
    margin: 4px 0;
    font-size: 13px;
}
.ds-not {
    clear: both;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--hp-text-muted);
}

/* ---- Yardımcı İşlemler → Hesabı Kapat: silinecekler listesi (js/app.js yiHesapKapatAc) ---- */
.yi-silinecek {
    margin: 4px 0 10px;
    padding-left: 22px;
    list-style: disc;
    font-size: 14px;
}

/* ---- Ana Sayfa → Başlarken kutusu (js/app.js hpBaslarkenCiz) ---- */
.hp-baslarken {
    margin: 10px 12px 12px;
    padding: 12px 14px;
    border: 1px solid var(--hp-border);
    border-left: 4px solid var(--hp-accent);
    border-radius: 8px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
.hp-baslarken-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
}
.hp-baslarken-gizle {
    font-size: 13px;
    white-space: nowrap;
}
.hp-baslarken ol {
    margin: 10px 0 6px;
    padding: 0;
    list-style: none;
}
.hp-baslarken li > a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 4px;
    border-top: 1px solid var(--hp-border);
    color: var(--hp-text);
    text-decoration: none;
}
.hp-baslarken-no {
    flex: 0 0 26px;
    height: 26px;
    border: 2px solid var(--hp-accent);
    border-radius: 50%;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: var(--hp-accent);
    box-sizing: border-box;
}
.hp-baslarken-yazi {
    font-size: 13px;
    color: var(--hp-text-muted);
}
.hp-baslarken-yazi strong {
    display: block;
    font-size: 15px;
    color: var(--hp-text);
}
/* Tamamlanan adım: işaret dolu, yazı soluk */
.hp-baslarken-tamam .hp-baslarken-no {
    background: var(--hp-pozitif);
    border-color: var(--hp-pozitif);
    color: var(--hp-bg);
}
.hp-baslarken-tamam .hp-baslarken-yazi {
    opacity: 0.6;
}
.hp-baslarken-alt {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--hp-text-muted);
}

/* ---- Ana Sayfa → kullanım süresi uyarısı (js/app.js hpSureUyariCiz) ---- */
.hp-sure-uyari {
    margin: 10px 12px 12px;
    padding: 10px 14px;
    border: 1px solid var(--hp-border);
    border-left: 4px solid var(--hp-accent);
    border-radius: 8px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    font-size: 14px;
    line-height: 1.5;
}
.hp-sure-uyari.hp-sure-doldu {
    border-left-color: var(--hp-uyari-bg);
}
/* Kritik stok kutusu aynı görünümde, vurgu rengi uyarı tonunda */
.hp-sure-uyari.hp-stok-uyari {
    border-left-color: var(--hp-alacak);
}

/* ---- Verileriniz ve KVKK Aydınlatma Metni (pages/verileriniz.php) ----
   Hakkında'nın .hk-* düzeni; buradakiler liste, süre tablosu ve resmî bölüm başlığı. */
.vr-liste {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    font-size: 14px;
    line-height: 1.6;
}
.vr-liste li {
    margin-bottom: 4px;
}
.vr-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}
.vr-tablo td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--hp-border);
    vertical-align: top;
}
.vr-tablo td:first-child {
    width: 40%;
    color: var(--hp-text-muted);
}
/* KVKK bölümü üstteki sade metinden ayrılsın */
.vr-resmi-baslik {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--hp-border);
}
.vr-alt-baglanti {
    margin-top: 24px;
}

/* ==========================================================================
   Kasa Defteri (#kasadefteri, js/app.js kd*): solda Kasaya Girişler, sağda Kasadan Çıkışlar.
   Masaüstünde yan yana, telefonda alt alta; yazdırınca sadece defter.
   ========================================================================== */
.kd-toolbar .kd-tarih {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kd-toolbar .kd-tarih input {
    width: auto;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
}
:root.theme-dark .kd-toolbar .kd-tarih input {
    color-scheme: dark; /* takvim açılırken de koyu */
}
.kd-toolbar .mbtn-secondary {
    margin: 0;
}
.kd-defter {
    padding: 8px 12px 16px;
}
.kd-baslik {
    margin: 4px 0 0;
    text-align: center;
}
.kd-alt {
    margin: 2px 0 12px;
    text-align: center;
    font-size: 14px;
    color: var(--hp-text-muted);
}
.kd-kolonlar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kd-kolon {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}
.kd-kolon-baslik {
    padding: 6px 10px;
    font-weight: 600;
    text-align: center;
    color: #fff;
}
.kd-kolon-giris .kd-kolon-baslik {
    background: var(--hp-borc);
}
.kd-kolon-cikis .kd-kolon-baslik {
    background: var(--hp-alacak);
}
:root.theme-dark .kd-kolon-baslik {
    color: #12161d; /* koyu temada vurgu renkleri açık: yazı koyu */
}
.kd-liste {
    flex: 1 1 auto;
    min-height: 60px;
    overflow-x: auto;
}
.kd-tablo td {
    white-space: normal;
}
.kd-tablo th:nth-child(2),
.kd-tablo td:nth-child(2) {
    white-space: normal;
}
.kd-bos {
    text-align: center;
    color: var(--hp-text-muted);
}
/* Defterden kayıt girişi: sütunların altındaki boş satırlar */
.kd-tablo td:nth-child(4),
.kd-tablo th:nth-child(4) {
    width: 24px;
    padding-left: 0;
    padding-right: 4px;
    text-align: center;
}
.kd-yeni td {
    padding: 4px 6px;
    vertical-align: middle;
}
.kd-yeni select,
.kd-yeni input {
    width: 100%;
    margin: 0;
    padding: 4px 6px;
    box-sizing: border-box;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg-alt);
    color: var(--hp-text);
    font-size: 14px;
}
.kd-yeni input::placeholder {
    color: var(--hp-text-muted);
}
/* Açılan hesap listesi de temaya uysun (koyu temada beyaz zemin üstünde silik yazı kalmasın) */
.kd-yeni select option,
.kd-yeni select optgroup {
    background: var(--hp-bg);
    color: var(--hp-text);
}
:root.theme-dark .kd-yeni select,
:root.theme-dark .kd-yeni input {
    color-scheme: dark;
}
.kd-yeni .kd-yeni-tutar {
    text-align: right;
}
.kd-sil {
    font-size: 18px;
    color: var(--hp-text-muted);
    cursor: pointer;
}
.kd-satir-ekle {
    display: inline-block;
    margin: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hp-accent);
    cursor: pointer;
}
.kd-kaydet {
    margin-top: 14px;
    text-align: right;
}
.kd-bekleyen {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--hp-text-muted);
}
.kd-hata {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--hp-alacak);
}
.kd-toplam {
    margin-top: 10px;
}
.kd-toplam td:first-child {
    text-align: right;
    color: var(--hp-text-muted);
}
.kd-toplam td {
    border-bottom: none;
}
.kd-toplam tr.kd-genel td {
    border-top: 2px solid var(--hp-border);
    font-weight: 700;
    color: var(--hp-text);
}
/* ---- Mahsup İşlemleri (#mahsup, js/app.js mh*): satır düzeni Kasa Defteri'ninkiyle ortak (.kd-*) ---- */
.mh-fisno input {
    width: 110px;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--hp-border);
    border-radius: 4px;
    background: var(--hp-bg);
    color: var(--hp-text);
    font-weight: 600;
    text-align: center;
}
.kd-toolbar .kd-tarih label {
    margin: 0;
    font-size: 13px;
    color: var(--hp-text-muted);
}
#mhYeni,
#mhKaydet,
#mhSilFis {
    cursor: pointer;
}
.mh-durum {
    margin-top: 12px;
    min-height: 20px;
    text-align: center;
    font-weight: 600;
}
.mh-durum.mh-denk {
    color: var(--hp-pozitif);
}
.mh-durum.mh-fark {
    color: var(--hp-bakiye-a);
}
#mhKaydet.mh-pasif {
    opacity: 0.55;
}
.mh-liste-baslik {
    margin: 22px 0 6px;
}
.mh-fisler tbody tr {
    cursor: pointer;
}
.mh-fisler tbody tr:hover,
.mh-fisler tbody tr.mh-secili {
    background: var(--hp-bg-alt);
}

/* Telefon: Kasa kutusu tam satır (dar ekranda sıkışıp kesilmesin); giriş satırı alanları alt alta */
@media (max-width: 767px) {
    /* Tablo blok olunca giriş satırları kolon genişliğine göre büzülmez, tam genişlik alır; başlık ve kayıtlı satırlar tablo kalır */
    .kd-tablo,
    .kd-tablo tbody {
        display: block;
        width: 100%;
    }
    .kd-tablo thead,
    .kd-tablo tbody tr:not(.kd-yeni) {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .kd-tablo tr.kd-yeni {
        display: block;
        padding: 6px 0;
        border-bottom: 1px solid var(--hp-border);
    }
    .kd-tablo tr.kd-yeni td {
        display: block;
        width: auto;
        padding: 2px 0;
        border: 0;
        text-align: left;
    }
    .kd-tablo tr.kd-yeni td.kd-yeni-sil {
        text-align: right;
    }
    .kd-toolbar label {
        flex: 1 1 100%;
    }
    .kd-toolbar label select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin: 0;
    }
}
@media (min-width: 768px) {
    .kd-kolonlar {
        flex-direction: row;
    }
    .kd-liste {
        min-height: 160px; /* iki sütun benzer yükseklikte, toplamlar hizalı */
    }
}
@media print {
    /* Sadece Kasa Defteri basılır: menü, başlık ve araç çubuğu gizlenir */
    body * {
        visibility: hidden;
    }
    #kasadefteri, #kasadefteri * {
        visibility: visible;
    }
    #kasadefteri {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #kasadefteri .kd-toolbar,
    #kasadefteri .kd-yeni,
    #kasadefteri .kd-satir-ekle,
    #kasadefteri .kd-kaydet,
    #kasadefteri .kd-bekleyen {
        display: none;
    }
    .kd-kolonlar {
        flex-direction: row;
    }
    .kd-kolon-baslik {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}