/* ==========================================================================
   Smile Optik — Editorial Optikwerk aesthetic
   Marka renkleri gerçek logo + mağaza tabelasından türetildi:
   indigo (logo), sarı (gülen yüz), mercan (tente şeridi), kemik krem (zemin)
   ========================================================================== */

/* Yazı tipleri header.php içinde <link> ile yüklenir (render bloklamasını azaltmak için). */

:root {
    /* Koyu lacivert zemin + sarı menü + siyah butonlar (smileoptik.com paleti) */
    --navy: #0b1c30;
    --navy-deep: #071322;
    --navy-soft: #122942;
    --black: #050b14;

    --text: #eef3fa;
    --text-muted: #9db0c6;

    --ink: #050b14;            /* siyah butonlar ve koyu bloklar */
    --ink-soft: var(--text-muted);
    --indigo: #ffc86b;         /* vurgular (eyebrow, fiyat, kategori) */
    --indigo-deep: #0f2236;    /* yorumlar bölümü zemini */
    --indigo-tint: rgba(255, 200, 107, .12);
    --cream: var(--navy);      /* sayfa zemini */
    --paper: var(--navy-soft); /* kart yüzeyi */
    --yellow: #ffc168;         /* menü çubuğu ve aksan */
    --yellow-strong: #ffd400;
    --coral: #e8623d;
    --line: rgba(255, 255, 255, 0.12);
    --shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.75);
    --radius: 22px;
    /* Marka fontu: mevcut smileoptik.com sitesiyle aynı (Montserrat).
       Gentle Monster / Ray-Ban da nötr sans-serif kullanır. */
    --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--navy);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
}

.eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--indigo);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before {
    content: '';
    width: 22px; height: 2px;
    background: var(--coral);
    display: inline-block;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.02;
    margin: 0;
    letter-spacing: -0.025em;
    color: var(--text);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    border: 1.5px solid transparent;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s;
    white-space: nowrap;
}
/* Ana eylem butonları siyah — lacivert zeminde en dikkat çekici kontrast */
.btn-primary, .btn-yellow {
    background: var(--black);
    color: #fff;
    border-color: rgba(255,255,255,.16);
}
.btn-primary:hover, .btn-yellow:hover {
    transform: translateY(-3px);
    background: #000;
    border-color: var(--yellow);
    box-shadow: 0 18px 34px -14px rgba(0,0,0,.9);
}
.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: rgba(255,255,255,.32);
}
.btn-outline:hover { background: var(--black); color: #fff; border-color: var(--black); }
.btn-sm { padding: 10px 18px; font-size: 13px; }

/* ---------- Header ---------- */
/* Sarı menü çubuğu, ortada logo */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--yellow);
    box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
.site-header .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 96px; gap: clamp(24px, 4vw, 56px);
}
/* Logo ortada, menü iki yana bölünmüş — yazılar logoya yaslanmaz */
.brand { display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.brand img { height: 56px; width: auto; }

.main-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.nav-left { justify-self: start; }
.nav-right { margin-right: 6px; }
.main-nav a {
    font-weight: 700; font-size: 14.5px; color: rgba(10,17,32,.72);
    position: relative; padding: 6px 0;
    transition: color .2s;
}
.main-nav a::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
    background: var(--black); transition: width .3s var(--ease);
}
.main-nav a:hover, .main-nav a.active { color: var(--black); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); justify-self: end; }
.lang-switch { display: flex; gap: 4px; background: rgba(10,17,32,.1); border-radius: 999px; padding: 4px; }
.lang-switch a {
    padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 12.5px;
    color: rgba(10,17,32,.7); letter-spacing: .04em;
}
.lang-switch a.active { background: var(--black); color: var(--yellow); }
.site-header .btn-yellow { background: var(--black); color: #fff; border-color: transparent; }
.site-header .btn-yellow:hover { background: #000; border-color: rgba(0,0,0,.3); }

.nav-toggle {
    display: none; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid var(--line); background: transparent;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ''; display: block; width: 18px; height: 2px; background: var(--black); position: relative; transition: .25s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.mobile-nav {
    position: fixed; inset: 0; z-index: 200; background: var(--navy-deep); color: var(--text);
    display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 40px;
    transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-nav.open { transform: translateY(0); }
.mobile-nav a { font-family: var(--font-display); font-size: 34px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-nav .close-btn { position: absolute; top: 26px; right: 26px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); color: var(--text); background: transparent; font-size: 20px; }
body.nav-open { overflow: hidden; }

@media (max-width: 1080px) {
    .nav-toggle { display: flex; }
    .site-header .wrap { grid-template-columns: auto 1fr auto; height: 78px; gap: 14px; }
    .brand { justify-content: flex-start; }
    .brand img { height: 46px; }
}

/* ---------- Marquee ---------- */
.marquee {
    background: var(--navy-deep); color: var(--text);
    overflow: hidden; white-space: nowrap;
    border-bottom: 3px solid var(--yellow);
}
.marquee-track {
    display: inline-flex; align-items: center;
    animation: marquee 32s linear infinite;
    padding: 13px 0;
}
.marquee-track span {
    font-family: var(--font-display); font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: .1em;
    font-size: 12.5px; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px;
    color: var(--text);
}
.marquee-track span.dot { color: var(--yellow); letter-spacing: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero slider (video) ---------- */
.hero-slider {
    position: relative;
    background: #0b1424;
    overflow: hidden;
    min-height: min(78vh, 660px);
}
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 1s var(--ease), visibility 1s;
}
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-slide video, .hero-slide img.slide-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.hero-slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,12,24,.55) 0%, rgba(6,12,24,.28) 40%, rgba(6,12,24,.82) 100%);
}
.hero-slider-inner {
    position: relative; z-index: 3;
    min-height: min(78vh, 660px);
    display: flex; flex-direction: column; justify-content: center;
    padding: 70px 0 58px;
}
.slide-copy { max-width: 560px; color: #fff; }
.slide-copy .slide-label {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--yellow); margin-bottom: 18px;
}
.slide-copy .slide-title {
    font-size: clamp(40px, 5.4vw, 72px); color: #fff; line-height: 1;
    font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; margin: 0; max-width: none;
}
.slide-copy p {
    margin-top: 18px; font-size: 17px; line-height: 1.65;
    color: rgba(255,255,255,.82); max-width: 46ch;
}
.slide-copy .btn { margin-top: 30px; }
.hero-slide-text { position: absolute; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), transform .7s var(--ease); transform: translateY(18px); }
.hero-slide-text.active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); }

/* Lens ikonları — tıklanabilir slayt seçici, metnin üzerinde yatay sıra */
.lens-nav {
    z-index: 5; display: flex; gap: 14px; margin-bottom: 34px;
}
.lens-nav button {
    width: 84px; height: 84px; border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    display: grid; place-items: center; padding: 12px;
    transition: transform .35s var(--ease), border-color .3s, background .3s, box-shadow .35s;
    position: relative;
}
.lens-nav button img { width: 100%; height: auto; transition: transform .4s var(--ease); }
.lens-nav button:hover { transform: translateY(-5px) scale(1.04); border-color: rgba(255,255,255,.5); }
.lens-nav button.active {
    border-color: var(--yellow);
    background: rgba(255,212,0,.14);
    box-shadow: 0 0 0 3px rgba(255,212,0,.18), 0 18px 34px -18px rgba(0,0,0,.7);
}
.lens-nav button.active img { transform: scale(1.08); }
.lens-nav .lens-tip {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
    background: rgba(8,14,26,.94); color: #fff; font-size: 12px; font-weight: 700;
    padding: 7px 12px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .25s;
    border: 1px solid rgba(255,255,255,.14);
}
.lens-nav button:hover .lens-tip, .lens-nav button:focus-visible .lens-tip { opacity: 1; }

.slider-controls {
    position: absolute; right: clamp(20px, 5vw, 56px); bottom: 64px; z-index: 5;
    display: flex; gap: 10px;
}
.slider-controls button {
    width: 52px; height: 52px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.32); background: rgba(10,18,32,.4);
    color: #fff; font-size: 18px; backdrop-filter: blur(8px);
    transition: background .25s, transform .25s, border-color .25s;
}
.slider-controls button:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); transform: scale(1.06); }

.slide-progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: rgba(255,255,255,.12); z-index: 5;
}
.slide-progress span { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .2s linear; }

@media (max-width: 980px) {
    .lens-nav { gap: 10px; margin-bottom: 24px; }
    .lens-nav button { width: 62px; height: 62px; border-radius: 16px; padding: 9px; }
    .lens-nav .lens-tip { display: none; }
    .hero-slider, .hero-slider-inner { min-height: min(84vh, 620px); }
    .hero-slider-inner { padding: 60px 0 54px; }
    .slide-copy .slide-title { font-size: clamp(30px, 8vw, 44px); }
    .slider-controls { bottom: 22px; }
    .slider-controls button { width: 44px; height: 44px; }
}

/* ==========================================================================
   Editöryel bantlar — Gentle Monster / Ray-Ban düzen dili
   Görseller kaba sığmaz, tam genişlikte akar; tipografi büyük, etiketler küçük.
   ========================================================================== */

/* Tam genişlik bant: 1280px kabı kırar. */
.bleed { width: 100%; position: relative; }
.bleed-inner { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 clamp(18px, 3.4vw, 44px); }

/* Küçük, iddiasız etiket — GM'in ürün altı yazıları gibi. */
.label-xs {
    font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- Hero: tam genişlik kampanya bandı ---------- */
.hero {
    position: relative; padding: 0;
    background: var(--navy-deep);
}
.hero-banner {
    position: relative; overflow: hidden;
    min-height: min(80vh, 780px);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-banner-bg { position: absolute; inset: 0; z-index: 0; }
.hero-banner-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: 62% 34%;
    filter: saturate(.78) contrast(1.03);
}
/* Solda metin için koyu alan, sağda fotoğraf açıkta kalır. */
.hero-banner::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(96deg, rgba(7,19,34,.94) 0%, rgba(7,19,34,.8) 34%, rgba(7,19,34,.34) 62%, rgba(7,19,34,.1) 84%, transparent 100%),
                linear-gradient(180deg, transparent 55%, rgba(11,28,48,.75) 100%);
}
.hero-banner-inner {
    position: relative; z-index: 2;
    padding-top: clamp(70px, 10vh, 120px); padding-bottom: clamp(32px, 4.5vh, 54px);
}
.hero-kicker { margin-bottom: 24px; }
/* Ölçülü tipografi — büyük ama bağırmayan, Gentle Monster / Ray-Ban tonunda. */
.hero-display {
    margin: 0; /* artık <p> (h1 değil); tarayıcının p boşluğu gelmesin */
    font-size: clamp(34px, 5.2vw, 72px);
    font-weight: 700;
    line-height: 1.03; letter-spacing: -.035em;
    color: #fff; max-width: 15ch;
    text-wrap: balance;
}
.hero-display em { font-style: normal; color: var(--yellow); }
.hero-sub {
    margin-top: 26px; max-width: 44ch;
    font-size: clamp(15px, 1.25vw, 18px); line-height: 1.65; color: rgba(238,243,250,.72);
}
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* Altta ince istatistik şeridi */
.hero-meta {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    border-top: 1px solid var(--line); padding: 22px 0 26px;
}
.hero-meta div b { display: block; font-family: var(--font-display); font-size: clamp(19px, 2vw, 26px); color: #fff; }
.hero-meta div span { display: block; margin-top: 5px; font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 900px) {
    .hero-banner-inner { grid-template-columns: 1fr; }
    .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
}

/* ---------- 3B cam objesi (özgün — CSS ile çizilir) ----------
   Gerçek bir gözlük camı gibi: eliptik, saydam ve arkasındaki görüntüyü
   büyütüp berraklaştırır. İçi dolu bir küre değil. */
.lens3d {
    --size: clamp(190px, 17vw, 260px);
    --edge: 9px;
    width: var(--size); aspect-ratio: 1 / .78; position: relative;
    transform-style: preserve-3d; perspective: 1000px;
    animation: lens3dFloat 11s ease-in-out infinite;
}
.lens3d-inner {
    position: absolute; inset: 0; transform-style: preserve-3d;
    animation: lens3dTurn 18s ease-in-out infinite;
}
.lens3d i {
    position: absolute; inset: 0; border-radius: 50%; display: block;
}
/* Camın kalınlığı — yalnızca kenarda görünür, ortası boş kalır ki
   arkadaki fotoğraf camın içinden görünsün. */
.lens3d .l-edge {
    background: radial-gradient(ellipse at 50% 50%,
        transparent 0%, transparent 74%,
        rgba(225,244,255,.55) 88%, rgba(120,165,200,.65) 100%);
    transform: translateZ(calc(var(--edge) * -1));
    filter: blur(.5px);
}
/* Çerçeve halkası — camı çevreleyen parlak kenar */
.lens3d .l-rim {
    border: 1.5px solid rgba(226,244,255,.75);
    box-shadow:
        inset 0 0 0 4px rgba(255,255,255,.1),
        0 0 22px rgba(150,210,255,.35);
    transform: translateZ(calc(var(--edge) / -2));
}
/* Cam yüzeyi: neredeyse saydam, hafif mavi kırılma */
.lens3d .l-face {
    background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 28%, transparent 52%),
        linear-gradient(150deg, rgba(190,228,255,.16) 0%, rgba(255,255,255,.02) 45%, rgba(90,150,205,.16) 100%);
    border: 1px solid rgba(226,244,255,.5);
    box-shadow:
        inset 0 0 26px rgba(160,215,255,.22),
        inset 0 -10px 24px rgba(11,28,48,.22);
    backdrop-filter: blur(.5px) saturate(1.25) brightness(1.12);
    overflow: hidden;
}
/* Yüzeyde gezinen ince yansıma */
.lens3d .l-face::before {
    content: ''; position: absolute; top: -30%; left: -30%;
    width: 34%; height: 170%; transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation: lens3dSweep 7.5s ease-in-out infinite;
}
/* Üst kenarda antirefle parıltısı */
.lens3d .l-face::after {
    content: ''; position: absolute; left: 14%; right: 42%; top: 12%;
    height: 16%; border-radius: 50%;
    background: linear-gradient(120deg, rgba(255,255,255,.6), transparent 75%);
    filter: blur(2px);
}
@keyframes lens3dSweep {
    0%        { left: -34%; opacity: 0; }
    20%       { opacity: 1; }
    64%, 100% { left: 104%; opacity: 0; }
}
/* Camın arkasına düşen yumuşak ışık — obje boşlukta durmasın */
.lens3d .l-glow {
    inset: -26%; border-radius: 50%; z-index: -1;
    background: radial-gradient(ellipse, rgba(255,193,104,.16), rgba(120,190,255,.1) 42%, transparent 70%);
    filter: blur(30px); animation: lens3dPulse 8s ease-in-out infinite;
}
@keyframes lens3dTurn {
    0%, 100% { transform: rotateY(-19deg) rotateX(7deg); }
    50%      { transform: rotateY(19deg) rotateX(-5deg); }
}
@keyframes lens3dFloat {
    0%, 100% { transform: translateY(-8px); }
    50%      { transform: translateY(8px); }
}
@keyframes lens3dPulse {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}
/* Atölye bandındaki cam koyu sahnede durur — orada biraz daha belirgin olsun. */
.feature-media.is-lens .lens3d .l-face {
    background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 30%, transparent 56%),
        linear-gradient(150deg, rgba(190,228,255,.3) 0%, rgba(255,255,255,.05) 48%, rgba(90,150,205,.28) 100%);
}
@media (prefers-reduced-motion: reduce) {
    .lens3d, .lens3d-inner, .lens3d .l-glow, .lens3d .l-face::before { animation: none !important; }
}

/* ---------- Reveal animation ----------
   Yalnızca JS etkinken gizlenir; JS yoksa içerik doğrudan görünür kalır. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: translateY(0); }
.js .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .02s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .1s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .18s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .34s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .42s; }
.js .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal-stagger > *, .marquee-track { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Section shell ---------- */
section { padding: clamp(64px, 8vw, 112px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 3.5vw, 46px); flex-wrap: wrap; }
.section-title { font-size: clamp(30px, 4.4vw, 58px); margin-top: 14px; max-width: 18ch; letter-spacing: -.035em; }
.section-sub { color: var(--ink-soft); font-size: 16px; max-width: 40ch; margin-top: 14px; }

/* Sade metin bağlantısı — GM'in "더 보기" satırı gibi, buton gürültüsü yok. */
.link-more {
    font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--yellow); border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
    transition: opacity .2s;
}
.link-more:hover { opacity: .7; }

/* ---------- Kategoriler: çerçevesiz plakalar ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); }
/* min-width:0 olmadan uzun kelimeler ızgarayı gerip yatay kaydırma yaratıyor. */
.cat-card { position: relative; display: block; background: none; box-shadow: none; min-width: 0; }
.cat-card .cat-shot {
    position: relative; overflow: hidden; aspect-ratio: 4/5;
    background: var(--navy-soft);
}
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat-card:hover img { transform: scale(1.05); }
.cat-card .cat-shot::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(7,19,34,.55) 0%, transparent 45%);
    opacity: .9; transition: opacity .5s;
}
.cat-card:hover .cat-shot::after { opacity: .6; }
.cat-label {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding-top: 16px;
}
.cat-label h3 { font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cat-label .arrow {
    font-size: 15px; color: var(--yellow); transition: transform .35s var(--ease);
    display: inline-block;
}
.cat-card:hover .arrow { transform: translate(4px, -4px); }
@media (max-width: 780px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }

/* ---------- Segmentler: tam genişlik üçlü bant ---------- */
.segment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.segment-card {
    position: relative; overflow: hidden; display: block;
    aspect-ratio: 3/4; border-radius: 0; box-shadow: none;
}
.segment-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.segment-card:hover img { transform: scale(1.06); }
.segment-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(7,19,34,.8) 0%, rgba(7,19,34,.08) 52%, transparent 78%);
}
.segment-card span {
    position: absolute; left: 0; right: 0; bottom: clamp(22px, 3vw, 40px); z-index: 2; text-align: center;
    color: #fff; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(18px, 2vw, 30px); letter-spacing: .1em; text-transform: uppercase;
}
.segment-card span::after {
    content: ''; display: block; width: 26px; height: 2px; background: var(--yellow);
    margin: 12px auto 0; transition: width .4s var(--ease);
}
.segment-card:hover span::after { width: 64px; }
@media (max-width: 780px) {
    .segment-grid { grid-template-columns: 1fr 1fr; }
    .segment-card:last-child { grid-column: span 2; aspect-ratio: 16/9; }
}

/* ---------- Kampanya bandı: tam genişlik görsel + tek mesaj ---------- */
.campaign {
    position: relative; overflow: hidden; background: var(--navy-deep);
    min-height: min(72vh, 660px);
    display: flex; flex-direction: column; justify-content: center;
}
.campaign-bg { position: absolute; inset: 0; z-index: 0; }
.campaign-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
    filter: saturate(.85) contrast(1.04);
}
.campaign::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(7,19,34,.92) 0%, rgba(7,19,34,.7) 42%, rgba(7,19,34,.12) 78%, transparent 100%);
}
/* Metin bloğu her zaman solda kalır; fotoğraf sağ tarafta açıkta durur. */
.campaign-inner {
    position: relative; z-index: 2; width: 100%;
    padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px);
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.campaign-inner > * { max-width: min(46ch, 100%); }
.campaign-inner .eyebrow { margin-bottom: 20px; }
.campaign-title {
    font-size: clamp(28px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.04em;
    color: #fff; max-width: 15ch;
}
.campaign-text {
    margin-top: 20px; max-width: 42ch; font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7; color: rgba(238,243,250,.78);
}
.campaign-inner .btn { margin-top: 30px; }
@media (max-width: 760px) {
    .campaign::before {
        background: linear-gradient(180deg, rgba(7,19,34,.55) 0%, rgba(7,19,34,.9) 55%, rgba(7,19,34,.97) 100%);
    }
    .campaign { align-items: end; min-height: 78vh; }
}

/* ==========================================================================
   Hakkımızda — yukarıdan aşağıya akan hikâye
   ========================================================================== */

/* Kapak */
.ab-cover {
    position: relative; overflow: hidden; background: var(--navy-deep);
    min-height: min(78vh, 720px);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.ab-cover-bg { position: absolute; inset: 0; z-index: 0; }
.ab-cover-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.04); }
.ab-cover::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(7,19,34,.5) 0%, rgba(7,19,34,.25) 34%, rgba(11,28,48,.97) 100%);
}
.ab-cover-inner {
    position: relative; z-index: 2;
    padding-top: clamp(90px, 12vh, 150px); padding-bottom: clamp(38px, 5vh, 60px);
}
.ab-cover h1 {
    font-size: clamp(30px, 4.6vw, 62px); font-weight: 700;
    line-height: 1.04; letter-spacing: -.035em; color: #fff; max-width: 20ch;
    text-wrap: balance;
}
.ab-cover .lead {
    margin-top: 22px; max-width: 56ch; color: rgba(238,243,250,.74);
    font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7;
}

/* Bölümler: sırayla soldan-sağdan akar */
.ab-chapter { position: relative; }
.ab-chapter + .ab-chapter { margin-top: 3px; }
.ab-chapter .row {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    min-height: min(68vh, 600px); background: var(--navy-deep);
}
.ab-chapter.rev .ab-shot { order: 2; }
.ab-shot { position: relative; overflow: hidden; background: var(--navy-soft); min-height: 300px; }
.ab-shot img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.8) contrast(1.03);
    transition: transform 1.4s var(--ease);
}
.ab-chapter:hover .ab-shot img { transform: scale(1.04); }
.ab-text {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(38px, 5vw, 82px);
}
/* Bölüm numarası — hikâyenin kaçıncı durağı */
.ab-no {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11px; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--yellow); margin-bottom: 18px;
}
.ab-no b {
    font-family: var(--font-display); font-size: 13px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid var(--yellow); display: grid; place-items: center;
}
.ab-text h2 {
    font-size: clamp(23px, 2.9vw, 40px); letter-spacing: -.035em;
    line-height: 1.1; margin-bottom: 20px; max-width: 20ch;
}
.ab-text p {
    color: var(--ink-soft); font-size: clamp(14.5px, 1.15vw, 16.5px);
    line-height: 1.8; max-width: 50ch;
}
.ab-text p + p { margin-top: 15px; }

@media (max-width: 900px) {
    .ab-chapter .row { grid-template-columns: 1fr; min-height: 0; }
    .ab-chapter.rev .ab-shot { order: 0; }
    .ab-shot { aspect-ratio: 3/2; min-height: 0; }
}

/* Rakamlar bandı */
.ab-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--line);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ab-stats div {
    background: var(--navy); padding: clamp(26px, 3.4vw, 46px) clamp(16px, 2vw, 28px);
    text-align: center;
}
.ab-stats b {
    display: block; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(30px, 4vw, 56px); letter-spacing: -.045em; color: var(--yellow);
    line-height: 1;
}
.ab-stats span {
    display: block; margin-top: 12px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); line-height: 1.5;
}
@media (max-width: 720px) { .ab-stats { grid-template-columns: 1fr 1fr; } }

/* Kapanış sözü */
.ab-quote { background: var(--navy-deep); text-align: center; }
.ab-quote blockquote {
    margin: 0 auto; max-width: 24ch;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(24px, 3.6vw, 48px); letter-spacing: -.035em; line-height: 1.15;
    color: #fff;
}
.ab-quote .who {
    margin-top: 24px; font-size: 11px; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--yellow);
}

/* ==========================================================================
   Gözlük montaj hikâyesi — kaydırdıkça tek bir gözlük monte olur
   Gözlük SVG olarak çizilir: aynı obje baştan sona sahnede kalır, yalnızca
   durumu değişir. Aşamalar JS'in yazdığı --p1 … --p5 (0…1) ile sürülür.
   ========================================================================== */
.asm { background: var(--navy-deep); border-top: 1px solid var(--line); }
.asm-inner {
    display: grid; grid-template-columns: 1.02fr .98fr;
    gap: clamp(20px, 4vw, 70px); align-items: start;
}

/* Sol: ekrana yapışan sahne */
.asm-stage {
    position: sticky; top: 0; height: 100vh;
    display: grid; place-items: center;
    --p1: 0; --p2: 0; --p3: 0; --p4: 0; --p5: 0;
}
.asm-svg { width: min(100%, 620px); height: auto; overflow: visible; }

/* Montaj kareleri: aynı gözlük, aynı kamera — yalnızca durum değişir.
   Kaydırma ilerlemesi hangi karenin görüneceğini belirler. */
.asm-shots { position: relative; width: min(100%, 680px); aspect-ratio: 4/3; }
.asm-shot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 14px;
    opacity: 0; transition: opacity .45s linear;
}
.asm-shot.on { opacity: 1; }
/* Kareye hafif yakınlaşma — sahne canlı dursun */
.asm-shots::after {
    content: ''; position: absolute; inset: 0; border-radius: 14px;
    box-shadow: inset 0 0 90px rgba(7,19,34,.55); pointer-events: none;
}

/* Uçuşan cam tozu — yalnızca traşlama aşamasında */
.asm-dust { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--p3) * (1 - var(--p4))); }
.asm-dust i {
    position: absolute; top: 52%; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,222,170,.9); filter: blur(.4px);
    animation: asmDust 3.4s linear infinite;
}
.asm-dust i:nth-child(1) { left: 34%; animation-delay: 0s; }
.asm-dust i:nth-child(2) { left: 39%; animation-delay: .5s; width: 3px; height: 3px; }
.asm-dust i:nth-child(3) { left: 44%; animation-delay: 1.1s; }
.asm-dust i:nth-child(4) { left: 30%; animation-delay: 1.7s; width: 3px; height: 3px; }
.asm-dust i:nth-child(5) { left: 47%; animation-delay: 2.3s; }
.asm-dust i:nth-child(6) { left: 36%; animation-delay: 2.9s; width: 5px; height: 5px; }
@keyframes asmDust {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(60px, -190px); opacity: 0; }
}

/* Sahne altındaki ilerleme çubuğu */
.asm-progress {
    position: absolute; left: 0; right: 0; bottom: 9vh; height: 3px;
    background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden;
}
.asm-progress i {
    display: block; height: 100%; background: var(--yellow);
    width: calc(var(--pAll, 0) * 100%);
}

/* Sağ: kaydırılan adım metinleri */
.asm-steps { padding: 26vh 0 30vh; display: grid; gap: 34vh; }
.asm-step { max-width: 46ch; opacity: .28; transition: opacity .5s var(--ease); }
.asm-step.on { opacity: 1; }
.asm-step .n {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11px; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--yellow); margin-bottom: 16px;
}
.asm-step .n b {
    font-family: var(--font-display); font-size: 13px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid var(--yellow); display: grid; place-items: center;
}
.asm-step h3 {
    font-size: clamp(22px, 2.7vw, 38px); font-weight: 700;
    letter-spacing: -.035em; line-height: 1.1; margin-bottom: 16px;
}
.asm-step p { color: var(--ink-soft); font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.8; }

@media (max-width: 900px) {
    .asm-inner { grid-template-columns: 1fr; gap: 0; }
    .asm-stage { height: 52vh; top: 78px; }
    .asm-steps { padding: 8vh 0 14vh; gap: 26vh; }
}
@media (prefers-reduced-motion: reduce) {
    .asm-dust i { animation: none; opacity: 0; }
    .asm-stage { position: static; height: auto; padding: 40px 0; }
    .asm-step { opacity: 1; }
}

/* ---------- Atölye hikâyesi: dört adım ---------- */
.story { background: var(--navy-deep); border-top: 1px solid var(--line); }
.story-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 52px); }
.story-head h2 { font-size: clamp(26px, 3.6vw, 48px); letter-spacing: -.035em; margin-top: 14px; }
.story-head p { margin-top: 18px; color: var(--ink-soft); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; }

.story-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.story-step { position: relative; display: flex; flex-direction: column; min-width: 0; }
.story-shot {
    position: relative; overflow: hidden; aspect-ratio: 3/4;
    background: var(--navy-soft); margin-bottom: 18px;
}
.story-shot img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s var(--ease);
}
.story-step:hover .story-shot img { transform: scale(1.06); }
.story-shot::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(7,19,34,.6) 0%, transparent 42%);
}
/* Adım rozeti */
.story-num {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--yellow); color: var(--black);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 900; font-size: 16px;
}
.story-step h3 { font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -.02em; }
.story-step p {
    margin-top: 10px; color: var(--ink-soft);
    font-size: clamp(13.5px, 1vw, 14.5px); line-height: 1.65;
}
/* Adımları birbirine bağlayan ince çizgi */
.story-step::before {
    content: ''; position: absolute; top: 33px; left: 52px; right: calc(-1 * clamp(12px, 1.6vw, 24px));
    height: 1px; background: rgba(255,193,104,.35); z-index: 3;
}
.story-step:last-child::before { display: none; }

@media (max-width: 900px) {
    .story-grid { grid-template-columns: repeat(2, 1fr); }
    .story-step:nth-child(2n)::before { display: none; }
}
@media (max-width: 560px) {
    .story-grid { grid-template-columns: 1fr; }
    .story-step::before { display: none; }
    .story-shot { aspect-ratio: 4/3; }
}

/* ---------- Özellik bantları: tam genişlik, dev tipografi ---------- */
.feature-band { position: relative; overflow: hidden; background: var(--navy-deep); }
.feature-band + .feature-band { margin-top: 3px; }
.feature-row {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch;
    min-height: min(64vh, 560px);
}
.feature-row.rev .feature-media { order: 2; }
.feature-media {
    position: relative; overflow: hidden; background: #0b1424;
    border-radius: 0; padding: 0; box-shadow: none; aspect-ratio: auto; min-height: 320px;
}
.feature-media img, .feature-media video {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block;
    filter: saturate(.75) contrast(1.05);
}
/* 3B cam sahnesi taşıyan medya kutusu */
.feature-media.is-lens {
    display: grid; place-items: center;
    background: radial-gradient(120% 90% at 50% 40%, #16324f 0%, var(--navy-deep) 70%);
}
.feature-copy {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(38px, 5vw, 76px);
}
.feature-copy .eyebrow { margin-bottom: 20px; }
.feature-copy h3 { font-size: clamp(26px, 3.4vw, 46px); margin-bottom: 20px; letter-spacing: -.035em; }
.feature-copy p { color: var(--ink-soft); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; max-width: 46ch; }
@media (max-width: 860px) {
    .feature-row { grid-template-columns: 1fr; min-height: 0; }
    .feature-row.rev .feature-media { order: 0; }
    .feature-media { min-height: 260px; aspect-ratio: 4/3; }
}

/* ---------- Products ---------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.filter-pill {
    padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line);
    font-weight: 700; font-size: 13.5px; color: var(--ink-soft); transition: all .25s;
}
.filter-pill:hover { border-color: var(--indigo); color: var(--indigo); }
.filter-pill.active { background: var(--black); border-color: var(--black); color: #fff; }

/* ---------- Ürünler: aydınlık stüdyo plakası, yazı görselin altında ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 30px); }
.product-card { min-width: 0;
    background: none; border-radius: 0; overflow: visible; box-shadow: none;
    transition: none; display: block;
}
.product-card:hover { transform: none; box-shadow: none; }
.product-thumb {
    aspect-ratio: 1/1; overflow: hidden; position: relative;
    background: linear-gradient(165deg, #f4f7fb 0%, #dfe7f1 100%);
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.product-card:hover .product-thumb img { transform: scale(1.05); }
.product-badge {
    position: absolute; top: 12px; left: 12px; background: rgba(5,11,20,.82); color: #fff;
    font-size: 10px; font-weight: 800; padding: 5px 11px; border-radius: 999px; letter-spacing: .14em;
    text-transform: uppercase;
}
.product-body { padding: 16px 2px 0; }
.product-cat { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); }
.product-name { font-family: var(--font-display); font-size: clamp(16px, 1.4vw, 20px); margin-top: 8px; letter-spacing: -.02em; }
.product-price { margin-top: 7px; font-weight: 700; font-size: 14px; color: var(--yellow); }
.empty-note { color: var(--ink-soft); padding: 30px 0; }
@media (max-width: 780px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Galeri şeridi: kenardan kenara akan film şeridi ---------- */
.gallery-strip {
    display: flex; gap: 3px; overflow-x: auto; padding-bottom: 0;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-item {
    flex: 0 0 clamp(230px, 26vw, 380px); scroll-snap-align: start;
    border-radius: 0; overflow: hidden;
    position: relative; aspect-ratio: 3/4; box-shadow: none;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item span {
    position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff;
    font-weight: 700; font-size: 13px; z-index: 2; letter-spacing: .01em;
}
.gallery-item::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(7,19,34,.8), transparent 55%); }

/* ==========================================================================
   Mağazamız sayfası
   ========================================================================== */

/* ---------- Sayfa başı: tam genişlik kapak ---------- */
.shop-cover {
    position: relative; overflow: hidden; background: var(--navy-deep);
    min-height: min(62vh, 560px);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.shop-cover-bg { position: absolute; inset: 0; z-index: 0; }
.shop-cover-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    filter: saturate(.5) contrast(1.08) brightness(.8);
}
.shop-cover::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(7,19,34,.6) 0%, rgba(7,19,34,.3) 40%, rgba(11,28,48,.97) 100%);
}
.shop-cover-inner {
    position: relative; z-index: 2;
    padding-top: clamp(80px, 11vh, 130px); padding-bottom: clamp(34px, 5vh, 54px);
}
.shop-cover h1 {
    font-size: clamp(38px, 6.6vw, 92px); line-height: .92; letter-spacing: -.045em;
    text-transform: uppercase; color: #fff; max-width: 16ch;
}
.shop-cover p { margin-top: 22px; max-width: 52ch; font-size: clamp(15px, 1.2vw, 17.5px);
    line-height: 1.65; color: rgba(238,243,250,.72); }

/* ---------- Tanıtım: hikâye + rakamlar ---------- */
.shop-intro {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 76px);
    align-items: start;
}
.shop-intro h2 { font-size: clamp(24px, 2.8vw, 38px); letter-spacing: -.03em; margin-bottom: 20px; }
.shop-intro p { color: var(--ink-soft); font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.8; }
.shop-intro p + p { margin-top: 16px; }
.shop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.shop-stats div { background: var(--navy); padding: clamp(20px, 2.4vw, 30px); }
.shop-stats b {
    display: block; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(26px, 3vw, 40px); letter-spacing: -.04em; color: var(--yellow);
}
.shop-stats span {
    display: block; margin-top: 8px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); line-height: 1.5;
}
@media (max-width: 860px) { .shop-intro { grid-template-columns: 1fr; } }

/* ---------- Fotoğraf ızgarası ----------
   Bütün kareler aynı boyutta ve aynı oranda. Yatay ve dikey çekimler
   karışık olsa bile dizilim düzenli kalır, ızgarada delik oluşmaz. */
.photo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.photo-item {
    margin: 0; position: relative; overflow: hidden;
    border-radius: 0; box-shadow: none; background: var(--navy-soft);
    aspect-ratio: 1;
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.photo-item:hover img { transform: scale(1.05); }
.photo-item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 40px 18px 16px; color: #fff; font-size: 13px; font-weight: 700;
    background: linear-gradient(0deg, rgba(5,11,20,.88), transparent);
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.photo-item:hover figcaption, .photo-item:focus-within figcaption { opacity: 1; transform: translateY(0); }
@media (max-width: 860px) {
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .photo-item figcaption { opacity: 1; transform: none; }
}
@media (max-width: 480px) { .photo-grid { grid-template-columns: 1fr; } }
@media (hover: none) { .photo-item figcaption { opacity: 1; transform: none; } }

/* ---------- Testimonials ---------- */
.reviews-section {
    background: var(--indigo-deep); color: var(--text);
    border-radius: 0; margin: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.reviews-section .section-title, .reviews-section .eyebrow { color: var(--text); }
.reviews-section .eyebrow::before { background: var(--yellow); }
.reviews-section .section-sub { color: rgba(245,239,224,.7); }
/* Google yorumları — kaydırmalı slider */
.review-slider { position: relative; }
.review-track {
    display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding-bottom: 8px;
    scrollbar-width: none;
}
.review-track::-webkit-scrollbar { display: none; }
.review-track .review-card {
    flex: 0 0 clamp(280px, 32%, 400px); scroll-snap-align: start;
}
.review-nav { display: flex; gap: 10px; margin-top: 22px; }
.review-nav button {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.28); background: transparent;
    color: var(--text); font-size: 17px; transition: background .2s, color .2s, border-color .2s;
}
.review-nav button:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.google-link { display: inline-block; margin-left: 6px; font-weight: 700; font-size: 13.5px; color: var(--yellow); }
.google-link:hover { text-decoration: underline; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px; padding: 26px; backdrop-filter: blur(6px);
}
.review-stars { color: var(--yellow); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.review-text { font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 500; }
.review-author { margin-top: 18px; font-weight: 700; font-size: 13.5px; color: rgba(245,239,224,.75); }
.google-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; }
.google-badge img { height: 22px; }
.google-badge b { font-size: 15px; }

/* ---------- Visit / contact band ---------- */
.visit-band { padding-top: 0; }
.visit-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-radius: 0; overflow: hidden; box-shadow: none;
    border-top: 1px solid var(--line);
    align-items: stretch;
}
.visit-info {
    background: var(--black); color: var(--text);
    padding: clamp(34px, 4.5vw, 68px);
    display: flex; flex-direction: column; justify-content: center;
}
.visit-info h2 { color: #fff; font-size: clamp(26px,3vw,42px); letter-spacing: -.035em; }
.visit-info p { color: rgba(245,239,224,.68); margin-top: 12px; }
.visit-list { margin-top: 34px; display: grid; gap: 20px; }
.visit-list li { display: flex; gap: 14px; align-items: flex-start; }
.visit-list .ico {
    width: 38px; height: 38px; border-radius: 10px; background: rgba(255,212,0,.14);
    color: var(--yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.visit-list b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(245,239,224,.5); }
.visit-list span { font-weight: 600; }
.visit-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
/* Harita yüklenemezse (ör. çevrimdışı önizleme) kutu boş görünmesin. */
.visit-map {
    position: relative; min-height: clamp(300px, 42vw, 460px);
    background: var(--navy-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='rgba(255,255,255,.05)' stroke-width='1'/%3E%3C/svg%3E");
}
.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.15); }
@media (max-width: 820px) { .visit-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
/* =========================================================
   Footer
   Zemin koyu lacivert (--navy). Metin renkleri bu zemine gore
   secildi: --ink (#050b14) burada kullanilmaz, cunku koyu uzerine
   koyu dusuyor ve kontrast 1.15:1'e iniyordu (WCAG alt siniri 4.5).
   ========================================================= */
.site-footer { padding: 70px 0 34px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { color: var(--text-muted); max-width: 34ch; font-size: 14.5px; line-height: 1.65; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col b { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); margin-bottom: 16px; }

/* Baglantilar sogurtulmus, uzerine gelince marka sarisi.
   Adres/telefon gibi bilgiler (span) daha parlak: yerel aramada
   dogru okunmasi gereken veri. */
.footer-col a, .footer-col span { display: block; margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }
.footer-col span { color: var(--text); }
.footer-col a { color: var(--text-muted); transition: color .2s var(--ease); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--yellow); }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 14px; }

/* Dil degistirici: baglanti degil, kucuk bir dugme gibi dursun. */
.footer-lang {
    color: var(--text); border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.footer-lang:hover, .footer-lang:focus-visible { background: var(--yellow); color: var(--black); border-color: var(--yellow); }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer-social a:hover, .footer-social a:focus-visible {
    background: var(--yellow); color: var(--black); border-color: var(--yellow); transform: translateY(-2px);
}
.footer-social svg { display: block; }

@media (max-width: 560px) {
    .footer-bottom { justify-content: center; text-align: center; }
}

/* =========================================================
   Harita karti (iletisim sayfasi)
   Google'in hazir haritasi yerine kendi cizimimiz: sitenin koyu
   paletine uyar, ucuncu taraf betigi/cerezi yuklemez. Pin, dukkanin
   kendi fotografi. Kartin tamami tek bir baglanti.
   Oranlar SVG viewBox'i (1200x560) ile ayni tutuldu ki etiketler
   cizimdeki yol ve kiyi cizgileriyle ayni yerde kalsin.
   ========================================================= */
.map-card {
    /* Su, karadan ACIK olmali — harita uygulamalarinda deniz boyle okunur.
       Ters cevirirsek (koyu su, acik kara) kiyi cizgisi yol gibi gorunuyor. */
    --map-land: #102942;
    --map-sea: #17506f;
    --map-sea-deep: #0e3b56;
    --map-sand: #e3c288;
    --map-wave: rgba(214, 238, 255, .5);
    --map-block: rgba(255, 255, 255, .065);
    --map-road: rgba(255, 255, 255, .13);
    --map-road-main: rgba(255, 193, 104, .34);
    --map-road-line: rgba(255, 255, 255, .55);

    position: relative; display: block; overflow: hidden; isolation: isolate;
    aspect-ratio: 1200 / 560;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: var(--map-land);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.map-card:hover, .map-card:focus-visible { transform: translateY(-4px); border-color: rgba(255, 193, 104, .45); }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Yer adlari — haritadaki gibi seyrek ve sakin */
.map-place {
    position: absolute; z-index: 2;
    font-size: clamp(10px, 1.05vw, 13px); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
/* Konumlar SVG geometrisine gore: kiyi cizgisi x=72'de y=244, x=720'de y=410.
   Alt serit kartin son ~%18'ini kapatiyor, etiketler onun uzerinde kalmali. */
.map-place--sea   { left: 6%;  top: 70%; color: #d6eeff; font-style: italic; letter-spacing: .22em; opacity: .85; }
.map-place--beach { left: 60%; top: 73%; color: var(--map-sand); }
.map-place--road  { left: 17%; top: 13%; color: rgba(255, 193, 104, .8); }
.map-place--west  { left: 7%;  top: 40%; }
.map-place--east  { right: 6%; top: 40%; }

/* Pin: dukkanin fotografi */
.map-pin {
    position: absolute; z-index: 3; left: 50%; top: 44%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Fotograf dikdortgen (daire degil): dukkan cephesi genis bir goruntu,
   daireye kirpinca tabela kesiliyor ve magaza taninmiyordu. */
.map-pin-photo {
    position: relative; display: block;
    width: clamp(140px, 19vw, 210px); aspect-ratio: 3 / 2;
    border-radius: 14px; overflow: hidden;
    border: 3px solid var(--yellow);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .85);
}
.map-pin-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; transition: transform .5s var(--ease); }
.map-card:hover .map-pin-photo img { transform: scale(1.07); }

/* Fotografin altindaki sivri uc */
.map-pin-photo::after {
    content: ""; position: absolute; left: 50%; bottom: -8px;
    width: 18px; height: 18px; background: var(--yellow);
    transform: translateX(-50%) rotate(45deg); border-radius: 3px; z-index: -1;
}
/* Konum halkasi — fotografin altindaki noktadan yayilan yavas nabiz */
.map-pin-ring {
    position: absolute; left: 50%; top: calc(clamp(140px, 19vw, 210px) / 1.5 + 4px);
    width: 26px; height: 26px;
    transform: translate(-50%, -50%); border-radius: 50%;
    border: 2px solid rgba(255, 193, 104, .65);
    animation: mapPulse 2.8s var(--ease) infinite;
}
@keyframes mapPulse {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: .8; }
    70%  { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
.map-pin-label {
    margin-top: 6px; padding: 5px 13px; border-radius: 999px;
    background: var(--yellow); color: var(--black);
    font-size: clamp(10.5px, 1.05vw, 12.5px); font-weight: 800; letter-spacing: .03em;
    white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8);
}

/* Alt serit: adres + Google Haritalar cagrisi */
.map-card-bar {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px clamp(16px, 2.4vw, 28px);
    background: linear-gradient(to top, rgba(5, 11, 20, .92), rgba(5, 11, 20, .72) 55%, transparent);
    backdrop-filter: blur(3px);
}
.map-card-where { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.map-card-where b { font-size: clamp(14px, 1.4vw, 16.5px); color: var(--text); letter-spacing: .01em; }
.map-card-where span { font-size: clamp(11.5px, 1.1vw, 13.5px); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card-cta {
    flex: none; font-size: clamp(12px, 1.15vw, 14px); font-weight: 700; color: var(--yellow);
    border-bottom: 1px solid transparent; transition: border-color .25s var(--ease);
}
.map-card:hover .map-card-cta { border-bottom-color: var(--yellow); }

@media (max-width: 720px) {
    /* Dar ekranda kare-msi kesim: yan etiketler pine cok yaklasiyor, kaldirilir. */
    .map-card { aspect-ratio: 4 / 3.4; }
    .map-place--west, .map-place--east, .map-place--road { display: none; }
    .map-place--sea { top: 86%; }
    .map-pin { top: 40%; }
    .map-card-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .map-card-where span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .map-pin-ring { animation: none; opacity: .45; }
    .map-card, .map-pin-photo img { transition: none; }
    .map-card:hover { transform: none; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 70px 0 56px; }
.page-hero h1 { font-size: clamp(38px, 5vw, 64px); margin-top: 16px; }
.page-hero p { color: var(--ink-soft); margin-top: 16px; max-width: 56ch; font-size: 17px; }

.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.about-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.about-quote { margin-top: 30px; padding: 26px 28px; background: var(--indigo-tint); border-radius: 18px; border-left: 4px solid var(--indigo); }
.about-quote p { font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }

.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 56px; }
.stat-card { background: var(--paper); border-radius: 18px; padding: 28px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); }
.stat-card b { font-family: var(--font-display); font-size: 40px; color: var(--indigo); display: block; }
.stat-card span { color: var(--ink-soft); font-size: 14px; }

/* ---------- Forms (contact) ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-form { display: grid; gap: 16px; }
.contact-form label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.contact-form input, .contact-form textarea {
    width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line);
    font-family: var(--font-body); font-size: 15px; background: var(--navy-deep); color: var(--text);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }

/* ---------- Breadcrumb / product detail ---------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: flex-start; }
.pd-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: sticky; top: 110px; }
.pd-cat { color: var(--indigo); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.pd-title { font-size: clamp(32px,4vw,48px); margin-top: 12px; }
.pd-price { font-size: 24px; font-weight: 700; margin-top: 16px; color: var(--ink-soft); }
.pd-desc { margin-top: 22px; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); max-width: 50ch; }
.pd-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink-soft); margin-bottom: 30px; }
/* Koyu zemin: --ink (#050b14) burada gorunmez olurdu, marka sarisi kullanilir. */
.back-link:hover, .back-link:focus-visible { color: var(--yellow); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .main-nav { display: none; }
    .lang-switch { display: none; }
    .hero .wrap, .feature-row, .about-grid, .contact-grid, .product-detail, .visit-grid { grid-template-columns: 1fr; }
    .feature-row.rev .feature-media { order: 0; }
    .cat-grid { grid-template-columns: 1fr; }
    .cat-card:first-child { grid-row: auto; aspect-ratio: 4/3.1; }
    .product-grid { grid-template-columns: repeat(2,1fr); }
    .review-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr; }
    .pd-media { position: static; }
    .hero-badge { left: 10px; bottom: -20px; }
}
@media (max-width: 640px) {
    .product-grid { grid-template-columns: 1fr; }
    .site-header .wrap { height: 72px; }
    section { padding: 70px 0; }
    .visit-info { padding: 36px 26px; }
}

/* =========================================================
   RATGEBER — uzun metinli rehber sayfalari
   Site koyu temali; renkler :root'taki gercek degiskenlerden
   gelir. Okunabilirlik oncelikli: dar olcu, genis satir araligi.
   ========================================================= */
.rg-hero{
  padding:clamp(52px,9vh,104px) 0 clamp(26px,4vh,44px);
  border-bottom:1px solid var(--line);
}
.rg-kicker{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--indigo); margin-bottom:16px;
}
.rg-hero h1{
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,52px); font-weight:700; line-height:1.12;
  letter-spacing:-.025em; margin:0 0 18px; max-width:17ch; color:var(--text);
}
.rg-lead{
  font-size:clamp(16px,1.9vw,20px); line-height:1.65; color:var(--text-muted);
  max-width:62ch; margin:0;
}
.rg-meta{
  margin-top:22px; font-size:12.5px; color:rgba(157,176,198,.72);
  display:flex; gap:18px; flex-wrap:wrap;
}

/* --- Yazi govdesi --- */
.rg-body{padding:clamp(34px,5vh,62px) 0 clamp(40px,6vh,80px)}
.rg-col{max-width:70ch}
.rg-col h2{
  font-family:var(--font-display); color:var(--text);
  font-size:clamp(21px,2.7vw,30px); font-weight:700; line-height:1.25;
  letter-spacing:-.015em; margin:clamp(34px,4.5vh,52px) 0 14px;
}
.rg-col h2:first-child{margin-top:0}
.rg-col h3{font-size:clamp(17px,2vw,20px); font-weight:700; margin:26px 0 10px; color:var(--text)}
.rg-col p{font-size:16.5px; line-height:1.78; color:var(--text-muted); margin:0 0 16px}
/* Koyu zeminde vurgu: parlak metin rengi — koyu "ink" okunmuyordu */
.rg-col strong{color:var(--text); font-weight:700}
.rg-col a{color:var(--indigo); text-underline-offset:3px}
.rg-col a:hover{color:var(--yellow-strong)}

.rg-col ul{margin:0 0 20px; padding-left:0; list-style:none}
.rg-col li{
  position:relative; padding-left:28px; margin-bottom:11px;
  font-size:16.5px; line-height:1.7; color:var(--text-muted);
}
.rg-col li::before{
  content:''; position:absolute; left:6px; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--indigo);
}

/* Vurgu kutusu — uyari ya da onemli not */
.rg-note{
  margin:26px 0; padding:20px 24px; border-radius:14px;
  background:var(--indigo-tint); border-left:3px solid var(--indigo);
}
.rg-note p{margin:0; font-size:15.5px; line-height:1.7; color:var(--text)}
.rg-note p > strong:first-child{display:block; margin-bottom:6px; color:var(--indigo)}
.rg-note strong{color:var(--text)}

/* Kontrol listesi */
.rg-check{
  margin:26px 0; padding:24px 26px; border-radius:16px;
  border:1px solid var(--line); background:var(--paper);
}
.rg-check h3{margin:0 0 14px; font-size:16px; letter-spacing:.2px}
.rg-check ul{margin:0}
.rg-check li{color:var(--text)}
.rg-check li::before{
  content:'✓'; background:none; color:var(--indigo);
  font-size:14px; font-weight:800; top:1px; left:2px; width:auto; height:auto;
}

/* --- Sorular --- */
.rg-faq{border-top:1px solid var(--line); padding-top:clamp(30px,4vh,48px); margin-top:clamp(34px,5vh,58px)}
.rg-faq h2{margin-top:0}
.rg-q{border-bottom:1px solid var(--line); padding:18px 0}
.rg-q h3{margin:0 0 8px; font-size:16.5px; font-weight:700; color:var(--text)}
.rg-q p{margin:0; font-size:15.5px; line-height:1.72; color:var(--text-muted)}

/* --- Alt cagri --- */
.rg-cta{
  margin-top:clamp(34px,5vh,56px); padding:clamp(26px,4vw,40px);
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--navy-soft),var(--navy-deep));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.rg-cta h2{margin:0 0 12px; font-size:clamp(20px,2.6vw,27px)}
.rg-cta p{margin:0 0 22px; font-size:16px; line-height:1.7; color:var(--text-muted)}
.rg-cta .btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* --- Rehber listesi (hub) --- */
.rg-grid{
  display:grid; gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.rg-card{
  display:flex; flex-direction:column; min-width:0;
  padding:clamp(24px,3vw,34px); border-radius:var(--radius);
  border:1px solid var(--line); background:var(--paper);
  text-decoration:none; color:inherit;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.rg-card:hover{
  transform:translateY(-6px); border-color:var(--indigo); box-shadow:var(--shadow);
}
.rg-card-tag{
  font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--indigo); margin-bottom:14px;
}
.rg-card h2{
  font-family:var(--font-display); color:var(--text);
  font-size:clamp(18px,2.1vw,22px); font-weight:700; line-height:1.3; margin:0 0 12px;
}
.rg-card p{font-size:15px; line-height:1.65; color:var(--text-muted); margin:0 0 20px}
.rg-card-go{
  margin-top:auto; font-size:12.5px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--indigo);
  display:inline-flex; align-items:center; gap:8px; transition:gap .35s var(--ease);
}
.rg-card:hover .rg-card-go{gap:13px}

@media (max-width:600px){
  .rg-col p,.rg-col li{font-size:16px}
  .rg-hero h1{max-width:none}
}

/* Yazi sonundaki diger rehberler — okuyucuyu sitede tutar ve
   yazilari birbirine baglar (ic baglanti). */
.rg-more{border-top:1px solid var(--line); padding-top:clamp(30px,4vh,48px); margin-top:clamp(34px,5vh,58px)}
.rg-more > h2{margin:0 0 20px; font-family:var(--font-display); color:var(--text);
  font-size:clamp(19px,2.3vw,25px); font-weight:700}
.rg-more .rg-card h2{font-size:clamp(16px,1.8vw,19px)}

/* ---------- Sık sorulan sorular (anasayfa, iletişim) ---------- */
.faq-list { max-width: 880px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: 18px; padding: 22px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; flex: none; font-size: 26px; line-height: 1; color: var(--yellow);
    transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary h3 {
    display: block; margin: 0; font-size: clamp(16px, 1.6vw, 19px); font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.35; text-transform: none; color: var(--text);
}
.faq-item p { margin: 0 0 22px; max-width: 70ch; font-size: 15.5px; line-height: 1.72; color: var(--text-muted); }
.faq-item summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }

/* Ürün kartı adı liste sayfasında h2 (SEO); görünüm eski div ile aynı kalsın */
h2.product-name { font-weight: inherit; line-height: inherit; color: inherit; }

/* ---------- Kısaca Smile Optik (hakkımızda) ---------- */
.facts-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.facts-list { margin: 26px 0 0; border-top: 1px solid var(--line); }
.facts-list > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts-list dt { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.facts-list dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.services-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.services-list li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.services-list b { display: block; font-size: 15.5px; color: var(--text); }
.services-list span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 860px) {
    .facts-grid { grid-template-columns: 1fr; }
    .facts-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   Drone "harita" karti (anasayfa)
   Iletisim sayfasindaki .map-card'in kardesi — ayni yuvarlak kose,
   ayni sari fotograf pini, ayni alt serit. Tek fark zemin: orada
   cizilmis harita, burada gercek havadan cekim. Tepeden bakan kare
   zaten uydu gorunumu gibi okunuyor, ustelik mahalleyi gercek
   haliyle gosteriyor (kirmizi catili Evren Bazaar ve karsi oteller).
   Sinif adlari bilerek ayri: iletisim sayfasindaki blok bozulmasin.
   ========================================================= */
.drone-map-head { max-width: 58ch; margin-bottom: clamp(26px, 3.4vw, 44px); }
.drone-map-head h2 { font-size: clamp(24px, 3.2vw, 42px); letter-spacing: -.03em; margin-top: 14px; }
.drone-map-head p { margin-top: 16px; color: var(--ink-soft); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; }

.drone-map {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    /* Videonun kendi orani — object-fit: cover hicbir seyi kirpmasin. */
    aspect-ratio: 1280 / 660;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: var(--navy-deep);
    transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.drone-map:hover, .drone-map:focus-visible { transform: translateY(-4px); border-color: rgba(255, 193, 104, .45); }
.drone-map:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

.drone-map-still, .drone-map-video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Poster her zaman altta durur: video hic yuklenmezse (mobil, hareket
   azaltma, JS kapali) kart bos kalmasin. Video ustune yumusakca biner —
   ilk karesi posterin ta kendisi oldugu icin gecis fark edilmez. */
.drone-map-video { opacity: 0; transition: opacity .9s var(--ease); }
.drone-map-video.is-on { opacity: 1; }

/* Ogle gunesinde cekilmis parlak kare: bir tutam karartma olmadan ustteki
   rozet de alttaki beyaz yazi da okunmuyor. Dozu bilerek dusuk — fazlasi
   goruntuyu camurlastiriyor ve "uydu gorunumu" hissi kayboluyor. */
.drone-map::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(5, 11, 20, .34), rgba(5, 11, 20, 0) 26%),
        radial-gradient(135% 100% at 50% 42%, rgba(5, 11, 20, 0) 52%, rgba(5, 11, 20, .34));
}

/* Kose rozeti: kartin cizim degil gercek cekim oldugunu soyler. */
.drone-map-chip {
    position: absolute; z-index: 3;
    left: clamp(14px, 2vw, 22px); top: clamp(14px, 2vw, 22px);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(5, 11, 20, .6); border: 1px solid var(--line);
    backdrop-filter: blur(4px);
    font-size: clamp(10px, 1vw, 12px); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
    white-space: nowrap;
}
.drone-map-chip::before {
    content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 193, 104, .2);
}

/* Sahne: oynat dugmesinin haritaya gore konumlanabilmesi icin. */
.drone-map-stage { position: relative; }

/* Yer adlari — Google Haritalar uydu gorunumundeki gibi.
   Beyaz yazi + koyu hale: havadan goruntude zemin hem acik hem koyu
   alanlar iceriyor, duz golge her ikisinde de okunur birakmiyor;
   dort yone yayilan hale okunabilirligi garantiliyor.
   Konum HTML'den --x / --y ile geliyor (yuzde), boylece yeni bir yer
   eklemek icin CSS'e dokunmak gerekmiyor. */
.drone-place {
    position: absolute; z-index: 2; left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    max-width: 22%; text-align: center; pointer-events: none;
    color: #fff; font-size: clamp(10px, 1vw, 12.5px); font-weight: 600;
    letter-spacing: .04em; line-height: 1.25;
    text-shadow: 0 0 3px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.9),
                 0 0 10px rgba(0,0,0,.7);
}

/* Oynat dugmesi — yalnizca "hareketi azalt" ayari acikken main.js ekler.
   Hareket istemeyen kullaniciya video zorla oynatilmaz ama isteyen
   baslatabilsin diye secenek birakiliyor. */
.drone-map-play {
    position: absolute; z-index: 6; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding-left: 4px;                  /* ucgen optik olarak ortalansin */
    border: 2px solid rgba(255, 255, 255, .55);
    background: rgba(5, 11, 20, .62);
    color: #fff; cursor: pointer;
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8);
    transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.drone-map-play:hover, .drone-map-play:focus-visible {
    background: var(--yellow); color: var(--black);
    border-color: var(--yellow); transform: translate(-50%, -50%) scale(1.07);
}

/* --- Konum isaretcisi: Google Haritalar "yer karti" gorunumu ---------------
   Pin bir sutun: ustte dikey beyaz kart, altinda damla bicimli pin, en altta
   nabiz halkasi. Sutunun ALT UCU konumu gosterir, o yuzden translate ile
   yukari degil, sadece yatayda ortalaniyor; boylece `top` degeri dogrudan
   pin'in degdigi noktayi belirtiyor.
   Konum havadan goruntudeki gercek dukkan yerine gore ayarli — degistirmek
   gerekirse yalnizca su iki yuzdeyi oynatmak yeterli. */
.drone-pin {
    --pin-x: 39%;   /* dukkanin karttaki yatay yeri */
    --pin-y: 33%;   /* dukkanin karttaki dikey yeri  */
    position: absolute; z-index: 3;
    left: var(--pin-x); top: var(--pin-y);
    transform: translate(-50%, -100%);
    display: flex; flex-direction: column; align-items: center;
    animation: droneBob 3.4s var(--ease) infinite;
}
@keyframes droneBob {
    0%, 100% { transform: translate(-50%, -100%); }
    50%      { transform: translate(-50%, calc(-100% - 5px)); }
}

/* Beyaz kart: koyu site paletinde havadan goruntunun uzerinde en iyi okunan
   secim beyaz — ayrica Google'in yer kartina benzedigi icin ziyaretci ne
   oldugunu aciklama okumadan anliyor. */
.drone-pin-card {
    display: block; width: clamp(124px, 15vw, 172px);
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .35s var(--ease);
}
.drone-map:hover .drone-pin-card { transform: translateY(-3px); }

/* Fotograf dikey kirpiliyor ama tabela ustte kalsin diye odak yukarida. */
.drone-pin-photo { display: block; aspect-ratio: 4 / 3.2; overflow: hidden; }
.drone-pin-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
    display: block; transition: transform .6s var(--ease);
}
.drone-map:hover .drone-pin-photo img { transform: scale(1.07); }

.drone-pin-text {
    display: block; padding: 8px 11px 10px; text-align: left; line-height: 1.25;
}
.drone-pin-text b {
    display: block; color: #1f2937;
    font-size: clamp(11.5px, 1.05vw, 13px); font-weight: 700; letter-spacing: -.01em;
}
.drone-pin-text i {
    display: block; margin-top: 2px; color: #6b7280; font-style: normal;
    font-size: clamp(10px, .95vw, 11.5px); font-weight: 500;
}

/* Damla pin — karttan asagi, ucu konumda */
.drone-pin-needle { display: block; margin-top: -2px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.drone-pin-needle svg { display: block; }

/* Nabiz halkasi tam pin ucunun oturdugu noktada */
.drone-pin-ring {
    position: absolute; left: 50%; bottom: 0;
    width: 22px; height: 22px;
    transform: translate(-50%, 50%); border-radius: 50%;
    border: 2px solid rgba(255, 193, 104, .75);
    animation: dronePulse 2.8s var(--ease) infinite;
}
@keyframes dronePulse {
    0%   { transform: translate(-50%, 50%) scale(1);   opacity: .85; }
    70%  { transform: translate(-50%, 50%) scale(3.6); opacity: 0; }
    100% { transform: translate(-50%, 50%) scale(3.6); opacity: 0; }
}

/* "Buradayiz" rozeti kartin sag ustune oturuyor: pin sutununu uzatmiyor,
   dolayisiyla ucun konumu kaymiyor. */
.drone-pin-here {
    position: absolute; top: -10px; right: -10px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--yellow); color: var(--black);
    font-size: clamp(9.5px, .9vw, 11px); font-weight: 800; letter-spacing: .02em;
    white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .85);
}

/* Alt serit: adres solda, Google Haritalar cagrisi sagda. */
.drone-map-bar {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px clamp(16px, 2.4vw, 28px);
    background: linear-gradient(to top, rgba(5, 11, 20, .94), rgba(5, 11, 20, .74) 55%, transparent);
    backdrop-filter: blur(3px);
}
.drone-map-where { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.drone-map-where b { font-size: clamp(14px, 1.4vw, 16.5px); color: var(--text); letter-spacing: .01em; }
.drone-map-where span { font-size: clamp(11.5px, 1.1vw, 13.5px); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drone-map-cta {
    flex: none; font-size: clamp(12px, 1.15vw, 14px); font-weight: 700; color: var(--yellow);
    border-bottom: 1px solid transparent; transition: border-color .25s var(--ease);
}
.drone-map:hover .drone-map-cta { border-bottom-color: var(--yellow); }

@media (max-width: 720px) {
    /* Dar ekranda video hic gosterilmez — kaynaklari zaten main.js
       indirmiyor, bu kural JS'siz durumu da kapatir. Ziyaretcilerimizin
       cogu turist ve yurt disi veri paketiyle geziyor. */
    /* Video telefonda ARTIK gizlenmiyor. Eskiden hic indirilmedigi icin
       display:none mantikliydi; artik bagli oldugun ag yavas degilse
       oynuyor (bkz. main.js), dolayisiyla gorunur olmali.

       Oran videonun kendi oranina yaklastirildi (16/10): boylece yatay
       kirpma azaliyor ve yer adlarinin hepsi kartin icinde kaliyor.
       Onceki 4/3.8 kesiminde videonun yalnizca %22,8-%77,2 arasi
       gorunuyordu ve iki otel etiketi disarida kaliyordu. */
    .drone-map { aspect-ratio: 16 / 10; }
    .drone-map-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .drone-map-where span { white-space: normal; }
    /* Rozet dar kartta pinin altina giriyor — kardes kartta yan
       etiketlerin kaldirilmasi gibi, burada da rozet kalkar. Zaten
       "havadan goruntu" bilgisi bolumun basligindan anlasiliyor. */
    .drone-map-chip { display: none; }
    /* Dar ekranda kart orani degisiyor (4/3.8) ve object-fit: cover goruntuyu
       YATAYDA kirpiyor: videonun yalnizca %22,8–%77,2 arasi gorunuyor.
       Dukkan masaustunde %39'da; kirpilmis alanda ayni nokta %29,7'ye denk
       geliyor. Dikeyde kirpma yok, o yuzden --pin-y degismiyor. */
    .drone-pin { --pin-x: 29.7%; --pin-y: 33%; }

    /* Telefonda kart kuculur: yalnizca fotograf kalir, ad/kategori satiri
       gizlenir. Sebep olcu — pin sutunu (kart + damla) %33'teki uc
       noktasindan yukari dogru buyuyor; tam boyda kart kartin ustunden
       tasiyordu. Isletme adi zaten alt seritte yaziyor.
       80px kart + 28px damla = 92px, uc nokta 105px'te: siğiyor. */
    /* Yer adlari telefonda da gorunur. Yatay konum --xm: kirpilmis
       goruntude ayni binaya denk gelen yuzde (index.php hesapliyor).
       Dikeyde kirpma yok, --y aynen gecerli. */
    .drone-place { left: var(--xm); font-size: 9.5px; letter-spacing: .02em; max-width: 30%; }

    /* Pin sutunu ucundan YUKARI dogru buyuyor; %33'lik uc noktasinin
       ustunde yalnizca ~69px var, tam boy kart oraya sigmiyordu.
       Cozum: telefonda fotograf karti akistan cikip damla pinin yanina
       geciyor. Boylece sutun sadece damla kadar yer kapliyor. */
    .drone-pin { --pin-x: 36.7%; --pin-y: 33%; }
    .drone-pin-card {
        position: absolute; left: calc(100% + 9px); bottom: 1px;
        width: 74px; border-radius: 9px;
    }
    .drone-pin-text { display: none; }
    .drone-pin-needle svg { width: 20px; height: 28px; }
    .drone-pin-here { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* Hareket istemeyen kullaniciya sabit poster karesi kalir. */
    /* Video gizlenmez, yalnizca kendiliginden oynamaz: oynat dugmesine
       basan kullanici gorebilmeli. Gorunurlugu .is-on sinifi acar ve o
       sinif ancak video gercekten oynamaya baslayinca eklenir. */
    .drone-pin-ring { animation: none; opacity: .5; }
    .drone-pin { animation: none; }
    .drone-map, .drone-pin-photo img, .drone-pin-card { transition: none; }
    .drone-map:hover { transform: none; }
}