/* --- CSS DEĞİŞKENLERİ (RENK PALETİ) --- */
:root {
    /* Ana Renkler - SİYAH/GOLD TEMA */
    --color-gold: #cba137;           
    --color-gold-dark: #a8852a;      
    --color-gold-light: #e6c86e;
    --color-bg-main: #000000;        
    --color-bg-secondary: #111111;   
    --color-bg-tertiary: #1a1a1a;    
    
    /* Metin Renkleri */
    --color-text-main: #f0f0f0;      
    --color-text-muted: #aaaaaa;     
    --color-text-dark: #121212;      

    /* Fontlar */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;

    /* Diğer */
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- GENEL AYARLAR --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

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

ul {
    list-style: none;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.section {
    padding: 80px 0;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-gold);
    margin-bottom: 1rem;
    font-weight: 600;
}

h2 {
    font-size: 2.5rem;
    line-height: 1.2;
}

p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.subtitle {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--color-text-main);
}

.subtitle-gold {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: var(--color-gold);
    font-weight: 600;
}

.text-center {
    text-align: center;
}

.margin-top {
    margin-top: 2rem;
}

/* --- BUTTONS --- */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
}

.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-text-dark);
}

.btn-gold:hover {
    background-color: var(--color-gold-dark);
    transform: translateY(-3px);
}

.btn-gold-dark {
    background-color: var(--color-bg-main);
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
}

.btn-gold-dark:hover {
    background-color: var(--color-gold);
    color: var(--color-bg-main);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-text-main);
    color: var(--color-text-main);
}

.btn-outline:hover {
    background-color: var(--color-text-main);
    color: var(--color-text-dark);
}

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

.btn-gold-outline:hover {
    background-color: var(--color-gold);
    color: var(--color-text-dark);
}

.btn-link {
    color: var(--color-gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-link:hover {
    color: var(--color-gold-light);
    gap: 10px;
}

/* --- HEADER --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 25px 0; /* Increased padding for more height */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: padding 0.3s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1350px; /* Increased width for menu */
    width: 95%;
    margin: 0 auto;
    padding: 0 20px; /* Override container padding */
}

.logo-img {
    height: 100px;
}
.footer-logo {
    height: 100px;
}

.navbar {
    display: flex;
    gap: 15px; /* Reduced gap */
    align-items: center;
}

.navbar a {
    font-size: 0.8rem; /* Reduced font size */
    font-weight: 600;
    position: relative;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Prevent text wrapping */
    display: inline-flex; /* Changed to inline-flex for alignment */
    align-items: center; /* Vertically align text and icon */
}

.navbar a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: var(--transition);
}

.navbar a:hover::after {
    width: 100%;
}

/* --- DROPDOWN MENU --- */
.dropdown {
    position: relative;
    display: inline-flex; /* Changed to inline-flex */
    align-items: center; /* Center content vertically */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-bg-secondary); /* Dark background */
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    z-index: 1000;
    border-top: 2px solid var(--color-gold);
    border-radius: 0 0 10px 10px;
    padding: 10px 0;
    top: 100%;
    left: 0;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

.dropdown-content a {
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    text-transform: capitalize; /* Only first letter capital for sub-items */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: rgba(203, 161, 55, 0.1);
    color: var(--color-gold);
    padding-left: 25px; /* Slide effect */
}

.dropdown-content a::after {
    display: none; /* Remove underline effect from main navbar links */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-main);
    font-size: 0.9rem;
}

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

.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-main);
}

/* --- HERO SECTION (CARD OVERLAY STYLE) --- */
.hero-section {
    padding: 140px 0 80px; /* Header height compensation */
    position: relative;
    width: 100%;
}

.hero-section .container {
    width: 100%;
    max-width: 1400px; /* Wider container for the banner */
}

.hero-wrapper {
    position: relative;
    width: 100%;
    min-height: 650px; /* Taller banner */
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 60px 80px; /* More padding to push card in */
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.5s ease;
}

.hero-wrapper:hover .hero-bg-image {
    transform: scale(1.02);
}

/* Dark overlay for text readability if needed */
.hero-bg-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); 
}

.hero-card {
    background-color: rgba(18, 18, 18, 0.95); /* Dark card for Black/Gold theme */
    backdrop-filter: blur(10px);
    color: var(--color-text-main);
    width: 100%;
    max-width: 550px;
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
    border: 1px solid rgba(203, 161, 55, 0.15); /* Subtle gold border */
}

.hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--color-text-main);
}

.hero-desc {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.hero-features {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-icon {
    width: 24px;
    height: 24px;
    background-color: var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.feature-item span {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-main);
}

/* Google Rating Badge */
.hero-rating-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #000;
    padding: 20px 30px;
    border-radius: 40px 0 40px 0; /* Top-Left rounded, Bottom-Right matches container */
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
    box-shadow: -5px -5px 20px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Inverted Radius Effect (Optional - creates the smooth curve connection) */
.hero-rating-badge::before {
    content: '';
    position: absolute;
    top: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    background: transparent;
    border-bottom-right-radius: 50%;
    box-shadow: 10px 10px 0 #fff; /* Fills the corner */
    display: none; /* Hidden for now as standard radius looks cleaner with this layout */
}

.rating-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.star-icon {
    color: #fbbc05; /* Google Star Color */
    font-size: 1.4rem;
}

.rating-score {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFF;
}

.g-logo img {
    width: 24px;
    height: 24px;
}

.rating-count {
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
    margin-left: 5px;
}

.rating-avatars {
    display: flex;
    margin-top: 10px;
    padding-left: 5px;
}

.rating-avatars img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-left: -12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.rating-avatars img:first-child {
    margin-left: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-section {
        padding-top: 100px;
    }

    .hero-wrapper {
        flex-direction: column;
        padding: 0;
        min-height: auto;
        border-radius: 20px;
    }

    .hero-bg-image {
        position: relative;
        height: 300px;
        border-radius: 20px 20px 0 0;
    }
    
    .hero-card {
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 20px 20px;
        padding: 30px;
        background-color: var(--color-bg-secondary);
        box-shadow: none;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    .hero-rating-badge {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 20px auto;
        width: fit-content;
    }
}

/* If user strictly wants "Black-Gold" theme even for the card:
   Uncomment the block below to make the card dark. 
   However, to match the "layout" exactly, the reference has a high contrast card.
   Let's stick to the user's "Siyah-Gold" request for the THEME, so we make the card DARK.
*/

.hero-card {
    background-color: rgba(18, 18, 18, 0.95); /* Dark card */
    border: 1px solid rgba(203, 161, 55, 0.3); /* Gold border */
    color: #fff;
}

.hero-title {
    font-size: 2.8rem;
    color: #fff; /* White title on dark card */
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
}

.hero-desc {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 3rem;
}

.hero-buttons .btn-outline {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.hero-buttons .btn-outline:hover {
    background-color: var(--color-gold);
    color: #000;
}

.hero-features {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-icon {
    width: 24px;
    height: 24px;
    background-color: var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.check-icon i {
    color: #000;
    font-size: 0.7rem;
}

.feature-item span {
    font-size: 0.85rem;
    color: #ddd;
    line-height: 1.2;
    font-weight: 500;
}

/* --- ABOUT SECTION --- */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text h2 {
    color: #fff;
}

.about-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.accordion {
    margin-top: 20px;
}

.accordion-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.accordion-header {
    width: 100%;
    padding: 15px 0;
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    font-size: 1.1rem;
    font-family: var(--font-heading);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header i {
    color: var(--color-gold);
    transition: transform 0.3s;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content p {
    padding-bottom: 15px;
    font-size: 0.95rem;
}

.accordion-item.active .accordion-header i {
    transform: rotate(45deg);
}

.accordion-item.active .accordion-content {
    max-height: 200px;
}

/* --- SERVICES SECTION --- */
.services-section {
    background-color: var(--color-bg-secondary);
}

.section-header {
    max-width: 800px;
    margin: 0 auto 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card {
    background-color: var(--color-bg-tertiary);
    padding: 30px;
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: 1px solid transparent;
}

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

.icon-box {
    width: 60px;
    height: 60px;
    background-color: rgba(203, 161, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.icon-box i {
    font-size: 1.5rem;
    color: var(--color-gold);
}

.service-card h3 {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 15px;
}

.service-list {
    margin-bottom: 20px;
}

.service-list li {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-list li i {
    color: var(--color-gold);
    font-size: 0.7rem;
}

.planning-box {
    background-color: var(--color-gold);
    padding: 30px;
    border-radius: var(--border-radius);
    color: var(--color-text-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.planning-box h3 {
    color: var(--color-text-dark);
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.planning-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

/* --- OFFERS SECTION --- */
.offers-section {
    background-color: var(--color-bg-main); /* Black background */
    padding-bottom: 100px;
}

.offers-section .section-header h2 {
    color: var(--color-gold);
}

.offers-section .subtitle-gold {
    color: var(--color-gold);
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
    align-items: center;
}

.offer-card {
    background-color: var(--color-bg-tertiary); /* Dark card */
    padding: 40px 20px;
    text-align: center;
    border-radius: 20px 20px 20px 0;
    transition: var(--transition);
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    color: var(--color-text-main);
    border: 1px solid rgba(203, 161, 55, 0.3); /* Gold border */
}

.offer-card.featured {
    background-color: var(--color-bg-tertiary);
    transform: scale(1.1);
    z-index: 2;
    padding: 50px 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7);
    border-radius: 20px 20px 20px 20px;
    border: 2px solid var(--color-gold); /* Stronger gold border */
}

.offer-check {
    width: 30px;
    height: 30px;
    background-color: var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.offer-check i {
    color: #000;
    font-size: 0.8rem;
}

.offer-card h3 {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 500;
}

.offer-card.featured h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gold);
}

.discount {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-gold);
}

.discount-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1.2;
}

/* --- PROCESS SECTION (TIMELINE) --- */
.process-section {
    background-color: var(--color-bg-secondary); /* Dark background */
    padding-top: 0;
    position: relative;
    overflow: hidden;
}

.process-section .section-header h2 {
    color: var(--color-gold);
}

.process-timeline {
    position: relative;
    max-width: 1000px;
    margin: 60px auto 0;
    padding-bottom: 50px;
}

.timeline-line-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.dashed-line-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dashed-line-svg path {
    stroke: rgba(203, 161, 55, 0.3); /* Gold dashed line */
    stroke-dasharray: 8, 8;
}

.timeline-item {
    position: relative;
    width: 50%;
    margin-bottom: 60px;
    z-index: 1;
    box-sizing: border-box;
}

.timeline-item.left {
    left: 0;
    text-align: right;
    padding-right: 100px; /* Gap from center line */
}

.timeline-item.right {
    left: 50%;
    text-align: left;
    padding-left: 100px; /* Gap from center line */
}

.timeline-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.timeline-item.left .timeline-content {
    align-items: flex-end; /* Align content to the right (towards center) */
}

.timeline-item.right .timeline-content {
    align-items: flex-start; /* Align content to the left (towards center) */
}

.timeline-icon {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-gold);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    margin-bottom: 5px;
}

/* Remove absolute positioning overrides */
.timeline-item.left .timeline-icon,
.timeline-item.right .timeline-icon {
    left: auto;
    right: auto;
}

.timeline-icon i {
    font-size: 1.5rem;
    color: var(--color-gold);
}

.plus-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    color: var(--color-gold);
    font-size: 0.8rem;
}

.timeline-content h3 {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 15px;
}

.timeline-content p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.process-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.process-actions .btn-gold {
    background-color: var(--color-gold);
    color: #000;
    padding: 15px 40px;
    font-size: 1rem;
}

.phone-pill {
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-gold);
    padding: 10px 25px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.phone-pill a {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone-pill i {
    color: var(--color-gold);
}

/* Responsive Timeline */
@media (max-width: 768px) {
    .timeline-line-container {
        left: 30px;
        transform: none;
    }
    
    .dashed-line-svg path {
        d: path("M30,0 V600"); /* Straight line on mobile */
    }

    .timeline-item {
        width: 100%;
        left: 0 !important;
        text-align: left !important;
        padding-left: 80px;
        padding-right: 20px;
    }

    .timeline-item.left .timeline-icon,
    .timeline-item.right .timeline-icon {
        left: 0;
        right: auto;
    }
}

/* --- TESTIMONIALS SECTION --- */
.testimonials-section {
    background-color: var(--color-bg-main);
    padding-top: 0;
}

.testimonials-top-bg {
    background-color: var(--color-bg-secondary); /* Darker top section */
    padding: 80px 0 120px; /* Extra bottom padding for wave overlap */
    position: relative;
}

.testimonial-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    /* Ensure slider track works */
    width: 100%; 
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.slide {
    min-width: 100%;
    position: relative;
}

.main-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* Fake Slider Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: var(--transition);
}

.slider-arrow:hover {
    background-color: var(--color-gold);
    color: #fff;
}

.slider-arrow.left { left: 20px; }
.slider-arrow.right { right: 20px; }

.slider-arrow i {
    color: #333;
    font-size: 0.9rem;
}

/* Floating Review Card on Image */
.floating-review-card {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background-color: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(5px);
    padding: 25px;
    border-radius: 15px;
    max-width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-left: 4px solid var(--color-gold);
    z-index: 2;
}

.floating-review-card p {
    font-style: italic;
    font-size: 0.9rem;
    color: #ddd;
    margin-bottom: 15px;
    line-height: 1.5;
}

.author-mini {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crown-icon {
    color: var(--color-gold);
    font-size: 1.2rem;
}

.author-mini .name {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    letter-spacing: 0.5px;
}

.author-mini .role {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

/* Testimonial Text Content */
.testimonial-content {
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-content h2 {
    color: var(--color-gold);
    font-size: 2.2rem;
}

.testimonial-content p {
    color: var(--color-text-muted);
}

/* Google Rating Box */
.google-rating-box {
    background-color: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    width: fit-content;
}

.g-badge-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.g-badge-top .stars i {
    color: #FFD700;
    font-size: 1rem;
}

.g-badge-text strong {
    display: block;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 2px;
}

.g-badge-text span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Wave Divider */
.wave-divider {
    position: relative;
    margin-top: -60px; /* Pull up to overlap */
    z-index: 1;
    line-height: 0;
}

.wave-divider svg {
    width: 100%;
    height: auto;
    display: block;
}

.wave-divider path {
    fill: var(--color-bg-secondary); /* Matches top section bg */
}

/* Bottom Grid Cards */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
    margin-top: 30px; /* Increased spacing as requested */
}

.review-card {
    background-color: var(--color-bg-tertiary);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: var(--transition);
}

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

.review-card .stars {
    margin-bottom: 15px;
}

.review-card .stars i {
    color: #FFD700;
    font-size: 0.9rem;
}

.review-card p {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 20px;
    line-height: 1.6;
}

.author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

.crown-icon-sm {
    width: 35px;
    height: 35px;
    background-color: rgba(203, 161, 55, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crown-icon-sm i {
    color: var(--color-gold);
    font-size: 0.9rem;
}

.author .name {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}

.author .role {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        margin-top: 0;
    }
    
    .testimonial-image-wrapper {
        margin-bottom: 40px;
    }
    
    .floating-review-card {
        position: relative;
        bottom: auto;
        right: auto;
        margin: -40px auto 0;
        width: 90%;
        max-width: none;
    }
}

/* --- RESERVATION SECTION --- */
.reservation-section {
    padding: 0;
    margin-bottom: 80px;
}

.reservation-box {
    background-image: none;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    position: relative;
}

.reservation-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}

.reservation-form-container {
    flex: 2;
    padding: 60px;
    background-color: rgba(26, 26, 26, 0.95);
    position: relative;
    z-index: 1;
    /* clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); */ /* kaldırıldı */
    border-radius: 20px; /* istersen hafif yuvarlat */
}


.reservation-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.form-group input, .form-group select {
    padding: 12px;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    color: #fff;
    font-family: var(--font-body);
}

.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.full-width {
    grid-column: span 2;
}

.form-note {
    font-size: 0.8rem;
    margin-top: 15px;
    text-align: center;
}

.reservation-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
    padding: 40px;
}

.stat-item {
    text-align: center;
    color: #fff;
}

.icon-circle {
    width: 60px;
    height: 60px;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.icon-circle i {
    font-size: 1.5rem;
    color: var(--color-gold);
}

.stat-item strong {
    display: block;
    font-size: 1.5rem;
    color: var(--color-gold);
}

/* --- FAQ SECTION --- */
.faq-section {
    background-color: var(--color-bg-secondary);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.faq-item {
    background-color: var(--color-bg-tertiary);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.faq-header {
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-header i {
    color: var(--color-gold);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
}

.faq-content p {
    padding-bottom: 20px;
    font-size: 0.9rem;
}

.faq-item.active .faq-content {
    max-height: 150px;
}

.faq-item.active .faq-header i {
    transform: rotate(45deg);
}

/* --- BLOG SECTION --- */
.blog-section {
    background-color: var(--color-bg-main);
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Text takes less space, cards take more */
    gap: 50px;
    align-items: center;
}

.blog-text-content {
    padding-right: 20px;
}

.blog-text-content .subtitle-gold {
    display: block;
    margin-bottom: 15px;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.blog-text-content h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 30px;
    color: var(--color-gold);
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 0; /* Reset margin */
}

.blog-card {
    background-color: var(--color-bg-tertiary);
    border-radius: 20px; /* More rounded as per reference */
    overflow: hidden;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.blog-image {
    height: 220px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.1);
}

.blog-content {
    padding: 25px;
}

.blog-category {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--color-gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.blog-content h3 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 0;
    font-weight: 600;
}

/* Responsive for Blog */
@media (max-width: 992px) {
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .blog-text-content {
        text-align: center;
        padding-right: 0;
    }
    
    .blog-text-content h2 {
        font-size: 2.5rem;
    }
}

/* --- CONTACT SECTION --- */
.contact-section {
    background-color: var(--color-bg-secondary);
    padding-bottom: 0;
}

.contact-wrapper {
    display: flex;
    background-color: var(--color-bg-tertiary);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

.contact-info-box {
    flex: 1;
    padding: 60px;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-main);
}

.contact-info-box h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.contact-info-box .subtitle-gold {
    color: var(--color-gold);
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.contact-info-box p {
    color: var(--color-text-muted);
    line-height: 1.6;
}

.info-item {
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 25px;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item strong {
    color: #fff;
    display: block;
    margin-bottom: 5px;
}

.info-item i {
    color: var(--color-gold);
    width: 25px;
    margin-right: 10px;
}

.contact-buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.contact-buttons .btn-outline {
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.contact-buttons .btn-outline:hover {
    background-color: #fff;
    color: #000;
}

.map-box {
    flex: 1;
    min-height: 500px;
}

/* --- FOOTER --- */
.footer {
    padding: 10px 50px;
    background-color: #111;
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
    margin-top: 80px; /* Space for floating bar */
}

/* Call Back Bar */
.call-back-bar {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.call-back-content {
    background-color: var(--color-bg-tertiary); /* Dark theme adaptation */
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 15px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.cb-label {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}

.cb-form {
    display: flex;
    gap: 15px;
}

.cb-form input {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 25px;
    padding: 10px 20px;
    color: #fff;
    width: 200px;
}

.cb-form input:focus {
    outline: none;
    border-color: var(--color-gold);
}

/* Footer Main Grid */
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1.5fr;
    gap: 40px;
    padding-top: 80px; /* Space below floating bar */
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.footer-brand h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #fff;
}

.footer-brand .slogan {
    color: var(--color-text-muted);
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: #fff;
}

.contact-row i {
    width: 30px;
    height: 30px;
    background-color: rgba(203, 161, 55, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: 0.8rem;
}

.mt-20 { margin-top: 20px; display: inline-block; }

/* Links Columns */
.footer-col h4 {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: var(--color-gold);
    padding-left: 5px;
}

/* Campaign Box */
.campaign-box {
    background: linear-gradient(135deg, #e6c86e 0%, #cba137 100%);
    padding: 30px;
    border-radius: 20px;
    color: #111;
    position: relative;
    overflow: hidden;
}

.campaign-box h4 {
    color: #000;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.campaign-box p {
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.campaign-link {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
    font-size: 0.9rem;
}

.gift-icon {
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 4rem;
    color: rgba(255,255,255,0.3);
    transform: rotate(-15deg);
}

/* Address Row */
.footer-address-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
}

.address-block .addr-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 5px;
}

.address-block p {
    color: #fff;
    font-size: 0.95rem;
}

.address-block i {
    color: var(--color-gold);
    margin-right: 10px;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.social-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Responsive Footer */
@media (max-width: 992px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
    }
    
    .call-back-content {
        flex-direction: column;
        padding: 30px;
        border-radius: 20px;
        width: 90%;
    }
    
    .cb-form {
        flex-direction: column;
        width: 100%;
    }
    
    .cb-form input {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
    }
    
    .footer-address-row {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* --- ANIMATIONS --- */
.js-scroll {
    opacity: 0;
    transition: all 1s ease-out;
}

.js-scroll.scrolled {
    opacity: 1;
}

.slide-left {
    transform: translateX(-50px);
}

.slide-right {
    transform: translateX(50px);
}

.slide-up {
    transform: translateY(50px);
}

.fade-in {
    opacity: 0;
}

.fade-in-up {
    transform: translateY(30px);
    opacity: 0;
}

.zoom-in {
    transform: scale(0.9);
}

.js-scroll.scrolled.slide-left,
.js-scroll.scrolled.slide-right,
.js-scroll.scrolled.slide-up,
.js-scroll.scrolled.fade-in-up {
    transform: translate(0);
}

.js-scroll.scrolled.zoom-in {
    transform: scale(1);
}

/* --- MOBILE MENU --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

.mobile-menu-container {
    position: absolute;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 85%;
    max-width: 400px;
    height: 100%;
    background-color: var(--color-bg-secondary);
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    border-left: 1px solid rgba(255,255,255,0.1);
    overflow-y: auto; /* Ensure scrolling on small screens */
}

.mobile-menu-overlay.active .mobile-menu-container {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.mobile-logo {
    height: 35px;
}

.close-menu {
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.close-menu:hover {
    background-color: var(--color-gold);
    color: #000;
}

.close-menu i {
    font-size: 1.2rem;
    color: #fff;
}

.mobile-nav-links {
    list-style: none;
    margin-bottom: auto;
}

.mobile-nav-links li {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

/* Staggered animation for links */
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(7) { transition-delay: 0.7s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(8) { transition-delay: 0.8s; opacity: 1; transform: translateX(0); }
.mobile-menu-overlay.active .mobile-nav-links li:nth-child(9) { transition-delay: 0.9s; opacity: 1; transform: translateX(0); }

.mobile-nav-links a {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: #fff;
    text-decoration: none;
    display: block;
    transition: var(--transition);
}

.mobile-nav-links a:hover {
    color: var(--color-gold);
    padding-left: 10px;
}

/* Mobile Dropdown */
.mobile-dropdown-menu {
    display: none;
    list-style: none;
    padding-left: 20px;
    margin-top: 10px;
    border-left: 1px solid rgba(203, 161, 55, 0.3);
}

.mobile-dropdown-menu.active {
    display: block;
    animation: slideDown 0.3s ease;
}

.mobile-dropdown-menu li {
    margin-bottom: 10px;
    opacity: 1 !important; /* Override parent opacity animation */
    transform: none !important;
}

.mobile-dropdown-menu a {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.mobile-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-dropdown-toggle i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.mobile-dropdown-toggle.active i {
    transform: rotate(180deg);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-menu-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    transition-delay: 0.6s;
}

.mobile-menu-overlay.active .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.full-width-btn {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
}

.mobile-contact-info p {
    color: var(--color-text-muted);
    margin-bottom: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-contact-info i {
    color: var(--color-gold);
}

.mobile-socials {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.mobile-socials a {
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: var(--transition);
}

.mobile-socials a:hover {
    background-color: var(--color-gold);
    color: #000;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 20px;
    }

    .navbar, .header-right {
        display: none;
    }

    .hamburger {
        display: block;
    }

    /* Fix for Services Grid on Mobile */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .hero-card {
        padding: 30px;
        margin: 0 10px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-features {
        flex-direction: column;
        gap: 15px;
    }

    .two-column-grid {
        grid-template-columns: 1fr;
    }

    .process-steps {
        flex-direction: column;
        gap: 30px;
    }

    .step-connector {
        display: none;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .reservation-box {
        flex-direction: column;
    }

    .reservation-form-container {
        clip-path: none;
        padding: 30px; /* Reduced padding for mobile */
    }

    .reservation-form {
        grid-template-columns: 1fr;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .contact-wrapper {
        flex-direction: column;
    }

    .offers-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
    }

    /* Fix for Contact Page Form on Mobile */
    .reservation-form-side {
        padding: 25px;
    }

    .reservation-image-side {
        height: 250px;
    }

    .contact-reservation-form .form-row {
        flex-direction: column;
        gap: 15px;
    }
     .reservation-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .hero-buttons .btn-outline{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 10px 10px;
        font-size: 0.7rem;
    }
}

/* --- FEATURES GRID SECTION (Hakkimizda) --- */
.features-grid-section {
    padding-bottom: 60px;
}

.features-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.feature-card-gold {
    background-color: #cba137;
    color: #f0e4a5;
    padding: 30px 25px;
    border-radius: 50px 15px 50px 15px;
    text-align: left;
    color: #111;
    transition: transform 0.3s ease;
}

.feature-card-gold:hover {
    transform: translateY(-5px);
}

.feature-card-gold .card-icon {
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 15px 0;
    color: #cba137;
    font-size: 1.3rem;
}

.feature-card-gold h3 {
    color: #f0e4a5;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.feature-card-gold p {
    color: #333;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- NEW BLOG PAGE STYLES --- */
.featured-blog-card {
    display: flex;
    background-color: #1a1a1a; /* Dark background for the card */
    border-radius: 30px;
    overflow: hidden;
    min-height: 400px;
    border: 1px solid rgba(203, 161, 55, 0.2); /* Subtle gold border */
}

.featured-content {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #1a1a1a; /* Dark background */
}

.featured-image {
    flex: 1.2;
    position: relative;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-category-tag {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #cba137;
    margin-bottom: 15px;
    font-weight: 600;
    display: block;
}

.featured-content h2 {
    font-size: 2.5rem;
    color: #fff; /* White text */
    margin-bottom: 30px;
    line-height: 1.2;
}

.btn-incele {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #cba137; /* Gold background */
    color: #000; /* Dark text */
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.btn-incele:hover {
    transform: translateX(5px);
    background-color: #fff;
    color: #000;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.btn-incele i {
    color: #000;
    font-size: 0.8rem;
}

/* Blog Grid */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.blog-post-card {
    background: transparent;
}

.post-image {
    border-radius: 20px;
    overflow: hidden;
    height: 250px;
    margin-bottom: 20px;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.post-content h3 {
    font-size: 1.2rem;
    color: #fff; /* Assuming dark theme background, or #111 if light */
    margin-top: 10px;
}

/* Adjust h3 color if on light background, but body is black in this theme. 
   The reference image has white background. 
   If the user wants the EXACT look of the image (white bg), we might need a specific body class or section bg.
   The reference image clearly shows a white/light background page.
   However, the current site theme is Black/Gold.
   I will stick to the site's theme (Black bg) for consistency unless instructed otherwise, 
   BUT the user said "bu görsellikte yapabilir misin" (can you make it in this visual style).
   The visual style implies the light background.
   
   Let's make the blog page sections have light background or keep the dark theme but style cards to match.
   Actually, the reference image has a very clean, light look.
   I will style the text in the grid to be white to match the current dark theme of the site, 
   OR I can wrap the blog content in a white section.
   
   Given the previous "hakkimizda" page was dark/gold, I'll keep the dark theme but make the cards pop.
   Wait, the reference image has white background.
   I will make the text white for now to be visible on the black body background.
*/

.post-content h3 {
    color: #fff; 
}

@media (max-width: 768px) {
    .featured-blog-card {
        flex-direction: column;
    }
    
    .featured-image {
        height: 250px;
    }
    
    .featured-content {
        padding: 30px;
    }
    
    .featured-content h2 {
        font-size: 1.8rem;
    }
}

/* --- CONTACT PAGE STYLES --- */
.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.contact-card-item {
    background-color: #cba137; /* Gold background like hakkimizda */
    padding: 40px 30px;
    border-radius: 20px 20px 20px 0; /* Asymmetric radius */
    text-align: left;
    transition: transform 0.3s ease;
    color: #111;
}

.contact-card-item:hover {
    transform: translateY(-5px);
}

.contact-card-item .icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #cba137;
    font-size: 1.2rem;
}

.contact-card-item h3 {
    font-size: 1.2rem;
    color: #111;
    margin-bottom: 10px;
}

.contact-card-item p {
    color: #333;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 5px;
}

/* Reservation Split Section */
.reservation-split-wrapper {
    display: flex;
    border-radius: 30px;
    overflow: hidden;
    min-height: 500px;
}

.reservation-form-side {
    flex: 1;
    background-color: #cba137; /* Gold background for form area */
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reservation-image-side {
    flex: 1;
    position: relative;
}

.reservation-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-subtitle {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
}

.reservation-form-side h2 {
    color: #111;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.contact-reservation-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-reservation-form .form-group {
    flex: 1;
}

.contact-reservation-form .form-group.full {
    width: 100%;
}

.contact-reservation-form .form-control {
    width: 100%;
    padding: 15px 20px;
    border-radius: 10px;
    border: none;
    background-color: #fff;
    color: #333;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.contact-reservation-form .form-control:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

.btn-submit {
    background-color: #a8852a; /* Darker gold for button */
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.btn-submit:hover {
    background-color: #111;
}

@media (max-width: 992px) {
    .reservation-split-wrapper {
        flex-direction: column;
    }
    
    .reservation-image-side {
        height: 300px;
    }
    
    .reservation-form-side {
        padding: 40px;
    }
}

/* --- PRELOADER --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Siyah arka plan */
    z-index: 99999; /* En üstte */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1); /* Perde efekti için ease */
}

#preloader.loaded {
    transform: translateY(-100%); /* Yukarı doğru çekilme */
}

.preloader-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.preloader-logo {
    max-width: 200px;
    margin-bottom: 20px;
    animation: logoPulse 2s infinite ease-in-out;
}

.loader-line {
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    margin: 0 auto;
    animation: loadLine 1.5s ease-in-out forwards;
}

@keyframes logoPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes loadLine {
    0% { width: 0; }
    100% { width: 100%; }
}

/* --- FORM SELECT FIX --- */
/* Koyu temalı formlar için (Rezervasyon formu gibi) */
.reservation-form select,
.contact-reservation-form select,
.form-control {
    background-color: #222; /* Koyu arka plan */
    color: #fff; /* Beyaz yazı */
    border: 1px solid #444;
}

/* Select açıldığında seçeneklerin görünümü */
.reservation-form select option,
.contact-reservation-form select option,
.form-control option {
    background-color: #222; /* Seçeneklerin arka planı koyu */
    color: #fff; /* Seçeneklerin yazısı beyaz */
    padding: 10px;
}

/* Basit Stil */
        .blog-detail-container {
            max-width: 800px;
            margin: 150px auto 50px; /* Header payı */
            padding: 0 20px;
        }
        .blog-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .blog-title {
            font-family: 'Playfair Display', serif;
            color: #cba137;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        .blog-meta {
            color: #888;
            font-size: 0.9rem;
        }
        .blog-image {
            width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .blog-content {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.8;
            color: #ddd;
            font-size: 1.1rem;
        }
        .blog-content p {
            margin-bottom: 20px;
        }
        .blog-content img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
        .recent-post-card:hover { transform: translateY(-5px); }
        .recent-post-card:hover img { transform: scale(1.1); }
        .blog-yazi a {
            color: #cba137 !important;
        }



         .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px 0;
        }
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            cursor: pointer;
            height: 250px;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        .gallery-overlay i {
            color: #cba137;
            font-size: 2rem;
        }


        .pricing-card {
            background: #1a1a1a;
            border: 1px solid #333;
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(203, 161, 55, 0.2);
            border-color: #cba137;
        }
        .pricing-title {
            color: #cba137;
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            margin-bottom: 15px;
        }
        .pricing-price {
            font-size: 2.5rem;
            color: #fff;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .pricing-period {
            font-size: 1rem;
            color: #888;
            font-weight: 400;
        }
        .pricing-features {
            list-style: none;
            padding: 0;
            margin-bottom: 30px;
            flex-grow: 1;
        }
        .pricing-features li {
            color: #ccc;
            margin-bottom: 10px;
            font-size: 0.95rem;
        }
        .pricing-features i {
            color: #cba137;
            margin-right: 5px;
        }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }


        /* ----- SLIDER ----- */
.slider-container {
    position: relative;
    width: 100%;
    height: 850px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.slider-container img {
    width: 70%;
    height: 700px;
    object-fit: cover;
    border-radius: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slider-container img.active {
    opacity: 1;
}

/* OKLAR */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 45px;
    color: white;
    cursor: pointer;
    z-index: 50;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    user-select: none;
}

.arrow:hover {
    background: rgba(0, 0, 0, 0.5);
}

.arrow-left { left: 8%; }
.arrow-right { right: 8%; }

/* ----- MOBİL ----- */
@media (max-width: 768px) {

    .hero-section,
    section,
    .slider-container {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Slider header'ın altına düzgün otursun */
    #home {
        margin-top: 170px !important; /* Gerekirse 80px - 100px yaparız */
    }

    .slider-container {
        position: relative !important;
        height: auto !important;
    }

    .slider-container img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 15px;
        position: relative !important;
        opacity: 0;
        display: none;
    }

    .slider-container img.active {
        opacity: 1 !important;
        display: block !important;
    }

    /* OKLAR — mobil için özel düzenleme */
    .arrow {
        font-size: 28px !important;
        padding: 8px 12px !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 99999 !important;
        background: rgba(0,0,0,0.4);
        border-radius: 50%;
        display: block !important;
    }

    .arrow-left { left: 10px !important; }
    .arrow-right { right: 10px !important; }
}