/* ── Yardım Merkezi — muhasebeizleme.com ─────────────────────── */
/*
 * TEK YERDEN ÖZELLEŞTIRME
 * Renk, yazı boyutu ve ölçek için sadece bu :root bloğunu düzenle.
 */
:root {
    /* — Renkler — */
    --yd-primary:    #2563eb;
    --yd-primary-h:  #1d4ed8;
    --yd-primary-lt: #eff6ff;
    --yd-primary-bd: #bfdbfe;

    --yd-bg:        #f1f5f9;
    --yd-surface:   #ffffff;
    --yd-border:    #e2e8f0;
    --yd-text:      #0f172a;
    --yd-muted:     #64748b;

    --yd-header-bg: #0b1220;
    --yd-header-fg: #dbeafe;

    /* — Boyutlar — */
    --yd-sidebar-w: 256px;
    --yd-header-h:  54px;
    --yd-footer-h:  40px;

    /* — Ölçek & Font — */
    --yd-scale:     1;
    --yd-base-font: 14px;   /* yazı boyutu buradan yönetilir */
    --yd-line-h:    1.78;
}

/* html base font = slider ile güncellenen değişken → tüm rem birimleri buna göre ölçeklenir */
html {
    height: 100%;
    font-size: var(--yd-base-font);
}

/* Ölçek uygula */
.yd-layout, .yd-header-inner {
    zoom: var(--yd-scale);
}

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

body {
    margin: 0; padding: 0;
    min-height: 100vh;
    display: flex; flex-direction: column;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    color: var(--yd-text);
    background: var(--yd-bg);
}

a { color: var(--yd-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ─────────────────────────────────────────────────── */
.yd-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--yd-header-h);
    background: var(--yd-header-bg);
    z-index: 100;
    display: flex; align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.yd-header-inner {
    width: 100%;
    padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.yd-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
}
.yd-logo img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.yd-logo-divider {
    width: 1px; height: 18px;
    background: rgba(255,255,255,.2);
}
.yd-logo-text {
    font-size: 0.93rem; font-weight: 600;
    color: rgba(255,255,255,.65);
    white-space: nowrap;
}
.yd-user {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.93rem; color: rgba(255,255,255,.65);
}
.yd-user strong { color: var(--yd-header-fg); }
.yd-user-chip {
    background: rgba(37,99,235,.35);
    color: #93c5fd;
    border: 1px solid rgba(37,99,235,.5);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.86rem; font-weight: 500;
}

/* ── Layout ──────────────────────────────────────────────────── */
.yd-layout {
    display: flex;
    flex: 1;
    margin-top: var(--yd-header-h);
    padding-bottom: var(--yd-footer-h); /* fixed footer için alan */
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.yd-sidebar {
    width: var(--yd-sidebar-w);
    flex-shrink: 0;
    background: var(--yd-surface);
    border-right: 1px solid var(--yd-border);
    padding: 20px 0;
}
.yd-sidebar-inner {
    position: sticky;
    top: calc(var(--yd-header-h) + 16px);
    max-height: calc(100vh - var(--yd-header-h) - var(--yd-footer-h) - 32px);
    overflow-y: auto;
    padding: 0 12px;
}

/* ── Menü — Katman 1 ─────────────────────────────────────────── */
.yd-nav-group { margin-bottom: 4px; }
.yd-nav-group-title {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.79rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--yd-muted);
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}
.yd-nav-group-title:hover { background: var(--yd-bg); }
.yd-nav-group-label { display: flex; align-items: center; gap: 5px; }
.yd-chevron {
    font-size: 1.07rem; line-height: 1;
    color: #cbd5e1;
    display: inline-block;
    transition: transform .2s;
}
.yd-nav-group.open > .yd-nav-group-title .yd-chevron { transform: rotate(90deg); }
.yd-nav-group-body { display: none; padding-bottom: 6px; }
.yd-nav-group.open > .yd-nav-group-body { display: block; }

.yd-nav-list { list-style: none; margin: 0; padding: 0; }
.yd-nav-list li a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    color: var(--yd-text);
    font-size: 0.96rem;
    text-decoration: none;
    transition: background .1s;
}
.yd-nav-list li a i { width: 15px; text-align: center; color: var(--yd-muted); font-size: 0.86rem; }
.yd-nav-list li a:hover { background: var(--yd-bg); text-decoration: none; }
.yd-nav-list li a.active { background: var(--yd-primary-lt); color: var(--yd-primary); font-weight: 600; }
.yd-nav-list li a.active i { color: var(--yd-primary); }

/* ── Menü — Katman 2 (direkt link) ──────────────────────────── */
.yd-nav-sub { list-style: none; margin: 0; padding: 0 0 0 10px; }
.yd-nav-sub li a {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--yd-muted);
    font-size: 0.93rem;
    text-decoration: none;
    transition: background .1s;
}
.yd-nav-sub li a:hover { background: var(--yd-bg); color: var(--yd-text); text-decoration: none; }
.yd-nav-sub li a.active { color: var(--yd-primary); font-weight: 600; background: var(--yd-primary-lt); }

/* ── Menü — Katman 2 (alt-grup başlığı, tıklanabilir) ────────── */
.yd-nav-subgroup { margin: 1px 0; }
.yd-nav-subgroup-title {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px 6px 16px; /* sol girinti ile Level 1'den ayrışır */
    font-size: 0.89rem; font-weight: 600;
    color: var(--yd-text);
    cursor: pointer;
    border-radius: 6px;
    user-select: none;
    transition: background .1s;
}
.yd-nav-subgroup-title:hover { background: var(--yd-bg); }
.yd-nav-subgroup-title i { color: var(--yd-muted); font-size: 0.82rem; flex-shrink: 0; }
.yd-nav-subgroup-title a { color: inherit; text-decoration: none; flex: 1; }
.yd-nav-subgroup-title a:hover { color: var(--yd-primary); text-decoration: none; }
.yd-chevron-sm {
    margin-left: auto;
    font-size: 1.15rem; line-height: 1;
    color: #94a3b8;
    display: inline-block;
    transition: transform .18s;
    flex-shrink: 0;
}
.yd-nav-subgroup.open > .yd-nav-subgroup-title { color: var(--yd-primary); }
.yd-nav-subgroup.open > .yd-nav-subgroup-title i { color: var(--yd-primary); }
.yd-nav-subgroup.open > .yd-nav-subgroup-title .yd-chevron-sm { transform: rotate(90deg); color: var(--yd-primary); }

/* ── Menü — Katman 3 ────────────────────────────────────────── */
.yd-nav-sub3 {
    display: none;
    list-style: none;
    margin: 2px 0 6px 24px; /* Level 2 girintisine hizalı */
    padding: 0 0 0 8px;
    border-left: 2px solid var(--yd-primary-bd);
}
.yd-nav-sub3 li a {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 8px;
    border-radius: 5px;
    color: var(--yd-muted);
    font-size: 0.84rem;
    text-decoration: none;
    transition: background .1s, color .1s;
}
.yd-nav-sub3 li a i { font-size: 0.78rem; flex-shrink: 0; }
.yd-nav-sub3 li a:hover { background: var(--yd-bg); color: var(--yd-text); text-decoration: none; }
.yd-nav-sub3 li a.active { color: var(--yd-primary); font-weight: 600; background: var(--yd-primary-lt); }
.yd-nav-subgroup.open > .yd-nav-sub3 { display: block; }

/* ── İçerik Alanı ────────────────────────────────────────────── */
.yd-content {
    flex: 1;
    padding: 28px 36px 48px;
    max-width: 860px;
    min-width: 0;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.yd-breadcrumb {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.89rem; color: var(--yd-muted);
    margin-bottom: 18px;
}
.yd-breadcrumb a { color: var(--yd-muted); }
.yd-breadcrumb a:hover { color: var(--yd-primary); text-decoration: none; }
.yd-breadcrumb span { color: #94a3b8; }

/* ── Makale ──────────────────────────────────────────────────── */
.yd-article-header { margin-bottom: 20px; }
.yd-article-header h1 {
    font-size: 1.5rem; font-weight: 700;
    color: var(--yd-text); margin: 0 0 6px;
    line-height: 1.3;
}
.yd-article-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    font-size: 0.86rem; color: var(--yd-muted);
}
.yd-article-meta i { margin-right: 3px; font-size: 0.82rem; color: var(--yd-primary); opacity: .75; }
.yd-meta-sep { color: #cbd5e1; }
.yd-article-divider { border: none; border-top: 1px solid var(--yd-border); margin: 16px 0 22px; }

.yd-article-body {
    font-size: 1.04rem; line-height: var(--yd-line-h); color: #1e293b;
}
.yd-article-body h2 { font-size: 1.21rem; font-weight: 600; margin: 26px 0 10px; border-bottom: 1px solid var(--yd-border); padding-bottom: 6px; }
.yd-article-body h3 { font-size: 1.07rem; font-weight: 600; margin: 20px 0 8px; }
.yd-article-body p  { margin: 0 0 13px; }
.yd-article-body ul,
.yd-article-body ol { padding-left: 22px; margin: 0 0 13px; }
.yd-article-body li { margin-bottom: 5px; }
.yd-article-body img { max-width: 100%; border-radius: 6px; border: 1px solid var(--yd-border); margin: 10px 0; }
.yd-article-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.96rem; }
.yd-article-body th,
.yd-article-body td { border: 1px solid var(--yd-border); padding: 8px 12px; }
.yd-article-body th { background: var(--yd-bg); font-weight: 600; }
.yd-article-body code {
    background: #f1f5f9; border: 1px solid var(--yd-border);
    border-radius: 4px; padding: 1px 5px;
    font-size: 0.89rem; font-family: 'Cascadia Code', 'Consolas', monospace;
    color: #c7254e;
}
.yd-article-body pre {
    background: #1e293b; color: #e2e8f0;
    border-radius: 8px; padding: 16px; overflow-x: auto; margin: 14px 0;
}
.yd-article-body pre code { background: none; border: none; color: inherit; padding: 0; font-size: inherit; }

/* ── Ana Sayfa & Arama ───────────────────────────────────────── */
.yd-hero { padding: 4px 0 24px; }
.yd-hero h1 { font-size: 1.57rem; font-weight: 700; margin: 0 0 14px; }

.yd-search-wrap {
    position: relative;
    max-width: 480px;
}
.yd-search-icon {
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--yd-muted); font-size: 0.93rem;
    pointer-events: none;
}
.yd-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--yd-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--yd-surface);
    color: var(--yd-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.yd-search-input:focus {
    border-color: var(--yd-primary);
    box-shadow: 0 0 0 3px var(--yd-primary-lt);
}

.yd-search-results { margin-top: 4px; }
.yd-search-count { font-size: 0.93rem; color: var(--yd-muted); margin: 0 0 12px; }
.yd-result-list { list-style: none; margin: 0; padding: 0; }
.yd-result-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--yd-border);
    display: flex; flex-direction: column; gap: 3px;
}
.yd-result-item:last-child { border-bottom: none; }
.yd-result-title {
    font-size: 1rem; font-weight: 600;
    color: var(--yd-primary); text-decoration: none;
}
.yd-result-title:hover { text-decoration: underline; }
.yd-result-path { font-size: 0.86rem; color: var(--yd-muted); }
.yd-search-empty { color: var(--yd-muted); font-size: 1rem; margin-top: 16px; }

/* ── Footer — sabit, her zaman pencerenin altında ────────────── */
.yd-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: var(--yd-header-bg);
    padding: 0 24px;
    text-align: center;
    font-size: 0.86rem; color: rgba(255,255,255,.35);
    height: var(--yd-footer-h);
    display: flex; align-items: center; justify-content: center;
}

/* ── Ayarlar Paneli ──────────────────────────────────────────── */
.yd-settings-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    color: rgba(255,255,255,.7);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.yd-settings-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

.yd-settings-panel {
    position: fixed;
    top: var(--yd-header-h);
    right: -320px;
    width: 300px;
    background: var(--yd-surface);
    border-left: 1px solid var(--yd-border);
    border-bottom: 1px solid var(--yd-border);
    border-radius: 0 0 0 10px;
    box-shadow: -4px 6px 20px rgba(0,0,0,.12);
    z-index: 200;
    transition: right .22s cubic-bezier(.4,0,.2,1);
}
.yd-settings-panel.open { right: 0; }

.yd-settings-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 199;
}
.yd-settings-overlay.open { display: block; }

.yd-sp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--yd-border);
    font-size: 0.93rem; font-weight: 600; color: var(--yd-text);
}
.yd-sp-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.29rem; color: var(--yd-muted); line-height: 1;
    padding: 0 2px;
}
.yd-sp-close:hover { color: var(--yd-text); }
.yd-sp-body { padding: 14px 16px; }
.yd-sp-row { margin-bottom: 16px; }
.yd-sp-row label {
    display: block;
    font-size: 0.86rem; font-weight: 600; color: var(--yd-muted);
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 8px;
}
.yd-sp-ctrl { display: flex; align-items: center; gap: 10px; }
.yd-sp-ctrl input[type=range] {
    flex: 1; height: 4px;
    accent-color: var(--yd-primary);
    cursor: pointer;
}
.yd-sp-ctrl span {
    font-size: 0.86rem; color: var(--yd-muted);
    min-width: 38px; text-align: right;
}
.yd-sp-colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yd-color-chip {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer; transition: transform .12s, border-color .12s;
    flex-shrink: 0;
}
.yd-color-chip:hover { transform: scale(1.15); }
.yd-color-chip.active { border-color: var(--yd-text) !important; transform: scale(1.1); }
.yd-color-custom {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--yd-border);
    padding: 0; cursor: pointer;
    background: none; overflow: hidden;
}
.yd-color-custom::-webkit-color-swatch-wrapper { padding: 0; }
.yd-color-custom::-webkit-color-swatch { border: none; border-radius: 50%; }
.yd-sp-footer { padding-top: 8px; border-top: 1px solid var(--yd-border); margin-top: 4px; }
.yd-sp-reset {
    background: none; border: 1px solid var(--yd-border);
    border-radius: 6px; padding: 6px 14px;
    font-size: 0.86rem; color: var(--yd-muted); cursor: pointer;
    transition: background .12s;
}
.yd-sp-reset:hover { background: var(--yd-bg); color: var(--yd-text); }

/* ── Hamburger butonu (sadece mobilde görünür) ───────────────── */
.yd-hamburger {
    display: none;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    color: rgba(255,255,255,.8);
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.15rem;
    margin-right: 8px;
    flex-shrink: 0;
    transition: background .15s;
}
.yd-hamburger:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .yd-hamburger { display: flex; }

    /* Sidebar — mobilde drawer olarak açılır */
    .yd-sidebar {
        position: fixed;
        top: var(--yd-header-h);
        left: -280px;
        width: 272px;
        height: calc(100vh - var(--yd-header-h));
        z-index: 150;
        border-right: 1px solid var(--yd-border);
        box-shadow: 4px 0 20px rgba(0,0,0,.18);
        transition: left .22s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
        background: var(--yd-surface);
        padding: 16px 0;
    }
    .yd-sidebar.open { left: 0; }

    /* Overlay — sidebar açıkken arka planı kapat */
    .yd-mob-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 149;
    }
    .yd-mob-overlay.open { display: block; }

    .yd-content { padding: 16px 14px; }
    .yd-layout { margin-left: 0; }
}