/* ═════════════════════════════════════════════════════════════
   IMPERA — Tema, standart bileşenler ve yol haritası v5 kuralları
   ═════════════════════════════════════════════════════════════ */

/* ── Panelden gelen tipografi değişkenleri ── */
body { font-size: var(--body-size, 16px); }
.h2 { font-size: calc(clamp(30px, 5.2vw, 58px) * var(--h-scale, 1)); }
.xhero__title { font-size: calc(clamp(28px, min(9vw, 11vh), 120px) * var(--h-scale, 1)); }
.prose a, .post__body a { color: var(--link, var(--gold)); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover, .post__body a:hover { color: var(--link-hover, var(--gold-2)); }

/* ── Metin taşma koruması ── */
h1, h2, h3, h4, p, li, blockquote, figcaption, .pcard__body, .hcard__info, .bcard__body { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.nav__pill a, .langs__menu a, .chips button, .tabs button { white-space: nowrap; }
.pcard h3 a, .hcard h3, .bcard h2 a, .bcard h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.footer__grid a, .footer__grid p { overflow-wrap: anywhere; }

/* ═════ AÇIK TEMA ═════ */
[data-theme=light] {
  --black: #F6F1E7; --dark: #EEE6D5; --dark-3: #E4D9C2;
  --text: #17150F; --muted: #574F42;
  --gold: #8A6A10; --gold-2: #6E540B; --gold-3: #5C460A;
  --line: rgba(138,106,16,.28); --line-2: rgba(23,21,15,.10);
  color-scheme: light;
}
[data-theme=dark] { color-scheme: dark; }
/* Görsel üstündeki alanlar her iki temada da koyu paletini korur */
[data-theme=light] :is(.xhero, .phero, .hcard, .xvideo, .vtour, .xpre, .lightbox, .vmodal, .pcard__media, .pgal figure, .masonry figure, .hscroll__item, .member__img, .search) {
  --black: #0D0D0D; --dark: #1A1A1A; --text: #EDE8DC; --muted: #C8C1B2;
  --gold: #D4AF37; --gold-2: #F1D77A; --line: rgba(212,175,55,.22); --line-2: rgba(255,255,255,.1);
  color: var(--text);
}
[data-theme=light] .xhero, [data-theme=light] .xhero__pin, [data-theme=light] .xpre { background: #0D0D0D; }
[data-theme=light] body { background: var(--black); color: var(--text); }
[data-theme=light] .grain { opacity: .035; }
[data-theme=light] ::selection { color: #fff; }

/* Üst menü: görselin üstündeyken açık metin, kaydırınca krem zemin + koyu metin */
.nav:not(.is-scrolled) { --text: #EDE8DC; }
[data-theme=light] .nav:not(.is-scrolled) .nav__word b, [data-theme=light] .nav:not(.is-scrolled) .nav__word small { color: #D4AF37; }
.nav__pill a { color: color-mix(in srgb, var(--text) 82%, transparent); }
[data-theme=light] .nav.is-scrolled { background: rgba(246,241,231,.88); border-color: var(--line-2); }
[data-theme=light] .nav.is-scrolled .nav__pill { background: rgba(23,21,15,.04); border-color: var(--line-2); }
[data-theme=light] .nav.is-scrolled .nav__pill a { color: #2A261E; }
[data-theme=light] .nav.is-scrolled :is(.nav__burger, .langs__btn, .theme-toggle) { background: #fff; }
[data-theme=light] .nav:not(.is-scrolled) .nav__pill a:not(.is-active) { color: rgba(237,232,220,.85); }
[data-theme=light] .nav:not(.is-scrolled) .nav__phone { color: rgba(237,232,220,.75); }
[data-theme=light] .langs__menu { background: #fff; box-shadow: 0 20px 40px -14px rgba(0,0,0,.25); }
[data-theme=light] .menu__bg::after { background: rgba(246,241,231,.96); }
[data-theme=light] .glass { background: rgba(255,255,255,.82); box-shadow: 0 30px 60px -30px rgba(80,60,10,.25); }
[data-theme=light] .cform input:not([type=checkbox]), [data-theme=light] .cform select, [data-theme=light] .cform textarea, [data-theme=light] .phone-field { background: #fff; border-color: rgba(23,21,15,.16); }
[data-theme=light] .cta::before { background: linear-gradient(90deg, var(--black) 30%, rgba(246,241,231,.78)); }
[data-theme=light] .scard__inner { background: linear-gradient(145deg, #FFFBF2, #EFE6D3 70%); box-shadow: 0 -20px 50px -25px rgba(80,60,10,.35); }
[data-theme=light] .manifesto__text .wd { color: rgba(23,21,15,.13); }
[data-theme=light] .manifesto__text .wd.on { color: var(--text); }
[data-theme=light] .dock { background: rgba(255,255,255,.92); box-shadow: 0 16px 34px -12px rgba(0,0,0,.3); }
[data-theme=light] .map { filter: grayscale(.4); }
[data-theme=light] .marquee--outline span { -webkit-text-stroke-color: rgba(138,106,16,.5); }
[data-theme=light] .tcard, [data-theme=light] .step, [data-theme=light] .stat, [data-theme=light] .tstep__dot { background: #FFFDF8; }
[data-theme=light] .pcard { background: #FFFDF8; box-shadow: 0 20px 40px -30px rgba(80,60,10,.35); }
[data-theme=light] .footer__mega { background-image: linear-gradient(100deg, rgba(138,106,16,.22) 30%, rgba(200,160,50,.9) 50%, rgba(138,106,16,.22) 70%); }
[data-theme=light] .btn--ghost:hover { background: rgba(138,106,16,.08); }
[data-theme=light] .cform__msg.ok { color: #1E7A3C; }
[data-theme=light] .cform__msg.err { color: #B42318; }
.nav__logo { height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.nav__logo--light, .footer__logo.nav__logo--light { display: none; }
[data-theme=light] .nav.is-scrolled .nav__logo--light { display: block; }
[data-theme=light] .nav.is-scrolled .nav__logo--dark { display: none; }
[data-theme=light] .footer .nav__logo--light { display: block; }
[data-theme=light] .footer .nav__logo--dark { display: none; }
.footer__logo { height: 64px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 14px; }

/* ── Tema düğmesi (ON/OFF toggle) ── */
.theme-toggle { position: relative; width: 62px; height: 34px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: rgba(13,13,13,.45); backdrop-filter: blur(10px); padding: 0; display: flex; align-items: center; justify-content: space-between; overflow: hidden; transition: background .4s, border-color .4s; }
.theme-toggle svg { position: relative; z-index: 1; width: 16px; height: 16px; margin: 0 8px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: opacity .4s, color .4s; }
.theme-toggle__knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-grad); box-shadow: 0 4px 12px -3px rgba(0,0,0,.5); transition: transform .5s var(--ease-out); }
.theme-toggle__sun { color: #F6E27A; }
.theme-toggle__moon { color: rgba(237,232,220,.35); }
/* Koyu modda: düğme sağda (ay üstünde), güneş net görünür → açık moda geçiş */
[data-theme=dark] .theme-toggle__knob { transform: translateX(28px); }
[data-theme=dark] .theme-toggle__moon { color: #111; }
[data-theme=light] .theme-toggle { background: #fff; border-color: rgba(23,21,15,.15); }
[data-theme=light] .theme-toggle__sun { color: #111; }
[data-theme=light] .theme-toggle__moon { color: #2A261E; }
.nav:not(.is-scrolled) .theme-toggle { background: rgba(13,13,13,.45); }
[data-theme=light] .nav:not(.is-scrolled) .theme-toggle__moon { color: #EDE8DC; }

/* Mobil üst bar: logo · tema · hamburger hizalı */
.nav__actions { gap: 10px; }
@media (max-width: 1099px) {
  .nav__actions { gap: 8px; }
  .theme-toggle { width: 58px; height: 34px; }
  [data-theme=dark] .theme-toggle__knob { transform: translateX(24px); }
}
.nav__burger { width: 44px; height: 44px; }

/* Mobil menü kapatma (X) — yumuşak çerçeve */
.menu__close { position: absolute; z-index: 2; top: calc(var(--nav-h) + 14px); inset-inline-end: var(--gutter); width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: rgba(212,175,55,.10); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity .4s .3s, transform .5s .3s var(--ease-out), background .3s; }
.menu__close svg { width: 20px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.menu__close:hover { background: rgba(212,175,55,.2); }
.menu.is-open .menu__close { opacity: 1; transform: none; }
.menu__links a.is-active { color: var(--gold); }

/* ── Sağ alt: yukarı çık + WhatsApp (50×50, 12px boşluk) ── */
.wa-float { display: none !important; }
.floaters .wa-float { display: grid !important; position: static; width: 50px; height: 50px; border-radius: 50%; place-items: center; background: #25D366; color: #fff; box-shadow: 0 10px 24px -8px rgba(37,211,102,.7); transition: transform .3s var(--ease-out); }
.floaters .wa-float svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.floaters { position: fixed; z-index: 81; right: 20px; bottom: calc(20px + var(--safe-b)); display: flex; align-items: center; gap: 12px; }
[dir=rtl] .floaters { right: auto; left: 20px; flex-direction: row-reverse; }
.to-top { width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--gold-grad); color: #111; box-shadow: 0 10px 24px -10px rgba(212,175,55,.8); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s, transform .35s var(--ease-out), visibility .35s; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.floaters a:hover, .to-top:hover { transform: translateY(-3px); }
@media (max-width: 1099px) { .floaters { bottom: calc(94px + var(--safe-b)); right: 14px; } [dir=rtl] .floaters { left: 14px; } }
.dock { grid-template-columns: 1fr 1fr 1.4fr; }

/* ── Footer: 4 sütun, mobilde 2×2 ── */
.footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.footer__brand { grid-column: auto; }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; } }
.footer__brand { text-align: start; }
.footer__brand img:not(.footer__logo) { display: block; }
.footer__bottom { align-items: flex-end; }
.copyright { display: flex; flex-direction: column; gap: 8px; }
.copyright p { margin: 0; }
.copyright a { color: var(--gold); }
.copyright b a { font-weight: 700; }

/* ── Telefon alanı (+90 sabit) ── */
.phone-field { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255,255,255,.04); overflow: hidden; transition: border-color .3s; }
.phone-field:focus-within { border-color: var(--gold); }
.phone-field b { display: grid; place-items: center; padding: 0 12px; font: 600 15px var(--mono); color: var(--gold); border-inline-end: 1px solid var(--line-2); user-select: none; }
.cform .phone-field input { border: 0 !important; background: transparent !important; border-radius: 0; letter-spacing: .04em; }
.cform .is-invalid, .cform .phone-field:has(.is-invalid) { border-color: #E5484D !important; }
.cform__check:has(.is-invalid) span { color: #E5484D; }
.g-recaptcha { min-height: 78px; }

/* ── 404 ── */
.e404 { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 60px) 0 80px; }
.e404__code { display: block; font: 500 clamp(110px, 26vw, 260px)/.85 var(--serif); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e404 .lead { margin: 18px auto 30px; }

/* ── Blog ── */
.bgrid { display: grid; gap: 24px; }
@media (min-width: 760px) { .bgrid { grid-template-columns: repeat(2, 1fr); } .bcard--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; } }
@media (min-width: 1100px) { .bgrid { grid-template-columns: repeat(3, 1fr); } .bgrid--3 { grid-template-columns: repeat(3, 1fr); } }
.bcard { background: var(--dark); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; transition: transform .5s var(--ease-out), border-color .4s; }
.bcard:hover { transform: translateY(-5px); border-color: var(--line); }
.bcard__img { display: block; aspect-ratio: 16/10; overflow: hidden; }
.bcard--lead .bcard__img { aspect-ratio: auto; min-height: 320px; }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.bcard:hover .bcard__img img { transform: scale(1.05); }
.bcard__body { padding: 24px; }
.bcard h2, .bcard h3 { font-size: clamp(20px, 2.2vw, 28px); margin: 10px 0; }
.bcard--lead h2 { font-size: clamp(26px, 3vw, 40px); }
.bcard p { color: var(--muted); margin: 0; }
.bcard .link-arrow { margin-top: 18px; }
.bmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.bmeta__cat { background: var(--gold-grad); color: #111; padding: 5px 12px; border-radius: 999px; }
.post { padding: calc(var(--nav-h) + 40px) 0 60px; }
.post__wrap { max-width: 1100px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.crumbs a:hover { color: var(--gold); }
.crumbs b { color: var(--text); font-weight: 500; }
.post__title { font-size: calc(clamp(32px, 5vw, 60px) * var(--h-scale, 1)); margin: 16px 0 18px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 30px; font-size: 13px; color: var(--muted); }
.share a, .share button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; font-size: 13px; font-weight: 600; }
.share a:hover, .share button:hover { border-color: var(--gold); color: var(--gold); }
.post__cover { margin: 0 0 40px; border-radius: 22px; overflow: hidden; aspect-ratio: 16/8; }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }
.post__grid { display: grid; gap: 30px; }
@media (min-width: 960px) { .post__grid { grid-template-columns: 260px 1fr; gap: 50px; } .toc { position: sticky; top: 100px; align-self: start; } }
.toc { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: var(--dark); }
.toc b { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.toc ol { margin: 12px 0 0; padding-inline-start: 18px; display: grid; gap: 8px; font-size: 14px; }
.toc .toc--h3 { margin-inline-start: 12px; list-style: circle; }
.toc a:hover { color: var(--gold); }
.post__body { font-size: 18px; line-height: 1.8; }
.post__body h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 44px 0 14px; scroll-margin-top: 100px; }
.post__body h3 { font-size: clamp(20px, 2vw, 24px); margin: 32px 0 10px; scroll-margin-top: 100px; }
.post__body img { border-radius: 16px; margin: 24px 0; width: 100%; height: auto; }
.post__body blockquote { border-inline-start: 3px solid var(--gold); margin: 24px 0; padding: 4px 22px; font-family: var(--serif); font-size: 21px; }
.nav__pill { gap: 0; }
@media (min-width: 1100px) and (max-width: 1279px) { .nav__pill a { padding: 9px 12px; font-size: 13.5px; } }

/* ═════ PERFORMANS ═════ */
.scard__inner { position: relative; }
.scard__shade { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; will-change: opacity; }
.xhero__mask { transform-origin: 50% 47.8%; will-change: transform; backface-visibility: hidden; }
.xhero__word { will-change: auto; }
.grain { animation: none; }
.hcard__img img, .pgal__col, .xhero__media img, .xhero__media video { backface-visibility: hidden; }
/* Görünmeyen ağır bölümleri tarayıcı çizmesin */
.faq__grid { content-visibility: auto; contain-intrinsic-size: auto 600px; }
/* Dokunmatik / mobil: pahalı efektleri kapat */
@media (hover: none), (pointer: coarse), (max-width: 1099px) {
  .grain, .xhero__light, .cursor { display: none !important; }
  .nav, .nav.is-scrolled, .nav__burger, .langs__btn, .theme-toggle, .search, .glass, .dock, .about__badge, .pcard__status, .hcard__badge, .hcard__info li, .menu__bg, .btn--glass, .langs__menu {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .nav.is-scrolled { background: rgba(13,13,13,.94); }
  [data-theme=light] .nav.is-scrolled { background: rgba(246,241,231,.97); }
  .dock { background: rgba(20,20,20,.97); }
  [data-theme=light] .dock { background: rgba(255,255,255,.98); }
  .search, .glass { background: rgba(22,22,22,.95); }
  [data-theme=light] .glass { background: #fff; }
  .hcard__badge, .pcard__status, .about__badge { background: rgba(13,13,13,.8); }
  .btn--glass { background: rgba(255,255,255,.14); }
  .marquee__track { animation-duration: 55s; }
  .reveal { transform: translateY(24px); }
  .pcard:hover, .bcard:hover { transform: none; }
}
@media (prefers-reduced-data: reduce) { .marquee__track { animation: none; } }
