/*
Theme Name: Midnayt Masaj Salonu
Author: Sude
Description: Koyu temalı, animasyonlu modern WordPress teması.
Version: 1.4
Text Domain: midnayt
*/

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #1a1a1a; color: #fff; overflow-x: hidden; }

/* Üst Bar Tasarımı */
.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 25px 50px; background-color: rgba(20, 20, 20, 0.95); position: relative; border-bottom: 1px solid #333; font-size: 15px; }
.top-left { color: #ccc; display: flex; align-items: center; gap: 10px; }
.top-right { display: flex; align-items: center; gap: 30px; }
.phone-link { color: #d96b2f; text-decoration: none; font-weight: bold; font-size: 18px; }

/* Menü Linkleri */
.dropdown-menu ul { list-style-type: none; padding: 0; margin: 0; }
.dropdown-menu li { border-bottom: 1px solid #3c3232; }
.dropdown-menu li:last-child { border-bottom: none; }
.dropdown-menu a { color: #fff; padding: 15px 20px; text-decoration: none; display: block; transition: background 0.3s; }
.dropdown-menu a:hover { background-color: #d96b2f; color: #fff; }

/* Kapak (Hero) Alanı */
.hero-wrapper { padding: 0 5%; padding-top: 20px; }
.hero { background-image: url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed; height: 80vh; display: flex; align-items: center; justify-content: flex-start; position: relative; border-radius: 20px; overflow: hidden; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1; }
.hero-content { position: relative; z-index: 2; display: flex; justify-content: flex-start; width: 100%; padding-left: 8%; }
.hero-box { background-color: rgba(30, 25, 25, 0.7); padding: 35px 40px; border-radius: 15px; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05); max-width: 600px; text-align: left; }
.hero-box h1 { font-size: 2.8rem; margin-bottom: 15px; line-height: 1.2; color: #fff; }
.hero-box p { font-size: 1.1rem; margin-bottom: 25px; color: #ddd; }
.btn-primary { background-color: #d96b2f; color: #fff; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background 0.3s; display: inline-block; }
.btn-primary:hover { background-color: #b55522; }

/* 3'lü Özellik Alanı */
.welcome-section { padding: 60px 10%; text-align: center; }
.welcome-header { margin-bottom: 60px; }
.welcome-header h4 { color: #d96b2f; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
.welcome-header h2 { font-size: 2.2rem; color: #fff; font-weight: normal; }
.features-grid { display: flex; justify-content: space-between; align-items: stretch; gap: 30px; }
.feature-box { flex: 1; padding: 20px 30px; transition: transform 0.4s ease; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.feature-box.no-border { border-right: none; }
.feature-box:hover { transform: translateY(-12px); }
.feature-box i { font-size: 40px; color: #d96b2f; margin-bottom: 20px; transition: transform 0.4s ease; }
.feature-box:hover i { transform: scale(1.15); }
.feature-box h3 { font-size: 1.3rem; margin-bottom: 15px; color: #fff; }
.feature-box p { font-size: 0.95rem; color: #aaa; line-height: 1.6; }

/* WhatsApp Butonu */
.floating-whatsapp { position: fixed; bottom: 30px; right: 30px; background-color: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 35px; box-shadow: 0px 4px 10px rgba(0,0,0,0.3); z-index: 1000; transition: transform 0.3s; }
.floating-whatsapp:hover { transform: scale(1.1); color: white; }

/* Animasyonlu Paketler Slider Tasarımı */
.packages-section { padding: 60px 10% 80px 10%; text-align: center; background-color: #1a1a1a; }
.packages-header { margin-bottom: 50px; }
.packages-header h4 { color: #d96b2f; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
.packages-header h2 { font-size: 2.2rem; color: #fff; font-weight: normal; }
.packages-slider { padding-bottom: 20px; }
.package-card { height: 450px; border-radius: 15px; background-size: cover; background-position: center; position: relative; overflow: hidden; display: flex; align-items: flex-end; text-align: left; transition: transform 0.3s; cursor: pointer; }
.package-overlay { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(217,107,47,0.95) 0%, rgba(181,85,34,0.9) 100%); transition: top 0.5s ease; z-index: 1; }
.package-card:hover .package-overlay { top: 0; }
.package-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 20px; z-index: 2; transition: transform 0.5s ease; }
.package-card:hover .package-info { transform: translateY(-80px); }
.package-info i { font-size: 28px; color: #fff; margin-bottom: 15px; display: inline-block; }
.package-info h3 { color: #fff; font-size: 1.4rem; margin-bottom: 8px; }
.package-info .price { color: #d96b2f; font-weight: bold; font-size: 1.1rem; transition: color 0.3s; }
.package-card:hover .package-info .price { color: #fff; }
.package-hover-content { opacity: 0; visibility: hidden; transition: opacity 0.5s ease 0.2s; margin-top: 15px; }
.package-card:hover .package-hover-content { opacity: 1; visibility: visible; }
.package-info .description { color: #eee; font-size: 0.95rem; line-height: 1.4; margin-bottom: 20px; }
.btn-readmore { display: inline-block; color: #fff; text-decoration: none; font-weight: bold; font-size: 0.9rem; padding: 8px 20px; border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; transition: background 0.3s, border-color 0.3s; }
.btn-readmore:hover { background-color: rgba(255,255,255,0.1); border-color: #fff; }

/* Felsefemiz ve İstatistikler */
.philosophy-stats-section { padding: 60px 10%; background-color: #1a1a1a; }
.philosophy-container { display: flex; align-items: center; gap: 60px; margin-bottom: 80px; }
.philosophy-image { flex: 1; }
.philosophy-image img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); object-fit: cover; }
.philosophy-content { flex: 1; }
.philosophy-content h4 { color: #d96b2f; font-size: 13px; letter-spacing: 2px; margin-bottom: 15px; text-transform: uppercase; }
.philosophy-content h2 { font-size: 2.6rem; color: #fff; font-weight: normal; margin-bottom: 20px; line-height: 1.2; }
.philosophy-content p { color: #ccc; font-size: 1rem; line-height: 1.7; margin-bottom: 35px; }
.stats-container { display: flex; justify-content: space-between; align-items: center; background-color: rgba(30, 25, 25, 0.5); padding: 40px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.05); }
.stat-box { flex: 1; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.stat-box.no-border { border-right: none; }
.stat-box h3 { font-size: 2.8rem; color: #d96b2f; margin-bottom: 5px; font-weight: normal; }
.stat-box p { color: #ccc; font-size: 1rem; }

/* Müşteri Deneyimlerimiz */
.testimonials-section { padding: 60px 10% 80px 10%; background-color: #1a1a1a; }
.testimonials-header { margin-bottom: 40px; }
.testimonials-header h2 { font-size: 2.2rem; color: #fff; font-weight: normal; }
.testimonials-slider { padding-bottom: 50px; }
.testimonial-card { background-color: #2b2323; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.testi-image img { width: 100%; height: 200px; object-fit: cover; display: block; }
.testi-content { padding: 25px 20px; flex-grow: 1; display: flex; flex-direction: column; }
.testi-content .stars { color: #d96b2f; margin-bottom: 15px; font-size: 14px; }
.testi-content .quote { color: #eee; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; flex-grow: 1; }
.testi-content .author { color: #fff; font-weight: bold; font-size: 0.95rem; }
.swiper-pagination-bullet { background-color: #fff !important; opacity: 0.4; width: 10px; height: 10px; }
.swiper-pagination-bullet-active { background-color: #d96b2f !important; opacity: 1; width: 12px; height: 12px; }

/* SSS */
.faq-section { padding: 80px 10%; background-color: #201a1a; }
.faq-container { display: flex; gap: 50px; align-items: flex-start; }
.faq-left { flex: 1; position: sticky; top: 100px; }
.faq-left h4 { color: #d96b2f; font-size: 13px; letter-spacing: 2px; margin-bottom: 15px; text-transform: uppercase; }
.faq-left h2 { font-size: 2.8rem; color: #fff; font-weight: normal; line-height: 1.2; }
.faq-right { flex: 1.5; }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 5px; }
.faq-toggle { display: none; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 25px 0; color: #fff; font-size: 1.1rem; cursor: pointer; transition: color 0.3s; }
.faq-question i { transition: transform 0.3s; color: #d96b2f; }
.faq-item:hover .faq-question { color: #d96b2f; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-answer p { color: #bbb; line-height: 1.6; padding-bottom: 0; }
.faq-toggle:checked ~ .faq-question { color: #d96b2f; }
.faq-toggle:checked ~ .faq-question i { transform: rotate(180deg); }
.faq-toggle:checked ~ .faq-answer { max-height: 200px; padding-bottom: 25px; }

/* Footer */
.site-footer { background-color: #111; padding: 60px 10% 20px 10%; }
.footer-top { display: flex; justify-content: space-between; margin-bottom: 50px; gap: 30px; }
.footer-col h3 { color: #fff; font-size: 1.2rem; margin-bottom: 20px; font-weight: 500; }
.footer-col p { color: #aaa; line-height: 1.6; font-size: 0.95rem; }
.footer-middle { display: flex; gap: 30px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.footer-middle a { color: #d96b2f; text-decoration: none; font-weight: bold; font-size: 1rem; transition: color 0.3s; }
.footer-middle a:hover { color: #fff; }
.footer-bottom { text-align: center; }
.footer-bottom p { color: #666; font-size: 0.85rem; }
.footer-nav-list { display: flex; gap: 30px; list-style: none; padding: 0; margin: 0; width: 100%; }
.footer-nav-list li a { color: #d96b2f; text-decoration: none; font-weight: bold; font-size: 1rem; transition: color 0.3s; }
.footer-nav-list li a:hover { color: #fff; }

/* Menü Animasyonları */
.menu-checkbox { display: none; }
.menu-button { display: flex; flex-direction: column; justify-content: space-between; width: 35px; height: 25px; cursor: pointer; z-index: 10001; position: relative; }
.menu-button span { display: block; width: 100%; height: 3px; background-color: #d96b2f; border-radius: 3px; transition: all 0.4s ease; }
.menu-checkbox:checked + .menu-button span:nth-child(1) { transform: translateY(11px) rotate(45deg); background-color: #fff; }
.menu-checkbox:checked + .menu-button span:nth-child(2) { opacity: 0; }
.menu-checkbox:checked + .menu-button span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); background-color: #fff; }
.dropdown-menu { position: fixed; top: 0; right: -50vw; width: 50vw; height: 100vh; background-color: rgba(20, 20, 20, 0.98); box-shadow: -5px 0 25px rgba(0,0,0,0.8); z-index: 10000; transition: right 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0); padding-top: 100px; display: flex; flex-direction: column; }
.menu-checkbox:checked ~ .dropdown-menu { right: 0; }
.dropdown-menu a { color: #fff; padding: 20px 30px; text-decoration: none; display: block; font-size: 1.3rem; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; }
.dropdown-menu a:hover { background-color: rgba(217, 107, 47, 0.1); color: #d96b2f; padding-left: 40px; }

/* ==========================================================================
   YENİ EKLENEN ALT SAYFA TASARIMLARI (Hakkımızda, Hizmetlerimiz, İletişim)
   ========================================================================== */
.page-header-section { padding: 100px 10% 60px 10%; text-align: center; background-color: #1a1a1a; }
.page-header-section h1 { color: #fff; font-size: 2.8rem; margin-bottom: 15px; font-weight: normal; }
.page-header-section p { color: #d96b2f; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }

/* Hakkımızda Sayfası İçerik */
.about-page-content { padding: 0 10% 80px 10%; display: flex; gap: 60px; align-items: center; }
.about-text { flex: 1.2; }
.about-text h2 { font-size: 2.2rem; margin-bottom: 25px; color: #fff; font-weight: normal; }
.about-text p { color: #bbb; line-height: 1.8; margin-bottom: 20px; font-size: 1.05rem; }
.about-image { flex: 1; }
.about-image img { width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

/* Hizmetlerimiz Sayfası Grid */
.services-grid-page { padding: 0 10% 80px 10%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.services-grid-page .package-card { height: 400px; } /* Kart boylarını grid için hafif ayarladık */

/* İletişim Sayfası İçerik - Güncellenmiş Yan Yana Düzen */
.contact-page-content { 
    padding: 0 10% 80px 10%; 
}

.contact-info-boxes { 
    display: flex; 
    flex-direction: row; /* Kutuları yan yana dizer */
    gap: 30px; 
    justify-content: center; /* Merkeze hizalar */
    align-items: stretch;
}

.contact-box { 
    flex: 1; /* Her kutu eşit genişlikte olur */
    background-color: #251e1e; 
    padding: 40px 30px; 
    border-radius: 12px; 
    text-align: center; 
    border: 1px solid rgba(255,255,255,0.05); 
    transition: transform 0.3s ease;
}

.contact-box:hover {
    transform: translateY(-10px); /* Üzerine gelince hafif yükselme efekti */
}

.contact-box i { 
    font-size: 40px; 
    color: #d96b2f; 
    margin-bottom: 20px; 
}

.contact-box h3 { 
    color: #fff; 
    margin-bottom: 15px; 
    font-weight: 500; 
}

.contact-box p { 
    color: #aaa; 
    line-height: 1.6; 
}

/* Mobil Uyumluluk: Telefondan bakınca tekrar alt alta gelmesi için */
@media (max-width: 992px) {
    .contact-info-boxes { 
        flex-direction: column; 
    }
    .contact-box {
        width: 100%;
    }
}
/* Mobil Uyumluluk Güncellemeleri */
@media (max-width: 992px) {
    .philosophy-container, .faq-container, .about-page-content, .contact-page-content { flex-direction: column; text-align: center; }
    .faq-left { position: relative; top: 0; margin-bottom: 30px; }
    .footer-top { flex-wrap: wrap; text-align: center; }
    .footer-col { flex: 1 1 100%; margin-bottom: 20px; }
    .footer-middle { flex-direction: column; gap: 15px; }
    .footer-nav-list { flex-direction: column; }
    .about-text { text-align: center; }
    .contact-info-boxes { flex-direction: row; flex-wrap: wrap; }
    .contact-box { flex: 1 1 100%; }
}

@media (max-width: 768px) {
    .welcome-section, .packages-section, .philosophy-stats-section, .testimonials-section, .faq-section, .site-footer, .page-header-section, .about-page-content, .services-grid-page, .contact-page-content { padding-left: 5%; padding-right: 5%; }
    .top-bar { padding: 15px 5%; }
    .top-left { display: none; }
    .top-right { width: 100%; justify-content: space-between; }
    .dropdown-menu { right: -80vw; width: 80vw; }
    .hero-wrapper { padding: 0; }
    .hero { border-radius: 0; height: 70vh; justify-content: center; }
    .hero-content { padding: 0 5%; justify-content: center; }
    .hero-box { padding: 25px 20px; text-align: center; }
    .hero-box h1 { font-size: 2rem; }
    .features-grid { flex-direction: column; gap: 20px; }
    .feature-box { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .feature-box.no-border { border-bottom: none; }
    .stats-container { flex-direction: column; gap: 20px; padding: 30px 20px; }
    .stat-box { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 15px; width: 100%; }
    .stat-box.no-border { border-bottom: none; }
}

.swiper-wrapper { transition-timing-function: linear !important; }
/* Statik Paket Vitrini (Grid) */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    padding-bottom: 40px;
}