/* ==========================================================================
   HESAPMIX — Analitik Finans Tasarım Dili (hx-*)
   ui.css'ten sonra yüklenir. Açık, buz mavisi zemin; defter/tablo çizgileri,
   tabular sayılar, veri kolonları ve durum rozetleri motifi.
   Palet: ink #071526 · mavi #0E7CF4 · turkuaz #18C7E8 · buz #EAF6FF ·
          gri #F4F7FA · başarı #149B68 · uyarı #E39A24
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokenlar
   -------------------------------------------------------------------------- */
:root {
    --hx-ink: #071526;
    --hx-ink-2: #0B1F38;
    --hx-blue: #0E7CF4;
    --hx-blue-dark: #0A63C6;
    --hx-cyan: #18C7E8;
    --hx-ice: #EAF6FF;
    --hx-gray: #F4F7FA;
    --hx-white: #FFFFFF;
    --hx-ok: #149B68;
    --hx-warn: #E39A24;

    --hx-text: #0B1B2E;
    --hx-text-2: #44566E;
    --hx-text-3: #6A7C93;
    --hx-text-inv: #EFF6FF;
    --hx-text-inv-2: rgba(219,236,255,.74);

    --hx-line: #DCE7F2;
    --hx-line-2: #C6D6E8;
    --hx-line-inv: rgba(122,180,240,.22);

    --hx-blue-soft: rgba(14,124,244,.09);
    --hx-blue-medium: rgba(14,124,244,.24);

    /* Ortak ui-* bileşenleri Hesapmix vurgusunu kullansın */
    --ui-accent: #0A63C6;
    --ui-accent-ink: #FFFFFF;
    --ui-accent-soft: #5FA8F0;

    --hx-shadow-sm: 0 1px 2px rgba(7,21,38,.06);
    --hx-shadow: 0 8px 24px -10px rgba(7,21,38,.16);
    --hx-shadow-lg: 0 24px 56px -22px rgba(7,21,38,.30);

    --hx-nav-h: 72px;
}

body {
    color: var(--hx-text);
    background: var(--hx-white);
}

a { color: var(--hx-blue-dark); text-decoration: none; }
a:hover { color: var(--hx-blue); }

.hx-lead { font-size: var(--ui-fs-lg); line-height: 1.6; color: var(--hx-text-2); }
.hx-muted { color: var(--hx-text-2); }

/* Defter hissi: sayısal içerik her zaman tabular */
.hx-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   2. Bölüm iskeleti
   -------------------------------------------------------------------------- */
.hx-section { padding-block: var(--sp-24); }
.hx-section--tight { padding-block: var(--sp-16); }
.hx-section--alt { background: var(--hx-gray); }
.hx-section--ice { background: var(--hx-ice); }

.hx-section--ink {
    background: var(--hx-ink);
    color: var(--hx-text-inv);
}
.hx-section--ink h2, .hx-section--ink h3, .hx-section--ink h4 { color: #fff; }
.hx-section--ink .hx-lead, .hx-section--ink .hx-muted { color: var(--hx-text-inv-2); }

.hx-head { max-width: 760px; margin-bottom: var(--sp-12); }
.hx-head--center { margin-inline: auto; text-align: center; }
.hx-head h2 { margin-bottom: var(--sp-3); }

/* Bölüm etiketi: defter satırı gibi — sol hizada çift çizgi arasında */
.hx-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ui-font-display);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hx-blue-dark);
    border-block: 1px solid var(--hx-blue-medium);
    padding-block: .375rem;
    margin-bottom: var(--sp-4);
}
.hx-kicker i { color: var(--hx-cyan); }
.hx-section--ink .hx-kicker { color: #7CC4FF; border-block-color: rgba(124,196,255,.35); }

/* --------------------------------------------------------------------------
   3. Butonlar
   -------------------------------------------------------------------------- */
.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    font-family: var(--ui-font-display);
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    padding: .75rem 1.375rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ui-dur) var(--ui-ease),
                border-color var(--ui-dur) var(--ui-ease),
                color var(--ui-dur) var(--ui-ease),
                transform var(--ui-dur) var(--ui-ease);
}
.hx-btn i { font-size: 1.05em; line-height: 1; }
.hx-btn:hover { transform: translateY(-1px); }
.hx-btn:active { transform: translateY(0); }

.hx-btn--primary {
    background: var(--hx-blue);
    color: #fff;
    box-shadow: var(--hx-shadow-sm);
}
.hx-btn--primary:hover { background: var(--hx-blue-dark); color: #fff; }

.hx-btn--ghost {
    background: transparent;
    color: var(--hx-text);
    border-color: var(--hx-line-2);
}
.hx-btn--ghost:hover {
    border-color: var(--hx-blue);
    color: var(--hx-blue-dark);
    background: var(--hx-blue-soft);
}

.hx-btn--inv { background: #fff; color: var(--hx-ink); }
.hx-btn--inv:hover { background: var(--hx-ice); color: var(--hx-ink); }
.hx-btn--inv-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(219,236,255,.35);
}
.hx-btn--inv-ghost:hover { border-color: var(--hx-cyan); color: #fff; background: rgba(24,199,232,.10); }

.hx-btn--sm { padding: .5rem 1rem; font-size: var(--ui-fs-xs); }
.hx-btn--lg { padding: 1rem 1.75rem; font-size: var(--ui-fs-base); }

.hx-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   4. Navigasyon — açık zemin, defter alt çizgisi
   -------------------------------------------------------------------------- */
.hx-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--hx-line);
    transition: box-shadow var(--ui-dur) var(--ui-ease);
}
.hx-nav.is-scrolled { box-shadow: var(--hx-shadow-sm); }

.hx-nav-inner {
    max-width: var(--ui-maxw);
    margin-inline: auto;
    padding-inline: var(--ui-gutter);
    height: var(--hx-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}
.hx-nav-brand { display: inline-flex; align-items: center; }
.hx-nav-brand img { height: 36px; width: auto; }

.hx-nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    margin: 0; padding: 0; list-style: none;
}
.hx-nav-links a {
    position: relative;
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--hx-text-2);
    padding-block: .375rem;
    transition: color var(--ui-dur) var(--ui-ease);
}
.hx-nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--hx-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ui-dur) var(--ui-ease);
}
.hx-nav-links a:hover, .hx-nav-links a.is-active { color: var(--hx-ink); }
.hx-nav-links a:hover::after, .hx-nav-links a.is-active::after { transform: scaleX(1); }

.hx-nav-menu { display: flex; align-items: center; gap: var(--sp-6); }
.hx-nav-cta { display: flex; align-items: center; gap: var(--sp-4); }
.hx-nav-login {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--ui-fs-sm);
    font-weight: 600;
    color: var(--hx-text-2);
    min-height: 44px;
}
.hx-nav-login:hover { color: var(--hx-blue-dark); }

.hx-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--hx-line-2);
    border-radius: var(--r-sm);
    font-size: 1.375rem;
    color: var(--hx-ink);
    cursor: pointer;
}
.hx-nav-panel { display: contents; }

/* --------------------------------------------------------------------------
   5. Hero — açık analitik zemin, defter çizgileri, büyük okunur ekran
   -------------------------------------------------------------------------- */
.hx-hero {
    position: relative;
    background:
        linear-gradient(180deg, var(--hx-ice), rgba(234,246,255,.35) 55%, #fff);
    padding-block: var(--sp-16) var(--sp-24);
    overflow: hidden;
}
/* Defter satırları: ince yatay çizgiler + sol marj çizgisi hissi */
.hx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0 47px,
        rgba(14,124,244,.055) 47px 48px
    );
    mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 85%);
    pointer-events: none;
}
.hx-hero > .ui-container { position: relative; z-index: 1; }

.hx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: var(--sp-16);
    align-items: center;
}
.hx-hero h1 {
    color: var(--hx-ink);
    max-width: 17ch;
    margin-bottom: var(--sp-6);
}
.hx-hero h1 em {
    font-style: normal;
    color: var(--hx-blue-dark);
}
.hx-hero p { max-width: 52ch; }
.hx-hero .hx-actions { margin-top: var(--sp-8); }

/* Hero medyası: ana ekran + köşe ekran; modül etiketleri gerçek modülleri işaret eder */
.hx-hero-media { position: relative; }
.hx-hero-media-alt {
    position: absolute;
    width: 46%;
    right: -3%;
    bottom: -12%;
    box-shadow: var(--hx-shadow-lg);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--hx-line);
    background: #fff;
}
.hx-hero-media-alt img { width: 100%; display: block; }

.hx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}
.hx-tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--ui-font-display);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--hx-blue-dark);
    background: #fff;
    border: 1px solid var(--hx-line);
    border-left: 3px solid var(--hx-blue);
    border-radius: var(--r-sm);
    padding: .375rem .75rem;
}
.hx-tag i { color: var(--hx-cyan); }

/* --------------------------------------------------------------------------
   6. Ekran görüntüsü yüzeyi — soluklaştırma yok, tam kontrast
   -------------------------------------------------------------------------- */
.hx-shot {
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--hx-shadow);
}
/* Defter üst şeridi: modül adı + durum rozeti */
.hx-shot-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: .5rem .875rem;
    background: var(--hx-gray);
    border-bottom: 1px solid var(--hx-line);
    font-family: var(--ui-font-display);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--hx-text-2);
}
.hx-shot img { width: 100%; display: block; }

/* Durum rozetleri — finansal durum dili */
.hx-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .125rem .5rem;
    border-radius: var(--r-sm);
}
.hx-badge--ok { color: var(--hx-ok); background: rgba(20,155,104,.10); }
.hx-badge--warn { color: var(--hx-warn); background: rgba(227,154,36,.12); }
.hx-badge--info { color: var(--hx-blue-dark); background: var(--hx-blue-soft); }

/* --------------------------------------------------------------------------
   7. Kapsam şeridi — ürünün gerçek modül kapsamı (sahte logo/sayı yok)
   -------------------------------------------------------------------------- */
.hx-strip {
    border-block: 1px solid var(--hx-line);
    background: #fff;
}
.hx-strip-inner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
}
.hx-strip-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    padding: var(--sp-6) var(--sp-4);
    border-left: 1px solid var(--hx-line);
    font-size: var(--ui-fs-xs);
    color: var(--hx-text-3);
}
.hx-strip-item:first-child { border-left: 0; }
.hx-strip-item i { font-size: 1.25rem; color: var(--hx-blue); }
.hx-strip-item b {
    font-family: var(--ui-font-display);
    font-weight: 600;
    font-size: var(--ui-fs-sm);
    color: var(--hx-text);
}

/* --------------------------------------------------------------------------
   8. Finansal akış — Satış → Belge → Cari → Tahsilat → Rapor
   Kart dizisi değil; yatay veri hattı.
   -------------------------------------------------------------------------- */
.hx-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-6);
    position: relative;
    counter-reset: akis;
}
/* Bağlantı rayı */
.hx-flow::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 4%;
    right: 4%;
    height: 2px;
    background: linear-gradient(90deg, var(--hx-blue), var(--hx-cyan));
    opacity: .35;
}
.hx-flow-step { position: relative; counter-increment: akis; }
.hx-flow-node {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: #fff;
    border: 2px solid var(--hx-blue);
    border-radius: var(--r-sm);
    color: var(--hx-blue-dark);
    font-family: var(--ui-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-4);
}
.hx-flow-node::after { content: counter(akis, decimal-leading-zero); }
.hx-flow-step h3 { font-size: var(--ui-fs-base); margin-bottom: var(--sp-1); }
.hx-flow-step p { font-size: var(--ui-fs-sm); color: var(--hx-text-2); margin: 0; }

/* --------------------------------------------------------------------------
   9. Modül satırları — medya + metin, dönüşümlü
   -------------------------------------------------------------------------- */
.hx-mod {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--sp-16);
    align-items: center;
}
.hx-mod--flip .hx-mod-media { order: -1; }
.hx-mod-body h2 { max-width: 22ch; margin-bottom: var(--sp-3); }
.hx-mod-body > p { max-width: 54ch; }

.hx-check {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-6) 0 0;
    padding: 0;
    list-style: none;
}
.hx-check li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--sp-3);
    align-items: start;
    font-size: var(--ui-fs-sm);
    color: var(--hx-text-2);
}
.hx-check i { color: var(--hx-ok); font-size: 1.05rem; line-height: 1.5; }
.hx-check b { display: block; color: var(--hx-text); font-weight: 600; }

/* Defter satırı listesi — cari hareket görünümü motifi */
.hx-ledger {
    margin-top: var(--sp-6);
    border-top: 1px solid var(--hx-line);
    font-variant-numeric: tabular-nums;
}
.hx-ledger-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    padding: .625rem 0;
    border-bottom: 1px solid var(--hx-line);
    font-size: var(--ui-fs-sm);
    color: var(--hx-text-2);
}
.hx-ledger-row b { color: var(--hx-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. SSS — accordion
   -------------------------------------------------------------------------- */
.hx-faq { display: grid; gap: 0; border-top: 1px solid var(--hx-line); }
.hx-faq details { border-bottom: 1px solid var(--hx-line); }
.hx-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    font-family: var(--ui-font-display);
    font-weight: 600;
    font-size: var(--ui-fs-base);
    color: var(--hx-text);
    cursor: pointer;
    list-style: none;
}
.hx-faq summary::-webkit-details-marker { display: none; }
.hx-faq summary::after {
    content: '+';
    font-size: 1.375rem;
    line-height: 1;
    color: var(--hx-blue);
    transition: transform var(--ui-dur) var(--ui-ease);
}
.hx-faq details[open] summary::after { transform: rotate(45deg); }
.hx-faq-body {
    padding: 0 0 var(--sp-4);
    color: var(--hx-text-2);
    font-size: var(--ui-fs-sm);
    max-width: 68ch;
}

/* --------------------------------------------------------------------------
   11. CTA
   -------------------------------------------------------------------------- */
.hx-cta {
    position: relative;
    background: var(--hx-ink);
    color: var(--hx-text-inv);
    padding-block: var(--sp-24);
    overflow: hidden;
}
.hx-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(720px 340px at 50% 0%, rgba(14,124,244,.28), transparent 65%);
    pointer-events: none;
}
.hx-cta > .ui-container { position: relative; z-index: 1; text-align: center; }
.hx-cta h2 { color: #fff; margin-bottom: var(--sp-4); }
.hx-cta p { color: var(--hx-text-inv-2); max-width: 56ch; margin-inline: auto; }
.hx-cta .hx-actions { justify-content: center; margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   12. Özellik kataloğu (features) — yapışkan kategori navigasyonu
   -------------------------------------------------------------------------- */
.hx-cat-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--sp-16);
    align-items: start;
}
.hx-cat-nav {
    position: sticky;
    top: calc(var(--hx-nav-h) + 24px);
    display: grid;
    gap: 0;
    border-left: 2px solid var(--hx-line);
}
.hx-cat-nav a {
    padding: .625rem var(--sp-4);
    font-size: var(--ui-fs-sm);
    font-weight: 500;
    color: var(--hx-text-2);
    border-left: 2px solid transparent;
    margin-left: -2px;
}
.hx-cat-nav a:hover {
    color: var(--hx-blue-dark);
    border-left-color: var(--hx-blue);
}

.hx-cat { padding-block: var(--sp-8); border-top: 1px solid var(--hx-line); }
.hx-cat:first-of-type { border-top: 0; padding-top: 0; }
.hx-cat h2 { margin-bottom: var(--sp-2); }
.hx-cat-problem {
    font-size: var(--ui-fs-sm);
    color: var(--hx-text-3);
    max-width: 64ch;
    margin-bottom: var(--sp-3);
}
.hx-cat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
    margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   13. İletişim
   -------------------------------------------------------------------------- */
.hx-direct { display: grid; gap: var(--sp-4); }
.hx-direct-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4);
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: var(--r-lg);
    transition: border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease);
}
a.hx-direct-item:hover { border-color: var(--hx-blue); box-shadow: var(--hx-shadow); color: inherit; }
.hx-direct-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    background: var(--hx-blue-soft);
    color: var(--hx-blue-dark);
    font-size: 1.25rem;
}
.hx-direct-item h3 { font-size: var(--ui-fs-sm); margin-bottom: .125rem; }
.hx-direct-item span, .hx-direct-item address { font-size: var(--ui-fs-sm); color: var(--hx-text-2); font-style: normal; }

.hx-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--sp-16);
    align-items: start;
}

.hx-card {
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
}
.hx-card h3 { margin-bottom: var(--sp-2); }
.hx-card p { color: var(--hx-text-2); font-size: var(--ui-fs-sm); }

.hx-note {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    background: var(--hx-blue-soft);
    border: 1px solid var(--hx-blue-medium);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    font-size: var(--ui-fs-sm);
    color: var(--hx-text-2);
}
.hx-note i { color: var(--hx-blue-dark); margin-top: .2rem; }

/* Sayfa başlığı (features / contact / privacy) */
.hx-page-head {
    background: linear-gradient(180deg, var(--hx-ice), #fff);
    border-bottom: 1px solid var(--hx-line);
    padding-block: var(--sp-16);
}
.hx-page-head h1 { max-width: 22ch; margin-bottom: var(--sp-4); }
.hx-page-head p { max-width: 62ch; }

/* --------------------------------------------------------------------------
   14. Banka entegrasyonu akış diyagramı
   -------------------------------------------------------------------------- */
.hx-bank-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.hx-bank-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: var(--sp-4);
    min-width: 80px;
}
.hx-bank-flow-step i {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: var(--hx-blue-soft);
    color: var(--hx-blue-dark);
}
.hx-bank-flow-step:nth-child(odd) i { background: rgba(24,199,232,.12); color: #0A9DB8; }
.hx-bank-flow-step span {
    font-family: var(--ui-font-display);
    font-size: var(--ui-fs-xs);
    font-weight: 600;
    color: var(--hx-text-2);
    text-align: center;
}
.hx-bank-flow-arrow {
    font-size: 1.125rem;
    color: var(--hx-blue);
}

/* --------------------------------------------------------------------------
   15. Partner / Bayilik bandı
   -------------------------------------------------------------------------- */
.hx-partner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    padding: var(--sp-8);
    background: #fff;
    border: 1px solid var(--hx-line);
    border-left: 4px solid var(--hx-blue);
    border-radius: var(--r-lg);
}
.hx-partner h2 { max-width: 28ch; margin-bottom: var(--sp-3); }
.hx-partner p { max-width: 56ch; }

@media (max-width: 640px) {
    .hx-bank-flow { flex-direction: column; }
    .hx-bank-flow-arrow { transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   16. Duyarlılık
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .hx-hero-grid, .hx-mod, .hx-contact-grid { gap: var(--sp-12); }
    .hx-cat-layout { gap: var(--sp-8); }
}

@media (max-width: 991px) {
    .hx-section { padding-block: var(--sp-16); }
    .hx-cta { padding-block: var(--sp-16); }

    .hx-nav-toggle { display: inline-flex; }
    .hx-nav-panel {
        display: block;
        position: fixed;
        inset: var(--hx-nav-h) 0 0 0;
        background: #fff;
        padding: var(--sp-8) var(--ui-gutter) var(--sp-12);
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--ui-dur) var(--ui-ease),
                    transform var(--ui-dur) var(--ui-ease),
                    visibility var(--ui-dur) var(--ui-ease);
    }
    .hx-nav-panel.is-open { visibility: visible; opacity: 1; transform: none; }
    .hx-nav-menu { flex-direction: column; align-items: stretch; gap: var(--sp-6); }
    .hx-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
    .hx-nav-links li { border-bottom: 1px solid var(--hx-line); }
    .hx-nav-links a {
        display: block;
        padding: var(--sp-4) 0;
        font-size: var(--ui-fs-lg);
        font-family: var(--ui-font-display);
        font-weight: 600;
        color: var(--hx-ink);
    }
    .hx-nav-links a::after { display: none; }
    .hx-nav-cta { flex-direction: column; align-items: stretch; }
    .hx-nav-cta .hx-btn { width: 100%; }

    .hx-hero { padding-block: var(--sp-12) var(--sp-16); }
    .hx-hero-grid,
    .hx-mod,
    .hx-contact-grid,
    .hx-cat-grid { grid-template-columns: minmax(0, 1fr); }
    .hx-mod--flip .hx-mod-media { order: 0; }
    .hx-hero h1 { max-width: none; }
    .hx-hero-media { margin-top: var(--sp-4); }

    .hx-strip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hx-strip-item:nth-child(4) { border-left: 0; }

    .hx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
    .hx-flow::before { display: none; }

    /* Kategori navigasyonu: yatay kaydırmalı şerit */
    .hx-cat-layout { grid-template-columns: minmax(0, 1fr); }
    .hx-cat-nav {
        position: sticky;
        top: var(--hx-nav-h);
        z-index: 10;
        display: flex;
        overflow-x: auto;
        gap: var(--sp-2);
        background: rgba(255,255,255,.95);
        backdrop-filter: blur(8px);
        border-left: 0;
        border-bottom: 1px solid var(--hx-line);
        padding-block: var(--sp-2);
        -webkit-overflow-scrolling: touch;
    }
    .hx-cat-nav a {
        flex: 0 0 auto;
        border: 1px solid var(--hx-line);
        border-radius: var(--r-sm);
        margin-left: 0;
        padding: .5rem .875rem;
    }
}

@media (max-width: 640px) {
    .hx-hero-media-alt { display: none; }
    .hx-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-strip-item { border-left: 0; border-top: 1px solid var(--hx-line); }
    .hx-strip-item:nth-child(-n+2) { border-top: 0; }
    .hx-flow { grid-template-columns: minmax(0, 1fr); }
    .hx-actions .hx-btn { width: 100%; }
}

/* Lead/iletişim formu (ui.css .ui-lead-*) — Hesapmix marka eşlemesi */
:root {
    --lead-accent: var(--hx-blue);
    --lead-accent-strong: var(--hx-blue-dark);
    --lead-accent-ink: #FFFFFF;
    --lead-accent-soft: var(--hx-blue-soft);
    --lead-line: var(--hx-line);
    --lead-line-2: var(--hx-line-2);
    --lead-text: var(--hx-text);
    --lead-text-2: var(--hx-text-2);
    --lead-bg: #FFFFFF;
    --lead-bg-alt: var(--hx-gray);
}