/* ==========================================================================
   Fabrika ERP - tema
   Framework7 8.x uzerine kurulu. Acik kurumsal yuzeyler; marka rengi
   zemin degil, aksiyon rengidir (buton, aktif menu, ikon).
   ========================================================================== */

:root {
    /* Yazi tipleri: govde Inter, baslik ve buyuk rakamlar Space Grotesk */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Space Grotesk", var(--font-sans);
    --f7-font-family: var(--font-sans);

    /* Yuzeyler */
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #f7f9fb;
    --line: #e2e5e9;
    --divider: #eef1f5;

    /* Metin */
    --ink: #16191d;
    --ink-2: #59626c;
    --ink-3: #6b7480;

    /* Marka */
    --brand: #0a6a8f;
    --brand-strong: #08516d;
    --brand-soft: #e6f1f5;
    --brand-line: #b9d3df;

    /* Durum */
    --debt: #c22c22;
    --debt-soft: #fbeae8;
    --debt-ink: #9b231b;
    --credit: #157347;
    --credit-soft: #e6f3ec;
    --credit-ink: #0f5c38;
    --warn: #b26a00;
    --warn-soft: #fbf0df;
    --warn-ink: #8a5300;
    --violet: #55308c;
    --violet-soft: #efe9f7;

    --radius: 12px;
    --radius-sm: 8px;

    /* Framework7 degiskenleri */
    --f7-theme-color: var(--brand);
    --f7-theme-color-rgb: 10, 106, 143;
    --f7-theme-color-shade: var(--brand-strong);
    --f7-theme-color-tint: #0d7ca6;

    --f7-page-bg-color: var(--bg);
    --f7-bars-bg-color: var(--surface);
    --f7-bars-bg-color-rgb: 255, 255, 255;
    --f7-bars-text-color: var(--ink);
    --f7-bars-link-color: var(--brand);
    --f7-bars-border-color: var(--line);
    --f7-navbar-height: 56px;
    --f7-navbar-title-font-weight: 600;
    --f7-navbar-title-font-size: 15px;
    --f7-navbar-title-line-height: 1.2;

    --f7-list-bg-color: var(--surface);
    --f7-list-item-border-color: var(--divider);
    --f7-list-item-title-font-weight: 600;
    --f7-block-title-text-color: var(--ink-3);

    --f7-font-size: 14px;
    --f7-text-color: var(--ink);
    --f7-safe-area-bottom: env(safe-area-inset-bottom, 0px);

    --f7-panel-width: 288px;
    --f7-panel-bg-color: var(--surface);

    --f7-button-font-weight: 600;
    --f7-button-border-radius: var(--radius-sm);
    --f7-input-font-size: 16px;

    /* F7 Material paletinin mor yuzey / ikincil tonlari uygulamaya sizmasin */
    --f7-sheet-bg-color: var(--surface);
    --f7-button-tonal-bg-color: var(--surface-2);
    --f7-button-tonal-text-color: var(--ink);
    --f7-button-tonal-pressed-bg-color: var(--fill, var(--line));
    --f7-segmented-strong-bg-color: var(--surface-2);
    --f7-segmented-strong-button-active-bg-color: var(--surface);
    --f7-segmented-strong-button-text-color: var(--ink-2);
    --f7-segmented-strong-button-active-text-color: var(--ink);
}

/* Segment kontrolu: notr zemin, ince cerceve (F7'nin mor-gri zemini yerine) */
.segmented-strong { box-shadow: inset 0 0 0 1px var(--line); }
.segmented-strong .segmented-highlight { box-shadow: 0 1px 2px rgba(16, 24, 32, .08), 0 0 0 1px var(--line); }

.dark {
    --bg: #12171d;
    --surface: #1a2029;
    --surface-2: #161c24;
    --line: #29323d;
    --divider: #232b34;

    --ink: #e8edf3;
    --ink-2: #9aa7b5;
    --ink-3: #788594;

    --brand: #5fb4d9;
    --brand-strong: #84c6e3;
    --brand-soft: #16303f;
    --brand-line: #2c4658;

    --debt: #ef6a5f;
    --debt-soft: #3a1a17;
    --debt-ink: #f4998f;
    --credit: #4caf7d;
    --credit-soft: #15301f;
    --credit-ink: #7fc9a1;
    --warn: #d99527;
    --warn-soft: #33260f;
    --warn-ink: #e5b45f;
    --violet: #a98ad4;
    --violet-soft: #241c33;

    --f7-page-bg-color: var(--bg);
    --f7-bars-bg-color: var(--surface);
    --f7-bars-bg-color-rgb: 26, 32, 41;
    --f7-list-bg-color: var(--surface);
    --f7-panel-bg-color: var(--surface);
}

body {
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01";
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Basliklar ve one cikan tutarlar Space Grotesk */
.navbar .title,
.auth-title,
.auth-brand-name,
.db-title,
.db-card-title,
.rp-hub-title,
.dp-title,
.dp-amount,
.db-card-head h2,
.db-kpi-value,
.cl-sum > b,
.od-totals > .is-grand > b {
    font-family: var(--font-display);
    letter-spacing: -.01em;
}

/* Tarayicinin [hidden] kurali dusuk oncelikli; .item-content gibi
   display taniyan siniflar onu eziyor ve gizlenmesi gereken satirlar
   (POS komisyon/valor gibi) ekranda kaliyordu. */
[hidden] { display: none !important; }

/* Rakamlar her yerde esit genislikte -> bakiye sutunlari hizalanir */
.num, .balance-value, .stat-value, .money, .tx-amount, .hero-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
   Ust cubuk
   -------------------------------------------------------------------------- */

.navbar-bg {
    background: var(--surface);
}

.navbar-bg::after {
    background: var(--line);
}

.navbar .title {
    letter-spacing: -.01em;
}

.navbar .subtitle {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
    margin-top: 1px;
    letter-spacing: 0;
}

.navbar .link {
    color: var(--brand);
}

/* Geri oku ve menu dugmesi yan yana durur */
.navbar-inner > .left {
    display: flex;
    align-items: center;
    gap: 2px;
}

.navbar .left .link.icon-only {
    min-width: 40px;
    width: 40px;
}

/* Menu dugmesindeki bildirim noktasi */
.navbar-badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--debt);
    border: 1.5px solid var(--surface);
}

/* --------------------------------------------------------------------------
   Navbar altindaki arama satiri (subnavbar)
   Tam genisligi kaplar; sagda olu alan birakmaz.
   -------------------------------------------------------------------------- */

.subnavbar {
    --f7-subnavbar-bg-color: var(--surface);
    --f7-searchbar-bg-color: var(--surface);
    --f7-searchbar-input-bg-color: var(--bg);
    --f7-searchbar-input-text-color: var(--ink);
    --f7-searchbar-placeholder-color: var(--ink-3);
    --f7-searchbar-input-border-color: transparent;
    --f7-searchbar-search-icon-color: var(--ink-3);
    border-bottom: 1px solid var(--line);
}

.subnavbar-inner,
.subnavbar .searchbar {
    width: 100%;
}

.subnavbar .searchbar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.subnavbar .searchbar-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.subnavbar .searchbar input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
}

.subnavbar .searchbar .filter-link {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    padding: 0;
    position: relative;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Sol menu (panel)
   -------------------------------------------------------------------------- */

.panel-left {
    border-right: 1px solid var(--line);
}

/* Flex duzeni panelin kendisine degil ic sarmalayiciya uygulanir;
   .panel'in display'i Framework7'nin gorunurluk mantigina ait. */
.panel .menu-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border-bottom: 1px solid var(--divider);
}

.menu-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
}

.dark .menu-logo { color: #0d1620; }

/* Firma logosu yuklenmisse harf isareti yerine gorsel kullanilir;
   logo genellikle kendi zeminini tasidigi icin kutu seffaflasir. */
.menu-logo.has-image {
    background: transparent;
    border: 1px solid var(--line);
    overflow: hidden;
    padding: 3px;
    box-sizing: border-box;
}

.menu-logo.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Yatay yazi logosu kare kutuya sikismaz; kutu genisler, cerceve kalkar. */
.menu-logo.is-wide {
    width: auto;
    max-width: 104px;
    height: 30px;
    flex: 0 1 auto;
    border: 0;
    padding: 0;
    border-radius: 0;
}

.menu-logo.is-wide img { object-position: left center; }

/* Ayarlar sayfasindaki logo onizlemesi menu kutusuyla ayni dili konusur. */
.company-logo-preview {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 700;
}

.company-logo-preview.has-image {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 3px;
    box-sizing: border-box;
}

.company-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.menu-company {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-user {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}

.menu-section {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 14px 10px 6px;
}

.menu-section:first-child { padding-top: 6px; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: #3d4a58;
    text-decoration: none;
    min-height: 44px;
    box-sizing: border-box;
}

.dark .menu-item { color: var(--ink-2); }

/* Uzun modul adlari satiri buyutmesin; tasan kisim uc nokta ile kisalir. */
.menu-item > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-item i.icon {
    flex: 0 0 20px;
    font-size: 20px;
    color: currentColor;
}

.menu-item.active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

/* Acilir menu grubu (Ayarlar) */
.menu-group {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--divider);
}

.menu-group-toggle { cursor: pointer; user-select: none; }
.menu-group-toggle:hover { background: var(--surface-2); }
.menu-group.is-open > .menu-group-toggle { color: var(--ink); font-weight: 600; }

.menu-chevron {
    margin-left: auto;
    font-size: 13px !important;
    flex: 0 0 auto !important;
    color: var(--ink-3);
    transition: transform .2s ease;
}

.menu-group.is-open .menu-chevron { transform: rotate(180deg); }

/* Yukseklik animasyonu: 0fr -> 1fr */
.menu-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
}

.menu-group.is-open > .menu-sub { grid-template-rows: 1fr; }

.menu-sub-inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s linear .22s;
}

.menu-group.is-open .menu-sub-inner {
    visibility: visible;
    transition-delay: 0s;
}

/* Alt satirlar: icerden baslar, solda ince kilavuz cizgi */
.menu-sub-inner {
    position: relative;
    padding: 2px 0 2px 12px;
}

.menu-sub-inner::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
}

.menu-item.menu-sub-item {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
    gap: 10px;
}

.menu-item.menu-sub-item i.icon { font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
    .menu-sub, .menu-chevron { transition: none; }
}

.menu-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.menu-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--debt);
    border-radius: 7px;
    padding: 1px 6px;
    font-variant-numeric: tabular-nums;
}

.menu-foot {
    border-top: 1px solid var(--divider);
    padding: 8px;
}

/* ---- Antrasit kenar menu (RAL 7016'ya yakin) ----
   Yukaridaki acik tema kurallarinin ustune yazar. */
.panel-left {
    --menu-bg: #2b3136;
    --menu-line: #3c444b;
    --menu-ink: #c3cbd3;
    --menu-ink-strong: #ffffff;
    --menu-ink-muted: #9aa5af;
    --f7-panel-bg-color: var(--menu-bg);
    background: var(--menu-bg);
    border-right-color: #23292e;
    color: var(--menu-ink);
}

.dark .panel-left {
    --menu-bg: #1f2428;
    --menu-line: #333b42;
    border-right-color: #15191d;
}

.panel-left .menu-head,
.panel-left .menu-foot { border-color: var(--menu-line); }

.panel-left .menu-company { color: var(--menu-ink-strong); }
.panel-left .menu-user { color: var(--menu-ink-muted); }
.panel-left .menu-logo.has-image { background: #fff; border-color: transparent; }
/* Yatay logo cogunlukla koyu yazilidir; antrasit zeminde okunsun diye beyaz plaka */
.panel-left .menu-logo.is-wide { background: #fff; padding: 3px 6px; border-radius: 6px; height: 32px; }
.dark .panel-left .menu-logo { color: #0b1a22; }

.panel-left .menu-section { color: #8c97a1; }

.panel-left .menu-item { color: var(--menu-ink); }
.dark .panel-left .menu-item { color: var(--menu-ink); }
.panel-left .menu-item:hover { background: rgba(255, 255, 255, .06); color: var(--menu-ink-strong); }

.panel-left .menu-item.active {
    background: rgba(255, 255, 255, .10);
    color: var(--menu-ink-strong);
}

.panel-left .menu-item.active i.icon { color: #5fb4d9; }

.panel-left .menu-count { color: var(--menu-ink-muted); }
.panel-left .menu-badge { background: #d98a2b; color: #1b1f23; }

.panel-left .menu-group { border-color: var(--menu-line); }
.panel-left .menu-group-toggle:hover { background: rgba(255, 255, 255, .06); }
.panel-left .menu-group.is-open > .menu-group-toggle { color: var(--menu-ink-strong); }
.panel-left .menu-chevron { color: var(--menu-ink-muted); }
.panel-left .menu-sub-inner::before { background: #4a545d; }

.panel-left .menu-scroll { scrollbar-color: #4a545d transparent; }

/* --------------------------------------------------------------------------
   Genel yuzeyler
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

.list ul {
    background: var(--surface);
}

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 20px 16px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.section-title a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand);
}

.surface-list {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.surface-list ul::before,
.surface-list ul::after { display: none; }

/* --------------------------------------------------------------------------
   Panel: ozet kutulari
   -------------------------------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 16px;
}

/* Tek kalan kart yarim satirda asili durmasin */
.page[data-name="products"] .stat-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 12px;
    display: block;
    text-decoration: none;
    color: inherit;
}

.stat-card .stat-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-card .stat-value {
    font-size: 19px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--ink);
}

.stat-card .stat-hint {
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 3px;
    font-weight: 500;
}

.stat-card.is-debt .stat-value   { color: var(--debt); }
.stat-card.is-credit .stat-value { color: var(--credit); }
.stat-card.is-warn .stat-value   { color: var(--warn); }

@media (min-width: 720px) {
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Modul kisayollari
   -------------------------------------------------------------------------- */

.module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 16px;
}

.module-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    position: relative;
    min-height: 78px;
    justify-content: center;
}

.module-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
}

.module-icon i.icon { font-size: 19px; }

.module-tile .module-name {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.module-tile .module-badge {
    position: absolute;
    top: 6px;
    right: 7px;
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    background: var(--debt);
    border-radius: 7px;
    padding: 1px 5px;
    font-variant-numeric: tabular-nums;
}

.module-tile.is-more {
    border-style: dashed;
    background: var(--surface-2);
}

.module-tile.is-more .module-icon {
    background: var(--divider);
    color: var(--ink-3);
}

.module-tile.is-more .module-name { color: var(--ink-3); }

@media (min-width: 720px) {
    .module-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Kayit listeleri: ozet kartlariyla ayni kenar boslugunda kart icinde
   -------------------------------------------------------------------------- */

.list.entity-list {
    margin: 14px 0 0;
}

.list.entity-list > ul {
    margin: 0 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.list.entity-list > ul::before,
.list.entity-list > ul::after {
    display: none;
}

.list.entity-list li:last-child .account-item {
    border-bottom: none;
}

/* Ozet kartlari ile liste arasinda nefes payi */
.stat-grid + .list.entity-list,
.stat-grid + .section-title {
    margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Cari listesi
   -------------------------------------------------------------------------- */

.list .account-item,
a.account-item,
.account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    min-height: 68px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    width: 100%;
}

.list .account-item::after,
.list .account-item .item-inner { display: none; }

.list .account-item .account-avatar,
.account-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
}

.dark .account-avatar { color: #0d1620; }

.account-avatar.type-supplier { background: var(--violet); }
.account-avatar.type-both     { background: var(--warn); }
.account-avatar.type-personnel { background: var(--credit); }
.account-avatar.is-passive    { background: #9aa7b5; }

.list .account-item .account-main,
.account-main {
    flex: 1 1 auto;
    min-width: 0;
}

.account-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tek satirda kalir; uzun kategori adi kisalir, rozetler korunur.
   Boylece liste satirlari esit yukseklikte durur. */
.account-meta {
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    font-weight: 500;
}

/* Kod, rozet ve nokta hep tam gorunur; yalnizca serbest metin
   (kategori, sehir) yer daralinca kisalir. */
.account-meta > span.num,
.account-meta .pill,
.account-meta .dot {
    flex: 0 0 auto;
}

.account-meta > span:not(.pill):not(.dot):not(.num) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.account-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.list .account-item .account-balance,
.account-balance {
    flex: 0 0 auto;
    text-align: right;
}

.balance-value {
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -.015em;
    color: var(--ink);
}

.balance-value.debt   { color: var(--debt); }
.balance-value.credit { color: var(--credit); }
.balance-value.zero   { color: var(--ink-3); font-weight: 600; }

.balance-label.unit-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.balance-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}

/* Etiketler */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    background: var(--divider);
    color: var(--ink-2);
    white-space: nowrap;
}

.pill.customer { background: var(--brand-soft);  color: var(--brand); }
.pill.supplier { background: var(--violet-soft); color: var(--violet); }
.pill.both     { background: var(--warn-soft);   color: var(--warn-ink); }
.pill.personnel { background: var(--credit-soft); color: var(--credit-ink); }
.pill.passive  { background: var(--divider);     color: var(--ink-2); }
.pill.limit    { background: var(--debt-soft);   color: var(--debt-ink); }
.pill.debit    { background: var(--debt-soft);   color: var(--debt-ink); }
.pill.credit   { background: var(--credit-soft); color: var(--credit-ink); }

/* --------------------------------------------------------------------------
   Cari detay basligi
   -------------------------------------------------------------------------- */

.account-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 16px;
}

.account-hero .hero-code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.account-hero .hero-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 4px;
    letter-spacing: -.015em;
    color: var(--ink);
}

.account-hero .hero-balance {
    margin-top: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.account-hero .hero-amount {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ink);
}

.account-hero .hero-amount.debt   { color: var(--debt); }
.account-hero .hero-amount.credit { color: var(--credit); }

.account-hero .hero-caption {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 5px;
}

.hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.hero-actions .button {
    flex: 1;
    --f7-button-bg-color: var(--surface);
    --f7-button-text-color: var(--brand);
    --f7-button-border-color: var(--brand-line);
    --f7-button-height: 40px;
    border: 1px solid var(--brand-line);
    font-weight: 600;
    font-size: 13px;
}

.hero-actions .button.primary {
    --f7-button-bg-color: var(--brand);
    --f7-button-text-color: #fff;
    border-color: var(--brand);
}

.dark .hero-actions .button.primary { --f7-button-text-color: #0d1620; }

/* Ekstre satirlari */
.tx-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
}

.tx-item:last-child { border-bottom: none; }

.tx-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 17px;
    margin-top: 1px;
}

.tx-icon.debit  { background: var(--debt-soft);   color: var(--debt-ink); }
.tx-icon.credit { background: var(--credit-soft); color: var(--credit-ink); }
.tx-icon.plain  { background: var(--divider);     color: var(--ink-2); }

.tx-main { flex: 1 1 auto; min-width: 0; }

.tx-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}

.tx-meta {
    font-size: 11.5px;
    color: var(--ink-3);
    margin-top: 3px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 500;
}

.tx-meta .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: .55;
}

/* Nokta ayiricisiz satirlarda ogeler arasi nefes payi */
.tx-meta > span + span:not(.dot):not(.pill) {
    padding-left: 4px;
}

.tx-amount {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.tx-amount .amount {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
}

.tx-amount .amount.debit  { color: var(--debt); }
.tx-amount .amount.credit { color: var(--credit); }

.tx-amount .running {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
    font-weight: 500;
}

.tx-due-warn { color: var(--warn); font-weight: 600; }
.tx-due-late { color: var(--debt); font-weight: 600; }

/* --------------------------------------------------------------------------
   Formlar
   -------------------------------------------------------------------------- */

.list .item-input-wrap input,
.list .item-input-wrap select,
.list .item-input-wrap textarea {
    font-size: 16px;  /* iOS'ta odaklaninca yakinlasmayi engeller */
    color: var(--ink);
}

.item-input-error-message { font-size: 11.5px; }

/* Form alanlari: Framework7 Material'in dolgulu alani (mor-gri zemin + alt cizgi)
   yerine beyaz zemin, ince cerceve ve odakta marka halkasi.
   Zemin ::before ile cizilir; metin icin ic bosluk item-inner'da verilir. */
.md .list .item-content.item-input::before {
    left: 12px;
    right: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.md .list .item-content.item-input::after { display: none; }

.md .list .item-content.item-input > .item-inner {
    padding-left: 12px;
    padding-right: 28px;
}

.md .list .item-content.item-input:hover::before { border-color: var(--brand-line); }

.md .list .item-content.item-input:focus-within::before {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.md .list .item-content.item-input.item-input-invalid::before {
    border-color: var(--debt);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--debt) 12%, transparent);
}

.md .list .item-content.item-input .item-label { color: var(--ink-2); font-weight: 500; }
.md .list .item-content.item-input:focus-within .item-label { color: var(--brand); }
.md .list .item-content.item-input.item-input-invalid .item-label { color: var(--debt); }

.form-hint {
    font-size: 11.5px;
    color: var(--ink-2);
    padding: 6px 16px 0;
    line-height: 1.5;
}

.required-star { color: var(--debt); }

/* Tarih alani: gg.aa.yyyy metin girisi + sagda takvim dugmesi.
   Native date alani tarayici yereline gore ay/gun sirasini
   degistirdigi icin kullanilmiyor. */

.item-input-wrap input.date-display {
    padding-right: 30px;
    font-variant-numeric: tabular-nums;
}

.date-picker-button {
    position: absolute;
    right: 0;
    top: calc(var(--f7-input-height) / 2);
    margin-top: -14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    z-index: 1;
}

.date-picker-button:active { color: var(--brand); }

.date-picker-button i { font-size: 19px; }

/* Takvimde bugun ve secili gun kurumsal renkte */
.calendar-day-today span { color: var(--brand); font-weight: 700; }


.segmented .button {
    font-weight: 600;
    font-size: 13px;
}

/* Cok sekmeli segmented: dar ekranda etiketler kesilmesin */
.segmented-tight .button {
    padding-left: 2px;
    padding-right: 2px;
    min-width: 0;
}

@media (max-width: 400px) {
    .segmented-tight .button { font-size: 12px; letter-spacing: -.1px; }
}

@media (max-width: 340px) {
    .segmented-tight .button { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Yetki matrisi
   -------------------------------------------------------------------------- */

.perm-group {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0 16px 10px;
    overflow: hidden;
}

.perm-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
}

.perm-group-head .name {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.perm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--divider);
    min-height: 52px;
}

.perm-row:last-child { border-bottom: 0; }

.perm-row .label { flex: 1; font-size: 13.5px; line-height: 1.35; }

.perm-row .key {
    display: block;
    font-size: 10.5px;
    color: var(--ink-3);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-top: 1px;
}

.perm-row .badge-inherit {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   Bos durum
   -------------------------------------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 44px 32px;
    color: var(--ink-3);
}

.empty-state i.icon {
    font-size: 46px;
    opacity: .35;
    margin-bottom: 12px;
}

.empty-state .title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 5px;
}

.empty-state .desc { font-size: 13px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Giris ekrani
   Solda antrasit marka paneli (teknik cizim), sagda form.
   Dar ekranda panel gizlenir, ustte kucuk baslik kalir.
   -------------------------------------------------------------------------- */

.auth-body {
    /* Ekrana ozel renkler: antrasit (RAL 7016'ya yakin) + cam mavisi */
    --auth-panel: #2b3136;
    --auth-panel-line: #4a545d;
    --auth-panel-ink: #e6eaee;
    --auth-panel-ink-2: #b7c1ca;
    --auth-panel-ink-3: #8c97a1;
    --auth-accent: #0a6a8f;
    --auth-accent-strong: #08516d;
    --auth-accent-light: #5fb4d9;
    --auth-accent-ink: #ffffff;
    --auth-surface: #ffffff;
    --auth-field: #ffffff;
    --auth-field-line: #d5dae0;
    --auth-muted-bg: #f3f4f6;
    --auth-ink: #16191d;
    --auth-ink-2: #59626c;
    --auth-ink-3: #6b7480;

    margin: 0;
    background: var(--auth-surface);
    color: var(--auth-ink);
    font-size: 14px;
}

.dark .auth-body {
    --auth-panel: #1f2428;
    --auth-panel-line: #3a434b;
    --auth-accent: #5fb4d9;
    --auth-accent-strong: #84c6e3;
    --auth-accent-ink: #0b1a22;
    --auth-surface: #15191d;
    --auth-field: #1c2126;
    --auth-field-line: #343c44;
    --auth-muted-bg: #1c2126;
    --auth-ink: #e8edf3;
    --auth-ink-2: #a3aeb9;
    --auth-ink-3: #8b97a3;
}

.auth-body *,
.auth-body *::before,
.auth-body *::after { box-sizing: border-box; }

.auth {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(440px, 52%) 1fr;
}

/* ---- Marka paneli ---- */

.auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 44px 56px;
    background: var(--auth-panel);
    color: var(--auth-panel-ink);
    overflow: hidden;
}

.auth-brand-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-mark {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #0a6a8f;
    color: #fff;
}

.auth-brand-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}

.auth-brand-sub {
    font-size: 12.5px;
    color: #a9b3bc;
    margin-top: 1px;
}

.auth-brand-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 560px;
}

/* Teknik cizim */
.auth-drawing { width: 100%; height: auto; display: block; }
.auth-drawing g { fill: none; }
.auth-drawing .d-dim { stroke: #8fa0ae; stroke-width: 1; }
.auth-drawing .d-text text,
.auth-drawing .d-caption {
    fill: #8fa0ae;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
}
.auth-drawing .d-caption { font-size: 10px; letter-spacing: 1px; }
.auth-drawing .d-louvre { stroke: #c9d2da; stroke-width: 1.5; stroke-linecap: round; }
.auth-drawing .d-frame { stroke: #e6eaee; stroke-width: 1.5; }
.auth-drawing .d-glass { stroke: #5fb4d9; stroke-width: 1.5; }
.auth-drawing .d-glare { stroke: #5fb4d9; stroke-width: 1; opacity: .45; }

.auth-headline {
    margin: 0;
    font-size: clamp(28px, 2.5vw, 34px);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.025em;
    color: #fff;
}

.auth-lead {
    margin: 14px 0 0;
    max-width: 460px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--auth-panel-ink-2);
}

.auth-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-tags li {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--auth-panel-line);
    font-size: 12.5px;
    color: #d3dae0;
}

.auth-brand-foot {
    font-size: 12px;
    color: var(--auth-panel-ink-3);
}

/* ---- Form tarafi ---- */

.auth-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--auth-surface);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    margin: auto 0;
}

.auth-mobile-head { display: none; }

.auth-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.auth-sub {
    margin: 8px 0 0;
    font-size: 14.5px;
    color: var(--auth-ink-2);
    line-height: 1.5;
}

.auth-alert {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 24px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.auth-alert .f7-icons { font-size: 16px; margin-top: 1px; flex: none; }

.auth-alert-error {
    background: var(--debt-soft);
    border: 1px solid rgba(194, 44, 34, .25);
    color: var(--debt-ink);
}

.auth-alert-warn {
    background: var(--warn-soft);
    border: 1px solid rgba(178, 106, 0, .25);
    color: var(--warn-ink);
}

.auth-alert-ok {
    background: var(--credit-soft);
    border: 1px solid rgba(21, 115, 71, .25);
    color: var(--credit-ink);
}

.auth-form {
    margin-top: 32px;
    display: grid;
    gap: 18px;
}

.auth-field { display: block; }

.auth-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}

.auth-input {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 6px 0 14px;
    gap: 10px;
    background: var(--auth-field);
    border: 1px solid var(--auth-field-line);
    border-radius: 10px;
    color: #7a838e;
    transition: border-color .15s, box-shadow .15s;
}

.auth-input:hover { border-color: #b9c1ca; }

.auth-input:focus-within {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 18%, transparent);
    color: var(--auth-accent);
}

.auth-field.is-invalid .auth-input {
    border-color: var(--debt);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--debt) 15%, transparent);
}

.auth-input > svg { flex: none; }

.auth-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--auth-ink);
    font: inherit;
    font-size: 16px; /* iOS yakinlastirmasin */
}

.auth-input input::placeholder { color: #7a838e; }

.auth-eye {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--auth-ink-2);
    cursor: pointer;
}

.auth-eye:hover { background: var(--auth-muted-bg); color: var(--auth-ink); }
.auth-eye:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: -2px; }
.auth-eye .eye-closed { display: none; }
.auth-eye[aria-pressed="true"] .eye-open { display: none; }
.auth-eye[aria-pressed="true"] .eye-closed { display: block; }

.auth-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--warn-ink);
}

.auth-hint[hidden] { display: none; }
.auth-hint .f7-icons { font-size: 14px; }

.auth-submit {
    position: relative;
    margin-top: 6px;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--auth-accent);
    color: var(--auth-accent-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

.auth-submit:hover { background: var(--auth-accent-strong); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--auth-accent) 35%, transparent); outline-offset: 2px; }
.auth-submit:disabled { cursor: progress; }

.auth-submit-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.auth-spinner {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: auth-spin .7s linear infinite;
}

.auth-submit.is-loading .auth-submit-label { visibility: hidden; }
.auth-submit.is-loading .auth-spinner { display: block; }

@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-info {
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--auth-muted-bg);
    color: var(--auth-ink-2);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.auth-info svg { flex: none; margin-top: 1px; }

.auth-info p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.auth-footer {
    margin-top: 40px;
    font-size: 12px;
    color: var(--auth-ink-3);
}

/* Dar ekran: marka paneli yerine ustte kucuk baslik */
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth-brand { display: none; }

    .auth-main {
        justify-content: flex-start;
        padding-top: calc(48px + env(safe-area-inset-top, 0px));
    }

    .auth-card { margin: 0; }

    .auth-mobile-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 32px;
        font-size: 17px;
        font-weight: 700;
    }

    .auth-footer { margin-top: auto; padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-spinner { animation-duration: 1.5s; }
}

/* --------------------------------------------------------------------------
   Grafik (saf CSS sutun grafigi)
   -------------------------------------------------------------------------- */

.mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 130px;
    padding: 14px 16px 0;
}

.mini-chart .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
}

.mini-chart .bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100%;
    width: 100%;
    justify-content: center;
}

.mini-chart .bar {
    width: 12px;
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    transform-origin: bottom center;
    animation: barGrow .42s cubic-bezier(.22, .8, .3, 1) both;
}

.mini-chart .bar.debit  { background: var(--debt); }
.mini-chart .bar.credit { background: var(--credit); }

@keyframes barGrow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mini-chart .bar { animation: none; }
}

.mini-chart .col-label {
    font-size: 10.5px;
    color: var(--ink-3);
    font-weight: 600;
    white-space: nowrap;
}

.chart-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 10px 16px 14px;
    font-size: 11.5px;
    color: var(--ink-2);
    font-weight: 500;
}

.chart-legend .key { display: inline-flex; align-items: center; gap: 5px; }

.chart-legend .swatch { width: 9px; height: 9px; border-radius: 2px; }
.chart-legend .swatch.debit  { background: var(--debt); }
.chart-legend .swatch.credit { background: var(--credit); }

/* --------------------------------------------------------------------------
   Cesitli
   -------------------------------------------------------------------------- */

.hairline-top { border-top: 1px solid var(--divider); }
.hairline-y   { width: 1px; background: var(--divider); }

.detail-list .item-title {
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
}

.detail-list .item-after {
    color: var(--ink);
    font-weight: 600;
    font-size: 13.5px;
    max-width: 62%;
    text-align: right;
    white-space: normal;
}

.text-muted  { color: var(--ink-2); }
.text-debt   { color: var(--debt); }
.text-credit { color: var(--credit); }
.text-right  { text-align: right; }

.no-select { user-select: none; -webkit-user-select: none; }

/* Genis ekran: sol menu sabit kalir, menu dugmesi gereksizlesir.
   Panel surekli ekranda oldugu icin masaustunde daha dar tutulur;
   mobilde ustune acildigi icin 288px kalir. */
@media (min-width: 1024px) {
    :root {
        --f7-panel-width: 220px;
    }

    .panel-left.panel-visible-by-breakpoint {
        border-right: 1px solid var(--line);
    }

    .menu-head {
        padding: 13px 12px;
        gap: 9px;
    }

    .menu-logo {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 9px;
        font-size: 13px;
    }

    .menu-logo.is-wide {
        max-width: 90px;
        height: 28px;
    }

    .menu-company { font-size: 13px; }

    .menu-scroll,
    .menu-foot { padding: 7px; }

    .menu-section { padding: 12px 9px 5px; }

    .menu-item {
        gap: 10px;
        padding: 8px 9px;
        font-size: 13px;
        min-height: 40px;
    }

    .menu-item i.icon {
        flex: 0 0 19px;
        font-size: 19px;
    }

    .navbar .left .menu-button {
        display: none;
    }

    /* Geri oku olmayan sayfalarda baslik sol kenara yaslansin */
    .navbar-inner > .left:empty + .title {
        margin-left: 0;
    }
}

/* Yazdirma: ekstre ciktisi */
@media print {
    .navbar, .toolbar, .panel, .fab, .no-print { display: none !important; }
    .page-content { padding: 0 !important; }
    body { background: #fff; }
    .card, .surface-list { border-color: #d8dde3; }
}

/* --------------------------------------------------------------------------
   Birim / fiyat tablosu (urun formu)
   Her satir bir olcu birimi; birimler birbirinden bagimsiz fiyatlanir.
   -------------------------------------------------------------------------- */

.unit-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.unit-table-head,
.unit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 92px 54px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
}

/* Maliyet gizliyse iki sutun eksilir */
.unit-table-head:not(:has(.col-margin)),
.unit-table:not(:has(.col-margin)) .unit-row {
    grid-template-columns: minmax(0, 1fr) 110px;
}

.unit-table-head {
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.unit-table-head .col-price,
.unit-table-head .col-margin { text-align: right; }

.unit-row {
    border-bottom: 1px solid var(--divider);
    min-height: 52px;
}

.unit-row:last-child { border-bottom: none; }

.unit-row.is-filled { background: var(--brand-soft); }

.dark .unit-row.is-filled { background: rgba(95, 163, 208, .07); }

.unit-row .col-unit {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.unit-short {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.unit-name {
    font-size: 10.5px;
    color: var(--ink-3);
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profilde olculerden uretilen temel birim karsiligi */
.unit-conv {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

/* Profil olculerinin canli ozeti: 1 boy = 6 mt = 11,22 kg */
.profile-summary {
    margin: 10px 16px 0;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.profile-summary strong { color: var(--brand); }

.dark .profile-summary { background: rgba(95, 163, 208, .1); }

/* Dar ekranda uzun birim adi yerine kisa gosterim yeter (m², kg, mt) */
@media (max-width: 430px) {
    .unit-name { display: none; }

    .unit-table-head,
    .unit-row {
        grid-template-columns: minmax(0, 1fr) 86px 86px 46px;
        gap: 6px;
        padding: 6px 10px;
    }

    .unit-row { min-height: 46px; }

    .unit-row input[type="text"] {
        font-size: 14px;
        padding: 7px 8px;
    }
}

/* Varsayilan birim secici */
.unit-radio {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    position: relative;
    cursor: pointer;
}

.unit-radio input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.unit-radio span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--surface);
    transition: border-color .15s, background .15s;
}

.unit-radio input:checked + span {
    border-color: var(--brand);
    background:
        radial-gradient(circle at center, var(--brand) 0 4px, transparent 4px);
}

.unit-row input[type="text"] {
    width: 100%;
    text-align: right;
    font-size: 15px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.unit-row input[type="text"]:focus {
    border-color: var(--brand);
    outline: none;
}

.unit-row .col-margin {
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.unit-row .col-margin.good { color: var(--credit); }
.unit-row .col-margin.warn { color: var(--warn); }
.unit-row .col-margin.bad  { color: var(--debt); }

/* Urun detayindaki fiyat listesi */
.price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--divider);
}

.price-row:last-child { border-bottom: none; }

.price-row .unit-badge {
    flex: 0 0 auto;
    min-width: 46px;
    text-align: center;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 700;
}

.price-row.is-default .unit-badge {
    background: var(--brand);
    color: #fff;
}

.dark .price-row.is-default .unit-badge { color: #0d1620; }

/* --------------------------------------------------------------------------
   Belge satiri duzenleyici (siparis / fatura)
   -------------------------------------------------------------------------- */

.line-list { padding: 0 16px; }

.line-row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
}

.line-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.line-desc-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.line-desc-wrap input {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 38px 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    box-sizing: border-box;
}

.line-desc-wrap input:focus {
    border-color: var(--brand);
    outline: none;
}

.line-pick {
    position: absolute;
    right: 6px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--brand);
    border-radius: 6px;
}

.line-remove {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    border-radius: 6px;
}

.line-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
}

.line-note > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-left: 2px;
}

.line-note input {
    width: 100%;
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    box-sizing: border-box;
}

.line-note input:focus {
    border-color: var(--brand);
    outline: none;
}

.line-fields {
    display: grid;
    grid-template-columns: 1fr 62px 1.2fr 56px 56px;
    gap: 6px;
    margin-top: 10px;
}

.line-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.line-field > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-left: 2px;
}

.line-field input,
.line-field select {
    width: 100%;
    font-size: 15px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.line-field select { text-align: left; text-align-last: center; padding-right: 4px; }

.line-field input:focus,
.line-field select:focus {
    border-color: var(--brand);
    outline: none;
}

.line-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--divider);
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 600;
}

.line-total .num {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

@media (max-width: 430px) {
    .line-fields {
        grid-template-columns: 1fr 56px 1fr;
        row-gap: 8px;
    }
    .line-field-sm { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   Ozet satirlari, secim cipleri, durum kutulari ve belge yardimcilari
   -------------------------------------------------------------------------- */

.line-actions {
    display: flex;
    gap: 8px;
}
.line-actions .button { flex: 1; }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
}
.chip-option {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
}
.chip-option.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.dark .chip-option.is-active { color: #0d1620; }

.sum-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    padding: 4px 0;
}
.sum-list > div > span { color: var(--ink-2); }
.sum-list small { display: block; font-size: 11px; color: var(--ink-3); }
.sum-list > div.is-total {
    border-top: 1px solid var(--divider);
    margin-top: 4px;
    padding-top: 9px;
    font-weight: 700;
}
.sum-list > div.is-total > span { color: var(--ink); }
.sum-list > div.is-note > span { color: var(--ink-3); }
.card-content.sum-list { padding: 12px 16px; }

.warn-list {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    color: var(--warn-ink);
    font-size: 12px;
    line-height: 1.5;
}

/* Ayarlar */
.status-box {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border-radius: var(--radius);
    background: var(--warn-soft);
    color: var(--warn-ink);
    font-size: 12.5px;
    line-height: 1.45;
}
.status-box .icon { font-size: 22px; }
.status-box.is-ready { background: var(--credit-soft); color: var(--credit-ink); }

/* Profil fiyatlari */
.profile-prices .unit-row.is-filled { background: transparent; }
.profile-prices .unit-row.is-changed { background: var(--warn-soft); }
.profile-prices .unit-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.bulk-tools { display: flex; flex-direction: column; gap: 12px; }
.bulk-tool { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bulk-tool > span { flex: 1 1 100%; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.bulk-tool > span small { font-weight: 500; color: var(--ink-3); }
.bulk-tool input {
    width: 110px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    text-align: right;
    box-sizing: border-box;
}
.bulk-tool .button { flex: 0 0 auto; }

/* Belge durum rozetleri */
.doc-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

/* Faturalanacak siparis secim listesi */
.pick-order {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--divider);
}

.pick-order:last-child { border-bottom: none; }

.pick-order input[type="checkbox"] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    accent-color: var(--brand);
}

/* --------------------------------------------------------------------------
   Panel (dashboard)
   -------------------------------------------------------------------------- */

.db {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.db-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.db-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.db-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ink-2);
}

.db-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.db-btn {
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.db-btn .icon { font-size: 16px; }
.db-btn:hover { border-color: var(--brand-line); }

.db-btn.is-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.db-btn.is-primary:hover { background: var(--brand-strong); }
.dark .db-btn.is-primary { color: #0b1a22; }

/* Ozet kutulari */
.db-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.db-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s;
}

.db-kpi:hover { border-color: var(--brand-line); }

.db-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
}

.db-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
}

.db-kpi-icon .icon { font-size: 16px; }

.db-kpi-value {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.db-kpi-note {
    font-size: 12.5px;
    color: var(--ink-2);
}

.db-kpi-note b { font-weight: 600; color: var(--ink); }
.db-kpi-note b.is-up { color: var(--credit); }
.db-kpi-note b.is-down { color: var(--debt); }
.db-kpi-note b.is-warn { color: var(--warn-ink); }

/* Kart satirlari */
.db-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.db-card {
    min-width: 0;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* Kartlar yalnizca yan yana dizildikleri satirda esnek; dikey sutunda uzamaz */
.db-row > .db-card { flex: 1 1 320px; }
.db-row > .db-card.is-wide { flex: 2 1 480px; }
.db-card.is-flush { padding: 18px 0 6px; }
.db-card.is-flush > .db-card-head,
.db-card.is-flush > .db-empty { padding-left: 20px; padding-right: 20px; }

.db-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.db-card-head h2,
.db-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

/* Kart basligi serit: kartin ilk elemani baslik ise acik zeminli, alt
   cizgili ayri bir bolum olur; solda ince marka vurgusu. */
.db-card > .db-card-head:first-child,
.db-card > .db-card-title:first-child {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    box-sizing: border-box;
    min-height: 50px;
    margin: -18px -20px 14px;
    padding: 12px 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
}
.db-card.is-flush > .db-card-head:first-child,
.db-card.is-flush > .db-card-title:first-child {
    margin: -18px 0 0;
}
/* Vurgu cizgisi yazinin bir parcasi: ic bosluk ne olursa olsun yaziyla gider */
.db-card > .db-card-head:first-child > h2::before,
.db-card > .db-card-title:first-child::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 2px;
    background: var(--brand);
}
.db-card > .db-card-head:first-child h2 { font-size: 14.5px; }
.db-card > .db-card-head:first-child .db-card-sub,
.db-card > .db-card-head:first-child > span:not(.cl-pill):not(.db-pill) { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.db-card > .db-card-title:first-child { font-size: 14.5px; }

.db-card-head a {
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}

.db-card-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-2);
}

.db-empty {
    margin: 14px 0 4px;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5;
}

/* Siparis akisi */
.db-flow-bar {
    margin-top: 16px;
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
}

.db-flow-bar > span { min-width: 4px; }
.db-flow-bar.is-empty > span { flex: 1; background: var(--divider); }

.is-s1 { background: #b9d8e6; }
.is-s2 { background: #7db6cf; }
.is-s3 { background: #3f8fb2; }
.is-s4 { background: #0a6a8f; }
.dark .is-s1 { background: #1d4356; }
.dark .is-s2 { background: #2b6684; }
.dark .is-s3 { background: #4b93b8; }
.dark .is-s4 { background: #8cc7e2; }

.db-flow-legend {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.db-flow-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 4px 0;
    color: var(--ink);
    text-decoration: none;
}

.db-flow-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
}

.db-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.db-flow-amount { font-size: 17px; font-weight: 600; }
.db-flow-count { font-size: 12px; color: var(--ink-3); }

/* Liste satirlari (alacaklar, hareketler) */
.db-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.db-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-top: 1px solid var(--divider);
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
}

.db-list-row:first-child { border-top: 0; }
.db-list-row:hover { background: var(--surface-2); }

.db-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--divider);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
}

.db-avatar .icon { font-size: 15px; }
.db-avatar.is-debit { background: var(--debt-soft); color: var(--debt-ink); border-color: transparent; }
.db-avatar.is-credit { background: var(--credit-soft); color: var(--credit-ink); border-color: transparent; }

.db-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.db-list-title {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-list-meta { font-size: 12px; color: var(--ink-3); }
.db-list-meta.is-late { color: var(--debt); font-weight: 500; }
.db-list-meta.is-today { color: var(--warn-ink); font-weight: 500; }

.db-list-amount { font-size: 14px; font-weight: 600; white-space: nowrap; }
.db-list-amount.is-debit { color: var(--debt); }
.db-list-amount.is-credit { color: var(--credit); }

/* Teslim tablosu */
.db-table-wrap { margin-top: 10px; overflow-x: auto; }

.db-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.db-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}

.db-table td {
    padding: 11px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--divider);
    color: var(--ink);
}

.db-table tr:last-child td { border-bottom: 0; }
.db-table th:first-child, .db-table td:first-child { padding-left: 20px; }
.db-table th:last-child, .db-table td:last-child { padding-right: 20px; }
.db-table td b { font-weight: 600; }
.db-table td span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.db-table td span.is-late { color: var(--debt); font-weight: 500; }
.db-table .is-num { text-align: right; }
.db-table .is-nowrap { white-space: nowrap; }
.db-cell-link { color: inherit; text-decoration: none; }

.db-pill {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px !important;
    font-weight: 600;
    white-space: nowrap;
}

.db-pill.is-info { background: var(--brand-soft); color: var(--brand) !important; }
.db-pill.is-accent { background: var(--warn-soft); color: var(--warn-ink) !important; }
.db-pill.is-ok { background: var(--credit-soft); color: var(--credit-ink) !important; }
.db-pill.is-muted { background: var(--surface-2); color: var(--ink-2) !important; }

/* Kategori cubuklari */
.db-bars {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.db-bar-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 6px;
}

.db-bar-label span:first-child { font-weight: 500; }
.db-bar-label small { color: var(--ink-3); font-size: 12px; }

.db-bar-track {
    height: 8px;
    border-radius: 4px;
    background: var(--surface-2);
    overflow: hidden;
}

.db-bar-track > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--brand);
}

/* Kasa */
.db-cash {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.db-cash > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--divider);
    font-size: 13.5px;
}

.db-cash > div:first-child { border-top: 0; }
.db-cash span { color: var(--ink-2); }
.db-cash small { color: var(--ink-3); font-size: 12px; }
.db-cash b { font-size: 16px; font-weight: 600; color: var(--ink); }

@media (max-width: 640px) {
    .db { padding: 10px; gap: 14px; }
    .db-title { font-size: 22px; }
    .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .db-kpi { padding: 14px; }
    .db-kpi-value { font-size: 21px; }
    .db-card { padding: 16px; }
    .db-card.is-flush { padding: 16px 0 4px; }
    .db-card.is-flush > .db-card-head, .db-card.is-flush > .db-empty { padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   Cari listesi
   Genis ekranda sutunlu tablo, 900px altinda kart satirlari.
   -------------------------------------------------------------------------- */

.cl {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Ozet seridi */
.cl-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.cl-sum {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 15px 18px;
    border: 0;
    border-right: 1px solid var(--divider);
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--ink);
}

button.cl-sum { cursor: pointer; }
button.cl-sum:hover { background: var(--surface-2); }
.cl-sum:last-child { border-right: 0; }
.cl-sum > span { font-size: 12.5px; color: var(--ink-2); }
.cl-sum > b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.cl-sum > small { font-size: 12px; color: var(--ink-3); }

.is-receivable { color: var(--brand) !important; }
.is-payable { color: var(--warn-ink) !important; }
.is-late { color: var(--debt) !important; }

/* Liste karti */
.cl-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

/* Framework7 sayfadaki button'lara tam genislik verir; buradakiler icerik kadar */
.cl-tab, .cl-chip, .cl-filter { width: auto; }
.cl-sum { width: 100%; }

.cl-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.cl-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 10px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--ink-2);
    cursor: pointer;
}

.cl-tab > span {
    font-size: 11.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
}

.cl-tab:hover { color: var(--ink); }

.cl-tab.is-active {
    border-bottom-color: var(--brand);
    color: var(--ink);
    font-weight: 600;
}

.cl-tab.is-active > span { background: var(--brand-soft); color: var(--brand); }

.cl-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.cl-search {
    flex: 1 1 260px;
    max-width: 400px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink-3);
}

.cl-search:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.cl-search .icon { font-size: 16px; }

.cl-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cl-chip {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
}

/* Baglanti olarak kullanilan cip (ekstre donemi gibi) dugme ile ayni hizada dursun */
a.cl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    text-decoration: none;
}

.cl-chip:hover { border-color: var(--brand-line); color: var(--ink); }

.cl-chip.is-active {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand);
    font-weight: 600;
}

.cl-filter {
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed var(--line);
    border-radius: 9px;
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

.cl-filter .icon { font-size: 15px; }

.cl-filter-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
}

.cl-sort { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.cl-sort b { color: var(--ink); font-weight: 600; }

.cl-active {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 0 14px 12px;
    font-size: 12.5px;
}

.cl-active span {
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink-2);
}

.cl-active a { margin-left: 4px; font-weight: 600; color: var(--brand); text-decoration: none; }

/* Tablo */
.cl-table {
    --cl-cols: minmax(240px, 2.2fr) 150px minmax(130px, 1.2fr) minmax(110px, 1fr) 70px 150px 110px;
    overflow-x: auto;
}

.cl-table.no-balance { --cl-cols: minmax(240px, 2.2fr) 150px minmax(130px, 1.2fr) minmax(110px, 1fr) 70px 110px; }

.cl-row {
    display: grid;
    grid-template-columns: var(--cl-cols);
    align-items: center;
    min-width: 960px;
    border-top: 1px solid var(--divider);
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
}

.cl-body > .cl-row:hover { background: var(--surface-2); }
.cl-row.is-passive { opacity: .62; }

.cl-row-head {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
}

.cl-row-head + .cl-body > .cl-row:first-child { border-top: 0; }

.cl-cell {
    min-width: 0;
    padding: 11px 12px;
}

.cl-row-head .cl-cell { padding-top: 9px; padding-bottom: 9px; }
.cl-cell:first-child { padding-left: 16px; }
.cl-cell:last-child { padding-right: 16px; }

.cl-name { display: flex; align-items: center; gap: 12px; }

.cl-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--divider);
    color: var(--ink-2);
}

.cl-avatar.type-supplier { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.cl-avatar.type-personnel { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.cl-avatar.type-both { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

.cl-name-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.cl-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-sub {
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-sub-mobile { display: none; }

.cl-type { display: flex; flex-wrap: wrap; gap: 4px; }

.cl-pill {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--ink-2);
}

.cl-pill.type-supplier { background: var(--warn-soft); color: var(--warn-ink); }
.cl-pill.type-personnel { background: var(--violet-soft); color: var(--violet); }
.cl-pill.type-both { background: var(--brand-soft); color: var(--brand); }
.cl-pill.is-limit { background: var(--debt-soft); color: var(--debt-ink); }
.cl-pill.is-passive { background: var(--divider); color: var(--ink-3); }

.cl-contact { display: flex; flex-direction: column; gap: 2px; }
.cl-contact span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-contact small { font-size: 12px; color: var(--ink-3); }

.cl-place { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-open { text-align: right; color: var(--ink-2); }

.cl-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cl-balance b { font-weight: 600; white-space: nowrap; }
.cl-balance small { font-size: 12px; font-weight: 500; }
.cl-balance small.is-zero { color: var(--ink-3); font-weight: 400; }
.cl-row-head .cl-balance { display: block; }

.cl-last { color: var(--ink-2); white-space: nowrap; }

.cl-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--divider);
    font-size: 12.5px;
    color: var(--ink-3);
}

/* Ust cubuk butonlari: genis ekranda yazili, dar ekranda yalnizca + simgesi */
.navbar .nav-btn {
    height: 34px;
    margin-left: 8px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.navbar .nav-btn .icon { font-size: 16px; }
.navbar .nav-btn:hover { border-color: var(--brand-line); }

.navbar .nav-btn.is-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.navbar .nav-btn.is-primary:hover { background: var(--brand-strong); }
.dark .navbar .nav-btn.is-primary { color: #0b1a22; }

.navbar .nav-btn-compact { display: none !important; }

@media (max-width: 899px) {
    .navbar .nav-btn { display: none; }
    .navbar .nav-btn-compact { display: flex !important; }
}

/* Dar ekran: kart satirlari */
@media (max-width: 899px) {
    .cl { padding: 10px; gap: 12px; }
    .cl-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-sum { border-bottom: 1px solid var(--divider); padding: 12px 14px; }
    .cl-sum:nth-child(2n) { border-right: 0; }
    .cl-sum > b { font-size: 18px; }
    .cl-sort { display: none; }
    .cl-search { max-width: none; flex-basis: 100%; }

    .cl-table { overflow: visible; }
    .cl-row-head { display: none; }

    .cl-row {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cl-contact, .cl-place, .cl-open, .cl-last, .cl-type { display: none; }
    .cl-sub-mobile { display: inline; }
    .cl-cell:first-child { padding-left: 14px; }
    .cl-cell:last-child, .cl-balance { padding-right: 14px; }
}

/* --------------------------------------------------------------------------
   Siparis listesi (cari listesinin cl-* iskeletini kullanir)
   -------------------------------------------------------------------------- */

.cl-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--ink);
    font-size: 13.5px;
}

.cl-banner .icon { font-size: 17px; color: var(--brand); }
.cl-banner a { margin-left: auto; font-weight: 600; color: var(--brand); text-decoration: none; }

a.cl-sum { text-decoration: none; }
a.cl-sum:hover { background: var(--surface-2); }
a.cl-tab { text-decoration: none; }

.od-table {
    --cl-cols: 52px minmax(140px, 1fr) minmax(200px, 2fr) 64px 130px 140px 170px;
}

/* Hucreler satirin dogrudan grid ogesi olsun diye baglanti kutu uretmez */
.od-link { display: contents; color: inherit; text-decoration: none; }

.od-row .cl-cell { cursor: pointer; }
.od-row .od-pick { cursor: default; display: flex; align-items: center; }
.od-row .od-pick .checkbox { margin: 0; }

.od-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--ink-3);
}

.od-icon .icon { font-size: 15px; }

.od-no, .od-account, .od-delivery, .od-amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.od-no b, .od-account b, .od-amount b { font-weight: 600; }
.od-account b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-no small, .od-account small, .od-delivery small, .od-amount small { font-size: 12px; color: var(--ink-3); }
.od-account small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-delivery small.is-late, .od-delivery small.is-payable { font-weight: 500; }

.od-lines { text-align: center; color: var(--ink-2); }
.od-amount { align-items: flex-end; text-align: right; white-space: nowrap; }
.cl-row-head .od-amount { display: block; }
.cl-row-head .od-lines { text-align: center; }

.od-mobile-meta { display: none; }

/* Durum etiketleri */
.cl-pill.od-st-draft      { background: var(--surface-2); color: var(--ink-2); }
.cl-pill.od-st-approved   { background: var(--brand-soft); color: var(--brand); }
.cl-pill.od-st-production { background: var(--warn-soft); color: var(--warn-ink); }
.cl-pill.od-st-completed  { background: var(--credit-soft); color: var(--credit-ink); }
.cl-pill.od-st-invoiced   { background: var(--violet-soft); color: var(--violet); }
.cl-pill.od-st-cancelled  { background: var(--debt-soft); color: var(--debt-ink); }

/* Toplu faturalama cubugu kartin icinde: kenarlara yapissin */
.cl-card > .bulkbar { margin: 0 14px 12px; }

@media (max-width: 899px) {
    .od-table .od-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "pick account amount"
            "pick status  amount";
        align-items: start;
    }

    .od-row .od-pick { grid-area: pick; align-self: center; }
    .od-row .od-account { grid-area: account; padding-bottom: 2px; }
    .od-row .od-status { grid-area: status; padding-top: 0; }
    .od-row .od-amount { grid-area: amount; align-self: center; }
    .od-row .od-no, .od-row .od-lines, .od-row .od-delivery { display: none; }
    .od-mobile-meta { display: inline; }
}

/* --------------------------------------------------------------------------
   Form sayfalari (yeni tasarim)
   Bolum basligi + alan listesi ikilisi kart gibi durur; genis ekranda
   alanlar iki sutun dizilir. Uzun alanlar (textarea, .fm-span) tam satir.
   Formlarin HTML'i degismeden butun form sayfalarina uygulanir.
   -------------------------------------------------------------------------- */

:is(.page[data-name$="-form"], .page[data-name="pos-create"], .page[data-name="einvoice-settings"],
    .page[data-name="profile"], .page[data-name="account-tx-edit"]) .page-content {
    --fm-gutter: 10px;
}

:is(.page[data-name$="-form"], .page[data-name="pos-create"], .page[data-name="einvoice-settings"],
    .page[data-name="profile"], .page[data-name="account-tx-edit"]) .list.no-hairlines-md > ul {
    margin: 0 var(--fm-gutter);
    padding: 6px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

:is(.page[data-name$="-form"], .page[data-name="pos-create"], .page[data-name="einvoice-settings"],
    .page[data-name="profile"], .page[data-name="account-tx-edit"]) .section-title {
    margin-left: calc(var(--fm-gutter) + 4px);
    margin-right: calc(var(--fm-gutter) + 4px);
}

:is(.page[data-name$="-form"], .page[data-name="pos-create"], .page[data-name="einvoice-settings"],
    .page[data-name="profile"], .page[data-name="account-tx-edit"]) .block {
    padding-left: var(--fm-gutter);
    padding-right: var(--fm-gutter);
}

@media (min-width: 1100px) {
    :is(.page[data-name$="-form"], .page[data-name="pos-create"], .page[data-name="einvoice-settings"],
        .page[data-name="profile"], .page[data-name="account-tx-edit"]) .list.no-hairlines-md > ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0;
    }

    :is(.page[data-name$="-form"], .page[data-name="pos-create"], .page[data-name="einvoice-settings"],
        .page[data-name="profile"], .page[data-name="account-tx-edit"]) .list.no-hairlines-md > ul > li:is(:has(textarea), .fm-span, :has(.smart-select), :has(.item-link), :only-child) {
        grid-column: 1 / -1;
    }

    /* Kaydet / sil dugmeleri tam genislikte uzamasin */
    :is(.page[data-name$="-form"], .page[data-name="pos-create"], .page[data-name="einvoice-settings"],
        .page[data-name="profile"], .page[data-name="account-tx-edit"]) .block > .button-large {
        max-width: 360px;
    }
}

/* Satir duzenleyici (siparis / fatura formu): genis ekranda kalemler solda,
   toplamlar sagda yapiskan kartta. Toplamlar data-line-editor icinde kalir (JS). */
@media (min-width: 1100px) {
    .page[data-name$="-form"] .line-editor {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 14px;
        align-items: start;
        padding: 0 10px;
    }

    .page[data-name$="-form"] .line-editor > .line-list,
    .page[data-name$="-form"] .line-editor > .line-actions { grid-column: 1; }

    .page[data-name$="-form"] .line-editor > .line-actions { padding: 0; }
    .page[data-name$="-form"] .line-editor > .line-list { padding: 0; }

    .page[data-name$="-form"] .line-editor > .card {
        grid-column: 2;
        grid-row: 1 / span 2;
        position: sticky;
        top: 10px;
        margin: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Alt paneller (sheet): genis ekranda ortalanmis, sinirli genislikte pencere.
   F7 aciliri transform ile kaydirir; yatay konum left/right ile verilir.
   -------------------------------------------------------------------------- */

.sheet-modal .toolbar-top {
    border-bottom: 1px solid var(--divider);
}

.sheet-modal .toolbar-top .left { font-size: 15px; }

/*
 * Sheet'ler yeni kart diliyle: duz yuzey, baslik cubugu, kutulu alanlar,
 * altta iki buton (ikincil + ana). Tek tek sheet siniflarina dokunmadan
 * tum alt panellere uygulanir.
 */
.sheet-modal { background: var(--surface); }
.sheet-modal .sheet-modal-inner { background: var(--surface); }

.sheet-modal .toolbar-top {
    --f7-toolbar-height: 56px;
    background: var(--surface);
}
.sheet-modal .toolbar-top .toolbar-inner { padding: 0 8px 0 20px; }
.sheet-modal .toolbar-top .left {
    padding-left: 0 !important;
    font-size: 16px;
    font-weight: 650;
    color: var(--ink);
}
.sheet-modal .toolbar-top .right .link {
    height: 32px;
    padding: 0 12px !important;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
}
.sheet-modal .toolbar-top .right .link:hover { background: var(--surface-2); color: var(--ink); }

/* Kart icindeki F7 listeleri: cercevesiz zemin, alanlar arasinda nefes */
.sheet-modal .list ul { background: transparent; }
.sheet-modal .list ul::before,
.sheet-modal .list ul::after { display: none; }
.sheet-modal .sheet-modal-inner > form > .list:first-child,
.sheet-modal .sheet-modal-inner > .list:first-child { margin-top: 14px !important; }

/* Ikincil buton: notr, cerceveli; ana buton marka renginde */
.sheet-modal .button-tonal {
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
}
.sheet-modal .button-tonal:hover { border-color: var(--brand-line); }
.sheet-modal .button-tonal.button-active {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand);
}
.sheet-modal .button-large { height: 44px; font-size: 14.5px; border-radius: 10px; }

@media (min-width: 900px) {
    .sheet-modal {
        left: max(0px, calc(50% - 340px));
        right: max(0px, calc(50% - 340px));
        width: auto;
        border-radius: 16px 16px 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 40px rgba(15, 20, 25, .18);
    }

    /* Genis ekranda sol menu sabit: pencereyi icerik alaninin ortasina al */
    .panel-visible-by-breakpoint ~ .view .sheet-modal,
    body:has(.panel-left.panel-in-breakpoint) .sheet-modal {
        left: max(var(--f7-panel-width), calc(50% + var(--f7-panel-width) / 2 - 340px));
        right: max(0px, calc(50% - var(--f7-panel-width) / 2 - 340px));
    }
}

/* --------------------------------------------------------------------------
   Detay sayfalari (yeni tasarim)
   .dp > .dp-hero (ozet karti) + .dp-grid (.dp-main | .dp-side)
   Kart icerikleri panelin db-card / db-list / db-table parcalarini kullanir.
   -------------------------------------------------------------------------- */

.dp {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.dp-hero-main { flex: 1 1 360px; min-width: 0; display: flex; gap: 16px; align-items: flex-start; }

.dp-avatar {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 700;
    background: var(--brand-soft);
    color: var(--brand);
}

.dp-avatar .icon { font-size: 24px; }

.dp-eyebrow {
    font-size: 12.5px;
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
}

.dp-title {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.dp-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--ink-2);
}

.dp-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.dp-meta .icon { font-size: 14px; color: var(--ink-3); }
.dp-meta a { color: var(--brand); text-decoration: none; }

.dp-hero-side {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.dp-amount-label { font-size: 12.5px; color: var(--ink-2); }

.dp-amount {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.dp-amount-note { font-size: 12.5px; color: var(--ink-3); }

.dp-actions {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--divider);
}

.dp-actions .db-btn { height: 38px; font-size: 13.5px; }
.dp-actions .db-btn.is-danger { color: var(--debt); }
.dp-actions .db-btn.is-danger:hover { border-color: var(--debt); }
.dp-actions .dp-actions-end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.dp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.dp-main, .dp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Panelin db-card kurali (flex-basis 320px) dikey sutunda karti uzatmasin */
.dp-main > .db-card, .dp-side > .db-card, .dp-main > section, .dp-side > section { flex: none; }

@media (min-width: 1100px) {
    .dp-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
}

/* Etiket / deger satirlari */
.dp-facts { margin-top: 6px; display: flex; flex-direction: column; }

.dp-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid var(--divider);
    font-size: 13.5px;
}

.dp-fact:first-child { border-top: 0; }
.dp-fact > span { color: var(--ink-2); flex: none; }
.dp-fact > b, .dp-fact > div { font-weight: 500; text-align: right; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.dp-fact a { color: var(--brand); text-decoration: none; }
.dp-fact.is-total { font-weight: 700; }
.dp-fact.is-total > span { color: var(--ink); }

/* Kart ici F7 listeleri: kenarsiz, kartla butunlesik */
.db-card > .list { margin: 8px -20px -8px; }
/* Kenar boslugu olmayan kartta liste zaten kenara dayali; eksi pay sayfayi yana kaydirir */
.db-card.is-flush > .list { margin-left: 0; margin-right: 0; }
.db-card > .list ul { background: transparent; }
.db-card > .list ul::before, .db-card > .list ul::after { display: none; }

@media (max-width: 640px) {
    .dp-hero { padding: 16px; }
    .dp-hero-side { align-items: flex-start; text-align: left; }
    .dp-title { font-size: 20px; }
    .dp-amount { font-size: 24px; }
    .dp-actions .dp-actions-end { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Cari detayi (dp-* uzerine)
   -------------------------------------------------------------------------- */

.dp-avatar.ac-type-supplier  { background: var(--warn-soft); color: var(--warn-ink); }
.dp-avatar.ac-type-personnel { background: var(--violet-soft); color: var(--violet); }

.dp-amount.is-receivable { color: var(--brand); }
.dp-amount.is-payable { color: var(--warn-ink); }
.dp-amount-note.is-late { color: var(--debt); font-weight: 500; }

.ac-notes { margin: 8px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--ink); }
.ac-muted { color: var(--ink-3); font-weight: 500; }
.ac-chevron { font-size: 14px; color: var(--ink-3); }

/* Hareket tablosu */
.ac-tx { margin-top: 10px; }

.ac-tx-row {
    display: grid;
    grid-template-columns: 96px minmax(180px, 1fr) 96px 110px 110px 120px 116px;
    align-items: center;
    border-top: 1px solid var(--divider);
    font-size: 13.5px;
}

.ac-tx-row > * { padding: 10px 10px; min-width: 0; }
.ac-tx-row > :first-child { padding-left: 20px; }
.ac-tx-row > :last-child { padding-right: 14px; }
.ac-tx-row:not(.is-head):hover { background: var(--surface-2); }

.ac-tx-row.is-head {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-2);
}

.ac-tx-row.is-head + .ac-tx-row { border-top: 0; }
.ac-tx-row .is-num { text-align: right; }
.ac-tx-date { color: var(--ink-2); white-space: nowrap; }
.ac-tx-desc { display: flex; flex-direction: column; gap: 2px; }
.ac-tx-desc b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-tx-desc small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-tx-due { color: var(--ink-2); white-space: nowrap; font-size: 13px; }
.ac-tx-due.is-late { color: var(--debt); font-weight: 500; }
.ac-tx-bal { font-weight: 600; }

.ac-tx-tools { display: flex; justify-content: flex-end; gap: 2px; }
.ac-tx-row.is-opening { background: var(--surface-2); color: var(--ink-2); }
.ac-tx-row.is-total { border-top: 1px solid var(--line); background: var(--surface-2); font-weight: 600; }
.ac-tx-row.is-total .ac-tx-amt, .ac-tx-row.is-total .ac-tx-bal { font-weight: 700; }
.cl-card > .ac-tx { margin-top: 0; }

.ac-tool {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    text-decoration: none;
}

.ac-tool .icon { font-size: 16px; }
.ac-tool:hover { background: var(--surface-2); color: var(--ink); }
.ac-tool.is-danger:hover { color: var(--debt); }

@media (min-width: 1100px) and (max-width: 1400px) {
    /* Sag sutun varken tablo sikisir: vade sutunu dar */
    .ac-tx-row { grid-template-columns: 90px minmax(160px, 1fr) 90px 100px 100px 110px 112px; }
}

@media (max-width: 899px) {
    .ac-tx-row.is-head { display: none; }

    .ac-tx-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "desc amt"
            "date tools";
        padding: 6px 0;
    }

    .ac-tx-row > * { padding: 2px 16px; }
    .ac-tx-desc { grid-area: desc; }
    /* Borc ya da alacak tutarindan yalnizca biri dolu; ikisi ayni hucreye duser */
    .ac-tx-amt { grid-area: amt; font-weight: 600; }
    .ac-tx-amt.is-credit { color: var(--credit); }
    .ac-tx-amt:not(:empty)::before {
        content: "Borç ";
        font-size: 11px;
        font-weight: 500;
        color: var(--ink-3);
    }
    .ac-tx-amt.is-credit:not(:empty)::before { content: "Alacak "; }
    .ac-tx-date { grid-area: date; font-size: 12px; }
    .ac-tx-tools { grid-area: tools; }
    .ac-tx-due, .ac-tx-bal { display: none; }
}

/* --------------------------------------------------------------------------
   Siparis detayi (dp-* uzerine)
   -------------------------------------------------------------------------- */

.od-account-link { color: inherit; text-decoration: none; }
.od-account-link:hover { color: var(--brand); }
.dp-meta .is-late, .dp-fact b.is-late { color: var(--debt); font-weight: 500; }
.dp-meta .is-late .icon { color: var(--debt); }
.od-head-note { font-size: 12.5px; color: var(--ink-3); }
.od-warn { color: var(--warn-ink); }
.dp-fact .cl-pill { font-size: 12px; }

/* Imzali formlar kartin icinde kenarsiz */
.od-signed .surface-list { margin: 8px -20px -18px !important; border: 0; border-radius: 0 0 12px 12px; }

/* Kalem tablosu */
.od-lines-table { margin-top: 10px; }

.od-line {
    display: grid;
    grid-template-columns: 44px minmax(200px, 1fr) 100px 120px 64px 64px 140px;
    align-items: start;
    border-top: 1px solid var(--divider);
    font-size: 13.5px;
}

.od-line > * { padding: 11px 10px; min-width: 0; }
.od-line > :first-child { padding-left: 20px; }
.od-line > :last-child { padding-right: 20px; }

.od-line.is-head {
    align-items: center;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-2);
}

.od-line.is-head > * { padding-top: 8px; padding-bottom: 8px; }
.od-line.is-head + .od-line { border-top: 0; }
.od-line .is-num { text-align: right; }
.od-line-no { color: var(--ink-3); }
.od-line-desc { display: flex; flex-direction: column; gap: 3px; }
.od-line-desc b { font-weight: 600; line-height: 1.35; }
.od-line-desc small { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.od-line-qty, .od-line-price, .od-line-disc, .od-line-vat { color: var(--ink-2); white-space: nowrap; }
.od-line-total { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.od-line-total b { font-weight: 600; }
.od-line-total small { font-size: 12px; color: var(--ink-3); }

.od-cost { font-size: 12px; color: var(--ink-2); text-decoration: none; }
.od-cost:hover { color: var(--brand); }
.od-cost.is-missing { color: var(--warn-ink); font-weight: 500; }

/* Toplamlar: sagda dar blok */
.od-totals {
    margin: 4px 20px 6px auto;
    width: min(340px, calc(100% - 40px));
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.od-totals > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    font-size: 13.5px;
}

.od-totals > div > span { color: var(--ink-2); }
.od-totals small { font-size: 12px; color: var(--ink-3); }
.od-totals b.is-late { color: var(--debt); }

.od-totals > .is-grand {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--divider);
}

.od-totals > .is-grand > span { color: var(--ink); font-weight: 700; font-size: 14px; }
.od-totals > .is-grand > b { font-size: 20px; font-weight: 700; }

@media (min-width: 1100px) and (max-width: 1400px) {
    .od-line { grid-template-columns: 36px minmax(160px, 1fr) 84px 104px 52px 52px 124px; }
}

@media (max-width: 899px) {
    .od-line.is-head { display: none; }

    .od-line {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "desc total"
            "meta total";
        padding: 6px 0;
    }

    .od-line > * { padding: 2px 16px; }
    .od-line-no, .od-line-disc, .od-line-vat { display: none; }
    .od-line-desc { grid-area: desc; }
    .od-line-total { grid-area: total; align-self: center; }
    /* Miktar x fiyat tek satirda */
    .od-line-qty { grid-area: meta; text-align: left !important; font-size: 12.5px; }
    .od-line-price { display: none; }
    .od-totals { width: auto; margin: 4px 16px 6px; }
}

/* --------------------------------------------------------------------------
   Raporlar
   Rapor satiri: solda ad, sagda tutar. Oran cubugu satirin altinda
   ince bir seritle payi gosterir; tabloya gerek kalmadan mobilde okunur.
   -------------------------------------------------------------------------- */

.rpt-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--divider);
    font-size: 13.5px;
    text-decoration: none;
    color: inherit;
}

.rpt-line:first-child { border-top: 0; }

.rpt-line .rpt-main {
    flex: 1;
    min-width: 0;
}

.rpt-line .rpt-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpt-line .rpt-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpt-line .rpt-val {
    flex-shrink: 0;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

.rpt-line .rpt-val small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
}

.rpt-line.is-total {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

.rpt-line.is-total .rpt-name,
.rpt-line.is-total .rpt-val { font-weight: 750; }

.rpt-bar {
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--divider);
    overflow: hidden;
}

.rpt-bar > i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--brand);
}

.rpt-bar.debt > i   { background: var(--debt); }
.rpt-bar.credit > i { background: var(--credit); }
.rpt-bar.warn > i   { background: var(--warn); }

.rpt-note {
    margin: 8px 16px 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-3);
}

/* Aktif donemi navbar altinda gosteren serit */
.rpt-period {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 16px 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--ink-2);
}

.rpt-period i.icon { font-size: 16px; color: var(--brand); }
.rpt-period .rpt-period-value { font-weight: 650; color: var(--ink); }
.rpt-period .rpt-period-edit { margin-left: auto; font-weight: 600; color: var(--brand); }

/* Filtre panelindeki hazir tarih araliklari */
.period-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.period-presets .button { padding: 0 4px; font-size: 12px; }

@media (max-width: 380px) {
    .period-presets { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Toplu secim cubugu (cek listesi, makbuz bekleyenler)
   Liste altinda sabit durur; seciminin izin verdigi islemleri
   dugme olarak gosterir.
   ========================================================================== */

.bulkbar {
    /* Listenin basinda yapiskan durur: secim nerede yapiliyorsa
       eylem de orada. Pencere dibine sabitlenmis bir cubuk genis
       ekranda listeden cok uzaga dusuyordu. */
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 16px 10px;
    padding: 11px 13px;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(15, 25, 40, .10);
}

.dark .bulkbar { box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }

.bulkbar .bulk-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bulkbar .bulk-count {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--brand);
}

.bulkbar .bulk-total {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
}

.bulkbar .bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bulkbar .bulk-actions .button {
    --f7-button-height: 32px;
    flex: 1 1 auto;
    min-width: 120px;
    padding: 0 12px;
    font-size: 12.5px;
}

.bulkbar .bulk-empty {
    font-size: 12px;
    color: var(--ink-3);
}

/* Satirdaki secim kutusu, tx-item ikonunun yerini alir */
.tx-item > .checkbox { flex: 0 0 auto; }

/* Toplu fatura indirmede hazirlik ilerlemesi */
.export-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--divider);
    overflow: hidden;
}
.export-progress > i {
    display: block;
    height: 100%;
    background: var(--brand);
    transition: width .25s ease;
}

/* --------------------------------------------------------------------------
   Günlük rapor: gün gezinme şeridi
   Ortadaki alan tarih seçiciyi açar, oklar bir gün ileri / geri gider.
   -------------------------------------------------------------------------- */

.day-nav {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 16px 16px 0;
}

.day-nav .day-nav-btn {
    flex-shrink: 0;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--brand);
    text-decoration: none;
}

.day-nav .day-nav-btn:active { background: var(--surface-2); }

.day-nav .day-nav-main {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.day-nav .day-nav-date {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
}

.day-nav .day-nav-sub {
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Cari formu: mükellefiyet sorgu sonucu
   -------------------------------------------------------------------------- */

.taxpayer-result {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
}

.taxpayer-result.is-success {
    border-color: var(--credit);
    background: var(--credit-soft);
    color: var(--credit-ink);
}

.taxpayer-result.is-error {
    border-color: var(--debt);
    background: var(--debt-soft);
    color: var(--debt-ink);
}

.taxpayer-result.is-info {
    border-color: var(--warn);
    background: var(--warn-soft);
    color: var(--warn-ink);
}

/* ---------------------------------------------------------------
   Ekranda imza alani
   Tuval koyu temada da beyaz kalir: imza murekkebi koyu renktir ve
   belgeye kagit uzerindeki gibi aktarilir.
   --------------------------------------------------------------- */
.signature-pad {
    margin: 0 16px 14px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.signature-pad-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.signature-pad-label {
    font-size: 13px;
    font-weight: 650;
}

.signature-pad-clear {
    font-size: 13px;
    font-weight: 600;
}

.signature-pad-area {
    position: relative;
    height: 190px;
    background: #fff;
    border: 1.5px dashed #c3ccd6;
    border-radius: 10px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.signature-pad-area canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

/* Imza cizgisi: kagittaki "buraya imzalayin" hatti */
.signature-pad-area::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 42px;
    border-bottom: 1px solid #dbe2e9;
    pointer-events: none;
}

.signature-pad-placeholder {
    position: absolute;
    left: 18px;
    bottom: 20px;
    font-size: 12px;
    color: #a9b4bf;
    pointer-events: none;
}

.signature-pad.is-signed .signature-pad-placeholder { display: none; }
.signature-pad.is-signed .signature-pad-area { border-style: solid; border-color: #9fb3c8; }

.signature-pad-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

.signature-pad-hint {
    font-weight: 500;
    color: var(--ink-3);
}

@media (min-width: 768px) {
    .signature-pad-area { height: 220px; }
}

/* Teklif / siparis sartlari duzenleyicisi (partials/terms_editor.php) */
.terms-list { padding: 0 16px; }
.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}
.terms-no {
    flex: 0 0 20px;
    padding-top: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: right;
}
.terms-row textarea {
    flex: 1;
    min-width: 0;
    min-height: 54px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}
.terms-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}
.terms-actions a {
    width: 30px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    border-radius: 6px;
}
.terms-actions a .icon { font-size: 16px; }
.terms-actions a[data-terms-remove] { color: var(--debt); }
.terms-empty {
    margin: 0 16px 8px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--ink-3);
}
.terms-tools {
    display: flex;
    gap: 8px;
    padding: 0 16px 0 42px;
}
.terms-tools .button { width: auto; padding: 0 12px; }
.terms-editor code { font-size: 12px; }

/* ==========================================================================
   Onay penceresi (confirmDialog)
   ========================================================================== */

.dialog.confirm-dialog {
    --cdlg-accent: var(--brand);
    --cdlg-accent-strong: var(--brand-strong);
    --cdlg-soft: var(--brand-soft);
    width: min(420px, calc(100vw - 32px));
    margin-left: calc(min(420px, calc(100vw - 32px)) / -2);
    left: 50%;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .28), 0 4px 12px rgba(16, 24, 40, .08);
    text-align: left;
    overflow: hidden;
}
.dialog.confirm-dialog.cdlg-danger {
    --cdlg-accent: var(--debt);
    --cdlg-accent-strong: var(--debt-ink);
    --cdlg-soft: var(--debt-soft);
}
.dialog.confirm-dialog.cdlg-warn {
    --cdlg-accent: var(--warn);
    --cdlg-accent-strong: var(--warn-ink);
    --cdlg-soft: var(--warn-soft);
}
.dialog.confirm-dialog::before { display: none; }

.confirm-dialog .dialog-inner { padding: 0; }

.confirm-dialog .cdlg-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 0;
}
.confirm-dialog .cdlg-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--cdlg-soft);
    color: var(--cdlg-accent);
}
.confirm-dialog .cdlg-icon .icon { font-size: 22px; }
.confirm-dialog .cdlg-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.confirm-dialog .cdlg-text {
    padding: 14px 24px 0 82px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
}
.confirm-dialog .cdlg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding: 14px 20px;
    background: var(--surface-2);
    border-top: 1px solid var(--divider);
}
.confirm-dialog .cdlg-actions .button {
    width: auto;
    min-width: 96px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    gap: 8px;
}
.confirm-dialog .cdlg-cancel {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
}
.confirm-dialog .cdlg-cancel:hover { background: var(--surface-2); border-color: var(--ink-3); }
.confirm-dialog .cdlg-ok {
    background: var(--cdlg-accent);
    color: #fff;
    border: 1px solid var(--cdlg-accent);
}
.confirm-dialog .cdlg-ok:hover { background: var(--cdlg-accent-strong); border-color: var(--cdlg-accent-strong); }
.dark .confirm-dialog .cdlg-ok { color: #0d1117; }
.confirm-dialog .button:focus-visible {
    outline: 2px solid var(--cdlg-accent);
    outline-offset: 2px;
}
.confirm-dialog.is-busy .button { pointer-events: none; }
.confirm-dialog.is-busy .cdlg-cancel { opacity: .5; }
.confirm-dialog .cdlg-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: cdlg-spin .7s linear infinite;
}
@keyframes cdlg-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .confirm-dialog .cdlg-text { padding-left: 24px; }
    .confirm-dialog .cdlg-actions { padding: 14px 16px; }
    .confirm-dialog .cdlg-actions .button { flex: 1 1 0; }
}

/* Ayarlar > Sistemler */
.cl-row.sys-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.cl-row.sys-row .cl-sub { white-space: normal; }

.sys-chevron {
    font-size: 16px;
    color: var(--ink-3);
}

/* Birimler > Belgede birim kisaltmasi */
.unit-tr { display: grid; gap: 6px; }
.unit-tr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(auto-fit, minmax(90px, 140px));
    gap: 10px;
    align-items: center;
    font-size: 13px;
}
.unit-tr-head { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.unit-tr-row input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    font: inherit;
    color: inherit;
}

/* ==========================================================================
   Kart basliklari: yeni form kartlariyla ayni dil (of-card-head).
   Gri serit, alt cizgi ve soldaki dikey vurgu kalkti; beyaz zemin,
   15px baslik, altinda tek satir aciklama.
   ========================================================================== */
.db-card > .db-card-head:first-child,
.db-card > .db-card-title:first-child {
    min-height: 0;
    margin: -18px -20px 12px;
    padding: 18px 20px 0;
    background: transparent;
    border-bottom: 0;
}
.db-card.is-flush > .db-card-head:first-child,
.db-card.is-flush > .db-card-title:first-child {
    margin: -18px 0 0;
    padding: 18px 20px 12px;
}
.db-card > .db-card-head:first-child > h2::before,
.db-card > .db-card-title:first-child::before { display: none; }
.db-card > .db-card-head:first-child h2,
.db-card > .db-card-title:first-child { font-size: 15px; font-weight: 600; line-height: 1.3; }
.db-card > .db-card-head:first-child + .db-card-sub { margin-top: -8px; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 899px) {
    .db-card.is-flush > .db-card-head:first-child,
    .db-card.is-flush > .db-card-title:first-child { padding: 16px 16px 10px; }
}

/* Sheet basligi: "Kapat" yazisi yerine carpi ikonlu kare dugme */
.sheet-modal .toolbar-top .right .link.sheet-close {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    justify-content: center;
    font-size: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink-2);
}
.sheet-modal .toolbar-top .right .link.sheet-close::before {
    content: "xmark";
    font-family: 'Framework7 Icons';
    font-size: 15px;
    line-height: 1;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}
.sheet-modal .toolbar-top .right .link.sheet-close:hover { background: var(--surface-2); color: var(--ink); }