/* ============================================================
 * Site chrome — unified header (.site-nav) + footer (.site-footer)
 * Source: NGS_Theme/Taslaklar/header.html + footer.html
 * Always loaded (functions.php enqueues before any early returns).
 * ============================================================ */

/* ===== GLOBAL BASELINE =====
 * Self-contained page templates (page-terms, page-about, page-thanks,
 * page-submit-case) early-return in functions.php and skip styles.css.
 * The body/html reset and the floating WhatsApp button live here so
 * every page gets them, with var() fallbacks for the standalone case.
 */
/* Chrome-side design tokens. Mirrors styles.css :root so self-contained
   page templates (page-terms, page-about, page-thanks, page-submit-case)
   that early-return and skip styles.css still resolve --line, --ink, --sans
   etc. on the header/footer. Page-scoped tokens (e.g. .page-terms { --bg... })
   override these inside their scope. */
:root {
    --bg:        #EEF1F4;
    --bg-2:      #E4E8ED;
    --paper:     #F7F8FA;
    --ink:       #0B1220;
    --ink-2:     #1B2536;
    --ink-3:     #38445A;
    --muted:     #6B7689;
    --line:      #C9D0DA;
    --line-soft: rgba(11, 18, 32, 0.08);
    --blue:      #2B6CB0;
    --gold:      #B8862F;
    --serif: "Newsreader", Georgia, serif;
    --sans:  "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ===== HEADER (Rework B: editorial serif wordmark, centered nav, sticky) ===== */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    border-bottom: 1px solid var(--line, #e5e7eb);
    font-family: var(--sans, 'Inter', system-ui, sans-serif);
    color: var(--ink, #0B1220);
    transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
/* Scrolled: translucent + blur. main.js toggles .is-scrolled (>24px),
   mobile.js toggles .scrolled (>60px); support both so either driver works. */
.site-nav.scrolled,
.site-nav.is-scrolled {
    background: color-mix(in srgb, #fff 72%, transparent);
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    backdrop-filter: saturate(1.1) blur(10px);
    border-bottom-color: rgba(229, 231, 235, 0.6);
}
.site-nav .h1-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* 3-column lockup: brand left, primary nav centered, lang + CTA right. */
.site-nav .h1-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 88px;
    padding: 18px 0;
    gap: 32px;
}

/* Brand: serif wordmark with an italic display "Advisory". */
.site-nav .brand-big {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--serif, 'Newsreader', serif);
    font-size: 26px; font-weight: 500; color: var(--ink, #0B1220);
    text-decoration: none;
}
.site-nav .brand-big em {
    font-family: 'Playfair Display', 'Newsreader', Georgia, serif;
    font-style: italic; font-weight: 400; color: var(--blue-deep, #1E4E7E);
}
.site-nav .brand-big:focus-visible { outline: 2px solid var(--gold, #B8862F); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .site-nav { transition: none; }
}

/* Nav links — centered column */
.site-nav .links { display: flex; align-items: center; justify-content: center; gap: 28px; font-size: 14px; }
.site-nav .links > a,
.site-nav .links .trigger {
    position: relative; color: var(--ink-2, #1B2536);
    background: none; border: 0; padding: 6px 0; font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    transition: color .15s;
}
.site-nav .links > a:hover,
.site-nav .links .trigger:hover { color: var(--blue, #2B6CB0); }
.site-nav .links .is-on { color: var(--ink, #0B1220); font-weight: 500; }
.site-nav .links .is-on::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
    height: 2px; background-color: #B8862F;
    view-transition-name: ngs-nav-underline;
}
.site-nav .links .trigger.is-on::after { right: 16px; }

/* Cross-page slide of the active gold underline. With cross-document View
   Transitions the browser tweens the shared-named underline from the previous
   page's active link to the new page's active link, so it slides to the page
   you navigated to. Page content stays instant (only the underline animates).
   Progressive: browsers without View Transitions just navigate normally. */
@view-transition { navigation: auto; }
/* The gold underline slides between active links. */
::view-transition-group(ngs-nav-underline) {
    animation-duration: .42s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* Keep the page-content crossfade quick so the underline slide is the focus. */
::view-transition-group(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) { animation: none !important; }
}
.site-nav .has-menu { position: relative; }
.site-nav .caret { transition: transform .2s; }
.site-nav .has-menu:hover .caret,
.site-nav .has-menu:focus-within .caret { transform: rotate(180deg); }
.site-nav .menu {
    position: absolute; top: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 260px; background: #fff; border: 1px solid var(--line, #e5e7eb);
    border-radius: 10px; box-shadow: 0 14px 34px -12px rgba(11,18,32,.20);
    padding: 8px; display: grid; gap: 2px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s, transform .18s, visibility 0s linear .18s; z-index: 60;
}
.site-nav .has-menu:hover .menu,
.site-nav .has-menu:focus-within .menu,
.site-nav .has-menu .trigger[aria-expanded="true"] + .menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .18s, transform .18s, visibility 0s;
}
.site-nav .menu a { display: grid; gap: 2px; padding: 11px 13px; border-radius: 7px; text-decoration: none; color: var(--ink, #0B1220); transition: background .15s; }
.site-nav .menu a:hover,
.site-nav .menu a.is-on { background: var(--soft, #F7F8FA); }
.site-nav .menu .mlabel { font-size: 14px; font-weight: 500; color: var(--ink, #0B1220); }
.site-nav .menu .mdesc { font-size: 12px; color: var(--muted, #6B7280); }

/* Right cluster: lang switch + CTA. Scoped to .site-nav so page .btn rules
   are not overridden. Sits in the grid's right 1fr column, justified to the end. */
.site-nav .right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.site-nav .lang-switch { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; }
.site-nav .lang-switch a { color: var(--muted, #6B7280); text-decoration: none; transition: color .15s; }
.site-nav .lang-switch a:hover { color: var(--ink-2, #1B2536); }
.site-nav .lang-switch a.is-on { color: var(--ink, #0B1220); font-weight: 600; }
.site-nav .lang-switch .sep { color: var(--line, #C9D0DA); }
.site-nav .btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 22px; border-radius: 11px; font-size: 14px; font-weight: 500;
    letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap;
    text-decoration: none; transition: all .18s ease;
}
.site-nav .btn-primary { background-color: #1E4E7E; color: #fff; }
.site-nav .btn-primary:hover { background-color: color-mix(in srgb, #1E4E7E 86%, #000); transform: translateY(-1px); }
.site-nav .btn .ar { transition: transform .18s ease; }
.site-nav .btn-primary:hover .ar { transform: translateX(3px); }
.site-nav .btn-ghost { background: transparent; color: var(--ink, #0B1220); border-color: var(--line, #C9D0DA); }
.site-nav .btn-ghost:hover { border-color: var(--ink, #0B1220); background: rgba(255, 255, 255, 0.4); }


/* ===== FOOTER ===== */
.site-footer {
    border-top: 1px solid var(--line, #e5e7eb);
    background: #e4e8ed;
    font-family: var(--sans, 'Inter', system-ui, sans-serif);
    color: var(--ink-2, #374151);
    padding: 56px 0 32px;
}

.f1-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.f1-masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #c9d0da;
    padding-bottom: 28px;
    margin-bottom: 40px;
    gap: 48px;
}

.f1-display {
    font-family: var(--serif, 'Newsreader', serif);
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 400;
    line-height: 1;
    color: var(--ink, #111);
    letter-spacing: -0.02em;
}

.f1-display em {
    font-family: 'Playfair Display', 'Newsreader', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--blue, #1e4e7e);
}

.f1-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
    font-family: var(--mono, ui-monospace, monospace);
}

.f1-iss {
    color: var(--ink, #111);
    font-weight: 500;
}

.f1-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.f1-col h4 {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
    font-weight: 500;
    margin: 0 0 14px;
}

.f1-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.f1-col ul a {
    color: var(--ink-2, #374151);
    text-decoration: none;
    transition: color .15s;
}

.f1-col ul a:hover {
    color: var(--blue, #1e40af);
}

.f1-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink, #111);
}

.f1-col--brand p {
    font-family: var(--serif, 'Newsreader', serif);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-3, #4b5563);
    max-width: 340px;
    margin: 0 0 24px;
}

.f1-signoff {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.f1-sig {
    font-family: 'Playfair Display', 'Newsreader', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    color: var(--ink, #111);
}

.f1-who {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--muted, #6b7280);
}

.f1-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line, #e5e7eb);
    padding-top: 24px;
    font-size: 12px;
    color: var(--muted, #6b7280);
    font-family: var(--mono, ui-monospace, monospace);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.f1-compl {
    display: flex;
    gap: 18px;
}

/* ===== Mobile ===== */
@media (max-width: 880px) {
    /* .site-nav is display:none here (mobile-chrome.css swaps in the drawer),
       so the desktop header needs no responsive rules of its own. */
    .f1-masthead {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .f1-meta {
        text-align: left;
    }
    .f1-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .f1-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* ===== FLOATING WHATSAPP ===== */
.floating-whatsapp {
    position: fixed;
    /* Default: alone in the bottom slot. When the scroll-top dial is triggered
       it takes this slot and WhatsApp slides up (.is-raised). Horizontally
       centred over the scroll-top (72px vs 52px → +10px shared centre line). */
    right: calc(clamp(18px, 3vw, 34px) + 10px);
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 60;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Matches the scroll-top core: deep-blue dial, white glyph. */
    color: #fff;
    background: var(--blue-deep, #1E4E7E);
    border: 1px solid transparent;
    box-shadow: 0 6px 24px -8px rgba(11,18,32,0.12), 0 2px 6px rgba(11,18,32,0.05);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, bottom 0.4s cubic-bezier(.2,.7,.2,1);
}
.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
    color: #fff;
    background: var(--blue, #2B6CB0);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 24px 60px -20px rgba(11,18,32,0.22), 0 8px 24px -8px rgba(11,18,32,0.08);
}
/* Raised out of the bottom slot once the scroll-top dial appears */
.floating-whatsapp.is-raised {
    bottom: calc(104px + env(safe-area-inset-bottom));
}
.floating-whatsapp svg {
    width: 22px;
    height: 22px;
    display: block;
}
/* Now a <button> (WhatsApp line not live yet): strip UA chrome so it
   keeps the old <a> dial look. */
.floating-whatsapp {
    padding: 0;
    font: inherit;
    cursor: pointer;
}
/* "Yakında" bubble — revealed on hover/focus (desktop) and on tap via
   .is-soon (toggled in mobile.js). Sits to the left of the dial. */
.floating-whatsapp__soon {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ink, #0B1220);
    padding: 7px 11px;
    border-radius: 8px;
    box-shadow: 0 12px 30px -12px rgba(11, 18, 32, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.floating-whatsapp:hover .floating-whatsapp__soon,
.floating-whatsapp:focus-visible .floating-whatsapp__soon,
.floating-whatsapp.is-soon .floating-whatsapp__soon {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (prefers-reduced-motion: reduce) {
    .floating-whatsapp__soon { transition: opacity 0.2s ease; }
}

/* ===== SCROLL-TO-TOP (progress ring) =====
 * Bottom-most floating control; the WhatsApp dial stacks above it,
 * centred over this button.
 * SVG viewBox stays 72x72 so getTotalLength() math is size-independent;
 * the rendered box just scales down on mobile. */
.scrolltop {
    position: fixed;
    right: clamp(18px, 3vw, 34px);
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: 72px;
    height: 72px;
    z-index: 61;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(.92);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.scrolltop.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.scrolltop__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.scrolltop__track {
    fill: none;
    stroke: var(--line, #C9D0DA);
    stroke-width: 2.5;
}
.scrolltop__progress {
    fill: none;
    stroke: var(--gold, #B8862F);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset .12s linear, stroke .35s ease, stroke-width .35s ease;
}
.scrolltop__core {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--blue-deep, #1E4E7E);
    color: #fff;
    box-shadow: 0 6px 24px -8px rgba(11,18,32,.12), 0 2px 6px rgba(11,18,32,.05);
    transition: background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.scrolltop:hover .scrolltop__core {
    background: var(--blue, #2B6CB0);
    transform: translateY(-2px);
    box-shadow: 0 24px 60px -20px rgba(11,18,32,.22), 0 8px 24px -8px rgba(11,18,32,.08);
}
.scrolltop:active .scrolltop__core {
    transform: translateY(0) scale(.96);
}
.scrolltop__core svg {
    width: 20px;
    height: 20px;
    display: block;
}
.scrolltop__core svg path {
    transition: transform .25s ease;
}
.scrolltop:hover .scrolltop__core svg path {
    transform: translateY(-1.5px);
}
.scrolltop.is-complete .scrolltop__progress {
    stroke-width: 3.5;
    filter: drop-shadow(0 0 5px rgba(184,134,47,.55));
}
.scrolltop.is-complete .scrolltop__core {
    background: var(--gold, #B8862F);
}
/* Mobile — smaller dials; scroll-top at the very bottom, WhatsApp above it.
   Both are 52px here, so the same right offset already centres them. */
@media (max-width: 640px) {
    .scrolltop {
        width: 52px;
        height: 52px;
        bottom: calc(18px + env(safe-area-inset-bottom));
    }
    .floating-whatsapp {
        right: clamp(18px, 3vw, 34px);
        bottom: calc(18px + env(safe-area-inset-bottom));
    }
    .floating-whatsapp.is-raised {
        bottom: calc(82px + env(safe-area-inset-bottom));
    }
    .scrolltop__core {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }
    .scrolltop__core svg {
        width: 16px;
        height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scrolltop,
    .scrolltop__core,
    .scrolltop__progress {
        transition: none;
    }
}