/* ==========================================================================
   Alker Marine — tek CSS dosyası (brief: "1 CSS + 1 JS, ağır kütüphane yok")

   Yön (v2.1): sakin, editoryal minimalizm; ikili tema = KIRIK BEYAZ (sıcak krem) + MAVİ.
   Zemin kırık beyaz / beyaz, vurgu yüzeyleri derin mavi (bantlar, son CTA kutusu, altbilgi,
   yan CTA kutusu) ve açık mavi yıkama (watermaker bölümü). Serif başlıklar, 1px kenarlıklı düz
   kartlar (bento), mavi düğmeler, soluk pastel etiketler. Gradyan, ağır gölge, neon ve cam yok.
   Watermaker sayfaları aynı sistemde su tonuna (petrol mavisi) kayar. Dış font yok (KVKK + hız).

   Kontrast (WCAG AA, ölçülü):
     gövde #2f3437 / kırık beyaz 11.17:1 · başlık #111 / kırık beyaz 16.74:1
     ikincil #64635f / kırık beyaz 5.33:1
     kırık beyaz / derin mavi #102f4f 12.08:1 · %78 opak 7.92:1 · %62 opak 5.57:1
     mavi etiket #16466f / #dce8f2 7.88:1 · petrol etiket #0e5a68 / #d9f0f2 6.60:1
     orta mavi #2f6ea3 / beyaz 5.41:1 (yalnız ikon/çizgi/bağlantı vurgusu)
   ========================================================================== */

:root {
    --white: #ffffff;
    --paper: #faf8f3;        /* üst bilgi, paneller */
    --bone: #f4f1ea;         /* KIRIK BEYAZ: alternatif bölüm zemini */
    --ink: #111111;          /* başlık */
    --text: #2f3437;         /* gövde */
    --muted: #64635f;        /* ikincil metin */
    --soft: #64635f;
    --line: #e7e3da;         /* tüm kart / ayraç kenarlıkları (kırık beyazla uyumlu) */
    --line-strong: #cdc9bf;  /* yalnız form denetimleri */

    /* Mavi ölçek */
    --blue-950: #0a2036;
    --blue-900: #102f4f;     /* derin mavi: birincil düğme, mavi yüzeyler */
    --blue-800: #1a4670;     /* düğme üzerine gelince */
    --blue-600: #2f6ea3;     /* küçük vurgu: çizgi, ikon, odak halkası */
    --blue-200: #c9dcec;
    --blue-100: #dce8f2;
    --blue-50: #eaf1f7;      /* açık mavi yıkama bölümü */
    --on-blue: #f4f1ea;      /* mavi yüzey üstü metin (kırık beyaz) */
    --on-blue-dim: rgba(244, 241, 234, 0.78);
    --on-blue-faint: rgba(244, 241, 234, 0.62);
    --on-blue-line: rgba(244, 241, 234, 0.16);
    --btn: var(--blue-900);
    --btn-hover: var(--blue-800);

    /* Soluk pastel çiftler (zemin / metin) */
    --red-bg: #fdebec;    --red-ink: #9f2f2d;
    --blue-bg: #dce8f2;   --blue-ink: #16466f;
    --green-bg: #edf3ec;  --green-ink: #346538;
    --yellow-bg: #fbf3db; --yellow-ink: #956400;
    --neutral-bg: #ebe7dd; --neutral-ink: #2f3437;

    /* Etiket tonu: watermaker sayfalarında .theme-wm ile su tonuna döner */
    --tag-bg: var(--blue-bg);
    --tag-ink: var(--blue-ink);

    --danger: #9f2f2d;
    --ok: #346538;

    --font-sans: "SF Pro Display", "Geist Sans", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-serif: "Newsreader", "Lyon Text", "Iowan Old Style", "Charter", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
    --font-mono: "Geist Mono", "SF Mono", "Cascadia Mono", "JetBrains Mono", ui-monospace, Consolas, "Liberation Mono", monospace;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-btn: 6px;
    --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.05);

    --container: 1240px;
    --narrow: 820px;
    --gutter: 20px;
    --gap: 20px;
    --header-h: 72px;
    --sticky-h: 64px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Watermaker: aynı mavi sistemi, suya doğru petrol tonu */
.theme-wm { --tag-bg: #d9f0f2; --tag-ink: #0e5a68; --blue-900: #0b3c55; --blue-800: #135070; --blue-600: #1f7f93; --blue-50: #e6f3f5; --blue-100: #d9f0f2; --btn: #0b3c55; --btn-hover: #135070; }

@media (min-width: 640px)  { :root { --gutter: 28px; } }
@media (min-width: 960px)  { :root { --gap: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
    margin: 0;
    font: 400 1.0625rem/1.6 var(--font-sans);
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ink); text-decoration-color: rgba(17, 17, 17, 0.28); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
a:hover { text-decoration-color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; color: var(--ink); line-height: 1.1; }
h4 { margin: 0; font: 600 1rem/1.3 var(--font-sans); color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.3vw, 3rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem); letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: var(--blue-100); color: var(--ink); }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bone); font: 500 0.82em/1.5 var(--font-mono); color: var(--ink); }

:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 4px; }
.hero:not(.hero--plain) :focus-visible, .hero-seq :focus-visible, .site-header.is-over-media:not(.is-scrolled) :focus-visible, .band :focus-visible, .cta-band-inner :focus-visible, .cta-box :focus-visible, .site-footer :focus-visible { outline-color: var(--on-blue); }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); margin-left: max(0px, calc((100% - (var(--container) + var(--gutter) * 2)) / 2)); margin-right: auto; }  /* sol kenar ana kapla AYNI: bölümler arası metin hizası bozulmaz */
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -64px; z-index: 200; background: var(--blue-900); color: var(--white); padding: 10px 16px; border-radius: 0 0 var(--radius-btn) var(--radius-btn); font-weight: 600; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 0; }
.icon { flex: none; stroke-width: 2; }
.flip { transform: scaleX(-1); }
.no-js [data-requires-js] { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Kaydırınca beliren bloklar (alker.js: IntersectionObserver) ---------- */
.js .reveal { opacity: 0; translate: 0 12px; transition: opacity 0.6s var(--ease), translate 0.6s var(--ease); transition-delay: calc(var(--index, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- Düğmeler ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px; border-radius: var(--radius-btn); border: 1px solid transparent;
    font-weight: 550; font-size: 0.98rem; letter-spacing: -0.005em; line-height: 1; text-decoration: none; white-space: nowrap;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn .icon { transition: transform 0.2s var(--ease); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(2px); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }
.btn-accent, .btn-primary { background: var(--btn); color: var(--white); }
.btn-accent:hover, .btn-primary:hover { background: var(--btn-hover); color: var(--white); }
.btn-outline, .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover, .btn-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--blue-900); }
/* Fotoğraf / sekans üstündeki hero: ters renk */
.hero:not(.hero--plain) .btn-accent, .hero-seq .btn-accent { background: var(--white); color: var(--blue-900); }
.hero:not(.hero--plain) .btn-accent:hover, .hero-seq .btn-accent:hover { background: var(--blue-50); color: var(--blue-900); }
.hero:not(.hero--plain) .btn-outline, .hero-seq .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.hero:not(.hero--plain) .btn-outline:hover, .hero-seq .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); color: var(--white); }
/* Mavi yüzeyler (bant, son CTA kutusu, yan CTA kutusu, altbilgi): ters renk düğmeler */
.band .btn-accent, .band .btn-primary, .cta-band-inner .btn-accent, .cta-band-inner .btn-primary, .cta-box .btn-accent, .cta-box .btn-primary { background: var(--on-blue); color: var(--blue-900); }
.band .btn-accent:hover, .band .btn-primary:hover, .cta-band-inner .btn-accent:hover, .cta-band-inner .btn-primary:hover, .cta-box .btn-accent:hover, .cta-box .btn-primary:hover { background: var(--white); color: var(--blue-900); }
.band .btn-outline, .band .btn-ghost, .cta-band-inner .btn-outline, .cta-band-inner .btn-ghost, .cta-box .btn-outline, .cta-box .btn-ghost { color: var(--on-blue); border-color: rgba(244, 241, 234, 0.4); }
.band .btn-outline:hover, .band .btn-ghost:hover, .cta-band-inner .btn-outline:hover, .cta-band-inner .btn-ghost:hover, .cta-box .btn-outline:hover, .cta-box .btn-ghost:hover { background: rgba(244, 241, 234, 0.1); color: var(--on-blue); border-color: var(--on-blue); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: rgba(17, 17, 17, 0.28); text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: currentColor; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: var(--radius-sm); border: 0; background: transparent; color: inherit; text-decoration: none;
    transition: background 0.2s;
}
.icon-btn:hover { background: rgba(127, 127, 127, 0.14); color: inherit; }

/* Etiketler: yalnız burada hap (pill) biçimi */
.chip, .eyebrow {
    display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px; border-radius: 9999px;
    background: var(--tag-bg); color: var(--tag-ink);
    font: 600 0.72rem/1.4 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase;
}
.eyebrow { margin: 0 0 20px; align-self: center; }  /* sekans hero'sunun içerik sütunu flex: etiket tüm genişliğe yayılmasın, ortalı dursun */
.chip-link { text-decoration: none; min-height: 40px; padding: 0 16px; font-size: 0.92rem; letter-spacing: 0; text-transform: none; font-weight: 550; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-btn); }
.chip-link:hover { border-color: var(--blue-900); color: var(--ink); }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Üst bilgi ---------- */
.site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h);
    background: rgba(250, 248, 243, 0.9); color: var(--ink);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.2) blur(12px);
    transition: height 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s;
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--paper); } }
.site-header.is-over-hero:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.site-header.is-over-media:not(.is-scrolled) { color: var(--white); }
.site-header.is-scrolled { --header-h: 60px; height: 60px; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; flex: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 38px; height: 38px; filter: brightness(0); transition: width 0.25s var(--ease), height 0.25s var(--ease); }  /* logo beyaz çizimdir: açık zeminde kömür olur */
.is-scrolled .brand-mark { width: 32px; height: 32px; }
.site-header.is-over-media:not(.is-scrolled) .brand-mark { filter: none; }
.brand-word { font: 600 0.98rem/1 var(--font-sans); letter-spacing: 0.22em; white-space: nowrap; }
.brand-word span { font-weight: 400; letter-spacing: 0.22em; opacity: 0.7; }

.primary-nav { display: none; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-sm); transition: color 0.2s; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link.is-active { box-shadow: inset 0 -2px 0 var(--blue-600); border-radius: 0; }
.site-header.is-over-media:not(.is-scrolled) .nav-link { color: rgba(255, 255, 255, 0.78); }
.site-header.is-over-media:not(.is-scrolled) .nav-link:hover, .site-header.is-over-media:not(.is-scrolled) .nav-link.is-active { color: var(--white); }
.site-header.is-over-media:not(.is-scrolled) .nav-link.is-active { box-shadow: inset 0 -1px 0 var(--white); }
.mega-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; margin-left: -8px; border: 0; background: transparent; color: var(--muted); }
.mega-toggle:hover, .has-mega.is-open .mega-toggle { color: var(--ink); }
.site-header.is-over-media:not(.is-scrolled) .mega-toggle { color: rgba(255, 255, 255, 0.78); }
.mega-toggle .icon { transition: transform 0.2s var(--ease); }
.has-mega.is-open .mega-toggle .icon { transform: rotate(180deg); }
.mega { display: none; }
.nav-cta-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 6px; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-btn); border: 1px solid var(--line-strong); color: inherit; text-decoration: none; font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.08em; transition: border-color 0.2s; }
.lang-switch:hover { color: inherit; border-color: currentColor; }
.site-header.is-over-media:not(.is-scrolled) .lang-switch { border-color: rgba(255, 255, 255, 0.4); }
.header-cta { display: none; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-open { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }
/* Mobil menü açıkken başlık her zaman açık zeminli */
body.nav-open .site-header, body.nav-open .site-header.is-over-hero:not(.is-scrolled) { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); backdrop-filter: none; }
body.nav-open .site-header .brand-mark { filter: brightness(0); }
body.nav-open .site-header .lang-switch { border-color: var(--line-strong); }

/* Mobil menü (varsayılan): tam ekran panel */
@media (max-width: 1099.98px) {
    .primary-nav {
        display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 55; overflow-y: auto;
        background: var(--paper); padding: 8px var(--gutter) 40px;
        transform: translateY(-8px); opacity: 0; visibility: hidden;
        transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0s linear 0.25s;
    }
    body.nav-open .primary-nav { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
    body.nav-open { overflow: hidden; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
    .nav-link, .site-header.is-over-media:not(.is-scrolled) .nav-link { flex: 1; min-height: 60px; font: 400 1.5rem/1.2 var(--font-serif); letter-spacing: -0.02em; padding: 0; color: var(--ink); border-radius: 0; }
    .nav-link.is-active, .site-header.is-over-media:not(.is-scrolled) .nav-link.is-active { box-shadow: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
    .mega-toggle { display: none; }
    .mega { display: block; width: 100%; padding: 0 0 20px; }
    .mega-grid { display: grid; gap: 18px; padding: 0; }
    .mega-title { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; margin-bottom: 6px; }
    .mega-title .icon { color: var(--muted); }
    .mega-group ul { list-style: none; border-left: 1px solid var(--line); margin-left: 9px; padding-left: 20px; }
    .mega-group li a { display: block; padding: 7px 0; color: var(--muted); text-decoration: none; font-size: 1rem; }
    .mega-group li a:hover { color: var(--ink); }
    .nav-cta-mobile { display: flex; margin-top: 24px; }
}

@media (min-width: 1100px) {
    .primary-nav { display: block; }
    .nav-toggle { display: none; }
    .header-cta { display: inline-flex; }
    .site-header.is-over-media:not(.is-scrolled) .header-cta { background: var(--white); color: var(--blue-900); }
    .mega {
        position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 54;
        background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.06);
        padding: 36px 0 40px; opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity 0.18s, transform 0.22s var(--ease), visibility 0s linear 0.22s;
    }
    .site-header.is-scrolled .mega { top: 60px; }
    .has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega { display: block; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; color: var(--ink); }
    .mega-title { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
    .mega-title .icon { color: var(--muted); }
    .mega-group ul { list-style: none; }
    .mega-group li a { display: block; padding: 5px 0; color: var(--muted); text-decoration: none; font-size: 0.95rem; line-height: 1.35; transition: color 0.15s; }
    .mega-group li a:hover { color: var(--ink); }
}
@media (min-width: 1100px) and (max-width: 1260px) {
    .brand-word span { display: none; }
    .nav-link { padding: 0 8px; font-size: 0.92rem; }
}

/* ---------- Ana içerik boşluğu (hero olmayan sayfalar) ---------- */
main { display: block; }
body:not(.is-home) main > .hero:first-child, body:not(.is-home) main > .hero-seq:first-child { margin-top: 0; }
main > .breadcrumbs:first-child, main > .page-head:first-child, main > .error-page:first-child, main > .blog-article:first-child { margin-top: var(--header-h); }

/* ---------- Hero (statik) ---------- */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--ink); overflow: hidden; display: flex; align-items: flex-end; min-height: min(100svh, 820px); }
.hero--compact { min-height: clamp(380px, 52svh, 520px); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); }
.hero-overlay { position: absolute; inset: 0; z-index: -1; background: rgba(24, 21, 18, 0.5); }

/* Görsel yokken: kemik zemin, ince çizgi ızgarası, pastel güneş diski + ofsetli çizgi halka + ufuk çizgisi (yalnız CSS) */
.hero--plain { color: var(--ink); background: var(--bone); border-bottom: 1px solid var(--line); min-height: min(86svh, 720px); }
.hero--plain.hero--compact { min-height: clamp(380px, 52svh, 520px); }
.hero--plain .hero-overlay { display: none; }
.hero--plain .hero-media {
    background-image: linear-gradient(rgba(16, 47, 79, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 47, 79, 0.05) 1px, transparent 1px);
    background-size: 72px 72px; background-position: center top;
}
.hero--plain .hero-media::before {
    content: ""; position: absolute; right: clamp(-6%, 6vw, 12%); top: clamp(12%, 18vh, 22%); width: clamp(140px, 24vw, 340px); aspect-ratio: 1; border-radius: 50%;
    background: var(--tag-bg);
}
.hero--plain .hero-media::after {
    content: ""; position: absolute; right: calc(clamp(-6%, 6vw, 12%) - clamp(14px, 2vw, 28px)); top: calc(clamp(12%, 18vh, 22%) + clamp(14px, 2vw, 28px)); width: clamp(140px, 24vw, 340px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(16, 47, 79, 0.6);
}
.hero--plain::after {
    /* ufuk çizgisi diskin yatay ekseninde ve yalnız sağ yarıda: başlık metninin içinden geçmez */
    content: ""; position: absolute; z-index: -1; left: 54%; right: 0; top: calc(clamp(12%, 18vh, 22%) + clamp(70px, 12vw, 170px)); height: 1px; background: rgba(16, 47, 79, 0.2);
}
.hero--plain .hero-title { color: var(--ink); }
.hero--plain .hero-lead, .hero--plain .hero-promise { color: var(--muted); }
/* Ortalı başlık: masaüstünde dekoratif disk küçülür, sağ üst köşeye çekilir (başlığa binmez); başlıktan geçen ufuk çizgisi kalkar */
@media (min-width: 900px) {
    .hero--plain .hero-media::before { top: calc(var(--header-h) + 24px); right: clamp(24px, 5vw, 80px); width: clamp(110px, 12vw, 170px); }
    .hero--plain .hero-media::after { top: calc(var(--header-h) + 24px + clamp(10px, 1.2vw, 18px)); right: calc(clamp(24px, 5vw, 80px) - clamp(10px, 1.2vw, 18px)); width: clamp(110px, 12vw, 170px); }
    .hero--plain::after { display: none; }
}

.hero-content { width: 100%; padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(48px, 9vh, 96px); max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.hero-title { color: var(--white); max-width: 26ch; margin-inline: auto; text-wrap: balance; }
.hero-lead { margin: 22px auto 0; max-width: 52ch; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, 0.84); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-content .hero-cta { justify-content: center; }
.hero-promise { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.8); }
.hero:not(.hero--plain) .eyebrow, .hero-seq .eyebrow { background: rgba(255, 255, 255, 0.14); color: var(--white); }
/* Sekans hero'sunda cihaz/tekne kareler boyunca hareket eder: yazılar çok hafif dağınık gölge alır (parlak kareler üstünde okunurluk) */
.hero-seq .hero-title, .hero-seq .hero-lead, .hero-seq .hero-promise { text-shadow: 0 1px 16px rgba(10, 20, 30, 0.4); }

/* ---------- Hero sekansı (scroll) ---------- */
.hero-seq { position: relative; height: calc(var(--scroll-len, 250) * 1vh); background: var(--ink); color: var(--white); }
.hero-seq__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero-seq__poster, .hero-seq__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-seq__poster { z-index: 0; }
.hero-seq__canvas { z-index: 1; opacity: 0; transition: opacity 0.3s; }
.hero-seq.is-ready .hero-seq__canvas { opacity: 1; }
.hero-seq__overlay { position: absolute; inset: 0; z-index: 2; background: rgba(24, 21, 18, calc(var(--overlay, 0.55) * 0.85)); }  /* düz, sıcak tarama: gradyan yok */
.hero-seq__content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-top: calc(var(--header-h) + 24px); }
.hero-seq__content.hero-content { padding-bottom: clamp(28px, 6vh, 64px); }
/* Hero metni kaydırmanın ilk ~%30'unda yumuşakça silinir (--p: 0..1 ilerleme, alker.js): ürün/tekne kadrajın ortasına gelince ortalı başlığın altında kalmaz.
   Görünmezken odaklanılamaz/tıklanamaz (.is-past → visibility). Statik geri düşüşte ve hareketi azaltta metin hep görünür. */
.hero-seq__content { opacity: clamp(0, calc((0.3 - var(--p, 0)) / 0.22), 1); translate: 0 calc(var(--p, 0) * -28px); }
.hero-seq.is-past .hero-seq__content { visibility: hidden; }
.no-js .hero-seq__content, .hero-seq.is-static .hero-seq__content { opacity: 1; translate: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .hero-seq__content { opacity: 1; translate: none; visibility: visible; } }
.hero-seq__beats { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; pointer-events: none; padding-inline: var(--gutter); }
.beat { position: absolute; left: var(--gutter); right: var(--gutter); max-width: 22ch; margin: 0; font: 400 clamp(1.5rem, 1.1rem + 2vw, 2.8rem)/1.15 var(--font-serif); letter-spacing: -0.025em; opacity: 0; transform: translateY(18px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); text-shadow: 0 1px 18px rgba(17, 17, 17, 0.35); }
.beat.is-on { opacity: 1; transform: none; }
@media (min-width: 900px) { .beat { left: auto; right: max(var(--gutter), calc((100vw - var(--container)) / 2)); text-align: right; } }
/* Statik geri düşüş: JS yok / reduced-motion / zayıf bağlantı / hata (brief 3.6) */
.no-js .hero-seq, .hero-seq.is-static { height: auto; }
.no-js .hero-seq__sticky, .hero-seq.is-static .hero-seq__sticky { position: relative; height: min(100svh, 820px); }
.no-js .hero-seq__canvas, .hero-seq.is-static .hero-seq__canvas, .no-js .hero-seq__beats, .hero-seq.is-static .hero-seq__beats { display: none; }
@media (prefers-reduced-motion: reduce) {
    .hero-seq { height: auto; }
    .hero-seq__sticky { position: relative; height: min(100svh, 820px); }
    .hero-seq__canvas, .hero-seq__beats { display: none; }
}

/* ---------- Bölümler ---------- */
.section { padding-block: clamp(72px, 10vw, 136px); }
.section + .section { padding-top: 0; }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.section-title { margin-bottom: clamp(28px, 3.4vw, 44px); max-width: 22ch; text-wrap: balance; }
.section-head .section-title, .group-head .section-title, .section-title:has(+ .section-lead) { margin-bottom: 0; }
.section-title a { color: inherit; text-decoration: none; }
.section-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.section-subtitle { margin: 40px 0 14px; font: 600 1.1rem/1.3 var(--font-sans); }
.section-lead { margin: 18px 0 0; max-width: 56ch; font-size: 1.1rem; color: var(--muted); }
.section-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
/* Editoryal başlık: sol başlık, sağ giriş cümlesi (başlık satırıyla alt hizalı) */
@media (min-width: 900px) {
    .section-head:not(.section-head-row):has(> .section-lead) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 0 clamp(32px, 6vw, 96px); align-items: end; }
    .section-head:not(.section-head-row) > .section-lead { margin: 0 0 0.35em; }
}

.page-head { padding-block: clamp(48px, 7vw, 88px) 8px; }
.page-title { margin-bottom: 12px; max-width: 20ch; text-wrap: balance; }
.page-head + .section { padding-top: clamp(32px, 4.5vw, 56px); }  /* sayfa başlığı ile ilk içerik arasında boşluk (iki .section yan yana olunca üst boşluk sıfırlanıyordu) */
.group-head { display: flex; align-items: center; gap: 18px; }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .grid-3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }  /* 4 kart: 3+1 yetim satır yerine 2×2 */
@media (min-width: 640px) and (max-width: 959.98px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
/* Ana sayfa hizmet grupları: asimetrik bento (7/5 · 5/7) */
@media (min-width: 960px) {
    .hub-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .hub-grid > .card { grid-column: span 6; }
    .hub-grid > .card:nth-child(4n+1), .hub-grid > .card:nth-child(4n+4) { grid-column: span 7; }
    .hub-grid > .card:nth-child(4n+2), .hub-grid > .card:nth-child(4n+3) { grid-column: span 5; }
    .hub-grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Kartlar ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.8vw, 36px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
a.card { text-decoration: none; color: inherit; }
.card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card-title { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.card-title a { color: inherit; text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-text { margin: 0; color: var(--muted); font-size: 0.98rem; }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-weight: 550; font-size: 0.95rem; color: var(--ink); text-decoration: none; }
.card-link .icon { transition: transform 0.2s var(--ease); }
.card:hover .card-link .icon, .card-link:hover .icon { transform: translateX(3px); }
.card .link-list a, .card .card-link { position: relative; z-index: 1; }
.hub-card-top { display: flex; align-items: center; justify-content: space-between; }
.hub-icon, .band-icon, .team-avatar { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--ic-bg, var(--tag-bg)); color: var(--ic-ink, var(--tag-ink)); }
.hub-num { font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--muted); }
/* Simge zeminleri: mavi ve kırık beyaz döngüsü */
.grid > .card:nth-child(4n+1) { --ic-bg: var(--blue-100); --ic-ink: var(--blue-ink); }
.grid > .card:nth-child(4n+2) { --ic-bg: var(--neutral-bg); --ic-ink: var(--blue-900); }
.grid > .card:nth-child(4n+3) { --ic-bg: var(--blue-200); --ic-ink: var(--blue-900); }
.grid > .card:nth-child(4n+4) { --ic-bg: var(--neutral-bg); --ic-ink: var(--blue-900); }
.link-list { list-style: none; display: grid; gap: 0; }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 0.97rem; transition: color 0.15s; }
.link-list a::after { content: "→"; opacity: 0; transform: translateX(-4px); color: var(--muted); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.link-list a:hover { color: var(--ink); }
.link-list a:hover::after { opacity: 1; transform: none; }
.service-card { gap: 10px; }
.path-card { gap: 16px; }
.path-card .card-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* ---------- Bantlar (kemik zemin) ---------- */
.band { background: var(--blue-900); color: var(--on-blue-dim); padding-block: clamp(64px, 8vw, 112px); }
.band h2 { max-width: 24ch; text-wrap: balance; color: var(--on-blue); }
.band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.band-copy { max-width: 760px; }
.band-copy p { margin: 16px 0 0; font-size: 1.08rem; color: var(--on-blue-dim); }
.band-icon { margin-bottom: 20px; }
.band .band-icon { --ic-bg: rgba(244, 241, 234, 0.1); --ic-ink: var(--on-blue); box-shadow: inset 0 0 0 1px var(--on-blue-line); }
.band a:not(.btn) { color: var(--on-blue); }

.cta-band { padding-block: clamp(56px, 8vw, 112px); }
.cta-band-inner {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px;
    padding: clamp(32px, 5vw, 72px); background: var(--blue-900); color: var(--on-blue-dim); border-radius: var(--radius);
    background-image: linear-gradient(rgba(244, 241, 234, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 234, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
}
.cta-band-inner::before { content: ""; position: absolute; z-index: -1; right: clamp(-120px, -6vw, -40px); top: clamp(-140px, -8vw, -60px); width: clamp(200px, 26vw, 360px); aspect-ratio: 1; border-radius: 50%; background: var(--blue-800); }
.cta-band h2 { max-width: 20ch; text-wrap: balance; color: var(--on-blue); }
.cta-band p { margin: 16px 0 0; max-width: 54ch; font-size: 1.08rem; color: var(--on-blue-dim); }
.cta-band .cta-promise, .cta-box .cta-promise { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--on-blue-faint); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Güven şeridi ve markalar ---------- */
.trust-strip { background: var(--white); border-bottom: 1px solid var(--line); padding-block: clamp(32px, 4vw, 48px); }
.trust-title { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.trust-list { list-style: none; display: grid; gap: 12px; }
@media (min-width: 640px) { .trust-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust-list { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); }
.trust-item:hover { border-color: var(--blue-200); box-shadow: var(--shadow-hover); transform: translateY(-2px); color: var(--ink); }
.trust-brand { font: 400 1.3rem/1.2 var(--font-serif); letter-spacing: -0.02em; color: var(--blue-900); }
.trust-badge { font-size: 0.88rem; color: var(--muted); line-height: 1.4; }
.section-brands, .section-faq { background: var(--bone); }
.section-brands { --line: #ddd8cc; }
/* Watermaker bölümü: açık mavi yıkama, beyaz kartlar */
.section-wm { background: var(--blue-50); --line: #d0dfec; }
.theme-wm .section-wm { --line: #cfe3e7; }
.brand-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 32px; }
.brand-tile { display: grid; place-items: center; min-height: 72px; padding: 12px 16px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-weight: 550; font-size: 0.97rem; color: var(--ink); }
.note { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; color: var(--muted); font-size: 0.95rem; }
.note .icon { margin-top: 3px; color: var(--muted); }
.note-lg { font-size: 1.05rem; padding: 20px 24px; background: var(--bone); border-radius: var(--radius); border: 1px solid var(--line); margin: 0; }

/* ---------- Süreç ---------- */
.process { list-style: none; display: grid; gap: 28px; counter-reset: step; margin-top: 32px; }
@media (min-width: 760px) { .process { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.process-step { position: relative; padding-top: 20px; border-top: 1px solid var(--blue-900); }
.process-step h3 { margin: 14px 0 8px; font-size: 1.3rem; }
.process-step p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.process-num, .wm-step-num { display: inline-block; font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--blue-600); }
.process-num::before, .wm-step-num::before { content: "0"; }

/* ---------- Watermaker zinciri ---------- */
.wm-chain { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 8px 0 40px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px) { .wm-chain { grid-template-columns: repeat(6, 1fr); } }
.wm-step { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 20px 18px 22px; background: var(--white); }
.wm-step-label { font: 400 1.15rem/1.2 var(--font-serif); letter-spacing: -0.015em; color: var(--blue-900); }
.wm-paths { margin-top: 8px; }

/* ---------- İçerik ---------- */
.prose { max-width: 68ch; }
.prose-lg { font-size: 1.12rem; }
.prose h2 { margin: 2.6rem 0 0.9rem; font-size: clamp(1.55rem, 1.3rem + 0.9vw, 2.05rem); letter-spacing: -0.025em; }
.prose h3 { margin: 2rem 0 0.6rem; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin: 0.4em 0; }
.prose a { font-weight: 500; color: var(--blue-900); text-decoration-color: rgba(47, 110, 163, 0.55); }
.prose blockquote { margin: 2rem 0; padding: 2px 0 2px 24px; border-left: 2px solid var(--blue-600); font: italic 400 1.3rem/1.5 var(--font-serif); color: var(--ink); }
.prose code { padding: 0.1em 0.4em; border-radius: 4px; background: var(--blue-bg); color: var(--blue-ink); font: 0.88em var(--font-mono); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.detail-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; } .detail-side { position: sticky; top: calc(var(--header-h) + 24px); } }
.scope-list { list-style: none; display: grid; gap: 0; margin-bottom: 40px; border-top: 1px solid var(--line); }
.scope-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.scope-list .icon { margin-top: 3px; color: var(--green-ink); }
.cta-box { padding: 32px; background: var(--blue-900); color: var(--on-blue-dim); border-radius: var(--radius); }
.cta-box h2 { font-size: 1.6rem; color: var(--on-blue); }
.cta-box p { margin: 10px 0 20px; }
.cta-box .cta-promise { margin: 18px 0 0; }
.callout { margin-top: 40px; padding: 24px 28px; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); }
.callout-title { font: 600 1rem/1.3 var(--font-sans); margin-bottom: 14px; }
.auth-links { list-style: none; display: grid; gap: 10px; }
.auth-links-row { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.auth-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; transition: border-color 0.2s; }
.auth-link:hover { border-color: var(--blue-600); color: var(--ink); }
.auth-link .icon { color: var(--green-ink); }
.auth-badge { display: flex; align-items: center; gap: 12px; padding: 16px 20px; margin-bottom: 28px; background: var(--green-bg); border-radius: var(--radius-sm); font-size: 1.05rem; color: var(--green-ink); }
.auth-badge .icon { color: var(--green-ink); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.data-table th, .data-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { background: var(--blue-50); color: var(--muted); font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.data-table tbody th { font-weight: 600; color: var(--ink); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.team-list { list-style: none; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.team-card { display: flex; flex-direction: column; gap: 4px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.team-avatar { margin-bottom: 12px; }
.breadcrumbs { padding: 18px 0 0; font-size: 0.88rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumbs a { color: var(--muted); text-decoration-color: transparent; }
.breadcrumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.hero + .breadcrumbs, .hero-seq + .breadcrumbs { background: var(--white); padding-block: 14px; border-bottom: 1px solid var(--line); }
.hero + .breadcrumbs ol, .hero-seq + .breadcrumbs ol { padding-inline: var(--gutter); }

/* ---------- SSS ---------- */
.section + .section-faq, .section + .section-brands, .section + .section-wm, .section-faq + .section, .section-brands + .section, .section-wm + .section, .section-faq + .cta-band { padding-top: clamp(72px, 10vw, 136px); }
.cta-band + .section { padding-top: 0; }  /* CTA bandının kendi alt boşluğu yeter: iki boşluk üst üste binmesin */
.section-faq { --line: #ddd8cc; }
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.08rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover .faq-icon { color: var(--blue-600); }
.faq-icon { color: var(--muted); }
.faq-icon--minus, .faq[open] .faq-icon--plus { display: none; }
.faq[open] .faq-icon--minus { display: block; }
.faq-answer { padding: 0 0 26px; color: var(--muted); }
.faq-answer p { margin: 0; max-width: 64ch; }

/* ---------- Lokasyonlar ---------- */
.location-grid { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .location-grid { grid-template-columns: repeat(2, 1fr); } }
.location-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.location-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.location-address { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); }
.location-address .icon { margin-top: 3px; color: var(--muted); }
.location-note { margin: 0; color: var(--muted); font-size: 0.97rem; }
.location-block h4 { margin-bottom: 8px; font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.location-block p { margin: 0; }
.hours { margin: 0; display: grid; gap: 0; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.hours dt { color: var(--muted); } .hours dd { margin: 0; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.location-phone { margin: 0; }
.location-phone a { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; color: var(--ink); text-decoration: none; }
.location-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-embed { position: relative; margin-top: 6px; min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background-color: var(--bone);
    background-image: linear-gradient(rgba(16, 47, 79, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 47, 79, 0.05) 1px, transparent 1px); background-size: 32px 32px; }  /* iframe yüklenene kadar ızgaralı zemin */
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Altbilgi ---------- */
.site-footer { background: var(--blue-900); color: var(--on-blue-dim); padding-top: clamp(56px, 7vw, 96px); }
.site-footer a { color: var(--on-blue); text-decoration: none; }
.site-footer .brand-mark { filter: none; }  /* beyaz logo, mavi zeminde olduğu gibi */
.site-footer .muted { color: var(--on-blue-faint); }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 48px; } }
.footer-brand p { margin: 20px 0; max-width: 34ch; font-size: 0.97rem; }
.footer-title { margin-bottom: 16px; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-blue-faint); }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-branch { margin-bottom: 16px; font-size: 0.96rem; line-height: 1.55; }
.footer-branch strong { color: var(--on-blue); font-weight: 600; }
.social { display: flex; gap: 8px; }
.social .icon-btn { border: 1px solid var(--on-blue-line); background: transparent; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-block: 24px 32px; border-top: 1px solid var(--on-blue-line); font-size: 0.9rem; color: var(--on-blue-dim); }
.footer-bottom p { margin: 0; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom .link-btn { color: var(--on-blue); text-decoration-color: var(--on-blue-faint); }
.footer-credit { margin-left: 12px; }

/* ---------- Mobil sabit CTA çubuğu (brief 10) ---------- */
.sticky-bar, .sheet { display: none; }
@media (max-width: 767.98px), (max-width: 1023.98px) and (orientation: portrait) {
    .sticky-bar {
        display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px;
        padding-bottom: env(safe-area-inset-bottom); background: var(--line);
        border-top: 1px solid var(--line);
        transition: transform 0.2s var(--ease);
    }
    .sticky-bar[data-count="2"] { --cols: 2; } .sticky-bar[data-count="3"] { --cols: 3; } .sticky-bar[data-count="1"] { --cols: 1; }
    .sticky-bar.is-hidden { transform: translateY(110%); }
    .sticky-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: var(--sticky-h); padding: 8px 6px; background: var(--paper); color: var(--ink); border: 0; text-decoration: none; font-size: 0.78rem; font-weight: 550; letter-spacing: 0.01em; }
    .sticky-btn:hover { color: var(--ink); background: var(--bone); }
    .sticky-btn-accent { background: var(--btn); color: var(--white); }
    .sticky-btn-accent:hover { background: var(--btn-hover); color: var(--white); }
    body.has-sticky .site-footer { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
    .sticky-bar ~ .consent { bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom) + 8px); }
    /* Çubuk zaten Ara / WhatsApp / Servis Talebi veriyor: hero'daki ikincil düğme tekrarlanmaz, ilk ekranda yanıt süresi sözü de görünür kalır */
    body.has-sticky .hero-cta .btn-outline { display: none; }
    body.has-sticky .hero-promise { margin-top: 14px; }
    /* Hero içeriği çubuğun ÜSTÜNDE biter: H1 + birincil CTA + yanıt süresi sözü ilk ekranda (brief 3.3) */
    body.has-sticky .hero-content,
    body.has-sticky .hero-seq__content.hero-content { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom) + 14px); }
}
@media (max-height: 700px) and (max-width: 767.98px) {
    .hero-content { padding-top: calc(var(--header-h) + 20px); }
    .hero-lead { margin-top: 12px; }
    .hero-cta { margin-top: 20px; }
    .eyebrow { margin-bottom: 12px; }
}
/* Alt sayfa (bottom sheet) */
.sheet[hidden] { display: none; }
.sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 90; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.4); animation: fade-in 0.2s; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86svh; overflow: auto; padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--white); color: var(--muted); border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; animation: sheet-up 0.28s var(--ease); }
@media (min-width: 768px) { .sheet-panel { left: 50%; right: auto; bottom: auto; top: 50%; width: min(460px, 92vw); border: 1px solid var(--line); border-radius: var(--radius); transform: translate(-50%, -50%); animation: fade-in 0.2s; padding-bottom: 24px; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sheet-head h2 { font-size: 1.5rem; }
.sheet-list { list-style: none; display: grid; gap: 10px; }
.sheet-call { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.sheet-call:hover { border-color: var(--blue-600); color: var(--ink); }
.sheet-call-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--blue-900); color: var(--white); }
.sheet-call-text { display: flex; flex-direction: column; font-size: 1.08rem; line-height: 1.3; }
.sheet-call-text span { color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.sheet-promise { margin: 18px 0 0; font-size: 0.92rem; color: var(--muted); }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Çerez bandı ---------- */
.consent[hidden] { display: none; }
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; max-width: 760px; padding: 24px; background: var(--white); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); }
/* Küçük ekranda sıkı: hero CTA'sını mümkün olduğunca az örter */
@media (max-width: 599.98px) {
    .consent { padding: 14px 16px; }
    .consent-title { font-size: 1.1rem; margin-bottom: 4px; }
    .consent-text { font-size: 0.85rem; line-height: 1.45; margin-bottom: 10px; }
    .consent-actions { gap: 8px 12px; }
    .consent-actions .btn { min-height: 38px; padding: 0 14px; font-size: 0.88rem; }
}
/* Masaüstünde sağ altta: hero içeriği (H1 + birincil CTA) solda olduğu için örtülmez */
@media (min-width: 900px) { .consent { left: auto; right: 24px; bottom: 24px; max-width: 440px; } }
.consent-title { font-size: 1.35rem; color: var(--ink); margin-bottom: 8px; }
.consent-text { margin: 0 0 18px; font-size: 0.95rem; }
.consent-text a { color: var(--ink); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.consent-cats { list-style: none; display: grid; gap: 12px; margin: 14px 0 20px; }
.switch { position: relative; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { flex: none; position: relative; width: 44px; height: 26px; margin-top: 2px; border-radius: 9999px; background: var(--line-strong); transition: background 0.2s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform 0.2s var(--ease); }
.switch input:checked + .switch-ui { background: var(--blue-900); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); }
.switch input:disabled + .switch-ui { opacity: 0.55; }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.97rem; }
.switch-text strong { color: var(--ink); font-weight: 600; }
.switch-text small { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

/* ---------- Dil ipucu (bir kez, kapatılabilir) ---------- */
.lang-hint { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 58; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 48px 8px 16px; background: var(--bone); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 0.9rem; }
.lang-hint a { color: var(--ink); font-weight: 600; }
.lang-hint button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: 1.4rem; line-height: 1; }

/* ---------- Hata sayfası ---------- */
.error-page { padding-block: clamp(64px, 10vw, 136px); }
.error-code { margin: 0 0 8px; font: 400 clamp(6rem, 18vw, 11rem)/0.9 var(--font-serif); color: var(--blue-900); letter-spacing: -0.05em; }
.error-page .hero-cta { margin-top: 32px; }

/* ---------- Formlar ---------- */
.form { display: grid; gap: 24px; }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .field > .label, fieldset > legend { font-weight: 550; font-size: 0.95rem; color: var(--ink); }
.req { color: var(--danger); margin-left: 2px; }
.hint { color: var(--muted); font-size: 0.88rem; margin: 0; }
.input, .select, .textarea {
    width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; color: var(--ink);
    background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea { min-height: 140px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(47, 110, 163, 0.18); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field-error { margin: 0; color: var(--danger); font-size: 0.9rem; font-weight: 550; }
.alert { padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bone); font-size: 0.97rem; }
.alert-error { border-color: transparent; background: var(--red-bg); color: var(--red-ink); }
.alert-ok { border-color: transparent; background: var(--green-bg); color: var(--green-ink); }
.alert-info { border-color: transparent; background: var(--blue-bg); color: var(--blue-ink); }
.checkbox { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 0.97rem; }
.checkbox input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--blue-900); }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.radio-cards { display: grid; gap: 10px; margin-top: 8px; }
@media (min-width: 720px) { .radio-cards { grid-template-columns: repeat(2, 1fr); } .radio-cards-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) { .radio-cards-3 { grid-template-columns: repeat(3, 1fr); } }
.radio-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--white); cursor: pointer; font-weight: 500; color: var(--ink); transition: border-color 0.15s, background 0.15s; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card:hover { border-color: var(--muted); }
.radio-card:has(input:checked) { border-color: var(--blue-900); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-900); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.radio-card .icon { color: var(--muted); }
.form-promise { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--bone); border: 1px solid var(--line); color: var(--muted); font-size: 0.97rem; }
.form-promise .icon { color: var(--blue-600); }
.upload { display: grid; gap: 12px; }
.upload-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bone); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.upload-drop:hover, .upload-drop.is-over { border-color: var(--blue-600); background: var(--white); }
.upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.upload-thumbs li { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bone); border: 1px solid var(--line); }
.upload-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.upload-thumbs button { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 6px; border: 0; background: rgba(17, 17, 17, 0.8); color: var(--white); display: grid; place-items: center; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.iti-row { display: grid; grid-template-columns: 148px 1fr; gap: 10px; }
.wizard-progress { display: flex; gap: 8px; margin-bottom: 8px; list-style: none; }
.wizard-progress li { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.wizard-progress li.is-done, .wizard-progress li.is-current { background: var(--blue-900); }
.wizard-step[hidden] { display: none; }
.wizard-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
.estimate { padding: 24px 28px; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); }
.estimate-value { font: 400 2.2rem/1.1 var(--font-serif); letter-spacing: -0.03em; color: var(--blue-900); }
.estimate-tag { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 9999px; background: var(--tag-bg); color: var(--tag-ink); font: 600 0.72rem/1.6 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

@media print {
    .site-header, .sticky-bar, .consent, .sheet, .cta-band, .site-footer { display: none !important; }
    main { margin: 0 !important; }
    .js .reveal { opacity: 1 !important; translate: none !important; }
}


/* ==========================================================================
   Hizalama düzeni: kartlar ve konum kartları (subgrid)
   Yan yana kartların başlık / metin / bağlantı satırları aynı hizada başlar; başlığı iki satıra sarkan bir kart
   komşusunun metnini aşağı itmez. Subgrid desteği yoksa (eski tarayıcı) önceki esnek yerleşim aynen sürer.
   ========================================================================== */
@supports (grid-template-rows: subgrid) {
    .grid:has(> .card) { row-gap: 0; margin-bottom: calc(var(--gap) * -1); }
    .grid > .card {
        display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 3);
        row-gap: 0; align-content: start; margin-bottom: var(--gap);
    }
    .grid > .card > * { margin: 0; min-width: 0; }
    .grid > .card > * + * { margin-top: 14px; }
    .grid > .card > .card-link { grid-row: -2; align-self: end; justify-self: start; margin-top: 14px; padding-top: 6px; }
    .grid > .path-card { --rows: 4; }
    .grid > .path-card > .hub-icon { justify-self: start; }
    .grid > .path-card > * + * { margin-top: 16px; }
    .grid > .card > .process-num { justify-self: start; }

    /* Ana sayfa hizmet grubu kartları: ikon, başlık, bağlantı listesi (her satır komşu kartla aynı hizada), "Tümünü gör" */
    .grid > .hub-card > .hub-card-top { margin-top: 0; }
    .grid > .hub-card > .link-list { display: grid; grid-template-rows: subgrid; grid-row: 3 / span var(--n, 4); row-gap: 0; align-content: start; margin-top: 14px; }
    .grid > .hub-card > .link-list > li { margin: 0; border-bottom: 1px solid var(--line); }
    .grid > .hub-card > .link-list a { height: 100%; border-bottom: 0; }

    /* İki lokasyon kartı: adres / not / ulaşım / saatler / telefon / düğmeler / harita satırları iki kartta da aynı hizada */
    @media (min-width: 900px) {
        .location-grid { row-gap: 0; }  /* ızgara satır boşluğu subgrid satırlarına da yansır; kartlar tek satırda olduğu için gerekmez */
        .location-card { display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 0; align-content: start; }
        .location-card > * { margin: 16px 0 0; min-width: 0; }
        .location-card > .location-head { grid-row: 1; margin-top: 0; }
        .location-card > .location-address { grid-row: 2; }
        .location-card > .location-note { grid-row: 3; }
        .location-card > .location-transport { grid-row: 4; }
        .location-card > .location-hours { grid-row: 5; }
        .location-card > .location-phone { grid-row: 6; }
        .location-card > .location-actions { grid-row: 7; align-self: start; }
        .location-card > .map-embed { grid-row: 8; align-self: stretch; }
    }
}

/* Yetkili servis rozet listesi: kartlar eşit yükseklikte */
.auth-links > li { display: flex; }
.auth-links .auth-link { flex: 1; }

/* Blog yazısı: breadcrumb ile başlık arasındaki çift boşluk (section + page-head üst boşlukları üst üste biniyordu) */
.blog-article { padding-top: 0; }
.blog-article .page-head { padding-top: clamp(28px, 4vw, 48px); }

/* Gövdeye eklenen görseller (panel → "Görsel ekle"): içerik genişliğine sığar, oran korunur */
.prose figure { margin: 2rem 0; }
.prose img { width: 100%; height: auto; border-radius: var(--radius); background: var(--bone); }
.prose figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }


/* ==========================================================================
   QR açılış sayfası (/qr): telefondan, tek elle. Siteden bağlantı verilmez; noindex.
   ========================================================================== */
.qr { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: calc(var(--header-h) + 20px) var(--gutter) 48px; background: var(--bone); overflow: hidden; }
.qr::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(16, 47, 79, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 47, 79, 0.05) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; }
.qr::after { content: ""; position: absolute; z-index: -1; right: clamp(-90px, -6vw, -30px); top: calc(var(--header-h) + 8px); width: clamp(150px, 26vw, 280px); aspect-ratio: 1; border-radius: 50%; background: var(--tag-bg); }
.qr-card { width: min(100%, 520px); min-width: 0; margin-inline: auto; padding: clamp(24px, 6vw, 40px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.qr-card .eyebrow { margin-bottom: 16px; }
.qr-title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.5rem); margin-bottom: 12px; text-wrap: balance; }
.qr-lead { margin: 0 auto 26px; max-width: 38ch; font-size: 1rem; color: var(--muted); }
.qr-about { margin: 26px auto 0; font-size: 0.95rem; }
.qr-group-title { margin: 28px 0 12px; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.qr-actions { list-style: none; display: grid; gap: 10px; }
.qr-pair { grid-template-columns: repeat(2, 1fr); }
.qr-call { justify-content: flex-start; gap: 12px; text-align: left; }
.qr-call-name { font-weight: 600; }
.qr-call-num { margin-left: auto; color: var(--muted); font: 500 0.9rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.qr-promise { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 0; font-size: 0.92rem; color: var(--muted); }
.qr-social { justify-content: center; margin-top: 18px; }
.qr-link { justify-content: space-between; }
@media (max-width: 380px) { .qr-pair { grid-template-columns: 1fr; } .qr-call-num { display: none; } }
/* Katalog PDF kutusu: kartın en üstünde, fuarda/basılı malzemede göz önünde olsun diye büyük ve çerçeveli */
.qr-catalog { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; padding: 18px 20px; text-align: left; text-decoration: none; color: var(--ink); background: var(--blue-50); border: 2px solid var(--blue-900); border-radius: var(--radius); transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.qr-catalog:hover { background: var(--blue-100); color: var(--ink); }
.qr-catalog:active { transform: scale(0.99); }
.qr-catalog-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 10px; background: var(--blue-900); color: var(--white); }
.qr-catalog-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qr-catalog-text strong { font: 400 clamp(1.3rem, 1.1rem + 1vw, 1.55rem)/1.15 var(--font-serif); letter-spacing: -0.02em; }
.qr-catalog-text span { font-size: 0.88rem; color: var(--muted); }
.qr-catalog-go { margin-left: auto; flex: none; color: var(--blue-900); }


/* ==========================================================================
   Üst bilgi dar ekranda sığar (≈320–480 px). Önceden logo + yazı + telefon + dil + menü ~425 px istiyordu:
   menü düğmesi ekran dışına taşıyor, body{overflow-x:hidden} olduğu için kaydırma çubuğu da çıkmıyordu.
   Ayrıca sistem fontu cihazdan cihaza değişir (iPhone/Mac SF geniş): marka yazısı ESNEKTİR, gerekirse kırpılır;
   eylem düğmeleri hiçbir zaman ekran dışına itilmez.
   ========================================================================== */
.header-bar { min-width: 0; }
.brand { min-width: 0; flex: 0 1 auto; }
.brand-word { min-width: 0; overflow: hidden; }
.header-actions { flex: none; }
@media (max-width: 479.98px) {
    .header-bar { gap: 8px; }
    .brand { gap: 8px; }
    .brand-mark { width: 34px; height: 34px; }
    .is-scrolled .brand-mark { width: 30px; height: 30px; }
    .brand-word { font-size: 0.86rem; letter-spacing: 0.14em; }
    .brand-word span { letter-spacing: 0.14em; }
    .header-actions { gap: 2px; }
    .header-actions .icon-btn { width: 42px; }
    .lang-switch { padding: 0 9px; gap: 0; }
    .lang-switch .icon { display: none; }
}
@media (max-width: 344.98px) { .header-phone { display: none; } }  /* çok dar ekranda telefon simgesi gizlenir; alttaki çubukta "Ara" var */

/* /qr dar ekran: arama satırı (isim + numara) tek satıra sığmaz → numara ismin altına iner; düğme metinleri gerekirse sarar */
@media (max-width: 520px) {
    .qr-card .btn { white-space: normal; text-align: center; }
    .qr-call { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; height: auto; padding-block: 10px; text-align: left; }
    .qr-call .icon { grid-row: 1 / span 2; }
    .qr-call-name, .qr-call-num { grid-column: 2; margin-left: 0; display: block; }
    .qr-pair { gap: 8px; }
}
@media (max-width: 380px) { .qr-call-num { display: block; } }  /* önceki "gizle" kuralını geçersiz kılar: numara her zaman görünür */

/* Çok dar ekran güvencesi: düğme metni tek satıra sığmazsa sarar (nowrap düğmeler kartı/ızgarayı genişletmesin) */
@media (max-width: 400px) {
    .btn { white-space: normal; line-height: 1.25; padding-block: 10px; text-align: center; }
    .location-card, .qr-card, .card { min-width: 0; }
}
@media (max-width: 400px) { .qr-card .qr-call { text-align: left; } }