/* =========================================================
   LUXYSAIL PUBLIC — VİTRİN TASARIM TEMELİ (PF-0A)
   =========================================================

   ⚠️ KAPSAM SÖZLEŞMESİ
      Bu dosyadaki HER kural ya `.luxy-public` gövde sınıfının altında ya da
      `.luxy-public-*` ön ekli bir sınıf üzerinde yaşar. Bootstrap sınıflarını
      (.btn, .card, .container, .navbar) EZMEZ — admin ekranları bu dosyayı hiç
      yüklemese de, yükleseydi de davranışları değişmez.

   ⚠️ TOKEN BAĞIMSIZLIĞI
      Marka renkleri burada YENİDEN tanımlanır; `luxysail-brand.css` public
      layout'a dahil DEĞİLDİR. İki dosya arasında CSS değişkeni üzerinden gizli
      bağımlılık kurmuyoruz: public shell tek başına ayakta durur.
      Değerler bilinçli olarak marka paletiyle AYNI (#17216F / #FF8C32 / #E8F1FD).

   🔴 320px KURALI
      Gövdede yatay kaydırma OLMAYACAK. Bu, `overflow-x: hidden` ile GİZLENMEZ —
      taşmaya yol açan desenler (sabit genişlik, negatif margin, min-width'li
      grid kolonu) baştan kullanılmaz. `minmax(0, 1fr)` ve `max-width: 100%`
      bu yüzden ısrarla yazılıdır.
   ========================================================= */

.luxy-public {
    /* --- Palet --- */
    --luxy-public-navy: #17216F;
    --luxy-public-navy-deep: #101841;
    --luxy-public-accent: #FF8C32;
    --luxy-public-accent-strong: #E6761F;
    --luxy-public-sky: #E8F1FD;

    /* --- Yüzeyler --- */
    --luxy-public-bg: #FFFFFF;
    --luxy-public-surface: #FFFFFF;
    --luxy-public-surface-muted: #F6F8FC;
    --luxy-public-surface-elevated: #FFFFFF;

    /* --- Metin --- */
    --luxy-public-text: #1A1E2E;
    --luxy-public-text-muted: #5B6478;
    --luxy-public-text-invert: #FFFFFF;

    /* --- Kenarlık --- */
    --luxy-public-border: #E2E7F0;
    --luxy-public-border-strong: #C9D2E3;

    /* --- Yarıçap --- */
    --luxy-public-radius-sm: 6px;
    --luxy-public-radius: 12px;
    --luxy-public-radius-lg: 20px;
    --luxy-public-radius-pill: 999px;

    /* --- Gölge --- */
    --luxy-public-shadow-sm: 0 1px 2px rgba(16, 24, 65, 0.06);
    --luxy-public-shadow: 0 4px 16px rgba(16, 24, 65, 0.08);
    --luxy-public-shadow-lg: 0 12px 32px rgba(16, 24, 65, 0.12);

    /* --- Boşluk ölçeği (4px tabanlı) --- */
    --luxy-public-space-1: 0.25rem;
    --luxy-public-space-2: 0.5rem;
    --luxy-public-space-3: 0.75rem;
    --luxy-public-space-4: 1rem;
    --luxy-public-space-5: 1.5rem;
    --luxy-public-space-6: 2rem;
    --luxy-public-space-7: 3rem;
    --luxy-public-space-8: 4rem;

    /* --- Genişlikler --- */
    --luxy-public-container-max: 1200px;
    --luxy-public-measure: 68ch;   /* okunabilir satır uzunluğu üst sınırı */
    --luxy-public-gutter: var(--luxy-public-space-4);

    /* --- Hareket --- */
    --luxy-public-duration-fast: 120ms;
    --luxy-public-duration: 220ms;
    --luxy-public-duration-slow: 420ms;
    --luxy-public-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --luxy-public-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Katman --- */
    --luxy-public-z-header: 1030;
    --luxy-public-z-skip: 1080;

    /* --- Ölçüler --- */
    --luxy-public-header-height: 64px;

    background-color: var(--luxy-public-bg);
    color: var(--luxy-public-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    line-height: 1.6;

    /*
       🔴 BURADA `overflow-x: hidden` (ya da `clip`) YOK — BİLİNÇLİ.
          İkisi de taşmayı KIRPAR, yani 320px'te bir bileşen gövdeyi genişlettiğinde
          belirti kaybolur ve hata sessizce yaşamaya devam eder. Taşma olmaması
          desenle sağlanır: grid'lerde `minmax(0, 1fr)`, esnek çocuklarda
          `min-width: 0`, başlıklarda `overflow-wrap: break-word`, düğme
          satırlarında `flex-wrap`. Yatay kaydırma çubuğu görünürse bu bir HATADIR
          ve maskelenmez — kaynağı bulunur.
    */
}

/* 📏 max-width:100% zinciri — taşmanın en sık kaynağı medya ve gömülü içerik. */
.luxy-public img,
.luxy-public svg,
.luxy-public video,
.luxy-public iframe,
.luxy-public table {
    max-width: 100%;
}

.luxy-public img,
.luxy-public svg,
.luxy-public video {
    height: auto;
}

/* =========================================================
   ♿ ODAK GÖRÜNÜRLÜĞÜ
   ⚠️ outline KALDIRILMAZ. Klavye kullanıcısı için tek yol göstergesi budur.
   ========================================================= */

.luxy-public :focus-visible {
    outline: 3px solid var(--luxy-public-accent);
    outline-offset: 2px;
    border-radius: var(--luxy-public-radius-sm);
}

/* ♿ İçeriğe atla — odaklanana kadar görünmez, ama DOM'da ve okunabilir. */
.luxy-public-skip {
    position: absolute;
    left: var(--luxy-public-space-4);
    top: calc(-1 * var(--luxy-public-space-8));
    z-index: var(--luxy-public-z-skip);
    padding: var(--luxy-public-space-2) var(--luxy-public-space-4);
    background-color: var(--luxy-public-navy);
    color: var(--luxy-public-text-invert);
    border-radius: var(--luxy-public-radius-sm);
    text-decoration: none;
    transition: top var(--luxy-public-duration-fast) var(--luxy-public-ease);
}

    .luxy-public-skip:focus,
    .luxy-public-skip:focus-visible {
        top: var(--luxy-public-space-4);
        color: var(--luxy-public-text-invert);
    }

/* ♿ Yalnız ekran okuyucu. */
.luxy-public-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   KAPSAYICI
   ⚠️ Bootstrap `.container` KULLANILMADI: kırılma noktalarında sabit genişliğe
      atlıyor, vitrinde akıcı + tek üst sınır istiyoruz.
   ========================================================= */

.luxy-public-container {
    width: 100%;
    max-width: var(--luxy-public-container-max);
    margin-inline: auto;
    /* 📱 safe-area: iOS yatay çentik/köşe payı; yoksa 0px'e düşer. */
    padding-inline: max(var(--luxy-public-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

.luxy-public-main {
    display: block;
    min-height: 40vh;
}

/* =========================================================
   TİPOGRAFİ
   ⚠️ clamp() ile akışkan ölçek: 320px'te de 1440px'te de ayrı medya sorgusu
      gerekmez. Alt sınırlar 320px'te taşmayacak şekilde seçildi.
   ========================================================= */

.luxy-public-hero-title {
    margin: 0 0 var(--luxy-public-space-4);
    font-size: clamp(1.75rem, 1.15rem + 3vw, 3.25rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--luxy-public-navy);
    /* 🔴 Uzun kelime taşmasını keser — 320px'te başlık gövdeyi genişletemez. */
    overflow-wrap: break-word;
}

.luxy-public-hero-lead {
    margin: 0;
    max-width: var(--luxy-public-measure);
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
    color: var(--luxy-public-text-muted);
}

.luxy-public-section-title {
    margin: 0 0 var(--luxy-public-space-3);
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    line-height: 1.25;
    font-weight: 700;
    color: var(--luxy-public-navy);
    overflow-wrap: break-word;
}

.luxy-public-section-lead {
    margin: 0 0 var(--luxy-public-space-6);
    max-width: var(--luxy-public-measure);
    color: var(--luxy-public-text-muted);
}

/* =========================================================
   BÖLÜM (SECTION) BOŞLUKLARI
   ========================================================= */

.luxy-public-section {
    padding-block: clamp(var(--luxy-public-space-6), 4vw, var(--luxy-public-space-8));
}

.luxy-public-section-muted {
    background-color: var(--luxy-public-surface-muted);
    border-block: 1px solid var(--luxy-public-border);
}

/* =========================================================
   HERO
   ⚠️ Görsel YOK: PF-0A'da gerçek medya bulunmuyor, sahte stok görsel konmadı.
      Zemin gradyanı geçici değil — görsel geldiğinde onun ALTINDA kalacak katman.
   ========================================================= */

.luxy-public-hero {
    padding-block: clamp(var(--luxy-public-space-7), 7vw, 6rem);
    background-image: linear-gradient(160deg, var(--luxy-public-sky) 0%, #FFFFFF 100%);
    border-bottom: 1px solid var(--luxy-public-border);
}

.luxy-public-hero-actions {
    display: flex;
    flex-wrap: wrap;   /* 📱 320px'te alt alta iner, taşmaz. */
    gap: var(--luxy-public-space-3);
    margin-top: var(--luxy-public-space-5);
}

/* =========================================================
   DÜĞMELER / CTA
   ⚠️ `.btn` DEĞİL: Bootstrap düğme sınıfını ezmek admin'i de etkileme riski taşır.
   ========================================================= */

.luxy-public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--luxy-public-space-2);
    /* ♿ 44px dokunma hedefi (WCAG 2.5.5 hedefi). */
    min-height: 44px;
    padding: var(--luxy-public-space-3) var(--luxy-public-space-5);
    border: 1px solid transparent;
    border-radius: var(--luxy-public-radius-pill);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    color: var(--luxy-public-navy);
    transition: background-color var(--luxy-public-duration) var(--luxy-public-ease),
                border-color var(--luxy-public-duration) var(--luxy-public-ease),
                color var(--luxy-public-duration) var(--luxy-public-ease),
                transform var(--luxy-public-duration) var(--luxy-public-ease);
}

.luxy-public-btn-accent {
    background-color: var(--luxy-public-accent);
    border-color: var(--luxy-public-accent);
    color: #2A1500;   /* ♿ Turuncu üstünde beyaz yeterli kontrast vermiyor. */
}

    .luxy-public-btn-accent:hover:not(:disabled) {
        background-color: var(--luxy-public-accent-strong);
        border-color: var(--luxy-public-accent-strong);
        color: var(--luxy-public-text-invert);
    }

.luxy-public-btn-ghost {
    border-color: var(--luxy-public-border-strong);
    color: var(--luxy-public-navy);
}

    .luxy-public-btn-ghost:hover {
        background-color: var(--luxy-public-sky);
        color: var(--luxy-public-navy);
    }

/* ⚠️ Devre dışı + "henüz yok" durumları AYNI görünür ama farklı semantiktir:
      :disabled gerçekten pasif bir <button>, [aria-disabled] ise hedefi henüz
      var olmayan bir <a> (JS tıklamayı engeller). */
.luxy-public-btn:disabled,
.luxy-public-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   HEADER
   ========================================================= */

.luxy-public-header {
    position: sticky;
    top: 0;
    z-index: var(--luxy-public-z-header);
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--luxy-public-border);
    /* 📱 iOS üst çentik payı. */
    padding-top: env(safe-area-inset-top);
}

.luxy-public-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--luxy-public-space-4);
    min-height: var(--luxy-public-header-height);
}

.luxy-public-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-2);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--luxy-public-navy);
    text-decoration: none;
    white-space: nowrap;
}

    .luxy-public-brand i {
        font-size: 1.5rem;
        color: var(--luxy-public-accent);
    }

.luxy-public-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ♿ 44×44 dokunma hedefi. */
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--luxy-public-border-strong);
    border-radius: var(--luxy-public-radius-sm);
    color: var(--luxy-public-navy);
    font-size: 1.375rem;
    cursor: pointer;
}

.luxy-public-nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--luxy-public-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.luxy-public-nav-link {
    display: inline-block;
    padding: var(--luxy-public-space-2) var(--luxy-public-space-3);
    border-radius: var(--luxy-public-radius-sm);
    color: var(--luxy-public-text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--luxy-public-duration) var(--luxy-public-ease),
                color var(--luxy-public-duration) var(--luxy-public-ease);
}

    .luxy-public-nav-link:hover {
        background-color: var(--luxy-public-sky);
        color: var(--luxy-public-navy);
    }

/* ⚠️ Hedefi henüz olmayan bağlantı: görünürde soluk, davranışta engelli.
      Gizlemiyoruz — V1 kapsamının ne olacağı misafire belli olsun. */
.luxy-public-nav-link[aria-disabled="true"],
.luxy-public-footer-list a[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- 📱 MOBİL ÇEKMECE (< 992px) --- */
@media (max-width: 991.98px) {
    .luxy-public-nav {
        /* ⚠️ display:none DEĞİL — açılırken geçiş yapılabilsin ve
              `hidden` niteliği tek doğruluk kaynağı kalsın. */
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--luxy-public-space-3);
        padding: var(--luxy-public-space-4) var(--luxy-public-gutter);
        background-color: var(--luxy-public-surface);
        border-bottom: 1px solid var(--luxy-public-border);
        box-shadow: var(--luxy-public-shadow);
    }

        /* 🔴 Kapalı durum `hidden` niteliğiyle yönetilir (JS yazar).
              CSS sınıfı + nitelik ikilisi olsaydı iki doğruluk kaynağı olurdu. */
        .luxy-public-nav[hidden] {
            display: none;
        }

    .luxy-public-nav-list {
        flex-direction: column;
        align-items: stretch;
    }

    .luxy-public-nav-link {
        padding: var(--luxy-public-space-3);
    }

    .luxy-public-search-cta {
        width: 100%;
    }

    .luxy-public-header-inner {
        position: relative;
        flex-wrap: wrap;
    }
}

/* --- 🖥️ MASAÜSTÜ (≥ 992px) --- */
@media (min-width: 992px) {
    .luxy-public-nav-toggle {
        display: none;
    }

    .luxy-public-nav {
        display: flex;
        align-items: center;
        gap: var(--luxy-public-space-4);
    }

        /* 🔴 Masaüstünde `hidden` niteliği YOK SAYILIR: kullanıcı mobilde menüyü
              kapatıp pencereyi genişlettiğinde navigasyon kaybolmasın.
              (JS ayrıca breakpoint geçişinde niteliği temizler.) */
        .luxy-public-nav[hidden] {
            display: flex;
        }
}

/* =========================================================
   IZGARA (GRID)
   🔴 minmax(0, 1fr): `1fr` tek başına içerik min-width'inden büyüyerek 320px'te
      gövdeyi taşırır. Bu satır kozmetik değil, taşma korumasıdır.
   ========================================================= */

.luxy-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--luxy-public-space-5);
}

/* =========================================================
   KART YÜZEYİ
   ========================================================= */

.luxy-public-card {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* 🔴 grid/flex çocuğunun taşmasını kesen satır. */
    background-color: var(--luxy-public-surface-elevated);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius-lg);
    box-shadow: var(--luxy-public-shadow-sm);
    overflow: hidden;
    transition: transform var(--luxy-public-duration) var(--luxy-public-ease-out),
                box-shadow var(--luxy-public-duration) var(--luxy-public-ease-out);
}

    .luxy-public-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--luxy-public-shadow-lg);
    }

.luxy-public-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--luxy-public-space-3);
    padding: var(--luxy-public-space-5);
}

.luxy-public-card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--luxy-public-navy);
    overflow-wrap: break-word;
}

.luxy-public-card-text {
    margin: 0;
    color: var(--luxy-public-text-muted);
}

/* =========================================================
   ROZETLER
   ⚠️ Renk TEK BAŞINA anlam taşımaz — metin her zaman yazılıdır (♿ WCAG 1.4.1).
   ========================================================= */

.luxy-public-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luxy-public-space-2);
}

.luxy-public-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-1);
    padding: 0.2rem var(--luxy-public-space-3);
    border: 1px solid transparent;
    border-radius: var(--luxy-public-radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
}

.luxy-public-badge-included {
    background-color: #E7F6EC;
    border-color: #BFE6CC;
    color: #1B5E33;
}

.luxy-public-badge-extra {
    background-color: #FFF1E2;
    border-color: #FFD3A8;
    color: #8A4A0B;
}

.luxy-public-badge-neutral {
    background-color: var(--luxy-public-sky);
    border-color: var(--luxy-public-border-strong);
    color: var(--luxy-public-navy);
}

/* =========================================================
   FİYAT GÖSTERİMİ
   🔴 "Fiyat tanımlı değil" ile "0" AYNI ŞEY DEĞİLDİR. Tanımsız fiyat sessizce
      0 ya da boş gösterilmez; ayrı bir görsel durumu vardır.
   ========================================================= */

.luxy-public-price {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--luxy-public-navy);
}

.luxy-public-price-empty {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--luxy-public-text-muted);
}

/* =========================================================
   DURUM SATIRI (geliştirme görünürlüğü)
   ========================================================= */

.luxy-public-status {
    display: flex;
    align-items: flex-start;
    gap: var(--luxy-public-space-2);
    max-width: var(--luxy-public-measure);
    margin: 0;
    padding: var(--luxy-public-space-4);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius);
    background-color: var(--luxy-public-surface);
}

    .luxy-public-status i {
        flex: 0 0 auto;
        font-size: 1.25rem;
        line-height: 1.4;
    }

.luxy-public-status-ok {
    border-color: #BFE6CC;
    background-color: #F2FBF5;
    color: #1B5E33;
}

.luxy-public-status-pending {
    border-color: var(--luxy-public-border-strong);
    background-color: var(--luxy-public-surface-muted);
    color: var(--luxy-public-text-muted);
}

/* =========================================================
   FOOTER
   ========================================================= */

.luxy-public-footer {
    margin-top: var(--luxy-public-space-8);
    padding-block: var(--luxy-public-space-7) var(--luxy-public-space-5);
    /* 📱 iOS alt gezinme çubuğu payı. */
    padding-bottom: calc(var(--luxy-public-space-5) + env(safe-area-inset-bottom));
    background-color: var(--luxy-public-navy-deep);
    color: rgba(255, 255, 255, 0.78);
}

.luxy-public-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--luxy-public-space-6);
}

.luxy-public-brand-footer {
    color: var(--luxy-public-text-invert);
}

.luxy-public-footer-tagline {
    margin: var(--luxy-public-space-2) 0 0;
    color: rgba(255, 255, 255, 0.65);
}

.luxy-public-footer-heading {
    margin: 0 0 var(--luxy-public-space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-text-invert);
}

.luxy-public-footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--luxy-public-space-2);
}

    .luxy-public-footer-list a {
        color: rgba(255, 255, 255, 0.78);
        text-decoration: none;
    }

        .luxy-public-footer-list a:hover {
            color: var(--luxy-public-text-invert);
            text-decoration: underline;
        }

.luxy-public-footer-muted {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
}

.luxy-public-footer-bottom {
    margin-top: var(--luxy-public-space-6);
    padding-top: var(--luxy-public-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ♿ Footer koyu zeminde odak halkası turuncu kalır — beyaz olsa zemin/halka
      ayrımı düşük kontrastta kaybolurdu. */
.luxy-public-footer :focus-visible {
    outline-color: var(--luxy-public-accent);
}

/* =========================================================
   HAREKET (REVEAL)

   🔴 JS ÇALIŞMAZSA İÇERİK GÖRÜNÜR OLMALI.
      Bu yüzden başlangıç durumu `[data-public-reveal]` ile DEĞİL,
      `.luxy-public-motion [data-public-reveal]` ile verilir; o sınıfı yalnız
      public-site.js ekler. JS yüklenmezse hiçbir şey saklanmaz.
   ========================================================= */

.luxy-public-motion [data-public-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--luxy-public-duration-slow) var(--luxy-public-ease-out),
                transform var(--luxy-public-duration-slow) var(--luxy-public-ease-out);
}

.luxy-public-motion [data-public-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ⚠️ Kademeli gecikme: 1..3 arası bilinçli olarak KISA tutuldu; uzun zincir
      kaydırmada içeriğin geç gelmesi gibi algılanıyor. */
.luxy-public-motion [data-public-reveal-delay="1"] {
    transition-delay: 80ms;
}

.luxy-public-motion [data-public-reveal-delay="2"] {
    transition-delay: 160ms;
}

.luxy-public-motion [data-public-reveal-delay="3"] {
    transition-delay: 240ms;
}

/* =========================================================
   ♿ HAREKET AZALTMA TERCİHİ
   🔴 Kullanıcının sistem tercihi HER ŞEYİ geçersiz kılar: animasyon kalmaz,
      ama içerik tam görünür kalır (opacity:1). Sadece süreyi kısaltmak yetmez.
   ========================================================= */

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

    .luxy-public-motion [data-public-reveal] {
        opacity: 1;
        transform: none;
    }

    .luxy-public-card:hover {
        transform: none;
    }
}

/* =========================================================
   🖨️ YAZDIRMA
   ⚠️ Sabit header ve etkileşim öğeleri kâğıtta yer israfıdır.
   ========================================================= */

@media print {
    .luxy-public-header,
    .luxy-public-skip,
    .luxy-public-nav-toggle {
        display: none !important;
    }

    .luxy-public-motion [data-public-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   SAYFA YOLU (BREADCRUMB)
   ♿ Ayırıcı CSS ::before ile çizilir — metin olarak DOM'da durmaz ki
      ekran okuyucu "büyüktür işareti" diye okumasın.
   ========================================================= */

.luxy-public-breadcrumb {
    padding-block: var(--luxy-public-space-4);
    border-bottom: 1px solid var(--luxy-public-border);
    background-color: var(--luxy-public-surface);
    font-size: 0.875rem;
}

.luxy-public-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;   /* 📱 320px'te alt satıra iner, taşmaz. */
    align-items: center;
    gap: var(--luxy-public-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--luxy-public-text-muted);
}

    .luxy-public-breadcrumb-list li {
        display: inline-flex;
        align-items: center;
        gap: var(--luxy-public-space-2);
        min-width: 0;
    }

        .luxy-public-breadcrumb-list li + li::before {
            content: "/";
            color: var(--luxy-public-border-strong);
        }

    .luxy-public-breadcrumb-list a {
        color: var(--luxy-public-navy);
        text-decoration: none;
    }

        .luxy-public-breadcrumb-list a:hover {
            text-decoration: underline;
        }

    /* Geçerli sayfa: vurgulu ama bağlantı değil. */
    .luxy-public-breadcrumb-list [aria-current="page"] {
        color: var(--luxy-public-text);
        font-weight: 600;
        overflow-wrap: anywhere;   /* 🔴 Uzun destinasyon adı 320px'te gövdeyi taşırmaz. */
    }

/* =========================================================
   DESTİNASYON KARTI
   ⚠️ KARTIN TAMAMI TEK <a>'DIR: içinde ikinci bir etkileşimli öğe yok.
      Bu yüzden hover/focus durumu kartın kendisine uygulanır.
   ========================================================= */

.luxy-public-dest-card {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* 🔴 grid çocuğu taşma koruması. */
    background-color: var(--luxy-public-surface-elevated);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius-lg);
    box-shadow: var(--luxy-public-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--luxy-public-duration) var(--luxy-public-ease-out),
                box-shadow var(--luxy-public-duration) var(--luxy-public-ease-out),
                border-color var(--luxy-public-duration) var(--luxy-public-ease-out);
}

    .luxy-public-dest-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--luxy-public-shadow-lg);
        border-color: var(--luxy-public-border-strong);
        color: inherit;
    }

    /* ♿ Odak halkası kartın TAMAMINI çevreler — klavye kullanıcısı hangi kartta
          olduğunu görür. outline-offset negatif: halka taşmayıp kart içinde kalır. */
    .luxy-public-dest-card:focus-visible {
        outline: 3px solid var(--luxy-public-accent);
        outline-offset: -3px;
    }

/* --- MEDYA ALANI --- */
/* 🔴 aspect-ratio SABİT: görsel gelmeden de yüksekliği bilinir → CLS olmaz.
      Görselli ve görselsiz kart AYNI yüksekliği tutar, ızgara zıplamaz. */
.luxy-public-dest-media {
    position: relative;
    aspect-ratio: 3 / 2;
    background-color: var(--luxy-public-surface-muted);
    overflow: hidden;
}

.luxy-public-dest-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ⚠️ Hover'da GÖRSEL BÜYÜMEZ: proje standardı büyütmeyi yalnız tıklama +
          lightbox'a bırakır; dokunmatik cihazda hover'a bağlı bilgi olmaz. */
}

/*
   🔴 MEDYA YOK YÜZEYİ — BİLİNÇLİ, "fotoğraf varmış gibi" DEĞİL.
      Stok görsel, uzak placeholder servisi ya da fotoğraf taklidi gradyan
      KULLANILMAZ. Nötr bir yüzey + ikon + GERÇEK metin (lokasyon tipi).
*/
.luxy-public-dest-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--luxy-public-space-2);
    width: 100%;
    height: 100%;
    background-image: linear-gradient(150deg, var(--luxy-public-sky) 0%, var(--luxy-public-surface-muted) 100%);
    color: var(--luxy-public-navy);
}

    .luxy-public-dest-media-empty i {
        font-size: 2rem;
        opacity: 0.5;
    }

.luxy-public-dest-media-empty-text {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* --- GÖVDE --- */
.luxy-public-dest-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--luxy-public-space-2);
    padding: var(--luxy-public-space-5);
}

/* ⚠️ ROZET DEĞİL: bir durum bildirmiyor, sınıflandırma yapıyor —
      bu yüzden rozet ailesinden ayrı ve daha sakin. */
.luxy-public-dest-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-accent-strong);
}

.luxy-public-dest-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--luxy-public-navy);
    overflow-wrap: break-word;
}

.luxy-public-dest-context {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-1);
    font-size: 0.875rem;
    color: var(--luxy-public-text-muted);
    min-width: 0;
}

    .luxy-public-dest-context span {
        overflow-wrap: anywhere;
    }

.luxy-public-dest-text {
    margin: 0;
    color: var(--luxy-public-text-muted);

    /* ⚠️ Kart yüksekliklerini hizalamak için 3 satırda kesilir. Metnin TAMAMI
          detay sayfasında; burada kırpma bilgi kaybı değil, özet kararıdır. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA: <a> içinde <a> olmaz — bu bir <span>, bağlantı ipucu. */
.luxy-public-dest-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-2);
    margin-top: auto;   /* Kart yüksekliği farklı olsa da CTA hep altta hizalı. */
    padding-top: var(--luxy-public-space-2);
    font-weight: 600;
    color: var(--luxy-public-navy);
}

.luxy-public-dest-cta i {
    transition: transform var(--luxy-public-duration) var(--luxy-public-ease);
}

.luxy-public-dest-card:hover .luxy-public-dest-cta i {
    transform: translateX(3px);
}

/* =========================================================
   BOŞ DURUM (200) ve BULUNAMADI (404)
   🔴 AYNI ŞEY DEĞİLLER: boş durum "host çözüldü, katalog boş" (200);
      bulunamadı "adres bir işletmeye bağlı değil / kayıt yok" (404).
      Görünüm ailesi paylaşılır, ANLAM ve HTTP status AYRIDIR.
   ========================================================= */

.luxy-public-empty,
.luxy-public-notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--luxy-public-space-3);
    max-width: 46ch;
    margin-inline: auto;
    padding: var(--luxy-public-space-7) var(--luxy-public-space-4);
}

.luxy-public-empty-icon,
.luxy-public-notfound-icon {
    font-size: 2.5rem;
    color: var(--luxy-public-border-strong);
}

.luxy-public-empty-title,
.luxy-public-notfound-title {
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
    font-weight: 700;
    color: var(--luxy-public-navy);
    overflow-wrap: break-word;
}

.luxy-public-empty-body,
.luxy-public-notfound-body {
    margin: 0;
    color: var(--luxy-public-text-muted);
}

/* =========================================================
   DETAY — HERO
   📱 320px'te tek kolon, ≥992px'te iki kolon.
   ========================================================= */

.luxy-public-detail-hero {
    padding-block: clamp(var(--luxy-public-space-6), 5vw, var(--luxy-public-space-8));
    background-image: linear-gradient(160deg, var(--luxy-public-sky) 0%, #FFFFFF 100%);
    border-bottom: 1px solid var(--luxy-public-border);
}

.luxy-public-detail-hero-grid {
    display: grid;
    /* 🔴 minmax(0, …): 1fr tek başına içerik min-width'inden büyüyüp taşma yapar. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--luxy-public-space-6);
    align-items: center;
}

@media (min-width: 992px) {
    .luxy-public-detail-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.luxy-public-detail-hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--luxy-public-space-3);
    min-width: 0;
}

.luxy-public-detail-context {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-2);
    margin: 0;
    color: var(--luxy-public-text-muted);
}

.luxy-public-detail-hero-media {
    min-width: 0;
    border-radius: var(--luxy-public-radius-lg);
    overflow: hidden;
    box-shadow: var(--luxy-public-shadow);
    /* 🔴 Oran sabit → hero görseli yüklenirken düzen kaymaz (CLS). */
    aspect-ratio: 3 / 2;
    background-color: var(--luxy-public-surface-muted);
}

.luxy-public-detail-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.luxy-public-detail-hero-empty {
    border-radius: var(--luxy-public-radius-lg);
}

    .luxy-public-detail-hero-empty i {
        font-size: 3rem;
    }

/* =========================================================
   EDİTORYAL İÇERİK (sanitize edilmiş HTML)
   ⚠️ Kurallar YALNIZ .luxy-public-prose ALTINDA geçerlidir; genel etiket
      seçicisi (p, ul, h2…) sayfanın kalanını da etkilerdi.
   ⚠️ İzin verilen etiket kümesi HtmlSanitizer.AllowedTags ile aynıdır —
      oraya etiket eklenirse burada da biçim tanımlanmalıdır.
   ========================================================= */

.luxy-public-prose {
    max-width: var(--luxy-public-measure);   /* Okunabilir satır uzunluğu. */
    color: var(--luxy-public-text);
}

    .luxy-public-prose > :first-child {
        margin-top: 0;
    }

    .luxy-public-prose > :last-child {
        margin-bottom: 0;
    }

    .luxy-public-prose p,
    .luxy-public-prose ul,
    .luxy-public-prose ol,
    .luxy-public-prose blockquote,
    .luxy-public-prose pre {
        margin-block: 0 var(--luxy-public-space-4);
    }

    .luxy-public-prose h2,
    .luxy-public-prose h3,
    .luxy-public-prose h4,
    .luxy-public-prose h5,
    .luxy-public-prose h6 {
        margin-block: var(--luxy-public-space-6) var(--luxy-public-space-3);
        font-weight: 700;
        line-height: 1.3;
        color: var(--luxy-public-navy);
        overflow-wrap: break-word;
    }

    /*
       ⚠️ İçerikten gelen h1 GÖRSEL OLARAK h2 seviyesine indirilir: sayfada tek h1
          kuralı sunucu tarafında garanti edilemez (metni editör yazıyor), ama
          hiyerarşi izlenimi korunur. Gerçek düzeltme içerik girişinde yapılmalıdır.
    */
    .luxy-public-prose h1 {
        margin-block: var(--luxy-public-space-6) var(--luxy-public-space-3);
        font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
        font-weight: 700;
        color: var(--luxy-public-navy);
    }

    .luxy-public-prose ul,
    .luxy-public-prose ol {
        padding-left: var(--luxy-public-space-5);
    }

    .luxy-public-prose li + li {
        margin-top: var(--luxy-public-space-1);
    }

    .luxy-public-prose a {
        color: var(--luxy-public-navy);
        text-decoration: underline;
        /* 🔴 Editörün yazdığı uzun URL 320px'te gövdeyi taşırmasın. */
        overflow-wrap: anywhere;
    }

    .luxy-public-prose blockquote {
        padding-left: var(--luxy-public-space-4);
        border-left: 3px solid var(--luxy-public-accent);
        color: var(--luxy-public-text-muted);
        font-style: italic;
    }

    /* ⚠️ Kod bloğu KENDİ İÇİNDE kaydırılır; gövde yatay kaymaz. */
    .luxy-public-prose pre {
        overflow-x: auto;
        padding: var(--luxy-public-space-4);
        border: 1px solid var(--luxy-public-border);
        border-radius: var(--luxy-public-radius);
        background-color: var(--luxy-public-surface-muted);
    }

    .luxy-public-prose code {
        font-size: 0.9375em;
        overflow-wrap: anywhere;
    }

    .luxy-public-prose hr {
        margin-block: var(--luxy-public-space-6);
        border: 0;
        border-top: 1px solid var(--luxy-public-border);
    }

/* =========================================================
   GALERİ
   ⚠️ Thumbnail hover'da BÜYÜMEZ (proje standardı). Büyütme yalnız tıklama →
      lightbox. Dokunmatik cihazda hover'a bağlı bilgi olmaz.
   ========================================================= */

.luxy-public-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: var(--luxy-public-space-3);
}

.luxy-public-gallery-item {
    display: block;
    /* ♿ Dokunma hedefi 44px'ten büyük; oran sabit → CLS yok. */
    aspect-ratio: 4 / 3;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius);
    background-color: var(--luxy-public-surface-muted);
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color var(--luxy-public-duration) var(--luxy-public-ease),
                box-shadow var(--luxy-public-duration) var(--luxy-public-ease);
}

    .luxy-public-gallery-item:hover {
        border-color: var(--luxy-public-accent);
        box-shadow: var(--luxy-public-shadow);
    }

    .luxy-public-gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* =========================================================
   MARKETPLACE — EDİTORYAL BAŞLIK (PF-2A)

   ⚠️ "Dashboard hissi" bilinçli olarak KIRILIR: rozet şeridi, sayaç, filtre
      çubuğu ve tablo görünümü yok. Bunun yerine geniş boşluk + tek güçlü
      başlık + tek satır giriş.
   ⚠️ Yeni design system AÇILMADI: tüm değerler mevcut --luxy-public-* tokenları.
   ========================================================= */

.luxy-public-editorial {
    /* Üstte daha cömert boşluk: sayfa "liste" değil "dergi girişi" gibi başlar. */
    padding-block: clamp(var(--luxy-public-space-7), 6vw, 5.5rem) var(--luxy-public-space-6);
}

.luxy-public-editorial-lead {
    margin: 0;
    /* ⚠️ Girişte measure daha DAR: editoryal metin uzun satırda okunmaz. */
    max-width: 52ch;
    font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
    line-height: 1.55;
    color: var(--luxy-public-text-muted);
}

/* =========================================================
   TEKNE IZGARASI
   🔴 minmax(min(320px, 100%), 1fr): kartlar destinasyonlardan GENİŞ —
      tekne görseli sayfanın kahramanıdır. `min(...)` 320px viewport'ta
      kolonu içeriğe göre küçültür, gövdeyi taşırmaz.
   ========================================================= */

.luxy-public-vessel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: clamp(var(--luxy-public-space-5), 3vw, var(--luxy-public-space-7));
}

/* =========================================================
   TEKNE KARTI
   ⚠️ KARTIN TAMAMI TEK <a>'DIR: içinde ikinci etkileşimli öğe yok.
   ⚠️ Kart KENARLIKSIZ ve GÖLGESİZ başlar — admin kartı görünümünden
      kaçınmak için. Ayrım görselin kendisi ve tipografiyle kurulur.
   ========================================================= */

.luxy-public-vessel-card {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* 🔴 grid çocuğu taşma koruması. */
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    transition: transform var(--luxy-public-duration) var(--luxy-public-ease-out);
}

    .luxy-public-vessel-card:hover {
        /* Çok hafif: "kart havaya kalkıyor" değil, "içerik öne geliyor". */
        transform: translateY(-3px);
        color: inherit;
    }

    /* ♿ Odak halkası kartın TAMAMINI çevreler. */
    .luxy-public-vessel-card:focus-visible {
        outline: 3px solid var(--luxy-public-accent);
        outline-offset: 4px;
        border-radius: var(--luxy-public-radius-lg);
    }

/* --- MEDYA --- */
/* 🔴 aspect-ratio SABİT → görsel gelmeden yükseklik bilinir, CLS olmaz;
      görselli ve görselsiz kart AYNI yüksekliği tutar. */
.luxy-public-vessel-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--luxy-public-radius-lg);
    background-color: var(--luxy-public-surface-muted);
    overflow: hidden;
}

.luxy-public-vessel-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ⚠️ Hover'da GÖRSEL BÜYÜMEZ: proje standardı büyütmeyi yalnız tıklama +
          lightbox'a bırakır ve dokunmatik cihazda hover'a bağlı bilgi olmaz. */
}

/*
   🔴 MEDYA YOK — DÜRÜST PREMIUM YÜZEY.
      Stok fotoğraf, uzak placeholder servisi ya da fotoğraf taklidi gradyan
      KULLANILMAZ. Nötr yüzey + tekne ikonu + AÇIK "görsel yok" metni:
      kullanıcı eksik olanın ne olduğunu bilir, aldatılmaz.
*/
.luxy-public-vessel-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--luxy-public-space-2);
    width: 100%;
    height: 100%;
    background-image: linear-gradient(155deg, var(--luxy-public-sky) 0%, var(--luxy-public-surface-muted) 100%);
    color: var(--luxy-public-navy);
}

    .luxy-public-vessel-media-empty i {
        font-size: 2.25rem;
        opacity: 0.45;
    }

.luxy-public-vessel-media-empty-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* --- GÖVDE --- */
.luxy-public-vessel-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--luxy-public-space-2);
    /* ⚠️ Yatay padding YOK: metin görselle SOLDAN hizalı kalır (editoryal düzen). */
    padding-top: var(--luxy-public-space-4);
}

.luxy-public-vessel-title {
    margin: 0;
    font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--luxy-public-navy);
    overflow-wrap: break-word;
}

/* --- GERÇEK BİLGİLER (dl) --- */
/* ⚠️ Yalnız DB'de gerçekten olan alanlar. Sahte rozet/puan/müsaitlik/fiyat YOK. */
.luxy-public-vessel-facts {
    display: flex;
    flex-wrap: wrap;   /* 📱 320px'te alt satıra iner, taşmaz. */
    align-items: center;
    gap: var(--luxy-public-space-2) var(--luxy-public-space-4);
    margin: 0;
    font-size: 0.9375rem;
    color: var(--luxy-public-text-muted);
}

.luxy-public-vessel-fact {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-1);
    min-width: 0;
}

    .luxy-public-vessel-fact dt {
        display: inline-flex;
        align-items: center;
        margin: 0;
        font-weight: 400;
    }

    .luxy-public-vessel-fact dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.luxy-public-vessel-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-2);
    margin-top: auto;
    padding-top: var(--luxy-public-space-3);
    font-weight: 600;
    color: var(--luxy-public-navy);
}

.luxy-public-vessel-cta i {
    transition: transform var(--luxy-public-duration) var(--luxy-public-ease);
}

.luxy-public-vessel-card:hover .luxy-public-vessel-cta i {
    transform: translateX(3px);
}

/* =========================================================
   TEKNİK BİLGİLER IZGARASI (PF-2B)
   ♿ <dl> — her kalem etiket/değer çiftidir ve ilişki olarak duyurulur.
   ⚠️ Tablo DEĞİL: dashboard hissinden kaçınmak için kart ızgarası.
   ========================================================= */

.luxy-public-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: var(--luxy-public-space-4);
    margin: 0;
}

.luxy-public-spec {
    min-width: 0;   /* 🔴 taşma koruması. */
    padding: var(--luxy-public-space-4);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius);
    background-color: var(--luxy-public-surface);
}

    .luxy-public-spec dt {
        margin: 0 0 var(--luxy-public-space-1);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--luxy-public-text-muted);
        overflow-wrap: break-word;
    }

    .luxy-public-spec dd {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--luxy-public-navy);
        overflow-wrap: anywhere;
    }

/* =========================================================
   BEKLEYEN NAV OGELERI (PF-2 runtime recovery)

   Rotasi henuz olmayan gezinme ogeleri <button disabled> olarak cizilir —
   kirik bir <a> birakmak yerine. Gorunum link gibidir ama gezinme HICBIR
   yolla mumkun degildir (JS bozulsa da, orta tusla da).

   Kaynak sifirlanmasi: <button> varsayilan arka plan/kenarlik/font'unu
   tasidigi icin acikca sifirlanir.
   ========================================================= */

.luxy-public-nav-pending,
.luxy-public-footer-pending {
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: not-allowed;
    /* ⚠️ Rengi tek basina gostergeye BIRAKMIYORUZ: title/aria ile de bildiriliyor. */
    opacity: 0.55;
}

.luxy-public-footer-pending {
    padding: 0;
    color: rgba(255, 255, 255, 0.78);
}

/* =========================================================
   HERO QUICK FACTS (PF-2C)

   ⚠️ KPI-CARD / DASHBOARD BADGE DEĞİL — bilinçli: kutu, kenarlık, dolgu rengi
      ve rozet YOK. Zarif yatay şerit; ayrım yalnız tipografi ve ince dikey
      ayırıcıyla kurulur.
   ========================================================= */

.luxy-public-hero-facts {
    display: flex;
    flex-wrap: wrap;   /* 📱 320px'te alt satıra iner, taşmaz. */
    gap: var(--luxy-public-space-3) var(--luxy-public-space-5);
    margin: var(--luxy-public-space-5) 0 0;
    padding-top: var(--luxy-public-space-4);
    border-top: 1px solid var(--luxy-public-border);
}

.luxy-public-hero-fact {
    min-width: 0;   /* 🔴 esnek çocuk taşma koruması. */
}

    /* ⚠️ Ayırıcı yalnız YAN YANA duran öğeler arasında; satır başına düşende
          görünmemesi için `flex-wrap` ile birlikte ilk öğede bastırılır. */
    .luxy-public-hero-fact + .luxy-public-hero-fact {
        padding-left: var(--luxy-public-space-5);
        border-left: 1px solid var(--luxy-public-border);
    }

    .luxy-public-hero-fact dt {
        margin: 0 0 var(--luxy-public-space-1);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--luxy-public-text-muted);
        overflow-wrap: break-word;
    }

    .luxy-public-hero-fact dd {
        margin: 0;
        /* Manşet gibi: sayı büyük ve sakin. */
        font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--luxy-public-navy);
        overflow-wrap: anywhere;
    }

/* =========================================================
   KABİN KARTLARI (PF-2C)

   ⚠️ Kart bir BAĞLANTI DEĞİL (<article>): kabinin public adresi yoktur.
      Bu yüzden hover'da "tıklanabilir" izlenimi veren dönüşüm YOK.
   📱 320px tek kolon · tablet/desktop editoryal 2–3 kolon.
   ========================================================= */

.luxy-public-cabin-grid,
.luxy-public-experience-grid {
    display: grid;
    /* 🔴 minmax(min(...)): 320px'te kolonu içeriğe göre küçültür, gövdeyi taşırmaz. */
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: clamp(var(--luxy-public-space-5), 2.5vw, var(--luxy-public-space-6));
}

.luxy-public-cabin-card,
.luxy-public-experience-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--luxy-public-surface-elevated);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius-lg);
    overflow: hidden;
}

/* 🔴 Oran sabit → görsel gelmeden yükseklik bilinir (CLS yok); görselli ve
      görselsiz kabin kartı AYNI yüksekliği tutar. */
.luxy-public-cabin-media {
    aspect-ratio: 4 / 3;
    background-color: var(--luxy-public-surface-muted);
    overflow: hidden;
}

.luxy-public-cabin-media-inner,
.luxy-public-experience-media-inner {
    width: 100%;
    height: 100%;
}

.luxy-public-cabin-media-button,
.luxy-public-experience-media-button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;   /* Büyütme YALNIZ tıklamayla (public standardı). */
}

    .luxy-public-cabin-media-button img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* ⚠️ Hover'da BÜYÜMEZ — admin'in hover-preview davranışı public'te kullanılmaz. */
    }

.luxy-public-cabin-body,
.luxy-public-experience-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--luxy-public-space-2);
    padding: var(--luxy-public-space-5);
}

.luxy-public-cabin-title,
.luxy-public-experience-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--luxy-public-navy);
    overflow-wrap: break-word;
}

.luxy-public-cabin-eyebrow,
.luxy-public-experience-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-accent-strong);
}

.luxy-public-cabin-facts,
.luxy-public-experience-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luxy-public-space-2) var(--luxy-public-space-4);
    margin: var(--luxy-public-space-1) 0 0;
}

.luxy-public-cabin-fact,
.luxy-public-experience-fact {
    min-width: 0;
}

    .luxy-public-cabin-fact dt,
    .luxy-public-experience-fact dt {
        margin: 0;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--luxy-public-text-muted);
        overflow-wrap: break-word;
    }

    .luxy-public-cabin-fact dd,
    .luxy-public-experience-fact dd {
        margin: 0;
        font-weight: 600;
        color: var(--luxy-public-navy);
        overflow-wrap: anywhere;
    }

.luxy-public-cabin-text,
.luxy-public-experience-text {
    margin: var(--luxy-public-space-1) 0 0;
    color: var(--luxy-public-text-muted);
    /* ⚠️ Kart yüksekliklerini hizalamak için 3 satır; tamamı zaten kısa açıklamadır. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   DENEYİM KARTLARI — YALNIZ FARKLAR (PF-3B)

   🔴 YAPISAL KURALLAR TEKRAR EDİLMEDİ: ızgara, kart kabuğu, medya çerçevesi,
      gövde, başlık, eyebrow, facts ve metin kırpması kabin kartıyla BİREBİR
      aynıdır ve o kuralların selector'una eklenerek paylaşılır (yukarıda).
      Kopyalanmış ~60 satırlık ikinci bir blok, birinin güncellenip diğerinin
      geride kalmasıyla iki bölümün sessizce ayrışması demekti.

   ⚠️ AŞAĞIDA YALNIZ deneyime ÖZGÜ olanlar var: daha geniş kolon, rota zinciri
      ve hizmet etiketleri.
   ========================================================= */

/* 🔴 Kabinden TEK sapma: deneyim kartı bir rota zinciri taşıyor, bu yüzden
      kolon tabanı 280px değil 320px. Diğer tüm ızgara özellikleri paylaşılır. */
.luxy-public-experience-grid {
    /* minmax(min(...)): 320px viewport'ta kolonu içeriğe göre küçültür — gövde taşmaz. */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* =========================================================
   DENEYİM KAPAĞI — GÖRSEL TAM OTURUR, BÜYÜTÜLMEZ

   🔴 KABİN KARTINDAN BİLİNÇLİ AYRIŞMA. Kabin kapağı `object-fit: cover`
      kullanır: oda fotoğrafında kenardan kırpmak zararsızdır. Deneyim kapağı
      ise bir MANZARA/ROTA fotoğrafıdır ve sıkça üzerine basılmış yer adı
      taşır — `cover` onu büyütüp kenarlardan keserek metni yarıda bırakıyordu
      (ölçülen hata: "…e Genoese Harbour, by Sea").

   ✅ `contain`: görsel çerçeveye SIĞDIRILIR, hiçbir yönde BÜYÜTÜLMEZ ve
      hiçbir parçası kırpılmaz. Artan boşluk nötr yüzeyle dolar.
   ⚠️ Oran 16/9: 4/3'te geniş bir manzara fotoğrafı için üstte/altta gereksiz
      büyük boşluk kalıyordu. Oran SABİT kalır → görsel yüklenmeden yükseklik
      bilinir (CLS yok) ve görselli/görselsiz kart aynı yüksekliği tutar.
   ========================================================= */

.luxy-public-experience-media {
    aspect-ratio: 16 / 9;
    background-color: var(--luxy-public-surface-muted);
    overflow: hidden;
}

    .luxy-public-experience-media-button img {
        display: block;
        width: 100%;
        height: 100%;
        /* 🔴 contain — kırpma YOK, büyütme YOK. */
        object-fit: contain;
        /* Sığdırıldığında artan boşlukta görsel ortalanır. */
        object-position: center;
    }

/* Görselsiz durumda boş yüzey de aynı oranı tutar (kart yükseklikleri hizalı). */
.luxy-public-experience-media .luxy-public-vessel-media-empty {
    height: 100%;
}

/* =========================================================
   ROTA ZİNCİRİ

   📱 320px'te SARAR (flex-wrap) — yatay kaydırma YOK, overflow-x:hidden ile
      gizleme de YOK.
   ⚠️ Harita/çizgi grafiği YOK: rota koordinatları public sözleşmede yok ve
      sahte bir hat çizmek yalan olurdu.
   ========================================================= */

.luxy-public-route {
    margin-top: var(--luxy-public-space-3);
    padding-top: var(--luxy-public-space-3);
    border-top: 1px solid var(--luxy-public-border);
}

/* Facts etiketleriyle AYNI tipografik dil (küçük, seyrek, sessiz). */
.luxy-public-route-label {
    display: block;
    margin-bottom: var(--luxy-public-space-2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-text-muted);
}

.luxy-public-route-chain {
    display: flex;
    flex-wrap: wrap;
    /* Dikey boşluk satır sarınca da düzgün kalsın. */
    gap: var(--luxy-public-space-1) 0;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .luxy-public-route-chain li {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        min-width: 0;
        font-size: 0.875rem;
        color: var(--luxy-public-text);
        /* 🔴 Uzun yer adları KIRILIR; kart genişliğini zorlamaz. */
        overflow-wrap: anywhere;
    }

        /* Ok DEKORATİF (aria-hidden) ve ilk halkada hiç basılmaz — rol bilgisini
           görsel-gizli metin taşır. */
        .luxy-public-route-chain li i {
            flex: 0 0 auto;
            margin: 0 0.125rem;
            color: var(--luxy-public-text-muted);
        }

/* Uç noktalar (ilk ve son halka) biraz daha güçlü: zincirin nerede başlayıp
   bittiği tipografiyle anlaşılır — renkli rozetle DEĞİL. */
    .luxy-public-route-chain li:first-child span:last-child,
    .luxy-public-route-chain li:last-child span:last-child {
        font-weight: 600;
        color: var(--luxy-public-navy);
    }

/* =========================================================
   "BU DENEYİMDE" — HİZMET ETİKETLERİ

   ⚠️ Nötr yüzey: renk kodu YOK (bir durum bildirmiyorlar), ikon YOK (public
      hizmet→ikon eşlemesi repoda yok).
   ========================================================= */

.luxy-public-experience-services {
    margin-top: var(--luxy-public-space-3);
    padding-top: var(--luxy-public-space-3);
    border-top: 1px solid var(--luxy-public-border);
}

.luxy-public-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luxy-public-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

    .luxy-public-service-list li {
        min-width: 0;
        padding: 0.1875rem 0.5rem;
        border: 1px solid var(--luxy-public-border);
        border-radius: var(--luxy-public-radius-sm);
        background-color: var(--luxy-public-surface-muted);
        font-size: 0.8125rem;
        color: var(--luxy-public-text);
        overflow-wrap: anywhere;
    }

/* =========================================================
   ÖZELLİKLER (AMENITIES) — PF-2C

   ⚠️ Sade grid. Rozet/etiket bulutu YOK: özellikler bir durum bildirmiyor,
      sıralı bir liste. İkon dekoratif ve TEK tip (onay) — ada bakıp ikon
      tahmin edilmiyor.
   ========================================================= */

.luxy-public-amenity-group {
    margin: var(--luxy-public-space-5) 0 var(--luxy-public-space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-text-muted);
    overflow-wrap: break-word;
}

    .luxy-public-amenity-group:first-child {
        margin-top: 0;
    }

.luxy-public-amenity-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--luxy-public-space-2) var(--luxy-public-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

    .luxy-public-amenity-list li {
        display: flex;
        align-items: flex-start;
        gap: var(--luxy-public-space-2);
        min-width: 0;
        color: var(--luxy-public-text);
    }

        .luxy-public-amenity-list li i {
            flex: 0 0 auto;
            margin-top: 0.15em;
            color: var(--luxy-public-accent-strong);
        }

        .luxy-public-amenity-list li span {
            overflow-wrap: anywhere;
        }

/* =========================================================
   DENEYİM DETAY SAYFASI (PF-3C)

   ⚠️ HERO, BREADCRUMB, GALERİ VE SECTION KURALLARI TEKRAR EDİLMEDİ: tekne
      detayının kuralları aynen kullanılıyor (luxy-public-detail-hero*,
      luxy-public-hero-fact*, luxy-public-gallery*, luxy-public-section*).
      Aşağıda YALNIZ deneyime özgü olanlar var.
   ========================================================= */

/* Kart gövdesi artık bir <a> — bağlantı görünümü SIFIRLANIR, hover'da yalnız
   başlık renk değiştirir. ⚠️ Kartın tamamı büyümez/kalkmaz: public standardı
   sakin yüzey. */
.luxy-public-experience-link {
    text-decoration: none;
    color: inherit;
}

    .luxy-public-experience-link:hover .luxy-public-experience-title,
    .luxy-public-experience-link:focus-visible .luxy-public-experience-title {
        color: var(--luxy-public-accent-strong);
    }

    /* ♿ Klavye odağı GÖRÜNÜR olmalı ve kart kenarına oturmalı. */
    .luxy-public-experience-link:focus-visible {
        outline: 2px solid var(--luxy-public-accent-strong);
        outline-offset: -2px;
    }

/* 🔴 Düz metin açıklama: satır sonları KORUNUR ama <br> ÜRETİLMEZ.
      Html.Raw kullanılmadığı için biçimlendirmenin tek meşru yolu budur. */
.luxy-public-experience-prose {
    margin: 0;
    max-width: 70ch;   /* Okunabilirlik: uzun satır yorucudur. */
    white-space: pre-line;
    color: var(--luxy-public-text);
    overflow-wrap: anywhere;
}

/* =========================================================
   ROTA ZAMAN ÇİZELGESİ (dikey)

   🔴 KART İÇİNDEKİ YATAY ZİNCİRDEN AYRI BİR BİLEŞEN: detayda her durak süre ve
      hizmet taşıyor, yatay zincire sığmazdı.
   📱 Dikey akış → 320px'te yatay kaydırma OLUŞMAZ (overflow-x:hidden ile
      gizleme de YOK).
   ========================================================= */

.luxy-public-route-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.luxy-public-route-point {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--luxy-public-space-1);
    min-width: 0;
    /* Sol kanal: nokta + çizgi için yer. */
    padding: 0 0 var(--luxy-public-space-5) var(--luxy-public-space-6);
}

    /* Bağlantı çizgisi — SON halkada çizilmez. */
    .luxy-public-route-point::before {
        content: "";
        position: absolute;
        top: 0.65rem;
        bottom: 0;
        left: 0.3125rem;
        width: 1px;
        background-color: var(--luxy-public-border);
    }

    .luxy-public-route-point:last-child {
        padding-bottom: 0;
    }

        .luxy-public-route-point:last-child::before {
            display: none;
        }

    /* Nokta. ⚠️ Dekoratif: rol bilgisini metin taşıyor, renk taşımıyor. */
    .luxy-public-route-point::after {
        content: "";
        position: absolute;
        top: 0.4375rem;
        left: 0;
        width: 0.6875rem;
        height: 0.6875rem;
        border: 2px solid var(--luxy-public-border-strong);
        border-radius: 50%;
        background-color: var(--luxy-public-surface-elevated);
    }

/* Uç noktalar (Kalkış / Dönüş) dolu nokta — ayrım tipografi ve doluluk ile,
   RENKLİ ROZETLE değil. */
.luxy-public-route-point-end::after {
    border-color: var(--luxy-public-accent-strong);
    background-color: var(--luxy-public-accent-strong);
}

.luxy-public-route-point-role {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-text-muted);
}

.luxy-public-route-point-name {
    font-weight: 600;
    color: var(--luxy-public-navy);
    overflow-wrap: anywhere;
}

.luxy-public-route-point-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--luxy-public-text-muted);
}

/* Durak hizmetleri kart etiketleriyle AYNI bileşen (luxy-public-service-list) —
   ikinci bir etiket stili yazılmadı. Yalnız üstten biraz boşluk. */
.luxy-public-route-point .luxy-public-service-list {
    margin-top: var(--luxy-public-space-1);
}

/* =========================================================
   DAHİL / EKSTRA

   ⚠️ İki grup YAN YANA (geniş ekran) / ALT ALTA (mobil). Tek listede rozetle
      ayırmak yanlış okumaya çok açıktı: "dahil" ile "ekstra" ticari olarak zıt.
   ⛔ FİYAT SÜTUNU YOK — DTO'da da fiyat alanı yok.
   ========================================================= */

.luxy-public-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(var(--luxy-public-space-5), 2.5vw, var(--luxy-public-space-6));
}

.luxy-public-inclusion-group {
    min-width: 0;
}

.luxy-public-inclusion-title {
    display: flex;
    align-items: center;
    gap: var(--luxy-public-space-2);
    margin: 0 0 var(--luxy-public-space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-text-muted);
}

    /* İkon dekoratif ve TEK tip (dahil → onay, ekstra → artı). Kaleme göre ikon
       TAHMİN EDİLMEZ. */
    .luxy-public-inclusion-title i {
        flex: 0 0 auto;
        color: var(--luxy-public-accent-strong);
    }

.luxy-public-inclusion-list {
    display: flex;
    flex-direction: column;
    gap: var(--luxy-public-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.luxy-public-inclusion-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding-bottom: var(--luxy-public-space-3);
    border-bottom: 1px solid var(--luxy-public-border);
}

    .luxy-public-inclusion-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.luxy-public-inclusion-name {
    font-weight: 600;
    color: var(--luxy-public-navy);
    overflow-wrap: anywhere;
}

.luxy-public-inclusion-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem var(--luxy-public-space-3);
    font-size: 0.8125rem;
    color: var(--luxy-public-text-muted);
}

.luxy-public-inclusion-type {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.luxy-public-inclusion-portion,
.luxy-public-inclusion-text {
    overflow-wrap: anywhere;
}

.luxy-public-inclusion-text {
    font-size: 0.875rem;
    color: var(--luxy-public-text-muted);
}

/* Atama notu: kalem açıklamasından GÖRSEL OLARAK DA ayrı — biri kataloğun genel
   bilgisi, öteki BU deneyime özel koşul. */
.luxy-public-inclusion-note {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--luxy-public-text);
    overflow-wrap: anywhere;
}

    .luxy-public-inclusion-note i {
        flex: 0 0 auto;
        margin-top: 0.15em;
        color: var(--luxy-public-accent-strong);
    }

/* =========================================================
   TALEP FORMU (PF-4 · K30)

   🔴 "REZERVASYON MOTORU" GÖRÜNÜMÜ YOK: takvim widget'ı, müsaitlik ızgarası,
      fiyat özeti ya da "hemen rezerve et" vurgusu KULLANILMAZ. Bu bir talep
      formudur ve görsel dili de öyle olmalıdır (K30 §8).
   📱 320px: tek kolon; ızgara minmax(min(...)) ile içeriğe göre küçülür.
   ========================================================= */

/* Hero'daki çapa bağlantısı — sakin, dolu bir düğme. */
.luxy-public-lead-cta-wrap {
    margin: var(--luxy-public-space-5) 0 0;
}

.luxy-public-lead-cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--luxy-public-radius-sm);
    background-color: var(--luxy-public-navy);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

    .luxy-public-lead-cta:hover,
    .luxy-public-lead-cta:focus-visible {
        background-color: var(--luxy-public-accent-strong);
        color: #fff;
    }

/* ⚠️ .luxy-public-lead-panel KALDIRILDI (PF-4 rev.): bölüm artık iki kolonlu
      bir ızgaradır; tek bir panel kutusu ızgarayı gereksizce daraltıyordu.
      Kenarlık/yüzey artık özet KARTINDA ve başarı panelinde. */

.luxy-public-lead-intro {
    margin: 0 0 var(--luxy-public-space-5);
    max-width: 60ch;
    color: var(--luxy-public-text-muted);
}

/* ⚠️ ESKİ auto-fit KURALI KALDIRILDI (PF-4 rev.): geniş ekranda 3 kolona
      çıkıp alanları daraltıyor ve form "veri girişi" gibi görünüyordu. Yeni
      kural aşağıdaki REZERVASYON bölümünde: mobil 1, >=576px SABİT 2 kolon. */

/* Tam satır kaplayan alanlar (ad, mesaj, onay, düğme). */
.luxy-public-lead-field-wide {
    grid-column: 1 / -1;
}

.luxy-public-lead-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.luxy-public-lead-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--luxy-public-navy);
}

.luxy-public-lead-optional {
    margin-left: 0.375rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--luxy-public-text-muted);
}

.luxy-public-lead-input {
    width: 100%;
    /* 🔴 border-box: padding genişliği şişirmesin → 320px'te taşma olmaz. */
    box-sizing: border-box;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--luxy-public-border-strong);
    border-radius: var(--luxy-public-radius-sm);
    background-color: var(--luxy-public-surface-elevated);
    color: var(--luxy-public-text);
    /* ⚠️ 16px: iOS Safari daha küçük yazı tipinde alana odaklanınca sayfayı ZOOMLAR. */
    font: inherit;
    font-size: 1rem;
}

    .luxy-public-lead-input:focus-visible {
        outline: 2px solid var(--luxy-public-accent-strong);
        outline-offset: 1px;
    }

.luxy-public-lead-textarea {
    resize: vertical;
}

/* Onay kutusu satırı. */
.luxy-public-lead-check {
    display: flex;
    align-items: flex-start;
    gap: var(--luxy-public-space-2);
    color: var(--luxy-public-text);
}

    .luxy-public-lead-check input {
        flex: 0 0 auto;
        margin-top: 0.2em;
    }

/* Hukuki metin: varsayılan kapalı (<details>) — form uzunluğunu şişirmez. */
.luxy-public-lead-legal {
    margin-top: var(--luxy-public-space-2);
    padding: var(--luxy-public-space-3);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius-sm);
    background-color: var(--luxy-public-surface-muted);
    font-size: 0.875rem;
}

    .luxy-public-lead-legal summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--luxy-public-navy);
    }

    /* 🔴 Uzun hukuki metin PANELİ TAŞIRMAZ: kendi içinde kaydırılır. */
    .luxy-public-lead-legal .luxy-public-prose {
        max-height: 18rem;
        margin-top: var(--luxy-public-space-3);
        overflow-y: auto;
    }

.luxy-public-lead-legal-version {
    margin: var(--luxy-public-space-3) 0 0;
    font-size: 0.75rem;
    color: var(--luxy-public-text-muted);
    overflow-wrap: anywhere;
}

/* 🍯 HONEYPOT — görsel olarak gizli ama ekran okuyucuya AÇIK.
      ⚠️ display:none KULLANILMAZ: bazı botlar display:none alanları atlar; ayrıca
         gizli bir input'a aria-hidden koymak erişilebilirlik ihlalidir. */
.luxy-public-lead-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.luxy-public-lead-actions {
    display: flex;
    justify-content: flex-start;
}

.luxy-public-lead-submit {
    padding: 0.75rem 1.75rem;
    border: 0;
    border-radius: var(--luxy-public-radius-sm);
    background-color: var(--luxy-public-navy);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .luxy-public-lead-submit:hover:not(:disabled),
    .luxy-public-lead-submit:focus-visible:not(:disabled) {
        background-color: var(--luxy-public-accent-strong);
    }

    /* ⚠️ Devre dışı durum GÖRÜNÜR olmalı: kullanıcı ikinci kez tıklamayı denemesin. */
    .luxy-public-lead-submit:disabled {
        opacity: 0.6;
        cursor: progress;
    }

/* Hata: kırmızı rozet yok, sakin ama fark edilir bir şerit. */
.luxy-public-lead-error {
    margin: 0 0 var(--luxy-public-space-4);
    padding: var(--luxy-public-space-3);
    border-left: 3px solid #B4232A;
    background-color: #FDF2F2;
    color: #7A1417;
    overflow-wrap: anywhere;
}

/* Başarı paneli. */
.luxy-public-lead-success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--luxy-public-space-2);
}

    .luxy-public-lead-success i {
        font-size: 2rem;
        color: var(--luxy-public-accent-strong);
    }

    /* ♿ Odak paneline geçtiğinde görünür olmalı. */
    .luxy-public-lead-success:focus-visible {
        outline: 2px solid var(--luxy-public-accent-strong);
        outline-offset: 4px;
    }

.luxy-public-lead-success-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--luxy-public-navy);
}

.luxy-public-lead-success-body {
    margin: 0;
    max-width: 60ch;
    color: var(--luxy-public-text-muted);
}

.luxy-public-lead-code {
    margin: var(--luxy-public-space-3) 0 0;
    padding: var(--luxy-public-space-3) var(--luxy-public-space-4);
    border: 1px dashed var(--luxy-public-border-strong);
    border-radius: var(--luxy-public-radius-sm);
    background-color: var(--luxy-public-surface-muted);
}

.luxy-public-lead-code-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxy-public-text-muted);
}

.luxy-public-lead-code strong {
    /* Kod telefonda okunacak: harf aralığı ferah, tipografi monospace. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.06em;
    color: var(--luxy-public-navy);
    overflow-wrap: anywhere;
}

/* =========================================================
   ⚠️ ESKİ "iki kolonlu rezervasyon BÖLÜMÜ" + "özet KARTI" kuralları KALDIRILDI
      (PF-4 UX rev.): form artık sayfanın SAĞ KOLONUNDAKİ yapışkan panelin
      içindedir, kendi bölümünün içinde ayrı bir ızgara değildir. Yeni kurallar
      dosyanın sonundaki "DENEYİM DETAY — İKİ KOLONLU GÖVDE" bloğunda.
   ========================================================= */

/* =========================================================
   PREMIUM SPACING / TİPOGRAFİ RAFİNESİ (PF-4 rev.)

   ⚠️ YENİ TOKEN ÜRETİLMEDİ: mevcut --luxy-public-space-* ve tipografi
      ölçekleri kullanıldı. Amaç yeni bir sistem kurmak değil, deneyim detay
      sayfasının nefesini açmak.
   ========================================================= */

/* Panel artık ızgaranın içinde; kendi kenarlığını taşımaz (kart taşıyor). */
.luxy-public-reservation-form .luxy-public-lead-error {
    margin-bottom: var(--luxy-public-space-5);
}

/* Giriş alanları: charter hissi için biraz daha ferah ve yumuşak. */
.luxy-public-lead-input {
    padding: 0.75rem 0.875rem;
    border-radius: var(--luxy-public-radius-sm);
    transition: border-color .15s ease-in-out;
}

    .luxy-public-lead-input:hover:not(:focus-visible) {
        border-color: var(--luxy-public-accent-strong);
    }

.luxy-public-lead-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--luxy-public-text-muted);
}

/* Gönder düğmesi: tam genişlik mobilde, içerik genişliği masaüstünde. */
.luxy-public-lead-submit {
    width: 100%;
    padding: 0.875rem 2rem;
    letter-spacing: 0.02em;
}

@media (min-width: 576px) {
    .luxy-public-lead-submit {
        width: auto;
    }
}

/* Başarı paneli: ızgaranın solunda tek başına kaldığında da dengeli dursun. */
.luxy-public-lead-success {
    padding: clamp(var(--luxy-public-space-5), 3vw, var(--luxy-public-space-6));
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius-lg);
    background-color: var(--luxy-public-surface-elevated);
}

/* =========================================================
   DENEYİM DETAY — İKİ KOLONLU GÖVDE (PF-4 UX rev.)

   🖥 DESKTOP (>=992px): SOLDA içerik, SAĞDA yapışkan rezervasyon paneli.
   📱 MOBİL: tek kolon; panel hero'nun HEMEN ALTINDA (DOM sırası), sonra içerik.
      Sticky KAPALI.

   🔴 DOM SIRASI PANEL ÖNCE. Masaüstünde içeriğin sola alınması
      grid-template-areas ile YERLEŞİM düzeyinde yapılır — `order` hilesi YOK,
      DOM değişmez. Böylece mobilde görsel sıra = DOM sırası.

   📱 320px: minmax(0, …) ve min-width:0 her iki kolonda da var → gövde YATAY
      KAYMAZ. `overflow-x: hidden/clip` ile problem GİZLENMEZ.
   ========================================================= */

.luxy-public-detail-body {
    padding-block: clamp(var(--luxy-public-space-6), 5vw, var(--luxy-public-space-8));
}

.luxy-public-detail-grid {
    display: grid;
    /* 📱 Mobile-first: tek kolon, panel DOM'da ilk sırada. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--luxy-public-space-6), 4vw, var(--luxy-public-space-7));
}

@media (min-width: 992px) {
    .luxy-public-detail-grid {
        /* 🔴 İçerik SOLA, panel SAĞA — DOM sırası değişmeden. */
        grid-template-columns: minmax(0, 1fr) 23rem;
        grid-template-areas: "main aside";
        align-items: start;
    }

        .luxy-public-detail-grid .luxy-public-detail-main {
            grid-area: main;
        }

        .luxy-public-detail-grid .luxy-public-detail-aside {
            grid-area: aside;
        }

    /* ⚠️ Panel yoksa (aktif LegalText yok) tek kolon: yarım kalan boş bir sağ
          kolon bırakılmaz. */
    .luxy-public-detail-grid-single {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main";
    }
}

.luxy-public-detail-main,
.luxy-public-detail-aside {
    /* 🔴 Taşma koruması: grid öğesi varsayılan min-width:auto ile içeriğe göre
          şişer ve 320px'te gövdeyi kaydırırdı. */
    min-width: 0;
}

/* İçerik blokları: eski tam-genişlik section'ların yerini alır.
   ⚠️ Zebra (muted/plain) arka plan ALTERNASYONU KALDIRILDI: tek okuma kolonunda
      şeritli zemin "dashboard" hissi veriyordu. Ayrım artık yalnız boşluk ve
      ince bir ayırıcı. */
.luxy-public-detail-block + .luxy-public-detail-block {
    margin-top: clamp(var(--luxy-public-space-6), 4vw, var(--luxy-public-space-7));
    padding-top: clamp(var(--luxy-public-space-6), 4vw, var(--luxy-public-space-7));
    border-top: 1px solid var(--luxy-public-border);
}

/* =========================================================
   REZERVASYON PANELİ — editoryal, DASHBOARD DEĞİL

   ⛔ Rozet, KPI kutusu, gölge yığını, renkli şerit YOK.
      Ayrım: ince kenarlık + ferah tipografi + tek accent.
   ========================================================= */

@media (min-width: 992px) {
    .luxy-public-detail-aside {
        position: sticky;
        top: var(--luxy-public-space-5);
        /* ♿ Panel viewport'tan uzunsa SAYFAYI değil KENDİNİ kaydırır; böylece
              gönder düğmesi ve onay kutusu klavyeyle erişilemez hâle gelmez. */
        max-height: calc(100vh - (var(--luxy-public-space-5) * 2));
        overflow-y: auto;
    }
}

.luxy-public-reservation-panel {
    overflow: hidden;
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius-lg);
    background-color: var(--luxy-public-surface-elevated);
}

.luxy-public-reservation-panel-img {
    display: block;
    width: 100%;
    /* Oran sabit → görsel gelmeden yükseklik bilinir (CLS yok). */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--luxy-public-surface-muted);
}

.luxy-public-reservation-panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--luxy-public-space-4);
    padding: clamp(var(--luxy-public-space-5), 2.5vw, var(--luxy-public-space-6));
}

.luxy-public-reservation-title {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--luxy-public-navy);
    overflow-wrap: break-word;
}

.luxy-public-reservation-lead {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--luxy-public-text-muted);
}

/* Özet: etiket/değer çiftleri, tablo görünümü YOK. */
.luxy-public-reservation-summary-list {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--luxy-public-space-2) var(--luxy-public-space-4);
    margin: 0;
    padding-block: var(--luxy-public-space-4);
    border-block: 1px solid var(--luxy-public-border);
}

    /* ⚠️ <div> sarmalayıcı ızgarayı bozmasın: `display: contents` ile dt/dd
          DOĞRUDAN ızgara öğesi olur. `subgrid` de çalışırdı ama tarayıcı desteği
          daha yeni; contents bu desen için klasik ve yaygın destekli yoldur. */
    .luxy-public-reservation-summary-list > div {
        display: contents;
    }

    .luxy-public-reservation-summary-list dt {
        margin: 0;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--luxy-public-text-muted);
        /* Etiket ve değer aynı satırda hizalı görünsün. */
        align-self: center;
        overflow-wrap: break-word;
    }

    .luxy-public-reservation-summary-list dd {
        margin: 0;
        font-weight: 600;
        color: var(--luxy-public-navy);
        overflow-wrap: anywhere;
    }

        .luxy-public-reservation-summary-list dd a {
            color: inherit;
        }

/* Güven metni — hero CTA altında ve formun dibinde AYNI bileşen. */
.luxy-public-lead-trust {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: var(--luxy-public-space-3) 0 0;
    padding: 0;
    list-style: none;
}

    .luxy-public-lead-trust li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        min-width: 0;
        font-size: 0.8125rem;
        line-height: 1.45;
        color: var(--luxy-public-text-muted);
        overflow-wrap: anywhere;
    }

        .luxy-public-lead-trust li i {
            flex: 0 0 auto;
            margin-top: 0.1em;
            color: var(--luxy-public-accent-strong);
        }

/* CTA sarmalayıcı: düğme + güven metni bir arada. */
.luxy-public-lead-cta-wrap {
    margin-top: clamp(var(--luxy-public-space-5), 2.5vw, var(--luxy-public-space-6));
}

.luxy-public-lead-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------------------------------------------------------
   FORM ALAN IZGARASI — panel içinde

   ⚠️ Panel DAR (23rem). Yalnız Tarih ve Misafir yan yana durur; ikisi de KISA
      alanlardır. Ad/telefon/e-posta/mesaj TAM GENİŞLİK — 23rem'lik bir kolonda
      yan yana konsalardı ~10rem'e düşer ve kullanılamaz hâle gelirlerdi.
   📱 320px: minmax(0, 1fr) → kolonlar içeriğe göre şişmez, gövde kaymaz.
   --------------------------------------------------------- */
.luxy-public-lead-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--luxy-public-space-4);
}

/* ⚠️ Geniş alanlar iki kolonu birden kaplar. */
.luxy-public-lead-field-wide {
    grid-column: 1 / -1;
}

/* =========================================================
   BAŞARI DURUMU — panelin içeriğinin yerini alır
   ========================================================= */

/* ⚠️ Panelin İÇİNDE olduğu için kendi kutusunu taşımaz: kenarlık panelde. */
.luxy-public-reservation-panel-body .luxy-public-lead-success {
    padding: 0;
    border: 0;
    background: none;
}

/* 🔴 Kod SEÇİLEBİLİR: tek tıkla tamamı seçilir (telefonda okunacak/kopyalanacak). */
.luxy-public-lead-code strong {
    user-select: all;
}

.luxy-public-lead-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: var(--luxy-public-space-3);
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--luxy-public-border-strong);
    border-radius: var(--luxy-public-radius-sm);
    background-color: var(--luxy-public-surface-elevated);
    font: inherit;
    font-size: 0.75rem;
    color: var(--luxy-public-navy);
    cursor: pointer;
}

    .luxy-public-lead-copy:hover,
    .luxy-public-lead-copy:focus-visible {
        border-color: var(--luxy-public-accent-strong);
        color: var(--luxy-public-accent-strong);
    }

/* ♿ Programatik odak görünür olmalı: JS başarıdan sonra başlığa odaklanır. */
.luxy-public-lead-success-title:focus-visible {
    outline: 2px solid var(--luxy-public-accent-strong);
    outline-offset: 4px;
}

/* =========================================================
   YUMUŞAK KAYDIRMA + REDUCED MOTION

   ⚠️ Çapa (#) kaydırması CSS ile yumuşatılır — JS ile scroll YAZILMADI.
   ♿ prefers-reduced-motion: reduce → ANINDA (auto). Kullanıcı tercihi
      hiçbir koşulda ezilmez.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/* ♿ Çapa hedefi yapışkan bir öğenin altında kalmasın. */
.luxy-public-detail-aside {
    scroll-margin-top: var(--luxy-public-space-5);
}

/* =========================================================
   SPRINT 1 — PUBLIC EXPERIENCE DETAIL / PREMIUM KATMANI

   KAPSAM: yalnız /Public/Experiences/{slug} yüzeyi. Buradaki hiçbir kural
   Bootstrap sınıfını EZMEZ ve .luxy-public-* dışına çıkmaz — yönetim ekranları
   bu dosya yüklense bile etkilenmez.

   Yeni token TANIMLANMADI: renk, boşluk, yarıçap, süre ve easing değerleri
   .luxy-public üzerindeki mevcut değişkenlerden okunur.

   320px kuralı: bu bloktaki hiçbir kural sabit genişlik kullanmaz; ızgaralar
   minmax(0, …) ile yazılır.
   ========================================================= */

/* ---------------------------------------------------------
   1) HERO — sahne hissi

   OPAKLIK ANİMASYONU YOK: hero görseli LCP adayıdır ve opacity: 0 ile başlayan
   bir giriş animasyonu LCP'yi geciktirirdi. Yalnız transform kullanılır; boyanan
   piksel ilk karede oradadır.
   --------------------------------------------------------- */

.luxy-public-detail-hero-media-lux {
    position: relative;
}

    /* Scrim: görselin alt kenarındaki kontrastı yükseltir, üstüne metin BASILMAZ.
       Tıklamayı engellememesi için pointer-events kapalı. */
    .luxy-public-detail-hero-media-lux::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 38%;
        pointer-events: none;
        background-image: linear-gradient(to top, rgba(11, 31, 51, 0.28), transparent);
    }

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-detail-hero-media-lux .luxy-public-detail-hero-img {
        animation: luxy-public-hero-settle 900ms var(--luxy-public-ease) both;
    }
}

@keyframes luxy-public-hero-settle {
    from {
        transform: scale(1.035);
    }

    to {
        transform: none;
    }
}

/* Başlık optiği: uzun deneyim adlarında satır dengesi ve sıkı harf aralığı. */
.luxy-public-detail-hero .luxy-public-hero-title {
    letter-spacing: -0.02em;
    text-wrap: balance; /* Desteklenmeyen tarayıcıda sessizce yok sayılır. */
}

/* Hero özet satırı: değer büyür, etiket sessizleşir — kutu/rozet eklenmez. */
.luxy-public-detail-hero .luxy-public-hero-fact dd {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   2) BİRİNCİL CTA — mikro etkileşim
   Yalnız 1px yükselme + gölge. Renk geçişi mevcut kuralda zaten var.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-lead-cta {
        transition: transform var(--luxy-public-duration) var(--luxy-public-ease), box-shadow var(--luxy-public-duration) var(--luxy-public-ease), background-color var(--luxy-public-duration) var(--luxy-public-ease), color var(--luxy-public-duration) var(--luxy-public-ease);
    }

        .luxy-public-lead-cta:hover {
            transform: translateY(-1px);
            box-shadow: var(--luxy-public-shadow);
        }

        /* Basılı durumda yükselme geri alınır: dokunma geri bildirimi. */
        .luxy-public-lead-cta:active {
            transform: translateY(0);
        }
}

/* ---------------------------------------------------------
   3) GALERİ — mozaik + görsel yakınlaşma

   İlk kart iki sütun/iki satır kaplar. Tek görselde grid auto-placement
   kendiliğinden tek karta düşer; ayrı kural gerekmez.
   Yakınlaşma GÖRSELE uygulanır, düğmeye değil: düğme büyürse ızgara kayar.
   --------------------------------------------------------- */

@media (min-width: 768px) {
    .luxy-public-gallery-mosaic {
        grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
        grid-auto-rows: 1fr;
    }

        .luxy-public-gallery-mosaic > .luxy-public-gallery-item:first-child {
            grid-column: span 2;
            grid-row: span 2;
            aspect-ratio: auto; /* Oranı satırlar belirler; 4/3 burada geçersiz. */
        }
}

.luxy-public-gallery-item img {
    transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-gallery-item img {
        transition: transform 600ms var(--luxy-public-ease);
    }

    .luxy-public-gallery-item:hover img,
    .luxy-public-gallery-item:focus-visible img {
        transform: scale(1.06);
    }
}

/* Odak halkası hiçbir koşulda kaldırılmaz; mozaikte de görünür kalsın. */
.luxy-public-gallery-item:focus-visible {
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   4) ROTA ZAMAN ÇİZELGESİ — sakin vurgu
   Yeni renk YOK: uç noktalar zaten farklı sınıf taşıyor.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-route-point {
        transition: transform var(--luxy-public-duration) var(--luxy-public-ease);
    }

        /* 2px yatay kayma: fark edilir ama okumayı bozmaz. */
        .luxy-public-route-point:hover {
            transform: translateX(2px);
        }
}

/* ---------------------------------------------------------
   5) MOBİL DÖNÜŞÜM ÇUBUĞU

   Yalnız <992px. Masaüstünde yapışkan panel zaten görünür.
   44px dokunma hedefi + env(safe-area-inset-bottom).
   İçerik çubuğun altında kalmasın diye sayfanın alt boşluğu :has() ile artırılır;
   destekleyemeyen tarayıcıda çubuk yalnız son birkaç satırı örter — içerik kaybı
   olmaz, düzen bozulmaz.
   --------------------------------------------------------- */

.luxy-public-lead-mobilebar {
    display: none;
}

@media (max-width: 991.98px) {
    .luxy-public-lead-mobilebar {
        display: block;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 30;
        padding: var(--luxy-public-space-2) var(--luxy-public-space-3);
        padding-bottom: calc(var(--luxy-public-space-2) + env(safe-area-inset-bottom, 0px));
        background-color: var(--luxy-public-surface);
        border-top: 1px solid var(--luxy-public-border);
        box-shadow: 0 -6px 24px rgba(11, 31, 51, 0.10);
    }

    .luxy-public-lead-mobilebar-inner {
        display: flex;
        align-items: center;
        gap: var(--luxy-public-space-3);
        max-width: var(--luxy-public-container-max);
        margin-inline: auto;
    }

    /* 420px altında güven metni gizlenir; aksiyon tam genişliğe yayılır. */
    .luxy-public-lead-mobilebar-note {
        display: none;
        align-items: center;
        gap: var(--luxy-public-space-2);
        min-width: 0;
        font-size: 0.8125rem;
        color: var(--luxy-public-text-muted);
    }

    .luxy-public-lead-mobilebar-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--luxy-public-space-2);
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding-inline: var(--luxy-public-space-4);
        border-radius: var(--luxy-public-radius);
        background-color: var(--luxy-public-accent);
        color: #FFFFFF;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        overflow-wrap: break-word;
    }

        .luxy-public-lead-mobilebar-cta:hover,
        .luxy-public-lead-mobilebar-cta:focus-visible {
            color: #FFFFFF;
            background-color: var(--luxy-public-navy);
        }

    /* Sayfanın altına çubuk yüksekliği kadar nefes payı. */
    body.luxy-public:has(.luxy-public-lead-mobilebar) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 991.98px) and (min-width: 420px) {
    .luxy-public-lead-mobilebar-note {
        display: inline-flex;
    }
}

/* Çapa hedefi yapışkan başlığın altında kalmasın. */
.luxy-public-detail-block {
    scroll-margin-top: var(--luxy-public-space-5);
}

/* =========================================================
   SPRINT 2 — PUBLIC LISTING / DÖNÜŞÜM KATMANI

   KAPSAM: liste yüzeyleri (şu an /Public/Vessels). Kurallar `.luxy-public-*`
   dışına çıkmaz, Bootstrap sınıfı EZİLMEZ.

   Yeni token TANIMLANMADI. Sabit genişlik YOK → 320px kuralı korunur.
   ========================================================= */

/* ---------------------------------------------------------
   1) ARAÇ ÇUBUĞU

   JS yoksa çubuk `hidden` kalır; buradaki hiçbir kural onu görünür yapmaz
   (`[hidden]` kuralını EZMİYORUZ).
   --------------------------------------------------------- */

.luxy-public-listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--luxy-public-space-3);
    margin-bottom: var(--luxy-public-space-5);
    padding: var(--luxy-public-space-4);
    background-color: var(--luxy-public-surface);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius-lg);
}

.luxy-public-listing-field {
    display: flex;
    flex-direction: column;
    gap: var(--luxy-public-space-1);
    /* Esnek çocuk taşma koruması + dar ekranda tam satır. */
    flex: 1 1 minmax(0, 12rem);
    min-width: 0;
}

.luxy-public-listing-field-search {
    flex: 2 1 minmax(0, 18rem);
}

.luxy-public-listing-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--luxy-public-text-muted);
}

.luxy-public-listing-input,
.luxy-public-listing-select {
    width: 100%;
    min-width: 0;
    min-height: 44px; /* Dokunma hedefi. */
    padding: 0 var(--luxy-public-space-3);
    color: var(--luxy-public-text);
    background-color: var(--luxy-public-surface);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius);
    font: inherit;
}

    .luxy-public-listing-input:focus-visible,
    .luxy-public-listing-select:focus-visible {
        border-color: var(--luxy-public-accent);
    }

.luxy-public-listing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--luxy-public-space-3);
    margin-left: auto;
    min-width: 0;
}

.luxy-public-listing-clear {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-2);
    min-height: 44px;
    padding-inline: var(--luxy-public-space-3);
    color: var(--luxy-public-text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--luxy-public-radius);
    font: inherit;
    cursor: pointer;
}

    .luxy-public-listing-clear:hover,
    .luxy-public-listing-clear:focus-visible {
        color: var(--luxy-public-navy);
        border-color: var(--luxy-public-border);
    }

.luxy-public-listing-count {
    margin: 0;
    color: var(--luxy-public-text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums; /* Sayı değişince satır zıplamaz. */
}

/* Filtre sonucu boş: katalog boşluğundan AYRI bir durum. */
.luxy-public-listing-noresult {
    margin-bottom: var(--luxy-public-space-5);
}

/* ---------------------------------------------------------
   2) İSKELET (SKELETON) — GERÇEK YÜKLEME İÇİN

   Liste sunucuda basılır; "veri yükleniyor" iskeleti UYDURULMAZ.
   İskelet YALNIZ görsel yüklenirken görünür: medya kutusunun kendisi parlar,
   görsel boyandığı anda üzerini örter. Ek DOM ve ek JS yoktur.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-vessel-media {
        background-image: linear-gradient(100deg, var(--luxy-public-surface-muted) 30%, var(--luxy-public-sky) 50%, var(--luxy-public-surface-muted) 70%);
        background-size: 300% 100%;
        /* Sonsuz döngü YOK: görsel boyandıktan sonra altta dönen bir animasyon
           bırakmak, kart sayısı arttıkça boşuna işlemci yakardı. 6 tur (~8 sn)
           gerçekçi her yükleme süresini kapsar, sonra kendiliğinden durur. */
        animation: luxy-public-skeleton 1.4s ease-in-out 6;
    }

    /* Görsel boyandığında animasyon görünmez olur; boş medya yüzeyinde de
       parlama istemiyoruz — orada "medya yok" mesajı var. */
    .luxy-public-vessel-media:has(.luxy-public-vessel-media-empty) {
        animation: none;
        background-image: none;
    }
}

@keyframes luxy-public-skeleton {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

/* ---------------------------------------------------------
   3) KART HİYERARŞİSİ VE HOVER

   Yakınlaşma GÖRSELE uygulanır; kart kutusu büyümez → ızgara kaymaz.
   Mevcut hover kuralları (kenarlık/gölge) korunur, üzerine yalnız
   hareket eklenir.
   --------------------------------------------------------- */

.luxy-public-vessel-img {
    transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-vessel-img {
        transition: transform 700ms var(--luxy-public-ease);
    }

    .luxy-public-vessel-card:hover .luxy-public-vessel-img,
    .luxy-public-vessel-card:focus-visible .luxy-public-vessel-img {
        transform: scale(1.04);
    }

    .luxy-public-vessel-card {
        transition: transform var(--luxy-public-duration) var(--luxy-public-ease), border-color var(--luxy-public-duration) var(--luxy-public-ease), box-shadow var(--luxy-public-duration) var(--luxy-public-ease);
    }

        .luxy-public-vessel-card:hover {
            transform: translateY(-2px);
        }
}

/* Başlık optiği: uzun tekne adlarında satır dengesi. */
.luxy-public-vessel-title {
    letter-spacing: -0.01em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------
   4) IZGARA RİTMİ

   Geniş ekranda kartlar arası nefes artar; dar ekranda değişmez.
   --------------------------------------------------------- */

@media (min-width: 992px) {
    .luxy-public-vessel-grid {
        gap: var(--luxy-public-space-5);
    }
}

/* =========================================================
   SPRINT 3 — DESTINATION ECOSYSTEM

   KAPSAM: destinasyon liste ve detay yüzeyleri. Yeni bileşen dili ÜRETİLMEDİ —
   Sprint 1 (hero/mozaik) ve Sprint 2 (araç çubuğu/kart) katmanları yeniden
   kullanılır. Buradaki kurallar yalnız editoryal ritim ve kapanış yolu içindir.

   Yeni token YOK. Sabit genişlik YOK → 320px kuralı korunur.
   ========================================================= */

/* ---------------------------------------------------------
   1) EDİTORYAL METİN RİTMİ

   Hikâye anlatan sayfada okunabilirlik ölçüsü (measure) ve satır yüksekliği
   belirleyicidir. Yalnız destinasyon prose bloğuna uygulanır; genel .luxy-public-prose
   kuralları (sanitize edilmiş içerik) EZİLMEZ.
   --------------------------------------------------------- */

.luxy-public-dest-detail-prose {
    max-width: var(--luxy-public-measure);
    line-height: 1.75;
}

    /* İlk paragraf giriş cümlesidir: bir tık büyük, biraz daha açık renk. */
    .luxy-public-dest-detail-prose > p:first-of-type {
        font-size: 1.0625rem;
        color: var(--luxy-public-text);
    }

/* ---------------------------------------------------------
   2) YAKINDAKİ DESTİNASYON KARTI

   Liste kartının aynısıdır; yalnız başlık seviyesi h3 olduğu için tipografi
   hizalanır. Yeni kart tipi TANIMLANMADI.
   --------------------------------------------------------- */

.luxy-public-dest-card h3.luxy-public-dest-title {
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* Kart görselinde Sprint 2 ile aynı sakin yakınlaşma. */
.luxy-public-dest-img {
    transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-dest-img {
        transition: transform 700ms var(--luxy-public-ease);
    }

    .luxy-public-dest-card:hover .luxy-public-dest-img,
    .luxy-public-dest-card:focus-visible .luxy-public-dest-img {
        transform: scale(1.04);
    }

    .luxy-public-dest-card {
        transition: transform var(--luxy-public-duration) var(--luxy-public-ease), border-color var(--luxy-public-duration) var(--luxy-public-ease), box-shadow var(--luxy-public-duration) var(--luxy-public-ease);
    }

        .luxy-public-dest-card:hover {
            transform: translateY(-2px);
        }
}

/* İskelet: Sprint 2 ile aynı sözleşme — görsel yüklenirken medya kutusu parlar,
   görsel boyandığında üzerini örter. Sonsuz döngü YOK. */
@media (prefers-reduced-motion: no-preference) {
    .luxy-public-dest-media {
        background-image: linear-gradient(100deg, var(--luxy-public-surface-muted) 30%, var(--luxy-public-sky) 50%, var(--luxy-public-surface-muted) 70%);
        background-size: 300% 100%;
        animation: luxy-public-skeleton 1.4s ease-in-out 6;
    }

    /* Medyası olmayan kartta parlama istemiyoruz: orada gerçek bir mesaj var. */
    .luxy-public-dest-media:has(.luxy-public-dest-media-empty) {
        animation: none;
        background-image: none;
    }
}

/* ---------------------------------------------------------
   3) KAPANIŞ YOLU

   İki gerçek rota yan yana; dar ekranda alt alta ve tam genişlik.
   --------------------------------------------------------- */

.luxy-public-dest-outro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luxy-public-space-3);
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .luxy-public-dest-outro {
        flex-direction: column;
        align-items: stretch;
    }

        .luxy-public-dest-outro .luxy-public-btn {
            justify-content: center;
            width: 100%;
        }
}

/* =========================================================
   SPRINT 3.5 — EKOSİSTEM · CLS · ROTA TEMİZLİĞİ

   Yeni token YOK. Sabit genişlik YOK → 320px kuralı korunur.
   ========================================================= */

/* ---------------------------------------------------------
   1) CLS — ARAÇ ÇUBUĞU YUVASI (PHASE F)

   SORUN: çubuk `hidden` doğar, JS onu açar. JS ilk boyamadan sonra çalışırsa
   altındaki liste bir kez aşağı kayar (layout shift).

   ÇÖZÜM: yer, ÇUBUK AÇILMADAN ÖNCE rezerve edilir — ama YALNIZ betik
   çalışabiliyorsa. `@media (scripting: enabled)` bunu SAF CSS ile söyler;
   böylece:
     · JS kapalı  → rezerve YOK, boş gri alan YOK, tam liste çalışır
     · JS açık    → yer hazır, çubuk açılınca içerik kaymaz
   Desteklemeyen eski tarayıcı sorguyu yok sayar → bugünkü davranışa döner
   (küçük bir kayma), kırılma olmaz.

   🔴 INLINE HEAD SCRIPT AÇILMADI, render-blocking JS EKLENMEDİ.

   Yükseklikler ÖLÇÜLMÜŞ bileşenlerden türetilir (körlemesine değil):
     alan = etiket (~15px) + boşluk (4px) + kontrol (min 44px) ≈ 63px
     çubuk = üst/alt iç boşluk (2 × space-4 = 32px) + satır sayısı × 63px
             + satırlar arası boşluk (space-3 = 12px)
     · ≥1200px : dört alan + aksiyonlar tek satırda      → 32 + 63        ≈ 95px
     · 768–1199: iki satır                                → 32 + 126 + 12  ≈ 170px
     · <768px  : alanlar tam genişlik, üç/dört satır      → rezerve EDİLMEZ
                 (dar ekranda 250px'lik boş alan, kaymadan daha kötüdür)
   --------------------------------------------------------- */

@media (scripting: enabled) and (min-width: 768px) {
    .luxy-public-listing-slot {
        min-height: 170px;
    }
}

@media (scripting: enabled) and (min-width: 1200px) {
    .luxy-public-listing-slot {
        min-height: 95px;
    }
}

/* ---------------------------------------------------------
   2) DENEYİM KARTI IZGARASI

   Destinasyon detayındaki "uğrayan deneyimler" ve deneyim detayındaki
   "aynı teknenin diğerleri" şeritleri AYNI ızgarayı kullanır.
   --------------------------------------------------------- */

.luxy-public-experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--luxy-public-space-4);
}

@media (min-width: 992px) {
    .luxy-public-experience-grid {
        gap: var(--luxy-public-space-5);
    }
}

/* Kart içi rota satırı — sakin, tek satır, taşmaz. */
.luxy-public-experience-route {
    display: inline-flex;
    align-items: baseline;
    gap: var(--luxy-public-space-2);
    min-width: 0;
    margin-top: var(--luxy-public-space-2);
    color: var(--luxy-public-text-muted);
    font-size: 0.875rem;
    overflow-wrap: break-word;
}

.luxy-public-experience-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--luxy-public-space-3);
    margin-top: var(--luxy-public-space-2);
    color: var(--luxy-public-text-muted);
    font-size: 0.875rem;
}

    .luxy-public-experience-meta i {
        margin-right: var(--luxy-public-space-1);
    }

/* =========================================================
   SPRINT 4 — GLOBAL ARAMA YÜZEYİ (/search)

   KAPSAM: yalnız arama sayfası. Mevcut kart, ızgara ve boş-durum bileşenleri
   yeniden kullanılır; ikinci bir kart ya da liste dili ÜRETİLMEDİ.

   Yeni token YOK. Sabit genişlik YOK → 320px kuralı korunur.
   ========================================================= */

.luxy-public-search-form {
    display: flex;
    flex-wrap: wrap; /* 320px'te düğme alt satıra iner, taşma OLUŞMAZ. */
    gap: var(--luxy-public-space-3);
    align-items: stretch;
    margin-top: var(--luxy-public-space-5);
}

.luxy-public-search-input {
    flex: 1 1 minmax(0, 22rem);
    min-width: 0;
    min-height: 48px; /* Dokunma hedefi 44px'in üzerinde. */
    padding: 0 var(--luxy-public-space-4);
    color: var(--luxy-public-text);
    background-color: var(--luxy-public-surface);
    border: 1px solid var(--luxy-public-border);
    border-radius: var(--luxy-public-radius);
    font: inherit;
}

    .luxy-public-search-input:focus-visible {
        border-color: var(--luxy-public-accent);
    }

.luxy-public-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--luxy-public-space-2);
    flex: 0 1 auto;
    min-height: 48px;
    min-width: 0;
    padding-inline: var(--luxy-public-space-5);
    color: #FFFFFF;
    background-color: var(--luxy-public-accent);
    border: 1px solid transparent;
    border-radius: var(--luxy-public-radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .luxy-public-search-submit:hover,
    .luxy-public-search-submit:focus-visible {
        background-color: var(--luxy-public-navy);
    }

/* 320px: düğme tam genişlik, ortalanır. */
@media (max-width: 420px) {
    .luxy-public-search-submit {
        flex: 1 1 100%;
    }
}

.luxy-public-search-hint {
    margin: var(--luxy-public-space-3) 0 0;
    color: var(--luxy-public-text-muted);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums; /* Sayı değişince satır zıplamaz. */
}

/* Grup başlığı + "tümünü gör" aynı satırda; dar ekranda alt alta. */
.luxy-public-search-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--luxy-public-space-3);
    min-width: 0;
}

    .luxy-public-search-group-head .luxy-public-section-title {
        margin-bottom: 0;
    }

.luxy-public-search-seeall {
    display: inline-flex;
    align-items: center;
    gap: var(--luxy-public-space-2);
    min-height: 44px;
    min-width: 0;
    color: var(--luxy-public-accent);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: break-word;
}

    .luxy-public-search-seeall:hover,
    .luxy-public-search-seeall:focus-visible {
        color: var(--luxy-public-navy);
        text-decoration: underline;
    }

@media (prefers-reduced-motion: no-preference) {
    .luxy-public-search-seeall i {
        transition: transform var(--luxy-public-duration) var(--luxy-public-ease);
    }

    .luxy-public-search-seeall:hover i {
        transform: translateX(2px);
    }
}