/**
 * gezenbiri — Master Brand Design System & Central Component Library
 * Version: 2.2 (Production-Ready Design System)
 * 
 * 1. COLOR TOKENS (65-20-10-5 Distribution & Supporting Palette)
 * 2. TYPOGRAPHY SCALE (Plus Jakarta Sans)
 * 3. SPACING & RADIUS TOKENS (4/8/12/16/24/32/48/64/96)
 * 4. SHADOW & MOTION TOKENS (180ms fast / 240ms standard / 350ms slow)
 * 5. 12/8/4 MASTER RESPONSIVE GRID TOKENS & UTILITIES
 * 6. MASTER SYSTEM DOT SPECIFICATION (Pure 1:1 circular ratio)
 * 7. ACCESSIBILITY & FOCUS-VISIBLE
 * 8. CORE UI COMPONENT LIBRARY (Buttons, Cards, Badges, Modals, Statuses, Toasts)
 */

:root {
    /* ================= 1. COLOR PALETTE ================= */
    /* Core Palette (65-20-10-5 Rule) */
    --gb-cream: #F6F3ED;          /* 65% Primary Canvas / Background */
    --gb-charcoal: #202020;       /* 20% Structure, Headings & Deep Surfaces */
    --gb-coral: #FF4D3D;          /* 10% Action Coral (CTA, System Dot, Active states) */
    --gb-coral-hover: #E03E2F;    /* Hover State for Action Coral */
    --gb-sage: #A8B89A;           /* 5% Sage Green (Nature, Badges, Calming accents) */

    /* Supporting Palette */
    --gb-sky: #A9D5E8;            /* Sky (Air, Escapes, Freshness) */
    --gb-sand: #D8CCBC;           /* Sand (Earth, Warmth, Editorial cards) */
    --gb-stone: #D9D6D1;          /* Stone (Dividers, Borders, Tints) */
    --gb-white: #FFFFFF;          /* Pure White (Cards, Inputs, High contrast) */

    /* Alpha / Soft Variations */
    --gb-coral-soft: rgba(255, 77, 61, 0.12);
    --gb-charcoal-soft: rgba(32, 32, 32, 0.06);
    --gb-sage-soft: rgba(168, 184, 154, 0.20);
    --gb-sky-soft: rgba(169, 213, 232, 0.22);
    --gb-border: #E2DDD5;
    --gb-border-subtle: rgba(32, 32, 32, 0.08);

    /* ================= 2. TYPOGRAPHY ================= */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Scale */
    --gb-text-display-xl: 72px;
    --gb-text-display: 48px;
    --gb-text-h1: 36px;
    --gb-text-h2: 26px;
    --gb-text-h3: 20px;
    --gb-text-body-lg: 17px;
    --gb-text-body: 14.5px;
    --gb-text-small: 12.5px;
    --gb-text-caption: 10.5px;

    /* Weights */
    --gb-weight-logo: 900;
    --gb-weight-display: 800;
    --gb-weight-heading: 700;
    --gb-weight-semibold: 600;
    --gb-weight-medium: 500;
    --gb-weight-regular: 400;

    /* ================= 3. SPACING & RADIUS ================= */
    --gb-space-1: 4px;
    --gb-space-2: 8px;
    --gb-space-3: 12px;
    --gb-space-4: 16px;
    --gb-space-5: 20px;
    --gb-space-6: 24px;
    --gb-space-8: 32px;
    --gb-space-12: 48px;
    --gb-space-16: 64px;
    --gb-space-24: 96px;

    --gb-radius-sm: 8px;          /* Controls, tags, inputs */
    --gb-radius-md: 12px;         /* Standard cards */
    --gb-radius-lg: 20px;         /* Large hero cards & Modals */
    --gb-radius-pill: 999px;      /* Pill badges & circular icons */

    /* ================= 4. SHADOW & MOTION ================= */
    --gb-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
    --gb-shadow-floating: 0 16px 40px rgba(0, 0, 0, 0.12);
    --gb-shadow-overlay: 0 25px 70px rgba(0, 0, 0, 0.16);

    --gb-motion-fast: 180ms ease-out;
    --gb-motion-standard: 240ms cubic-bezier(0.16, 1, 0.3, 1);
    --gb-motion-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ================= 5. GRID & CONTAINER TOKENS ================= */
    --gb-container-max: 1040px;
    --gb-gutter-desktop: 24px;
    --gb-gutter-tablet: 20px;
    --gb-gutter-mobile: 16px;

    /* Uyumluluk takma adları: sayfalarda kullanılan ancak tanımsız kaldığı için deklarasyonu sessizce düşen token'lar.
       Yeni renk/değer eklenmez; mevcut palet token'larına bağlanır. */
    --gb-charcoal-sub: rgba(32, 32, 32, 0.72);
    --gb-sand-subtle: #FAF8F5;
    --gb-warm-cream: var(--gb-cream);
    --gb-weight-bold: var(--gb-weight-heading);
    --gb-motion-quick: var(--gb-motion-fast);
    --gb-radius-full: var(--gb-radius-pill);
}

/* ================= 6. MASTER SYSTEM DOT SPECIFICATION ================= */
/* Referans: https://msaglamoz.github.io/gezenbiri/system-dot.html
 * 
 * DÖRTLÜ ANLAM MİMARİSİ:
 * 1. Aksiyon Kıvılcımı (CTA / Eylem Butonları: .ui-button-dot, .gb-btn-dot)
 * 2. Hedef Koordinat (Harita / Radar: .map-pulse, .map-pin-dot, .gb-coord-pin)
 * 3. Karar Mührü (Mühür & Son Nokta: Net kararlı sonlandırma)
 * 4. Özne ("biri" / Yolcu: Toplu kalabalık değil, yola çıkan insan öznesi)
 *
 * 8 ALTIN MARKA DAVRANIŞ KURALI:
 * Kural 01: Göz Bebeği & Tekil Odak (1 bileşen = en fazla 1 turuncu nokta)
 * Kural 02: Saf 1:1 Daire Geometrisi (width: 0.15em, height: 0.15em / r=3.5px)
 * Kural 03: 2.5px / 0.12em Optik Altın Oran Nefes & Kerning Kilidi (margin-left: 0.12em)
 * Kural 04: Sıfır Gölge & Saf Düz Vektör (box-shadow: none, filter: none)
 * Kural 05: Zıtlık & Zemin Uyum (Inversion: Mercan zeminde nokta Warm Cream rengine döner)
 * Kural 06: Dörtlü Anlamsal Çerçeve
 * Kural 07: Morphing Adaptasyon & İkonografi (1.8px monoline + System Dot çekirdeği)
 * Kural 08: Canlı Durum & Senkronize Organik Nabız (prestigeHeroPulse)
 */

.gb-logo,
.gb-header-logo {
    font-family: var(--font-sans);
    font-weight: var(--gb-weight-logo);
    letter-spacing: -0.04em;
    display: inline-flex;
    align-items: baseline;
    color: var(--gb-charcoal);
    line-height: 1;
    text-transform: lowercase;
    text-decoration: none;
}

/* Kural 02 & Kural 03: Saf 1:1 Daire Geometrisi & 0.12em (~2.5px) Altın Kilit */
.gb-system-dot,
.system-dot {
    display: inline-block;
    width: 0.15em;
    height: 0.15em;
    background-color: var(--gb-coral);
    border-radius: 50%;
    margin-left: 0.12em; /* 2.5px / 0.12em kerning lock */
    flex-shrink: 0;
    vertical-align: baseline;
    box-shadow: none !important; /* Kural 04: Sıfır gölge & saf düz vektör */
    filter: none !important;
}

/* Kural 05: Zıtlık & Zemin Uyum Kuralı (Inversion)
   Krem, Kömür ve Adaçayı zeminlerde nokta Action Coral kalır.
   Mercan (#FF4D3D) zemin üzerinde ise nokta Warm Cream (#F6F3ED) rengine tersyüz olur. */
.gb-btn-primary .gb-system-dot,
.gb-btn-primary .system-dot,
.gb-btn-primary .gb-btn-dot,
.gb-tag-coral .gb-system-dot,
.gb-tag-coral .system-dot,
.gb-tag-coral .gb-btn-dot {
    background-color: var(--gb-cream) !important;
}

/* Kömür buton hover olup mercana döndüğünde nokta Warm Cream rengine tersyüz olur (Inversion) */
.gb-btn-dark:hover .gb-btn-dot {
    background-color: var(--gb-cream) !important;
}

/* Kural 08: Canlı Durum & Senkronize Organik Nabız (prestigeHeroPulse)
   Aciliyet durumlarında veya hover anlarında nokta yapay ışık saçmadan,
   sadece geometrik ölçekleme ile organik nefes alıp nabız atar. */
.gb-live-dot {
    display: inline-block;
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background-color: var(--gb-coral);
    position: relative;
    flex-shrink: 0;
    box-shadow: none !important;
    filter: none !important;
    animation: prestigeHeroPulse 2s infinite ease-in-out;
}

.ticket-badge-status.is-confirmed .gb-live-dot {
    background-color: #1f8f5b !important;
}

@keyframes prestigeHeroPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.35);
        opacity: 0.72;
    }
}

/* ================= 7. ACCESSIBILITY & FOCUS-VISIBLE ================= */
:focus-visible {
    outline: 2.5px solid var(--gb-coral);
    outline-offset: 3px;
}

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

/* ================= 8. REUSABLE UI COMPONENT LIBRARY ================= */

/* Buttons */
.gb-btn {
    font-family: var(--font-sans);
    font-size: var(--gb-text-body);
    font-weight: var(--gb-weight-heading);
    padding: 12px 24px;
    border-radius: var(--gb-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform var(--gb-motion-fast), box-shadow var(--gb-motion-fast), background-color var(--gb-motion-fast);
    line-height: 1.2;
}

.gb-btn-primary {
    background-color: var(--gb-coral);
    color: var(--gb-white);
    border-color: var(--gb-coral);
    box-shadow: 0 4px 14px rgba(255, 77, 61, 0.25);
}

.gb-btn-primary:hover {
    background-color: var(--gb-coral-hover);
    border-color: var(--gb-coral-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 77, 61, 0.35);
}

.gb-btn-dark {
    background-color: var(--gb-charcoal);
    color: var(--gb-white);
    border-color: var(--gb-charcoal);
}

.gb-btn-dark:hover {
    background-color: var(--gb-coral);
    border-color: var(--gb-coral);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 77, 61, 0.25);
}

.gb-btn-secondary {
    background-color: var(--gb-white);
    color: var(--gb-charcoal);
    border-color: var(--gb-border);
}

.gb-btn-secondary:hover {
    background-color: var(--gb-cream);
    border-color: var(--gb-charcoal);
}

.gb-btn-ghost {
    background-color: transparent;
    color: var(--gb-charcoal);
    border-color: transparent;
}

.gb-btn-ghost:hover {
    color: var(--gb-coral);
}

/* Badges & Tags */
.gb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--gb-radius-pill);
    background-color: var(--gb-white);
    color: var(--gb-charcoal);
    border: 1px solid var(--gb-border);
}

/* Kategori yoksa rozet marka adına düşer: wordmark daima küçük harf "gezenbiri" yazılır. */
.gb-badge-brand {
    text-transform: none !important;
    letter-spacing: -0.01em;
    font-weight: 900;
}

.gb-tag-coral {
    background-color: var(--gb-coral-soft);
    color: var(--gb-coral);
    border-color: rgba(255, 77, 61, 0.25);
}

/* Status Classes */
.gb-status-open {
    color: #386641;
    background-color: rgba(56, 102, 65, 0.12);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--gb-radius-pill);
    font-size: 12px;
}

.gb-status-full {
    color: #777;
    background-color: rgba(0, 0, 0, 0.06);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--gb-radius-pill);
    font-size: 12px;
}

/* ==========================================================================
   Bókun Detay Entegrasyonu: Editoryal Tipografi & Şeffaf Fiyat Kırılımı
   ========================================================================== */

/* Program Hakkında (Editoryal Uzun Açıklama) */
.gb-prose-editorial {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gb-charcoal);
}

.gb-prose-editorial p {
    margin-bottom: var(--gb-space-3);
}

.gb-prose-editorial p:last-child {
    margin-bottom: 0;
}

/* Günlük Program: Adım Gövdesi ve Detay Metni */
.gb-timeline-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.gb-timeline-detail {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gb-charcoal-sub);
    margin: 0;
}

/* Dahil & Hariç Olanlar: İki Sütunlu Şeffaf Kırılım */
.gb-inclusions-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gb-space-4);
    margin-top: var(--gb-space-3);
}

.gb-inclusions-col {
    display: flex;
    flex-direction: column;
}

.gb-inclusions-subtitle {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 0;
}

.gb-included-heading {
    color: #2e6040;
}

.gb-excluded-heading {
    color: var(--gb-charcoal-sub);
}

.gb-excluded-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gb-excluded-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--gb-charcoal-sub);
}

.gb-excluded-list li svg {
    color: #a8a29e;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Bilmeniz Gerekenler & Notlar Paneli */
.gb-info-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gb-border);
}

.gb-info-section:first-of-type {
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
}

.gb-info-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: var(--gb-charcoal);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px 0;
}

.gb-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gb-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--gb-charcoal-sub);
}

.gb-info-list li svg {
    color: #2e6040;
    flex-shrink: 0;
    margin-top: 2px;
}

.gb-info-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gb-charcoal-sub);
    margin: 0;
}

/* Tarih Seçici Tetikleyici Buton */
button.gb-date-picker-trigger:not(.gb-step-pill-value) {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: opacity 0.15s ease;
}

button.gb-date-picker-trigger:not(.gb-step-pill-value):hover {
    opacity: 0.8;
}

button.gb-date-picker-trigger:focus-visible {
    outline: 2px solid var(--gb-coral);
    outline-offset: 2px;
    border-radius: var(--gb-radius-sm);
}

.gb-pax-category-row {
    transition: border-color 0.15s ease;
}

.gb-pax-category-row:hover {
    border-color: rgba(32, 32, 32, 0.2);
}