/* ==========================================================================
   WEBCRAFT — Design DNA
   Monochrome ground (white / near-black / gray) · sans display
   Matches trueform.agency's confirmed palette — see design-direction memory
   ========================================================================== */
:root {
    /* Surface */
    --press:      #FFFFFF;
    --press-2:    #F5F5F5;
    --press-3:    #EFEFEF;
    --paper:      #0F0F0F;

    /* Ink on white */
    --ink:        #0F0F0F;
    --ink-dim:    rgba(15, 15, 15, 0.62);
    --ink-mute:   rgba(15, 15, 15, 0.40);

    /* Lines */
    --line:        rgba(15, 15, 15, 0.12);
    --line-strong: rgba(15, 15, 15, 0.24);

    /* Accent — trueform runs fully monochrome, no color accent; kept as
       aliases of ink so nothing breaks, not meant to introduce color */
    --ember:      #0F0F0F;
    --sage:       #0F0F0F;

    /* Type */
    --title: 'Geist', 'Helvetica Neue', Arial, sans-serif;
    --text:  'Geist', 'Helvetica Neue', Arial, sans-serif;
    --mono:  'Geist', 'Helvetica Neue', Arial, sans-serif;

    --ease:  cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.25s var(--ease);
    --t-norm: 0.45s var(--ease);
    --t-slow: 0.9s var(--ease);

    --r:   12px;
    --pill: 999px;

    --edge: max(32px, calc((100vw - 1400px) / 2));
    --maxw: 1400px;
}

/* Geniş ekranlarda içerik kutusunu büyüt — boş kenar boşlukları abartılı kalmasın */
@media (min-width: 1700px) {
    :root {
        --maxw: 1600px;
        --edge: max(32px, calc((100vw - 1600px) / 2));
    }
}
@media (min-width: 2000px) {
    :root {
        --maxw: 1800px;
        --edge: max(32px, calc((100vw - 1800px) / 2));
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--text);
    background: var(--press);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    font-weight: 400;
    overflow-x: hidden;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; transition: color var(--t-fast), opacity var(--t-fast); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--edge);
}

/* ==========================================================================
   Scroll progress (injected by script.js)
   ========================================================================== */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 1px;
    width: 0;
    background: var(--paper);
    z-index: 10000;
    opacity: 0.5;
}

/* Floating contact bubble (injected by script.js, every page but iletisim.html) */
.contact-bubble {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--paper);
    color: var(--press);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 22px 8px 8px;
    border-radius: var(--pill);
    box-shadow: 0 10px 28px rgba(15, 15, 15, 0.2);
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.contact-bubble .bubble-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ember);
    color: var(--press);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: background var(--t-fast);
}
.contact-bubble:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 14px 34px rgba(15, 15, 15, 0.26);
}
.contact-bubble:hover .bubble-icon { background: var(--press); color: var(--ember); }
@media (max-width: 620px) {
    .contact-bubble { bottom: 16px; padding: 4px; gap: 0; }
    .contact-bubble span:not(.bubble-icon) { display: none; }
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--title);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.021em;
    font-optical-sizing: auto;
}

h1 {
    font-size: clamp(2.75rem, 6.2vw, 7.2rem);
    margin-bottom: 28px;
}
h2 {
    font-size: clamp(2.1rem, 4vw, 4.4rem);
    margin-bottom: 20px;
}
h3 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}
h4 { font-size: 1rem; font-weight: 500; }

p { text-wrap: pretty; }

.highlight {
    font-style: normal;
    font-weight: 600;
    color: var(--paper);
}

/* Mono micro-label */
.section-badge,
.badge,
.project-client,
.channel-label,
.standards-label,
.stat-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 22px;
    line-height: 1.5;
}

.badge {
    border: 1px solid var(--line);
    border-radius: var(--pill);
    padding: 8px 16px;
    color: var(--ink-dim);
}

.badge-divider { color: var(--line-strong); margin: 0 2px; }

.dot, .dot-green {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ember);
    display: inline-block;
    flex-shrink: 0;
}
.dot-green { background: var(--sage); }

.text-primary, .text-cyan { color: var(--ink); }
.text-green { color: var(--sage); }
.text-light { color: var(--paper); }
.w-100 { width: 100%; }
.justify-center { justify-content: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    padding: 15px 20px;
    border-radius: var(--pill);
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.btn i { font-size: 0.95rem; flex-shrink: 0; display: inline-flex; }
.btn i[class*="arrow"] {
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.7rem;
}
.btn:hover { background: rgba(15, 15, 15, 0.05); border-color: var(--line-strong); }

.btn-primary,
.btn-primary-lg {
    background: var(--paper);
    color: var(--press);
    border-color: var(--paper);
}
.btn-primary:hover,
.btn-primary-lg:hover { background: transparent; color: var(--paper); }
.btn-primary-lg { padding: 17px 26px; }

.btn-whatsapp-outline { color: var(--ink-dim); padding: 12px 16px; }
.btn-whatsapp-outline:hover { color: var(--paper); }

.btn-whatsapp-lg,
.btn-instagram-lg,
.btn-secondary,
.btn-secondary-lg { padding: 17px 26px; color: var(--ink); }
.btn-instagram-lg i, .btn-secondary-lg i { border: none; width: auto; height: auto; font-size: 1rem; }
.btn-secondary-lg div { text-align: left; line-height: 1.3; letter-spacing: 0.08em; }

.btn-whatsapp-sm {
    padding: 12px 18px;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    display: inline-flex;
    color: var(--ink);
}
.btn-whatsapp-sm:hover { background: rgba(15, 15, 15, 0.05); }

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink);
    transition: gap var(--t-fast), color var(--t-fast);
}
.btn-link i { transition: transform var(--t-fast); }
.btn-link:hover { color: var(--paper); }
.btn-link:hover i { transform: translateX(4px); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    padding: 22px 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--t-norm), padding var(--t-norm), border-color var(--t-norm);
}
.navbar.scrolled {
    padding: 14px 0;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.logo {
    font-family: var(--title);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--paper);
}
.logo i { font-size: 1.1rem; color: var(--ember); }

.nav-links {
    display: flex;
    gap: 30px;
    margin: 0 auto;
}
.nav-links a {
    font-family: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--pill);
    transition: background var(--t-fast), color var(--t-fast);
}
.nav-links a:hover { background: var(--press-2); color: var(--paper); }
.nav-links a.active { background: var(--paper); color: var(--press); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { padding: 6px 14px; font-size: 0.75rem; }

.user-btn, .mobile-menu-btn {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast);
}
.mobile-menu-btn { display: none; }
.mobile-menu-btn:hover { background: rgba(15, 15, 15, 0.05); }

/* Colour changes between the transparent-over-dark-hero and scrolled/open
   states were instant while the background faded over .45s, which flashed a
   white logo on a pale bar mid-transition. Animate them together. */
.logo, .logo i, .mobile-menu-btn { transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }
.navbar.scrolled { background: rgba(255, 255, 255, 0.92); }

/* Light-on-dark only while the bar is transparent over the dark hero — not
   once scrolled, and not while the mobile menu is open (open = solid white). */
.navbar.navbar-home:not(.scrolled):not(.nav-open) .logo,
.navbar.navbar-home:not(.scrolled):not(.nav-open) .logo i { color: #FFFFFF; }
.navbar.navbar-home:not(.scrolled):not(.nav-open) .nav-links a { color: rgba(255, 255, 255, 0.7); }
.navbar.navbar-home:not(.scrolled):not(.nav-open) .nav-links a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.navbar.navbar-home:not(.scrolled):not(.nav-open) .nav-links a.active { color: #000000; background: #FFFFFF; }
.navbar.navbar-home:not(.scrolled):not(.nav-open) .btn-primary { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.navbar.navbar-home:not(.scrolled):not(.nav-open) .btn-whatsapp-outline { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.3); }
.navbar.navbar-home:not(.scrolled):not(.nav-open) .btn-whatsapp-outline:hover { color: #FFFFFF; border-color: #FFFFFF; }
.navbar.navbar-home:not(.scrolled):not(.nav-open) .mobile-menu-btn { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); }
.nav-links .nav-cta { display: none; }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
main { position: relative; z-index: 2; }

section {
    padding: clamp(88px, 13vh, 168px) 0;
    border-top: 1px solid var(--line);
    position: relative;
}
.hero { border-top: none; }

.section-header {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    gap: 28px 64px;
    align-items: end;
    margin-bottom: 76px;
}
.section-header h2 { max-width: 18ch; }
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 64px;
}
.section-header-row h2 { margin-bottom: 0; }
.section-desc {
    color: var(--ink-dim);
    font-size: 1.02rem;
    max-width: 42ch;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 40px 0;
    position: relative;
    background: #0A0A0A;
    color: var(--ink);
    /* Flip the shared ink/paper tokens to light-on-dark for everything
       inside the hero (h1/p/.btn all already read these vars, so this
       alone re-themes the headline, body copy and both buttons without
       duplicating their rules) — paper/press are swapped too so
       .btn-primary-lg (bg:paper, text:press) renders as a white pill
       with black text instead of a black-on-black button. */
    --ink: #FFFFFF;
    --ink-dim: rgba(255, 255, 255, 0.72);
    --ink-mute: rgba(255, 255, 255, 0.45);
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.28);
    --paper: #FFFFFF;
    --press: #0A0A0A;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(52% 48% at 50% 52%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 72%),
        radial-gradient(80% 55% at 22% 88%, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 60%);
}
.hero .btn:hover { background: rgba(255, 255, 255, 0.08); }
.hero-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 56px;
    width: 100%;
    position: relative;
    z-index: 2;
}
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 620px;
}
.hero-content h1 { letter-spacing: -0.03em; font-size: clamp(2.75rem, 4.5vw, 5rem); }
.hero-content p {
    font-size: 1.14rem;
    color: var(--ink-dim);
    margin: 0 0 44px;
    max-width: 52ch;
}
.hero-buttons { justify-content: flex-start; }

/* Rotating word in the headline */
.rotate-word {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
.rotate-word > span {
    display: inline-block;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.rotate-word.is-out > span { opacity: 0; transform: translateY(-0.32em); }
@media (prefers-reduced-motion: reduce) {
    .rotate-word > span { transition: none; }
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 0; }
.hero-stats { display: flex; gap: 56px; margin-top: 64px; }
.stat-number { font-family: var(--title); font-size: 2.6rem; font-weight: 300; line-height: 1; margin-bottom: 10px; }

.hero-3d-showcase {
    position: relative;
    width: 100%;
    min-height: 600px;
    /* The viewer below is intentionally oversized + bled off the left edge
       (desktop-tuned fixed px values) — overflow:hidden keeps that bleed
       contained to this box instead of pushing the whole page wider, which
       is what was happening at narrow widths (the box itself stayed put,
       but the 900px viewer inside it was forcing real horizontal page
       overflow, showing as a white strip past the hero's right edge). */
    overflow: hidden;
}
.hero-3d-showcase spline-viewer {
    position: absolute;
    width: 900px;
    height: 900px;
    top: 50%;
    left: -350px;
    transform: translateY(-50%);
    /* Was pointer-events:none — that silently disabled the orb's mouse-
       reactive behavior entirely (it never received hover/move events).
       Needs to stay interactive for the cursor-follow effect to work. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 calc(100% - 70px));
}

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.service-card {
    background: #FAFAFA;
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    transition: background var(--t-norm);
}
.service-card:hover { background: var(--press-3); }
.service-num {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    margin-bottom: 28px;
}
.service-card h3 {
    font-family: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.2rem;
    margin-bottom: 14px;
}
.service-card p { color: var(--ink-dim); font-size: 0.92rem; margin-bottom: 24px; }
.service-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
    margin-top: auto;
    border-top: 1px solid var(--line);
}
.service-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
}
.service-meta i { font-size: 0.85rem; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.service-tags span {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border: 1px solid var(--line);
    padding: 5px 9px;
    border-radius: var(--r);
}

/* ==========================================================================
   Portfolio / Projects cards
   ========================================================================== */

/* Shared footer for every "preview card" grid (blog uses this too) */
.card-footer {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: auto;
}

/* Projects page grid (with imagery) — plain side-by-side grid, every card equal size */
.projects-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
/* Featured pair above the grid: one wide card + one narrow card, each sized by
   its own aspect-ratio (no stretching/cropping) — matches trueform's own Work row */
.projects-featured-row {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 28px;
}
.projects-featured-row .project-card:nth-child(1) { flex: 1.6; min-width: 0; }
.projects-featured-row .project-card:nth-child(2) { flex: 1; min-width: 0; }
.project-card {
    background: var(--press-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--t-norm), transform var(--t-norm);
}
.project-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
/* Colored mat behind an inset, framed screenshot — one accent tone per project */
.project-img-container {
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 32px;
    border-bottom: 1px solid var(--line);
}
.project-img-container.tone-navy { background: #1E2A47; }
.project-img-container.tone-teal { background: #26584F; }
.project-img-container.tone-umber { background: #4A2E22; }
.browser-mockup {
    width: 100%;
    border-radius: 10px;
    background-color: #1a1a1a;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-slow);
}

.browser-mockup-header {
    height: 24px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.browser-mockup-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.browser-mockup-header .dot.red { background-color: #ff5f56; }
.browser-mockup-header .dot.yellow { background-color: #ffbd2e; }
.browser-mockup-header .dot.green { background-color: #27c93f; }

.browser-mockup img {
    display: block;
    width: 100%;
    height: auto;
    /* All project screenshots are ~1.97:1. Sizing the image by its own ratio
       (instead of cropping it into a fixed-height slot) keeps the page's
       left/right edges — logo, CTA button — from being cut off. */
    aspect-ratio: 1000 / 508;
    object-fit: cover;
    object-position: top;
}

.project-card:hover .browser-mockup { transform: scale(1.03); }
.project-info { padding: 28px; display: flex; flex-direction: column; flex-grow: 1; background: none; }
.project-info h3 { margin-bottom: 14px; transition: color var(--t-fast); }
.project-card:hover .project-info h3 { color: var(--paper); }
.project-info p { color: var(--ink-dim); font-size: 0.9rem; margin-bottom: 26px; flex-grow: 1; }
.project-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.blog-card {
    background: #FAFAFA;
    border-radius: 16px;
    padding: 24px;
    transition: background var(--t-norm);
    display: flex;
    flex-direction: column;
}
.blog-card:hover { background: var(--press-3); }
.blog-card:hover .btn-link { color: var(--paper); }
.blog-card:hover .btn-link i { transform: translateX(4px); }
.blog-card-media {
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    overflow: hidden;
}
.blog-card-media i { font-size: 2.2rem; color: var(--press); opacity: 0.85; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-meta { display: flex; gap: 18px; margin-bottom: 22px; }
.blog-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.blog-card h3 { font-size: 1.2rem; margin-bottom: 14px; }
.blog-card p {
    color: var(--ink-dim);
    font-size: 0.92rem;
    margin-bottom: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog detail */
.blog-detail-hero {
    padding: 200px 0 72px;
    text-align: left;
    border-top: none;
}
.blog-detail-header { max-width: 900px; }
.blog-detail-header h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin-top: 26px; }
.blog-detail-media {
    aspect-ratio: 21 / 9;
    border-radius: var(--r);
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    overflow: hidden;
}
.blog-detail-media i { font-size: 3.4rem; color: var(--press); opacity: 0.85; }
.blog-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-detail-content { padding: 72px 0; }
.blog-detail-content p { color: var(--ink-dim); }
.blog-detail-content h3 { color: var(--paper); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-container {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 72px;
}
.faq-info p { color: var(--ink-dim); margin-bottom: 40px; max-width: 38ch; }
.faq-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-header {
    padding: 26px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    cursor: pointer;
}
.accordion-header h3 {
    font-family: var(--text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    color: var(--ink-dim);
    transition: color var(--t-fast);
}
.accordion-item:hover .accordion-header h3 { color: var(--paper); }
.accordion-toggle {
    background: transparent;
    border: 1px solid var(--line-strong);
    width: 30px; height: 30px;
    border-radius: 50%;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--t-norm), background var(--t-fast);
}
.accordion-item.active .accordion-toggle { transform: rotate(135deg); background: rgba(15, 15, 15, 0.05); }
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-norm), padding var(--t-norm);
}
.accordion-body p { color: var(--ink-dim); font-size: 0.92rem; max-width: 60ch; }
.accordion-item.active .accordion-body { max-height: 320px; padding: 0 4px 28px; }
.accordion-item.active .accordion-header h3 { color: var(--paper); }


/* ==========================================================================
   CTA
   ========================================================================== */
.cta-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 44px;
    padding: 0;
}
.cta-card::before { content: none; }
.cta-content { width: 100%; }
.cta-content h2 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); max-width: 22ch; }
.cta-content p { color: var(--ink-dim); margin-top: 22px; max-width: 48ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-center { text-align: center; }
.cta-center .badge, .cta-center .section-badge { margin-inline: auto; }
.cta-center p { margin-inline: auto; }
.cta-actions-center { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 36px 0 28px; }
.cta-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    flex-wrap: wrap;
}
.cta-trust span { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    padding: 90px 0 44px;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 2;
}
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 72px;
}
.footer-brand .logo { margin-bottom: 22px; }
.footer-brand p { color: var(--ink-dim); font-size: 0.9rem; margin-bottom: 22px; max-width: 40ch; }
.certification {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.footer-links h4, .footer-contact h4, .footer-social h4 {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 24px;
}
.footer-links ul { display: flex; flex-direction: column; gap: 13px; }
.footer-links a, .footer-contact p, .footer-social p { color: var(--ink-dim); font-size: 0.9rem; }
.footer-links a:hover { color: var(--paper); }
.footer-contact p { margin-bottom: 14px; }
.footer-contact .phone { font-family: var(--title); font-size: 1.3rem; font-weight: 300; color: var(--paper); }
.social-handle { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; display: inline-block; margin-bottom: 16px; color: var(--ink); }
.footer-social p { margin-bottom: 14px; }
.footer-link-sm {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-dim);
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 16px;
}
.footer-bottom p { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.footer-legal { display: flex; gap: 26px; }
.footer-legal a { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.footer-legal a:hover { color: var(--paper); }

/* ==========================================================================
   Projects hero / filters
   ========================================================================== */
.projects-hero, .contact-hero { padding: 200px 0 88px; border-top: none; }
.projects-hero-inner, .contact-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    flex-wrap: wrap;
}
.projects-hero-content, .contact-hero-content { max-width: 640px; }
.projects-hero-content p, .contact-hero-content p { color: var(--ink-dim); font-size: 1.05rem; }
.projects-hero-content { max-width: 820px; }
.projects-hero-content h1 { font-size: clamp(2.75rem, 5vw, 5rem); white-space: nowrap; }
.contact-hero-content { max-width: 900px; }
.contact-hero-content h1 { font-size: clamp(2.75rem, 5vw, 5rem); white-space: nowrap; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.filter-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-mute);
    padding: 10px 16px;
    border-radius: var(--pill);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.filter-btn:hover { color: var(--paper); }
.filter-btn.active { color: var(--press); background: var(--paper); border-color: var(--paper); }
.projects-hero-stats { display: flex; gap: 48px; }
.stat-item-alt { text-align: right; }
.stat-number-alt { font-family: var(--title); font-size: 3rem; font-weight: 300; line-height: 1; margin-bottom: 8px; }
.projects-grid-section { padding-top: 0; border-top: none; padding-bottom: clamp(88px, 13vh, 168px); }

/* Case study (kept minimal) */
.case-study-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.badge-blue { color: var(--ink-mute); }
.case-study-content h2 { margin: 18px 0; }
.case-study-content p { color: var(--ink-dim); margin-bottom: 36px; }
.testimonial-author { display: flex; align-items: center; gap: 16px; }
.author-avatar { font-size: 2.6rem; color: var(--ink-mute); }
.testimonial-author strong { display: block; }
.testimonial-author span { font-size: 0.875rem; color: var(--ink-dim); }
.case-study-metrics { border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.metrics-chart { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 20px; }
.chart-header { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; color: var(--ink-mute); }
.chart-img { width: 100%; border-radius: var(--r); filter: grayscale(0.4) brightness(0.9); }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.metric-box { border: 1px solid var(--line); padding: 16px; border-radius: var(--r); }
.metric-box span { display: block; font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 6px; }
.metric-box strong { font-family: var(--title); font-size: 1.5rem; font-weight: 300; }

/* Standards bar */
.standards-bar { border-block: 1px solid var(--line); padding: 22px 0; }
.standards-container { display: flex; align-items: center; gap: 40px; overflow-x: auto; white-space: nowrap; }
.standards-list { display: flex; gap: 34px; }
.standards-list span { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-status-badge {
    border: 1px solid var(--line);
    padding: 16px 22px;
    border-radius: var(--pill);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.status-dot { width: 7px; height: 7px; background: var(--sage); border-radius: 50%; box-shadow: 0 0 10px var(--sage); flex-shrink: 0; }
.status-text { color: var(--ink-mute); font-size: 0.6rem; }
/* Instagram card + mini-FAQ: side by side on desktop/tablet, stacked on
   mobile (see the max-width:820px block below). */
.contact-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 64px; align-items: start; }
.contact-main-grid .mini-faq { margin: 0; }
.channel-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 36px;
    transition: border-color var(--t-norm);
}
.channel-card:hover { border-color: var(--line-strong); }
.channel-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.channel-icon {
    width: 44px; height: 44px;
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background: transparent;
    flex-shrink: 0;
}
.bg-green, .bg-cyan { background: transparent; }
.channel-title { font-family: var(--title); font-size: 1.25rem; font-weight: 300; }
.status-pill {
    margin-left: auto;
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: var(--pill);
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}
.channel-card p { color: var(--ink-dim); font-size: 0.92rem; margin-bottom: 28px; }
.channel-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    gap: 16px;
    flex-wrap: wrap;
}
.channel-number { font-family: var(--title); font-size: 1.4rem; font-weight: 300; }

.contact-content-section { padding-top: 0; border-top: none; }
.mini-faq { border: 1px solid var(--line); border-radius: var(--r); padding: 32px; }
.mini-faq-title { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; }
.mini-faq .accordion-item { border-color: var(--line); }
.mini-faq .accordion-header { padding: 18px 0; }
.mini-faq .accordion-header h3 { font-size: 0.92rem; }

/* ==========================================================================
   Disciplines ("Araştırmadan yayına")
   ========================================================================== */
.disciplines-head { max-width: 640px; margin-bottom: 56px; }
.disciplines-head p { color: var(--ink-dim); font-size: 1.02rem; }
.disciplines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.discipline-item {
    background: #FAFAFA;
    border-radius: var(--r);
    padding: 20px;
}
.discipline-item i { display: block; font-size: 1.4rem; color: var(--ink); margin-bottom: 16px; }
.discipline-item h3 { font-size: 1.15rem; margin-bottom: 10px; }
.discipline-item p { color: var(--ink-dim); font-size: 0.9rem; }

/* ==========================================================================
   Why Us (real, verifiable reasons — no customer testimonials)
   ========================================================================== */
.why-us-head { max-width: 640px; margin-bottom: 48px; }
.why-us-head p { color: var(--ink-dim); font-size: 1.02rem; }
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.why-us-card {
    background: var(--press-2);
    border-radius: 20px 20px 20px 0px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.why-us-card i { font-size: 1.3rem; color: var(--ink); margin-bottom: 18px; }
.why-us-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.why-us-card p { color: var(--ink-dim); font-size: 0.92rem; }

/* ==========================================================================
   Sectors ("Sektörünüze özel")
   ========================================================================== */
.sectors-head { max-width: 620px; margin-bottom: 56px; }
.sectors-head h2 { margin-bottom: 22px; }
.sectors-head p { color: var(--ink-dim); font-size: 1.02rem; }
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.sector-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform var(--t-norm);
}
.sector-card:hover { transform: translateY(-5px); }
.sector-card img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform var(--t-slow);
}
.sector-card:hover img { transform: scale(1.05); }
.sector-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    z-index: 2;
}
.sector-card-content {
    position: relative;
    z-index: 3;
}
.sector-card-name {
    font-family: var(--title);
    font-size: clamp(1.2rem, 2vw, 1.3rem);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}
.sector-card-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.reveal-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    will-change: opacity, transform;
}
.reveal-up.is-revealed { opacity: 1; transform: none; }

.webgl { display: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .reveal-up { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1160px) {
    .nav-actions .btn-whatsapp-outline { display: none; }
    .nav-links { gap: 22px; }
}

@media (max-width: 1100px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    /* Cards are self-contained tinted boxes now — no list-style column
       dividers / zero left padding (that left text glued to the box edge). */
    .service-card:nth-child(odd), .service-card:nth-child(even) { padding-left: 24px; border-left: none; }
    .blog-grid, .projects-grid-container, .disciplines-grid, .sectors-grid, .why-us-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .section-header { grid-template-columns: 1fr; }
    .case-study-card { grid-template-columns: 1fr; }
}

/* Hero: stacked + centered, and the orb kept clipping at in-between
   ("tablet") widths — it used the desktop technique (fixed 900px canvas,
   bled off the edge with a clip-path sized for the wide desktop column),
   which only works when the hero-container column is roughly desktop-wide.
   Below 1024px the column narrows a lot, so this range now shares the same
   self-contained square-box technique as phones (see the max-width:620px
   block below, which also fully hides the orb on actual phones). */
@media (max-width: 1024px) {
    .hero { min-height: auto; padding: 150px 0 80px; }
    .hero-container { grid-template-columns: 1fr; gap: 40px; }
    .hero-stats { gap: 36px; flex-wrap: wrap; }
    /* Centered stacked hero on tablets/phones */
    .hero-content { max-width: 100%; align-items: center; text-align: center; }
    .hero-content p { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    /* Orb: a centered square box that always shows the whole sphere. The
       scene is authored for a wide page — its sphere sits at ~78% across
       the canvas and is ~40% of the canvas wide — so the (square) viewer is
       sized/offset in % of this box so the sphere lands centered at ~75% of
       the box width, whatever the viewport width (fixed px values crop it). */
    .hero-3d-showcase {
        min-height: 0;
        aspect-ratio: 1 / 1;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
    .hero-3d-showcase spline-viewer {
        /* Same 900px canvas as desktop (measured there: sphere ~357px across,
           centred ~698px in / 450px down), scaled down about the sphere's
           own centre and pinned to the box centre. Any smaller canvas clips
           the sphere's right side because the scene puts it well off-centre. */
        width: 900px;
        height: 900px;
        left: calc(50% - 698px);
        top: calc(50% - 450px);
        transform: scale(0.68);
        transform-origin: 698px 450px;
        clip-path: none;
    }
}

@media (max-width: 820px) {
    .nav-links { display: none; }
    .nav-actions .btn-primary, .nav-actions .btn-whatsapp-outline { display: none; }
    .mobile-menu-btn { display: flex; }
    .faq-container { grid-template-columns: 1fr; }
    .projects-featured-row { flex-direction: column; }
    .projects-featured-row .project-card:nth-child(1),
    .projects-featured-row .project-card:nth-child(2) { flex: none; width: 100%; }

    /* Mobile menu: solid white dropdown panel under the bar (was a broken
       inline-styled fixed list with white links on a white background). */
    .navbar { padding: 14px 0; }
    .navbar.nav-open { background: #FFFFFF; border-bottom-color: var(--line); }
    .navbar.nav-open .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 6px var(--edge) 22px;
        background: #FFFFFF;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 40px rgba(15, 15, 15, 0.14);
        max-height: calc(100svh - 74px);
        overflow-y: auto;
    }
    .navbar.nav-open .nav-links a {
        justify-content: flex-start;
        padding: 16px 0;
        border-radius: 0;
        border-top: 1px solid var(--line);
        background: none;
        color: var(--ink);
        font-size: 1rem;
    }
    .navbar.nav-open .nav-links a:first-child { border-top: none; }
    .navbar.nav-open .nav-links a.active { background: none; color: var(--ink); font-weight: 600; }
    .navbar.nav-open .nav-links a.nav-cta {
        display: flex;
        justify-content: center;
        margin-top: 14px;
        padding: 14px 20px;
        border-top: none;
        border-radius: var(--pill);
        background: var(--paper);
        color: var(--press);
        font-weight: 500;
    }
}

@media (max-width: 620px) {
    /* Orb fully removed on phones — the small scaled-down sphere read as
       clutter above the fold and pushed the actual headline/CTA further
       down; the hero is just the centered text block here. */
    .hero-3d-showcase { display: none; }
    .services-grid, .blog-grid, .projects-grid-container, .sectors-grid, .disciplines-grid, .why-us-grid { grid-template-columns: 1fr; }
    .service-card, .service-card:nth-child(even) { padding-left: 24px; border-left: none; }
    /* Project screenshots were an inset 279x~95 sliver on phones (32px mat
       padding + 16:9 box). Tighter mat + taller box so the site preview is
       actually legible. */
    .project-img-container { padding: 14px; }
    .project-info { padding: 22px 20px; }
    /* Photo cards: busier text on top of bright photos — darker overlay. */
    .sector-card { padding: 20px; }
    .sector-card::after { background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.15) 100%); }
    .sector-card-desc { font-size: 0.9rem; }
    .section-header-row { flex-direction: column; align-items: flex-start; gap: 18px; }
    .projects-hero-inner, .contact-hero-inner { flex-direction: column; align-items: flex-start; }
    .contact-hero-content h1, .projects-hero-content h1 { white-space: normal; }
    .contact-main-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
    /* Card padding/icon/type sizes were tuned for a ~340px-wide grid column
       on desktop — at full phone width they read oversized and unbalanced
       next to the card's own text. Scale them down together. */
    .channel-card { padding: 24px; }
    .channel-header { gap: 12px; margin-bottom: 18px; }
    .channel-icon { width: 38px; height: 38px; font-size: 1.1rem; }
    .channel-title { font-size: 1.05rem; }
    .status-pill { padding: 5px 10px; }
    .channel-info { padding: 14px; }
    .mini-faq { padding: 22px; }
    .stat-item-alt { text-align: left; }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .cta-card { flex-direction: column; align-items: flex-start; }
    .sector-name { font-size: 1.25rem; }
    .sector-row { gap: 16px; }
    .sector-icon { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* ==========================================================================
   Dark colour scheme (system / phone dark mode)
   --------------------------------------------------------------------------
   The site used to define only a light theme, so phones set to dark mode
   force-inverted it (browser "auto dark"): bars turned solid black, text and
   borders got mangled. Declaring `color-scheme: light dark` opts out of that
   inversion, and the tokens below give a real dark theme. The hero already
   redefines the same tokens locally (dark hero in both themes), so it looks
   identical either way.
   ========================================================================== */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
    :root {
        --press:      #0A0A0A;
        --press-2:    #141414;
        --press-3:    #1C1C1C;
        --paper:      #F5F5F5;
        --ink:        #F5F5F5;
        --ink-dim:    rgba(245, 245, 245, 0.66);
        --ink-mute:   rgba(245, 245, 245, 0.42);
        --line:        rgba(255, 255, 255, 0.12);
        --line-strong: rgba(255, 255, 255, 0.24);
        --ember:      #F5F5F5;
        --sage:       #F5F5F5;
    }

    /* Hard-coded light surfaces → dark surfaces */
    .service-card, .blog-card, .discipline-item { background: var(--press-2); }
    .service-card:hover, .blog-card:hover { background: var(--press-3); }

    /* Hover tints that were dark-on-light */
    .btn:hover,
    .btn-whatsapp-sm:hover,
    .mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.07); }
    .accordion-item.active .accordion-toggle { background: rgba(255, 255, 255, 0.07); }

    /* Header: dark glass when scrolled, solid dark when the mobile menu is open */
    .navbar.scrolled { background: rgba(10, 10, 10, 0.88); }
    .contact-bubble { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }

    /* Transparent-over-hero header is already light-on-dark; keep it that way
       but make sure the open menu and scrolled state use the dark palette. */
    .navbar.nav-open { background: #0A0A0A; }
    .navbar.nav-open .nav-links {
        background: #0F0F0F;
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.6);
    }
    .navbar.nav-open .nav-links a { color: var(--ink); }
    .navbar.nav-open .nav-links a.nav-cta { background: #F5F5F5; color: #0A0A0A; }
}