/* Shared design system for Dion'S Hotel - Beyaz, Mavi, Kahverengi Harmonisi */
:root{
    /* Ana Renk Paleti: Beyaz, Mavi, Kahverengi Harmonisi (Modernize) */
    --ivory: #FDFBF6;                     /* Saf beyaz - ana arkaplan */
    --cream-white: #F6F0E6;               /* Yumuşak kırık beyaz - ikincil arkaplan */
    --ice-blue: #F1F6FB;                  /* Çok açık mavi - vurgular için */
    --powder-blue: #DCE9F7;               /* Açık mavi - arkaplan tonları */
    --sky-blue: #B8D4F2;                  /* Orta mavi - border ve detaylar */
    --ocean-blue: #4E87C4;                /* Koyu mavi - ana mavi renk */
    --deep-blue: #29537C;                 /* Çok koyu mavi - metin ve vurgular */
    
    --warm-beige: #EEE2D3;                /* Açık kahverengi - yumuşak arkaplan */
    --sand-brown: #D9C3A8;                /* Orta kahverengi - kartlar için */
    --wood-brown: #B79063;                /* Altın kahverengi - aksan rengi */
    --coffee-brown: #8A6644;              /* Koyu kahverengi - butonlar */
    --espresso-brown: #4B3627;            /* Çok koyu kahverengi - metin */
    --mid-brown: #A47A52;                 /* Dengeli kahverengi - ikincil vurgu */
    
    /* Renk Uygulamaları */
    --primary-color: var(--ocean-blue);      /* Ana mavi */
    --secondary-color: var(--mid-brown);     /* İkincil kahverengi */
    --accent-color: var(--wood-brown);       /* Parlayan aksan */
    --text: var(--espresso-brown);           /* Ana metin rengi */
    --text-muted: #5A708C;                   /* İkincil metin rengi */
    --content-bg: var(--cream-white);        /* İçerik arkaplanı */
    --accent-bg: var(--ice-blue);            /* Vurgu arkaplanı */
    
    /* Sistem değişkenleri */
    --radius: 8px;
    --container: 1200px;
    --transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Animasyonlar === */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg, var(--ivory) 0%, var(--powder-blue) 45%, var(--warm-beige) 100%);color:var(--text);font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Header / Nav */
body::before{content:"";position:fixed;inset:0;background:linear-gradient(135deg, rgba(222, 236, 249, 0.6), rgba(249, 238, 225, 0.4));z-index:-2;pointer-events:none;}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 20%, rgba(78,135,196,0.18), transparent 55%),radial-gradient(circle at 80% 10%, rgba(167,123,82,0.22), transparent 60%);z-index:-1;pointer-events:none;}

header.site-header{position:sticky;top:0;backdrop-filter:blur(12px);background:linear-gradient(135deg, rgba(24,17,8,0.98), rgba(45,32,17,0.98));border-bottom:1px solid rgba(184,212,242,0);z-index:1000;box-shadow:0 4px 24px rgba(41,83,124,0.08);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.nav-inner::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(24,17,8,0.98), rgba(45,32,17,0.98));z-index:-1;border-radius:0 24px 24px 0}
.nav-inner{position:relative}
.nav-inner .brand img{filter:drop-shadow(0 12px 24px rgba(0,0,0,0.45))}
.brand{font-weight:600;letter-spacing:1px;color:#1d150a;font-size:18px}
.brand img { height: 84px; width: auto; border-radius:12px; border:1px solid rgba(255,255,255,0.12); }
.brand { margin-left: -12px; }

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all var(--transition);
}
.hamburger-menu:hover {
    background: var(--ice-blue);
}
.hamburger-line {
    width: 24px;
    height: 3px;
    background: var(--text);
    margin: 3px 0;
    border-radius: 2px;
    transition: all var(--transition);
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Desktop Navigation */
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
nav a{font-weight:500;color:rgba(243,224,195,0.85);font-size:14px;padding:10px 16px;border-radius:8px;transition:all var(--transition)}
nav a:hover, nav a[aria-current="page"] {color:#fff5e4;background:linear-gradient(135deg, rgba(86,137,193,0.88), rgba(181,134,83,0.94));box-shadow:0 12px 26px rgba(12,8,4,0.45);}

/* Mobile Navigation Overlay */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(140deg, rgba(253,251,246,0.96), rgba(220,233,247,0.94), rgba(215,187,150,0.88));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform var(--transition);
}
.mobile-nav.active {
    transform: translateX(0);
}
.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.mobile-nav li {
    margin: 20px 0;
}
.mobile-nav a {
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    padding: 15px 30px;
    border-radius: 12px;
    transition: all var(--transition);
    display: block;
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] {
    background: linear-gradient(135deg, rgba(78,135,196,0.95), rgba(167,123,82,0.9));
    color: white;
    transform: scale(1.06);
}
.mobile-nav .mobile-cta {
    margin-top: 40px;
}
.mobile-nav .mobile-contact {
    margin-top: 32px;
    text-align: center;
    color: var(--text);
    font-size: 16px;
    display: grid;
    gap: 8px;
}
.mobile-nav .mobile-contact a {
    color: var(--text);
    font-weight: 600;
}

.cta-reserve{
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color:white;padding:12px 20px;border-radius:14px;
    font-weight:600;box-shadow:0 10px 24px rgba(41,83,124,0.22);
    transition: all var(--transition);
    letter-spacing:0.4px;
}
.cta-reserve:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(167,123,82,0.28);
}


/* Hero & Page Header */
.hero, .page-header{min-height:60vh;display:grid;place-items:center;padding:60px 24px;background:linear-gradient(135deg, rgba(78,135,196,0.35), rgba(167,123,82,0.35));background-size:cover;background-position:center;border-bottom:1px solid rgba(184,212,242,0.5); text-align: center;}
.hero .hero-inner, .page-header .hero-inner {max-width:1100px;margin:0 auto;padding:48px;background:linear-gradient(180deg, rgba(253,251,246,0.95), rgba(236,245,255,0.9));border-radius:18px;box-shadow:0 16px 44px rgba(41,83,124,0.16);backdrop-filter: blur(6px);}
.hero .title, .page-header .title {
    font-size:48px;font-weight:300;color:var(--text);line-height:1.1;
    animation: fadeInDown 0.8s ease-out forwards;
}
.hero .lead, .page-header .lead {
    color:var(--text-muted);margin-top:12px;font-size:16px; max-width: 600px; margin-left: auto; margin-right: auto;
    opacity: 0;
    animation: fadeInDown 0.8s ease-out 0.2s forwards;
}

/* Parallax Showcase */
.room-highlight {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 420px;
    gap: 48px;
    align-items: center;
}
.room-highlight__content .kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.room-highlight__content h2 {
    font-size: 36px;
    margin: 0 0 16px 0;
    color: var(--text);
}
.room-highlight__content p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 18px;
}
.room-highlight__content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.room-highlight__content ul li {
    position: relative;
    padding-left: 20px;
    color: var(--text);
    font-size: 15px;
}
.room-highlight__content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.room-highlight__gallery {
    position: relative;
}
.photo-stack {
    width: 100%;
    position: relative;
    height: 360px;
}
.photo-stack__item {
    position: absolute;
    width: 80%;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(41,83,124,0.18);
    transition: transform var(--transition), box-shadow var(--transition);
    object-fit: cover;
    height: 260px;
    border: 4px solid rgba(253,251,246,0.85);
}
.photo-stack__item--top { top: 0; left: 10%; z-index: 3; }
.photo-stack__item--middle { top: 50px; left: 0; z-index: 2; transform: rotate(-4deg); }
.photo-stack__item--bottom { top: 110px; left: 20%; z-index: 1; transform: rotate(5deg); }
.photo-stack:hover .photo-stack__item { box-shadow: 0 24px 52px rgba(41,83,124,0.22); }
.photo-stack:hover .photo-stack__item--middle { transform: rotate(-2deg) translateY(-6px); }
.photo-stack:hover .photo-stack__item--bottom { transform: rotate(3deg) translateY(-4px); }
.btn{display:inline-block;padding:14px 26px;border-radius:16px;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:white;font-weight:600;transition:all var(--transition);border:none;cursor:pointer;box-shadow:0 12px 28px rgba(41,83,124,0.18);}
.btn:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 18px 36px rgba(167,123,82,0.24)}

/* Layout sections */
main{padding:0 0 64px}
.main-with-top{padding-top:64px}
.about-section{display:grid;grid-template-columns:1fr 420px;gap:42px;align-items:center;margin-bottom:56px}
.about-section p{color:var(--text-muted);line-height:1.8;font-size:16px}
.about-section .aside-card{background:linear-gradient(180deg,var(--cream-white), var(--powder-blue));padding:24px;border-radius:16px;border:1px solid rgba(184,212,242,0.6);box-shadow:0 12px 32px rgba(41,83,124,0.12)}

/* Rooms */
.rooms-section{margin:24px 0 64px}
.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.room-card{
    background:linear-gradient(180deg, rgba(253,251,246,0.98), rgba(220,233,247,0.95));border-radius:16px;overflow:hidden;
    border:1px solid rgba(184,212,242,0.65);box-shadow:0 12px 32px rgba(41,83,124,0.12); 
    display: flex; flex-direction: column;
    transition: all var(--transition);
}
.room-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(41,83,124,0.2);
    border-color: rgba(167,123,82,0.75);
}
.room-card .meta{padding:24px; flex-grow: 1;}
.room-card h3{margin:0;font-weight:600;font-size:18px;color:var(--text)}
.room-card p{margin:12px 0 0;color:var(--text-muted);font-size:14px;line-height:1.6}
.room-card .room-cta{display:flex;justify-content:flex-end;padding:18px 24px; border-top: 1px solid rgba(184,212,242,0.5); background:linear-gradient(135deg, rgba(220,233,247,0.85), rgba(215,187,150,0.6));}
.room-card .room-cta .btn{padding:10px 18px;border-radius:12px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white;}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:12px}
.gallery-grid .item{height:250px;overflow:hidden;border-radius:14px;box-shadow:0 12px 28px rgba(41,83,124,0.16);border:1px solid rgba(184,212,242,0.5);background:linear-gradient(180deg, rgba(253,251,246,0.6), rgba(220,233,247,0.6));}
.gallery-grid .item img{height:100%;width:100%;object-fit:cover;transition:transform 300ms ease}
.gallery-grid .item:hover img{transform:scale(1.06)}

/* Contact */
.contact-section{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start;margin-top:48px}
.contact-section form{background:linear-gradient(180deg, rgba(253,251,246,0.98), rgba(236,245,255,0.9));padding:28px;border-radius:18px;border:1px solid rgba(184,212,242,0.6);box-shadow:0 16px 40px rgba(41,83,124,0.14)}
.field{display:flex;flex-direction:column;margin-bottom:16px}
.field label{font-size:13px;color:var(--text-muted);margin-bottom:8px;font-weight:500}
.field input,.field textarea{padding:14px;border-radius:8px;border:1px solid var(--sky-blue);font-size:14px; transition: all var(--transition);background:var(--ice-blue);}
.field input:focus,.field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(75,144,194,0.15);
    background:var(--ivory);
}
.field textarea{min-height:120px;resize:vertical}
.contact-section .contact-card{background:linear-gradient(180deg,var(--cream-white),rgba(220,233,247,0.92));padding:28px;border-radius:18px;border:1px solid rgba(184,212,242,0.6);box-shadow:0 16px 40px rgba(41,83,124,0.14)}
.map-container iframe { width: 100%; height: 400px; border: 0; border-radius: 16px; margin-top: 24px; box-shadow:0 16px 36px rgba(41,83,124,0.16);}

/* Footer */
footer.site-footer{padding:48px 0;margin-top:48px;background:linear-gradient(180deg, rgba(253,251,246,0.95), rgba(220,233,247,0.9), rgba(215,187,150,0.85));border-top:1px solid rgba(184,212,242,0.5);box-shadow:0 -12px 32px rgba(41,83,124,0.12);}
.site-footer--flush{margin-top:0;}
.site-footer .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
.site-footer .footer-contact{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#1d150a;font-weight:600}
.site-footer .footer-contact a{color:#1d150a;text-decoration:none;font-weight:600}
.muted{color:var(--text-muted);font-size:14px}

/* Responsive */
@media (max-width:1000px){
    .about-section{grid-template-columns:1fr}
    .rooms-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(3,1fr)}
    .contact-section{grid-template-columns:1fr}
    body::after{background:radial-gradient(circle at 20% 15%, rgba(78,135,196,0.22), transparent 55%),radial-gradient(circle at 80% 10%, rgba(167,123,82,0.18), transparent 60%);}
}
@media (max-width:640px){.nav-inner{padding:12px 0}.hero .hero-inner{flex-direction:column;align-items:flex-start;padding:22px}.hero .title{font-size:28px}.rooms-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}.site-footer .foot-inner{flex-direction:column;align-items:flex-start}}
/* ========================================= */
/* MOBİL CİHAZLAR       */
/* ========================================= */
/* Media Queries */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .nav-inner {
        padding: 12px 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    nav {
        display: none;
    }
    .brand {
        margin: 0;
        display: flex;
        align-items: center;
    }
    .brand img {
        height: 56px;
        margin: 0;
    }
    
    /* Show hamburger menu on mobile */
    .hamburger-menu {
        display: flex;
        margin-left: auto;
    }
    
    /* Hide desktop navigation on mobile */
    nav ul {
        display: none;
    }
    
    .cta-reserve {
        display: none; /* Hide CTA in header on mobile, will be in mobile nav */
    }
    
    .hero h1 { font-size: 3rem; }
    .hero-subtitle { font-size: 1.1rem; }
    
    .features-grid, .rooms-grid { grid-template-columns: 1fr; gap: 24px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .room-highlight { grid-template-columns: 1fr; }
    .room-highlight__gallery { margin-top: 32px; }
    .photo-stack { height: 280px; }
    .photo-stack__item { height: 200px; }
}

@media (min-width: 769px) {
    /* Hide mobile navigation on desktop */
    .mobile-nav {
        display: none !important;
    }
}

/* ========================================= */
/* LightGallery Color Harmonization */
/* ========================================= */
.lg-smooth .lg-outer {
    transition-timing-function: cubic-bezier(.2,.9,.25,1);
    background: linear-gradient(135deg, rgba(41,83,124,0.92), rgba(167,123,82,0.9));
}
.lg-smooth .lg-backdrop {
    background: linear-gradient(135deg, rgba(41,83,124,0.88), rgba(167,123,82,0.85));
}
.lg-smooth .lg-toolbar {
    background: linear-gradient(180deg, rgba(253,251,246,0.95), rgba(236,245,255,0.9));
    border-bottom: 1px solid rgba(184,212,242,0.4);
}
.lg-smooth .lg-toolbar .lg-icon {
    color: var(--text-muted);
}
.lg-smooth .lg-toolbar .lg-icon:hover {
    color: var(--accent-color);
}