/* ============================================================
   Nakliyatçılar.net — Site Design System
   Unified container (header = body = footer), section rhythm,
   pre-footer CTA band, enterprise footer.
   Loaded after app.css + header.css.
   ============================================================ */

:root {
    --site-max: 1240px;
    --site-gutter: 1.5rem;
}

/* ---------- Unified container: everything aligns to one width ---------- */
.nk-container {
    max-width: var(--site-max);
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}
/* Override Bulma's responsive container so body + footer match the header */
main .container:not(.is-fluid),
.footer .container:not(.is-fluid),
.nk-footer .nk-container,
.nk-cta-band .nk-container {
    max-width: var(--site-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    width: 100%;
}
@media screen and (max-width: 768px) {
    :root { --site-gutter: 1rem; }
}

/* ---------- Section rhythm (reusable across body pages) ---------- */
.nk-section { padding: 4.5rem 0; }
.nk-section--tight { padding: 3rem 0; }
.nk-section--soft { background: #f6f8fb; }
.nk-section-head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
.nk-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #2563eb; background: #eff6ff; padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.nk-section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #0f172a; letter-spacing: -.02em; line-height: 1.15; }
.nk-section-sub { margin-top: .85rem; font-size: 1.05rem; color: #64748b; line-height: 1.6; }
@media screen and (max-width: 768px) {
    .nk-section { padding: 3rem 0; }
    .nk-section-head { margin-bottom: 2rem; }
}

/* ---------- Pre-footer CTA band ---------- */
.nk-cta-band {
    background: linear-gradient(120deg, #0d2350 0%, #1e3a8a 55%, #1d4ed8 100%);
    position: relative; overflow: hidden;
}
.nk-cta-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(600px 200px at 85% -20%, rgba(249, 115, 22, .28), transparent 60%);
    pointer-events: none;
}
.nk-cta-band-inner {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 3rem var(--site-gutter);
}
.nk-cta-band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.nk-cta-band p { color: #c7d2fe; font-size: 1.05rem; margin-top: .55rem; max-width: 560px; }
.nk-cta-band-actions { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.nk-btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; }
.nk-btn-ghost-light:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }
@media screen and (max-width: 860px) {
    .nk-cta-band-inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .nk-cta-band-actions { width: 100%; }
    .nk-cta-band-actions .nk-btn { flex: 1; justify-content: center; }
}

/* ---------- Enterprise footer ---------- */
.nk-footer {
    background: #0b1424;
    color: #94a3b8;
    padding: 4rem 0 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.nk-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}
.nk-footer-brand-logo { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.nk-footer-brand-logo .ic {
    width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: #fff; font-size: 1.15rem;
}
.nk-footer-brand-logo .tx { font-size: 1.28rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.nk-footer-brand-logo .tx b { color: #fb923c; }
.nk-footer-brand p { color: #94a3b8; line-height: 1.65; font-size: .92rem; margin-bottom: 1.25rem; max-width: 340px; }
.nk-footer-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.nk-footer-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .76rem; font-weight: 600; color: #cbd5e1;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
    padding: .38rem .7rem; border-radius: 999px;
}
.nk-footer-chip i { color: #34d399; }
.nk-footer-social { display: flex; gap: .55rem; }
.nk-footer-social a {
    width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); color: #cbd5e1; transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nk-footer-social a:hover { background: #2563eb; color: #fff; transform: translateY(-2px); }
.nk-footer-col h4 { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.1rem; }
.nk-footer-col ul { list-style: none; margin: 0; padding: 0; }
.nk-footer-col li { margin-bottom: .7rem; }
.nk-footer-col a {
    color: #94a3b8; font-size: .92rem; text-decoration: none; transition: color .15s ease, padding-left .15s ease;
    display: inline-flex; align-items: center; gap: .45rem;
}
.nk-footer-col a:hover { color: #fff; padding-left: 3px; }
.nk-footer-col a i { font-size: .7rem; color: #475569; }
.nk-footer-col a:hover i { color: #f97316; }

.nk-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 1.5rem 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.nk-footer-bottom p { color: #64748b; font-size: .86rem; margin: 0; }
.nk-footer-bottom .nk-footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.nk-footer-bottom .nk-footer-legal a { color: #94a3b8; font-size: .86rem; text-decoration: none; }
.nk-footer-bottom .nk-footer-legal a:hover { color: #fff; }

@media screen and (max-width: 1023px) {
    .nk-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
    .nk-footer-brand { grid-column: 1 / -1; }
}
@media screen and (max-width: 640px) {
    .nk-footer-grid { grid-template-columns: 1fr 1fr; }
    .nk-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media screen and (max-width: 380px) {
    .nk-footer-grid { grid-template-columns: 1fr; }
}