/* =============================================
   DAVRAZ KAYAK MERKEZİ - ANA STİL DOSYASI
   Tasarım: Premium Koyu Tema (Mockup'a uygun)
   Renkler: Lacivert/Siyah + Altın vurgu
   ============================================= */

/* =============================================
   GOOGLE FONTS
   ============================================= */
/* Fonts loaded via <link> in header.php for better performance */

/* =============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================= */
:root {
    /* Renkler */
    --color-bg-primary: #1e2433;
    --color-bg-secondary: #262c3d;
    --color-bg-card: rgba(38, 44, 61, 0.85);
    --color-bg-glass: rgba(38, 44, 61, 0.6);
    --color-bg-overlay: rgba(30, 36, 51, 0.7);
    --color-bg-stats: rgba(38, 44, 61, 0.9);

    --color-gold: #c9a84c;
    --color-gold-light: #ddc06a;
    --color-gold-dark: #a88a35;

    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b8c8;
    --color-text-muted: #6b7a90;
    --color-text-dark: #1a2332;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.15);
    --color-border-gold: rgba(201, 168, 76, 0.3);

    --color-white: #ffffff;
    --color-black: #000000;

    /* Tipografi */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Playfair Display', serif;

    /* Font boyutları */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-hero: clamp(4rem, 10vw, 9rem);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Container */
    --container-max: 1400px;
    --container-padding: 2rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-gold);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

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

/* =============================================
   LAYOUT & CONTAINER
   ============================================= */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-24) 0;
    position: relative;
}

/* =============================================
   HEADER / NAVBAR
   ============================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    transition: background-color var(--transition-base), backdrop-filter var(--transition-base);
    padding: var(--space-5) 0;
}

.header.scrolled {
    background-color: rgba(30, 36, 51, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    z-index: 10;
}

.header-logo img {
    height: 60px;
    width: auto;
    transition: height var(--transition-base);
}

.header.scrolled .header-logo img {
    height: 48px;
}

.header-logo-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-2xl);
    letter-spacing: 2px;
    line-height: 1;
}

.header-logo-text span {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 3px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* Navigasyon */
.nav-main {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nav-main a {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    position: relative;
    transition: color var(--transition-base);
    white-space: nowrap;
}

.nav-main a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-gold);
    transition: width var(--transition-base);
}

.nav-main a:hover::after,
.nav-main a.active::after {
    width: 60%;
}

.nav-main a:hover,
.nav-main a.active {
    color: var(--color-gold);
}

/* Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    background: rgba(38, 44, 61, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3) 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xl);
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-sm);
    letter-spacing: 0.5px;
    text-transform: none;
}

.nav-dropdown-menu a::after {
    display: none;
}

.nav-dropdown-menu a:hover {
    background: rgba(201, 168, 76, 0.1);
    color: var(--color-gold);
}

.nav-dropdown-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nav-dropdown-label svg {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-base);
}

.nav-dropdown:hover .nav-dropdown-label svg {
    transform: rotate(180deg);
}

/* Header Sağ */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    z-index: 10;
}

/* Hava Durumu Widget */
.weather-widget {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.weather-widget .weather-icon {
    width: 28px;
    height: 28px;
    opacity: 0.8;
}

.weather-widget .weather-temp {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

/* Hamburger Menü */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 6px;
    cursor: pointer;
    z-index: 10;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    transition: all var(--transition-base);
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translateY(5.6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-5.6px);
}

/* Dil Seçici */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 500;
}

.lang-switcher a {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    font-size: var(--text-xs);
    letter-spacing: 1px;
}

.lang-switcher a.active {
    background: var(--color-gold);
    color: var(--color-bg-primary);
}

.lang-switcher .separator {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(30, 36, 51, 0.75) 0%,
        rgba(30, 36, 51, 0.3) 40%,
        rgba(30, 36, 51, 0.1) 70%,
        rgba(30, 36, 51, 0.3) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding-top: 120px;
}

/* Altın çizgi + tagline */
.hero-tagline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.hero-tagline::before {
    content: '';
    width: 3px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-gold), transparent);
    border-radius: 2px;
}

.hero-tagline span {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 4px;
    color: var(--color-gold);
    text-transform: uppercase;
}

/* Dev Başlık */
.hero-title {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    text-transform: uppercase;
    margin-bottom: var(--space-8);
    color: var(--color-text-primary);
}

.hero-title .line {
    display: block;
    overflow: hidden;
}

.hero-title .line span {
    display: inline-block;
    transform: translateY(100%);
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title .line:nth-child(2) span {
    animation-delay: 0.15s;
}

@keyframes slideUp {
    to { transform: translateY(0); }
}

/* Alt metin */
.hero-description {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-10);
    max-width: 450px;
}

/* Keşfet butonu */
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--color-text-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-text-primary);
    background: transparent;
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.hero-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-gold);
    transform: translateX(-100%);
    transition: transform var(--transition-smooth);
    z-index: -1;
}

.hero-btn:hover {
    border-color: var(--color-gold);
    color: var(--color-bg-primary);
}

.hero-btn:hover::before {
    transform: translateX(0);
}

.hero-btn .play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
}

/* Hero slide indicators */
.hero-indicators {
    position: absolute;
    left: 40px;
    bottom: 45%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 3;
}

.hero-indicators .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: all var(--transition-base);
    cursor: pointer;
}

.hero-indicators .dot.active {
    background: var(--color-text-primary);
    transform: scale(1.3);
}

/* =============================================
   İSTATİSTİK BARI
   ============================================= */
.stats-bar {
    position: relative;
    z-index: 5;
    margin-top: -60px;
}

.stats-bar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--color-bg-stats);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    position: relative;
    transition: background var(--transition-base);
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--color-border);
}

.stat-item:hover {
    background: rgba(201, 168, 76, 0.05);
}

.stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-value small {
    font-size: var(--text-lg);
    font-weight: 400;
}

.stat-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* =============================================
   KEŞFET (DISCOVER) SECTION
   ============================================= */
.discover-section {
    padding: var(--space-24) 0;
    background: var(--color-bg-primary);
    position: relative;
    overflow: hidden;
}

/* Büyük arka plan DK harfleri */
.discover-section::before {
    content: 'DK';
    position: absolute;
    left: -2%;
    bottom: 5%;
    font-family: var(--font-heading);
    font-size: 25vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    line-height: 0.8;
    pointer-events: none;
    letter-spacing: -10px;
}

.discover-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-12);
    align-items: center;
}

.discover-text {
    position: relative;
    z-index: 2;
}

.discover-subtitle {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--color-gold);
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}

.discover-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
    letter-spacing: -1px;
}

.discover-cta {
    font-family: var(--font-accent);
    font-size: var(--text-4xl);
    font-style: italic;
    color: var(--color-gold);
    margin-bottom: var(--space-6);
    display: block;
}

.discover-desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.8;
    max-width: 400px;
}

/* Keşfet Kartları */
.discover-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.discover-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
    cursor: pointer;
    group: card;
}

.discover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.discover-card:hover img {
    transform: scale(1.08);
}

.discover-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(30, 36, 51, 0.9) 0%,
        rgba(30, 36, 51, 0.3) 40%,
        rgba(30, 36, 51, 0.1) 100%
    );
    transition: background var(--transition-base);
}

.discover-card:hover::after {
    background: linear-gradient(
        to top,
        rgba(30, 36, 51, 0.95) 0%,
        rgba(30, 36, 51, 0.4) 50%,
        rgba(30, 36, 51, 0.2) 100%
    );
}

.discover-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    z-index: 2;
}

.discover-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.discover-card-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.discover-card:hover .discover-card-desc {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   HABERLER / ETKİNLİKLER BÖLÜMLERİ
   ============================================= */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-12);
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-subtitle {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--color-gold);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.section-link {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--transition-base);
}

.section-link:hover {
    gap: var(--space-4);
    color: var(--color-gold-light);
}

.section-link svg {
    width: 18px;
    height: 18px;
}

/* Haber Kartı */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.news-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-border-gold);
    box-shadow: var(--shadow-gold);
}

.news-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-date {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background: var(--color-gold);
    color: var(--color-bg-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1px;
}

.news-card-body {
    padding: var(--space-6);
}

.news-card-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-3);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.news-card-link {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--transition-base);
}

.news-card-link:hover {
    gap: var(--space-3);
}

.news-card-link svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform var(--transition-base);
}

.news-card-link:hover svg {
    transform: translateX(4px);
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
    position: relative;
    overflow: hidden;
}

/* Son ana sayfa bloğunun alt boşluğu footer'a taşmasın */
.home-dynamic-blocks .container > div:last-child {
    margin-bottom: 0 !important;
}

/* Footer üst - dağ görseli */
.footer-hero {
    position: relative;
    padding: var(--space-6) 0 var(--space-16);
    text-align: center;
    overflow: hidden;
}

.footer-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.footer-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.footer-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--color-bg-primary) 0%,
        rgba(30, 36, 51, 0.85) 30%,
        rgba(30, 36, 51, 0.9) 100%
    );
}

.footer-hero-content {
    position: relative;
    z-index: 2;
}

.footer-pin-icon {
    width: 40px;
    height: 40px;
    color: var(--color-gold);
    margin: 0 auto var(--space-6);
}

.footer-slogan {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.footer-brand {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 6px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Sosyal medya */
.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}

.footer-social a:hover {
    color: var(--color-gold);
    transform: translateY(-3px);
}

.footer-social a svg {
    width: 20px;
    height: 20px;
}

.footer-social .separator {
    width: 1px;
    height: 16px;
    background: var(--color-text-muted);
}

/* Footer alt */
.footer-bottom {
    background: rgba(30, 36, 51, 0.95);
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) 0;
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-copyright {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.footer-links {
    display: flex;
    gap: var(--space-6);
}

.footer-links a {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: var(--color-gold);
}

/* =============================================
   İÇ SAYFA HERO (Page Hero)
   ============================================= */
.page-hero {
    position: relative;
    padding: 140px 0 70px;
    text-align: center;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(30, 36, 51, 0.8) 0%,
        rgba(30, 36, 51, 0.9) 100%
    );
}

.page-hero-content {
    position: relative;
    z-index: 2;
}

.page-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-4);
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.breadcrumb a {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
}

.breadcrumb a:hover {
    color: var(--color-gold);
}

.breadcrumb .separator {
    color: var(--color-text-muted);
}

.breadcrumb .current {
    color: var(--color-gold);
}

/* =============================================
   İÇERİK SAYFALARI
   ============================================= */
.content-section {
    padding: var(--space-16) 0;
}

.content-section .container {
    max-width: 900px;
}

.content-body {
    font-size: var(--text-base);
    line-height: 1.9;
    color: var(--color-text-secondary);
}

.content-body h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin: var(--space-10) 0 var(--space-4);
}

.content-body h3 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: var(--space-8) 0 var(--space-3);
}

.content-body p {
    margin-bottom: var(--space-4);
}

.content-body ul,
.content-body ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.content-body ul li {
    list-style: none;
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-2);
}

.content-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
}

.content-body ol {
    list-style: decimal;
}

.content-body ol li {
    margin-bottom: var(--space-2);
}

.content-body img {
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
    box-shadow: var(--shadow-lg);
}

.content-body a {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content-body a:hover {
    color: var(--color-gold-light);
}

/* Tablo stili */
.content-body table,
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-8) 0;
    font-size: var(--text-sm);
}

.content-body table thead th,
.data-table thead th {
    background: var(--color-bg-card);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--text-xs);
    color: var(--color-gold);
    padding: var(--space-4) var(--space-5);
    text-align: left;
    border-bottom: 2px solid var(--color-border-gold);
}

.content-body table tbody td,
.data-table tbody td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.content-body table tbody tr:hover,
.data-table tbody tr:hover {
    background: rgba(201, 168, 76, 0.03);
}

/* =============================================
   GALERİ
   ============================================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(30, 36, 51, 0.5);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.gallery-item:hover::after {
    opacity: 1;
}

/* =============================================
   YOUTUBE VIDEO SLIDER
============================================= */
.cms-hero-video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16/9 = 1.777 */
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.cms-hero-video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16/9 = 1.777 */
    transform: translate(-50%, -50%); /* Removed scale to prevent zooming */
    border: 0;
    pointer-events: none;
}
.cms-hero-video-fallback {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.gallery-item .zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 2;
    width: 48px;
    height: 48px;
    opacity: 0;
    transition: all var(--transition-base);
    color: var(--color-text-primary);
}

.gallery-item:hover .zoom-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* =============================================
   İLETİŞİM FORMU
   ============================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
}

.contact-info-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 168, 76, 0.1);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    color: var(--color-gold);
}

.contact-info-icon svg {
    width: 20px;
    height: 20px;
}

.contact-info-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.contact-info-value {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.contact-info-value a {
    color: var(--color-gold);
}

/* Form */
.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    transition: all var(--transition-base);
    outline: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-muted);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

/* =============================================
   BUTONLAR
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-gold {
    background: var(--color-gold);
    color: var(--color-bg-primary);
    border: 2px solid var(--color-gold);
}

.btn-gold:hover {
    background: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-bg-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
}

.btn-outline:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: rgba(201, 168, 76, 0.05);
}

.btn-ghost {
    background: transparent;
    color: var(--color-gold);
    border: none;
    padding: var(--space-2) var(--space-4);
}

.btn-ghost:hover {
    background: rgba(201, 168, 76, 0.1);
}

/* =============================================
   SAYFALAMA (Pagination)
   ============================================= */
.pagination-nav {
    margin-top: var(--space-12);
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}

.page-link:hover,
.page-link.active {
    background: var(--color-gold);
    color: var(--color-bg-primary);
    border-color: var(--color-gold);
}

.page-dots {
    color: var(--color-text-muted);
    padding: 0 var(--space-2);
}

/* =============================================
   MOBİL MENÜ OVERLAY
   ============================================= */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 36, 51, 0.98);
    backdrop-filter: blur(20px);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6rem 2rem 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.mobile-nav-menu > a, 
.mobile-nav-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color var(--transition-base);
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
}

.mobile-nav-menu a:hover {
    color: var(--color-gold);
}

.mobile-nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mobile-nav-title {
    color: rgba(255, 255, 255, 0.5); /* Make group titles slightly dimmer to distinguish from direct links */
    font-size: var(--text-lg);
    margin-bottom: 0.25rem;
}

.mobile-nav-children {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mobile-nav-children a {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    transition: color var(--transition-base);
}

.mobile-nav-children a:hover {
    color: var(--color-gold);
}

/* =============================================
   LIGHTBOX
   ============================================= */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.lightbox-close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    font-size: var(--text-3xl);
    cursor: pointer;
    transition: color var(--transition-base);
}

.lightbox-close:hover {
    color: var(--color-gold);
}

/* =============================================
   SCROLL TO TOP
   ============================================= */
.scroll-top {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gold);
    color: var(--color-bg-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-gold);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    cursor: pointer;
    z-index: var(--z-sticky);
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--color-gold-light);
    transform: translateY(-3px);
}

/* =============================================
   LOADING / PRELOADER
   ============================================= */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Database-driven public components */
.cms-slider { position:relative; display:block; overflow:hidden; }
.cms-hero-slide { position:absolute; inset:0; width:100%; min-height:100vh; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity .65s ease; }
.cms-hero-slide.active { position:relative; inset:auto; opacity:1; visibility:visible; z-index:1; }
.cms-hero-slide > .container { width:100%; }
.cms-slider .hero-content { max-width:860px; }
.cms-slider .hero-title { max-width:860px; font-size:4.5rem; }
.cms-slider .hero-title .line { white-space:nowrap; }
.cms-slider .hero-indicators { z-index:4; }
.hero-indicators button.dot { padding:0; border:0; cursor:pointer; }
.cms-page-container, .cms-detail-container { max-width:1120px; }
.cms-page-lead { max-width:850px; margin:0 auto var(--space-10); color:var(--color-text-secondary); font-size:1.16rem; line-height:1.8; text-align:center; }
.cms-table-scroll { width:100%; overflow-x:auto; margin-top:var(--space-8); }
.cms-status { display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap; }
.cms-status::before { width:8px; height:8px; border-radius:50%; background:currentColor; content:""; }
.cms-status.is-open { color:#76c893; }
.cms-status.is-closed { color:#ef7777; }
.cms-difficulty { display:inline-block; padding:4px 9px; border-radius:5px; color:#fff; font-size:.8rem; font-weight:700; }
.cms-blue { background:#3976bf; } .cms-red { background:#b94343; } .cms-black { background:#292d35; border:1px solid #555; }
.cms-price-group + .cms-price-group { margin-top:var(--space-12); }
.cms-price-group h2 { margin-bottom:var(--space-5); color:var(--color-gold); }
.cms-price-group td small { display:block; margin-top:4px; color:var(--color-text-muted); }
.cms-public-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; margin-top:var(--space-8); }
.cms-public-card { display:grid; grid-template-columns:minmax(150px, 40%) 1fr; min-height:230px; overflow:hidden; color:inherit; text-decoration:none; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.cms-public-card > img { width:100%; height:100%; min-height:230px; object-fit:cover; }
.cms-public-card > div { padding:26px; }
.cms-public-card h2, .cms-public-card h3 { margin:0 0 10px; color:var(--color-text-primary); }
.cms-public-card p { color:var(--color-text-secondary); line-height:1.65; }
.cms-camera-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.cms-camera { padding:20px; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.cms-camera h2 { margin:0 0 16px; font-size:1.15rem; }
.cms-camera iframe, .cms-camera img { width:100%; aspect-ratio:16/9; border:0; object-fit:cover; }
.cms-announcement-list { display:grid; gap:14px; }
.cms-announcement-list article { padding:24px; background:var(--color-bg-card); border-left:3px solid var(--color-gold); border-radius:0 8px 8px 0; }
.cms-announcement-list article > div { display:flex; justify-content:space-between; gap:12px; color:var(--color-text-muted); font-size:.78rem; }
.cms-announcement-list h2 { margin:12px 0 8px; font-size:1.25rem; }
.cms-managed-section { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:clamp(28px, 6vw, 72px); margin-top:var(--space-12); }
.cms-managed-section > img { width:100%; max-height:520px; object-fit:cover; border-radius:8px; }
.cms-managed-section .btn { margin-top:20px; }

.managed-article { max-width:920px; margin:0 auto; }
.managed-article > :first-child { margin-top:0; }
.managed-article img { width:100%; height:auto; max-height:760px; object-fit:contain; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.managed-map { max-width:920px; margin:48px auto 0; overflow:hidden; border:1px solid var(--color-border); border-radius:8px; }
.managed-map iframe { display:block; width:100%; height:420px; border:0; }
.managed-map-content { max-width:var(--container-max); text-align:center; }
.managed-map-content img { margin-top:24px; }
.page-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:36px; }
.cms-home-section:nth-of-type(even), .cms-home-news { background:var(--color-bg-secondary); }
.home-news-section { background:var(--color-bg-secondary); }
.discover-link { margin-top:24px; }
.cms-testimonial-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.cms-testimonial-grid blockquote { margin:0; padding:26px; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.cms-testimonial-grid blockquote p { color:var(--color-text-secondary); line-height:1.8; }
.cms-testimonial-grid footer { display:flex; flex-direction:column; margin-top:18px; }
.cms-testimonial-grid footer span { color:var(--color-text-muted); font-size:.82rem; }
.cms-detail-meta { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:24px; color:var(--color-gold); }
.cms-detail-address { margin-top:28px; padding:20px; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.cms-detail-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--color-border); }
.cms-video { margin-top:32px; } .cms-video iframe { width:100%; aspect-ratio:16/9; border:0; }
.cms-contact-layout { display:grid; grid-template-columns:minmax(240px, .7fr) minmax(0, 1.3fr); gap:48px; }
.cms-contact-form { display:grid; gap:18px; }
.cms-contact-form label { display:grid; gap:8px; color:var(--color-text-secondary); font-weight:600; }
.cms-contact-form input, .cms-contact-form textarea { width:100%; padding:13px 14px; color:var(--color-text-primary); background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:6px; font:inherit; }
.cms-contact-form input:focus, .cms-contact-form textarea:focus { outline:2px solid var(--color-gold); outline-offset:1px; }
.cms-form-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cms-honeypot { position:absolute !important; left:-9999px; }
@media (max-width:900px) { .cms-public-grid, .cms-camera-grid, .cms-testimonial-grid { grid-template-columns:1fr; } .cms-managed-section, .cms-contact-layout { grid-template-columns:1fr; } }
@media (max-width:600px) { .cms-public-card { grid-template-columns:1fr; } .cms-public-card > img { height:210px; min-height:0; } .cms-form-pair { grid-template-columns:1fr; } }

/* CMS data inside the original Davraz page language */
.responsive-table { width:100%; overflow-x:auto; margin-top:var(--space-8); }
.facility-status { display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap; }
.facility-status::before { width:8px; height:8px; border-radius:50%; background:currentColor; content:''; }
.facility-status.open { color:#81c784; }
.facility-status.closed { color:#e57373; }
.facility-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:var(--space-10); }
.facility-card { padding:24px; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.facility-card-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.facility-card-top h3 { margin:0; font-size:1.1rem; }
.facility-card-top > span { color:var(--color-gold); font-size:.75rem; text-align:right; }
.facility-card p { color:var(--color-text-secondary); font-size:.9rem; line-height:1.7; }
.facility-meta { display:flex; justify-content:space-between; gap:12px; margin-top:20px; padding-top:14px; border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:.78rem; }
.slope-summary { display:grid; grid-template-columns:repeat(3,1fr); margin:var(--space-8) 0; overflow:hidden; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.slope-summary div { display:flex; flex-direction:column; align-items:center; padding:24px; }
.slope-summary div + div { border-left:1px solid var(--color-border); }
.slope-summary strong { color:var(--color-gold); font-family:var(--font-heading); font-size:2rem; }
.slope-summary span { color:var(--color-text-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:1px; }
.slope-level { display:inline-flex; padding:4px 10px; color:#fff; border-radius:5px; font-size:.78rem; font-weight:700; }
.slope-level.blue { background:#3976bf; } .slope-level.red { background:#b94343; } .slope-level.black { background:#252831; border:1px solid #59606e; }
.page-intro { max-width:760px; margin:0 auto var(--space-10); color:var(--color-text-secondary); font-size:1.05rem; line-height:1.8; text-align:center; }
.price-block + .price-block { margin-top:var(--space-12); }
.price-block-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:var(--space-4); }
.price-block-header h2 { margin:0; }.price-block-header span { color:var(--color-gold); font-size:.85rem; }
.price-block td small { display:block; margin-top:5px; color:var(--color-text-muted); }
.camera-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.camera-card { padding:20px; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }
.camera-title { display:flex; align-items:center; gap:10px; margin-bottom:14px; }.camera-title > span { width:9px; height:9px; border-radius:50%; background:#ef5350; box-shadow:0 0 0 5px rgba(239,83,80,.12); }.camera-title h2 { margin:0; font-size:1.1rem; }
.camera-frame { position:relative; display:grid; place-items:center; overflow:hidden; aspect-ratio:16/9; background:var(--color-bg-primary); border-radius:6px; }.camera-frame iframe,.camera-frame img { width:100%; height:100%; border:0; object-fit:cover; }.camera-frame .btn { position:absolute; }

/* Canlı yayın player'ı: her ekrana sığan 16:9 responsive kutu (15"/18" dizüstü, tablet, telefon) */
.camera-player-container { position:relative; width:100%; aspect-ratio:16/9; min-height:220px; margin-bottom:40px; background:#000; border-radius:8px; overflow:hidden; }
.camera-player-container iframe,
.camera-player-container video,
.camera-player-container embed,
.camera-player-container object { position:absolute; inset:0; width:100% !important; height:100% !important; border:0; }
.weather-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:32px; overflow:hidden; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:8px; }.weather-strip div { display:flex; flex-direction:column; gap:6px; padding:22px; text-align:center; }.weather-strip div+div { border-left:1px solid var(--color-border); }.weather-strip span { color:var(--color-text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:1px; }.weather-strip strong { color:var(--color-gold); font-size:1.2rem; }
@media(max-width:900px){.facility-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-grid{grid-template-columns:1fr}.weather-strip{grid-template-columns:repeat(2,1fr)}.weather-strip div:nth-child(3){border-left:0;border-top:1px solid var(--color-border)}.weather-strip div:nth-child(4){border-top:1px solid var(--color-border)}}
@media(max-width:600px){.facility-card-grid{grid-template-columns:1fr}.slope-summary{grid-template-columns:1fr}.slope-summary div+div{border-left:0;border-top:1px solid var(--color-border)}.weather-strip{grid-template-columns:1fr}.weather-strip div+div,.weather-strip div:nth-child(3){border-left:0;border-top:1px solid var(--color-border)}.price-block-header{align-items:flex-start;flex-direction:column}}
@media(max-width:900px){.cms-slider .hero-title{font-size:2.25rem}.cms-slider .hero-title .line{white-space:normal}}
@media(max-width:600px){.cms-slider .hero-title{font-size:1.25rem}}
.announcement-detail { padding:clamp(24px,5vw,52px); background:var(--color-bg-card); border:1px solid var(--color-border); border-top:3px solid var(--color-gold); border-radius:8px; }
.announcement-meta { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }.announcement-meta span,.announcement-meta time { padding:5px 10px; color:var(--color-text-muted); background:var(--color-bg-primary); border-radius:5px; font-size:.76rem; text-transform:uppercase; }
.announcement-lead { margin-bottom:28px; color:var(--color-text-secondary); font-size:1.1rem; line-height:1.8; }.announcement-detail>.btn { margin-top:28px; margin-right:8px; }

/* =============================================
   HOTEL DETAIL PAGE
============================================= */
.hotel-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.hotel-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 5px 30px rgba(0,0,0,0.04);
    padding: 35px;
    border: 1px solid var(--color-border);
}

.hotel-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-secondary);
    margin-bottom: 25px;
}

.hotel-image-wrap {
    margin-bottom: 30px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.hotel-main-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 450px;
    display: block;
}

.hotel-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.hotel-content h2, .hotel-content h3 {
    color: var(--color-text-primary);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-family: var(--font-heading);
    font-weight: 700;
}

.hotel-content p {
    margin-bottom: 1em;
}

/* Sidebar Widgets */
.sidebar-widget {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid var(--color-border);
}

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}

.sidebar-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--color-gold);
    border-radius: 2px;
}

.sidebar-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-contact-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    align-items: flex-start;
}

.sidebar-contact-list li:last-child {
    margin-bottom: 0;
}

.sidebar-contact-list li svg, .sidebar-contact-list li i {
    color: var(--color-gold);
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.sidebar-contact-list li div {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
}

.sidebar-contact-list li strong {
    color: var(--color-text-primary);
    margin-bottom: 4px;
    font-weight: 600;
}

.sidebar-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-links-list li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-links-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.sidebar-links-list li a {
    display: block;
    transition: var(--transition-base);
    color: var(--color-text-primary);
}

.sidebar-links-list li a:hover {
    color: var(--color-gold) !important;
    transform: translateX(3px);
}

.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sidebar-tags span {
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
}

@media (max-width: 991px) {
    .hotel-layout {
        grid-template-columns: 1fr;
    }
}

/* Tight Gallery (Legacy Masonry Replica) */
.tight-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 1rem 0;
}
.tight-gallery a {
    display: block;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--color-border); /* slight separation */
}
.tight-gallery img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.tight-gallery a:hover img {
    transform: scale(1.08);
    filter: brightness(1.1);
    z-index: 2;
}

@media (max-width: 1200px) {
    .tight-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 992px) {
    .tight-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .tight-gallery {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   ANASAYFA RESPONSIVE GRIDS (Haberler, Ekipman, Galeri vb)
   ============================================= */
.home-news-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 1.5rem; 
}

.home-news-grid-split { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5rem; 
}

.home-businesses-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.5rem; 
}

.home-businesses-grid-split { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5rem; 
}

.home-gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 0; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

@media (max-width: 900px) { 
    .home-businesses-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}

@media (max-width: 600px) { 
    /* Mobil'de Haberler ve Duyurular yan yana 2'li */
    .home-news-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1rem; 
    } 
    /* Mobil'de İşletmeler ve Ekipmanlar yan yana 2'li */
    .home-businesses-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1rem; 
    } 
    /* Mobil'de Galeri yan yana 4'lü */
    .home-gallery-grid { 
        grid-template-columns: repeat(4, 1fr); 
    } 
}

/* Canlı Yayın: sağlayıcı oynatıcısı (videoyu ve kamera listesini kendisi ekler) */
.live-embed { width: 100%; margin: 0 auto 2.5rem; }
.live-embed iframe { width: 100%; height: 720px; border: 0; display: block; background: #000; border-radius: var(--radius-lg); }
@media (max-width: 768px) {
    .live-embed iframe { height: 560px; }
}

.live-embed--off { padding: 3rem 1.5rem; text-align: center; background: var(--color-bg-card); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-secondary); }
.live-embed--off p { margin: 0; }