/* =====================================================================
   HOBİ BAHÇESİ YÖNETİM SİSTEMİ - Tasarım sistemi
   Tailwind (CDN) düzen yardımcıları için; görsel dil burada tanımlanır.

   YÖN: bir bahçe kooperatifinin defteri.
   - Marka rengi koyu orman yeşili; kil/terracotta aksan.
   - DÖRT PILLAR kendi rengini taşır (aidat / elektrik / masraf / ortak alan).
     Bu renkler dekor değil ANLAMDIR: borç dökümü her ekranda aynı dille okunur.
   - Kırmızı YALNIZCA borç/gider, yeşil YALNIZCA tahsilat anlamı taşır.
   - Tüm para rakamları IBM Plex Mono: sütunlar kusursuz hizalanır.
   - TEK TEMA: açık. Koyu tema bilinçli olarak YOKTUR; :root'taki
     color-scheme: light, form denetimlerini de açık tutar.
   - Kalıcılık: üstteki borç şeridi her sayfada alacağı ve kasayı gösterir.
   ===================================================================== */

/* ---------------------------------------------------------------- */
/* 1. Token'lar                                                     */
/* ---------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* Orman - kenar çubuğu, başlıklar, birincil eylem */
    --ink-900: #0A1F18;
    --ink-800: #12352A;
    --ink-700: #1D5140;
    --ink-600: #2A6E56;
    --ink-100: #DCEAE3;

    /* Kil - tek aksan rengi */
    --clay:      #B4632C;
    --clay-soft: #F7E8DA;

    /* Anlamsal: para yönü */
    --tahsil:      #16764F;
    --tahsil-soft: #DCF0E6;
    --borc:        #B23A32;
    --borc-soft:   #F9E3E1;
    --virman:      #55508C;
    --virman-soft: #E7E5F2;

    /* DÖRT PILLAR - borç dökümünün rengi */
    --p-aidat:      #2A6E56;
    --p-aidat-soft: #DCEAE3;
    --p-elektrik:      #B8860B;
    --p-elektrik-soft: #F7EDD2;
    --p-masraf:      #8C5A3C;
    --p-masraf-soft: #F1E4DA;
    --p-ortak:      #3D6A8F;
    --p-ortak-soft: #DEE9F2;

    /* Yüzeyler */
    --canvas:  #EFF2EF;
    --surface: #FFFFFF;
    --raised:  #F7FAF8;
    --line:    #DDE5E0;
    --line-strong: #C2CFC7;

    /* Metin */
    --text:     #0F221C;
    --text-2:   #55685F;
    --text-3:   #85978D;
    --on-ink:   #F1F7F4;
    --on-ink-2: #9DBBAF;

    /* Ölçü */
    --rail:   248px;
    --topbar: 56px;
    --strip:  60px;

    --r-sm: 6px;
    --r-md: 9px;
    --r-lg: 14px;

    --shadow-card: 0 1px 2px rgba(15, 34, 28, .05);
    --shadow-pop:  0 12px 32px -8px rgba(10, 31, 24, .28), 0 2px 8px rgba(10, 31, 24, .12);

    --font-ui:  'Archivo', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
    --font-num: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}


/* ---------------------------------------------------------------- */
/* 2. Temel                                                         */
/* ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--ink-100); color: var(--ink-900); }

.ico { flex: none; }

/* Odak: klavye kullanıcısı daima nerede olduğunu görür */
:focus-visible {
    outline: 2px solid var(--ink-600);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid var(--canvas);
    border-radius: 6px;
}

/* Rakamlar: para, endeks, tarih sütunları */
.num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    letter-spacing: -.01em;
}
.num-lg { font-family: var(--font-num); font-variant-numeric: tabular-nums;
          font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.num-xl { font-family: var(--font-num); font-variant-numeric: tabular-nums;
          font-size: 27px; font-weight: 600; letter-spacing: -.025em; }

.t-muted { color: var(--text-2); }
.t-faint { color: var(--text-3); }
.t-tahsil { color: var(--tahsil); }
.t-borc   { color: var(--borc); }
.t-virman { color: var(--virman); }
.t-aidat    { color: var(--p-aidat); }
.t-elektrik { color: var(--p-elektrik); }
.t-masraf   { color: var(--p-masraf); }
.t-ortak    { color: var(--p-ortak); }

.eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--text-3);
}

/* ---------------------------------------------------------------- */
/* 3. Kabuk: kenar çubuğu / üst bar / şerit / içerik                */
/* ---------------------------------------------------------------- */

.rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    background: var(--ink-800);
    color: var(--on-ink);
    display: flex;
    flex-direction: column;
    z-index: 40;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.rail-mark {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--ink-600);
    color: var(--on-ink);
    border-radius: 8px;
    flex: none;
}
.rail-name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-nav { list-style: none; margin: 0; padding: 8px 8px 16px; flex: 1; }

.rail-group {
    padding: 14px 8px 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: none;   /* Türkçe "i" sorunu: büyük harfe ÇEVİRMEYİZ */
    color: var(--on-ink-2);
}

.rail-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    color: var(--on-ink-2);
    transition: background .12s, color .12s;
}
.rail-link:hover { background: rgba(255, 255, 255, .06); color: var(--on-ink); }
.rail-link.is-active {
    background: var(--ink-600);
    color: #fff;
    font-weight: 500;
}

.rail-foot {
    padding: 10px 16px 14px;
    font-size: 11px;
    color: var(--on-ink-2);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.rail-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 18, 16, .5);
    z-index: 39;
}
.rail-scrim.is-open { display: block; }

.topbar {
    position: fixed;
    top: 0; right: 0;
    left: var(--rail);
    height: var(--topbar);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    z-index: 30;
}

/* Borç şeridi: yöneticinin en sık sorduğu soruyu sayfa değiştirmeden yanıtlar */
.strip {
    position: fixed;
    top: var(--topbar); right: 0;
    left: var(--rail);
    min-height: var(--strip);
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 16px;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    z-index: 29;
}
.strip-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 9px 18px 9px 0;
    margin-right: 18px;
    border-right: 1px solid var(--line);
    white-space: nowrap;
    flex: none;
}
.strip-item:last-child { border-right: 0; margin-right: 0; }
.strip-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-2);
}
.strip-value {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.strip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.strip-empty {
    display: flex; align-items: center;
    font-size: 12.5px;
    color: var(--text-3);
}

.content {
    margin-left: var(--rail);
    padding: calc(var(--topbar) + var(--strip) + 20px) 20px 56px;
    min-height: 100vh;
}

.page-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.page-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- */
/* 4. Kart ve ölçüm                                                 */
/* ---------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}
.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}
.card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.card-body { padding: 16px; }

.metric {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 15px;
    box-shadow: var(--shadow-card);
}
.metric-value { margin-top: 5px; }
.metric-foot {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Pillar şeridi: dört pilların oranını tek bakışta gösterir */
.pillbar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--line);
}
.pillbar > span { display: block; height: 100%; }

/* ---------------------------------------------------------------- */
/* 5. Tablolar                                                      */
/* ---------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.ledger thead th {
    position: sticky;
    top: 0;
    background: var(--raised);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--text-2);
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    z-index: 1;
}
table.ledger thead th.right,
table.ledger tbody td.right { text-align: right; }
table.ledger thead th.center,
table.ledger tbody td.center { text-align: center; }

table.ledger tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
table.ledger tbody tr:hover td { background: var(--raised); }
table.ledger tbody tr.is-cancelled td {
    color: var(--text-3);
    text-decoration: line-through;
    text-decoration-color: var(--text-3);
}
table.ledger tbody tr.is-total td {
    font-weight: 600;
    background: var(--raised);
    border-top: 2px solid var(--line-strong);
}
table.ledger tfoot td {
    padding: 10px 12px;
    font-weight: 600;
    background: var(--raised);
    border-top: 2px solid var(--line-strong);
}

.cell-sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.cell-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* Sıralı sütun başlığı */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.is-sorted { color: var(--ink-600); }

/* ---------------------------------------------------------------- */
/* 6. Düğmeler                                                      */
/* ---------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover { background: var(--raised); border-color: var(--text-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background: var(--ink-700);
    border-color: var(--ink-700);
    color: #fff;
}
.btn-primary:hover { background: var(--ink-600); border-color: var(--ink-600); }

.btn-danger { background: var(--borc); border-color: var(--borc); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--raised); border-color: transparent; }

.btn-sm { padding: 4px 9px; font-size: 12.5px; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.btn-icon:hover { background: var(--raised); color: var(--text); }
.btn-icon.is-danger:hover { background: var(--borc-soft); color: var(--borc); }

.segment {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.segment button {
    padding: 4px 11px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.segment button.is-active {
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------- */
/* 7. Formlar                                                       */
/* ---------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; }

.label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 5px;
}
.label .req { color: var(--borc); }

.input, .select, .textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: 0;
    border-color: var(--ink-600);
    box-shadow: 0 0 0 3px var(--ink-100);
}
.input:disabled, .select:disabled, .textarea:disabled {
    background: var(--raised);
    color: var(--text-3);
    cursor: not-allowed;
}
.input.is-invalid { border-color: var(--borc); }
.textarea { min-height: 76px; resize: vertical; }

.select {
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355685F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 15px;
}

/* Para ve endeks girişleri: rakamlar hizalı, sağ dayalı */
.input-num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: -.01em;
}

.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .addon {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-left: 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--raised);
    color: var(--text-2);
    font-size: 12.5px;
    white-space: nowrap;
}

.hint { font-size: 11.5px; color: var(--text-3); }
.hint.is-error { color: var(--borc); }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    width: 34px; height: 20px;
    border-radius: 10px;
    background: var(--line-strong);
    position: relative;
    transition: background .15s;
    flex: none;
}
.switch-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.switch input:checked + .switch-track { background: var(--ink-600); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--ink-100); }

/* Zorunlu seçim (aidat "pasif bahçeler dahil mi?" gibi) */
.choice {
    display: flex;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.choice:hover { background: var(--raised); }
.choice.is-selected { border-color: var(--ink-600); background: var(--ink-100); }
.choice input { margin-top: 2px; accent-color: var(--ink-600); }
.choice-title { font-size: 13px; font-weight: 500; }
.choice-note { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* ---------------------------------------------------------------- */
/* 8. Rozet ve çip                                                  */
/* ---------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--raised);
    color: var(--text-2);
}
.badge-outline { background: transparent; border: 1px solid var(--line-strong); }
.badge-clay    { background: var(--clay-soft);   color: var(--clay); }
.badge-tahsil  { background: var(--tahsil-soft); color: var(--tahsil); }
.badge-borc    { background: var(--borc-soft);   color: var(--borc); }
.badge-aidat    { background: var(--p-aidat-soft);    color: var(--p-aidat); }
.badge-elektrik { background: var(--p-elektrik-soft); color: var(--p-elektrik); }
.badge-masraf   { background: var(--p-masraf-soft);   color: var(--p-masraf); }
.badge-ortak    { background: var(--p-ortak-soft);    color: var(--p-ortak); }
.badge-pasif    { background: var(--raised); color: var(--text-3); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--surface);
    font-size: 12px;
    white-space: nowrap;
}
.chip button { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0; display: flex; }
.chip button:hover { color: var(--borc); }

/* ---------------------------------------------------------------- */
/* 9. Modal, menü, bildirim                                         */
/* ---------------------------------------------------------------- */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 18, 16, .45);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 60;
    overflow-y: auto;
}

.modal {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}
.modal.is-wide { max-width: 900px; }
.modal.is-xwide { max-width: 1200px; }
.modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    background: var(--raised);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.menu {
    position: absolute;
    min-width: 208px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
    z-index: 50;
}
.menu-head { padding: 8px 10px 9px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.menu-item:hover { background: var(--raised); }
.menu-item.is-danger { color: var(--borc); }
.menu-item.is-danger:hover { background: var(--borc-soft); }

.toasts {
    position: fixed;
    right: 16px; bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 70;
    max-width: min(400px, calc(100vw - 32px));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    background: var(--ink-800);
    color: var(--on-ink);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
    font-size: 13px;
    animation: toast-in .18s ease-out;
}
.toast.is-ok    { background: var(--tahsil); color: #fff; }
.toast.is-error { background: var(--borc);   color: #fff; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--r-md);
    font-size: 13px;
    border: 1px solid;
}
.alert-info  { background: var(--ink-100);   border-color: var(--ink-600); color: var(--ink-800); }
.alert-warn  { background: var(--clay-soft); border-color: var(--clay);    color: var(--clay); }
.alert-error { background: var(--borc-soft); border-color: var(--borc);    color: var(--borc); }

/* ---------------------------------------------------------------- */
/* 10. Boş durum, yükleniyor                                        */
/* ---------------------------------------------------------------- */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 44px 20px;
    text-align: center;
    color: var(--text-3);
}
.empty-title { font-size: 14px; font-weight: 500; color: var(--text-2); }
.empty-note { font-size: 12.5px; max-width: 380px; }

.spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--ink-600);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
    background: linear-gradient(90deg, var(--raised) 25%, var(--line) 37%, var(--raised) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------------------------------------------------------------- */
/* 11. Giriş ekranı                                                 */
/* ---------------------------------------------------------------- */

.auth-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 900px) { .auth-shell { grid-template-columns: 1fr 460px; } }

.auth-panel {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    background: var(--ink-800);
    color: var(--on-ink);
}
@media (min-width: 900px) { .auth-panel { display: flex; } }

.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.auth-lede { font-size: 27px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; max-width: 15ch; }
.auth-copy { font-size: 13.5px; color: var(--on-ink-2); max-width: 44ch; margin-top: 12px; }
.auth-points { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 9px; }
.auth-points li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--on-ink-2); }
.auth-note { font-size: 11.5px; color: var(--on-ink-2); }

.auth-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 28px;
    background: var(--surface);
    min-height: 100vh;
}

.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 38px; }
.pw-toggle {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; background: none;
    color: var(--text-3);
    cursor: pointer;
}
.pw-toggle:hover { color: var(--text); }

/* ---------------------------------------------------------------- */
/* 12. Elektrik toplu giriş ızgarası                                */
/* ---------------------------------------------------------------- */
/* Operator zamanının çoğunu burada geçirir: 150 satır, klavyeyle
   gezilebilir. ASLA 150 modal.                                      */

/* Tailwind'in .grid (display:grid) yardımcısı tabloyu bozmasın */
table.grid { display: table; width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--raised);
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    text-align: left;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
table.grid td {
    padding: 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
table.grid td:last-child { border-right: 0; }
table.grid td.pad { padding: 7px 10px; }
table.grid td input {
    width: 100%;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    text-align: right;
}
table.grid td input:focus {
    outline: 0;
    background: var(--ink-100);
    box-shadow: inset 0 0 0 2px var(--ink-600);
}
/* Onay kutusu (Turlama) metin kutusu stilini almasın: çerçeve/genişlik yok */
table.grid td input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    background: none;
    vertical-align: middle;
    accent-color: var(--ink-600);
}
table.grid td input[type="checkbox"]:focus {
    background: none;
    box-shadow: none;
}
table.grid td.is-computed {
    padding: 7px 10px;
    text-align: right;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    background: var(--raised);
}
table.grid tr.is-dirty td { background: var(--clay-soft); }
table.grid tr.is-saved td { background: var(--tahsil-soft); }
table.grid tr.is-error td { background: var(--borc-soft); }
table.grid tr.is-locked td { color: var(--text-3); background: var(--raised); }

/* Bilgi ipucu (UI.help) */
.help-dot {
    display: inline-flex;
    vertical-align: -2px;
    margin-left: 4px;
    color: var(--text-3);
    cursor: help;
    border-radius: 50%;
}
.help-dot:hover, .help-dot:focus { color: var(--ink-600); outline: 0; }
.help-dot:focus-visible { box-shadow: 0 0 0 2px var(--ink-600); }
.help-tip {
    position: fixed;
    z-index: 9999;
    max-width: 280px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--text);
    color: var(--surface);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

/* ---------------------------------------------------------------- */
/* 13. Duyarlılık                                                   */
/* ---------------------------------------------------------------- */

@media (max-width: 1023px) {
    .rail {
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        box-shadow: var(--shadow-pop);
    }
    .rail.is-open { transform: none; }
    .topbar, .strip { left: 0; }
    .content { margin-left: 0; }
}

@media (max-width: 640px) {
    .content { padding-left: 12px; padding-right: 12px; }
    .strip { padding: 0 12px; }
    .strip-item { padding-right: 14px; margin-right: 14px; }
    .modal { max-width: 100%; }
    .page-tools { width: 100%; }
}

/* ---------------------------------------------------------------- */
/* 14. Yazdırma                                                     */
/* ---------------------------------------------------------------- */

@media print {
    .rail, .topbar, .strip, .page-tools, .toasts, .btn, .btn-icon, .no-print {
        display: none !important;
    }
    .content { margin: 0; padding: 0; }
    .card { border: 0; box-shadow: none; }
    body { background: #fff; font-size: 11pt; }
    table.ledger thead th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; }
    a[href]::after { content: ''; }
}