@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&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: #0C2C50;
    --lacivert-koyu: #061A32;
    --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);
    font-family: 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 {
    background: var(--line-soft);
    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 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
}

table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    max-height: 308px;
    overflow-y: auto;
    overflow-x: hidden
}

table tbody,
table tfoot,
table thead,
table tr {
    display: table;
    width: 100%;
    table-layout: fixed
}

table thead {
    position: sticky;
    top: 0;
    z-index: 1
}

table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    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 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line)
}

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

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)
}

.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
}

.modal-kutu {
    background: var(--card);
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 12px 32px #1c23212e;
    max-height: 88vh;
    overflow-y: auto
}

.modal-kutu-genis {
    max-width: 820px
}

.modal-kutu-cok-genis {
    max-width: 1050px
}

.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 var(--line);
    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)
}

.marka-alt {
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600;
    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: 50%;
    right: 0;
    transform: translateY(-50%);
    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
    }
}