@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Figtree:wght@400;500;600&family=Source+Sans+3:wght@400;500;600&display=swap);

:root {
    --ink: #1C2321;
    --ink-soft: #3B443F;
    --paper: #FFFFFF;
    --card: #FFFFFF;
    --line: #E3E7DF;
    --line-soft: #EEF1EA;
    --muted: #7C8577;
    --brass: #E0722E;
    --brass-tint: #FDEBDD;
    --brass-text: #B85A1E;
    --logo-brass: #FF630C;
    --lacivert: #012347;
    --yazi-tipi: "IBM Plex Sans";
    /* [SITAPY_FRONTEND_v161] Açılır pencerelerin üç standart genişliği */
    --modal-dar: 480px;
    --modal-orta: 720px;
    --modal-genis: 1060px;
    --lacivert-koyu: #001631;
    --deniz: #017C85;
    --deniz-tint: #E0F2F2;
    --deniz-text: #01636B;
    --deniz-parlak: #3FD1CB;
    --pine: #2E7D53;
    --pine-tint: #E1F2E7;
    --pine-text: #1E5C3C;
    --brick: #A5432F;
    --brick-tint: #FBEAE6;
    --brick-text: #8A3323;
    --shadow-sm: 0 1px 2px rgba(28, 35, 33, .05), 0 1px 1px rgba(28, 35, 33, .04);
    --shadow-md: 0 2px 10px rgba(28, 35, 33, .08), 0 1px 2px rgba(28, 35, 33, .06)
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--paper);
    /* [SITAPY_FRONTEND_v162] Platform Yönetimi > Tasarım'dan değiştirilebilir */
    font-family: var(--yazi-tipi, "IBM Plex Sans"), sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased
}

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden
}

.panel-icli > :not(.panel-baslik) {
    margin-left: 20px;
    margin-right: 20px
}

.panel-icli > :last-child:not(.panel-baslik) {
    margin-bottom: 20px
}

.panel-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line)
}

.panel-baslik h2 {
    font-family: Space Grotesk, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    margin: 0
}

.panel-baslik-alt {
    font-size: 12px;
    color: var(--muted);
    margin: 2px 0 0
}

.istatistik-serit {
    display: flex;
    gap: 22px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap
}

.istatistik {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 22px;
    border-right: 1px solid var(--line-soft)
}

.istatistik:last-child {
    border-right: none;
    padding-right: 0
}

.istatistik-deger {
    font-family: IBM Plex Mono, monospace;
    font-size: 19px;
    font-weight: 500
}

.istatistik-etiket {
    font-size: 11.5px;
    color: var(--muted)
}

.istatistik-deger.brick {
    color: var(--brick-text)
}

.istatistik-deger.pine {
    color: var(--pine-text)
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 32px
}

.kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm)
}

.kpi-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px
}

.kpi-etiket {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    margin: 0
}

.kpi-ikon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.kpi-ikon svg {
    width: 13px;
    height: 13px
}

.kpi-ikon.pine {
    background: var(--pine-tint);
    color: var(--pine-text)
}

.kpi-ikon.brick {
    background: var(--brick-tint);
    color: var(--brick-text)
}

.kpi-ikon.brass {
    background: var(--brass-tint);
    color: var(--brass-text)
}

.kpi-ikon.notr {
    background: var(--line-soft);
    color: var(--ink-soft)
}

.kpi-deger {
    font-family: IBM Plex Mono, monospace;
    font-size: 25px;
    font-weight: 500;
    margin: 0 0 6px;
    letter-spacing: -.01em
}

.kpi-alt {
    font-size: 11.5px;
    color: var(--muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px
}

.grup-baslik {
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: var(--paper);
    color: var(--lacivert);
    font-weight: 700;
    margin: 0 0 12px;
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm)
}

.kart-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px
}

.kart {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
    transition: box-shadow .15s ease, border-color .15s ease
}

.kart:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--line-soft)
}

.kart-ust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px
}

.kart-ikon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    padding: 6px;
    box-sizing: content-box;
    border-radius: 8px;
    background: var(--line-soft);
    color: var(--ink-soft)
}

.kart-ikon.turuncu {
    color: var(--brass-text);
    background: var(--brass-tint)
}

.kart-ikon.yesil {
    color: var(--pine-text);
    background: var(--pine-tint)
}

.kart-etiket {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 600
}

.kart-deger {
    font-family: IBM Plex Mono, monospace;
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -.01em
}

.kart-deger.yesil {
    color: var(--pine-text)
}

.kart-deger.turuncu {
    color: var(--brass-text)
}

.kart-grid.kompakt {
    gap: 10px;
    margin-bottom: 20px
}

.kart.kompakt {
    padding: 10px 12px
}

.kart.kompakt .kart-ust {
    margin-bottom: 6px;
    gap: 6px
}

.kart.kompakt .kart-ikon {
    width: 10px;
    height: 10px;
    padding: 4px;
    border-radius: 6px
}

.kart.kompakt .kart-etiket {
    font-size: 9px;
    letter-spacing: .03em
}

.ic-grup {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--line-soft)
}

.ic-grup:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none
}

.alt-grup-baslik {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--paper);
    color: var(--lacivert);
    font-weight: 700;
    margin: 0 0 8px
}

.yarim-genislik-satir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start
}

.yarim-genislik-satir>div {
    min-width: 0
}

@media (max-width:900px) {
    .yarim-genislik-satir {
        grid-template-columns: 1fr
    }
}

.masonry-iki-kolon {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.masonry-kolon {
    flex: 1 1 0;
    min-width: 0;
    display: block
}

@media (max-width:900px) {
    .masonry-iki-kolon {
        flex-direction: column
    }
}

.kpi-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 0
}

.kpi-grid-2 .kpi {
    padding: 12px 14px;
    box-shadow: none
}

.kpi-grid-2 .kpi-ust {
    margin-bottom: 8px
}

.kpi-grid-2 .kpi-deger {
    font-size: 16px !important;
    margin-bottom: 2px
}

.kpi-grid-2 .kpi-etiket {
    font-size: 11px
}

.kpi-grid-uyari {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 0
}

.kpi-grid-uyari .kpi-deger {
    font-size: 20px !important
}

.kpi-tiklanabilir {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease
}

.kpi-tiklanabilir:hover {
    border-color: var(--brass);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px)
}

.kpi-ok {
    display: inline-block;
    margin-left: 5px;
    color: var(--brass-text);
    font-weight: 700;
    opacity: .75
}

.tablo-belirgin th {
    border-right: 1px solid var(--line);
    text-align: right
}

.tablo-belirgin td:first-child,
.tablo-belirgin th:first-child {
    text-align: left
}

.tablo-belirgin td {
    border-right: 1px solid var(--line-soft);
    text-align: right
}

.tablo-belirgin td:last-child,
.tablo-belirgin th:last-child {
    border-right: none
}

.aidat-grafik-sarmal {
    position: relative
}

.aidat-grafik-sarmal svg text {
    font-size: 10.5px !important;
    fill: var(--muted);
    font-family: IBM Plex Mono, monospace
}

.aidat-grafik-sarmal svg text.aidat-bar-etiket {
    font-size: 10.5px !important;
    fill: var(--ink-soft);
    font-weight: 600 !important
}

.aidat-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 11.5px !important;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    transform: translate(-50%, 6px)
}

.aidat-tooltip.donut-tooltip-ust {
    transform: translate(-50%, calc(-100% - 8px))
}

.aidat-tooltip b {
    font-weight: 700 !important
}

.aidat-bar-grup {
    cursor: pointer
}

.aidat-bar-grup rect {
    transition: opacity .12s ease
}

.aidat-bar-grup:hover rect {
    opacity: .82
}

.filtre-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    flex-wrap: wrap
}

.filtre-bar input[type=search],
.filtre-bar input[type=date],
.filtre-bar input[type=number],
.filtre-bar select {
    font-family: IBM Plex Sans, sans-serif;
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-soft)
}

.filtre-bar input[type=search] {
    outline: 0
}

.filtre-bar input[type=search]:focus {
    border-color: var(--ink-soft)
}

.filtre-spacer {
    flex: 1
}

.harf-filtre {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 14px 20px 6px;
    scrollbar-width: thin
}

.harf-btn {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 26px;
    text-align: center
}

.harf-btn:hover {
    border-color: var(--ink-soft)
}

.harf-btn.aktif {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

/* [SITAPY_FRONTEND_v164] Tablolar normal tablo düzenine döndürüldü.
   Önceki sürümlerde tabloya kendi içinde kaydırma kazandırmak için
   `table { display:block; max-height:308px; overflow-y:auto }` ve bunu telafi
   etmek için `thead/tbody/tr { display:table; table-layout:fixed }` kuralları
   vardı. Bunun iki yan etkisi vardı:
     1. Her satır AYRI BİR TABLO haline geliyordu; başlıktaki sütun genişlikleri
        gövdedeki hücrelere hiç geçmiyordu. Sütunlar eşit bölünüyor, bu yüzden
        kısa bir "Tarih" sütunu, uzun bir "Açıklama" sütunu kadar yer kaplıyor,
        açıklama ise yanında boşluk varken ikinci satıra kayıyordu.
     2. 308px'i aşan her tablo kendi içinde kaydırma çubuğu gösteriyordu.
   Artık tek bir tablo var: sütunlar içeriğe göre dağılıyor, th'ye verilen
   genişlikler gövdeye de uygulanıyor ve sayfadaki tüm satırlar görünüyor. */
table {
    width: 100%;
    border-collapse: collapse
}

table tfoot {
    background: var(--card)
}

th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 600;
    padding: 10px 14px;
    /* v164: başlık şeridi artık bütün tablolarda — eskiden yalnızca
       .tablo-belirgin kullanan sayfalarda vardı. */
    background: var(--line-soft);
    border-bottom: 1px solid var(--line)
}

td {
    padding: 13px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle
}

/* [SITAPY_FRONTEND_v165] Yatay dolgu 20px'den 14px'e indi. Çok sütunlu
   tablolarda (Giderler/Gelirler 12 sütun) tek başına dolgu 480px yer kaplıyor,
   içerik panele sığmıyordu. Tablonun kenarları eski nefesini korusun diye ilk ve
   son hücrede 20px'te kalıyor. */
th:first-child,
td:first-child {
    padding-left: 20px
}

th:last-child,
td:last-child {
    padding-right: 20px
}

tbody tr:last-child td {
    border-bottom: none
}

tbody tr {
    transition: background .1s ease
}

tbody tr:hover {
    background: var(--paper)
}

td.mono {
    font-family: IBM Plex Mono, monospace;
    font-size: 12.5px;
    text-align: right
}

.daire-etiket {
    font-weight: 500
}

.sakin-hucre {
    display: flex;
    align-items: center;
    gap: 9px
}

.satir-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-soft);
    flex-shrink: 0
}

.bos-sakin {
    color: var(--muted);
    font-size: 12.5px;
    font-style: italic
}

.avatar {
    border-radius: 50%;
    background: var(--pine-tint);
    color: var(--pine-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    font-size: 11px
}

.iletisim {
    font-size: 12.5px;
    color: var(--ink-soft)
}

.iletisim-alt {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px
}

.tutar-artı {
    color: var(--pine-text);
    font-weight: 500
}

.rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 10px 4px 8px;
    border-radius: 100px
}

.rozet:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%
}

.rozet.brick {
    background: var(--brick-tint);
    color: var(--brick-text)
}

.rozet.brick:before {
    background: var(--brick)
}

.rozet.brass {
    background: var(--brass-tint);
    color: var(--brass-text)
}

.rozet.brass:before {
    background: var(--brass)
}

.rozet.pine {
    background: var(--pine-tint);
    color: var(--pine-text)
}

.rozet.pine:before {
    background: var(--pine)
}

/* [SITAPY_FRONTEND_v165] "yesil" ve "turuncu" rozet sınıfları kodda kullanılıyordu
   ama CSS'te hiç tanımlı değildi; bu yüzden Giderler/Gelirler sayfalarındaki
   "Ödendi / Ödenmedi", rezervasyonlardaki "Ödendi / Bekliyor" ve ziyaretçilerdeki
   "İçeride" etiketleri renksiz düz yazı olarak çıkıyordu. */
.rozet.yesil {
    background: var(--pine-tint);
    color: var(--pine-text)
}

.rozet.yesil:before {
    background: var(--pine)
}

.rozet.turuncu {
    background: var(--brass-tint);
    color: var(--brass-text)
}

.rozet.turuncu:before {
    background: var(--brass)
}

.rozet.notr {
    background: var(--line-soft);
    color: var(--ink-soft)
}

.rozet.notr:before {
    background: var(--muted)
}

.btn {
    font-family: IBM Plex Sans, sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 15px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: var(--shadow-sm)
}

.btn svg {
    width: 13px;
    height: 13px
}

.btn.dolu {
    background: var(--brass);
    border-color: var(--brass);
    color: #fff
}

.btn.pine {
    background: var(--pine-tint);
    border-color: var(--pine);
    color: var(--pine-text)
}

.btn.deniz {
    background: var(--deniz-tint);
    border-color: var(--deniz);
    color: var(--deniz-text)
}

.btn.brick {
    background: var(--brick-tint);
    border-color: var(--brick);
    color: var(--brick-text)
}

.btn.mor {
    background: #ede7f6;
    border-color: #7e57c2;
    color: #5e35b1
}

.btn.whatsapp {
    background: #e7f9ef;
    border-color: #25d366;
    color: #1d9c50
}

.aidat-muaf-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 4px
}

.aidat-muaf-satir label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px
}

.aidat-muaf-satir input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--brass)
}

.daire-eylem-satiri {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.goz-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    cursor: pointer
}

.goz-btn svg {
    width: 13px;
    height: 13px
}

.goz-btn.yesil {
    background: var(--pine-tint);
    color: var(--pine-text);
    border-color: var(--pine-tint)
}

.durum-mesaji {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px
}

.donut-sarmal {
    width: 100%
}

.donut-merkez-etiket {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    pointer-events: none
}

.donut-merkez-etiket>span:first-child {
    font-size: 11px;
    color: var(--muted)
}

.donut-merkez-tutar {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--lacivert)
}

.donut-yan-yana {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media (max-width:600px) {
    .donut-yan-yana {
        grid-template-columns: 1fr
    }
}

.kasa-v2 {
    padding: 2px 20px 16px
}

.kasa-v2-satir {
    display: grid;
    grid-template-columns: minmax(110px, 1.6fr) minmax(70px, 1fr) 14px minmax(70px, 1fr) 14px minmax(70px, 1fr) 14px minmax(70px, 1fr);
    align-items: center;
    column-gap: 4px
}

.kasa-v2-basliklar {
    padding: 10px 0 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em
}

.kasa-v2-basliklar span {
    text-align: right
}

.kasa-v2-basliklar span:first-child {
    text-align: left
}

.kasa-v2-toplam {
    padding: 10px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    cursor: pointer
}

.kasa-v2-etiket {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    min-width: 0
}

.kasa-v2-etiket-metin {
    min-width: 0;
    overflow-wrap: break-word
}

.kasa-v2-toplam .kasa-v2-etiket {
    font-weight: 700
}

.kasa-v2-normal .kasa-v2-etiket {
    font-weight: 400;
    font-size: 12.5px
}

.kasa-v2-ok {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform .15s
}

.kasa-v2-ok:not(.acik) {
    transform: rotate(180deg)
}

.kasa-v2-tl-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pine-tint);
    color: var(--pine-text);
    font-size: 11px;
    font-weight: 700
}

.kasa-v2-kutu {
    text-align: right;
    font-family: IBM Plex Mono, monospace;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 6px;
    border: 1px solid transparent;
    white-space: nowrap
}

.kasa-v2-kutu.devir {
    background: var(--deniz-tint);
    border-color: var(--deniz);
    color: var(--deniz-text)
}

.kasa-v2-kutu.giren {
    background: var(--pine-tint);
    border-color: var(--pine);
    color: var(--pine-text)
}

.kasa-v2-kutu.cikan {
    background: var(--brick-tint);
    border-color: var(--brick);
    color: var(--brick-text)
}

.kasa-v2-kutu.kalan {
    background: var(--deniz-tint);
    border-color: var(--deniz);
    color: var(--deniz-text)
}

.kasa-v2-op {
    text-align: center;
    color: var(--muted);
    font-weight: 600;
    font-size: 12px
}

.kasa-v2-normal {
    padding: 7px 0;
    border-bottom: 1px dotted var(--line)
}

.kasa-v2-normal:last-child {
    border-bottom: none
}

.kasa-v2-normal.tiklanabilir {
    cursor: pointer
}

.kasa-v2-normal.tiklanabilir:hover {
    background: var(--line-soft)
}

.kasa-v2-deger {
    text-align: right;
    font-family: IBM Plex Mono, monospace;
    font-size: 12.5px;
    white-space: nowrap
}

.kasa-v2-deger.devir,
.kasa-v2-deger.kalan {
    color: var(--deniz-text)
}

.kasa-v2-deger.giren {
    color: var(--pine-text)
}

.kasa-v2-deger.cikan {
    color: var(--brick-text)
}

@media (max-width:700px) {
    .kasa-v2-satir {
        grid-template-columns: minmax(80px, 1.4fr) minmax(58px, 1fr) 8px minmax(58px, 1fr) 8px minmax(58px, 1fr) 8px minmax(58px, 1fr);
        column-gap: 2px
    }

    .kasa-v2-deger,
    .kasa-v2-kutu {
        font-size: 11px
    }
}

.duyuru-listesi {
    display: flex;
    flex-direction: column
}

.duyuru {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    gap: 16px
}

.duyuru:last-child {
    border-bottom: none
}

.duyuru-ikon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brass-tint);
    color: var(--brass-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.duyuru-ikon svg {
    width: 16px;
    height: 16px
}

.duyuru-govde {
    flex: 1;
    min-width: 0
}

.duyuru-ust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px
}

.duyuru-baslik {
    font-family: Space Grotesk, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    margin: 0
}

.pin-rozet {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brass-text);
    background: var(--brass-tint);
    padding: 2px 7px;
    border-radius: 100px
}

.pin-rozet svg {
    width: 9px;
    height: 9px
}

.duyuru-metin {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0 0 8px
}

.duyuru-meta {
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px
}

.duyuru-nokta {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted)
}

.modal-katman {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #1c232173;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px
}

/* [SITAPY_FRONTEND_v161] Pencere boyutları üç standarda indirildi.
   Önceden dört ayrı genişlik vardı (420 / 630 / 820 / 1050) ve çoğu form
   varsayılan 420px'te kaldığı için kimi pencere dar, kimi geniş görünüyordu.
   Artık tek bir ölçek var ve her pencere üçünden birine oturuyor:
     dar   480px — onay soruları, tek alanlı pencereler
     orta  720px — standart formlar (VARSAYILAN)
     geniş 1060px — tablo/çok sütunlu içerik                                  */
.modal-kutu {
    background: var(--card);
    border-radius: 12px;
    width: 100%;
    max-width: var(--modal-orta);
    box-shadow: 0 12px 32px #1c23212e;
    max-height: 88vh;
    overflow-y: auto
}

.modal-kutu-dar {
    max-width: var(--modal-dar)
}

.modal-kutu-genis,
.modal-kutu-cok-genis {
    max-width: var(--modal-genis)
}

.modal-baslik-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line)
}

.modal-baslik-bar h2 {
    font-family: Space Grotesk, sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    margin: 0
}

.modal-kapat {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: 0 0;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0
}

.modal-kapat svg {
    width: 15px;
    height: 15px
}

.modal-govde {
    padding: 18px 20px
}

.form-alani {
    margin-bottom: 14px
}

.form-alani label {
    font-size: 12.5px;
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
    color: var(--ink-soft)
}

.form-alani input,
.form-alani select,
.form-alani textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 13px;
    font-family: IBM Plex Sans, sans-serif;
    box-sizing: border-box;
    color: var(--ink);
    background: var(--card)
}

.form-alani textarea {
    resize: vertical;
    min-height: 80px
}

.form-satir {
    display: flex;
    gap: 10px
}

.form-satir .form-alani {
    flex: 1
}

.form-hata {
    color: var(--brick-text);
    font-size: 12.5px;
    margin: 0 0 12px
}

.form-aksiyonlar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px
}

@media print {

    .filtre-bar,
    .form-aksiyonlar,
    .goz-btn,
    .kesit,
    .modal-katman {
        display: none !important
    }

    .icerik {
        padding: 0 !important
    }

    .app {
        display: block !important
    }

    .panel {
        border: none;
        box-shadow: none
    }

    table {
        font-size: 11px
    }

    body {
        background: #fff
    }
}

.detay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line)
}

.detay-etiket {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 4px
}

.detay-deger {
    font-size: 13.5px;
    font-weight: 500;
    margin: 0
}

.detay-bolum-baslik {
    font-family: Space Grotesk, sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    margin: 0 0 10px
}

body,
body * {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important
}

.alt-grup-baslik,
.baslik,
.detay-bolum-baslik,
.duyuru-baslik,
.grup-baslik,
.marka-ad,
.modal-baslik-bar h2,
.panel-baslik h2,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700 !important
}

.panel-baslik-alt {
    font-weight: 400 !important
}

.baslik {
    font-size: 16px !important
}

.istatistik-deger,
.kart-deger,
.kpi-deger {
    font-weight: 700 !important
}

.kart-deger {
    font-size: 20px !important
}

.kart.kompakt .kart-deger {
    font-size: 15px !important
}

.kpi-deger {
    font-size: 18px !important
}

.istatistik-deger {
    font-size: 15px !important
}

.giris-sayfa {
    min-height: 100vh;
    display: flex;
    background: var(--paper)
}

.giris-marka {
    flex: 1.15;
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--lacivert) 0, var(--lacivert-koyu) 100%);
    color: #fff;
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.giris-blob {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff630c59, #ff630c00 70%);
    filter: blur(10px);
    pointer-events: none
}

.giris-marka-ust {
    position: relative;
    z-index: 1;
    max-width: 460px
}

.giris-marka-wordmark {
    font-family: Space Grotesk, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    margin-bottom: 36px;
    color: #fff
}

.giris-marka-wordmark-vurgu {
    color: var(--logo-brass)
}

.giris-marka-wordmark-deniz {
    color: var(--deniz-parlak)
}

.giris-marka-baslik {
    font-family: Space Grotesk, sans-serif !important;
    font-size: 34px !important;
    line-height: 1.22;
    margin: 0 0 16px;
    color: #fff;
    font-weight: 700 !important
}

.giris-marka-alt {
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.6;
    color: #ffffffb8;
    margin: 0 0 40px;
    max-width: 400px
}

.giris-ozellikler {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1
}

.giris-ozellik {
    display: flex;
    align-items: flex-start;
    gap: 14px
}

.giris-ozellik-ikon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    background: #ffffff1a;
    color: var(--logo-brass);
    display: flex;
    align-items: center;
    justify-content: center
}

.giris-ozellik-ikon svg {
    width: 17px;
    height: 17px
}

.giris-ozellik-ikon.deniz {
    color: var(--deniz-parlak)
}

.giris-ozellik-baslik {
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #fff;
    margin: 0 0 3px
}

.giris-ozellik-metin {
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 12.5px !important;
    color: #ffffff9e;
    margin: 0;
    line-height: 1.5
}

.giris-skyline {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 110px;
    color: #ffffff17;
    fill: currentColor;
    margin-top: 24px;
    flex-shrink: 0
}

.giris-form-panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px
}

.giris-kart {
    width: 100%;
    max-width: 380px
}

.giris-anasayfa-link {
    position: absolute;
    top: 24px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--muted);
    transition: color .15s ease
}

.giris-anasayfa-link svg {
    width: 14px;
    height: 14px
}

.giris-anasayfa-link:hover {
    color: var(--logo-brass)
}

@media (max-width:860px) {
    .giris-anasayfa-link {
        top: 16px;
        left: 16px
    }
}

.giris-logo-link {
    display: block;
    margin: 0 auto 28px;
    max-width: 190px
}

.giris-logo {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: block;
    margin: 0
}

.giris-baslik {
    font-family: Space Grotesk, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    color: var(--ink);
    margin: 0 0 6px;
    text-align: center
}

.giris-alt {
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 13px !important;
    color: var(--muted);
    margin: 0 0 28px;
    text-align: center
}

.giris-input-grup {
    margin-bottom: 16px
}

.giris-input-grup label {
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    display: block;
    margin-bottom: 6px;
    color: var(--ink-soft)
}

.giris-input-kutu {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    padding: 0 12px;
    background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease
}

.giris-input-kutu:focus-within {
    border-color: var(--brass);
    box-shadow: 0 0 0 3px var(--brass-tint)
}

.giris-input-ikon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted)
}

.giris-input-kutu input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: 0;
    background: 0 0;
    padding: 11px 0;
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 13.5px !important;
    color: var(--ink)
}

.giris-goz-toggle {
    border: none;
    background: 0 0;
    padding: 4px;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.giris-goz-toggle svg {
    width: 16px;
    height: 16px
}

.giris-goz-toggle:hover {
    color: var(--ink-soft)
}

.giris-hata {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--brick-tint);
    color: var(--brick-text);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.5
}

.giris-hata svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px
}

.giris-buton {
    width: 100%;
    border: none;
    border-radius: 9px;
    background: var(--logo-brass);
    color: #fff;
    padding: 12px;
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s ease, transform .05s ease;
    box-shadow: 0 4px 14px #ff630c47
}

.giris-buton:hover {
    background: #e5580a
}

.giris-buton:active {
    transform: translateY(1px)
}

.giris-buton:disabled {
    opacity: .65;
    cursor: default
}

.giris-footer {
    font-family: IBM Plex Sans, sans-serif !important;
    font-size: 11.5px !important;
    color: var(--muted);
    text-align: center;
    margin: 24px 0 0
}

@media (max-width:860px) {
    .giris-marka {
        display: none
    }

    .giris-form-panel {
        flex: 1;
        width: 100%
    }
}

.app {
    display: flex;
    min-height: 100vh;
    background: #fff
}

.kesit {
    width: 230px;
    flex-shrink: 0;
    border-right: 1px solid rgba(1, 35, 71, .18);
    box-shadow: inset -10px 0 16px -8px rgba(1, 35, 71, .22);
    display: flex;
    flex-direction: column;
    padding: 14px 14px 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden
}

.marka {
    padding: 0;
    margin: 0 0 4px
}

.marka-logo {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: block;
    margin: 0 auto
}

.marka-ad {
    font-family: Space Grotesk, sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.01em
}

.marka-ad .vurgu {
    color: var(--brass)
}

/* [SITAPY_FRONTEND_v177] Logonun altındaki panel adı ("YÖNETİM PANELİ" /
   "DANIŞMAN PANELİ" / "PLATFORM YÖNETİMİ") hangi paneldeyiz sorusunun tek
   yazılı cevabı; gri (--muted) tonda neredeyse okunmuyordu. Üç panel arasında
   gidip gelirken kullanıcının bakacağı yer burası olduğu için koyulaştırıldı. */
.marka-alt {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--ink);
    font-weight: 700;
    padding: 0 2px;
    margin: 0 0 8px;
    text-transform: uppercase;
    text-align: center
}

.site-kutu {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 2px 14px;
    font-size: 13px;
    font-weight: 600
}

.nav-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px
}

.nav-listesi {
    display: flex;
    flex-direction: column
}

.nav-oge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    cursor: pointer
}

.nav-oge svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.nav-oge:hover {
    background: var(--line-soft)
}

.nav-oge.aktif {
    background: #fff;
    border-left: 3px solid var(--brass);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-sm)
}

.nav-grup-baslik {
    width: 100%;
    background: 0 0;
    border: none;
    border-left: 3px solid transparent;
    font: inherit;
    text-align: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.nav-grup-ok {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform .15s ease
}

.nav-grup-ok.acik {
    transform: rotate(180deg)
}

.nav-grup-icerik {
    display: flex;
    flex-direction: column;
    margin: 0 0 2px
}

.nav-alt-oge {
    padding-left: 30px;
    font-size: 12.8px
}

.nav-alt-oge svg {
    width: 14px;
    height: 14px
}

.nav-alt {
    flex-shrink: 0;
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--line)
}

.nav-kullanici {
    font-size: 12px;
    color: var(--muted);
    padding: 0 12px;
    margin: 0 0 8px
}

.nav-cikis {
    color: var(--muted)
}

.site-acilir {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 20;
    overflow: hidden
}

.site-acilir-oge {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    font-size: 12.5px;
    border: none;
    background: 0 0;
    cursor: pointer;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft)
}

.site-acilir-oge:last-child {
    border-bottom: none
}

.site-acilir-oge:hover {
    background: var(--paper)
}

.icerik {
    flex: 1;
    min-width: 0;
    padding: 32px 40px
}

.baslik {
    font-family: Space Grotesk, sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 28px;
    letter-spacing: -.01em
}

.giris-sifremi-unuttum {
    display: block;
    text-align: right;
    margin-top: 8px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--brass-text);
    text-decoration: none
}

.giris-sifremi-unuttum:hover {
    text-decoration: underline
}

.hero-satir {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap
}

.hero-ring-card {
    flex: 1 1 260px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 0
}

.hero-ring {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-ring-hole {
    width: 93px;
    height: 93px;
    border-radius: 50%;
    background: var(--card)
}

.hero-ring-legend {
    flex: 1;
    min-width: 0
}

.hero-ring-baslik {
    font-family: Space Grotesk, sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    margin: 0 0 8px;
    color: var(--ink)
}

.hero-ring-legend-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font-size: 12px
}

.hero-ring-legend-ad {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft)
}

.hero-ring-legend-ad:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0
}

.hero-ring-legend-ad.tone-1:before {
    background: var(--pine)
}

.hero-ring-legend-ad.tone-2:before {
    background: var(--brass)
}

.hero-ring-legend-ad.tone-3:before {
    background: var(--lacivert)
}

.hero-ring-legend-deger {
    font-family: IBM Plex Mono, monospace;
    font-weight: 600;
    color: var(--ink)
}

@media (max-width:600px) {
    .hero-ring-card {
        flex-direction: column;
        text-align: center
    }

    .hero-ring-legend-satir {
        justify-content: center;
        gap: 6px
    }
}

.chip-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px
}

.chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink);
    font-size: 12.5px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease
}

.chip:hover {
    border-color: var(--brass);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px)
}

.chip-ikon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.chip-ikon svg {
    width: 14px;
    height: 14px
}

.chip-ikon.brass {
    background: var(--brass-tint);
    color: var(--brass-text)
}

.chip-ikon.brick {
    background: var(--brick-tint);
    color: var(--brick-text)
}

.chip-ikon.pine {
    background: var(--pine-tint);
    color: var(--pine-text)
}

.chip-ikon.deniz {
    background: var(--deniz-tint);
    color: var(--deniz-text)
}

.chip-ikon.lacivert {
    background: #e7ecf3;
    color: var(--lacivert)
}

.chip b {
    font-family: IBM Plex Mono, monospace;
    font-weight: 700;
    margin-right: 2px
}

.chip-onizleme {
    position: fixed;
    z-index: 50;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 12px 14px;
    min-width: 220px;
    max-width: 300px;
    pointer-events: none
}

.chip-onizleme-baslik {
    font-family: Space Grotesk, sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    margin: 0 0 8px;
    color: var(--ink)
}

.chip-onizleme-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 12px;
    border-top: 1px solid var(--line-soft)
}

.chip-onizleme-satir:first-of-type {
    border-top: none
}

.chip-onizleme-metin {
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.chip-onizleme-deger {
    font-family: IBM Plex Mono, monospace;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0
}

.he-tab {
    position: fixed;
    top: 130px;
    right: 0;
    width: 42px;
    height: 78px;
    background: var(--lacivert);
    border: 1px solid var(--lacivert);
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brass);
    cursor: pointer;
    z-index: 40;
    transition: width .15s ease, background .15s ease
}

.he-tab:hover {
    width: 48px;
    background: var(--lacivert-koyu);
    border-color: var(--lacivert-koyu)
}

.he-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    background: var(--card);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    z-index: 41;
    transform: translateX(100%);
    transition: transform .18s ease;
    display: flex;
    flex-direction: column
}

.he-drawer.acik {
    transform: translateX(0)
}

.he-drawer-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0
}

.he-drawer-baslik h2 {
    font-family: Space Grotesk, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    margin: 0
}

.he-drawer-govde {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px
}

.he-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    margin-bottom: 2px;
    transition: background .1s ease
}

.he-satir:hover {
    background: var(--line-soft)
}

.he-ikon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--brass-tint);
    color: var(--brass);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.he-metin {
    flex: 1;
    min-width: 0
}

.he-ad {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.he-sil-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: 0 0;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .1s ease
}

.he-satir:hover .he-sil-btn {
    opacity: 1
}

.he-sil-btn:hover {
    background: var(--brick-tint);
    color: var(--brick-text)
}

.he-bos {
    padding: 24px 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12.5px
}

.he-drawer-alt {
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    flex-shrink: 0
}

.he-ekle-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 12.5px;
    font-family: IBM Plex Sans, sans-serif;
    color: var(--ink-soft);
    background: var(--paper)
}

@media (max-width:480px) {
    .he-drawer {
        width: 88vw
    }
}

.ozet-kasalar-genis .kasa-v2-basliklar span {
    text-align: center
}

.ozet-kasalar-genis .kasa-v2-basliklar span:first-child {
    text-align: left
}

.ozet-kasalar-genis .kasa-v2-etiket-metin {
    font-weight: 700
}

.ozet-kasalar-genis .kasa-v2-normal {
    padding: 10.5px 0
}

.ozet-kasalar-genis .kasa-v2-toplam {
    padding: 15px 0
}

@media print {

    .chip-onizleme,
    .he-drawer,
    .he-tab {
        display: none !important
    }
}
/* [SITAPY_FRONTEND_v155] Üst şerit — site adı solda, kullanıcı menüsü sağda */
.sag-kolon {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
}

.sag-kolon > .icerik {
    /* flex-basis auto: içerik yüksekliği kolona aktarılsın, uzun sayfalar kırpılmasın */
    flex: 1 0 auto
}

.ust-serit {
    background: var(--lacivert);
    color: #fff;
    min-height: 45px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* [SITAPY_FRONTEND_v169] Mavi şerit sayfa kaydırılınca kaybolmasın —
       hem Yönetim hem Danışman panelinde aynı sınıf kullanılıyor. Sol menü
       (.kesit) zaten sticky; şerit de üstte sabit kalınca site adı, site
       değiştirme ve "Danışman Paneline Dön" her an erişilebilir oluyor. */
    position: sticky;
    top: 0;
    z-index: 40
}

.ust-serit-sol,
.ust-serit-sag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0
}

.ust-serit-site,
.ust-serit-kullanici,
.ust-serit-ikon {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    min-height: 34px
}

.ust-serit-site {
    font-family: Space Grotesk, sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -.005em;
    padding: 0 10px 0 0;
    min-width: 0
}

.ust-serit-site span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ust-serit-site svg {
    flex-shrink: 0;
    opacity: .8
}

.ust-serit-ikon {
    width: 30px;
    justify-content: center;
    color: rgba(255, 255, 255, .8)
}

.ust-serit-kullanici {
    padding: 0 10px 0 6px;
    font-size: 13px;
    font-weight: 500
}

.ust-serit-site:hover,
.ust-serit-ikon:hover,
.ust-serit-kullanici:hover,
.ust-serit-kullanici[aria-expanded=true] {
    background: rgba(255, 255, 255, .1)
}

.ust-serit-site:hover {
    background: none;
    text-decoration: underline;
    text-underline-offset: 4px
}

.ust-serit button:focus-visible {
    outline: 2px solid var(--deniz-parlak);
    outline-offset: 2px
}

.ust-serit-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brass);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Space Grotesk, sans-serif;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0
}

.ust-serit-ad {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ust-serit-menu {
    position: absolute;
    top: calc(100% + 6px);
    min-width: 220px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 60
}

.ust-serit-menu.sag {
    right: 0
}

.ust-serit-menu.sol {
    left: 0;
    max-height: 60vh;
    overflow-y: auto
}

.ust-serit-menu-oge {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer
}

.ust-serit-menu-oge:hover {
    background: var(--line-soft)
}

.ust-serit-menu-oge.secili {
    font-weight: 600;
    color: var(--deniz-text)
}

.ust-serit-menu-oge.cikis {
    color: var(--brick-text)
}

.ust-serit-menu-oge svg {
    flex-shrink: 0
}

@media (max-width:700px) {
    .ust-serit {
        padding: 0 16px
    }

    .ust-serit-ad {
        display: none
    }
}

@media print {
    .ust-serit {
        display: none
    }
}

/* [SITAPY_FRONTEND_v157] Filtre çubuğundaki tarih/tutar aralığı etiketleri */
.filtre-bar label {
    white-space: nowrap
}

@media (max-width:700px) {
    .filtre-bar label {
        white-space: normal
    }
}

/* v164: tablolar artık ekranda da kaydırılmıyor, yazdırma için ayrı kural gerekmiyor. */
@media print {
    .sag-kolon {
        display: block !important
    }
}

/* ==== [SITAPY_FRONTEND_v161] Satır seçimi ve toplu silme ==== */
.secim-sutun {
    width: 34px;
    padding-right: 0 !important;
    text-align: center
}

.secim-kutusu {
    width: 15px;
    height: 15px;
    accent-color: var(--lacivert);
    cursor: pointer;
    vertical-align: middle;
    margin: 0
}

.toplu-islem-cubugu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    margin: 0 0 10px;
    border: 1px solid var(--lacivert);
    border-radius: 9px;
    background: color-mix(in srgb, var(--lacivert) 7%, var(--card))
}

.toplu-islem-sayi {
    font-size: 13px;
    font-weight: 600;
    color: var(--lacivert);
    margin-right: auto
}

.silme-kalem-listesi {
    margin: 0 0 12px;
    padding: 10px 12px 10px 28px;
    border-radius: 8px;
    background: var(--surface-soft, #FAFAF8);
    font-size: 12.5px;
    line-height: 1.7;
    max-height: 190px;
    overflow-y: auto
}

.silme-kalem-daha {
    list-style: none;
    margin-left: -16px;
    color: var(--muted);
    font-style: italic
}

.silme-uyari {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--brick-text, #8d3a2e)
}

@media (max-width:640px) {
    .toplu-islem-cubugu {
        align-items: stretch
    }

    .toplu-islem-sayi {
        width: 100%;
        margin-right: 0
    }
}

/* ==== [SITAPY_FRONTEND_v162] Platform Yönetimi > Tasarım sayfası ==== */
.tema-renk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    padding: 16px 0
}

.tema-renk-alani label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 7px
}

.tema-renk-satir {
    display: flex;
    gap: 8px;
    align-items: center
}

.tema-renk-satir input[type=color] {
    width: 46px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    cursor: pointer;
    flex-shrink: 0
}

.tema-renk-satir input[type=text] {
    width: 110px;
    text-transform: uppercase
}

.tema-ipucu {
    margin: 7px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted)
}

.tema-gelismis {
    padding: 4px 0 14px;
    border-top: 1px solid var(--line-soft)
}

.tema-onay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    padding-top: 12px
}

.tema-onay input {
    width: 15px;
    height: 15px;
    accent-color: var(--lacivert);
    margin: 0
}

.tema-onizleme {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px
}

.tema-onizleme-serit {
    background: var(--lacivert);
    color: #fff;
    padding: 0 14px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600
}

.tema-onizleme-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brass);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px
}

.tema-onizleme-govde {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px
}

.tema-onizleme-metin {
    font-size: 13px;
    color: var(--muted)
}

.tema-menu-liste {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px
}

.tema-menu-satiri {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-soft)
}

.tema-menu-satiri:last-child {
    border-bottom: none
}

.tema-menu-satiri.gizli {
    background: var(--line-soft);
    opacity: .72
}

.tema-menu-satiri .btn {
    padding: 4px 9px;
    font-size: 11.5px;
    flex-shrink: 0
}

.tema-menu-ok {
    width: 20px;
    height: 24px;
    border: none;
    background: 0 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    padding: 0
}

.tema-menu-ad {
    flex: 1 1 180px;
    min-width: 120px
}

.tema-menu-yol {
    font-family: IBM Plex Mono, monospace;
    font-size: 11px;
    color: var(--muted);
    flex: 0 1 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.tema-aksiyonlar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 24px
}

@media (max-width:760px) {
    .tema-menu-yol {
        display: none
    }

    .tema-menu-satiri {
        flex-wrap: wrap
    }
}

/* ==== [SITAPY_FRONTEND_v164] Tablo hizalama ve sütun genişliği yardımcıları ==== */

/* Tarih ve tutar hücreleri asla alt satıra kaymasın — sütun içeriğe göre açılsın. */
td.mono,
th.mono {
    white-space: nowrap
}

/* Varsayılan olarak .mono sağa dayalı; tarih gibi sola dayalı olması gereken
   hücreler bu sınıfla işaretlenir. */
td.sola,
th.sola,
.tablo-belirgin td.sola,
.tablo-belirgin th.sola {
    text-align: left
}

/* Satır sonundaki aksiyon sütunu: içeriği kadar yer kaplasın, düğmeler sağa dayalı. */
td.aksiyon-sutun,
th.aksiyon-sutun {
    width: 1%;
    text-align: right
}

/* Aksiyon sütunundaki çok kelimeli düğmeler (ör. "Fatura Ödemesi Kaydet")
   sütunu şişirmesin — sarsınlar. */
td.aksiyon-sutun .btn {
    white-space: normal;
    max-width: 92px;
    line-height: 1.25;
    padding: 5px 7px;
    font-size: 11px
}

/* İki satıra sarması istenen dar aksiyon düğmesi (ör. "İcraya Gönder"). */
.btn.iki-satir {
    white-space: normal;
    line-height: 1.25;
    padding: 5px 9px;
    font-size: 11.5px;
    max-width: 86px;
    text-align: center;
    display: inline-block
}

/* Dar/geniş sütun işaretleri — içeriğe göre otomatik dağılımı yönlendirir. */
/* Sütun içeriği kadar daralsın. Başlık metni gerekirse iki satıra sarabilir —
   nowrap verilirse uzun başlıklar ("İşlem tarihi/saati", "Ödeme durumu") sütunu
   gereksiz genişletir ve tablo panelden taşar. Veri hücreleri zaten .mono ile
   tek satırda tutuluyor. */
.sutun-dar {
    width: 1%
}

.sutun-genis {
    width: auto;
    min-width: 180px
}

/* Durum sütunu: rozetin altında açıklama notu olabiliyor (ör. "… tarafından
   reddedildi"). Dar bırakılırsa not kelime kelime alt alta diziliyor. */
.sutun-durum {
    min-width: 150px
}

/* Orta genişlik: tarih/tutar gibi tek satırda durması gereken ama dar da
   kalmaması gereken sütunlar. */
.sutun-orta {
    min-width: 130px
}

/* Rozetler asla iki satıra bölünmesin. */
.rozet {
    white-space: nowrap
}

/* ==== [SITAPY_FRONTEND_v166] Danışman üst şeridi ==== */
.ust-serit-menu-baslik {
    margin: 0;
    padding: 8px 12px 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 600
}

.ust-serit-menu-bos {
    margin: 0;
    padding: 6px 12px 10px;
    font-size: 12.5px;
    color: var(--muted)
}

.ust-serit-menu-oge.geri {
    font-weight: 600;
    color: var(--brass-text);
    border-bottom: 1px solid var(--line-soft)
}

/* [SITAPY_FRONTEND_v167] Üst şeritteki "Danışman Paneline Dön" düğmesi.
   Danışman bir siteye girdiğinde site adının sağında sürekli görünür —
   hangi panelde olunduğu bir bakışta anlaşılsın diye. */
.ust-serit-geri {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease
}

.ust-serit-geri:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55)
}

@media (max-width:760px) {
    .ust-serit-geri span,
    .ust-serit-geri {
        font-size: 0
    }

    .ust-serit-geri svg {
        margin: 0
    }
}

/* ==== [SITAPY_FRONTEND_v167] Danışmanlık bağlantısı talepleri ==== */
.bag-aciklama {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-soft)
}

.bag-onaylar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.bag-onaylar .rozet {
    font-size: 10.5px
}

.bag-baslatan {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px
}

.bag-aksiyonlar {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    /* [SITAPY_FRONTEND_v170] Panel başlığında açıklama metniyle yan yana durduğunda
       düğmeler sıkışıp etiketleri iki satıra kayıyordu — küçülmeyi kapatıyoruz. */
    flex-shrink: 0
}

.bag-aksiyonlar .btn {
    padding: 5px 10px;
    font-size: 11.5px;
    white-space: nowrap
}

.bag-onay-kutu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 12px
}

.bag-onay-kutu input {
    width: 15px;
    height: 15px;
    accent-color: var(--lacivert);
    margin: 0
}

.bag-abonelik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 4px
}

/* ==== [SITAPY_FRONTEND_v169] Hızlı Erişim: alt başlığın hangi menü grubunda
   olduğunu gösteren ikinci satır. Katalog artık sol menüden türetildiği için
   aynı adlı iki sayfa (ör. Site › Sakinler ve Raporlar › Site › Sakinler)
   olabiliyor; grup satırı olmadan hangisi olduğu ayırt edilemiyordu. ==== */
.he-grup {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* ==== [SITAPY_FRONTEND_v169] Danışman ajandası (İş Takibi takvimi) ==== */
.btn.kucuk {
    padding: 5px 10px;
    font-size: 12px;
    box-shadow: none
}

.ajanda-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line-soft)
}

.ajanda-form input,
.ajanda-form select,
.ajanda-form textarea {
    width: 100%;
    font-size: 12.5px
}

.ajanda-form textarea {
    resize: vertical;
    font-family: inherit
}

.ajanda-form-satir {
    display: flex;
    gap: 7px
}

.ajanda-form-satir > * {
    flex: 1;
    min-width: 0
}

.ajanda-form-satir.sag {
    justify-content: flex-end
}

.ajanda-form-satir.sag > * {
    flex: 0 0 auto
}

.ajanda-hata {
    font-size: 12px;
    color: var(--brick-text);
    margin: 0 0 8px
}

.ajanda-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px
}

.ajanda-satir-metin {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ajanda-satir-site {
    color: var(--muted)
}

.ajanda-sil {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    border-radius: 5px
}

.ajanda-sil:hover {
    color: var(--brick-text);
    background: var(--brick-tint)
}

/* ==== [SITAPY_FRONTEND_v170] Danışman davet kodları ==== */
.davet-kod-kutu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin: 4px 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--line-soft)
}

.davet-kod {
    font-family: Consolas, 'IBM Plex Mono', monospace;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--lacivert);
    user-select: all
}

.davet-kod-giris {
    font-family: Consolas, 'IBM Plex Mono', monospace;
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.davet-firma-kutu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    margin: 4px 0 12px;
    border: 1px solid var(--pine);
    border-left-width: 4px;
    border-radius: 9px;
    background: var(--pine-tint)
}

.davet-firma-ad {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink)
}

.davet-firma-kod {
    font-family: Consolas, 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    color: var(--muted)
}

/* ==== [SITAPY_FRONTEND_v171] Bildirim çanı ==== */
.ust-serit-bildirim {
    position: relative;
    display: flex;
    align-items: center
}

.bildirim-dugme {
    position: relative
}

.bildirim-rozet {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--brick);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--lacivert)
}

.bildirim-panel {
    /* position:fixed — platform panelinde çan sol menünün (.kesit, overflow:hidden)
       içinde duruyor; akış içinde açılan panel orada kırpılıyordu. Konumu JS
       hesaplıyor (bkz. BildirimCani.konumHesapla). */
    position: fixed;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 0;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(1, 35, 71, .22);
    z-index: 200
}

.bildirim-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink)
}

.bildirim-tumu {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brass);
    cursor: pointer
}

.bildirim-tumu:disabled {
    opacity: .5;
    cursor: default
}

.bildirim-bos {
    margin: 0;
    padding: 20px 14px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center
}

.bildirim-liste {
    max-height: 380px;
    overflow-y: auto
}

.bildirim-oge {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    font-family: inherit;
    text-align: left;
    cursor: pointer
}

.bildirim-oge:hover {
    background: var(--line-soft)
}

.bildirim-oge:last-child {
    border-bottom: none
}

.bildirim-nokta {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: transparent
}

.bildirim-oge.yeni .bildirim-nokta {
    background: var(--brick)
}

.bildirim-govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.bildirim-oge-baslik {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink)
}

.bildirim-oge.yeni .bildirim-oge-baslik {
    color: var(--lacivert)
}

.bildirim-metin {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.4
}

.bildirim-zaman {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 1px
}

/* Platform panelinde çan sol menünün altında, kullanıcı adının yanında */
.nav-kullanici-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.nav-kullanici-satir .ust-serit-bildirim .bildirim-dugme {
    color: var(--muted);
    width: 30px;
    height: 30px
}

.nav-kullanici-satir .bildirim-rozet {
    box-shadow: 0 0 0 2px #fff
}

/* ==== [SITAPY_FRONTEND_v171] Üst şerit arama çubuğu ==== */
.ust-serit-arama {
    position: relative;
    flex: 0 1 420px;
    min-width: 0;
    display: flex;
    align-items: center
}

.ust-serit-arama .arama-ikon {
    position: absolute;
    left: 11px;
    color: rgba(255, 255, 255, .6);
    pointer-events: none
}

.ust-serit-arama input {
    width: 100%;
    height: 32px;
    padding: 0 30px 0 32px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: background .15s, border-color .15s
}

.ust-serit-arama input::placeholder {
    color: rgba(255, 255, 255, .55)
}

.ust-serit-arama input:focus {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .45)
}

/* Tarayıcının kendi "x" düğmesi koyu zeminde görünmüyor — kendi düğmemiz var */
.ust-serit-arama input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.arama-temizle {
    position: absolute;
    right: 8px;
    display: inline-flex;
    padding: 3px;
    border: none;
    border-radius: 5px;
    background: none;
    color: rgba(255, 255, 255, .7);
    cursor: pointer
}

.arama-temizle:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff
}

.arama-sonuc {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(1, 35, 71, .22);
    z-index: 60;
    padding: 6px 0
}

.arama-grup + .arama-grup {
    border-top: 1px solid var(--line-soft);
    margin-top: 4px;
    padding-top: 4px
}

.arama-grup-baslik {
    margin: 0;
    padding: 5px 13px 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted)
}

.arama-oge {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 7px 13px;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer
}

.arama-oge:hover {
    background: var(--line-soft)
}

.arama-oge-ad {
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.arama-oge-alt {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.arama-bos {
    margin: 0;
    padding: 14px 13px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center
}

@media (max-width: 900px) {
    .ust-serit-arama {
        display: none
    }
}

/* [SITAPY_FRONTEND_v172] Menü öğesi sayacı (Danışman › Onaylar) */
.nav-rozet {
    background: var(--brick);
    color: #fff;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    min-width: 8px;
    text-align: center;
    flex-shrink: 0
}

/* [SITAPY_FRONTEND_v172] Platform şeridinde sol taraf tıklanabilir değil —
   site adı düğmesiyle aynı görünsün ama imleç ve hover davranışı olmasın. */
.ust-serit-sabit {
    cursor: default;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-weight: 600;
    font-size: 14px
}

.ust-serit-sabit:hover {
    background: none
}

/* ==== [SITAPY_FRONTEND_v174] Paketler sayfası ve özellik kapısı ==== */
.paket-ucret-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 80px;
    gap: 10px
}

.paket-aciklama {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.45;
    margin-top: 2px;
    max-width: 560px
}

.paket-matris th:first-child,
.paket-matris td:first-child {
    min-width: 280px
}

.paket-grup-satiri td {
    background: var(--line-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 7px;
    padding-bottom: 7px
}

.paket-ozellik-ad {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px
}

.paket-ozellik-ad .rozet {
    font-size: 10px;
    padding: 1px 6px
}

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

.paket-anahtar {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.paket-anahtar input {
    width: 17px;
    height: 17px;
    cursor: pointer
}

.paket-anahtar input:disabled {
    cursor: not-allowed;
    opacity: .55
}

.paket-limit {
    width: 78px;
    margin-left: 8px;
    font-size: 12px;
    text-align: center
}

/* Paketinde olmayan bir sayfaya girildiğinde gösterilen ekran */
.ozellik-kapali {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 54px 28px;
    text-align: center;
    color: var(--muted)
}

.ozellik-kapali svg {
    color: var(--brass)
}

.ozellik-kapali h2 {
    margin: 0;
    font-size: 17px;
    color: var(--ink)
}

.ozellik-kapali p {
    margin: 0;
    max-width: 520px;
    font-size: 13.5px;
    line-height: 1.6
}

/* ==== [SITAPY_FRONTEND_v175] Abonelikler: cari hesap, fatura çıktısı, sözleşme ==== */
.saga {
    text-align: right
}

.notr-metin {
    color: var(--muted);
    font-size: 12px
}

.filtre-sayac {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted)
}

/* Üst kutular — platform özetindeki kartlarla aynı dil, dar ekranda tek sütuna iner. */
.abo-kutular {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px
}

.abo-kutu {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.abo-kutu.uyari {
    border-color: var(--brick);
    background: var(--brick-tint)
}

.abo-kutu-etiket {
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted)
}

.abo-kutu-deger {
    font-family: IBM Plex Mono, monospace;
    font-size: 19px;
    color: var(--ink)
}

.abo-kutu-alt {
    font-size: 11.5px;
    color: var(--muted)
}

/* Cari / Faturalar / Sözleşmeler sekmeleri */
.abo-sekmeler {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    flex-wrap: wrap
}

.abo-sekme {
    font-family: IBM Plex Sans, sans-serif;
    font-size: 12.5px;
    padding: 8px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: 0 0;
    color: var(--ink-soft);
    cursor: pointer
}

.abo-sekme:hover {
    color: var(--ink)
}

.abo-sekme.aktif {
    color: var(--ink);
    border-bottom-color: var(--lacivert);
    font-weight: 600
}

/* Bakiye renkleri: borç ile fazla tahsilat bir bakışta ayrılsın. */
.tutar-borc {
    color: var(--brick-text)
}

.tutar-alacak {
    color: var(--pine-text)
}

/* İptal edilmiş fatura kronolojide kalıyor ama bakiyeye girmiyor; üstü çizili
   gösterilmesi "numara neden boşta" sorusunu kendiliğinden yanıtlıyor. */
.satir-iptal td {
    opacity: .55;
    text-decoration: line-through
}

.satir-iptal td .rozet {
    text-decoration: none
}

table.tiklanir-satir tbody tr:hover {
    background: var(--paper)
}

/* ---- Fatura çıktısı ---- */
.fatura-cikti {
    background: #fff;
    color: #111;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.55
}

.fatura-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 2px solid #111;
    padding-bottom: 12px;
    margin-bottom: 16px
}

.fatura-belge-adi {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em
}

.fatura-no {
    font-family: IBM Plex Mono, monospace;
    font-size: 17px;
    margin-top: 4px
}

/* Genel tablo kuralları th'lere gri bir zemin veriyor; fatura çıktısında bu
   zemin bant gibi görünüp belgeyi bozuyordu — burada sıfırlanıyor. */
.fatura-cikti th,
.fatura-cikti td {
    background: 0 0
}

.fatura-belge-adi {
    white-space: nowrap
}

.fatura-tarih th {
    text-align: left;
    font-weight: 400;
    color: #555;
    padding: 2px 12px 2px 0;
    white-space: nowrap
}

.fatura-tarih td {
    font-family: IBM Plex Mono, monospace;
    padding: 2px 0;
    white-space: nowrap
}

.fatura-taraflar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 18px
}

.fatura-taraf-baslik {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #777;
    margin-bottom: 4px
}

.fatura-taraf-ad {
    font-weight: 600;
    margin-bottom: 2px
}

.fatura-kalem {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px
}

.fatura-kalem th,
.fatura-kalem td {
    border-bottom: 1px solid #ddd;
    padding: 8px 6px;
    vertical-align: top
}

.fatura-kalem thead th {
    background: #f4f4f2 !important;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #555
}

.fatura-kalem-alt {
    font-size: 11.5px;
    color: #666;
    margin-top: 2px
}

.fatura-kalem tfoot th {
    text-align: right;
    font-weight: 400;
    color: #555
}

.fatura-kalem tfoot tr.fatura-genel-toplam th,
.fatura-kalem tfoot tr.fatura-genel-toplam td {
    font-weight: 700;
    color: #111;
    border-top: 2px solid #111;
    border-bottom: 0
}

.fatura-odemeler,
.fatura-banka,
.fatura-not {
    font-size: 11.5px;
    color: #444;
    margin-bottom: 8px
}

.fatura-dipnot {
    font-size: 10.5px;
    color: #888;
    border-top: 1px solid #e4e4e0;
    padding-top: 8px;
    margin-top: 12px
}

/* Yazdırmada yalnızca fatura kalıyor: modal çerçevesi, menü ve düğmeler
   çıktıya girmesin. Tarayıcının "PDF olarak kaydet" seçeneği böylece tek
   sayfalık düzgün bir belge üretiyor — sunucuya PDF kütüphanesi eklemek
   gerekmedi. */
/* [SITAPY_FRONTEND_v176] :has() ile KAPSAMLANDI. v175'te kural koşulsuzdu:
   sayfada fatura olmasa da yazdırmada her şey gizleniyordu, yani rapor
   sayfalarındaki "Yazdır" düğmesi boş kâğıt üretiyordu. Artık kural yalnızca
   ekranda bir fatura çıktısı açıkken devreye giriyor. */
@media print {
    body:has(.fatura-cikti) * {
        visibility: hidden !important
    }

    body:has(.fatura-cikti) .fatura-cikti,
    body:has(.fatura-cikti) .fatura-cikti * {
        visibility: visible !important
    }

    body:has(.fatura-cikti) .fatura-cikti {
        position: fixed;
        inset: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        padding: 0;
        width: 100%;
        background: #fff
    }

    .yazdirma-gizle {
        display: none !important
    }
}

/* ==== [SITAPY_FRONTEND_v176] Sayfalama şeridi ==== */
.sayfalama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--card);
    flex-wrap: wrap
}

.sayfalama-bilgi {
    font-size: 12.5px;
    color: var(--muted)
}

.sayfalama-dugmeler {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap
}

.sayfa-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--card);
    color: var(--ink-soft);
    font-family: IBM Plex Mono, monospace;
    font-size: 12.5px;
    cursor: pointer
}

.sayfa-btn:hover:not(:disabled):not(.aktif) {
    border-color: var(--muted);
    color: var(--ink)
}

.sayfa-btn.aktif {
    background: var(--lacivert);
    border-color: var(--lacivert);
    color: #fff;
    font-weight: 600;
    cursor: default
}

.sayfa-btn:disabled {
    opacity: .4;
    cursor: default
}

.sayfa-bosluk {
    color: var(--muted);
    padding: 0 2px
}

.rapor-sayfa-toplami {
    margin: 0;
    padding: 10px 20px;
    font-size: 12.5px;
    color: var(--muted);
    border-top: 1px solid var(--line-soft)
}

/* Yazdırmada sayfalama şeridi ve süzgeç çubuğu kâğıda basılmamalı. */
@media print {
    .sayfalama,
    .filtre-bar {
        display: none !important
    }
}

/* [SITAPY_FRONTEND_v185] Dışa aktarma düğmeleri süzgeçlerden ayrılsın.
   Önceden PDF / CSV / Yazdır düğmeleri süzgeç kutularıyla aynı akışta,
   aralarına karışmış hâlde duruyordu; hangisinin süzgeç hangisinin eylem
   olduğu bakışta anlaşılmıyordu. margin-left:auto ile şeridin sağına
   itiliyorlar, dar ekranda ise alt satıra düşüp yine birlikte kalıyorlar. */
.filtre-bar .filtre-cikti {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
@media (max-width: 760px) {
    .filtre-bar .filtre-cikti { margin-left: 0; width: 100%; }
}

/* [SITAPY_FRONTEND_v187] Listelerde daire/sakin adı → Daire Hesabı bağlantısı.
   Mavi altı çizili klasik bağlantı görünümü tabloyu gürültüye boğardı; bunun
   yerine metin rengi korunuyor, yalnızca üzerine gelince altı çiziliyor ve
   vurgu rengine dönüyor. Tıklanabilir olduğu imleçten de anlaşılıyor. */
.kayit-bag {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dotted var(--muted);
}
.kayit-bag:hover,
.kayit-bag:focus-visible {
    color: var(--brass);
    border-bottom-color: var(--brass);
}