/* bundle.css — main.css @import zincirinin birleşik hâli (scripts/build_css_bundle.php). Elle düzenlemeyin. */
/* ============================================================
   v2/main.css — Best Premium Travel Public CSS Hub
   FAZ 1: site.css (2310 satır) modüler yapıya bölündü.
   Yükleme sırası önemli: tokens → base → layout → components → header → footer → animations → pages.
   ============================================================ */


/* >>> tokens.css */
/* ============================================================
   v2/tokens.css — Design Tokens (FAZ 2)
   Renk · Tipografi · Spacing · Container · Radius · Shadow · Motion · Z-Index
   Eski alias'lar (--navy, --gold, --siyah, --altin, --krem, --text, --muted, --line, --subtle, --serif, --sans)
   geriye uyumluluk için korunur.
   ============================================================ */

:root {
    /* ============================================================
       1) RENK SİSTEMİ — Siyah · Şampanya Altın · Krem
       ============================================================ */

    /* Siyah skalası (tasarım kontur, koyu yüzey, baskı) */
    --color-ink:           #0F0F0F;   /* Ana siyah (logo, başlık, koyu yüzey)  */
    --color-ink-soft:      #1A1A1A;   /* İkincil siyah (metin gövdesi)         */
    --color-ink-muted:     #242424;   /* Üçüncü kademe (hover bg)              */
    --color-ink-faint:     #2E2E2E;   /* En açık siyah (kart border'ı)         */

    /* Logo-uyumlu DERİN ALTIN skalası — şampanya değil, varak altın hissi */
    --color-gold:          #BC9456;   /* Ana altın (logo gövde tonu)           */
    --color-gold-bright:   #DABE82;   /* Açık vurgu (highlight)                */
    --color-gold-pale:     #E8D1A0;   /* Dekoratif (badge fill)                */
    --color-gold-mist:     #F5ECD8;   /* En açık altın yüzey                   */
    --color-gold-deep:     #8A6A28;   /* Derin altın (active, gradient stop)   */

    /* Yüzey skalası — BEYAZ ZEMİN teması.
       Body için --color-bg = #FFF kullan. "krem" alias'ları artık nötr gri tonlar:
       sayfalardaki "alternating section" backgrond'larının kontrastı korunur. */
    --color-cream:         #FDFDFD;   /* Bölüm zemini (neredeyse beyaz, ferah) */
    --color-cream-soft:    #FAFAFA;   /* Daha derin bölüm                       */
    --color-cream-mute:    #F4F4F4;   /* İnce vurgu yüzeyi                      */
    --color-cream-deep:    #ECECEC;   /* Kademe geçişi                          */

    /* Metin renkleri (siyah ailesine bağlı) */
    --color-text:          #1A1A1A;   /* Birincil metin                        */
    --color-text-soft:     #4A4A4A;   /* İkincil metin                         */
    --color-text-mute:     #7A7A7A;   /* Yardımcı metin (meta, caption)        */
    --color-text-faint:    #9A9A9A;   /* En açık metin (placeholder)           */

    /* Geri bildirim renkleri */
    --color-success:       #2D7A4F;
    --color-warning:       #B45309;
    --color-danger:        #C0392B;

    /* Çizgiler — beyaz zeminde belirgin nötr gri */
    --color-border:        #E5E5E5;   /* Kart border'ı (daha okunaklı)         */
    --color-border-strong: #CFCFCF;   /* Vurgulu çizgi                         */
    --color-border-muted:  rgba(15, 15, 15, 0.06);
    --color-border-gold:   rgba(188, 148, 86, 0.35);  /* Hover/aktif altın çizgi */

    /* Yüzeyler */
    --color-surface:       #FFFFFF;
    --color-surface-alt:   #FDFDFD;
    --color-surface-dark:  var(--color-ink);

    /* Beyaz tema — body beyaz, kart beyaz + ince border + hafif gölge */
    --color-bg:            #FFFFFF;   /* body */
    --color-surface-soft:  #FDFDFD;
    --color-ink-strong:    #1A1A1A;
    --color-shadow-card:        0 1px 3px rgba(0,0,0,0.06), 0 6px 18px rgba(0,0,0,0.07);
    --color-shadow-card-hover:  0 10px 28px rgba(0,0,0,0.10), 0 18px 40px rgba(188,148,86,0.18);

    /* Marka vurgu (kullanım kolaylığı için) */
    --color-accent:        var(--color-gold);
    --color-accent-hover:  var(--color-gold-deep);

    /* Logo metalik altın gradient — varak altın parlaklığı */
    --color-gold-light:    #DABE82;
    --color-gold-dark:     #8A6A28;
    --gradient-gold:       linear-gradient(135deg, #DABE82 0%, #BC9456 45%, #8A6A28 100%);
    --gradient-gold-rich:  linear-gradient(140deg, #E8D1A0 0%, #C9A361 30%, #8A6A28 70%, #B58A3F 100%);
    --gradient-gold-soft:  linear-gradient(135deg, #E8D1A0 0%, #C9A361 100%);
    --gradient-gold-text:  linear-gradient(180deg, #B58A3F 0%, #DABE82 50%, #8A6A28 100%);

    /* Hero gradient (siyah + altın yumuşak overlay) */
    --hero-gradient: linear-gradient(
        160deg,
        rgba(15,15,15,0.92) 0%,
        rgba(26,26,26,0.75) 60%,
        rgba(201,169,110,0.15) 100%
    );

    /* ============================================================
       2) TİPOGRAFİ
       ============================================================ */

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Tipografi skalası — clamp fluid */
    --text-xs:    clamp(11px, 0.7vw + 0.4rem, 12px);
    --text-sm:    clamp(13px, 0.75vw + 0.6rem, 14px);
    --text-base:  clamp(15px, 0.8vw + 0.7rem, 16px);
    --text-lg:    clamp(17px, 1vw + 0.75rem, 19px);
    --text-xl:    clamp(20px, 1.2vw + 0.85rem, 22px);
    --text-2xl:   clamp(22px, 1.6vw + 1rem, 28px);
    --text-3xl:   clamp(28px, 2.4vw + 1rem, 36px);
    --text-4xl:   clamp(40px, 4.5vw + 1rem, 80px);   /* hero */
    --text-5xl:   clamp(48px, 6vw + 1rem, 104px);    /* editöryel */

    --leading-tight:   1.18;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.08em;
    --tracking-wider:  0.18em;

    /* ============================================================
       3) SPACING — 4px temel
       ============================================================ */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;
    --space-11: 160px;

    /* Bölüm dikey padding — clamp 80→160px */
    --section-py: clamp(80px, 9vw, 160px);
    --section-py-tight: clamp(56px, 6vw, 96px);

    /* ============================================================
       4) CONTAINER
       ============================================================ */
    --container-max:    1440px;
    --container-wide:   1600px;
    --container-narrow: 900px;
    --container-prose:  720px;
    --container-px:     clamp(20px, 4vw, 48px);

    /* ============================================================
       5) RADIUS
       Not: site.css döneminden gelen --radius-sm (3px) ve --radius-lg (10px)
       değerleri korundu; geriye uyumluluk için.
       ============================================================ */
    --radius-sm:  3px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;

    /* ============================================================
       6) SHADOW
       ============================================================ */
    --shadow-sm: 0 1px 3px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.08), 0 2px 4px rgba(15, 15, 15, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 15, 15, 0.10), 0 4px 8px rgba(15, 15, 15, 0.05);
    --shadow-xl: 0 24px 56px rgba(15, 15, 15, 0.14), 0 8px 16px rgba(15, 15, 15, 0.06);
    --shadow-gold: 0 14px 32px -10px rgba(201, 169, 110, 0.45);

    /* ============================================================
       7) GEÇİŞ (MOTION)
       ============================================================ */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   160ms;
    --duration-normal: 240ms;
    --duration-slow:   400ms;
    --duration-slower: 680ms;

    /* ============================================================
       8) Z-INDEX
       ============================================================ */
    --z-base:        1;
    --z-card:        10;
    --z-sticky:      50;
    --z-dropdown:    60;
    --z-overlay:     90;
    --z-header:      100;
    --z-mobile-menu: 200;
    --z-modal:       1000;
    --z-lightbox:    9000;
    --z-wa-float:    9500;

    /* ============================================================
       9) GERİYE DÖNÜK UYUMLULUK — eski isimler yeni token'lara eşli
       (Eski CSS dosyalarında ve PHP class'larında hâlâ kullanılıyor)
       ============================================================ */

    /* Eski renk değişkenleri */
    --siyah:       var(--color-ink);
    --siyah-2:     var(--color-ink-soft);
    --siyah-3:     var(--color-ink-muted);
    --siyah-4:     var(--color-ink-faint);

    --altin:       var(--color-gold);
    --altin-2:     var(--color-gold-bright);
    --altin-3:     var(--color-gold-pale);
    --altin-soft:  var(--color-gold-mist);

    --krem:        var(--color-cream);
    --krem-2:      var(--color-cream-soft);
    --krem-3:      var(--color-cream-mute);
    --krem-4:      var(--color-cream-deep);

    --metin:         var(--color-text);
    --metin-ikincil: var(--color-text-soft);
    --metin-uc:      var(--color-text-mute);
    --metin-hafif:   var(--color-text-faint);

    --vurgu:       var(--color-accent);
    --vurgu-hover: var(--color-accent-hover);

    --basari:      var(--color-success);
    --uyari:       var(--color-warning);
    --hata:        var(--color-danger);

    --cizgi:       var(--color-border);
    --cizgi-2:     var(--color-border-strong);

    /* İngilizce alias'lar (site.css döneminden) */
    --navy:        var(--color-ink);
    --navy-2:      var(--color-ink-soft);
    --navy-3:      var(--color-ink-muted);
    --gold:        var(--color-gold);
    --gold-2:      var(--color-gold-bright);
    --gold-soft:   var(--color-gold-mist);
    --white:       #FFFFFF;
    --text:        var(--color-text);
    --muted:       var(--color-text-mute);
    --subtle:      var(--color-cream);
    --subtle-2:    var(--color-cream-soft);
    --line:        var(--color-border);

    /* Eski spacing kısaltmaları */
    --s1: var(--space-1);
    --s2: var(--space-2);
    --s3: var(--space-3);
    --s4: var(--space-4);
    --s5: var(--space-5);
    --s6: var(--space-6);
    --s7: var(--space-7);
    --s8: var(--space-8);
    --s9: var(--space-9);

    /* Eski radius isimleri — eski değerleri koru (görsel parite) */
    --radius:    6px;

    /* Eski shadow alias (site.css döneminden gelen "--shadow" suffix'siz) */
    --shadow:    var(--shadow-md);

    /* Eski tipografi alias */
    --serif:     var(--font-display);
    --sans:      var(--font-body);

    /* Eski motion alias */
    --ease:       var(--ease-smooth);
    --transition: var(--duration-normal) var(--ease-smooth);
}

/* >>> base.css */
/* ============================================================
   v2/base.css — Reset + body + element stilleri (FAZ 3)
   Token'lara bağlı, sıfırdan modern temel.
   ============================================================ */

/* ===== Modern reset ===== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg, var(--color-cream));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
}

body { padding-top: 0; }
body.has-solid-header { padding-top: 80px; }

/* ===== Tipografi ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 0.6em;
    text-wrap: balance;
}

h1 { font-size: var(--text-4xl); font-weight: 700; color: var(--color-ink); }
h2 { font-size: var(--text-3xl); font-weight: 600; color: var(--color-ink); }
h3 { font-size: var(--text-xl); font-weight: 600; color: var(--color-ink); }
h4 { font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
h5 { font-size: var(--text-base); font-weight: 600; }
h6 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-gold-deep); }

p {
    margin-bottom: 1em;
    color: var(--color-text);
    text-wrap: pretty;
    max-width: 75ch;
}

a {
    color: var(--color-ink);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-smooth);
}
a:hover { color: var(--color-accent); }
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== Görsel & medya ===== */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img { font-style: italic; background-repeat: no-repeat; background-size: cover; }
img[alt] { font-style: italic; }

/* ===== Form temel ===== */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ===== Liste sıfırlamaları (genel sıfırlama yok — sadece site-footer için yapıldı eski sistemde) ===== */

/* ===== Yardımcı odak görünürlüğü ===== */
:focus { outline: 0; }
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===== Seçim rengi ===== */
::selection {
    background: var(--color-gold);
    color: var(--color-ink);
}

/* ===== Scrollbar (Webkit) ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-cream-soft); }
::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

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

/* >>> layout.css */
/* ============================================================
   v2/layout.css — Container + grid + section (FAZ 3)
   Cömert spacing sistemi, token tabanlı.
   ============================================================ */

/* ===== Container ===== */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
    width: 100%;
}

.container-sm,
.container-narrow {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--container-px);
    width: 100%;
}

.container-prose {
    max-width: var(--container-prose);
    margin-inline: auto;
    padding-inline: var(--container-px);
    width: 100%;
}

.container-wide {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-px);
    width: 100%;
}

.container-fluid {
    width: 100%;
    padding-inline: var(--container-px);
}

/* ===== Section ===== */
.section {
    padding-block: var(--section-py);
    position: relative;
}

.section-tight {
    padding-block: var(--section-py-tight);
    position: relative;
}

.section-flush {
    padding-block: 0;
}

.section-dark {
    background: var(--color-ink);
    color: var(--color-surface);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--color-surface); }
.section-dark p { color: rgba(255, 255, 255, 0.78); }

.section-subtle {
    background: var(--color-cream);
}

.section-cream {
    background: var(--color-cream-soft);
}

/* ===== Section başlığı (eski) ===== */
.section-head {
    text-align: center;
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-8);
}
.section-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.section-head p {
    color: var(--color-text-mute);
    font-size: var(--text-lg);
    margin-inline: auto;
}

/* ===== Divider ===== */
.divider {
    display: block;
    width: 60px;
    height: 2px;
    background: var(--color-gold);
    margin: var(--space-4) auto var(--space-6);
    border: 0;
}
.section-head .divider { margin-inline: auto; }

/* ===== Topbar (kullanılmıyor) ===== */
.topbar { display: none; }

/* ===== Yardımcı arka planlar ===== */
.bg-krem    { background: var(--color-cream); }
.bg-krem-2  { background: var(--color-cream-soft); }
.bg-siyah   { background: var(--color-ink); color: var(--color-surface); }
.bg-altin   { background: var(--color-gold); color: var(--color-ink); }

.bg-siyah .bolum-baslik,
.bg-siyah .section-title,
.bg-siyah h2 { color: var(--color-surface); }
.bg-siyah .bolum-aciklama { color: rgba(255, 255, 255, 0.72); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .section { padding-block: clamp(56px, 12vw, 80px); }
    .section-tight { padding-block: clamp(40px, 9vw, 64px); }
    .section-head { margin-bottom: var(--space-7); }
}

@media (max-width: 480px) {
    .container,
    .container-sm,
    .container-narrow,
    .container-prose,
    .container-wide,
    .container-fluid {
        padding-inline: 18px;
    }
}

/* >>> components.css */
/* ============================================================
   v2/components.css — Buton + kart + section header + form
   FAZ 4: Token tabanlı modern component sistemi.
   Eski class'lar (tour-card, hotel-card, vb.) pages/*.css içinde
   geriye uyumluluk için duruyor; bu dosya YENİ .card sistemini sağlar.
   ============================================================ */

/* ============================================================
   1) EYEBROW + SECTION-TITLE
   ============================================================ */
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

.section-lead {
    font-size: var(--text-lg);
    color: var(--color-text-soft);
    line-height: var(--leading-relaxed);
    margin-bottom: 0;
    margin-inline: auto;
    max-width: 65ch;
    text-wrap: pretty;
}

/* Yeni section-header (.section-head'in modern karşılığı) */
.section-header {
    text-align: center;
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-8);
}
.section-header .eyebrow { margin-bottom: var(--space-3); }
.section-header .section-title { margin-bottom: var(--space-4); }

/* ============================================================
   2) BUTONLAR
   ============================================================ */
.btn {
    --btn-bg: var(--color-ink);
    --btn-color: var(--color-surface);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 16px 32px;
    min-height: 48px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--btn-color);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth),
        color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

.btn-primary {
    --btn-bg: var(--color-gold);
    --btn-color: #FFFFFF;
    background: var(--gradient-gold-rich);
    color: #FFFFFF;
    border-color: transparent;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
    box-shadow: 0 6px 18px rgba(188, 148, 86, 0.32), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
    background: var(--gradient-gold-rich);
    color: #FFFFFF;
    filter: brightness(1.08) saturate(1.05);
    box-shadow: 0 10px 26px rgba(188, 148, 86, 0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}

.btn-secondary,
.btn-dark {
    --btn-bg: var(--color-ink);
    --btn-color: var(--color-surface);
}
.btn-secondary:hover,
.btn-dark:hover {
    --btn-bg: var(--color-ink-soft);
    --btn-color: var(--color-gold);
}

.btn-outline {
    --btn-bg: transparent;
    --btn-color: var(--color-ink);
    --btn-border: var(--color-ink);
}
.btn-outline:hover {
    --btn-bg: var(--color-ink);
    --btn-color: var(--color-surface);
}

.btn-ghost {
    --btn-bg: rgba(255, 255, 255, 0.1);
    --btn-color: var(--color-surface);
    --btn-border: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover {
    --btn-bg: var(--color-surface);
    --btn-color: var(--color-ink);
    --btn-border: var(--color-surface);
}

.btn-whatsapp,
.btn-wa {
    --btn-bg: #25D366;
    --btn-color: #fff;
}
.btn-whatsapp:hover,
.btn-wa:hover {
    --btn-bg: #1ebe5b;
    --btn-color: #fff;
}

/* Boyutlar */
.btn-sm {
    padding: 10px 18px;
    font-size: var(--text-xs);
    min-height: 36px;
}
.btn-lg {
    padding: 20px 40px;
    font-size: var(--text-base);
    min-height: 56px;
}

.btn-block { width: 100%; }

/* ============================================================
   3) CARD — Modern temel kart sistemi
   Eski .tour-card, .hotel-card pages/tours.css içinde yaşamaya devam eder;
   yeni HTML'lerde "card tour-card" gibi çift class kullanılabilir.
   ============================================================ */
.card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--color-shadow-card, var(--shadow-sm));
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow) var(--ease-smooth);
    color: inherit;
    text-decoration: none;
    position: relative;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--color-shadow-card-hover, var(--shadow-lg));
    border-color: var(--color-border-gold, var(--color-gold));
}

.card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-cream);
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slower) var(--ease-smooth);
}
.card:hover .card-image img { transform: scale(1.06); }

.card-badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding: 6px 14px;
    background: var(--color-gold);
    color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-pill);
    z-index: 2;
}
.card-badge-dark { background: var(--color-ink); color: var(--color-gold); }

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-mute);
    margin-bottom: var(--space-3);
}
.card-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-ink);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-2);
}
.card-title a { color: inherit; }
.card-title a:hover { color: var(--color-gold); }

.card-desc {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}

.card-footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Feature card — küçük 4'lü kart (anasayfa: neden biz) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
.feature-card {
    text-align: center;
    padding: var(--space-7) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth);
}
.feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-md);
}
.feature-card .icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-5);
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-cream);
    color: var(--color-gold);
    transition:
        background var(--duration-slow) var(--ease-smooth),
        color var(--duration-slow) var(--ease-smooth);
}
.feature-card:hover .icon-wrap {
    background: var(--color-gold);
    color: var(--color-surface);
}
.feature-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}
.feature-card p {
    color: var(--color-text-mute);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* ============================================================
   3.5) CARD ACTIONS OVERLAY — favori + sepet ikonları (üst-sağ köşe)
   ============================================================ */
.card-image-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.card-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-actions-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.card-action-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15,15,15,0.18);
    cursor: pointer;
    border: 0;
    padding: 0;
    transition:
        transform var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth),
        background var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth);
    position: relative;
}
.card-action-btn::before {
    /* Genişletilmiş tıklama alanı (44px+) */
    content: '';
    position: absolute;
    inset: -4px;
}
.card-action-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(15,15,15,0.22);
}
.card-action-btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.card-action-icon { display: inline-flex; }
.card-action-icon--active { display: none; }
.card-action-btn.is-active .card-action-icon--default { display: none; }
.card-action-btn.is-active .card-action-icon--active { display: inline-flex; }

.card-action-btn--favorite.is-active { color: #EF4444; }
.card-action-btn--cart.is-active     { background: var(--color-gold); color: #fff; }

/* Tıklama feedback'i */
.card-action-btn.is-pulse { animation: bpt-pulse 0.4s var(--ease-bounce); }
@keyframes bpt-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* ============================================================
   3.6) TOAST — sağ üst köşe bildirim
   ============================================================ */
.bpt-toast-wrap {
    position: fixed;
    top: 92px;
    right: 20px;
    z-index: 9800;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.bpt-toast {
    background: var(--color-ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out);
    pointer-events: auto;
    max-width: 320px;
}
.bpt-toast.is-show { transform: translateX(0); opacity: 1; }
.bpt-toast--success { border-left: 3px solid var(--color-gold); }
.bpt-toast--remove  { border-left: 3px solid var(--color-text-mute); }
@media (max-width: 480px) {
    .bpt-toast-wrap { top: auto; bottom: 92px; right: 12px; left: 12px; }
    .bpt-toast { max-width: 100%; }
}

/* ============================================================
   4) FILTER TABS
   ============================================================ */
.filter-tabs {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-7);
}
.filter-tab {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    min-height: 44px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-normal) var(--ease-smooth);
}
.filter-tab:hover { border-color: var(--color-gold); color: var(--color-gold); }
.filter-tab.active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-surface);
}

/* ============================================================
   5) CTA block
   ============================================================ */
.cta-block {
    background: var(--color-ink);
    color: var(--color-surface);
    padding: clamp(64px, 8vw, 96px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(201, 169, 110, 0.18), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(201, 169, 110, 0.12), transparent 50%);
    pointer-events: none;
}
.cta-block > .container { position: relative; z-index: 1; }
.cta-block h2 { color: var(--color-surface); }
.cta-block p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 560px;
    margin: 0 auto var(--space-6);
}

/* ============================================================
   6) FORM
   ============================================================ */
.form {
    background: var(--color-surface);
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.field {
    margin-bottom: var(--space-4);
}
.field label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-ink);
    font-weight: 500;
    margin-bottom: var(--space-2);
}
.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 14px 16px;
    min-height: 48px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast) var(--ease-smooth);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 0;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18);
}

/* ============================================================
   7) ALERT
   ============================================================ */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
}
.alert-success { background: #f0fdf4; border-color: #86efac; color: #166534; }
.alert-error   { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.alert-info    { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

/* ============================================================
   8) TRUST STRIP — minimal yatay sıra
   ============================================================ */
.trust-strip {
    background: var(--color-cream);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-7);
    text-align: center;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.trust-item svg { color: var(--color-gold); flex-shrink: 0; }
.trust-item strong { color: var(--color-ink); font-weight: 600; }
@media (max-width: 768px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .trust-item { font-size: 13px; }
}

/* ============================================================
   9) BÖLÜM BAŞLIĞI (Türkçe class isimleri — eski sistem)
   ============================================================ */
.bolum-baslik-wrap {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-7);
}
.bolum-etiket {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}
.bolum-baslik {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--color-ink);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
}
.bolum-aciklama {
    font-size: var(--text-base);
    color: var(--color-text-soft);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 768px) {
    .feature-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form { padding: var(--space-5); }
    .btn { padding: 14px 24px; font-size: var(--text-xs); }
}
@media (max-width: 480px) {
    .btn { width: 100%; }
    .btn.btn-inline { width: auto; }
    .form { padding: var(--space-4); }
}

/* ============================================================
   SITE SEARCH MODAL
   ============================================================ */
.site-search-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    border: none;
    background: transparent;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: visible;
}
.site-search-modal::backdrop {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.site-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.site-search-container {
    position: relative;
    max-width: 640px;
    margin: 10vh auto 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: searchSlideIn .25s ease-out;
}
@keyframes searchSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
.site-search-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    color: #999;
}
.site-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #222;
    background: transparent;
}
.site-search-input::placeholder { color: #aaa; }
.site-search-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 4px;
    display: flex;
    transition: color .2s;
}
.site-search-close:hover { color: #333; }
.site-search-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px 0;
}
.site-search-empty,
.site-search-loading {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.search-result-item:hover { background: #f8f8f8; }
.search-result-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.search-result-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.search-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.search-result-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b8944f;
    font-weight: 600;
}
.search-result-title {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-desc {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-price {
    font-weight: 600;
    font-size: 13px;
    color: #b8944f;
    white-space: nowrap;
    flex-shrink: 0;
}
.search-result-meta {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .site-search-container { margin: 5vh 12px 0; }
}

/* >>> header.css */
/* ============================================================
   v2/header.css — Header (FAZ 5)
   Fixed transparent → scroll glassmorphism · animasyonlu hamburger ·
   modern dropdown · ghost lang/currency · mobile full-screen menu
   ============================================================ */

/* ============================================================
   1) SITE HEADER — Fixed, transparent → glass
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    padding: 22px 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    /* iOS Safari + body overflow-x:hidden + position:fixed çakışmasına karşı
       GPU compositing'i zorla. Aksi takdirde mobilde alt sayfalarda header
       stacking context'ten çıkıp görünmez olabiliyor. */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition:
        background var(--duration-slow) var(--ease-smooth),
        backdrop-filter var(--duration-slow) var(--ease-smooth),
        padding var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow) var(--ease-smooth);
}

.site-header.scrolled,
.site-header.solid {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 2px 24px rgba(15, 15, 15, 0.06);
    border-bottom-color: rgba(201, 169, 110, 0.15);
    padding: 12px 0;
}

.header-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 40px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
}

/* ============================================================
   2) BRAND
   ============================================================ */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-surface);
    transition: filter var(--duration-normal) var(--ease-smooth);
}
.brand:hover {
    filter: drop-shadow(0 0 12px rgba(201, 169, 110, 0.55));
}

.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--gradient-gold, var(--color-gold));
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(201, 169, 110, 0.25);
    transition:
        background var(--duration-normal) var(--ease-smooth),
        color var(--duration-normal) var(--ease-smooth);
}
/* Logo bir <img> ise: arka plan + gölge yok, sadece görsel — yatay/landscape logoya uygun */
.brand-logo--img {
    background: transparent !important;
    box-shadow: none !important;
    width: auto;
    height: 96px;
    max-width: 360px;
    object-fit: contain;
    border-radius: 0;
    filter: none;
}
.site-header.scrolled .brand-logo--img,
.site-header.solid .brand-logo--img {
    background: transparent !important;
    box-shadow: none !important;
    height: 70px;   /* scroll'da bir miktar küçülsün */
}

/* Logo yüklenmişse YAN YAZIYI gizle — logo zaten "Best Premium Travel" yazısını içeriyor */
.brand.brand--has-logo .brand-text { display: none; }
.brand.brand--has-logo {
    gap: 0;
}

/* Hero üstünde (transparent header) — transparent logo doğrudan görünür,
   altın logo koyu hero overlay'inde okunaklı. Hafif drop-shadow ile derinlik. */
.site-header:not(.scrolled):not(.solid) .brand-logo--img {
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: inherit;
    letter-spacing: -0.005em;
}
.brand-sub {
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--color-gold);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 3px;
}

.site-header.scrolled .brand,
.site-header.solid .brand { color: var(--color-ink); }

.site-header.scrolled .brand-logo,
.site-header.solid .brand-logo {
    background: var(--color-ink);
    color: var(--color-gold);
}

/* ============================================================
   3) MAIN NAV
   ============================================================ */
.main-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 36px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a,
.main-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 8px 2px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-surface);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth);
}

/* Sentence-case underline animation */
.main-nav a::after,
.main-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--color-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-out);
}
.main-nav a:hover::after,
.main-nav .nav-link:hover::after,
.main-nav a.active::after,
.main-nav .nav-link.active::after {
    transform: scaleX(1);
}

.site-header.scrolled .main-nav a,
.site-header.scrolled .main-nav .nav-link,
.site-header.solid .main-nav a,
.site-header.solid .main-nav .nav-link {
    color: var(--color-ink);
}
.main-nav a:hover,
.main-nav .nav-link:hover { color: var(--color-gold); }

/* Rezervasyon CTA — header en sağ */
.header-booking-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    margin-left: 4px;
    border-radius: 999px;
    border: 1px solid rgba(201, 169, 110, 0.65);
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.22), rgba(201, 169, 110, 0.06));
    color: #f3e6c8;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
}
.header-booking-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.header-booking-btn:hover,
.header-booking-btn.is-active {
    color: #1a1612;
    background: linear-gradient(135deg, #e8d6a8, #c9a96e);
    border-color: transparent;
    transform: translateY(-1px);
}
.site-header.scrolled .header-booking-btn,
.site-header.solid .header-booking-btn {
    color: var(--color-ink, #1a1612);
    border-color: rgba(168, 137, 79, 0.5);
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.18), rgba(201, 169, 110, 0.05));
}
.site-header.scrolled .header-booking-btn:hover,
.site-header.scrolled .header-booking-btn.is-active,
.site-header.solid .header-booking-btn:hover,
.site-header.solid .header-booking-btn.is-active {
    color: #1a1612;
    background: linear-gradient(135deg, #e8d6a8, #c9a96e);
}

.mobile-booking-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    padding: 12px 16px !important;
    border-radius: 12px;
    background: linear-gradient(135deg, #2c241c, #1a1612);
    color: #f3e6c8 !important;
    font-weight: 650;
    border: 1px solid rgba(201, 169, 110, 0.35);
}
.mobile-booking-link svg { flex-shrink: 0; }
.mobile-booking-link:hover,
.mobile-booking-link.active {
    background: linear-gradient(135deg, #c9a96e, #a8894f);
    color: #1a1612 !important;
}

/* ============================================================
   4) DROPDOWN — Mega panel
   ============================================================ */
.main-nav { position: relative; }
.has-dropdown { position: relative; }
.has-dropdown.has-mega { position: static; }

.dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.98);
    margin-top: 0;
    min-width: 320px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(201, 169, 110, 0.22);
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(15, 15, 15, 0.14),
        0 4px 16px rgba(15, 15, 15, 0.06);
    padding: var(--space-5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 220ms;
    z-index: var(--z-dropdown);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
/* Hover bridge — nav ile panel arası fare kopmasın (geniş + yüksek) */
.dropdown-panel::before {
    content: '';
    position: absolute;
    top: -22px;
    left: -40px;
    right: -40px;
    height: 24px;
    background: transparent;
}
.has-dropdown.has-mega > .dropdown-panel::before {
    left: -80px;
    right: -80px;
    height: 28px;
    top: -28px;
}
.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel,
.has-dropdown.is-open .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Chevron rotate */
.has-dropdown > .nav-link svg {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.has-dropdown:hover > .nav-link svg,
.has-dropdown:focus-within > .nav-link svg,
.has-dropdown.is-open > .nav-link svg {
    transform: rotate(180deg);
}

/* ── Mega panel (Turlar / Oteller) ── */
.mega-panel {
    left: 50%;
    width: min(980px, calc(100vw - 40px));
    min-width: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 0;
    border-radius: 20px;
    border: 1px solid rgba(201, 169, 110, 0.28);
    box-shadow:
        0 28px 70px rgba(15, 15, 15, 0.18),
        0 8px 24px rgba(15, 15, 15, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.tours-mega { width: min(1020px, calc(100vw - 32px)); }
.tours-mega--compact { width: min(680px, calc(100vw - 40px)); }

.hotels-mega {
    width: min(980px, calc(100vw - 36px));
    padding: 0;
    overflow: hidden;
}
.mega-hotels-stage {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    min-height: 380px;
}
.mega-hotel-spotlight {
    position: relative;
    display: block;
    text-decoration: none !important;
    color: #fff !important;
    overflow: hidden;
    isolation: isolate;
    min-height: 380px;
}
.mega-hotel-spotlight::after { display: none !important; }
.mega-hotel-spotlight-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.mega-hotel-spot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms ease;
    filter: saturate(1.06) contrast(1.04);
}
.mega-hotel-spot-img.is-active { opacity: 1; z-index: 1; }
.mega-hotel-spotlight:hover .mega-hotel-spot-img.is-active { transform: scale(1.1); }
.mega-hotel-spotlight-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    min-height: 380px;
    padding: 28px 24px;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, 0.05) 0%,
            rgba(10, 10, 10, 0.25) 48%,
            rgba(10, 10, 10, 0.82) 100%);
}
.mega-hotel-spotlight-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.2vw + 1rem, 1.85rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}
.mega-hotel-spotlight.is-switching .mega-hotel-spotlight-title,
.mega-hotel-spotlight.is-switching .mega-eyebrow {
    animation: megaSpotTextIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mega-hotel-spotlight .mega-spotlight-cta { margin-top: 6px; }
.mega-hotel-spotlight:hover .mega-spotlight-cta { gap: 12px; }
.mega-hotel-side {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(201, 169, 110, 0.12) 0%, transparent 45%),
        linear-gradient(180deg, #fff 0%, #faf7f1 100%);
}
.mega-hotel-side .mega-hotels-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}
.mega-hotel-thumbs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.mega-hotel-thumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 180px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid rgba(15, 15, 15, 0.08);
    background: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .18s, box-shadow .18s;
}
.mega-hotel-thumb.is-active,
.mega-hotel-thumb:hover {
    border-color: rgba(201, 169, 110, 0.55);
    box-shadow: 0 6px 16px rgba(15, 15, 15, 0.08);
}
.mega-hotel-thumb-media {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.mega-hotel-thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mega-hotel-thumb-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mega-hotel-amenities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.mega-hotel-amenities li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--color-ink);
    line-height: 1.3;
    transition: border-color .15s, transform .15s, background .15s;
}
.mega-hotel-amenities li:hover {
    border-color: rgba(201, 169, 110, 0.35);
    background: #fff;
    transform: translateX(2px);
}
.mega-hotel-amenity-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(201, 169, 110, 0.14);
    color: var(--color-gold-dark, #a8894f);
}
.mega-hotel-amenity-icon i { font-size: 14px; }
.mega-hotel-feats-empty { color: var(--color-text-mute); background: transparent !important; }
.mega-hotel-side-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    align-self: flex-start;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #c9a96e 0%, #a8894f 100%);
    color: #1a1612 !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(168, 137, 79, 0.28);
    transition: filter .18s, gap .18s, transform .18s, box-shadow .18s;
}
.mega-hotel-side-cta:hover {
    filter: brightness(1.05);
    gap: 12px;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(168, 137, 79, 0.36);
}
.mega-hotel-side-cta::after { display: none !important; }
.hotels-mega-groups .hotels-mega-group-hotels {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 169, 110, 0.22);
}
.mobile-acc-label {
    display: block;
    padding: 8px 0 2px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-mute);
    font-weight: 700;
}
@media (max-width: 820px) {
    .mega-hotels-stage { grid-template-columns: 1fr; }
    .mega-hotel-spotlight,
    .mega-hotel-spotlight-body { min-height: 240px; }
}

.mega-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 360px;
}

/* Spotlight — sol büyük görsel */
.mega-spotlight {
    position: relative;
    display: block;
    text-decoration: none !important;
    color: #fff !important;
    overflow: hidden;
    isolation: isolate;
    min-height: 100%;
}
.mega-spotlight::after { display: none !important; }
.mega-spotlight-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.mega-spotlight-media img,
.mega-spotlight-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    opacity: 0;
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 400ms ease;
    filter: saturate(1.08) contrast(1.04);
}
.mega-spotlight-media img.is-active,
.mega-spotlight-img.is-active {
    opacity: 1;
    z-index: 1;
}
.mega-spotlight:hover .mega-spotlight-media img.is-active,
.mega-spotlight:hover .mega-spotlight-img.is-active {
    transform: scale(1.14);
    filter: saturate(1.15) contrast(1.06);
}
.mega-spotlight-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    height: 100%;
    min-height: 360px;
    padding: 32px 26px;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, 0.02) 0%,
            rgba(10, 10, 10, 0.28) 42%,
            rgba(10, 10, 10, 0.88) 100%);
    transition: background 300ms ease;
}
.mega-spotlight.is-switching .mega-spotlight-title,
.mega-spotlight.is-switching .mega-spotlight-meta,
.mega-spotlight.is-switching .mega-eyebrow {
    animation: megaSpotTextIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes megaSpotTextIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.category-item.is-preview {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(201, 169, 110, 0.45);
    box-shadow: 0 10px 24px rgba(15, 15, 15, 0.08);
}
.mega-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.22);
    border: 1px solid rgba(201, 169, 110, 0.45);
    color: rgba(232, 214, 168, 0.95);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.mega-spotlight-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}
.mega-spotlight-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}
.mega-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    transition: gap 200ms ease;
}
.mega-spotlight:hover .mega-spotlight-cta { gap: 12px; }

/* Kategori kolonu */
.mega-cats {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(201, 169, 110, 0.10) 0%, transparent 42%),
        linear-gradient(180deg, #fff 0%, #faf7f1 100%);
}
.mega-cats-head,
.mega-hotels-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}
.mega-cats-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-mute);
}
.mega-cats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    flex: 1;
}

.dropdown-top {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}
.dropdown-see-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gold) !important;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-smooth), gap var(--duration-fast) var(--ease-smooth);
}
.dropdown-see-all:hover {
    color: var(--color-ink) !important;
    gap: 10px;
}
.dropdown-see-all::after { display: none !important; }

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
}
.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    text-decoration: none !important;
    color: var(--color-ink) !important;
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid transparent;
    transition:
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}
.category-item:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(201, 169, 110, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 15, 15, 0.08);
}
.category-item::after { display: none !important; }

.cat-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--color-ink);
    color: var(--color-gold);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.cat-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-cream);
    box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.06);
}
.cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.category-item:hover .cat-thumb img { transform: scale(1.08); }
.cat-info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cat-name { font-size: 13.5px; font-weight: 600; color: var(--color-ink); }
.cat-count { font-size: 11px; color: var(--color-text-mute); margin-top: 2px; }

/* Hotels mega — kart grid (sol kolon) */
.mega-hotels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.mega-hotels-grid--single { max-width: none; }
.mega-hotel-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: var(--color-ink) !important;
    background: #fff;
    border: 1px solid rgba(15, 15, 15, 0.06);
    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
}
.mega-hotel-card::after { display: none !important; }
.mega-hotel-card:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 169, 110, 0.4);
    box-shadow: 0 14px 28px rgba(15, 15, 15, 0.1);
}
.mega-hotel-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-cream);
}
.mega-hotel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
.mega-hotel-card:hover .mega-hotel-media img { transform: scale(1.06); }
.mega-hotel-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
}
.mega-hotel-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-ink);
}
.mega-hotel-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-gold);
    text-transform: uppercase;
}
.mega-hotel-tag.tag-partner { color: var(--color-text-mute); }

/* Eski küçük otel listesi (fallback) */
.hotels-dropdown { min-width: 380px; padding: var(--space-3); }
.hotels-list { display: flex; flex-direction: column; gap: var(--space-1); }

.hotel-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    text-decoration: none !important;
    color: var(--color-ink) !important;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--duration-fast) var(--ease-smooth);
}
.hotel-item:hover { background: var(--color-gold-mist); }
.hotel-item::after { display: none !important; }

.hotel-thumb {
    width: 64px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-cream);
}
.hotel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hotel-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-ink);
}
.hotel-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-gold);
    text-transform: uppercase;
}
.hotel-tag.tag-partner { color: var(--color-text-mute); }

.dropdown-footer {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}
.dropdown-empty {
    padding: var(--space-4);
    margin: 0;
    color: var(--color-text-mute);
    font-size: 13px;
    text-align: center;
}

/* Kurumsal — kompakt dropdown */
.corporate-dropdown {
    min-width: 280px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.corporate-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none !important;
    color: var(--color-ink) !important;
    text-transform: none;
    letter-spacing: 0;
    transition: background 160ms ease;
}
.corporate-item::after { display: none !important; }
.corporate-item:hover,
.corporate-item.is-active {
    background: rgba(201, 169, 110, 0.12);
}
.corporate-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
}
.corporate-item-desc {
    font-size: 12px;
    color: var(--color-text-mute);
    font-weight: 400;
}

/* Mega stagger — açılışta içerik kayarak gelsin */
.has-dropdown:hover .mega-spotlight,
.has-dropdown:focus-within .mega-spotlight,
.has-dropdown.is-open .mega-spotlight,
.has-dropdown:hover .mega-cats-head,
.has-dropdown:focus-within .mega-cats-head,
.has-dropdown.is-open .mega-cats-head,
.has-dropdown:hover .mega-hotels-head,
.has-dropdown:focus-within .mega-hotels-head,
.has-dropdown.is-open .mega-hotels-head,
.has-dropdown:hover .category-item,
.has-dropdown:focus-within .category-item,
.has-dropdown.is-open .category-item,
.has-dropdown:hover .mega-hotel-card,
.has-dropdown:focus-within .mega-hotel-card,
.has-dropdown.is-open .mega-hotel-card {
    animation: megaItemIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.has-dropdown:hover .category-item:nth-child(1),
.has-dropdown.is-open .category-item:nth-child(1) { animation-delay: 60ms; }
.has-dropdown:hover .category-item:nth-child(2),
.has-dropdown.is-open .category-item:nth-child(2) { animation-delay: 90ms; }
.has-dropdown:hover .category-item:nth-child(3),
.has-dropdown.is-open .category-item:nth-child(3) { animation-delay: 120ms; }
.has-dropdown:hover .category-item:nth-child(4),
.has-dropdown.is-open .category-item:nth-child(4) { animation-delay: 150ms; }
.has-dropdown:hover .category-item:nth-child(5),
.has-dropdown.is-open .category-item:nth-child(5) { animation-delay: 180ms; }
.has-dropdown:hover .category-item:nth-child(6),
.has-dropdown.is-open .category-item:nth-child(6) { animation-delay: 210ms; }
.has-dropdown:hover .category-item:nth-child(7),
.has-dropdown.is-open .category-item:nth-child(7) { animation-delay: 240ms; }
.has-dropdown:hover .category-item:nth-child(8),
.has-dropdown.is-open .category-item:nth-child(8) { animation-delay: 270ms; }
.has-dropdown:hover .mega-hotel-card:nth-child(1),
.has-dropdown.is-open .mega-hotel-card:nth-child(1) { animation-delay: 70ms; }
.has-dropdown:hover .mega-hotel-card:nth-child(2),
.has-dropdown.is-open .mega-hotel-card:nth-child(2) { animation-delay: 110ms; }
.has-dropdown:hover .mega-hotel-card:nth-child(3),
.has-dropdown.is-open .mega-hotel-card:nth-child(3) { animation-delay: 150ms; }

@keyframes megaItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-panel,
    .mega-spotlight-media img,
    .mega-hotel-media img,
    .cat-thumb img,
    .has-dropdown > .nav-link svg {
        transition: none !important;
    }
    .has-dropdown:hover .mega-spotlight,
    .has-dropdown:hover .category-item,
    .has-dropdown:hover .mega-hotel-card,
    .has-dropdown.is-open .mega-spotlight,
    .has-dropdown.is-open .category-item,
    .has-dropdown.is-open .mega-hotel-card {
        animation: none !important;
    }
}

@media (max-width: 1100px) {
    .mega-layout { grid-template-columns: 240px 1fr; }
    .tours-mega { width: min(860px, calc(100vw - 32px)); }
}
@media (max-width: 1024px) {
    /* Desktop mega menü tablet/mobilde yok — hamburger kullanılıyor */
    .mega-panel { display: none; }
}

/* ============================================================
   5) HEADER ACTIONS — Currency / Lang / WhatsApp / Hamburger
   ============================================================ */
.header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    grid-column: 3;
    justify-self: end;
}

.header-actions-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-actions-icons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    margin-left: 2px;
}

.site-header.scrolled .header-actions-icons,
.site-header.solid .header-actions-icons {
    border-left-color: var(--color-border);
}

/* Dil + para birimi — tek buton */
.lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.lang-flag-svg {
    display: block;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.header-locale {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 36px;
}

.locale-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 12px 0 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    color: var(--color-surface);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    transition: background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast);
}
.locale-trigger:hover {
    background: rgba(255, 255, 255, 0.14);
}
.locale-trigger-lang,
.locale-trigger-cur { font-size: 12px; }
.locale-trigger-sep {
    opacity: 0.45;
    font-weight: 500;
}
.locale-trigger-cur { font-size: 14px; font-weight: 600; }

.locale-caret {
    display: inline-flex;
    align-items: center;
    opacity: 0.75;
    margin-left: 1px;
}
.locale-caret svg { transition: transform var(--duration-normal) var(--ease-smooth); }
.header-locale.is-open .locale-caret svg { transform: rotate(180deg); }

.site-header.scrolled .locale-trigger,
.site-header.solid .locale-trigger {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-ink);
}
.site-header.scrolled .locale-trigger:hover,
.site-header.solid .locale-trigger:hover {
    background: var(--color-cream);
}

.locale-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    max-height: min(72vh, 520px);
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid rgba(201, 169, 110, 0.22);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out),
        visibility var(--duration-normal);
    z-index: var(--z-dropdown);
}
.locale-dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 12px;
}
.header-locale.is-open .locale-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.locale-section + .locale-section {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}
.locale-section-label {
    display: block;
    padding: 2px 8px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted, #8a8176);
}

.lang-option,
.currency-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.lang-option:hover,
.currency-option:hover { background: var(--color-cream); color: var(--color-ink); }
.lang-option.active,
.currency-option.active {
    background: var(--color-gold-mist);
    color: var(--color-gold-deep);
    font-weight: 600;
}
.lang-option .lang-name { flex: 1; }
.lang-option .check { color: var(--color-gold); display: inline-flex; }
.lang-option::after { display: none !important; }

.locale-currencies {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.locale-currencies .currency-option {
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
}
.locale-currencies .currency-option.active {
    border-color: rgba(201, 169, 110, 0.55);
}
.currency-option .cur-sym { font-size: 15px; min-width: 16px; }
.currency-option .cur-code { font-size: 12px; letter-spacing: 0.04em; }

/* Hesap açılır menü */
.header-account {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 36px;
}
.header-account-btn .header-account-caret {
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
}
.header-account.is-open .header-account-caret svg { transform: rotate(180deg); }
.header-account-caret svg { transition: transform 160ms ease; width: 12px; height: 12px; }
.header-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e8d6a8, #c9a96e);
    color: #1a1612;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    flex-shrink: 0;
}
.header-account-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    padding: 10px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 15, 15, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--duration-normal, 200ms) var(--ease-out, ease),
                transform var(--duration-normal, 200ms) var(--ease-out, ease),
                visibility var(--duration-normal, 200ms);
    z-index: var(--z-dropdown, 80);
}
.header-account-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 12px;
}
.header-account.is-open .header-account-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}
.header-account-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}
.header-account-summary-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-ink, #1a1612);
    line-height: 1.2;
}
.header-account-summary-email {
    font-size: 12px;
    color: var(--color-muted, #8a8176);
    word-break: break-all;
}
.header-account-menu a,
.header-account-menu .header-account-fav {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text, #1a1612);
    text-decoration: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.header-account-menu a:hover,
.header-account-menu .header-account-fav:hover {
    background: var(--color-cream, #f6f1e8);
    color: var(--color-ink, #1a1612);
}
.header-account-menu svg { flex-shrink: 0; color: var(--color-gold); }
.header-account-logout {
    margin-top: 6px;
    border-top: 1px solid var(--color-border);
    color: #991b1b !important;
}
.header-account-logout svg { color: #991b1b !important; }
.header-account-logout:hover { background: #fef2f2 !important; }

/* WhatsApp yuvarlak buton (header içi) */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition:
        transform var(--duration-fast) var(--ease-smooth),
        box-shadow var(--duration-fast) var(--ease-smooth);
}
.whatsapp-btn:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}
.whatsapp-btn svg { display: block; }

/* ============================================================
   6) MOBILE TOGGLE — Hamburger (CSS animasyon)
   PHP icon('menu') SVG geliyor. Burada hem SVG'yi hem
   CSS-only varyantı destekleyen kurallar:
   - .mobile-toggle.has-svg → SVG'yi gizleyip kendi 3 çizgisini gösterir (opt-in)
   - default → SVG'yi gösterir (mevcut HTML çalışır)
   ============================================================ */
.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    /* Mobilde transparent header'da bile her arka planda okunabilmesi için
       yarı saydam halka. Scroll edildiğinde glass header'la birlikte sade kalır. */
    background: rgba(15, 15, 15, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 0;
    cursor: pointer;
    color: var(--color-surface);
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    transition:
        background var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth);
}
.mobile-toggle:hover { background: rgba(15, 15, 15, 0.52); }
.site-header.scrolled .mobile-toggle,
.site-header.solid .mobile-toggle {
    color: var(--color-ink);
    background: var(--color-surface);
    border-color: var(--color-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.site-header.scrolled .mobile-toggle:hover,
.site-header.solid .mobile-toggle:hover { background: var(--color-cream); border-color: var(--color-gold); }
.mobile-toggle svg { display: block; }

/* X dönüşümü (mobil menü açıkken) — SVG icon değiştirme yerine
   menü açıkken hamburger butonu ikonu içeride mobile-close butonu
   tarafından kontrol edilir; bu nedenle ek dönüşüm gerekmez */

/* ============================================================
   7) MOBILE MENU
   ============================================================ */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--color-ink);
    color: var(--color-surface);
    z-index: var(--z-mobile-menu);
    display: flex;
    flex-direction: column;
    padding: 80px 28px 28px;
    transform: translateX(100%);
    transition:
        transform var(--duration-slow) var(--ease-out),
        opacity var(--duration-slow) var(--ease-out);
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
}
.mobile-menu.open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.mobile-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--color-surface);
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: background var(--duration-fast) var(--ease-smooth);
}
.mobile-close:hover { background: rgba(255, 255, 255, 0.1); }

.mobile-nav { display: flex; flex-direction: column; gap: 0; }
.mobile-nav > a,
.mobile-nav > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 18px 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-surface);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: -0.005em;
    transition:
        color var(--duration-fast) var(--ease-smooth),
        padding-left var(--duration-normal) var(--ease-smooth);
    opacity: 0;
    transform: translateX(20px);
    cursor: pointer;
    list-style: none;
}
.mobile-nav > details > summary::-webkit-details-marker,
.mobile-nav > details > summary::marker { display: none; }

.mobile-menu.open .mobile-nav > a,
.mobile-menu.open .mobile-nav > details > summary {
    animation: mobileMenuSlideIn 600ms var(--ease-out) forwards;
}
.mobile-menu.open .mobile-nav > *:nth-child(1)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(1)  { animation-delay: 100ms; }
.mobile-menu.open .mobile-nav > *:nth-child(2)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(2)  { animation-delay: 160ms; }
.mobile-menu.open .mobile-nav > *:nth-child(3)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(3)  { animation-delay: 220ms; }
.mobile-menu.open .mobile-nav > *:nth-child(4)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(4)  { animation-delay: 280ms; }
.mobile-menu.open .mobile-nav > *:nth-child(5)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(5)  { animation-delay: 340ms; }
.mobile-menu.open .mobile-nav > *:nth-child(6)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(6)  { animation-delay: 400ms; }
.mobile-menu.open .mobile-nav > *:nth-child(7)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(7)  { animation-delay: 460ms; }
.mobile-menu.open .mobile-nav > *:nth-child(8)  > summary,
.mobile-menu.open .mobile-nav > a:nth-child(8)  { animation-delay: 520ms; }
.mobile-menu.open .mobile-nav > *:nth-child(n+9) > summary,
.mobile-menu.open .mobile-nav > a:nth-child(n+9) { animation-delay: 580ms; }

.mobile-nav > a:hover { color: var(--color-gold); padding-left: 8px; }

/* ── Accordion (Turlar/Oteller/özel-sayfa kategorileri) ── */
.mobile-acc summary { position: relative; }
.mobile-acc summary .mobile-acc-link {
    color: inherit;
    text-decoration: none;
    flex: 1;
    transition: color var(--duration-fast) var(--ease-smooth);
}
.mobile-acc summary .mobile-acc-link:hover { color: var(--color-gold); }
.mobile-acc summary .mobile-acc-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    transition: transform var(--duration-normal) var(--ease-smooth), background var(--duration-fast);
    flex-shrink: 0;
}
.mobile-acc summary:hover .mobile-acc-toggle { background: rgba(255, 255, 255, 0.08); color: var(--color-gold); }
.mobile-acc[open] summary .mobile-acc-toggle { transform: rotate(180deg); color: var(--color-gold); }

.mobile-acc-body {
    display: flex;
    flex-direction: column;
    padding: 4px 0 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(201, 169, 110, 0.25);
    margin-left: 6px;
    animation: mobileAccOpen 320ms var(--ease-out);
}
.mobile-acc-body a {
    display: block;
    padding: 11px 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-smooth), padding-left var(--duration-fast);
}
.mobile-acc-body a:hover { color: var(--color-gold); padding-left: 6px; }

@keyframes mobileAccOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes mobileMenuSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mobile-bottom {
    margin-top: auto;
    padding-top: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mobile-lang-list,
.mobile-currency-list {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-lang-list::-webkit-scrollbar,
.mobile-currency-list::-webkit-scrollbar { display: none; }
.mobile-lang-list a,
.mobile-currency-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    color: var(--color-surface);
    text-decoration: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition:
        background var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth);
}
.mobile-lang-list a:hover,
.mobile-currency-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}
.mobile-lang-list a.active,
.mobile-currency-btn.active {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-ink);
}
.mobile-lang-list .lang-flag-svg { width: 22px; height: 16px; }
.mobile-currency-btn .cur-sym { font-size: 15px; font-weight: 700; }
.mobile-currency-btn .cur-code { font-size: 11px; letter-spacing: 0.05em; }

.mobile-wa-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 16px;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 15px;
    min-height: 56px;
    transition: background var(--duration-fast) var(--ease-smooth);
}
.mobile-wa-cta:hover { background: #1ebe5b; color: #fff; }

/* ============================================================
   8) RESPONSIVE — Menü gizle, hamburger göster
   ============================================================ */
@media (max-width: 1024px) {
    .header-container { gap: 16px; padding-inline: 20px; min-width: 0; }
    .main-nav { display: none; }
    .mobile-toggle { display: inline-flex; flex-shrink: 0; }
    /* Rezervasyon zaten hamburger menüde; header'da taşırıp menü butonunu gizliyor */
    .header-booking-btn { display: none; }
    .header-actions { min-width: 0; }

    .header-actions-meta { display: inline-flex; }
    .lang-switcher,
    .currency-switcher { display: none; }
    .header-locale { display: inline-flex; }
    .header-account { height: 40px; }
    .locale-dropdown { display: none !important; }
    .locale-trigger {
        height: 40px;
        min-height: 40px;
        padding: 0 10px 0 8px;
        gap: 6px;
    }
    .locale-trigger-lang,
    .locale-trigger-sep { display: none; }
    .header-actions-icons {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .site-header { padding: 14px 0; }
    .site-header.scrolled,
    .site-header.solid { padding: 10px 0; }
    .brand-text { display: none; }
    .header-container { gap: 8px; padding-inline: 12px; }
    .header-actions { gap: 6px; flex-shrink: 0; }
    .header-locale { flex-shrink: 0; }
    .whatsapp-btn { width: 40px; height: 40px; }
    .mobile-toggle { width: 40px; height: 40px; }
    .brand-logo--img { height: 42px; max-width: min(46vw, 160px); }
    .site-header.scrolled .brand-logo--img,
    .site-header.solid   .brand-logo--img { height: 38px; max-width: min(42vw, 140px); }
}
@media (max-width: 420px) {
    #siteSearchBtn { display: none; }
}

@media (max-width: 375px) {
    .header-container { padding-inline: 10px; }
}

/* ============================================================
   9) BEYAZ İKON CİLASI
   Hero üstündeki (transparent) header ikonları parlak görsel üzerinde
   okunaklı kalsın; scroll/solid durumda gölge kalkar.
   ============================================================ */
.site-header:not(.scrolled):not(.solid) .main-nav a svg,
.site-header:not(.scrolled):not(.solid) .main-nav .nav-link svg,
.site-header:not(.scrolled):not(.solid) .header-action-btn svg,
.site-header:not(.scrolled):not(.solid) .locale-trigger .locale-caret svg,
.site-header:not(.scrolled):not(.solid) .mobile-toggle svg {
    filter: drop-shadow(0 1px 2px rgba(10, 22, 40, 0.5));
}

/* Mobil dil/para paneli */
.locale-sheet {
    display: none;
}
@media (max-width: 1024px) {
    .locale-sheet {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        pointer-events: none;
        visibility: hidden;
    }
    .locale-sheet.is-open {
        pointer-events: auto;
        visibility: visible;
    }
    .locale-sheet-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        padding: 0;
        background: rgba(10, 14, 20, 0.55);
        opacity: 0;
        transition: opacity 0.22s ease;
    }
    .locale-sheet.is-open .locale-sheet-backdrop { opacity: 1; }
    .locale-sheet-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: min(88vh, 720px);
        overflow: auto;
        background: #fff;
        color: var(--color-ink);
        border-radius: 22px 22px 0 0;
        padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        transform: translateY(110%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 -16px 40px rgba(8, 8, 8, 0.18);
    }
    .locale-sheet.is-open .locale-sheet-panel { transform: none; }
    .locale-sheet-grab {
        width: 42px;
        height: 4px;
        border-radius: 99px;
        background: rgba(0, 0, 0, 0.16);
        margin: 6px auto 10px;
    }
    .locale-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }
    .locale-sheet-head strong {
        font-size: 17px;
        letter-spacing: -0.02em;
    }
    .locale-sheet-x {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: var(--color-cream, #f4efe6);
        color: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .locale-sheet-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #8a8176;
        margin: 10px 0 8px;
    }
    .locale-sheet-langs,
    .locale-sheet-curs {
        display: grid;
        gap: 8px;
    }
    .locale-sheet-langs { grid-template-columns: 1fr 1fr; }
    .locale-sheet-curs { grid-template-columns: 1fr 1fr; }
    .locale-sheet-chip {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--color-border);
        background: #fff;
        color: var(--color-ink);
        text-decoration: none;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        width: 100%;
    }
    .locale-sheet-chip.active {
        background: var(--color-gold-mist);
        border-color: rgba(201, 169, 110, 0.55);
        color: var(--color-gold-deep);
    }
    .locale-sheet-chip .cur-sym { font-size: 18px; min-width: 22px; }
    .mobile-locale-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0 0 18px;
        padding: 14px 16px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .mobile-locale-btn-copy {
        display: flex;
        flex-direction: column;
        gap: 3px;
        flex: 1;
        min-width: 0;
    }
    .mobile-locale-btn-copy strong { font-size: 15px; }
    .mobile-locale-btn-copy small { font-size: 12px; opacity: 0.7; }
    .mobile-locale-btn .locale-caret { opacity: 0.7; }
}

/* >>> footer.css */
/* ============================================================
   v2/footer.css — Footer + WhatsApp floating (FAZ 6)
   Token tabanlı modern footer; mevcut PHP yapısı korunur.
   ============================================================ */

/* ============================================================
   1) SITE FOOTER — temel kapsayıcı
   ============================================================ */
.site-footer {
    position: relative;
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.72);
    padding: clamp(64px, 8vw, 96px) 0 var(--space-6);
    font-size: var(--text-sm);
    overflow: hidden;
}

/* Üst altın gradient çizgi (subtle separator) */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 110, 0.4) 30%,
        rgba(201, 169, 110, 0.6) 50%,
        rgba(201, 169, 110, 0.4) 70%,
        transparent 100%
    );
}

/* ============================================================
   2) FOOTER GRID — 4 kolon (2fr 1fr 1fr 1fr)
   ============================================================ */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    margin-bottom: var(--space-8);
}

/* Marka bölümü (ilk kolon — brand + tanıtım + TÜRSAB) */
.site-footer .brand {
    color: var(--color-surface);
    margin-bottom: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
.site-footer .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-gold);
    color: var(--color-ink);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}
.site-footer .brand > span:not(.brand-mark) {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
}
.site-footer .brand .brand-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--color-gold);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Footer kolonu */
.footer-col {
    display: flex;
    flex-direction: column;
}

/* Kolon başlığı (h4) */
.site-footer h4,
.footer-col-title {
    color: var(--color-surface);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-5);
}

/* Linkler */
.site-footer ul,
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer ul li,
.footer-links li {
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.site-footer ul a,
.footer-links a {
    color: rgba(255, 255, 255, 0.68);
    transition:
        color var(--duration-fast) var(--ease-smooth),
        padding-left var(--duration-normal) var(--ease-smooth);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.site-footer ul a:hover,
.footer-links a:hover {
    color: var(--color-gold);
    padding-left: 4px;
}

/* Marka tanıtım metni */
.footer-about {
    margin-bottom: var(--space-5);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}
.footer-tursab-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-3);
}
.footer-tursab-logo {
    display: block;
    height: 160px;
    width: auto;
    max-width: 100%;
}

/* Sosyal ikonlar */
.footer-social {
    margin-top: var(--space-4);
    display: flex;
    gap: var(--space-3);
}
.footer-social-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.78);
    transition:
        color var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth),
        background var(--duration-fast) var(--ease-smooth);
}
.footer-social-icon:hover {
    color: var(--color-ink);
    background: var(--color-gold);
    border-color: var(--color-gold);
}

/* Adres satırı */
.footer-address {
    margin-top: var(--space-3) !important;
    opacity: 0.78;
    font-size: 13px;
    line-height: 1.55;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}
.footer-address svg { margin-top: 2px; color: var(--color-gold); flex-shrink: 0; }

/* Yasal kolonu */
.footer-legal-list { font-size: 13px; }
.footer-legal-name { color: rgba(255, 255, 255, 0.9); }

/* Footer bottom sağ taraf */
.footer-bottom-right { color: rgba(255, 255, 255, 0.55); }
.footer-partner-link { color: var(--color-gold-bright); font-weight: 500; }
.footer-dot { opacity: 0.4; margin: 0 6px; }
.footer-powered { color: rgba(255, 255, 255, 0.4); font-size: 11px; }
.footer-powered:hover { color: var(--color-gold); }

/* TÜRSAB rozeti */
.tursab-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    border: 1px solid rgba(201, 169, 110, 0.45);
    border-radius: var(--radius-sm);
    color: var(--color-gold-bright);
    font-size: 12px;
    letter-spacing: 0.06em;
    background: rgba(201, 169, 110, 0.05);
}

/* TÜRSAB belge görseli */
.footer-tursab {
    margin-top: var(--space-4);
    display: flex;
}
.footer-tursab a {
    display: inline-block;
    background: var(--color-surface);
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: transform var(--duration-fast) var(--ease-smooth);
}
.footer-tursab a:hover { transform: scale(1.03); }
.footer-tursab img {
    display: block;
    max-height: 90px;
    width: auto;
    max-width: 220px;
}
.footer-tursab .tursab-pdf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 14px;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 600;
}

/* ============================================================
   3) FOOTER BOTTOM — copyright + powered
   ============================================================ */
.footer-bottom {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    font-size: 12px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.7); }
.footer-bottom a:hover { color: var(--color-gold); }

/* ============================================================
   4) WHATSAPP FLOATING (sol alt — kart üstü)
   ============================================================ */
.wa-float {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: var(--z-wa-float);
    width: 56px;
    height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 28px -8px rgba(37, 211, 102, 0.45);
    animation: wa-pulse 3.6s ease-out infinite;
    transition:
        transform var(--duration-fast) var(--ease-bounce),
        box-shadow var(--duration-fast) var(--ease-smooth);
}
.wa-float:hover {
    color: #fff;
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 18px 36px -8px rgba(37, 211, 102, 0.6);
}
.wa-float svg { display: block; }

@keyframes wa-pulse {
    0% {
        box-shadow:
            0 14px 28px -8px rgba(37, 211, 102, 0.45),
            0 0 0 0 rgba(37, 211, 102, 0.42);
    }
    60% {
        box-shadow:
            0 14px 28px -8px rgba(37, 211, 102, 0.45),
            0 0 0 14px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow:
            0 14px 28px -8px rgba(37, 211, 102, 0.45),
            0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { animation: none; }
}

/* Eski "pulse" keyframe alias (geriye uyumluluk) */
@keyframes pulse {
    0% { box-shadow: 0 14px 28px -8px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.6); }
    70% { box-shadow: 0 14px 28px -8px rgba(37,211,102,.5), 0 0 0 18px rgba(37,211,102,0); }
    100% { box-shadow: 0 14px 28px -8px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,0); }
}

/* ============================================================
   5) RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .wa-float {
        width: 50px;
        height: 50px;
        left: 16px;
        bottom: 16px;
    }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(10, 22, 40, 0.97);
    backdrop-filter: blur(12px);
    padding: 16px 0;
    border-top: 1px solid rgba(201, 169, 110, 0.25);
    animation: cookieSlideUp 0.5s ease-out;
    transition: opacity 0.4s, transform 0.4s;
}
@keyframes cookieSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.6;
    flex: 1;
    min-width: 280px;
}
.cookie-text svg {
    flex-shrink: 0;
    color: var(--color-gold, #c9a96e);
    margin-top: 2px;
}
.cookie-text a {
    color: var(--color-gold, #c9a96e);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.cookie-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.cookie-btn-accept {
    background: var(--color-gold, #c9a96e);
    color: #0a1628;
}
.cookie-btn-accept:hover {
    background: #d4b87a;
}
.cookie-btn-info {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.cookie-btn-info:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 640px) {
    .cookie-inner {
        flex-direction: column;
        text-align: center;
    }
    .cookie-text {
        justify-content: center;
    }
    .cookie-actions {
        width: 100%;
        justify-content: center;
    }
}

/* >>> animations.css */
/* ============================================================
   v2/animations.css — Scroll Reveal Sistemi (FAZ 7)
   Native IntersectionObserver + [data-animate] sistemi
   GSAP'tan bağımsız. observer.js ile birlikte çalışır.
   ============================================================ */

/* ============================================================
   1) Genel reveal — [data-animate] varsayılan fade-up
   ============================================================ */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
    will-change: opacity, transform;
}

[data-animate].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ============================================================
   2) Varyantlar
   ============================================================ */
[data-animate="fade"] {
    opacity: 0;
    transform: none;
}
[data-animate="fade"].is-visible {
    opacity: 1;
}

[data-animate="slide-left"] {
    opacity: 0;
    transform: translateX(-40px);
}
[data-animate="slide-left"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

[data-animate="slide-right"] {
    opacity: 0;
    transform: translateX(40px);
}
[data-animate="slide-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

[data-animate="scale"] {
    opacity: 0;
    transform: scale(0.92);
}
[data-animate="scale"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   3) Stagger — Üst kapsayıcıda [data-stagger]; çocuklar nth-child gecikmesi
   ============================================================ */
[data-stagger] > [data-animate]:nth-child(1)  { transition-delay: 0ms; }
[data-stagger] > [data-animate]:nth-child(2)  { transition-delay: 100ms; }
[data-stagger] > [data-animate]:nth-child(3)  { transition-delay: 200ms; }
[data-stagger] > [data-animate]:nth-child(4)  { transition-delay: 300ms; }
[data-stagger] > [data-animate]:nth-child(5)  { transition-delay: 400ms; }
[data-stagger] > [data-animate]:nth-child(6)  { transition-delay: 500ms; }
[data-stagger] > [data-animate]:nth-child(7)  { transition-delay: 600ms; }
[data-stagger] > [data-animate]:nth-child(8)  { transition-delay: 700ms; }
[data-stagger] > [data-animate]:nth-child(9)  { transition-delay: 800ms; }
[data-stagger] > [data-animate]:nth-child(n+10) { transition-delay: 900ms; }

/* ============================================================
   4) Eski .fade-in (site.js IO ile .in ekler) — destekle
   ============================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
}
.fade-in.in {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   5) Reduced motion — TÜM animasyonları kapat
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate="fade"],
    [data-animate="slide-left"],
    [data-animate="slide-right"],
    [data-animate="scale"],
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-stagger] > [data-animate] {
        transition-delay: 0ms !important;
    }
    /* Hero ken-burns + mobile menü kaydırma + wa-pulse — hepsi kapansın */
    .hero-bg,
    .hero-video,
    .mobile-menu.open .mobile-nav > a,
    .mobile-menu.open .mobile-nav > details > summary,
    .wa-float,
    .testimonial-card,
    .card,
    .tour-card,
    .hotel-card,
    .feature-card {
        animation: none !important;
    }
    .hero-bg { transform: none !important; }
}

/* >>> oc-pickers.css */
/* ============================================================
   Otellum public pickers — tarih / stepper / select
   ============================================================ */
:root {
  --oc-gold: #c9a96e;
  --oc-gold-dark: #a8894f;
  --oc-gold-soft: rgba(201, 169, 110, 0.16);
  --oc-ink: #1a1612;
  --oc-mute: #7a7368;
  --oc-line: rgba(26, 22, 18, 0.1);
  --oc-cream: #faf7f1;
  --oc-radius: 14px;
  --oc-shadow: 0 18px 48px rgba(15, 12, 8, 0.18);
  --oc-anim: cubic-bezier(.22, 1, .36, 1);
}

.oc-popup {
  position: absolute;
  z-index: 10040;
  background: #fff;
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 18px;
  box-shadow: var(--oc-shadow), inset 0 1px 0 rgba(255,255,255,.8);
  padding: 14px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s var(--oc-anim), transform .18s var(--oc-anim);
  font-family: inherit;
  color: var(--oc-ink);
}
.oc-popup.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Date field */
.oc-dp-field {
  position: relative;
  display: block;
  width: 100%;
}
.oc-dp-input {
  width: 100%;
  height: 46px;
  padding: 0 40px 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--oc-line) !important;
  background: #fff !important;
  color: var(--oc-ink) !important;
  font: inherit;
  font-size: 14px !important;
  font-weight: 550 !important;
  cursor: pointer;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}
.oc-dp-input:focus {
  border-color: rgba(201, 169, 110, .7) !important;
  box-shadow: 0 0 0 3px var(--oc-gold-soft) !important;
}
.oc-dp-input::placeholder { color: var(--oc-mute); font-weight: 500; }
.oc-dp-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--oc-gold-dark);
  pointer-events: none;
  display: grid;
  place-items: center;
}

.oc-dp { width: 292px; user-select: none; }
.oc-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.oc-dp-title {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -0.01em;
}
.oc-dp-nav {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--oc-cream);
  color: var(--oc-ink);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s, transform .12s;
}
.oc-dp-nav:hover {
  background: var(--oc-gold-soft);
  color: var(--oc-gold-dark);
}
.oc-dp-nav:active { transform: scale(.94); }
.oc-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.oc-dp-wd {
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--oc-mute);
  padding: 6px 0;
}
.oc-dp-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--oc-ink);
  font-size: .86rem;
  font-weight: 550;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s, transform .1s;
}
.oc-dp-cell:hover:not(:disabled) {
  background: var(--oc-gold-soft);
  color: var(--oc-gold-dark);
}
.oc-dp-cell:disabled {
  color: #c8c1b5;
  cursor: not-allowed;
  opacity: .5;
}
.oc-dp-cell.is-other { color: #c8c1b5; }
.oc-dp-cell.is-today {
  box-shadow: inset 0 0 0 1.5px rgba(201, 169, 110, .55);
}
.oc-dp-cell.is-selected {
  background: linear-gradient(145deg, #d4b67a, #b8924f) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(184, 146, 79, .35);
}
.oc-dp-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--oc-line);
}
.oc-dp-btn {
  border: 0;
  background: transparent;
  color: var(--oc-gold-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.oc-dp-btn:hover { background: var(--oc-gold-soft); }

/* Stepper */
.oc-stepper {
  display: inline-flex;
  align-items: center;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--oc-line);
  background: #fff;
  overflow: hidden;
  width: 100%;
  max-width: 160px;
}
.oc-stepper-btn {
  width: 42px;
  height: 100%;
  border: 0;
  background: var(--oc-cream);
  color: var(--oc-ink);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.oc-stepper-btn:hover:not(:disabled) {
  background: var(--oc-gold-soft);
  color: var(--oc-gold-dark);
}
.oc-stepper-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.oc-stepper-value {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--oc-ink);
  letter-spacing: -0.02em;
}

/* Select */
.oc-select {
  position: relative;
  width: 100%;
}
.oc-select-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.oc-select-trigger {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--oc-line);
  background: #fff;
  color: var(--oc-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, box-shadow .18s;
}
.oc-select.is-open .oc-select-trigger,
.oc-select-trigger:focus {
  border-color: rgba(201, 169, 110, .7);
  box-shadow: 0 0 0 3px var(--oc-gold-soft);
  outline: none;
}
.oc-select-ph { color: var(--oc-mute); font-weight: 500; }
.oc-select-chev {
  color: var(--oc-gold-dark);
  display: grid;
  place-items: center;
  transition: transform .18s var(--oc-anim);
  flex-shrink: 0;
}
.oc-select.is-open .oc-select-chev { transform: rotate(180deg); }
.oc-select-dd {
  background: #fff;
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 14px;
  box-shadow: var(--oc-shadow);
  padding: 6px;
  max-height: 260px;
  overflow: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .16s var(--oc-anim), transform .16s var(--oc-anim);
  z-index: 10050;
}
.oc-select-dd.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.oc-select-option {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--oc-ink);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.oc-select-option:hover { background: var(--oc-gold-soft); color: var(--oc-gold-dark); }
.oc-select-option.is-selected {
  background: linear-gradient(145deg, rgba(201,169,110,.22), rgba(201,169,110,.1));
  color: var(--oc-gold-dark);
  font-weight: 700;
}
.oc-select-option.is-disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Hero inquiry bar (premium) ── */
.hero-inquiry {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 max(16px, 4vw) max(22px, env(safe-area-inset-bottom, 0px) + 18px);
  pointer-events: none;
}
.hero-inquiry-form {
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 0;
  max-width: 1240px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: visible;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(250,247,241,.95) 100%);
  border: 1px solid rgba(201, 169, 110, 0.4);
  box-shadow:
    0 28px 64px rgba(8, 8, 8, 0.32),
    0 8px 20px rgba(8, 8, 8, 0.14),
    inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hero-inquiry-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 22px 22px 22px 26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(201,169,110,.18) 0%, transparent 55%),
    linear-gradient(160deg, #1a1612 0%, #2a231c 100%);
  color: #fff;
  position: relative;
}
.hero-inquiry-intro::after {
  content: '';
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201,169,110,.45), transparent);
  display: none;
}
.hero-inquiry-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 214, 168, 0.9);
}
.hero-inquiry-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.15rem, 1.2vw + .8rem, 1.45rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-inquiry-fields {
  display: grid;
  grid-template-columns: 1.1fr .62fr .62fr 1.3fr auto;
  gap: 12px;
  align-items: end;
  padding: 16px 16px 16px 18px;
  min-width: 0;
}
.hero-inquiry-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hero-inquiry-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oc-mute);
}
.hero-inquiry-label svg {
  width: 12px;
  height: 12px;
  color: var(--oc-gold-dark);
  opacity: .85;
}
.hero-inquiry .oc-dp-input,
.hero-inquiry .oc-select-trigger,
.hero-inquiry .oc-stepper {
  height: 48px;
  border-radius: 14px !important;
  border-color: rgba(26,22,18,.1) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.hero-inquiry .oc-stepper {
  max-width: none;
}
.hero-inquiry-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, #2fe074, #1fbe5b);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(31, 190, 91, 0.35);
  transition: transform .18s var(--oc-anim), filter .18s, box-shadow .18s;
}
.hero-inquiry-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(31, 190, 91, 0.4);
}
.hero-inquiry-submit:active { transform: translateY(0); }
.hero-inquiry-submit svg { flex-shrink: 0; }

/* ── Hero category mega picker ── */
.hero-inquiry-field--wide { position: relative; overflow: visible; }
.hero-cat-picker { position: relative; }
.hero-cat-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 12px;
  background: #fff;
  color: #1a1612;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.hero-cat-trigger:hover,
.hero-cat-picker.is-open .hero-cat-trigger {
  border-color: rgba(201,169,110,.8);
  box-shadow: 0 0 0 3px rgba(201,169,110,.18);
}
.hero-cat-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-cat-trigger-text.oc-select-ph { color: #8a8175; font-weight: 500; }
.hero-cat-panel {
  display: none;
  grid-template-columns: minmax(200px, 240px) 1fr;
  width: min(860px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 24px));
  background: #161310;
  color: #f5ead2;
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(8,8,8,.45);
}
.hero-cat-panel.is-open { display: grid; }
.hero-cat-list {
  overflow: auto;
  padding: 10px;
  background: linear-gradient(180deg, #1c1814 0%, #14110e 100%);
  border-right: 1px solid rgba(201,169,110,.18);
}
.hero-cat-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 0 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.hero-cat-item:hover,
.hero-cat-item.is-preview {
  background: rgba(201,169,110,.16);
}
.hero-cat-item.is-selected {
  background: linear-gradient(145deg, rgba(201,169,110,.32), rgba(201,169,110,.12));
}
.hero-cat-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #2a231c;
}
.hero-cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cat-item-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-cat-item-copy strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-cat-item-copy small { font-size: 11px; color: rgba(245,234,210,.65); }
.hero-cat-preview { overflow: auto; min-width: 0; }
.hero-cat-pane { display: none; }
.hero-cat-pane.is-active { display: block; }
.hero-cat-preview-media {
  position: relative;
  height: 168px;
  background: #2a231c center/cover no-repeat;
}
.hero-cat-preview-shade {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 16px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, transparent, rgba(10,8,5,.88));
}
.hero-cat-preview-shade strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.2;
}
.hero-cat-pick-all {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #c9a96e;
  color: #1a1612;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.hero-cat-pick-all:hover { filter: brightness(1.06); }
.hero-cat-tours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}
.hero-cat-tour {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.hero-cat-tour:hover {
  background: rgba(201,169,110,.18);
  border-color: rgba(201,169,110,.35);
}
.hero-cat-tour-media {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #2a231c;
}
.hero-cat-tour-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cat-tour-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hero-cat-tour-copy strong {
  font-size: 13px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-cat-tour-copy small { font-size: 11px; color: rgba(245,234,210,.65); }

.hero--video-only .hero-sound-btn {
  bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 980px) {
  .hero-inquiry {
    padding: 0 12px max(10px, env(safe-area-inset-bottom, 0px) + 10px);
  }
  .hero-inquiry-form {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }
  .hero-inquiry-intro {
    display: none;
  }
  .hero-inquiry-fields {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
  }
  .hero-inquiry-field:first-child {
    grid-column: 1 / -1;
  }
  .hero-inquiry-field--wide,
  .hero-inquiry-submit {
    grid-column: 1 / -1;
  }
  .hero-inquiry .oc-dp-input,
  .hero-inquiry .oc-select-trigger,
  .hero-inquiry .oc-stepper,
  .hero-cat-trigger {
    height: 42px;
    min-height: 42px;
  }
  .hero-inquiry-submit {
    height: 44px;
  }
  .hero-cat-panel {
    grid-template-columns: 1fr;
    width: min(100vw - 24px, 560px);
    max-height: min(72vh, 560px);
  }
  .hero-cat-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(201,169,110,.18);
    padding: 10px 10px 8px;
    -webkit-overflow-scrolling: touch;
  }
  .hero-cat-item {
    flex: 0 0 auto;
    width: 168px;
    margin: 0;
  }
  .hero-cat-preview-media { height: 140px; }
  .hero-cat-tours { grid-template-columns: 1fr; }
  .hero--video-only .hero-sound-btn {
    bottom: calc(200px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 520px) {
  .hero-inquiry-fields { grid-template-columns: 1fr 1fr; }
}

/* Form alanlarında da tutarlı görünüm */
.field .oc-dp-field,
.field .oc-select,
.field .oc-stepper {
  width: 100%;
}
.field .oc-stepper { max-width: none; }

/* Sayfa-özgü stiller */

/* >>> pages/home.css */
/* ============================================================
   v2/pages/home.css — Anasayfa bölüm stilleri
   FAZ 1: site.css'ten taşındı.
   ============================================================ */

/* ── Hero Cinematic Entry Animations ── */
@keyframes heroReveal {
    0% {
        opacity: 0;
        transform: translateY(32px) scale(0.97);
        filter: blur(4px);
    }
    60% {
        opacity: 0.85;
        transform: translateY(-4px) scale(1.005);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
@keyframes heroBadgeReveal {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes heroCtaReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes heroTextShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Uygulama: Hero çocuk elemanları */
.hero-content > .hero-badge {
    opacity: 0;
    animation: heroBadgeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
.hero-content > p.lead {
    opacity: 0;
    animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}
.hero-content > .hero-cta {
    opacity: 0;
    animation: heroCtaReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}
/* CTA içindeki butonlar da stagger olsun */
.hero-content > .hero-cta > .btn:nth-child(1) {
    opacity: 0;
    animation: heroCtaReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
.hero-content > .hero-cta > .btn:nth-child(2) {
    opacity: 0;
    animation: heroCtaReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}

/* Hero title — cinematic reveal + premium gold shimmer on load */
.hero-content > h1 {
    opacity: 0;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 40%,
        rgba(201,169,110,1) 50%,
        rgba(255,255,255,1) 60%,
        rgba(255,255,255,1) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards,
        heroTextShimmer 2.5s ease-in-out 1.4s 1;
}

/* Reduced motion — animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
    .hero-content > .hero-badge,
    .hero-content > h1,
    .hero-content > p.lead,
    .hero-content > .hero-cta,
    .hero-content > .hero-cta > .btn {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
    }
}

/* ── Hero — minimal lüks, tam ekran, dekoratif elemansiz ── */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--color-surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
}
.hero--video-only {
    align-items: stretch;
}
.hero--video.hero--video-only .hero-bg::after {
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, 0.12) 0%,
            rgba(10, 10, 10, 0.05) 45%,
            rgba(10, 10, 10, 0.42) 100%);
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0f0f0f;
    z-index: 0;
    /* CSS-only "ken burns" — hafif, GSAP'a alternatif */
    animation: heroBgZoom 28s ease-out infinite alternate;
    will-change: transform, filter;
    filter: brightness(1.12) saturate(1.15) contrast(1.04);
}
.hero--video .hero-bg {
    animation: none;
    filter: none;
    will-change: auto;
    transform: none;
    background-size: cover;
    background-position: center;
}
.hero--video .hero-bg::after {
    z-index: 2;
    pointer-events: none;
}
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.hero-video.is-playing {
    opacity: 1;
}
.hero-video-menu {
    position: absolute;
    z-index: 5;
    display: none;
    min-width: 150px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 12px;
    background: rgba(15, 15, 15, 0.82);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hero-video-menu.is-open { display: block; }
.hero-video-menu-sound {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
}
.hero-video-menu-sound:hover { background: rgba(255, 255, 255, 0.12); }
.hero-video-menu-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='m22 9-6 6'/%3E%3Cpath d='m16 9 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='m22 9-6 6'/%3E%3Cpath d='m16 9 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-video-menu.is-unmuted .hero-video-menu-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E");
}
@keyframes heroBgZoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1.12); }
}
/* Üstten ferah, alttan metni okutacak kadar gradient */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(15, 15, 15, 0.08) 0%,
            rgba(15, 15, 15, 0.28) 55%,
            rgba(15, 15, 15, 0.70) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: 140px 0 96px;
    max-width: 900px;
}
.hero h1 {
    color: var(--color-surface);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw + 1rem, 6.5rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 var(--space-5);
    text-wrap: balance;
}
.hero p.lead {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.4vw + 0.4rem, 1.35rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    line-height: var(--leading-relaxed);
    margin: 0;
    font-weight: 300;
}
.hero-badge {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 18px;
    background: rgba(201, 169, 110, 0.12);
    border: 1px solid rgba(201, 169, 110, 0.45);
    border-radius: var(--radius-pill);
    color: var(--color-gold-bright);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: var(--space-6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hero-cta {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-7);
    flex-wrap: wrap;
}

/* Ses — video kontrolü */
.hero-sound-btn {
    position: absolute;
    z-index: 6;
    right: max(16px, 3vw);
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(12, 12, 12, 0.45);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background .2s, border-color .2s, transform .2s;
}
.hero-sound-btn:hover {
    background: rgba(12, 12, 12, 0.65);
    border-color: rgba(232, 214, 168, 0.55);
}
.hero-sound-btn .hero-sound-icon--on { display: none; }
.hero-sound-btn.is-on .hero-sound-icon--off { display: none; }
.hero-sound-btn.is-on .hero-sound-icon--on { display: block; }
.hero-sound-label { white-space: nowrap; }
@media (max-width: 560px) {
    .hero-sound-label { display: none; }
    .hero-sound-btn { padding: 11px; right: 14px; }
}


/* Hotel showcase — asymmetric (görsel sol, metin sağ) */
.hotel-showcase {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}
.hotel-showcase-img {
    aspect-ratio: 5/6;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.hotel-showcase-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms var(--ease-smooth);
}
.hotel-showcase-img:hover img { transform: scale(1.03); }
.hotel-showcase h2 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.15;
}
.hotel-showcase .feature-list { list-style: none; padding: 0; margin: 24px 0; }
.hotel-showcase .feature-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}
.hotel-showcase .feature-list li:last-child { border-bottom: 0; }
.hotel-showcase .feature-list .icon-wrap {
    color: var(--color-gold);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Inline style'lardan taşınanlar (FAZ 8) */
.section-center-cta {
    text-align: center;
    margin-top: var(--space-7);
}
.divider-left { margin-left: 0 !important; }
.balloon-feature-meta {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin: var(--space-5) 0 var(--space-6);
    color: rgba(255, 255, 255, 0.9);
}
.balloon-feature-meta span { display: inline-flex; align-items: center; gap: 6px; }
.balloon-feature-meta svg { color: var(--color-gold); }
.balloon-feature-meta strong { color: var(--color-surface); font-weight: 600; }

.hotel-location-meta {
    color: var(--color-text-mute);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.map-wrap-home { aspect-ratio: 16 / 10; }

.cta-block-title { margin-top: var(--space-3); }
.cta-block-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Hotels sayfası — "Tavsiye edilen" pill */
.hotels-recommended-tag {
    display: inline-block;
    position: relative;
    margin: -32px 0 0 24px;
    padding: 8px 18px;
    background: var(--color-gold);
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    z-index: 2;
    box-shadow: var(--shadow-md);
}

/* Stats strip — koyu zemin + altın sayı + sayaç animasyonu */
.stats-strip {
    background: var(--color-ink);
    color: var(--color-surface);
    padding: clamp(56px, 7vw, 88px) 0;
    position: relative;
    overflow: hidden;
}
.stats-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(201, 169, 110, 0.10), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(201, 169, 110, 0.06), transparent 50%);
    pointer-events: none;
}
.stats-strip > .container { position: relative; z-index: 1; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    text-align: center;
}
.stat-item {
    padding: var(--space-3) var(--space-2);
    position: relative;
}
.stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(201, 169, 110, 0.28), transparent);
}
.stat-item .stat-num {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    color: var(--color-gold-bright);
    font-weight: 600;
    line-height: 1;
    margin-bottom: var(--space-3);
    letter-spacing: -0.02em;
    display: block;
}
.stat-item .stat-label {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

/* Balon feature — asymmetric tam genişlik bölüm */
.balloon-feature {
    position: relative;
    color: var(--color-surface);
    padding: clamp(96px, 14vw, 180px) 0;
    overflow: hidden;
}
.balloon-feature-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 0;
}
.balloon-feature-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(15, 15, 15, 0.88) 0%,
        rgba(15, 15, 15, 0.72) 45%,
        rgba(15, 15, 15, 0.25) 100%);
}
.balloon-feature .container { position: relative; z-index: 1; }
.balloon-feature-content { max-width: 620px; }
.balloon-feature-content .eyebrow { color: var(--color-gold-bright); }
.balloon-feature-content h2 {
    color: var(--color-surface);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 var(--space-5);
}
.balloon-feature-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Gallery mosaic — asymmetric büyük + grid */
.gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(160px, 18vw, 220px);
    gap: var(--space-3);
}
.gallery-mosaic .mosaic-item {
    overflow: hidden;
    border-radius: var(--radius-md);
    position: relative;
    cursor: zoom-in;
    display: block;
    background: var(--color-cream);
}
.gallery-mosaic .mosaic-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 15, 15, 0.3) 100%);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-smooth);
    pointer-events: none;
}
.gallery-mosaic .mosaic-item:hover::after { opacity: 1; }
.gallery-mosaic .mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ease-smooth);
}
.gallery-mosaic .mosaic-item:hover img { transform: scale(1.08); }
.gallery-mosaic .m-1 { grid-column: span 2; grid-row: span 2; }
.gallery-mosaic .m-2 { grid-column: span 2; }
.gallery-mosaic .m-3,
.gallery-mosaic .m-4,
.gallery-mosaic .m-5,
.gallery-mosaic .m-6,
.gallery-mosaic .m-7,
.gallery-mosaic .m-8 { grid-column: span 1; }

/* Testimonials — koyu zemin, büyük tırnak, italik metin */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.testimonial-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-6) var(--space-6) var(--space-7);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.9);
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow) var(--ease-smooth),
        background var(--duration-slow) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}
.testimonial-card::before {
    content: '\201C'; /* sol çift tırnak */
    position: absolute;
    top: -10px;
    left: 20px;
    font-family: var(--font-display);
    font-size: 9rem;
    line-height: 1;
    color: rgba(201, 169, 110, 0.18);
    pointer-events: none;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.testimonial-stars {
    color: var(--color-gold-bright);
    display: flex;
    gap: 3px;
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 1;
}
.testimonial-card p {
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    font-size: 1.02rem;
    margin-bottom: var(--space-5);
    line-height: 1.75;
    position: relative;
    z-index: 1;
}
.testimonial-author { position: relative; z-index: 1; }
.testimonial-author strong {
    display: block;
    color: var(--color-surface);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
}
.testimonial-author span {
    color: var(--color-gold-bright);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-top: 2px;
    display: inline-block;
}

/* Map + contact grid (anasayfa) */
.map-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}
.map-contact-grid .map-wrap { box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); overflow: hidden; }
.contact-quick {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.contact-quick > div {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text);
}
.contact-quick > div:last-child { border-bottom: 0; }
.contact-quick a { color: var(--color-ink); font-weight: 500; }
.contact-quick a:hover { color: var(--color-gold); }
.contact-quick svg { color: var(--color-gold); margin-top: 2px; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hotel-showcase { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
    .testimonial-grid { grid-template-columns: 1fr; }
    .map-contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .hero { min-height: 80vh; }
    .hero-content { padding: 80px 0 60px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: 140px 140px 140px 140px; }
    .gallery-mosaic .m-1 { grid-column: span 2; }
}
@media (max-width: 480px) {
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { justify-content: center; }
}

/* ============================================================
   KAMPANYA BÖLÜMÜ — Homepage
   ============================================================ */

.campaign-section,
.campaign-hero-section {
    position: relative;
}

/* Hero'dan hemen sonraki kampanya — daha belirgin */
.campaign-hero-section {
    background: linear-gradient(135deg, #1a1208 0%, #2d1f0e 50%, #1a1208 100%);
    padding: 60px 0 70px;
    margin-top: 0;
}
.campaign-hero-section .section-head {
    text-align: center;
}
.campaign-hero-section .eyebrow {
    color: #F5C842;
}
.campaign-hero-section h2 {
    color: #fff;
    font-size: 2rem;
}
.campaign-hero-section .divider {
    background: #F5C842;
}

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 40px;
}

.campaign-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Fallback background for cards without cover image */
    background: linear-gradient(135deg, #3d2b1f 0%, #5c3d2e 40%, #8b6914 100%);
}
.campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.campaign-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.campaign-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30,20,10,.2) 0%, rgba(30,20,10,.85) 100%);
}

.campaign-card-content {
    position: relative;
    z-index: 1;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
    color: #fff;
}

.campaign-badge-label {
    display: inline-block;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 12px;
    width: fit-content;
    border: 1px solid rgba(255,255,255,.2);
}

.campaign-card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #fff;
}

.campaign-card-desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,.75);
    margin: 0 0 16px;
    line-height: 1.5;
}

.campaign-duration {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.campaign-duration span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.85);
}

.campaign-price-badge {
    background: rgba(200,150,12,.2);
    border: 1px solid rgba(200,150,12,.4);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    text-align: center;
    width: fit-content;
}

.campaign-price-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,.7);
    margin-bottom: 4px;
}

.campaign-price-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #F5C842;
    line-height: 1.2;
}

.campaign-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    gap: 6px;
}
.campaign-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,.85);
}
.campaign-features li svg {
    flex-shrink: 0;
    color: #F5C842;
}

.campaign-card-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.campaign-code-hint {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.1);
    padding: 4px 10px;
    border-radius: 6px;
}
.campaign-code-hint strong {
    font-family: monospace;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .campaign-grid { grid-template-columns: 1fr; gap: 20px; }
    .campaign-card { min-height: 360px; }
    .campaign-card-content { padding: 24px 20px; }
    .campaign-card-title { font-size: 1.25rem; }
    .campaign-price-value { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    .hotel-showcase { gap: 16px; }
}

/* Popüler turlar — öne çıkan ilk kart + yumuşak geçiş */
.home-tours-section { padding-top: clamp(48px, 6vw, 80px); }
.home-tours-grid .tour-card {
    transition:
        transform .45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color .3s ease;
}
.home-tours-grid .tour-card .tour-image img {
    transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-tours-grid .tour-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(15, 15, 15, 0.12);
}
.home-tours-grid .tour-card.is-featured {
    grid-column: span 2;
}
.home-tours-grid .tour-card.is-featured .tour-image {
    aspect-ratio: 16 / 9;
}
.home-tours-grid .tour-card.is-featured .tour-title {
    font-size: clamp(1.2rem, 1.4vw + 1rem, 1.55rem);
}
@media (max-width: 900px) {
    .home-tours-grid .tour-card.is-featured { grid-column: span 1; }
}

/* >>> pages/tours.css */
/* ============================================================
   v2/pages/tours.css — Turlar listesi + tur detay + yorumlar
   FAZ 1: site.css'ten taşındı.
   ============================================================ */

/* ── Tour / Hotel grid — modern (eski class isimleri korunur) ── */
.tour-grid, .hotel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 4vw, 32px);
}
.tour-card, .hotel-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow) var(--ease-smooth);
    display: flex;
    flex-direction: column;
}
.tour-card:hover, .hotel-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.tour-image, .hotel-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-cream);
    display: block;
}
.tour-image img, .hotel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease-smooth);
}
.tour-card:hover .tour-image img,
.hotel-card:hover .hotel-image img { transform: scale(1.05); }

.tour-badge, .hotel-badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background: var(--color-gold);
    color: var(--color-ink);
    padding: 5px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    border-radius: var(--radius-pill);
    z-index: 2;
}
.recommended-badge { background: var(--color-ink); color: var(--color-gold); }

.tour-body, .hotel-body {
    padding: var(--space-5) var(--space-6) var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tour-meta {
    display: flex;
    gap: var(--space-4);
    color: var(--color-text-mute);
    font-size: var(--text-xs);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.tour-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tour-title, .hotel-title {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
    margin: 0 0 var(--space-2);
    text-wrap: balance;
}
.tour-title a, .hotel-title a { color: inherit; }
.tour-title a:hover, .hotel-title a:hover { color: var(--color-gold); }
.tour-desc, .hotel-desc {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0 0 var(--space-4);
    /* 2 satıra clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tour-footer, .hotel-footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.price {
    font-family: var(--font-display);
    color: var(--color-gold-deep);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.price small { font-size: .65em; color: var(--color-text-mute); font-weight: 400; }
.price-from {
    font-size: 10px;
    color: var(--color-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    display: block;
    margin-bottom: 2px;
}
.stars { color: var(--color-gold); display: inline-flex; gap: 2px; }

/* Detail page hero — alt sayfaların hero'su */
.detail-hero {
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 160px 0 60px;
    color: var(--color-surface);
    isolation: isolate;
}
.detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 15, 15, 0.12) 0%,
        rgba(15, 15, 15, 0.42) 60%,
        rgba(15, 15, 15, 0.78) 100%);
    z-index: 0;
}
.detail-hero-content {
    position: relative;
    z-index: 2;
    color: var(--color-surface);
    width: 100%;
    max-width: 900px;
}
.detail-hero-content h1 {
    color: var(--color-surface);
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw + 0.5rem, 4rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
}
.detail-hero-lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 680px;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 14px 0 0;
}
.detail-hero .container { position: relative; z-index: 1; }

/* Tur detay: meta bar + gövde metni */
.detail-meta-bar {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    color: var(--color-text-mute);
    font-size: var(--text-sm);
}
.detail-meta-bar span { display: inline-flex; align-items: center; gap: 6px; }
.detail-meta-bar strong { color: var(--color-ink); font-weight: 600; }
.detail-meta-bar svg { color: var(--color-gold); }

.detail-body-text {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--color-text);
}
.detail-gallery-title { margin-top: var(--space-8); }
.detail-hero-count {
    color: rgba(255, 255, 255, 0.7);
    margin: var(--space-3) 0 0;
    font-size: 13px;
    letter-spacing: 0.05em;
}

/* Tur detay sticky aside (fiyat widget yardimcilari) */
.detail-tel-btn { margin-top: var(--space-3); }
.detail-perks {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--cizgi);
    font-size: 13px;
    color: var(--color-text-mute);
    display: grid;
    gap: var(--space-2);
}
.detail-perks span { display: inline-flex; align-items: center; gap: 6px; }
.detail-perks svg { color: var(--color-success); flex-shrink: 0; }

.mobil-fiyat-btn { white-space: nowrap; }
.alert-bottom { margin-bottom: var(--space-5); }

/* Empty state generic */
.empty-state {
    text-align: center;
    padding: 80px 20px;
}
.empty-state p {
    color: var(--color-text-mute);
    font-size: 16px;
    margin-bottom: var(--space-5);
}
.empty-state-sm {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-mute);
}

/* SSS CTA */
.faq-cta {
    text-align: center;
    margin-top: var(--space-8);
}
.faq-cta p {
    color: var(--color-text-mute);
    margin-bottom: var(--space-3);
}

/* hero-cta inline kompakt varyant */
.hero-cta-tight { margin-top: var(--space-5) !important; gap: var(--space-3) !important; }

.breadcrumb {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-gold-bright); transition: color var(--duration-fast); }
.breadcrumb a:hover { color: var(--color-surface); }
.breadcrumb span { opacity: 0.55; }

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.72fr);
    gap: 28px;
    align-items: start;
}
.detail-card {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.detail-card-sticky { position: sticky; top: 100px; }
.detail-card h3 { margin-top: 0; }
.detail-price { font-family: var(--serif); font-size: 2.4rem; color: var(--navy); font-weight: 600; }
.detail-price small { font-size: .55em; color: var(--muted); }

/* Dahil / Dahil değil — native 2 sütun grid (Bootstrap col-md-6 yerine) */
.dahil-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
}
@media (max-width: 768px) { .dahil-grid { grid-template-columns: 1fr; gap: 14px; } }

.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(15,15,15,0.06);
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-ink, #1a1a1a);
}
.list-check.list-check-x .icon-wrap { color: #b45353; }
.list-check .icon-wrap { color: var(--color-gold-dark, #a8894f); flex-shrink: 0; margin-top: 1px; }
.list-check li:last-child { border-bottom: 0; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin: var(--space-6) 0;
}
.gallery-grid > a,
.gallery-grid > img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--color-cream);
    position: relative;
}
.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease-smooth);
    display: block;
}
.gallery-grid > a:hover img,
.gallery-grid > img:hover { transform: scale(1.04); }

/* Tur yorumları */
.tour-reviews {
    padding: clamp(56px, 8vw, 100px) 0;
    background: var(--subtle);
}
.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}
.reviews-header h2 {
    margin: 0;
    font-family: var(--serif);
    color: var(--navy);
}
.reviews-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.reviews-summary span { color: var(--text); font-size: 14px; }
.reviews-summary strong { color: var(--navy); font-size: 16px; }
.rv-stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rv-stars .star-fill { fill: var(--gold); }
.rv-stars .star-empty { color: rgba(0, 0, 0, 0.18); }

.reviews-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}
.review-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(10, 22, 40, 0.08);
}
.review-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.reviewer { display: flex; align-items: center; gap: 12px; }
.reviewer .avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold);
    display: grid; place-items: center;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}
.reviewer-name { font-weight: 600; color: var(--navy); font-size: 14px; }
.reviewer-meta { font-size: 12px; color: var(--muted); }
.review-card h4 {
    margin: 0 0 8px;
    color: var(--navy);
    font-family: var(--serif);
    font-size: 1.05rem;
}
.review-card p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}
.featured-badge {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--gold);
    color: var(--navy);
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.empty-reviews {
    text-align: center;
    padding: 56px 24px;
    color: var(--muted);
}
.empty-reviews svg {
    color: rgba(0, 0, 0, 0.14);
    margin-bottom: 12px;
}
.empty-reviews p { margin: 0; }

/* Yorum modalı */
/* Yorum modalı — ortalı, scroll'lu, modern */
.review-modal {
    border: 0;
    border-radius: 16px;
    padding: 0;
    max-width: 540px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 48px);
    margin: auto;
    inset: 0;
    box-shadow: 0 30px 80px rgba(10, 22, 40, 0.32);
    background: var(--white);
    color: var(--text);
    overflow: hidden;
}
.review-modal form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}
.review-modal::backdrop {
    background: rgba(10, 22, 40, 0.6);
    backdrop-filter: blur(6px);
}
.review-modal[open] {
    animation: rvModalIn .28s var(--ease);
}
@keyframes rvModalIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.rv-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 16px;
    border-bottom: 1px solid var(--subtle);
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    flex-shrink: 0;
}
.rv-modal-head h3 {
    margin: 0;
    font-family: var(--serif);
    color: var(--navy);
    font-size: 1.45rem;
    letter-spacing: -0.01em;
}
.rv-modal-close {
    background: transparent;
    border: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.rv-modal-close:hover { background: var(--subtle); color: var(--navy); }

.review-modal .rv-body {
    padding: 22px 28px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.review-modal .rv-foot {
    padding: 16px 28px 22px;
    border-top: 1px solid var(--subtle);
    background: #fafbfc;
    flex-shrink: 0;
}
.review-modal .field { margin-bottom: 16px; }
.review-modal .field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.review-modal .field input[type=text],
.review-modal .field input[type=email],
.review-modal .field textarea {
    width: 100%;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.review-modal .field input:focus,
.review-modal .field textarea:focus {
    outline: 0;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(190, 156, 90, 0.15);
}
.review-modal .field textarea { resize: vertical; min-height: 110px; }
.review-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 0;
}
.review-modal .rv-submit { width: 100%; }
.rv-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin: 10px 0 0;
}

/* Yıldız input (puan seçici) */
.star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.18);
    transition: color .15s var(--ease);
    line-height: 1;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--gold); }
.star-input input:focus-visible + label { outline: 2px solid var(--gold); border-radius: 4px; }

/* Tur kartında ortalama puan rozeti */
.tour-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--navy);
    font-weight: 600;
}
.tour-rating-badge svg { color: var(--gold); }
.tour-rating-badge .rating-count { color: var(--muted); font-weight: 400; }

/* ===== TUR KARTI (yeni — Türkçe class isimleri) ===== */
.tur-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5);
}
.tur-kart {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cizgi);
    text-decoration: none;
    color: inherit;
}
.tur-kart:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    color: inherit;
}
.tur-kart-gorsel {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--krem-3);
}
.tur-kart-gorsel img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease);
}
.tur-kart:hover .tur-kart-gorsel img { transform: scale(1.05); }

.tur-kategori-rozet {
    position: absolute;
    top: var(--s3); left: var(--s3);
    background: var(--siyah);
    color: var(--altin);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tur-sure-rozet {
    position: absolute;
    top: var(--s3); right: var(--s3);
    background: rgba(255,255,255,0.92);
    color: var(--metin);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.tur-kart-icerik {
    padding: var(--s5);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tur-kart-baslik {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--metin);
    line-height: 1.3;
    margin: 0 0 var(--s3);
}
.tur-kart-ozet {
    font-size: 14px;
    color: var(--metin-uc);
    line-height: 1.6;
    flex: 1;
    margin: 0 0 var(--s4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tur-kart-fiyat-alan {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    margin-bottom: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--cizgi);
    flex-wrap: wrap;
}
.tur-fiyat-etiket {
    font-size: 11px;
    color: var(--metin-hafif);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tur-fiyat-rakam {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--metin);
}
.tur-fiyat-birim {
    font-size: 12px;
    color: var(--metin-uc);
}
.tur-pricing-mod {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--vurgu-hover);
    background: var(--altin-soft);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: auto;
    font-weight: 600;
}
.tur-kart-alt { display: flex; gap: var(--s2); }
.tur-kart.one-cikan { border: 2px solid var(--altin); }
.tur-kart.one-cikan .tur-kategori-rozet { background: var(--altin); color: var(--siyah); }

/* ===== TUR DETAY — FİYAT WIDGET ===== */
.detail-card-v2 {
    position: sticky;
    top: calc(var(--header-h, 80px) + 14px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(26, 22, 18, 0.07);
    overflow: hidden;
    border: 1px solid rgba(201, 169, 110, 0.22);
}
.detail-card-baslik {
    background: linear-gradient(180deg, #faf8f3 0%, #fff 100%);
    color: var(--color-ink, #1a1612);
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}
.detail-card-baslik-yazi {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold-dark, #a8894f);
    margin: 0;
    font-family: inherit;
}
.detail-card-baslik-h {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-ink, #1a1612);
    line-height: 1.2;
}
.detail-card-tursab {
    font-size: 11px;
    color: var(--color-text-mute);
    margin-top: 2px;
}
.detail-card-body { padding: 16px 16px 14px; }

.fiyat-gosterim {
    text-align: left;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
    margin-bottom: 14px;
}
.fiyat-baslangic {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--metin-hafif);
    margin-bottom: 4px;
}
.fiyat-ana {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    color: var(--metin);
    line-height: 1;
}
.fiyat-ana sup {
    font-size: 18px;
    vertical-align: super;
    color: var(--metin-uc);
}
.fiyat-mod-aciklama {
    font-size: 13px;
    color: var(--metin-uc);
    margin-top: 6px;
}

.secici-grup { margin-bottom: var(--s4); }
.secici-etiket {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--metin);
    margin-bottom: var(--s2);
}

.sayac {
    display: flex;
    align-items: center;
    gap: var(--s3);
    background: var(--krem);
    border-radius: var(--radius);
    padding: var(--s2);
    border: 1px solid var(--cizgi);
}
.sayac-btn {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--cizgi);
    background: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    color: var(--metin);
    font-weight: 700;
}
.sayac-btn:hover:not(:disabled) {
    background: var(--siyah);
    color: #fff;
    border-color: var(--siyah);
}
.sayac-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sayac-deger {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.sayac-bilgi {
    font-size: 11px;
    color: var(--metin-hafif);
    text-align: center;
    margin-top: 4px;
}

.variant-secici {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--s2);
    margin-bottom: var(--s4);
}
.variant-btn {
    padding: var(--s3);
    border: 1.5px solid var(--cizgi);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
    font-family: inherit;
}
.variant-btn:hover { border-color: var(--altin); }
.variant-btn.secili {
    border-color: var(--altin);
    background: var(--altin-soft);
}
.variant-btn-ad {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--metin);
}
.variant-btn-fiyat {
    display: block;
    font-size: 12px;
    color: var(--metin-uc);
    margin-top: 2px;
}

.sure-slider {
    display: flex;
    align-items: center;
    gap: var(--s3);
}
.sure-input {
    width: 80px;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--cizgi);
    border-radius: var(--radius-sm);
    padding: var(--s2) var(--s3);
    font-size: 16px;
}

.ekstra-listesi {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-bottom: var(--s4);
}
.ekstra-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    background: #fff;
}
.ekstra-satir:hover { border-color: var(--altin); background: var(--altin-soft); }
.ekstra-satir.secili { border-color: var(--altin); background: var(--altin-soft); }
.ekstra-ad { font-size: 13px; font-weight: 600; color: var(--metin); }
.ekstra-fiyat { font-size: 13px; color: var(--metin-uc); font-weight: 500; }
.ekstra-satir input[type="checkbox"] { accent-color: var(--altin); }

.fiyat-ozet {
    border-top: 1px solid rgba(201, 169, 110, 0.22);
    padding-top: 10px;
    margin-bottom: 12px;
    background: #faf8f3;
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 169, 110, 0.18);
}
.fiyat-ozet-satir {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-mute);
    padding: 4px 0;
}
.fiyat-ozet-satir.indirim { color: var(--basari); }
.fiyat-ozet-satir.toplam {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-ink);
    padding-top: 8px;
    border-top: 1px solid rgba(201, 169, 110, 0.22);
    margin-top: 6px;
}
.fiyat-ozet-satir.toplam .ozet-tutar {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--color-gold-dark, #a8894f);
}

.mobil-fiyat-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--siyah);
    padding: var(--s3) var(--s5);
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    z-index: 100;
    border-top: 1px solid rgba(201,169,110,0.3);
}
.mobil-fiyat-bar .fiyat-ana { font-size: 22px; color: #fff; }
.mobil-fiyat-bar .fiyat-baslangic { color: rgba(255,255,255,0.5); }

/* ── Responsive ── */
@media (max-width: 1199px) { .tur-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
    .tour-grid, .hotel-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-card-sticky { position: static; }
    .detail-card-v2 { position: static; }
}
@media (max-width: 991px) {
    .mobil-fiyat-bar { display: flex; }
}
@media (max-width: 768px) {
    .tour-grid, .hotel-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-hero { min-height: 380px; padding: 140px 0 40px; }
}
@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .detail-hero { min-height: 300px; padding: 100px 0 30px; }
}
@media (max-width: 767px) { .tur-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .review-modal { border-radius: 14px; max-width: calc(100% - 20px); width: calc(100% - 20px); }
    .review-modal .rv-body, .review-modal .rv-foot { padding-left: 20px; padding-right: 20px; }
    .review-modal .rv-modal-head { padding-left: 20px; padding-right: 20px; }
    .review-modal .form-row { grid-template-columns: 1fr; }
}

/* ===== SADECE İLETİŞİM KARTI (tur detay sayfası) ===== */
.iletisim-card .iletisim-card-body {
    text-align: center;
    padding: var(--s6) var(--s5);
}
.iletisim-card .iletisim-icon-wrap {
    width: 84px;
    height: 84px;
    margin: 0 auto var(--s4);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--altin) 0%, #d4af37 100%);
    color: var(--siyah);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);
}
.iletisim-card .iletisim-baslik {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--siyah);
    margin: 0 0 var(--s3);
    letter-spacing: -0.01em;
}
.iletisim-card .iletisim-aciklama {
    font-size: 14px;
    line-height: 1.55;
    color: var(--metin-hafif);
    margin: 0 0 var(--s5);
}
.iletisim-card .iletisim-btn {
    margin-bottom: var(--s2);
    font-size: 15px;
    padding-top: 14px;
    padding-bottom: 14px;
}
.iletisim-card .iletisim-btn-tel {
    margin-bottom: var(--s4);
}
.iletisim-card .iletisim-perks {
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--cizgi);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.iletisim-card .iletisim-perks span {
    font-size: 12.5px;
    color: var(--metin-hafif);
    display: flex;
    align-items: center;
    gap: 8px;
}
.iletisim-card .iletisim-perks svg {
    color: var(--basari, #16a34a);
    flex: none;
}
.mobil-iletisim-bar .fiyat-ana {
    font-size: 18px;
    color: var(--altin);
}

/* ============================================================
   TUR ROTASI / PROGRAMI (timeline + duraklar)
   ============================================================ */
.tur-rota-blok {
    margin: 0;
    padding: 18px 18px 16px;
    background: #fff;
    border: 1px solid rgba(201, 169, 110, 0.22);
    border-radius: 14px;
}
.rota-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.rota-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--altin, #c9a961), var(--altin-koyu, #b8944f));
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(201,169,97,0.25);
}
.rota-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--metin, #1a1a1a);
    letter-spacing: -0.3px;
}
.rota-count {
    font-size: 13px;
    color: var(--metin-2, #666);
    font-weight: 500;
}

/* Saatli timeline */
.rota-timeline {
    position: relative;
    padding-left: 32px;
}
.rota-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(to bottom, var(--altin, #c9a961), rgba(201,169,97,0.15));
    border-radius: 2px;
}
.rota-item {
    position: relative;
    padding-bottom: 24px;
}
.rota-item:last-child { padding-bottom: 0; }
.rota-item-marker {
    position: absolute;
    left: -32px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--altin, #c9a961);
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(201,169,97,0.12);
}
.rota-item-line {
    display: none;
}
.rota-item-content {
    background: #fff;
    border: 1px solid var(--color-border, #eee);
    border-radius: 12px;
    padding: 16px 18px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.rota-item-content:hover {
    border-color: var(--altin, #c9a961);
    box-shadow: 0 4px 16px rgba(201,169,97,0.1);
}
.rota-item-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--altin, #c9a961);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(201,169,97,0.08);
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.rota-item-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--metin, #1a1a1a);
    line-height: 1.3;
}
.rota-item-desc {
    margin: 0;
    font-size: 14px;
    color: var(--metin-2, #666);
    line-height: 1.6;
}

/* Duraklar (numaralı liste) */
.rota-duraklar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rota-durak {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--color-border, #eee);
    border-radius: 12px;
    padding: 18px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.rota-durak:hover {
    border-color: var(--altin, #c9a961);
    box-shadow: 0 4px 16px rgba(201,169,97,0.1);
}
.rota-durak-num {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--altin, #c9a961), var(--altin-koyu, #b8944f));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(201,169,97,0.2);
}
.rota-durak-body { flex: 1; min-width: 0; }
.rota-durak-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--metin, #1a1a1a);
    line-height: 1.3;
}
.rota-durak-desc {
    margin: 0;
    font-size: 14px;
    color: var(--metin-2, #666);
    line-height: 1.6;
}

/* Serbest metin */
.rota-serbest {
    line-height: 1.75;
    color: var(--metin, #1a1a1a);
    font-size: 15px;
}

@media (max-width: 640px) {
    .tur-rota-blok { padding: 16px; }
    .rota-icon-wrap { width: 40px; height: 40px; border-radius: 10px; }
    .rota-title { font-size: 18px; }
    .rota-item-content { padding: 14px; }
    .rota-durak { padding: 14px; gap: 12px; }
    .rota-durak-num { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
}

/* Mobil sticky bar anchor hedefleri: sabit header altında kalmasın */
#rezervasyon, #fiyatWidget { scroll-margin-top: 96px; }

/* ── Tur detay: bilgi + rezervasyon hizası ── */
.td-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.td-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.td-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(201, 169, 110, 0.28);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink, #1a1612);
}
.td-chip svg { color: var(--color-gold-dark, #a8894f); flex-shrink: 0; }
.td-chip--gold {
    background: rgba(201, 169, 110, 0.12);
    border-color: rgba(201, 169, 110, 0.4);
}
.td-steps {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(201, 169, 110, 0.22);
    border-radius: 14px;
}
.td-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink);
    min-width: 0;
}
.td-steps span {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a1612;
    color: var(--color-gold, #c9a96e);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.td-panel {
    background: #fff;
    border: 1px solid rgba(201, 169, 110, 0.22);
    border-radius: 14px;
    padding: 16px 18px 18px;
}
.td-panel-head { margin-bottom: 12px; }
.td-panel-head .eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold-dark, #a8894f);
    margin-bottom: 4px;
}
.td-panel-head h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0;
    letter-spacing: -0.02em;
}
.td-panel .gallery-grid { margin: 0; }
.td-panel .detail-body-text { margin: 0; }
.td-panel--out { border-color: rgba(180, 83, 83, 0.22); }
.td-widget-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-text-mute);
    text-align: center;
    line-height: 1.45;
}
.td-booking-band {
    padding: 0 0 48px;
}
.td-booking-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(201, 169, 110, 0.28);
    box-shadow: 0 8px 24px rgba(26, 22, 18, 0.05);
}
.td-booking-band-inner h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 4px 0 6px;
    letter-spacing: -0.02em;
}
.td-booking-band-inner p {
    margin: 0;
    color: var(--color-text-mute);
    font-size: 0.92rem;
    max-width: 520px;
}
.td-booking-band-inner .btn { white-space: nowrap; }

@media (max-width: 768px) {
    .td-steps { grid-template-columns: 1fr; }
    .td-booking-band-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .td-booking-band-inner .btn { width: 100%; justify-content: center; }
}

/* >>> pages/other.css */
/* ============================================================
   v2/pages/other.css — Galeri, SSS, iletişim, otel, 404, özel-sayfa, yasal
   FAZ 1: site.css'ten taşındı.
   ============================================================ */

/* Legal pages (Gizlilik, KVKK, Mesafeli Satış, İptal/İade, Kullanım Koşulları) */
.legal-content {
    max-width: 820px;
    margin: 0 auto;
    color: var(--color-text);
    line-height: 1.85;
    font-size: 1.02rem;
}
.legal-content .legal-update {
    color: var(--color-text-mute);
    font-size: 0.92rem;
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.legal-content h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--color-ink);
    margin: var(--space-8) 0 var(--space-4);
    padding-top: var(--space-4);
}
.legal-content h2:first-of-type { margin-top: 0; padding-top: 0; }
.legal-content h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-ink);
    margin: var(--space-6) 0 var(--space-3);
}
.legal-content p {
    margin: 0 0 var(--space-4);
}
.legal-content ul,
.legal-content ol {
    margin: 0 0 var(--space-4) 22px;
}
.legal-content li {
    margin-bottom: var(--space-2);
}
.legal-content a {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content a:hover {
    color: var(--color-gold-bright);
}
.legal-content strong {
    color: var(--color-ink);
}
.legal-content table.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0 var(--space-6);
    font-size: 0.96rem;
}
.legal-table th,
.legal-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.legal-table thead th {
    background: var(--color-cream);
    font-weight: 600;
    color: var(--color-ink);
    font-family: var(--font-display);
}
.legal-table tbody tr:hover {
    background: rgba(201, 169, 110, 0.05);
}

/* Checkout page */
.checkout-wrap {
    max-width: 900px;
    margin: 0 auto;
}
.checkout-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-7);
    align-items: start;
}
@media (max-width: 800px) {
    .checkout-grid { grid-template-columns: 1fr; }
}
.checkout-form-card,
.checkout-summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
}
.checkout-form-card h2,
.checkout-summary-card h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-ink);
    margin: 0 0 var(--space-5);
}
.checkout-field {
    margin-bottom: var(--space-4);
}
.checkout-field label {
    display: block;
    font-weight: 500;
    font-size: 0.92rem;
    margin-bottom: var(--space-2);
    color: var(--color-ink);
}
.checkout-field input,
.checkout-field textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--color-bg);
    transition: border-color var(--duration-fast);
}
.checkout-field input:focus,
.checkout-field textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}
.checkout-kod-field input {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.checkout-kod-opt {
    font-weight: 400;
    color: var(--color-text-mute);
    font-size: 0.85em;
}
.checkout-kod-ipucu {
    margin: var(--space-2) 0 0;
    font-size: 0.85rem;
    color: var(--color-text-mute);
}
.checkout-kod-hata {
    margin: var(--space-2) 0 0;
    font-size: 0.85rem;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}
.checkout-kod-field:has(.checkout-kod-hata) input {
    border-color: #fca5a5;
}
.checkout-indirim-row span:last-child {
    color: #166534;
    font-weight: 600;
}
.checkout-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,0.06));
    font-size: 0.96rem;
}
.checkout-summary-item:last-child { border-bottom: none; }
.checkout-summary-item .item-name {
    flex: 1;
    color: var(--color-text);
}
.checkout-summary-item .item-qty {
    color: var(--color-text-mute);
    margin: 0 var(--space-3);
    font-size: 0.88rem;
}
.checkout-summary-item .item-price {
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
}
.checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 2px solid var(--color-border);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-ink);
}
.checkout-pay-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-gold);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast), transform var(--duration-fast);
}
.checkout-pay-btn:hover {
    background: var(--color-gold-bright);
    transform: translateY(-1px);
}
.checkout-pay-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.checkout-empty {
    text-align: center;
    padding: var(--space-9) var(--space-5);
    color: var(--color-text-mute);
}
.checkout-empty p { margin-bottom: var(--space-5); }
.checkout-kvkk {
    font-size: 0.85rem;
    color: var(--color-text-mute);
    margin-top: var(--space-4);
    line-height: 1.6;
}
.checkout-kvkk a { color: var(--color-gold); }
.paytr-iframe-wrap {
    margin-top: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: clamp(350px, 80vh, 500px);
}
.paytr-iframe-wrap iframe {
    width: 100%;
    min-height: clamp(350px, 80vh, 500px);
    border: none;
}

/* Contact */
.contact-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-bottom: 56px;
}

/* Contact form + map layout (Bootstrap col-lg-7/5 yerine) */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
}
.contact-form-col h2 { margin-top: 0; }
.contact-form-col .contact-form-lead { color: var(--muted); margin-bottom: 24px; }
.contact-map-col { display: flex; flex-direction: column; }
.contact-map { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
    .contact-form-grid { grid-template-columns: 1fr; gap: 32px; }
    .contact-map { aspect-ratio: 16 / 10; }
}
.contact-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-7);
    text-align: center;
    border-radius: var(--radius-lg);
    transition:
        transform var(--duration-slow) var(--ease-smooth),
        border-color var(--duration-slow),
        box-shadow var(--duration-slow);
}
.contact-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.contact-card .icon-wrap {
    width: 60px;
    height: 60px;
    background: var(--color-cream);
    color: var(--color-gold);
    margin: 0 auto var(--space-4);
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.contact-card:hover .icon-wrap {
    background: var(--color-gold);
    color: var(--color-surface);
}
.contact-card h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin-bottom: var(--space-2);
}
.contact-card a { color: var(--color-ink); font-weight: 500; }
.contact-card a:hover { color: var(--color-gold); }

/* Map */
.map-wrap {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* İletişim — çalışma saatleri kartı */
.hours-card {
    background: var(--color-ink);
    color: var(--color-surface);
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: var(--space-5);
    position: relative;
    overflow: hidden;
}
.hours-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(201, 169, 110, 0.14), transparent 45%);
    pointer-events: none;
}
.hours-card > * { position: relative; }
.hours-card .icon-wrap {
    width: 60px;
    height: 60px;
    background: rgba(201, 169, 110, 0.18);
    color: var(--color-gold-bright);
    display: grid;
    place-items: center;
    border-radius: 50%;
}
.hours-card strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-surface);
}
@media (max-width: 768px) {
    .hours-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

/* Özel sayfa içerik */
.ozel-sayfa .ozs-body {
    max-width: 820px;
    margin: 0 auto;
    color: var(--text);
    line-height: 1.75;
    font-size: 1.02rem;
}
.ozel-sayfa .ozs-body h2 {
    margin: 36px 0 14px;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
}
.ozel-sayfa .ozs-body h3 {
    margin: 28px 0 10px;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
}
.ozel-sayfa .ozs-body p { margin: 0 0 16px; }
.ozel-sayfa .ozs-body ul,
.ozel-sayfa .ozs-body ol { margin: 0 0 16px 22px; }
.ozel-sayfa .ozs-body li { margin-bottom: 8px; }
.ozel-sayfa .ozs-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 18px 0;
}
.ozel-sayfa .ozs-body a {
    color: var(--gold);
    text-decoration: underline;
}
.ozel-sayfa .ozs-body blockquote {
    border-left: 3px solid var(--gold);
    padding: 8px 18px;
    color: var(--muted);
    font-style: italic;
    margin: 18px 0;
}
.ozs-subs { margin-top: 60px; }
.ozs-subs-title {
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Playfair Display', serif;
    color: var(--navy);
}
.ozs-subs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.ozs-sub-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.ozs-sub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(10, 22, 40, 0.12);
    border-color: var(--gold);
}
.ozs-sub-img {
    position: relative;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: var(--subtle);
}
.ozs-sub-icon {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255,255,255,0.92);
    color: var(--navy);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.ozs-sub-body { padding: 18px 20px 20px; }
.ozs-sub-body h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
}
.ozs-sub-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gold);
    font-weight: 600;
}

/* 404 / error page (eski - section-dark icin korunur) */
.error-page {
    min-height: 70vh;
    display: grid;
    place-items: center;
    text-align: center;
}
.error-page h1 { margin: 18px 0; }
.error-page p {
    color: rgba(255, 255, 255, 0.7);
    max-width: 520px;
    margin: 0 auto 24px;
}
.error-page .btn { margin-top: 8px; }

/* Hotel detay özel elemanları */
.stars-detail { margin-bottom: var(--space-3); }

/* ── Hotel Özellikler Grid ── */
.hotel-features-title {
    margin-top: var(--space-8);
    margin-bottom: var(--space-5);
}
.hotel-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.hotel-feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-fast) var(--ease-smooth),
        background var(--duration-fast) var(--ease-smooth),
        transform var(--duration-fast) var(--ease-smooth);
}
.hotel-feature-item:hover {
    border-color: var(--color-gold);
    background: rgba(201, 169, 110, 0.08);
    transform: translateY(-2px);
}
.hotel-feature-icon {
    width: 40px;
    height: 40px;
    background: rgba(201, 169, 110, 0.12);
    color: var(--color-gold);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.hotel-feature-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.3;
}

.list-check-cols {
    columns: 2;
    column-gap: 30px;
}
.list-check-cols li { break-inside: avoid; }
@media (max-width: 700px) {
    .list-check-cols { columns: 1; }
    .hotel-features-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.hotel-360-title { margin-top: var(--space-8); margin-bottom: var(--space-5); }

/* Matterport embed — full-width modern container */
.matterport-embed {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
    background: var(--color-ink);
}
.matterport-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.matterport-wrap { aspect-ratio: 16 / 9; }

.hotel-360-placeholder {
    background: var(--color-cream);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: var(--color-text-mute);
}
.hotel-360-icon {
    width: 72px;
    height: 72px;
    background: rgba(201, 169, 110, 0.12);
    color: var(--color-gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto var(--space-4);
}
.hotel-360-ph-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 var(--space-3);
}
.hotel-360-placeholder p {
    margin: 0 auto;
    max-width: 460px;
    color: var(--color-text-soft);
    line-height: 1.7;
}

.hotel-book-card { /* detail-card-sticky türevi */ }
.hotel-book-title { margin-top: var(--space-2); }
.hotel-book-desc {
    color: var(--color-text-mute);
    margin-top: var(--space-3);
    margin-bottom: var(--space-5);
    line-height: 1.6;
}
.hotel-book-cta { margin-top: var(--space-3); }

/* 404 v2 — minimal lüks, krem zemin */
.error-page-v2 {
    min-height: 88vh;
    display: grid;
    place-items: center;
    background: var(--color-cream);
    padding: 120px 0 80px;
    text-align: center;
}
.error-stack { max-width: 600px; margin: 0 auto; }
.error-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}
.error-bignum {
    font-family: var(--font-display);
    font-size: clamp(8rem, 18vw, 16rem);
    line-height: 0.95;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.04em;
}
.error-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw + 0.5rem, 2.2rem);
    color: var(--color-ink);
    margin: 0 0 var(--space-3);
}
.error-desc {
    color: var(--color-text-soft);
    font-size: var(--text-base);
    max-width: 460px;
    margin: 0 auto var(--space-6);
    line-height: 1.7;
}
.error-cta {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* Masonry gallery — modern, hover overlay */
.masonry {
    column-count: 3;
    column-gap: var(--space-3);
}
.masonry-item {
    display: block;
    margin-bottom: var(--space-3);
    break-inside: avoid;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-smooth), box-shadow var(--duration-normal);
    position: relative;
    background: var(--color-cream);
}
.masonry-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.masonry-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 15, 15, 0.35) 100%);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-smooth);
    pointer-events: none;
}
.masonry-item:hover::after { opacity: 1; }
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 600ms var(--ease-smooth);
}
.masonry-item:hover img { transform: scale(1.04); }
.masonry-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.masonry-item:hover .masonry-caption { opacity: 1; transform: none; }

@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 520px) { .masonry { column-count: 1; } }

/* Galeri — banner var; altta görsel / kategori yok */
.galeri-hero {
    min-height: 42vh;
    height: 42vh;
    padding: 140px 0 48px;
}
.galeri-page { padding: 36px 0 72px; }
.galeri-head { max-width: 640px; margin-bottom: 22px; }
.galeri-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem);
    letter-spacing: -0.03em;
    margin: 6px 0 8px;
}
.galeri-head p {
    margin: 0;
    color: var(--color-text-mute);
    font-size: 1rem;
    line-height: 1.55;
}
.galeri-cats { margin-bottom: 28px; flex-wrap: wrap; }
.galeri-cats .filter-tab small {
    margin-left: 6px;
    font-weight: 600;
    opacity: 0.55;
    font-size: 11px;
}
.galeri-groups { display: flex; flex-direction: column; gap: 36px; }
.galeri-group { scroll-margin-top: 96px; }
.galeri-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201, 169, 110, 0.28);
}
.galeri-group-head h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0;
    letter-spacing: -0.02em;
}
.galeri-group-head span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.galeri-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.galeri-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: var(--color-cream, #f6f1e8);
    border: 1px solid rgba(201, 169, 110, 0.18);
}
.galeri-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
.galeri-card:hover img { transform: scale(1.05); }
.galeri-card-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 10px 8px;
    background: linear-gradient(180deg, transparent, rgba(15,15,15,0.72));
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
}
@media (max-width: 1024px) {
    .galeri-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .galeri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .galeri-page { padding-top: calc(var(--header-h, 72px) + 18px); }
}

/* Global Lightbox (FAZ 5) — assets/js/lightbox.js ile */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: var(--z-lightbox);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}
.lightbox-overlay.is-open {
    display: flex;
    opacity: 1;
}
.lightbox-overlay .lb-figure {
    margin: 0;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    pointer-events: none; /* image dışındaki tıklamalar overlay'e geçsin */
}
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox-overlay .lb-caption {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    text-align: center;
    max-width: 90vw;
    margin: 0;
    pointer-events: auto;
}
.lightbox-overlay .lb-close,
.lightbox-overlay .lb-arrow {
    position: fixed;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    padding: 0;
    transition:
        background var(--duration-fast) var(--ease-smooth),
        transform var(--duration-fast) var(--ease-smooth);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.lightbox-overlay .lb-close {
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    font-size: 26px;
}
.lightbox-overlay .lb-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    font-size: 34px;
}
.lightbox-overlay .lb-prev { left: clamp(8px, 2vw, 32px); }
.lightbox-overlay .lb-next { right: clamp(8px, 2vw, 32px); }
.lightbox-overlay .lb-arrow:hover,
.lightbox-overlay .lb-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.06);
}
.lightbox-overlay .lb-arrow:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-overlay.lb-single .lb-prev,
.lightbox-overlay.lb-single .lb-next { display: none; }

@media (max-width: 768px) {
    .lightbox-overlay .lb-arrow {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }
    .lightbox-overlay .lb-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

/* FAQ — modern minimal accordion */
.faq-list {
    border-top: 1px solid var(--color-border);
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    transition: background var(--duration-fast) var(--ease-smooth);
}
.faq-item:hover { background: rgba(201, 169, 110, 0.04); }
.faq-item > summary {
    list-style: none;
    padding: var(--space-5) 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    align-items: center;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-ink);
    transition: color var(--duration-fast) var(--ease-smooth);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { display: none; }
.faq-item > summary:hover { color: var(--color-gold); }
.faq-item .faq-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-cream-soft);
    color: var(--color-ink);
    transition:
        transform var(--duration-normal) var(--ease-smooth),
        background var(--duration-fast),
        color var(--duration-fast);
    flex-shrink: 0;
}
.faq-item[open] > summary { color: var(--color-ink); }
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    background: var(--color-gold);
    color: var(--color-surface);
}
.faq-body {
    padding: 0 0 var(--space-6);
    color: var(--color-text);
    line-height: 1.8;
    animation: faq-open 350ms var(--ease-smooth);
}
.faq-body p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.98rem;
}

@keyframes faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   Hotel Oda Kartları — room-card (modernized)
   ============================================================ */
.hotel-rooms-title { margin-top: var(--space-8); margin-bottom: var(--space-5); }
.hotel-rooms-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-5);
}

.room-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth);
}
.room-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--color-gold);
}

.room-card-image {
    position: relative;
    overflow: hidden;
    min-height: 260px;
}
.room-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slower) var(--ease-smooth);
}
.room-card:hover .room-card-image img {
    transform: scale(1.05);
}

/* Fiyat badge — görselin üst-sağ köşesi */
.room-card-price-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: rgba(15, 15, 15, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.room-card-price-badge small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: .75;
}
.room-card-price-badge strong {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-gold);
}

.room-card-body {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-6);
    gap: var(--space-3);
}
.room-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
    letter-spacing: var(--tracking-tight);
}
.room-card-meta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-text-mute);
}
.room-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.room-card-meta svg,
.room-card-meta .bi { color: var(--color-gold); flex-shrink: 0; }

.room-card-desc {
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin: 0;
}

.room-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.room-card-features li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--color-text-mute);
    background: var(--color-cream-mute);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast);
}
.room-card-features li:hover {
    background: rgba(201, 169, 110, 0.12);
}
.room-card-features li svg,
.room-card-features li .bi { color: var(--color-gold); flex-shrink: 0; }

.room-gallery {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    overflow-x: auto;
    padding-bottom: 4px;
}
.room-gallery a {
    flex-shrink: 0;
    display: block;
    width: 72px;
    height: 54px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-muted);
    transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.room-gallery a:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
}
.room-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-fast);
}
.room-gallery a:hover img { transform: scale(1.08); }

.room-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-muted);
}
.room-card-price {
    display: flex;
    flex-direction: column;
}
.room-card-price small {
    font-size: 11px;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.room-card-price strong {
    font-size: var(--text-lg);
    color: var(--color-ink);
    font-weight: 700;
}

/* Oda kartları — mobil */
@media (max-width: 768px) {
    .room-card {
        grid-template-columns: 1fr;
    }
    .room-card-image {
        min-height: 0;
        aspect-ratio: 16/9;
    }
    .room-card-body {
        padding: var(--space-4);
    }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Üyelik & Hesap sayfaları (Aşama 3) — auth-section / account-section
   Siyah zemin + varak altın çerçeve; editorial bölünmüş düzen.
   ============================================================ */

.auth-section {
    padding: calc(var(--space-9) + 40px) 0 var(--space-10);
    background:
        radial-gradient(circle at 85% 12%, rgba(188,148,86,0.10) 0%, transparent 42%),
        radial-gradient(circle at 8% 88%, rgba(188,148,86,0.07) 0%, transparent 38%),
        var(--color-bg);
}
.auth-shell {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--color-shadow-card);
    overflow: hidden;
}

/* Sol panel — mürekkep siyahı, altın hairline çerçeve */
.auth-panel-intro {
    background:
        radial-gradient(circle at 20% 18%, rgba(218,190,130,0.16) 0%, transparent 45%),
        linear-gradient(160deg, #0F0F0F 0%, #1A1A1A 70%, #141414 100%);
    color: #F5ECD8;
    padding: var(--space-8);
    display: flex;
}
.auth-intro-frame {
    position: relative;
    border: 1px solid rgba(188,148,86,0.45);
    padding: var(--space-8) var(--space-6);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: authRise 700ms var(--ease-smooth) both;
}
.auth-intro-frame::before,
.auth-intro-frame::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--color-gold-bright);
    border-style: solid;
}
.auth-intro-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.auth-intro-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.auth-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-gold-bright);
    margin-bottom: var(--space-4);
}
.auth-intro-title {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.22;
    color: #FBF6E9;
    margin-bottom: var(--space-6);
}
.auth-intro-title em {
    font-style: italic;
    background: var(--gradient-gold-text, linear-gradient(180deg,#B58A3F,#DABE82));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-intro-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}
.auth-intro-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: rgba(245,236,216,0.82);
}
.auth-intro-list svg { color: var(--color-gold); flex: none; }
.auth-intro-mark {
    margin-top: var(--space-7);
    color: var(--color-gold);
    font-size: 20px;
    opacity: 0.85;
}

/* Sağ panel — sekmeler + form */
.auth-panel-form {
    padding: var(--space-8) var(--space-8);
    animation: authRise 700ms var(--ease-smooth) 90ms both;
}
.auth-tabs {
    display: flex;
    gap: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}
.auth-tab {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.15rem;
    color: var(--color-text-mute);
    padding-bottom: 12px;
    position: relative;
    transition: color 160ms var(--ease-smooth);
}
.auth-tab:hover { color: var(--color-ink); }
.auth-tab.active { color: var(--color-ink); }
.auth-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--gradient-gold, linear-gradient(135deg,#DABE82,#8A6A28));
}
.auth-form .alert { margin-bottom: var(--space-4); }
.auth-form .form-row { margin-bottom: 0; }
.auth-fineprint {
    font-size: 0.8rem;
    color: var(--color-text-mute);
    line-height: 1.5;
    margin: 0 0 var(--space-5);
}
.auth-fineprint a { color: var(--color-gold-deep); text-decoration: underline; }
.auth-submit { width: 100%; justify-content: center; }
.auth-switch {
    margin-top: var(--space-5);
    margin-bottom: 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-mute);
}
.auth-switch a { color: var(--color-gold-deep); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

@keyframes authRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-intro-frame, .auth-panel-form { animation: none; }
}

/* ── Hesabım ── */
.account-section {
    padding: calc(var(--space-9) + 40px) 0 var(--space-10);
    background:
        radial-gradient(circle at 90% 0%, rgba(188,148,86,0.08) 0%, transparent 40%),
        var(--color-bg);
}
.account-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    max-width: 1080px;
    margin: 0 auto var(--space-7);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.account-identity {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}
.account-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #e8d6a8, #c9a96e);
    color: #1a1612;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
}
.account-meta {
    color: var(--color-text-mute);
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.account-meta span { display: inline-flex; align-items: center; gap: 6px; }
.account-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.account-stat {
    min-width: 110px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}
.account-stat strong { display: block; font-size: 1.15rem; color: var(--color-ink); }
.account-stat span { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted, #8a8176); }
.account-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.account-shortcuts a,
.account-shortcuts button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.account-shortcuts a:hover,
.account-shortcuts button:hover { border-color: var(--color-gold); color: var(--color-gold-deep, #8a6a32); }
.account-ref-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(251,246,233,0.7);
    margin: 12px 0 8px;
}
input.account-ref-code {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.18);
    color: #FBF6E9;
}
.account-ref-actions { margin-top: 12px; }
.account-ref-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f3e6c8;
    font-weight: 650;
    text-decoration: none;
}
.account-ref-wa:hover { text-decoration: underline; }
.account-otp-wrap { max-width: 1080px; margin: 0 auto var(--space-5); }
.account-profile-card {
    max-width: 1080px;
    margin: 0 auto var(--space-6);
}
.account-profile-lead {
    color: var(--color-text-mute);
    font-size: 0.92rem;
    margin: 0 0 18px;
}
.account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-bottom: 18px;
}
.account-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted, #8a8176);
}
.account-form-grid label span { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.account-form-grid input {
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg, #fff);
    color: var(--color-ink);
}
@media (max-width: 720px) {
    .account-form-grid { grid-template-columns: 1fr; }
}
.account-name {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 600;
    color: var(--color-ink);
    margin: var(--space-2) 0 var(--space-2);
}
.account-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-soft);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    padding: 10px 18px;
    transition: all 160ms var(--ease-smooth);
}
.account-logout:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.account-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.5fr;
    gap: var(--space-6);
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}
.account-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--color-shadow-card);
    padding: var(--space-6);
    animation: authRise 600ms var(--ease-smooth) both;
}
.account-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-4);
}
.account-card h2 svg { color: var(--color-gold); }

/* Referans kodu kartı — altın vurgulu */
.account-ref-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(218,190,130,0.20) 0%, transparent 55%),
        linear-gradient(165deg, #111111 0%, #1A1A1A 100%);
    border-color: rgba(188,148,86,0.5);
    color: #F5ECD8;
}
.account-ref-card h2 { color: #FBF6E9; }
.account-ref-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(245,236,216,0.72);
    margin-bottom: var(--space-5);
}
.account-ref-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.account-ref-usage {
    margin: var(--space-3) 0 0;
    font-size: 0.85rem;
    color: var(--color-text-mute);
}
.account-ref-code {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, 'Playfair Display', serif);
    font-size: 1.5rem;
    letter-spacing: 0.14em;
    color: var(--color-gold-bright);
    background: rgba(188,148,86,0.08);
    border: 1px dashed rgba(218,190,130,0.55);
    padding: 12px 16px;
    user-select: all;
}
.account-copy-btn { flex: none; }

/* Rezervasyon listesi */
.account-rez-card { animation-delay: 80ms; }
.account-empty {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    color: var(--color-text-mute);
}
.account-empty .btn { margin-top: var(--space-3); }
.account-rez-list { display: flex; flex-direction: column; }
.account-rez-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-muted);
    flex-wrap: wrap;
}
.account-rez-item:last-child { border-bottom: 0; }
.account-rez-main {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-width: 0;
}
.account-rez-kod {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: var(--color-gold-deep);
    white-space: nowrap;
}
.account-rez-tur {
    font-weight: 600;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-rez-tarih {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--color-text-mute);
    white-space: nowrap;
}
.account-rez-side {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
}
.account-rez-tutar {
    font-weight: 700;
    color: var(--color-ink);
    white-space: nowrap;
}
.account-rez-durum {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.account-rez-durum--ok   { background: #ECFDF3; color: #166534; border: 1px solid #A7F3C4; }
.account-rez-durum--warn { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.account-rez-durum--bad  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* Checkout — üye bildirimi */
.checkout-uye-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-4);
    padding: 10px 18px;
    font-size: 0.88rem;
    color: var(--color-text-soft);
    background: var(--color-cream-mute);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
.checkout-uye-notice a { color: var(--color-gold-deep); font-weight: 600; }
.checkout-uye-notice a:hover { text-decoration: underline; }
.checkout-uye-notice--in {
    background: rgba(188,148,86,0.10);
    border-color: var(--color-border-gold);
}
.checkout-uye-notice--in svg { color: var(--color-gold-deep); }

/* Header hesap butonu */
a.header-action-btn.header-account-btn { text-decoration: none; }
.header-account-dot {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-gold);
    box-shadow: 0 0 0 2px var(--color-surface);
}
.site-header:not(.scrolled):not(.solid) .header-account-dot { box-shadow: 0 0 0 2px rgba(15,15,15,0.4); }
.mobile-account-link {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mobile-account-link svg { color: var(--color-gold); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-panel-intro { padding: var(--space-6); }
    .auth-intro-frame { padding: var(--space-6) var(--space-5); }
    .auth-panel-form { padding: var(--space-6) var(--space-5); }
    .account-grid { grid-template-columns: 1fr; }
    .account-rez-side { margin-left: 0; }
}

/* ── Genel rezervasyon (/rezervasyon) ── */
.booking-hero--slim { padding: calc(var(--header-h, 80px) + 28px) 0 8px; }
.booking-hero--slim h1 {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 1.5vw + 1rem, 2rem);
    margin: 6px 0 6px;
    letter-spacing: -0.02em;
}
.booking-hero--slim p { margin: 0; color: var(--color-text-mute); max-width: 520px; font-size: 0.95rem; }

.booking-member-band {
    border-bottom: 1px solid rgba(201, 169, 110, 0.25);
    background: linear-gradient(90deg, rgba(201,169,110,0.12), rgba(255,255,255,0.6));
}
.booking-member-band.is-member {
    background: linear-gradient(90deg, rgba(26,22,18,0.92), rgba(42,35,28,0.88));
    color: #fff;
    border-bottom: 0;
}
.booking-member-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    font-size: 13.5px;
    font-weight: 600;
}
.booking-member-band.is-member .booking-member-inner { color: #f5ead2; }
.booking-member-link {
    margin-left: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--color-ink, #1a1612);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
}
.booking-member-link--ghost {
    background: transparent;
    color: var(--color-ink) !important;
    border: 1px solid rgba(15,15,15,0.18);
}
.booking-member-band.is-member .booking-member-link {
    background: #c9a96e;
    color: #1a1612 !important;
}

.booking-page { padding-top: 18px; padding-bottom: 48px; }
.booking-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 22px;
    align-items: start;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.booking-panel-head--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.booking-panel-head h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0;
}
.booking-pick-hint { font-size: 12px; color: var(--color-text-mute); }

.booking-cat-group { margin-bottom: 14px; }
.booking-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(15,15,15,0.06);
    margin-bottom: 6px;
}
.booking-cat-head strong { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-mute); }
.booking-cat-toggle {
    border: 0; background: transparent; cursor: pointer;
    color: var(--color-gold-dark, #a8894f);
    font-size: 12px; font-weight: 700;
}

.booking-tour-list--compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.booking-tour-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.booking-tour-row input { position: absolute; opacity: 0; pointer-events: none; }
.booking-tour-row:hover,
.booking-tour-row.is-checked {
    background: #fff;
    border-color: rgba(201, 169, 110, 0.45);
}
.booking-tour-row-media {
    width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
}
.booking-tour-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.booking-tour-row-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.booking-tour-row-name {
    font-size: 13.5px; font-weight: 650; color: var(--color-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.booking-tour-row-meta { font-size: 11px; color: var(--color-text-mute); }
.booking-tour-row-price {
    font-size: 12.5px; font-weight: 700; color: var(--color-gold-dark, #a8894f);
    white-space: nowrap;
}

.booking-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: calc(var(--header-h, 80px) + 14px);
}
.booking-summary,
.booking-form-card {
    padding: 16px 16px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(201, 169, 110, 0.22);
}
.booking-summary h2,
.booking-form-card .booking-panel-head h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0 0 10px;
}
.booking-summary-lines {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    min-height: 40px;
}
.booking-summary-lines li {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 13px; line-height: 1.3;
}
.booking-summary-empty { color: var(--color-text-mute); font-size: 13px; }
.booking-summary-totals {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(15,15,15,0.08);
    display: flex; flex-direction: column; gap: 6px;
}
.booking-sum-row {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 13px;
}
.booking-sum-row--disc { color: #2f7d4a; }
.booking-sum-row--disc.is-hidden { display: none; }
.booking-sum-row--total {
    font-size: 15px;
    padding-top: 4px;
}
.booking-summary-tip {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--color-text-mute);
    line-height: 1.35;
}
.booking-submit { margin-top: 6px; }
.booking-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--color-text-mute);
    line-height: 1.35;
}
.booking-success { display: flex; gap: 12px; align-items: flex-start; }
.booking-codes { margin: 8px 0 0; }
.booking-success-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 900px) {
    .booking-layout { grid-template-columns: 1fr; }
    .booking-side { position: static; }
}


/* Booking currency + confirm + member flash */
.booking-currency-toggle {
    display: inline-flex;
    border: 1px solid rgba(15,15,15,0.1);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.booking-cur-btn {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-text-mute);
}
.booking-cur-btn.is-active {
    background: var(--color-ink, #1a1612);
    color: #fff;
}
.booking-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.booking-summary-head h2 { margin: 0; }
.booking-summary-cur {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-gold-dark, #a8894f);
}

.booking-member-band.is-promo {
    background: linear-gradient(105deg, #1a1612 0%, #2c241c 55%, #a8894f 160%);
    color: #fff;
    border-bottom: 0;
}
.booking-member-band.is-promo .booking-member-inner,
.booking-member-band.is-member .booking-member-inner {
    padding: 14px 0;
    gap: 14px;
}
.booking-pct-badge {
    flex-shrink: 0;
    min-width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 800;
    background: linear-gradient(145deg, #e8d6a8, #c9a96e);
    color: #1a1612;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.booking-pct-badge--pulse {
    animation: bookingPctPulse 1.8s ease-in-out infinite;
}
@keyframes bookingPctPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.booking-member-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.booking-member-copy strong {
    font-size: 1rem;
    font-family: var(--font-display);
}
.booking-member-copy span {
    font-size: 13px;
    opacity: 0.88;
    font-weight: 500;
}
.booking-member-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.booking-member-band.is-promo .booking-member-link {
    background: #c9a96e;
    color: #1a1612 !important;
}
.booking-member-band.is-promo .booking-member-link--ghost {
    background: transparent;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.35);
}

.booking-success-card {
    max-width: 560px;
    margin: 24px auto;
    text-align: center;
    padding: 36px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(201,169,110,0.28);
    box-shadow: 0 16px 40px rgba(15,15,15,0.06);
}
.booking-success-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(47,125,74,0.12);
    color: #2f7d4a;
}
.booking-success-card h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin: 0 0 8px;
}
.booking-success-codes {
    margin: 18px auto;
    padding: 12px 14px;
    border-radius: 12px;
    background: #faf7f1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.booking-success-codes span { font-size: 12px; color: var(--color-text-mute); }
.booking-success-codes strong { font-size: 1.05rem; letter-spacing: 0.02em; }
.booking-success-disc { font-size: 13px; color: #2f7d4a; }
.booking-success-actions { justify-content: center; }

.booking-confirm[hidden] { display: none !important; }
.booking-confirm {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
}
.booking-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(2px);
}
.booking-confirm-panel {
    position: relative;
    width: min(440px, 100%);
    background: #fff;
    border-radius: 18px;
    padding: 22px 20px 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    animation: bookingConfirmIn 220ms ease;
}
@keyframes bookingConfirmIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.booking-confirm-panel h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 4px;
}
.booking-confirm-lead {
    margin: 0 0 14px;
    color: var(--color-text-mute);
    font-size: 13.5px;
}
.booking-confirm-block .label,
.booking-confirm-meta .label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-mute);
    margin-bottom: 4px;
}
.booking-confirm-block ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.booking-confirm-block li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    padding: 4px 0;
}
.booking-confirm-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.booking-confirm-total {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid rgba(15,15,15,0.08);
}
.booking-confirm-total.is-final {
    font-size: 1.05rem;
    font-weight: 700;
}
.booking-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}
@media (max-width: 600px) {
    .booking-member-inner { align-items: flex-start; }
    .booking-confirm-meta { grid-template-columns: 1fr; }
}

/* >>> pages/guide.css */
/* ============================================================
   v2/pages/guide.css — Rehber sayfaları ve tur/otel sayfalarına eklenen içerik blokları (4 Eki 2026)
   Yeni renk/yazı tipi yok: yalnız tokens.css değerleri; SSS bileşeni (.faq-item) ve kartlar (.tour-card) olduğu gibi kullanılır.
   ============================================================ */

.guide-article {
    max-width: var(--container-prose);
    margin-inline: auto;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}
.guide-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-soft);
}
.guide-article p { margin: 0 0 var(--space-4); }
.guide-article a { color: var(--color-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.guide-article a:hover { color: var(--color-ink); }

.guide-sec { margin-top: var(--space-7); }
.guide-sec:first-child { margin-top: 0; }
.guide-sec h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
    scroll-margin-top: calc(var(--space-9) + var(--space-3));
}
.guide-sec ul,
.guide-sec ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.guide-sec li { margin-bottom: var(--space-2); }

.guide-toc {
    margin: var(--space-5) 0 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-cream-soft);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.guide-toc strong { display: block; margin-bottom: var(--space-2); color: var(--color-ink); }
.guide-toc ul { margin: 0; padding-left: var(--space-5); }
.guide-toc li { margin-bottom: var(--space-1); }

.guide-table-wrap {
    overflow-x: auto;
    margin: var(--space-4) 0 var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.guide-table-wrap:focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 2px; }
.guide-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-snug); }
.guide-table th,
.guide-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.guide-table thead th { background: var(--color-cream-mute); color: var(--color-ink); font-weight: 600; }
.guide-table tbody th { color: var(--color-ink); font-weight: 600; }
.guide-table tbody tr:last-child th,
.guide-table tbody tr:last-child td { border-bottom: 0; }

.guide-note {
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-gold-mist);
    border-left: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-ink);
}

.guide-meta { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-soft); }

.guide-faq { margin-top: var(--space-3); }

/* Kartlar dar kolonda 3'lü ızgaraya sıkışmasın */
.guide-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--space-4); }
.guide-sec--cards { margin-top: var(--space-8); }
.guide-sec--cards h2 { text-align: center; }

.guide-related { margin-top: var(--space-8); }
.guide-related h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--color-ink); margin: 0 0 var(--space-4); }
.guide-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.guide-related a {
    display: block;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth);
}
.guide-related a:hover,
.guide-related a:focus-visible { border-color: var(--color-gold); background: var(--color-gold-mist); }
.guide-related a span { display: block; margin-top: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-soft); }
.guide-related--index { margin-top: 0; }

/* Tur / otel sayfasına eklenen blok (td-panel içinde) */
.td-panel.guide-article { max-width: none; margin-inline: 0; }   /* flex sütunda auto kenar boşluğu genişliği içeriğe (tablo) göre büyütürdü */
.td-panel .guide-sec { margin-top: var(--space-6); }
.td-panel .guide-sec:first-of-type { margin-top: var(--space-4); }
.td-panel .guide-sec h2 { font-size: var(--text-xl); }
.td-panel .guide-lead { font-size: var(--text-base); }

/* Ana sayfadaki rehber bağlantıları */
.guide-related--home { margin-top: 0; }
.guide-related--home > p { margin: var(--space-4) 0 0; text-align: center; }
.guide-related--home > p a { display: inline-block; padding: var(--space-2) 0; border: 0; background: none; color: var(--color-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.guide-related--home > p a:hover { background: none; color: var(--color-ink); }

/* Hakkımızda: mevcut içerikle aynı sütun genişliği ve başlık ölçeği */
.about-extra { max-width: none; margin-inline: 0; }
.about-extra .guide-sec h2 { font-size: var(--text-3xl); font-weight: 600; }

/* Oteller: giriş metni ile otel vitrini arasındaki boşluk */
.hotels-intro { padding-bottom: var(--space-5); }
.hotels-intro + .section { padding-top: var(--space-6); }

/* Tur/otel detay ızgarasında tablo içeren bloklar sütunu genişletmesin (tablo kendi kabında kayar) */
.detail-grid > * { min-width: 0; }
.guide-table-wrap { max-width: 100%; }
.td-col > * { min-width: 0; }