/* =========================================================================
   LÂLE: KÖKLERDEN YÜZEYE (2026 İSTANBUL TULIP MUSEUM)
   Luminous White Museum & Contemporary Art Exhibition Stylesheet
   ========================================================================= */

/* PERFORMANS: Google Fonts @import kaldırıldı — aynı fontlar includes/header.php içinde <link> ile yükleniyor. */

:root {
    --bg-main: #fbfbfd;
    --bg-surface: #ffffff;
    --card-bg: #ffffff;
    --card-border: rgba(15, 23, 42, 0.08);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --gold: #b8860b;
    --gold-light: #d4af37;
    --gold-glow: rgba(184, 134, 11, 0.18);
    --crimson: #a31d24;
    --crimson-light: #c41e3a;
    --crimson-glow: rgba(163, 29, 36, 0.15);
}

* {
    box-sizing: border-box;
}

/* Scroll-behavior smooth sadece masaüstü cihazlarda uygulanır; mobil dokunmatik ekranlarda momentum ve kaydırma gecikmesini önler */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    html {
        scroll-behavior: smooth;
    }
}

html {
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: clip;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Serif Headings - Prestigious Classical Art & Academic Museum Style */
h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

/* Gold & Crimson Accents */
.text-gold {
    color: var(--gold);
}

.text-crimson {
    color: var(--crimson);
}

.text-gold-gradient {
    background: linear-gradient(135deg, #b8860b 0%, #d4af37 60%, #997008 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-crimson-gradient {
    background: linear-gradient(135deg, #a31d24 0%, #c41e3a 50%, #801016 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.border-gold {
    border-color: var(--gold);
}

.bg-gold {
    background-color: var(--gold);
}

.bg-gold-light {
    background-color: var(--gold-light);
}

.bg-crimson {
    background-color: var(--crimson);
}

/* Luxury Light Frosted Glass Panels */
.glass-panel {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
}

.glass-panel-gold {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(184, 134, 11, 0.28);
    box-shadow: 0 15px 35px -10px rgba(184, 134, 11, 0.08);
}

.card-white {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-white:hover {
    border-color: rgba(184, 134, 11, 0.4);
    box-shadow: 0 16px 36px -8px rgba(184, 134, 11, 0.12);
    transform: translateY(-4px);
}

/* Custom Leaflet Map Adjustments (Light Museum Style) */
.leaflet-container {
    background: #f1f5f9 !important;
}

.custom-leaflet-popup .leaflet-popup-content-wrapper {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.custom-leaflet-popup .leaflet-popup-tip {
    background: #ffffff !important;
    border: 1px solid rgba(184, 134, 11, 0.3) !important;
}

/* Custom Scrollbar (Light & Minimal) */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* 3D Canvas Containers */
#tulip-3d-hero, #surface-3d-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: grab;
}

#tulip-3d-hero:active, #surface-3d-canvas:active {
    cursor: grabbing;
}

/* Subtle Organic Grid / Noise Pattern */
.bg-subtle-pattern {
    background-image: radial-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 0);
    background-size: 24px 24px;
}

/* Focus and Accessibility Rings (UI/UX Pro Max) */
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Gold Pulse Glow for Map Pins */
@keyframes goldPulseLight {
    0%, 100% {
        box-shadow: 0 0 10px rgba(184, 134, 11, 0.25);
    }
    50% {
        box-shadow: 0 0 24px rgba(184, 134, 11, 0.55);
    }
}

/* Tulip Colors Section & Swatch Glows */
.tulip-swatch-crimson { background: #c41e3a; box-shadow: 0 4px 14px rgba(196, 30, 58, 0.35); }
.tulip-swatch-gold { background: #eab308; box-shadow: 0 4px 14px rgba(234, 179, 8, 0.35); }
.tulip-swatch-rose { background: #f43f5e; box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35); }
.tulip-swatch-purple { background: #7c3aed; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); }
.tulip-swatch-emerald { background: #10b981; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }
.tulip-swatch-white { background: #ffffff; border: 1px solid #cbd5e1; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.tulip-swatch-maroon { background: #4a0e17; box-shadow: 0 4px 14px rgba(74, 14, 23, 0.35); }

.color-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.color-card.active-color {
    border-color: var(--gold) !important;
    box-shadow: 0 16px 36px -6px rgba(184, 134, 11, 0.22) !important;
    transform: translateY(-4px);
}

/* ===== Skill pass (redesign-skill / taste-skill): typography, motion, a11y ===== */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button:not(:disabled):active, a[class*="rounded-full"]:active { transform: scale(.98); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 9999; background: #0f172a; color: #fff;
  padding: .6rem 1rem; border-radius: .75rem; font-size: .8rem; font-weight: 600; transition: top .2s ease; }
.skip-link:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== Mobile responsiveness fix ===== */
img, svg, canvas, video, iframe, embed {
    max-width: 100%;
    height: auto;
    display: block;
}

a, button, input, textarea, select {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
    html {
        font-size: 15px;
    }

    body {
        font-size: 16px;
        line-height: 1.55;
    }

    h1 {
        font-size: clamp(2.3rem, 10vw, 4.2rem) !important;
        line-height: 0.96 !important;
        letter-spacing: -0.04em !important;
    }

    h2 {
        font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
        line-height: 1.08 !important;
    }

    h3 {
        font-size: clamp(1.35rem, 5vw, 2.1rem) !important;
        line-height: 1.18 !important;
    }

    p,
    li,
    a,
    span,
    button,
    input,
    textarea,
    select {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    #main-header {
        padding: 0.55rem 0.7rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    #main-header > a,
    #main-header > nav,
    #main-header > div {
        min-width: 0;
    }

    #main-header .group {
        min-width: 0;
    }

    .topbar {
        padding: 0.5rem 0.7rem !important;
    }

    .topbar > div {
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
    }

    .topbar .social-links,
    .topbar .cta-buttons {
        justify-content: center;
        width: 100%;
    }

    .container,
    .mx-auto,
    main > section,
    article,
    .section {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .rounded-3xl,
    .rounded-[1.5rem],
    .rounded-2xl,
    .rounded-xl {
        border-radius: 1rem !important;
    }

    .shadow-2xl,
    .shadow-xl,
    .shadow-lg {
        box-shadow: 0 10px 25px -18px rgba(15, 23, 42, 0.25) !important;
    }
}

@media (max-width: 480px) {
    #main-header {
        padding: 0.55rem 0.5rem !important;
    }

    .topbar {
        padding: 0.45rem 0.5rem !important;
        font-size: 0.72rem !important;
    }

    .container,
    .mx-auto,
    main > section,
    article,
    .section {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }
}

/* =========================================================================
   LOGO ORBITING STAR & COLORFUL COMET TAIL ANIMATION
   ========================================================================= */
@keyframes celestialOrbitSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes starTwinkleGlow {
    0%, 100% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 1.5px rgba(245, 158, 11, 0.6));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 2.5px rgba(253, 224, 71, 0.8)) drop-shadow(0 0 4px rgba(244, 63, 94, 0.35));
    }
}
@keyframes sparkFloat {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

.logo-celestial-orbit {
    transform-origin: 50% 50%;
}
.orbit-rotator {
    transform-origin: 50px 50px;
    animation: celestialOrbitSpin 3.6s linear infinite;
    will-change: transform;
}
.leading-star-group {
    transform-origin: 0 0;
    animation: starTwinkleGlow 1.8s ease-in-out infinite alternate;
}
.tail-spark-1, .tail-spark-2, .tail-spark-3, .tail-spark-4 {
    animation: sparkFloat 1.2s ease-in-out infinite alternate;
}
.group:hover .orbit-rotator {
    animation-duration: 2.0s;
}