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

:root {
    --hd-paper: #F6F7F4;
    --hd-paper-line: #E4E7E1;
    --hd-ink: #1F2A24;
    --hd-ink-soft: #5B6660;
    --hd-accent: #2F6F5E;
    --hd-accent-dark: #225446;
    --hd-gelir: #2F8F5B;
    --hd-gider: #B4453A;
    --hd-card: #FFFFFF;
    --hd-radius: 10px;
}

#hd-app, .hd-auth-wrapper {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--hd-ink);
    background: var(--hd-paper);
}

.hd-mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---------- GİRİŞ / KAYIT ---------- */
.hd-auth-wrapper {
    max-width: 420px;
    margin: 40px auto;
    background: var(--hd-card);
    border: 1px solid var(--hd-paper-line);
    border-left: 4px solid var(--hd-accent);
    border-radius: var(--hd-radius);
    padding: 32px;
}
.hd-auth-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.hd-tab-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    background: none; border: none; cursor: pointer;
    padding: 8px 4px; color: var(--hd-ink-soft);
    border-bottom: 2px solid transparent;
}
.hd-tab-btn.hd-tab-active { color: var(--hd-accent); border-bottom-color: var(--hd-accent); }
.hd-tab-content { display: none; }
.hd-tab-content.hd-tab-content-active { display: block; }

.hd-form { display: flex; flex-direction: column; gap: 6px; }
.hd-form label { font-size: 13px; color: var(--hd-ink-soft); margin-top: 8px; }
.hd-form input, .hd-form select {
    padding: 10px 12px; border: 1px solid var(--hd-paper-line);
    border-radius: 6px; font-size: 15px; background: var(--hd-paper);
}
.hd-form input:focus, .hd-form select:focus { outline: 2px solid var(--hd-accent); outline-offset: 1px; }

.hd-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600; border-radius: 6px; padding: 10px 18px;
    border: none; cursor: pointer; font-size: 14px;
}
.hd-btn-primary { background: var(--hd-accent); color: #fff; margin-top: 14px; }
.hd-btn-primary:hover { background: var(--hd-accent-dark); }
.hd-btn-secondary { background: #EAF0EC; color: var(--hd-accent-dark); }
.hd-btn-ghost { background: transparent; color: var(--hd-ink-soft); border: 1px solid var(--hd-paper-line); }
.hd-full { width: 100%; margin-top: 8px; }

.hd-alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.hd-alert-error { background: #FBEAE8; color: var(--hd-gider); border: 1px solid #F0C6C1; }

/* ---------- PANEL LAYOUT ---------- */
.hd-topbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 14px 20px; background: var(--hd-card); border-bottom: 1px solid var(--hd-paper-line);
}
.hd-topbar .hd-logo-link { grid-column: 2; justify-self: center; }
.hd-topbar .hd-topbar-user { grid-column: 1; justify-self: start; }
.hd-topbar .hd-topbar-user { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-topbar form { grid-column: 3; justify-self: end; margin: 0; }
.hd-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 20px; }
@media (max-width: 780px) { .hd-layout { grid-template-columns: 1fr; } }

.hd-sidebar {
    background: var(--hd-card); border: 1px solid var(--hd-paper-line);
    border-left: 4px solid var(--hd-accent);
    border-radius: var(--hd-radius); padding: 18px;
}
.hd-sidebar h3 { font-family: 'Space Grotesk', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--hd-ink-soft); margin: 0 0 10px; }
.hd-mt { margin-top: 20px; }

.hd-account-list { list-style: none; margin: 0; padding: 0; }
.hd-account-list li {
    display: flex; justify-content: space-between; padding: 9px 0;
    border-bottom: 1px dashed var(--hd-paper-line); font-size: 14px;
}
.hd-account-list li:last-child { border-bottom: none; }
.hd-account-balance-neg { color: var(--hd-gider); }
.hd-account-balance-pos { color: var(--hd-gelir); }

.hd-total-balance {
    font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600; color: var(--hd-accent-dark);
    text-align: center; background: var(--hd-paper); border: 1px solid var(--hd-paper-line);
    border-radius: 8px; padding: 12px 8px; width: 100%;
}

.hd-inline-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hd-inline-form input, .hd-inline-form select {
    padding: 8px 10px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 14px;
}

/* ---------- MAIN ---------- */
.hd-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--hd-paper-line); flex-wrap: wrap; }
.hd-tabs .hd-tab-btn {
    padding: 8px 12px; width: 96px; flex: 0 0 auto; white-space: normal; text-align: center;
    line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hd-tabs .hd-tab-icon { margin-right: 0; }

.hd-tab-panel { display: none; }
.hd-tab-panel.hd-tab-panel-active { display: block; }

.hd-card {
    background: var(--hd-card); border: 1px solid var(--hd-paper-line);
    border-radius: var(--hd-radius); padding: 20px; margin-bottom: 20px;
}
.hd-card h3 { font-family: 'Space Grotesk', sans-serif; margin-top: 0; font-size: 16px; }

.hd-form-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; margin-bottom: 14px;
}
.hd-form-grid input, .hd-form-grid select {
    padding: 9px 10px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 14px;
}

.hd-ocr-box { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hd-muted { color: var(--hd-ink-soft); font-size: 13px; }

.hd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hd-table th {
    text-align: left; font-family: 'Space Grotesk', sans-serif; font-size: 12px;
    text-transform: uppercase; letter-spacing: .03em; color: var(--hd-ink-soft);
    border-bottom: 2px solid var(--hd-ink); padding: 8px 6px;
}
.hd-table td { padding: 9px 6px; border-bottom: 1px dashed var(--hd-paper-line); }
.hd-row-gelir { color: var(--hd-gelir); font-family: 'IBM Plex Mono', monospace; }
.hd-row-gider { color: var(--hd-gider); font-family: 'IBM Plex Mono', monospace; }

.hd-link-delete { color: var(--hd-gider); cursor: pointer; font-size: 13px; text-decoration: underline; background:none; border:none; }

/* ---------- MARKA (Defterio logosu) ---------- */
.hd-brand { display: flex; align-items: center; gap: 10px; }
.hd-brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; color: var(--hd-accent-dark); letter-spacing: -0.01em; }
.hd-auth-wrapper .hd-brand { margin-bottom: 22px; }

/* ---------- KART BAŞLIK SATIRI (export butonlarıyla) ---------- */
.hd-card-header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.hd-card-header-row h3 { margin: 0; }
.hd-export-buttons { display: flex; gap: 8px; }

/* ---------- TAKVİM ---------- */
.hd-calendar-nav { display: flex; justify-content: space-between; margin-bottom: 12px; }
.hd-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hd-cal-daylabel { font-family: 'Space Grotesk', sans-serif; font-size: 11px; text-transform: uppercase; color: var(--hd-ink-soft); text-align: center; padding-bottom: 4px; }
.hd-cal-cell { min-height: 60px; border: 1px solid var(--hd-paper-line); border-radius: 6px; padding: 6px; font-size: 12px; background: var(--hd-paper); cursor: pointer; transition: border-color .12s, background .12s; }
.hd-cal-cell.hd-cal-empty { background: transparent; border: none; cursor: default; }
.hd-cal-cell:not(.hd-cal-empty):hover { border-color: var(--hd-accent); }
.hd-cal-cell.hd-cal-today { border-color: var(--hd-accent); background: #EAF3EF; }
.hd-cal-cell.hd-cal-selected { background: var(--hd-accent); border-color: var(--hd-accent); }
.hd-cal-cell.hd-cal-selected .hd-cal-daynum { color: #fff; }
.hd-todo-filter-info { background: #EAF3EF; border: 1px solid var(--hd-accent); border-radius: 6px; padding: 8px 12px; font-size: 13px; margin: 10px 0; }
.hd-todo-filter-info a { color: var(--hd-accent-dark); text-decoration: underline; cursor: pointer; }
.hd-cal-daynum { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.hd-cal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hd-gider); margin-top: 4px; }

/* ---------- YAPILACAKLAR ---------- */
.hd-todo-list { list-style: none; margin: 16px 0 0; padding: 0; }
.hd-todo-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--hd-paper-line); font-size: 14px; }
.hd-todo-list li.hd-todo-done .hd-todo-text { text-decoration: line-through; color: var(--hd-ink-soft); }
.hd-todo-date { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--hd-ink-soft); margin-left: auto; }
.hd-todo-text { flex: 1; }
.hd-receipt-link { text-decoration: none; font-size: 16px; cursor: pointer; }

/* ---------- DEFTER SEÇİCİ ---------- */
.hd-full-select { width: 100%; padding: 8px 10px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 14px; margin-bottom: 8px; }
#hd-new-book-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
#hd-new-book-row input { padding: 8px 10px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 13px; }

/* ---------- HIZLI EKLE ---------- */
.hd-quick-add-row { display: flex; gap: 8px; }
.hd-quick-add-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 14px; }

/* ---------- FİLTRELER ---------- */
.hd-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 6px; }
.hd-filter-grid input, .hd-filter-grid select { padding: 8px 9px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 13px; }

/* ---------- FİNANSAL KONUM: NET VARLIK + KARŞILAŞTIRMA ÇUBUKLARI ---------- */
.hd-networth-display { text-align: center; margin: 8px 0 24px; }
.hd-networth-label { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--hd-ink-soft); }
.hd-networth-value { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 34px; font-weight: 600; color: var(--hd-accent-dark); margin-top: 4px; }

.hd-compare-block { margin-bottom: 22px; }
.hd-compare-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hd-compare-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; }
.hd-compare-pct { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 14px; padding: 2px 9px; border-radius: 10px; }
.hd-compare-pct.hd-pct-good { background: #EAF3EF; color: var(--hd-gelir); }
.hd-compare-pct.hd-pct-bad { background: #FBEAE8; color: var(--hd-gider); }

.hd-compare-track { position: relative; height: 16px; background: var(--hd-paper); border: 1px solid var(--hd-paper-line); border-radius: 8px; overflow: hidden; }
.hd-compare-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 8px 0 0 8px; transition: width .4s ease; }
.hd-compare-fill-tr { background: linear-gradient(90deg, #D9A441, #2F6F5E); }
.hd-compare-fill-world { background: linear-gradient(90deg, #B4453A, #2F8F5B); }
.hd-compare-marker { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--hd-ink); opacity: .55; }
.hd-compare-marker::after {
    content: "Ort."; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: var(--hd-ink-soft); white-space: nowrap;
}
.hd-compare-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--hd-ink-soft); margin-top: 6px; font-family: 'IBM Plex Mono', monospace; }
.hd-compare-source { margin-top: 4px; font-size: 12px; }

/* ---------- DÜZENLE BUTONU, HAZIR PERİYOT, BİLDİRİM BANNER, ŞİFRE GÖSTER/GİZLE ---------- */
.hd-link-edit { color: var(--hd-accent); cursor: pointer; font-size: 13px; text-decoration: underline; background:none; border:none; margin-right: 8px; }
.hd-preset-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.hd-period-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.hd-period-select { padding: 8px 10px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 13px; background: var(--hd-paper); }
.hd-share-banner { background: #FFF6DC; border: 1px solid #E8CE7A; color: #6B5416; padding: 10px 16px; border-radius: 8px; margin: 12px 20px 0; font-size: 14px; }
.hd-share-banner .hd-btn { margin-left: 10px; }
.hd-show-pass { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; }
.hd-show-pass input[type="checkbox"] { width: auto; }

@media (max-width: 700px) {
    .hd-card { overflow-x: auto; }
    .hd-table { min-width: 640px; }
}

/* ---------- TIKLANABİLİR LOGO & KULLANICI AÇILIR MENÜSÜ ---------- */
.hd-logo-link { text-decoration: none; cursor: pointer; }
.hd-user-menu { position: relative; }
.hd-user-menu-toggle {
    background: none; border: 1px solid transparent; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--hd-ink);
    padding: 8px 12px; border-radius: 6px; display: flex; align-items: center; gap: 6px;
}
.hd-user-menu-toggle:hover { background: var(--hd-paper); border-color: var(--hd-paper-line); }
.hd-caret { font-size: 11px; color: var(--hd-ink-soft); transition: transform .15s; }
.hd-user-menu.hd-open .hd-caret { transform: rotate(180deg); }
.hd-user-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    background: var(--hd-card); border: 1px solid var(--hd-paper-line); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(31,42,36,.12); min-width: 220px; padding: 8px 0;
}
.hd-user-menu.hd-open .hd-user-dropdown { display: block; }
.hd-user-dropdown a, .hd-user-dropdown .hd-dropdown-logout {
    display: flex; align-items: center; gap: 9px; padding: 9px 16px; color: var(--hd-ink); text-decoration: none;
    font-size: 14px; background: none; border: none; width: 100%; text-align: left; cursor: pointer;
}
.hd-user-dropdown a svg, .hd-dropdown-logout svg { flex-shrink: 0; color: var(--hd-ink-soft); }
.hd-user-dropdown a:hover, .hd-user-dropdown .hd-dropdown-logout:hover { background: var(--hd-paper); }
.hd-user-dropdown hr { border: none; border-top: 1px solid var(--hd-paper-line); margin: 6px 0; }
.hd-dropdown-logout-form { margin: 0; }
.hd-dropdown-logout { color: var(--hd-gider); font-family: inherit; }
.hd-dropdown-logout svg { color: var(--hd-gider); }

/* ---------- SEKME İKONLARI ---------- */
.hd-tab-icon { margin-right: 4px; display: inline-flex; vertical-align: middle; }
.hd-tab-icon svg { display: block; }

/* ---------- KÜÇÜLTÜLMÜŞ PASTA GRAFİĞİ ---------- */
.hd-chart-small { max-width: 320px; margin: 0 auto; }

/* ---------- FİNANSAL KONUM ARKA PLAN DEKORU ---------- */
.hd-finansal-card {
    background:
        radial-gradient(circle at 15% 15%, rgba(47,111,94,.08), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(217,164,65,.10), transparent 45%),
        var(--hd-card);
    position: relative; overflow: hidden;
}
.hd-finansal-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(31,42,36,.05) 1px, transparent 1px);
    background-size: 16px 16px; opacity: .5;
}
.hd-finansal-card > * { position: relative; z-index: 1; }

/* ---------- SADE FOOTER (tek satır) ---------- */
.hd-site-footer-slim {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 14px 20px; margin-top: 20px; border-top: 1px solid var(--hd-paper-line);
    font-size: 12px; color: var(--hd-ink-soft);
}
.hd-footer-slim-links a { color: var(--hd-ink-soft); text-decoration: none; }
.hd-footer-slim-links a:hover { color: var(--hd-accent); text-decoration: underline; }
.hd-legal-modal-body { max-height: 55vh; overflow-y: auto; font-size: 13.5px; line-height: 1.6; color: var(--hd-ink); white-space: pre-wrap; margin: 8px 0 4px; }

/* ---------- ŞİFREMİ UNUTTUM LİNKİ ---------- */
.hd-forgot-link { text-align: center; margin-top: 14px; font-size: 13px; }
.hd-forgot-link a { color: var(--hd-accent); text-decoration: none; }
.hd-forgot-link a:hover { text-decoration: underline; }

/* ---------- YARDIM BUTONU (FAB) VE MODAL ---------- */
.hd-help-fab {
    position: fixed; bottom: 24px; right: 24px; height: 46px; padding: 0 20px 0 16px; border-radius: 23px;
    background: var(--hd-accent); color: #fff; border: none; font-size: 14px; font-weight: 600;
    font-family: 'Space Grotesk', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 8px;
    box-shadow: 0 6px 18px rgba(31,42,36,.22); z-index: 200;
}
.hd-help-fab:hover { background: var(--hd-accent-dark); }
.hd-help-modal-overlay {
    position: fixed; inset: 0; background: rgba(22,33,28,.45); z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.hd-help-modal {
    background: var(--hd-card); border-radius: 12px; padding: 24px; max-width: 420px; width: 100%;
    box-shadow: 0 12px 32px rgba(0,0,0,.2);
}
.hd-help-modal h3 { margin-top: 0; }
.hd-help-modal textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--hd-paper-line); border-radius: 8px;
    font-family: inherit; font-size: 14px; resize: vertical; margin-top: 10px;
}
.hd-help-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.hd-help-badge {
    background: #B4453A; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50% !important;
    width: 16px; height: 16px; min-width: 16px; padding: 0 !important; display: flex !important;
    align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; box-sizing: border-box;
}
.hd-help-badge-inline { background: #B4453A; color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 6px; margin-left: 4px; }

.hd-help-modal-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--hd-paper-line); }
.hd-help-modal-tab {
    background: none; border: none; cursor: pointer; padding: 8px 4px; margin-right: 16px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: var(--hd-ink-soft);
    border-bottom: 2px solid transparent;
}
.hd-help-modal-tab-active { color: var(--hd-accent); border-bottom-color: var(--hd-accent); }
.hd-help-view { display: none; }
.hd-help-view.hd-help-view-active { display: block; }

.hd-help-history { max-height: 360px; overflow-y: auto; }
.hd-help-history-item { border: 1px solid var(--hd-paper-line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.hd-help-history-item.hd-help-history-open { border-left: 3px solid #D9A441; }
.hd-help-history-item.hd-help-history-answered { border-left: 3px solid var(--hd-gelir); }
.hd-help-history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.hd-help-history-date { font-size: 11px; color: var(--hd-ink-soft); }
.hd-help-history-status { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9px; white-space: nowrap; }
.hd-help-history-status-open { background: #FFF6DC; color: #6B5416; }
.hd-help-history-status-answered { background: #EAF3EF; color: #225446; }
.hd-help-history-message { font-size: 13px; margin: 0 0 6px; }
.hd-help-history-reply { background: var(--hd-paper); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.hd-help-history-reply strong { display: block; font-size: 11px; color: var(--hd-ink-soft); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .02em; }

/* ================================================================
   MOBİL UYUM (RESPONSIVE) — ekran genişliğine göre otomatik uyarlanır.
   ================================================================ */
@media (max-width: 780px) {
    .hd-layout { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
    .hd-sidebar { order: 2; }
    .hd-main { order: 1; }
}

@media (max-width: 640px) {
    .hd-multiselect-panel { left: 0; right: 0; min-width: 0; max-width: none; }
    /* Üst bar: logo + kullanıcı menüsü alt alta değil, sıkışık ama taşmadan */
    .hd-topbar { padding: 10px 12px; grid-template-columns: 1fr; row-gap: 8px; }
    .hd-topbar .hd-logo-link { grid-column: 1; order: 1; }
    .hd-topbar .hd-topbar-user { grid-column: 1; order: 2; justify-self: center; }
    .hd-topbar form { grid-column: 1; order: 3; justify-self: center; }
    /* Sekme çubuğu: mobilde yatay kaydırma */
    .hd-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .hd-tabs::-webkit-scrollbar { height: 4px; }
    .hd-tabs .hd-tab-btn { flex-shrink: 0; font-size: 12px; padding: 8px 8px; width: 78px; }

    .hd-card { padding: 14px; }
    .hd-form-grid, .hd-filter-grid { grid-template-columns: 1fr; }
    .hd-preset-row { justify-content: stretch; }
    .hd-preset-row .hd-btn { flex: 1; }
    .hd-period-row { flex-direction: column; align-items: stretch; }
    .hd-period-select, .hd-period-row .hd-btn { width: 100%; }

    /* Gösterge (ibre) canvas'ı ekrana sığdır */
    #hd-gauge-canvas { max-width: 100%; height: auto; }

    /* Yardım butonu: metni gizle, sadece ikon kalsın (yer kaplamasın) */
    .hd-help-fab { padding: 0; width: 46px; height: 46px; border-radius: 50%; justify-content: center; bottom: 16px; right: 16px; }
    .hd-help-fab span:not(.hd-help-badge) { display: none; }
    .hd-help-badge { position: absolute; top: -2px; right: -2px; }
    .hd-help-fab { position: fixed; }

    .hd-help-modal { padding: 18px; max-height: 85vh; overflow-y: auto; }

    .hd-site-footer-slim { flex-direction: column; text-align: center; padding: 12px; }

    /* Takvim: hücreleri küçült, taşmayı önle */
    .hd-cal-cell { min-height: 44px; font-size: 11px; padding: 4px; }
}

@media (max-width: 400px) {
    .hd-account-list li { flex-wrap: wrap; }
    .hd-total-balance { font-size: 21px; }
}

/* ---------- ÇOKLU SEÇİM (CHECKBOX) FİLTRE BİLEŞENİ ---------- */
.hd-multiselect { position: relative; }
.hd-multiselect-toggle {
    width: 100%; text-align: left; padding: 8px 9px; border: 1px solid var(--hd-paper-line);
    border-radius: 6px; background: var(--hd-card); font-size: 13px; cursor: pointer; color: var(--hd-ink);
}
.hd-multiselect-toggle::after { content: "▾"; float: right; color: var(--hd-ink-soft); }
.hd-multiselect-panel {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 220px; max-width: 280px;
    background: var(--hd-card); border: 1px solid var(--hd-paper-line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31,42,36,.14); padding: 8px 0;
}
.hd-multiselect.hd-ms-open .hd-multiselect-panel { display: block; }
.hd-multiselect-actions { display: flex; justify-content: space-between; padding: 4px 12px 8px; border-bottom: 1px solid var(--hd-paper-line); margin-bottom: 4px; }
.hd-multiselect-actions a { font-size: 12px; color: var(--hd-accent); text-decoration: none; cursor: pointer; }
.hd-multiselect-actions a:hover { text-decoration: underline; }
.hd-multiselect-list { max-height: 220px; overflow-y: auto; padding: 0 4px; }
.hd-multiselect-list label {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; cursor: pointer; border-radius: 5px;
}
.hd-multiselect-list label:hover { background: var(--hd-paper); }
.hd-multiselect-list input[type="checkbox"] { width: auto; margin: 0; }
.hd-multiselect-empty { padding: 8px 12px; font-size: 12px; color: var(--hd-ink-soft); }

/* ---------- GELİR/GİDER GRAFİĞİ GÖRÜNÜM SEÇİCİ ---------- */
#hd-monthly-chart-mode { padding: 6px 9px; border: 1px solid var(--hd-paper-line); border-radius: 6px; font-size: 13px; background: var(--hd-paper); }

/* ---------- HESAPLAR ARASI TRANSFER ACCORDION (3 nokta / kebab menü) ---------- */
.hd-accordion { border: 1px solid var(--hd-paper-line); border-radius: 8px; overflow: hidden; }
.hd-accordion-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; background: var(--hd-paper);
}
.hd-accordion-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; color: var(--hd-ink); }
.hd-accordion-kebab {
    background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
    color: var(--hd-ink-soft); padding: 2px 8px; border-radius: 5px;
}
.hd-accordion-kebab:hover { background: var(--hd-card); color: var(--hd-accent); }
.hd-accordion-body { display: none; padding: 12px; }
.hd-accordion.hd-open .hd-accordion-body { display: block; }
.hd-mini-label { display: block; font-size: 11px; color: var(--hd-ink-soft); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 3px; }
.hd-mini-label:first-child { margin-top: 0; }

/* ---------- GENEL TAŞMA / HİZALAMA DÜZELTMELERİ ---------- */
*, *::before, *::after { box-sizing: border-box; }
.hd-app, .hd-app input, .hd-app select, .hd-app textarea, .hd-app button { max-width: 100%; }
.hd-card, .hd-sidebar { overflow-wrap: break-word; word-break: break-word; }
.hd-form-grid input, .hd-form-grid select,
.hd-filter-grid input, .hd-filter-grid select,
.hd-inline-form input, .hd-inline-form select,
.hd-accordion-body input, .hd-accordion-body select { width: 100%; }
.hd-multiselect-toggle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-table td, .hd-table th { overflow-wrap: break-word; word-break: break-word; }
.hd-account-list li { overflow-wrap: break-word; }

/* ---------- HESAP LİSTESİ: TİK KUTUCUKLU SEÇİLEBİLİR SATIRLAR ---------- */
.hd-acc-check-label { display: flex; align-items: center; gap: 7px; cursor: pointer; flex: 1; min-width: 0; }
.hd-acc-check-label input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
.hd-acc-check-label span.hd-acc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-acc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.hd-acc-mini-actions { display: flex; gap: 8px; font-size: 11px; }
.hd-acc-mini-actions .hd-link-edit, .hd-acc-mini-actions .hd-link-delete { font-size: 11px; }
#hd-varliklar-summary-li { border-top: 1px dashed var(--hd-paper-line); margin-top: 2px; padding-top: 9px; font-weight: 600; }

/* ---------- FİLTRE KUTULARI: TAŞMA DÜZELTMESİ + HOVER RENGİ (TEMA KIRMIZISI YERİNE YEŞİL) ---------- */
/* WordPress temasının genel buton/link renklerinin (bazı temalarda kırmızı/pembe) üzerimize
   sızmasını önlemek için hover/focus durumlarını kendi yeşil marka rengimizle sabitliyoruz. */
.hd-filter-grid, .hd-period-row { min-width: 0; }
.hd-filter-grid input,
.hd-filter-grid select,
.hd-filter-grid .hd-multiselect-toggle,
.hd-period-select,
#hd-view-mode,
#hd-monthly-chart-mode {
    min-width: 0; box-sizing: border-box;
}
.hd-filter-grid input:hover, .hd-filter-grid input:focus,
.hd-filter-grid select:hover, .hd-filter-grid select:focus,
.hd-period-select:hover, .hd-period-select:focus,
#hd-view-mode:hover, #hd-view-mode:focus,
#hd-monthly-chart-mode:hover, #hd-monthly-chart-mode:focus {
    border-color: var(--hd-accent) !important;
    outline: 2px solid rgba(47,111,94,.18) !important;
    outline-offset: 0;
    color: var(--hd-ink) !important;
}
.hd-multiselect-toggle:hover, .hd-multiselect-toggle:focus {
    border-color: var(--hd-accent) !important;
    color: var(--hd-ink) !important;
    background: var(--hd-card) !important;
}
.hd-btn-secondary:hover {
    background: var(--hd-accent) !important; color: #fff !important; border-color: var(--hd-accent) !important;
}
.hd-btn-ghost:hover {
    background: var(--hd-paper) !important; color: var(--hd-accent-dark) !important; border-color: var(--hd-accent) !important;
}

/* ---------- RAPORLAR: KPI ÖZET KARTLARI VE YILLARA GÖRE KARŞILAŞTIRMA ---------- */
.hd-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hd-kpi-card { background: var(--hd-paper); border: 1px solid var(--hd-paper-line); border-radius: 8px; padding: 14px 16px; }
.hd-kpi-label { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--hd-ink-soft); margin-bottom: 4px; }
.hd-kpi-value { font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 600; }
.hd-kpi-value.hd-kpi-gelir { color: var(--hd-gelir); }
.hd-kpi-value.hd-kpi-gider { color: var(--hd-gider); }
.hd-kpi-value.hd-kpi-net-pos { color: var(--hd-gelir); }
.hd-kpi-value.hd-kpi-net-neg { color: var(--hd-gider); }
.hd-table-scroll { overflow-x: auto; }
#hd-year-compare-table { min-width: 480px; }
#hd-year-compare-thead th:first-child, #hd-year-compare-tbody td:first-child { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }

/* ================================================================
   KÖKTEN RENK DÜZELTMESİ: WordPress temasının varsayılan buton/link
   rengi (bazı temalarda kırmızı/pembe) her durumda (sadece hover değil,
   normal haldeyken de) üzerimize sızıyor. Aşağıdaki kurallar bunu
   !important ile kalıcı olarak eziyor.
   ================================================================ */
#hd-app button,
#hd-app .hd-btn,
#hd-app .hd-multiselect-toggle,
#hd-app .hd-accordion-kebab,
#hd-app .hd-help-fab,
#hd-app select,
#hd-app input,
.hd-auth-wrapper button,
.hd-auth-wrapper .hd-btn {
    border-color: var(--hd-paper-line) !important;
}
#hd-app .hd-btn-primary, .hd-auth-wrapper .hd-btn-primary { background: var(--hd-accent) !important; border-color: var(--hd-accent) !important; color: #fff !important; }
#hd-app .hd-btn-primary:hover, .hd-auth-wrapper .hd-btn-primary:hover { background: var(--hd-accent-dark) !important; border-color: var(--hd-accent-dark) !important; }
#hd-app .hd-btn-secondary { background: #EAF0EC !important; border-color: #EAF0EC !important; color: var(--hd-accent-dark) !important; }
#hd-app .hd-btn-secondary:hover { background: var(--hd-accent) !important; border-color: var(--hd-accent) !important; color: #fff !important; }
#hd-app .hd-btn-ghost { background: transparent !important; border-color: var(--hd-paper-line) !important; color: var(--hd-ink-soft) !important; }
#hd-app .hd-btn-ghost:hover { background: var(--hd-paper) !important; border-color: var(--hd-accent) !important; color: var(--hd-accent-dark) !important; }
#hd-app .hd-multiselect-toggle { border-color: var(--hd-paper-line) !important; background: var(--hd-card) !important; color: var(--hd-ink) !important; }
#hd-app .hd-multiselect-toggle:hover { border-color: var(--hd-accent) !important; }
#hd-app .hd-accordion-kebab { border: none !important; color: var(--hd-ink-soft) !important; }
#hd-app .hd-accordion-kebab:hover { background: var(--hd-card) !important; color: var(--hd-accent) !important; }
#hd-app .hd-help-fab { background: var(--hd-accent) !important; border: none !important; color: #fff !important; }
#hd-app .hd-help-fab:hover { background: var(--hd-accent-dark) !important; }
#hd-app .hd-link-delete { color: var(--hd-gider) !important; }
#hd-app .hd-link-edit { color: var(--hd-accent) !important; }
#hd-app select:hover, #hd-app select:focus,
#hd-app input:hover, #hd-app input:focus {
    border-color: var(--hd-accent) !important; outline: none !important;
}
#hd-app .hd-tab-btn.hd-tab-active { color: var(--hd-accent) !important; border-bottom-color: var(--hd-accent) !important; }

/* ================================================================
   MOBİL SIKILAŞTIRMA (kapsamlı) — dar ekranda daha derli toplu görünüm
   ================================================================ */
@media (max-width: 640px) {
    #hd-app { font-size: 14px; }
    .hd-topbar { padding: 10px !important; }
    .hd-topbar .hd-topbar-user { font-size: 13px; max-width: 160px; }
    .hd-topbar .hd-btn { padding: 6px 12px !important; font-size: 12px !important; }

    .hd-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 0 -4px 12px; padding: 0 4px 6px; }
    .hd-tabs .hd-tab-btn { flex: 0 0 auto !important; width: 72px !important; font-size: 11px !important; padding: 7px 4px !important; }
    .hd-tabs .hd-tab-icon svg { width: 15px; height: 15px; }

    .hd-layout { padding: 8px !important; gap: 10px !important; }
    .hd-card { padding: 12px !important; margin-bottom: 12px !important; }
    .hd-card h3 { font-size: 14px; }
    .hd-sidebar { padding: 14px !important; }

    .hd-export-buttons { flex-direction: column; width: 100%; }
    .hd-export-buttons .hd-btn { width: 100%; text-align: center; }
    .hd-card-header-row { flex-direction: column; align-items: stretch; gap: 8px; }

    .hd-form-grid, .hd-filter-grid { gap: 8px; }
    .hd-btn { font-size: 13px; padding: 9px 14px; }

    .hd-help-fab span:not(.hd-help-badge) { display: none !important; }
}

/* ================================================================================
   YENİ YERLEŞİM: SOL MENÜ NAVİGASYONU (Spike Admin tarzı — kullanıcı isteği üzerine)
   Ana navigasyon üst sekmelerden sol menüye taşındı. Defterio'nun kendi yeşil/altın
   marka kimliği korunarak, kart/rozet/gölge/yuvarlak köşe dili modernize edildi.
   ================================================================================ */

#hd-app { background: #F4F6FA; min-height: 100vh; }

.hd-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* ---------- SOL MENÜ (NAV SIDEBAR) ---------- */
.hd-nav-sidebar {
    width: 250px; flex-shrink: 0; background: #fff; border-right: 1px solid #ECEEF2;
    display: flex; flex-direction: column; padding: 18px 14px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    transition: transform .2s ease; z-index: 100;
}
.hd-nav-logo { display: flex; padding: 6px 8px 18px; }
.hd-nav-section-label {
    font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--hd-ink-soft);
    padding: 0 10px; margin-bottom: 6px;
}
.hd-nav-sidebar .hd-tabs {
    display: flex; flex-direction: column; gap: 2px; border-bottom: none;
    margin-bottom: 0; flex: 1;
}
.hd-nav-sidebar .hd-tab-btn {
    width: 100%; flex-direction: row !important; align-items: center; justify-content: flex-start !important;
    gap: 11px; padding: 10px 12px !important; border-radius: 8px; text-align: left;
    font-size: 14px !important; font-weight: 500; color: var(--hd-ink-soft);
    background: transparent; border-bottom: none !important;
}
.hd-nav-sidebar .hd-tab-icon { margin: 0; }
.hd-nav-sidebar .hd-tab-icon svg { width: 18px; height: 18px; }
.hd-nav-sidebar .hd-tab-btn:hover { background: var(--hd-paper); color: var(--hd-ink); }
#hd-app .hd-nav-sidebar .hd-tab-btn.hd-tab-active {
    background: var(--hd-accent-soft, #EAF3EF) !important; color: var(--hd-accent-dark) !important;
    font-weight: 600; border-bottom: none !important;
}
.hd-nav-sidebar .hd-tab-btn.hd-tab-active .hd-tab-icon svg { color: var(--hd-accent-dark); }

.hd-nav-user-card {
    display: flex; align-items: center; gap: 10px; padding: 12px 10px; margin-top: 12px;
    border-top: 1px solid #ECEEF2; padding-top: 16px;
}
.hd-avatar-circle {
    width: 38px; height: 38px; border-radius: 50%; background: var(--hd-accent);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.hd-nav-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hd-nav-user-info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-nav-user-info small { font-size: 11px; color: var(--hd-ink-soft); }
.hd-nav-logout-form { margin: 0; }
#hd-app .hd-nav-logout-btn {
    background: none !important; border: none !important; color: var(--hd-ink-soft) !important;
    cursor: pointer; padding: 6px; border-radius: 6px; display: flex;
}
#hd-app .hd-nav-logout-btn:hover { background: #FBEAE8 !important; color: var(--hd-gider) !important; }

/* ---------- ÜST BAR (TOPBAR) ---------- */
.hd-main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hd-topbar-new {
    display: flex; align-items: center; gap: 16px; background: #fff;
    padding: 12px 24px; border-bottom: 1px solid #ECEEF2; position: sticky; top: 0; z-index: 40;
}
.hd-nav-toggle {
    display: none; background: none; border: none; font-size: 20px; cursor: pointer;
    color: var(--hd-ink); padding: 4px 8px;
}
.hd-topbar-book { display: flex; align-items: center; gap: 8px; position: relative; }
.hd-book-select-topbar {
    padding: 8px 12px; border: 1px solid #E4E7E1; border-radius: 8px; font-size: 13px;
    background: var(--hd-paper); font-family: 'Space Grotesk', sans-serif; font-weight: 600;
}
#hd-app .hd-book-add-toggle {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hd-paper-line) !important;
    background: #fff !important; color: var(--hd-accent) !important; line-height: 1;
    cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0;
}
#hd-app .hd-book-add-toggle:hover { background: var(--hd-accent) !important; color: #fff !important; border-color: var(--hd-accent) !important; }
#hd-app .hd-book-delete-toggle {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hd-paper-line) !important;
    background: #fff !important; color: var(--hd-ink-soft) !important; line-height: 1;
    cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0;
}
#hd-app .hd-book-delete-toggle:hover { background: var(--hd-gider) !important; color: #fff !important; border-color: var(--hd-gider) !important; }
.hd-new-book-popover {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: #fff;
    border: 1px solid var(--hd-paper-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(17,24,39,.12);
    padding: 14px; min-width: 240px;
}
.hd-new-book-popover input { width: 100%; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--hd-paper-line); border-radius: 6px; }
.hd-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hd-topbar-greeting { font-size: 14px; color: var(--hd-ink); white-space: nowrap; }

/* ---------- İÇERİK ALANI ---------- */
.hd-content { padding: 22px 24px; flex: 1; }

/* ---------- KART TASARIMI (yumuşak gölge, yuvarlak köşe — Spike hissi) ---------- */
#hd-app .hd-card {
    border: none; border-radius: 14px; box-shadow: 0 1px 3px rgba(17,24,39,.05), 0 1px 12px rgba(17,24,39,.04);
    padding: 22px;
}
#hd-app .hd-nav-sidebar { box-shadow: 1px 0 0 #ECEEF2; }

/* ---------- HESAPLARIM + TOPLAM BAKİYE (İşlemler sekmesinin en üstü) ---------- */
.hd-accounts-overview-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.hd-accounts-overview-grid > div:first-child { border-right: 1px dashed var(--hd-paper-line); padding-right: 24px; }
.hd-accounts-overview h3 { margin-top: 0; }

/* ---------- MOBİL: SOL MENÜ AÇILIR/KAPANIR ---------- */
#hd-nav-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(17,24,39,.35); z-index: 90;
}
@media (max-width: 900px) {
    .hd-nav-sidebar {
        position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,.15);
    }
    .hd-nav-sidebar.hd-nav-open { transform: translateX(0); }
    .hd-nav-toggle { display: block; }
    #hd-nav-backdrop.hd-nav-open { display: block; }
    .hd-accounts-overview-grid { grid-template-columns: 1fr; }
    .hd-accounts-overview-grid > div:first-child { border-right: none; padding-right: 0; border-bottom: 1px dashed var(--hd-paper-line); padding-bottom: 18px; margin-bottom: 4px; }
}
@media (max-width: 640px) {
    .hd-topbar-new { padding: 10px 12px; flex-wrap: wrap; }
    .hd-topbar-greeting strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
    .hd-content { padding: 12px; }
    .hd-book-select-topbar { max-width: 130px; }

    /* "Son İşlemler" tablosu mobilde yatay kaymak yerine dikey kart listesine dönüşür */
    .hd-mobile-cards { min-width: 0 !important; width: 100%; }
    .hd-mobile-cards thead { display: none; }
    .hd-mobile-cards, .hd-mobile-cards tbody, .hd-mobile-cards tr, .hd-mobile-cards td { display: block; width: 100%; box-sizing: border-box; }
    .hd-mobile-cards tr {
        border: 1px solid var(--hd-paper-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--hd-card);
    }
    .hd-mobile-cards td {
        display: flex; justify-content: space-between; align-items: center; gap: 10px;
        padding: 5px 0; border: none; text-align: right; font-size: 13px;
    }
    .hd-mobile-cards td[data-label]:not([data-label=""])::before {
        content: attr(data-label); font-weight: 600; color: var(--hd-ink-soft); text-align: left; flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
    }
    .hd-mobile-cards td[data-label=""] { justify-content: flex-end; padding-top: 8px; border-top: 1px dashed var(--hd-paper-line); margin-top: 4px; }
    .hd-mobile-cards td:empty, .hd-mobile-cards td[colspan] { display: block; text-align: center; }
}

/* ---------- HESAPLAR ARASI TRANSFER: HER ZAMAN AÇIK (accordion kaldırıldı) ---------- */
.hd-transfer-open { border: 1px solid var(--hd-paper-line); border-radius: 8px; overflow: hidden; }
.hd-transfer-open-title { margin: 0; padding: 10px 12px; background: var(--hd-paper); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; }
.hd-transfer-open-body { padding: 12px; }

/* ---------- PARA BİRİMİ ROZETİ VE ETİKETİ ---------- */
#hd-app .hd-currency-badge {
    display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 20px;
    background: var(--hd-paper) !important; border: 1px solid var(--hd-paper-line) !important;
    color: var(--hd-accent-dark) !important; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 13px; text-decoration: none; cursor: pointer;
}
#hd-app .hd-currency-badge:hover { background: var(--hd-accent) !important; color: #fff !important; border-color: var(--hd-accent) !important; }
.hd-currency-tag {
    display: inline-block; font-size: 10px; font-weight: 700; background: #FFF6DC; color: #6B5416;
    border-radius: 8px; padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}

/* ---------- KULLANIM KILAVUZU (accordion) ---------- */
.hd-guide-item {
    border: 1px solid var(--hd-paper-line); border-radius: 8px; padding: 4px 14px; margin-bottom: 8px;
}
.hd-guide-item summary {
    cursor: pointer; padding: 10px 0; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px;
    color: var(--hd-ink); list-style: none;
}
.hd-guide-item summary::-webkit-details-marker { display: none; }
.hd-guide-item summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--hd-accent); transition: transform .15s; }
.hd-guide-item[open] summary::before { transform: rotate(90deg); }
.hd-guide-item p { margin: 0 0 14px 24px; font-size: 13.5px; color: var(--hd-ink-soft); line-height: 1.55; }

/* ---------- (?) İPUCU İKONU ---------- */
#hd-app .hd-help-tip {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 50%; background: var(--hd-paper) !important; border: 1px solid var(--hd-paper-line) !important;
    color: var(--hd-ink-soft) !important; font-size: 11px; font-weight: 700; cursor: help; vertical-align: middle;
    margin-left: 4px; user-select: none;
}
#hd-app .hd-help-tip:hover { background: var(--hd-accent) !important; color: #fff !important; border-color: var(--hd-accent) !important; }
.hd-help-tip-bubble {
    position: absolute; z-index: 500; max-width: 280px; background: var(--hd-ink); color: #fff;
    font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.2);
}