/* ==========================================================================
   NetEsnaf Kullanım Kılavuzu — Ortak Stil
   Marka: Primary #1E40AF · Aksiyon #F59E0B · Tasarım sistemine bağlı
   Tüm kılavuz sayfaları (index + modül sayfaları) bu dosyayı kullanır.
   ========================================================================== */

:root {
    --kl-primary: var(--primary-600, #1E40AF);
    --kl-primary-500: var(--primary-500, #2563EB);
    --kl-primary-50: var(--primary-50, #EFF6FF);
    --kl-primary-100: var(--primary-100, #DBEAFE);
    --kl-accent: var(--accent-500, #F59E0B);
    --kl-accent-50: #FEF3C7;
    --kl-ink: var(--gray-900, #0F172A);
    --kl-body: var(--gray-700, #334155);
    --kl-muted: var(--gray-500, #64748B);
    --kl-line: var(--gray-200, #E2E8F0);
    --kl-surface: var(--gray-50, #F8FAFC);
    --kl-card: #FFFFFF;
    --kl-success: #10B981;
    --kl-success-bg: #D1FAE5;
    --kl-warn: #F59E0B;
    --kl-warn-bg: #FEF3C7;
    --kl-error: #EF4444;
    --kl-error-bg: #FEE2E2;
    --kl-info: #0EA5E9;
    --kl-info-bg: #E0F2FE;
    --kl-radius: 14px;
    --kl-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
}

/* ---------- Genel ---------- */
.kl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.kl-main { padding: 40px 0 80px; color: var(--kl-body); font-family: 'Inter', system-ui, sans-serif; line-height: 1.7; }
.kl-main h1, .kl-main h2, .kl-main h3, .kl-main h4 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--kl-ink); line-height: 1.25; }

/* ---------- Breadcrumb ---------- */
.kl-breadcrumb { font-size: 14px; color: var(--kl-muted); margin-bottom: 22px; }
.kl-breadcrumb a { color: var(--kl-primary-500); text-decoration: none; }
.kl-breadcrumb a:hover { text-decoration: underline; }
.kl-breadcrumb span { margin: 0 8px; color: var(--kl-line); }

/* ---------- Hero (modül sayfası başlığı) ---------- */
.kl-hero {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
    color: #fff; border-radius: 20px; padding: 40px 40px 36px;
    margin-bottom: 34px; position: relative; overflow: hidden;
}
.kl-hero::after {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 240px; height: 240px; background: rgba(255,255,255,.08); border-radius: 50%;
}
.kl-hero .kl-hero-ico { font-size: 42px; margin-bottom: 12px; }
.kl-hero h1 { color: #fff; font-size: 34px; font-weight: 800; margin: 0 0 10px; }
.kl-hero p { color: rgba(255,255,255,.92); font-size: 17px; max-width: 760px; margin: 0; }
.kl-hero .kl-hero-meta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.kl-hero .kl-chip { background: rgba(255,255,255,.16); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; }

/* ---------- "Ne işe yarar / neden" giriş kutusu ---------- */
.kl-intro {
    background: var(--kl-primary-50); border: 1px solid var(--kl-primary-100);
    border-radius: var(--kl-radius); padding: 22px 24px; margin-bottom: 30px;
}
.kl-intro h2 { font-size: 18px; margin: 0 0 8px; color: var(--kl-primary); }
.kl-intro p { margin: 0; }

/* ---------- İçindekiler (TOC) ---------- */
.kl-toc { background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: var(--kl-radius); padding: 20px 24px; margin-bottom: 34px; box-shadow: var(--kl-shadow); }
.kl-toc h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--kl-muted); margin: 0 0 12px; }
.kl-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.kl-toc li { margin-bottom: 6px; }
.kl-toc a { color: var(--kl-body); text-decoration: none; }
.kl-toc a:hover { color: var(--kl-primary); }
@media (max-width: 640px){ .kl-toc ol { columns: 1; } }

/* ---------- Ekran kartı ---------- */
.kl-screen { background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: var(--kl-radius); padding: 28px 30px; margin-bottom: 26px; box-shadow: var(--kl-shadow); scroll-margin-top: 90px; }
.kl-screen-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.kl-screen-num { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--kl-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; }
.kl-screen h3 { font-size: 22px; margin: 0; }
.kl-screen-where { font-size: 13px; color: var(--kl-muted); margin: 2px 0 16px 46px; }
.kl-screen-where b { color: var(--kl-body); }

.kl-lead { font-size: 16px; margin: 0 0 18px; }

/* ---------- "Ne yapar / Neden" iki kolon ---------- */
.kl-nedennasil { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 20px; }
.kl-nedennasil .kl-box { border-radius: 12px; padding: 16px 18px; }
.kl-box-amac { background: var(--kl-surface); border: 1px solid var(--kl-line); }
.kl-box-neden { background: var(--kl-accent-50); border: 1px solid #FDE68A; }
.kl-box h4 { font-size: 14px; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.kl-box p { margin: 0; font-size: 15px; }
@media (max-width: 640px){ .kl-nedennasil { grid-template-columns: 1fr; } }

/* ---------- Adım adım liste ---------- */
.kl-steps { margin: 8px 0 18px; padding: 0; list-style: none; counter-reset: kladim; }
.kl-steps > li { position: relative; padding: 4px 0 14px 44px; counter-increment: kladim; }
.kl-steps > li::before { content: counter(kladim); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--kl-primary-50); color: var(--kl-primary); border: 1px solid var(--kl-primary-100); border-radius: 50%; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.kl-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--kl-line); }
.kl-steps strong { color: var(--kl-ink); }

/* ---------- Butonlar tablosu ---------- */
.kl-btns { margin: 14px 0 20px; }
.kl-btns h4 { font-size: 15px; margin: 0 0 10px; color: var(--kl-ink); }
.kl-btn-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px dashed var(--kl-line); }
.kl-btn-row:last-child { border-bottom: 1px dashed var(--kl-line); }
.kl-btn-name { flex: none; min-width: 150px; }
.kl-btn-badge { display: inline-block; background: var(--kl-primary); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 8px; }
.kl-btn-badge.is-accent { background: var(--kl-accent); }
.kl-btn-badge.is-danger { background: var(--kl-error); }
.kl-btn-badge.is-ghost { background: #fff; color: var(--kl-body); border: 1px solid var(--kl-line); }
.kl-btn-desc { font-size: 15px; }
.kl-btn-desc .kl-sonuc { display: block; font-size: 13.5px; color: var(--kl-muted); margin-top: 3px; }
.kl-btn-desc .kl-sonuc b { color: var(--kl-body); }

/* ---------- Neden-sonuç / etki tablosu ---------- */
.kl-cause { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 15px; }
.kl-cause th, .kl-cause td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--kl-line); vertical-align: top; }
.kl-cause th { background: var(--kl-surface); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--kl-muted); }
.kl-cause tr:last-child td { border-bottom: none; }
.kl-cause .kl-eylem { font-weight: 600; color: var(--kl-ink); white-space: nowrap; }

/* ---------- Callout kutuları (ipucu / uyarı / bilgi) ---------- */
.kl-note { border-radius: 12px; padding: 14px 16px 14px 46px; margin: 16px 0; position: relative; font-size: 15px; }
.kl-note::before { position: absolute; left: 16px; top: 14px; font-size: 18px; }
.kl-note.is-tip { background: var(--kl-success-bg); border: 1px solid #A7F3D0; }
.kl-note.is-tip::before { content: "💡"; }
.kl-note.is-warn { background: var(--kl-warn-bg); border: 1px solid #FDE68A; }
.kl-note.is-warn::before { content: "⚠️"; }
.kl-note.is-info { background: var(--kl-info-bg); border: 1px solid #BAE6FD; }
.kl-note.is-info::before { content: "ℹ️"; }
.kl-note b { color: var(--kl-ink); }

/* ---------- İlişki etiketleri ---------- */
.kl-rel { margin: 16px 0 4px; font-size: 14px; }
.kl-rel .kl-rel-label { color: var(--kl-muted); margin-right: 6px; }
.kl-tag { display: inline-block; background: var(--kl-primary-50); color: var(--kl-primary); border: 1px solid var(--kl-primary-100); font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 20px; margin: 3px 4px 3px 0; }

/* ==========================================================================
   INDEX (açılış) sayfası
   ========================================================================== */
.kl-index-hero { text-align: center; padding: 20px 0 30px; }
.kl-index-hero .kl-eyebrow { display: inline-block; background: var(--kl-primary-50); color: var(--kl-primary); font-weight: 700; font-size: 14px; padding: 6px 16px; border-radius: 20px; margin-bottom: 16px; }
.kl-index-hero h1 { font-size: 42px; font-weight: 800; margin: 0 0 14px; }
.kl-index-hero p { font-size: 18px; color: var(--kl-body); max-width: 700px; margin: 0 auto; }
@media (max-width: 640px){ .kl-index-hero h1 { font-size: 30px; } }

.kl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 36px 0; }
@media (max-width: 900px){ .kl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .kl-grid { grid-template-columns: 1fr; } }

.kl-mod-card { display: block; background: var(--kl-card); border: 1px solid var(--kl-line); border-radius: var(--kl-radius); padding: 22px; text-decoration: none; color: var(--kl-body); transition: transform .15s, box-shadow .15s, border-color .15s; box-shadow: var(--kl-shadow); }
.kl-mod-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(30,64,175,.12); border-color: var(--kl-primary-100); }
.kl-mod-card .kl-mod-ico { font-size: 30px; margin-bottom: 12px; }
.kl-mod-card h3 { font-size: 18px; margin: 0 0 6px; color: var(--kl-ink); }
.kl-mod-card p { font-size: 14px; margin: 0; color: var(--kl-muted); }
.kl-mod-card .kl-mod-count { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--kl-primary); }

/* ---------- AI / JSON tanıtım bloğu ---------- */
.kl-ai { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); color: #fff; border-radius: 20px; padding: 36px 40px; margin: 40px 0; }
.kl-ai h2 { color: #fff; font-size: 26px; margin: 0 0 12px; }
.kl-ai p { color: rgba(255,255,255,.85); max-width: 720px; }
.kl-ai .kl-ai-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.kl-ai a.kl-ai-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--kl-accent); color: #0F172A; font-weight: 700; padding: 12px 22px; border-radius: 10px; text-decoration: none; }
.kl-ai a.kl-ai-btn.is-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.kl-ai code { background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 6px; font-size: 14px; }

/* ---------- Sayfa altı gezinme ---------- */
.kl-pagenav { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--kl-line); }
.kl-pagenav a { color: var(--kl-primary); text-decoration: none; font-weight: 600; }
.kl-pagenav a:hover { text-decoration: underline; }