/* =============================================================================
   HOCHLIFT — Master Stylesheet
   Premium Elevator Company · Dark-first · Black & Gold Design System
   =============================================================================

   TABLE OF CONTENTS
   1.  Design Tokens (CSS Custom Properties)
   2.  Base & Reset
   3.  Typography
   4.  Theme Transitions (activated by JS after first paint)
   5.  Scrollbar
   6.  Navbar
   7.  Mobile Offcanvas Menu
   8.  Footer
   9.  Utilities
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
    /* Layout */
    --hl-navbar-height: 72px;
    --hl-section-py: 80px;

    /* Typography */
    --hl-font-display: 'Playfair Display', Georgia, serif;
    --hl-font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Brand palette — shared across both themes */
    --hl-primary:      #FEAF03;   /* Altın Sarısı */
    --hl-gold:         #FEAF03;
    --hl-gold-rgb:     254, 175, 3;
    --hl-navy:         #001F3B;   /* Koyu Lacivert */
    --hl-red:          #FF0000;   /* Kırmızı */

    /* Radii */
    --hl-radius-sm: 4px;
    --hl-radius:    8px;
    --hl-radius-lg: 16px;

    /* Transitions — zero by default; enabled after first paint */
    --hl-dur: 0s;
}

/* ── Light Mode (Default) ── */
[data-theme="light"] {
    --hl-bg:            #FFFFFF;
    --hl-bg-secondary:  #F4F6F8;
    --hl-bg-card:       #FFFFFF;
    --hl-text:          #001F3B;
    --hl-text-muted:    #4A5568;
    --hl-gold-hover:    #E09A00;
    --hl-border:        rgba(0, 31, 59, 0.12);
    --hl-border-hover:  rgba(254, 175, 3, 0.60);
    --hl-shadow:        0 4px 32px rgba(0, 31, 59, 0.10);
    --hl-shadow-sm:     0 2px 12px rgba(0, 31, 59, 0.07);

    /* Navbar */
    --hl-navbar-initial:  rgba(255, 255, 255, 0.85);
    --hl-navbar-bg:       rgba(255, 255, 255, 0.97);
    --hl-navbar-border:   rgba(0, 31, 59, 0.10);
    --hl-nav-text:        rgba(0, 31, 59, 0.85);
    --hl-nav-text-hover:  #001F3B;

    /* Dropdown */
    --hl-dd-bg:           #FFFFFF;
    --hl-dd-border:       rgba(0, 31, 59, 0.12);
    --hl-dd-hover-bg:     rgba(254, 175, 3, 0.10);
    --hl-dd-text:         rgba(0, 31, 59, 0.80);
    --hl-dd-text-hover:   #001F3B;

    /* Offcanvas */
    --hl-oc-bg:           #FFFFFF;
    --hl-oc-border:       rgba(0, 31, 59, 0.12);

    /* Footer */
    --hl-footer-bg:       #001F3B;
    --hl-footer-top-bg:   #002855;
    --hl-footer-border:   rgba(254, 175, 3, 0.20);
    --hl-footer-text:     rgba(255, 255, 255, 0.65);
    --hl-footer-heading:  #FEAF03;
    --hl-footer-link:     rgba(255, 255, 255, 0.55);
    --hl-footer-link-hover: #FEAF03;

    /* Certifications strip */
    --hl-certs-bg:        #F4F6F8;
    --hl-certs-text:      rgba(0, 31, 59, 0.55);

    /* Bottom bar */
    --hl-bottom-bg:       #001020;
    --hl-bottom-text:     rgba(255, 255, 255, 0.40);
    --hl-bottom-link:     rgba(255, 255, 255, 0.40);
    --hl-bottom-link-hover: #FEAF03;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
    --hl-bg:            #001F3B;
    --hl-bg-secondary:  #002855;
    --hl-bg-card:       #0A2A4A;
    --hl-text:          #FFFFFF;
    --hl-text-muted:    #94A3B8;
    --hl-gold-hover:    #FFB800;
    --hl-border:        rgba(254, 175, 3, 0.20);
    --hl-border-hover:  rgba(254, 175, 3, 0.50);
    --hl-shadow:        0 4px 32px rgba(0, 0, 0, 0.50);
    --hl-shadow-sm:     0 2px 12px rgba(0, 0, 0, 0.35);

    /* Navbar */
    --hl-navbar-initial:  rgba(0, 31, 59, 0.60);
    --hl-navbar-bg:       rgba(0, 20, 45, 0.97);
    --hl-navbar-border:   rgba(254, 175, 3, 0.20);
    --hl-nav-text:        rgba(255, 255, 255, 0.85);
    --hl-nav-text-hover:  #FFFFFF;

    /* Dropdown */
    --hl-dd-bg:           #0A2A4A;
    --hl-dd-border:       rgba(254, 175, 3, 0.20);
    --hl-dd-hover-bg:     rgba(254, 175, 3, 0.10);
    --hl-dd-text:         rgba(255, 255, 255, 0.85);
    --hl-dd-text-hover:   #FEAF03;

    /* Offcanvas */
    --hl-oc-bg:           #001830;
    --hl-oc-border:       rgba(254, 175, 3, 0.15);

    /* Footer */
    --hl-footer-bg:       #001020;
    --hl-footer-top-bg:   #001530;
    --hl-footer-border:   rgba(254, 175, 3, 0.12);
    --hl-footer-text:     rgba(255, 255, 255, 0.60);
    --hl-footer-heading:  #FEAF03;
    --hl-footer-link:     rgba(255, 255, 255, 0.55);
    --hl-footer-link-hover: #FEAF03;

    /* Certifications strip */
    --hl-certs-bg:        #002855;
    --hl-certs-text:      rgba(255, 255, 255, 0.50);

    /* Bottom bar */
    --hl-bottom-bg:       #000D1A;
    --hl-bottom-text:     rgba(255, 255, 255, 0.35);
    --hl-bottom-link:     rgba(255, 255, 255, 0.35);
    --hl-bottom-link-hover: #FEAF03;
}


/* =============================================================================
   2. BASE & RESET
   ============================================================================= */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--hl-font-body);
    font-size: 1rem;
    line-height: 1.6;
    background-color: var(--hl-bg);
    color: var(--hl-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow-x: hidden;
}

#hl-main {
    flex: 1;
}

.hl-page-offset {
    padding-top: var(--hl-navbar-height);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--hl-primary);
    text-decoration: none;
    transition: color var(--hl-dur) ease;
}

a:hover {
    color: var(--hl-gold-hover);
}


/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

h1, h2, h3 {
    font-family: var(--hl-font-display);
    font-weight: 700;
    color: var(--hl-text);
    line-height: 1.2;
}

h4, h5, h6 {
    font-family: var(--hl-font-body);
    font-weight: 600;
    color: var(--hl-text);
}

.hl-text-gold   { color: var(--hl-primary) !important; }
.hl-text-muted  { color: var(--hl-text-muted) !important; }
.hl-gold-icon   { color: var(--hl-primary); }


/* =============================================================================
   4. THEME TRANSITIONS
   Activated by JS (.hl-transitions-active on <html>) after first paint.
   Zero-duration by default prevents animated initial render.
   ============================================================================= */

.hl-transitions-active {
    --hl-dur: 0.30s;
}

.hl-transitions-active body,
.hl-transitions-active #hl-navbar,
.hl-transitions-active .hl-navbar,
.hl-transitions-active .hl-dropdown,
.hl-transitions-active .hl-offcanvas,
.hl-transitions-active .hl-footer,
.hl-transitions-active .hl-footer-main,
.hl-transitions-active .hl-footer-certs,
.hl-transitions-active .hl-footer-bottom {
    transition:
        background-color var(--hl-dur) ease,
        color            var(--hl-dur) ease,
        border-color     var(--hl-dur) ease;
}


/* =============================================================================
   5. SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: var(--hl-bg); }
::-webkit-scrollbar-thumb        { background: var(--hl-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--hl-gold-hover); }


/* =============================================================================
   6. NAVBAR
   ============================================================================= */

.hl-navbar {
    height: var(--hl-navbar-height);
    background: var(--hl-navbar-initial);
    border-bottom: 1px solid transparent;
    transition:
        background-color 0.35s ease,
        border-color     0.35s ease,
        backdrop-filter  0.35s ease;
    z-index: 1030;
}

/* Scrolled state — added by site.js */
.hl-navbar--scrolled {
    background: var(--hl-navbar-bg) !important;
    border-bottom-color: var(--hl-navbar-border) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ── Brand ─────────────────────────────────────── */
.hl-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hl-font-body);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    color: var(--hl-text) !important;
}

/* Logo image — white background logo works naturally on light navbar.
   On dark theme the pill wrapper keeps it readable. */
.hl-logo-img {
    display: block;
    height: 48px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    padding: 3px 6px;
}

.hl-logo-footer {
    filter: brightness(0) invert(1); /* invert to white for dark footer */
    background: transparent;
    padding: 0;
}

.hl-brand-icon {
    color: var(--hl-primary);
    font-size: 1.25rem;
}

.hl-brand-hoch {
    color: var(--hl-text);
}

.hl-brand-lift {
    color: var(--hl-primary);
}

/* ── Nav Links ─────────────────────────────────── */
.hl-nav-link {
    font-family: var(--hl-font-body);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.3px;
    color: var(--hl-nav-text) !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: var(--hl-radius-sm);
    position: relative;
    transition:
        color            0.2s ease,
        background-color 0.2s ease;
}

.hl-nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: calc(100% - 1.7rem);
    height: 1.5px;
    background: var(--hl-primary);
    transition: transform 0.25s ease;
    transform-origin: center;
}

.hl-nav-link:hover,
.hl-nav-link.active {
    color: var(--hl-nav-text-hover) !important;
}

.hl-nav-link:hover::after,
.hl-nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Dropdown toggle caret */
.hl-nav-link.dropdown-toggle::after {
    display: none; /* hide Bootstrap default caret */
}

.hl-nav-link.dropdown-toggle .fa-chevron-down {
    font-size: 0.65rem;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.hl-nav-link.dropdown-toggle[aria-expanded="true"] {
    color: var(--hl-nav-text-hover) !important;
}

/* Hide the underline pseudo-element on dropdown toggles */
.nav-item.dropdown .hl-nav-link::after {
    display: none;
}

/* ── Dropdowns ─────────────────────────────────── */
.hl-dropdown {
    background: var(--hl-dd-bg);
    border: 1px solid var(--hl-dd-border);
    border-radius: var(--hl-radius);
    padding: 8px;
    min-width: 220px;
    animation: hl-dropdown-in 0.2s ease forwards;
    margin-top: 6px !important;
}

.hl-dropdown-wide {
    min-width: 260px;
}

@keyframes hl-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hl-dropdown-item {
    color: var(--hl-dd-text);
    font-size: 0.875rem;
    font-weight: 400;
    padding: 9px 14px;
    border-radius: var(--hl-radius-sm);
    transition:
        background-color 0.15s ease,
        color            0.15s ease;
    white-space: nowrap;
}

.hl-dropdown-item:hover,
.hl-dropdown-item:focus {
    background-color: var(--hl-dd-hover-bg);
    color: var(--hl-dd-text-hover);
}

.hl-dropdown-item i {
    color: var(--hl-primary);
    opacity: 0.8;
    font-size: 0.8rem;
    width: 1.25rem;
}

.hl-dropdown-divider {
    border-color: var(--hl-border);
    margin: 6px 14px;
    opacity: 1;
}

/* ── Right Controls ────────────────────────────── */
.hl-nav-controls {
    flex-shrink: 0;
}

/* Language selector — cyclic flag switch */
.hl-lang-switch {
    display: inline-flex;
}

.hl-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hl-lang-toggle:hover {
    border-color: var(--hl-primary);
    background: rgba(var(--hl-gold-rgb), 0.08);
}

.hl-flag-icon {
    display: block;
    width: 26px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.hl-lang-toggle .hl-flag-icon {
    width: 24px;
}


/* Theme toggle button */
.hl-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--hl-border);
    border-radius: 50%;
    background: transparent;
    color: var(--hl-nav-text);
    cursor: pointer;
    padding: 0;
    font-size: 0.875rem;
    transition:
        border-color     0.2s ease,
        color            0.2s ease,
        background-color 0.2s ease;
}

.hl-theme-btn:hover {
    border-color: var(--hl-primary);
    color: var(--hl-primary);
    background: rgba(var(--hl-gold-rgb), 0.08);
}

.hl-theme-btn--labeled {
    width: auto;
    padding: 8px 14px;
    border-radius: var(--hl-radius);
    gap: 8px;
}

.hl-theme-btn--dual {
    width: auto;
    min-width: 44px;
    height: 36px;
    padding: 0 11px;
    border-radius: var(--hl-radius);
}

.hl-theme-btn--mobile-menu {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    border-radius: var(--hl-radius-sm);
    border: 1px solid var(--hl-border);
    background: var(--hl-bg-secondary);
}

/* Mobile menu bottom — teklif al + theme icon (offcanvas only) */
.hl-mobile-bottom {
    margin-top: auto;
    flex-shrink: 0;
}

.hl-mobile-theme-bar {
    padding: 12px 24px 20px;
    border-top: 1px solid var(--hl-oc-border);
    text-align: center;
}

/* Mobile footer (quote CTA) */
.hl-mobile-footer {
    padding: 16px 24px 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-top: 1px solid var(--hl-oc-border);
}

.hl-theme-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hl-theme-icon {
    font-size: 0.82rem;
    line-height: 1;
    opacity: 0.35;
    color: var(--hl-nav-text);
    transition:
        opacity   0.2s ease,
        color     0.2s ease,
        transform 0.2s ease;
}

.hl-theme-svg {
    display: block;
    width: 16px;
    height: 16px;
    opacity: 0.35;
    color: var(--hl-nav-text);
    transition:
        opacity   0.2s ease,
        color     0.2s ease,
        transform 0.2s ease;
}

[data-theme="light"] .hl-theme-icon--sun,
[data-theme="light"] .hl-theme-svg--sun {
    opacity: 1;
    color: var(--hl-primary);
    transform: scale(1.1);
}

[data-theme="dark"] .hl-theme-icon--moon,
[data-theme="dark"] .hl-theme-svg--moon {
    opacity: 1;
    color: var(--hl-primary);
    transform: scale(1.1);
}

.hl-theme-label {
    font-size: 0.8rem;
    font-weight: 500;
}

/* CTA Button */
.hl-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    background: var(--hl-primary);
    color: #0B0B0B !important;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.3px;
    border-radius: var(--hl-radius-sm);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        transform        0.15s ease;
}

.hl-cta-btn:hover {
    background: var(--hl-gold-hover);
    transform: translateY(-1px);
    color: #0B0B0B !important;
}

.hl-cta-btn:active {
    transform: translateY(0);
}

.hl-cta-btn--full {
    width: 100%;
    justify-content: center;
}

/* ── Mobile toolbar (flag + menu) ──────────────── */
.hl-mobile-toolbar {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 4;
}

.hl-lang-switch--toolbar {
    flex-shrink: 0;
}

/* ── Mobile Toggler — classic 3-line hamburger ─── */
.hl-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    color: var(--hl-nav-text);
    cursor: pointer;
    transition:
        border-color     0.2s ease,
        background-color 0.2s ease,
        color            0.2s ease;
}

.hl-hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
    height: 16px;
}

.hl-hamburger-line {
    display: block;
    width: 100%;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

[data-theme="dark"] .hl-toggler {
    color: var(--hl-nav-text);
}

.hl-toggler:hover {
    border-color: var(--hl-primary);
    background: rgba(var(--hl-gold-rgb), 0.10);
    color: var(--hl-nav-text-hover);
}

[data-theme="dark"] .hl-toggler:hover {
    color: var(--hl-primary);
}


/* =============================================================================
   7. MOBILE OFFCANVAS
   ============================================================================= */

.hl-offcanvas {
    width: 320px;
    background: var(--hl-oc-bg);
    border-left: 1px solid var(--hl-oc-border);
}

.hl-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--hl-oc-border);
}

.hl-offcanvas-brand {
    text-decoration: none;
    color: inherit;
}

.hl-offcanvas-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    color: var(--hl-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    transition:
        border-color 0.2s ease,
        color        0.2s ease;
}

.hl-offcanvas-close:hover {
    border-color: var(--hl-primary);
    color: var(--hl-primary);
}

.hl-offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 79px);
    overflow-y: auto;
}

/* Mobile Nav */
.hl-mobile-nav {
    flex: 1;
    padding: 16px 0;
}

.hl-mobile-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--hl-text);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color            0.15s ease;
    gap: 0;
}

.hl-mobile-link span {
    display: flex;
    align-items: center;
    flex: 1;
}

.hl-mobile-link i.fa-fw {
    width: 1.25rem;
    color: var(--hl-primary);
    margin-right: 12px;
    font-size: 0.9rem;
}

.hl-mobile-link:hover,
.hl-mobile-link:focus {
    background-color: rgba(var(--hl-gold-rgb), 0.06);
    color: var(--hl-primary);
    outline: none;
}

/* Accordion toggle */
.hl-mobile-toggle {
    justify-content: space-between;
}

.hl-chevron {
    font-size: 0.7rem;
    color: var(--hl-text-muted);
    transition: transform 0.25s ease, color 0.2s ease;
}

.hl-mobile-toggle[aria-expanded="true"] .hl-chevron {
    transform: rotate(180deg);
    color: var(--hl-primary);
}

/* Mobile sub-links */
.hl-mobile-sub-wrap {
    background: rgba(var(--hl-gold-rgb), 0.04);
    border-left: 2px solid var(--hl-primary);
    margin: 0 24px;
    border-radius: 0 0 var(--hl-radius-sm) var(--hl-radius-sm);
}

.hl-mobile-sub {
    display: block;
    padding: 10px 18px;
    font-size: 0.825rem;
    font-weight: 400;
    color: var(--hl-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.hl-mobile-sub:hover {
    color: var(--hl-primary);
}

.hl-mobile-group {
    /* wraps toggle + collapse */
}


/* =============================================================================
   8. FOOTER
   ============================================================================= */

.hl-footer {
    background: var(--hl-footer-bg);
    border-top: 1px solid var(--hl-footer-border);
}

/* ── Main area ─────────────────────────────────── */
.hl-footer-main {
    background: var(--hl-footer-top-bg);
    padding: 72px 0 64px;
}

.hl-footer-brand {
    font-size: 1.5rem;
    color: var(--hl-text) !important;
    display: inline-block;
    margin-bottom: 16px;
}

.hl-footer-brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 340px;
    text-align: center;
}

.hl-footer-tagline {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--hl-footer-text);
    max-width: 340px;
    margin-bottom: 0;
    text-align: center;
}

/* Social icons */
.hl-social-row {
    display: flex;
    gap: 10px;
}

.hl-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--hl-footer-border);
    border-radius: 50%;
    color: var(--hl-footer-link);
    font-size: 0.875rem;
    text-decoration: none;
    transition:
        border-color     0.2s ease,
        color            0.2s ease,
        background-color 0.2s ease;
}

.hl-social:hover {
    border-color: var(--hl-primary);
    color: var(--hl-primary);
    background: rgba(var(--hl-gold-rgb), 0.10);
}

/* Contact info */
.hl-footer-contact .hl-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.825rem;
    color: var(--hl-footer-text);
    margin-bottom: 10px;
}

.hl-footer-contact .hl-contact-item:last-child {
    margin-bottom: 0;
}

.hl-contact-brand {
    display: inline-block;
    background: transparent;
    line-height: 1.2;
    --hl-cb-fg: var(--hl-text);
    --hl-cb-fg-muted: var(--hl-text-muted);
    --hl-cb-badge-bg: var(--hl-text);
    --hl-cb-badge-fg: var(--hl-bg);
    --hl-cb-hover: var(--hl-primary);
    color: var(--hl-cb-fg);
}

.hl-cb-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hl-cb-headset {
    flex-shrink: 0;
    color: var(--hl-cb-fg);
    line-height: 0;
}

.hl-cb-headset-svg {
    display: block;
    width: var(--hl-cb-headset-size, 44px);
    height: var(--hl-cb-headset-size, 44px);
}

.hl-cb-badge-fill {
    fill: var(--hl-cb-badge-bg);
}

.hl-cb-badge-label {
    fill: var(--hl-cb-badge-fg);
}

.hl-cb-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hl-cb-phone {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    text-decoration: none;
    color: var(--hl-cb-fg);
    transition: color 0.2s ease;
}

.hl-cb-phone:hover {
    color: var(--hl-cb-hover);
}

.hl-cb-phone-seg {
    font-family: var(--hl-font-body, Inter, Arial, sans-serif);
    font-size: var(--hl-cb-phone-size, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.hl-cb-hoch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 1px;
    color: var(--hl-cb-fg);
}

.hl-cb-hoch-line {
    display: flex;
    gap: 3px;
    line-height: 1;
}

.hl-cb-hoch-line span {
    display: block;
    width: 0.55em;
    text-align: center;
    font-family: var(--hl-font-body, Inter, Arial, sans-serif);
    font-weight: 700;
}

.hl-cb-hoch-line:not(.hl-cb-hoch-letters) span {
    font-size: var(--hl-cb-hoch-digit, 0.72rem);
}

.hl-cb-hoch-letters span {
    font-size: var(--hl-cb-hoch-letter, 0.55rem);
    font-weight: 600;
    letter-spacing: 0;
}

.hl-cb-email {
    font-family: var(--hl-font-body, Inter, Arial, sans-serif);
    font-size: var(--hl-cb-email-size, 0.78rem);
    font-style: italic;
    font-weight: 500;
    color: var(--hl-cb-fg-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hl-cb-email:hover {
    color: var(--hl-cb-hover);
}

.hl-contact-brand--sm {
    --hl-cb-headset-size: 34px;
    --hl-cb-phone-size: 1.05rem;
    --hl-cb-hoch-digit: 0.58rem;
    --hl-cb-hoch-letter: 0.46rem;
    --hl-cb-email-size: 0.68rem;
}

.hl-contact-brand--md {
    --hl-cb-headset-size: 44px;
    --hl-cb-phone-size: 1.35rem;
    --hl-cb-hoch-digit: 0.72rem;
    --hl-cb-hoch-letter: 0.55rem;
    --hl-cb-email-size: 0.78rem;
}

.hl-contact-brand--lg {
    --hl-cb-headset-size: 52px;
    --hl-cb-phone-size: 1.6rem;
    --hl-cb-hoch-digit: 0.85rem;
    --hl-cb-hoch-letter: 0.65rem;
    --hl-cb-email-size: 0.9rem;
}

/* Footer — koyu arka plan */
.hl-footer-contact .hl-contact-brand {
    --hl-cb-fg: #FFFFFF;
    --hl-cb-fg-muted: var(--hl-footer-text);
    --hl-cb-badge-bg: var(--hl-primary);
    --hl-cb-badge-fg: #001F3B;
    --hl-cb-hover: var(--hl-footer-link-hover);
}

.hl-info-item--brand {
    border: none;
    padding: 4px 0;
    background: transparent;
}

.hl-footer-contact .hl-contact-item i {
    margin-top: 2px;
    flex-shrink: 0;
}

.hl-footer-contact a {
    color: var(--hl-footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hl-footer-contact a:hover {
    color: var(--hl-primary);
}

/* Footer link columns */
.hl-footer-heading {
    font-family: var(--hl-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hl-footer-heading);
    margin-bottom: 18px;
}

.hl-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hl-footer-list a {
    font-size: 0.875rem;
    color: var(--hl-footer-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hl-footer-list a:hover {
    color: var(--hl-footer-link-hover);
}

/* ── Certifications Strip ──────────────────────── */
.hl-footer-certs {
    background: var(--hl-certs-bg);
    border-top: 1px solid var(--hl-footer-border);
    border-bottom: 1px solid var(--hl-footer-border);
    padding: 20px 0;
}

.hl-cert {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--hl-certs-text);
}

.hl-cert i {
    color: var(--hl-primary);
    opacity: 0.7;
}

.hl-cert-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--hl-footer-border);
}

/* ── Bottom Bar ────────────────────────────────── */
.hl-footer-bottom {
    background: var(--hl-bottom-bg);
    padding: 18px 0;
}

.hl-copyright {
    font-size: 0.8rem;
    color: var(--hl-bottom-text);
}

.hl-legal-link {
    font-size: 0.8rem;
    color: var(--hl-bottom-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hl-legal-link:hover {
    color: var(--hl-bottom-link-hover);
}

.hl-legal-sep {
    font-size: 0.8rem;
    color: var(--hl-bottom-text);
    opacity: 0.5;
}


/* =============================================================================
   9. SHARED SECTION TYPOGRAPHY
   ============================================================================= */

.hl-section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--hl-primary);
    margin-bottom: 12px;
}

.hl-section-title {
    font-family: var(--hl-font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--hl-text);
    line-height: 1.2;
    margin-bottom: 20px;
}

.hl-body-text {
    font-size: 0.975rem;
    line-height: 1.75;
    color: var(--hl-text-muted);
    margin-bottom: 16px;
}

.hl-section-head {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.hl-section-head .hl-section-title {
    margin-bottom: 0;
}

/* ─── Page Hero (inner pages) ─────────────────── */
.hl-page-hero {
    padding-top: calc(var(--hl-navbar-height) + 48px);
    padding-bottom: 56px;
    background: var(--hl-bg-secondary);
    border-bottom: 1px solid var(--hl-border);
}

.hl-page-hero-title {
    font-family: var(--hl-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--hl-text);
    margin-bottom: 12px;
}

.hl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.825rem;
    color: var(--hl-text-muted);
}

.hl-breadcrumb a {
    color: var(--hl-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hl-breadcrumb a:hover { color: var(--hl-primary); }
.hl-breadcrumb-sep     { opacity: 0.4; }
.hl-breadcrumb-current { color: var(--hl-primary); }

/* =============================================================================
   10. UTILITIES
   ============================================================================= */

.hl-section {
    padding: var(--hl-section-py) 0;
}

.hl-section--alt {
    background: var(--hl-bg-secondary);
}

/* Focus visible — keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--hl-primary);
    outline-offset: 3px;
}

/* Selection */
::selection {
    background: rgba(var(--hl-gold-rgb), 0.30);
    color: var(--hl-text);
}


/* =============================================================================
   MOBILE OVERFLOW PREVENTION
   Critical: prevents horizontal scroll on any screen width.
   ============================================================================= */

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

/* =============================================================================
   HOVER DROPDOWNS (desktop)
   Dropdown parent links navigate directly (<a asp-controller…>).
   Menus open on hover. We use visibility/opacity (not display) so we can add
   a hide-delay — this prevents the menu from vanishing while the cursor moves
   diagonally from the parent link toward a menu item.
   ============================================================================= */

@media (min-width: 992px) {

    /* Base hidden state — kept in DOM so hover area is contiguous.
       visibility:hidden also blocks pointer events, so no need for pointer-events:none.
       The 220ms delay on hiding visibility is the key: the dropdown stays interactive
       while the cursor moves diagonally from the parent link into the menu. */
    .hl-navbar .nav-item.dropdown > .dropdown-menu {
        display:    block;
        visibility: hidden;
        opacity:    0;
        transform:  translateY(6px);
        transition: opacity 0.18s ease,
                    transform 0.18s ease,
                    visibility 0s linear 0.22s; /* vanish only after fade completes */
        margin-top: 2px;
    }

    /* Open state — show immediately, cancel the delayed hide */
    .hl-navbar .nav-item.dropdown:hover > .dropdown-menu,
    .hl-navbar .nav-item.dropdown:focus-within > .dropdown-menu {
        visibility: visible;
        opacity:    1;
        transform:  translateY(0);
        transition: opacity 0.18s ease,
                    transform 0.18s ease,
                    visibility 0s linear 0s; /* visibility visible immediately */
    }

    /* Small chevron on parent nav link */
    .hl-nav-drop-caret {
        font-size:      0.6rem;
        opacity:        0.55;
        margin-left:    4px;
        vertical-align: middle;
        transition:     transform 0.2s ease, opacity 0.2s ease;
    }

    .hl-navbar .nav-item.dropdown:hover .hl-nav-drop-caret {
        transform: rotate(180deg);
        opacity:   0.9;
    }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* Medium screens */
@media (max-width: 991.98px) {
    .hl-navbar {
        height: 64px;
    }

    .hl-page-offset {
        padding-top: 64px;
    }

    .hl-navbar > .container-xl {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
    }

    .hl-navbar .navbar-brand {
        position: relative;
        z-index: 5;
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 96px);
        margin-right: 8px;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .hl-navbar .navbar-brand .hl-logo-img {
        pointer-events: none;
    }

    .hl-navbar .hl-logo-img {
        height: 40px;
    }

    /* Hide desktop nav links on mobile — only logo + hamburger show */
    .hl-navbar .navbar-collapse {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .hl-mobile-toolbar {
        display: flex !important;
        z-index: 4;
    }

    /* Mobile toolbar buttons — balanced: visible but on-theme */
    .hl-mobile-toolbar .hl-toggler,
    .hl-mobile-toolbar .hl-lang-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
        border: 1px solid rgba(var(--hl-gold-rgb), 0.32);
        border-radius: var(--hl-radius-sm);
        background: var(--hl-bg-card);
        color: var(--hl-nav-text);
        box-shadow: 0 1px 4px rgba(0, 31, 59, 0.08);
    }

    [data-theme="light"] .hl-mobile-toolbar .hl-toggler,
    [data-theme="light"] .hl-mobile-toolbar .hl-lang-toggle {
        background: #fff;
        border-color: rgba(0, 31, 59, 0.14);
    }

    [data-theme="dark"] .hl-mobile-toolbar .hl-toggler,
    [data-theme="dark"] .hl-mobile-toolbar .hl-lang-toggle {
        background: var(--hl-bg-card);
        border-color: rgba(var(--hl-gold-rgb), 0.28);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    }

    .hl-mobile-toolbar .hl-toggler:hover,
    .hl-mobile-toolbar .hl-lang-toggle:hover {
        border-color: var(--hl-primary);
        background: rgba(var(--hl-gold-rgb), 0.12);
    }

    /* Hero (unscrolled) — frosted pill, readable on slider */
    body.has-hero .hl-navbar:not(.hl-navbar--scrolled) .hl-mobile-toolbar .hl-toggler,
    body.has-hero .hl-navbar:not(.hl-navbar--scrolled) .hl-mobile-toolbar .hl-lang-toggle {
        background: rgba(255, 255, 255, 0.90);
        border-color: rgba(254, 175, 3, 0.42);
        color: var(--hl-navy);
        box-shadow: 0 2px 8px rgba(0, 31, 59, 0.14);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    [data-theme="dark"] body.has-hero .hl-navbar:not(.hl-navbar--scrolled) .hl-mobile-toolbar .hl-toggler,
    [data-theme="dark"] body.has-hero .hl-navbar:not(.hl-navbar--scrolled) .hl-mobile-toolbar .hl-lang-toggle {
        background: rgba(10, 42, 74, 0.88);
        border-color: rgba(254, 175, 3, 0.38);
        color: var(--hl-text);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    body.has-hero .hl-navbar:not(.hl-navbar--scrolled) .hl-mobile-toolbar .hl-toggler:hover,
    body.has-hero .hl-navbar:not(.hl-navbar--scrolled) .hl-mobile-toolbar .hl-lang-toggle:hover {
        border-color: var(--hl-primary);
        background: rgba(254, 175, 3, 0.16);
    }

    /* Mobilde tema yalnızca açık menünün içinde */
    .hl-navbar .hl-theme-btn {
        display: none !important;
    }
}

/* Small screens */
@media (max-width: 575.98px) {
    .hl-footer-main {
        padding: 48px 0 40px;
    }

    .hl-offcanvas {
        width: 100vw;
    }

    /* Logo: slightly smaller on small phones */
    .hl-logo-img {
        height: 38px;
    }

    /* CTA button: allow wrap on very small phones */
    .hl-cta-btn {
        font-size: 0.82rem;
        padding: 8px 14px;
    }

    /* Section spacing tighter on mobile */
    :root {
        --hl-section-py: 56px;
    }
}

/* Extra small — 320px phones */
@media (max-width: 359.98px) {
    .hl-logo-img {
        height: 32px;
    }

    .hl-section-title {
        font-size: 1.5rem;
    }

    .hl-page-hero-title {
        font-size: 1.75rem;
    }
}

/* About badge: prevent overflow on tablets where container isn't full-width yet */
@media (max-width: 991.98px) {
    .hl-about-img-wrap {
        overflow: visible;
        padding-right: 20px; /* leave room for the badge */
    }
}

/* Footer columns: ensure proper stacking with spacing on mobile */
@media (max-width: 767.98px) {
    .hl-footer-main .row > [class*="col-"] + [class*="col-"] {
        border-top: 1px solid var(--hl-footer-border);
        padding-top: 28px;
    }

    .hl-cert-sep {
        display: none;
    }
}

/* Navbar right controls: compact lang toggle on very narrow screens */
@media (max-width: 399.98px) {
    .hl-lang-toggle {
        width: 34px;
        height: 34px;
    }
    .hl-flag-icon {
        width: 22px;
    }
}