/* Temel Sıfırlamalar ve Ayarlar */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    padding-bottom: 70px; /* Alt navigasyon için boşluk */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Başlık (Header) Stilleri */

.user-profile {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.user-profile i {
    font-size: 1.8em;
    margin-right: 8px;
}

/* Ana İçerik (Main Content) Stilleri */
main {
    padding-bottom: 90px !important;
}

.page-section {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.page-section.active {
    display: block; /* Aktif bölüm görünür */
}

.page-section h2 {
    color: #6a11cb;
    margin-top: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Özet Sayfası Kartları */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.summary-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.summary-card i {
    color: #2575fc; /* Mavi */
    margin-bottom: 10px;
}

.summary-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: #555;
}

.summary-card p {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: #6a11cb;
}

.summary-card.upcoming-appointments ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    text-align: left;
}

.summary-card.upcoming-appointments li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
}
.summary-card.upcoming-appointments li:last-child {
    border-bottom: none;
}
.summary-card.upcoming-appointments li span {
    font-weight: bold;
    color: #333;
}

/* Alt Navigasyon (Bottom Navigation) Stilleri */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 30;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #888;
    font-size: 0.75em;
    padding: 5px;
    transition: color 0.3s ease;
}

.nav-item i {
    font-size: 1.5em;
    margin-bottom: 4px;
}

.nav-item.active {
    color: #6a11cb; /* Aktif link rengi - Mor */
}

.nav-item:hover {
    color: #2575fc; /* Hover link rengi - Mavi */
}

/* Responsive Ayarlamalar */
@media (min-width: 768px) {
    body {
        padding-bottom: 0; /* Geniş ekranlarda alt navigasyon olmayabilir veya farklı bir yapıda olabilir */
    }

    .bottom-nav {
        /* Geniş ekranlarda alt navigasyonu gizleyebilir veya yan menüye dönüştürebiliriz.
           Şimdilik basitçe gizleyelim veya farklı bir tasarım düşünelim.
           Bu örnek için, geniş ekranlarda alt navigasyonun kalmasını sağlayacağım ama
           genellikle yan menü tercih edilir. */
    }

    header h1 {
        font-size: 1.8em;
    }
}

/* Alınan Paketler Sayfası Stilleri */
.package-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.package-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* border-radius'un düzgün çalışması için */
}

.package-header {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.package-header h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    color: #6a11cb; /* Ana tema rengi */
}

.package-date {
    font-size: 0.85em;
    color: #777;
}

.package-body {
    padding: 15px;
    font-size: 0.95em;
}

.package-body p {
    margin: 5px 0;
    line-height: 1.6;
}

.package-actions {
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.btn-toggle-details,
.btn-save-note {
    background-color: #6a11cb; /* Ana tema rengi */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.btn-toggle-details i,
.btn-save-note i {
    margin-right: 5px;
}

.btn-toggle-details:hover,
.btn-save-note:hover {
    background-color: #2575fc; /* Gradientin diğer rengi */
}

.package-details-content {
    padding: 15px;
    border-top: 1px dashed #ccc;
    display: none; /* Başlangıçta gizli */
}

.package-details-content.active {
    display: block; /* JavaScript ile aktif edildiğinde gösterilir */
}

.package-details-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #555;
    font-size: 1.1em;
}

/* Yıldızla Oylama Stilleri */
.rating-stars {
    margin-bottom: 10px;
    cursor: pointer;
}

.rating-stars i {
    font-size: 1.8em;
    color: #ccc; /* Boş yıldız rengi */
    margin-right: 5px;
    transition: color 0.2s ease;
}

.rating-stars i.selected, /* Kullanıcının tıkladığı ana kadar olan yıldızlar (JS ile yönetilecek) */
.rating-stars i.hovered {
    /* Kullanıcının üzerine geldiği yıldızlar (JS ile yönetilecek) */
    color: #ffc107; /* Dolu/hover yıldız rengi (Altın Sarısı) */
}

.current-rating {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px;
}

/* Not Alanı Stilleri */
.package-details-content textarea {
    width: calc(100% - 22px); /* padding ve border hesaba katılarak */
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    font-family: inherit;
    font-size: 0.95em;
    resize: vertical;
}

.btn-save-note {
    display: inline-block;
    margin-bottom: 15px;
}

.existing-notes p {
    background-color: #f9f9f9;
    border-left: 3px solid #2575fc;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.9em;
    margin-bottom: 8px;
    color: #555;
}

.existing-notes p strong {
    color: #333;
    display: block;
    margin-bottom: 4px;
    font-size: 0.8em;
}

/* Genel Veri Kartı Stilleri (Seanslar, Randevular, Ürünler için Temel) */
.data-card {
    overflow: hidden;
}

.data-card-header {
    background-color: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    display: flex; /* Başlık ve tarihi yan yana getirmek için */
    justify-content: space-between;
    align-items: center;
}

.data-card-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #6a11cb; /* Ana tema rengi */
}

.data-card-header span {
    font-size: 0.85em;
    color: #777;
}

.data-card-body {
    padding: 15px;
    font-size: 0.95em;
}

.data-card-body p {
    margin: 8px 0;
    line-height: 1.6;
}

.data-card-body p strong {
    color: #333;
}

.data-card-actions {
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.btn-link {
    color: #6a11cb;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-link:hover {
    background-color: #f0e8ff; /* Açık mor bir arka plan */
    color: #2575fc;
}

/* Seans Kartlarına Özel Durum Stilleri */
.session-list,
.appointment-list,
.product-list {
    /* package-list için olan flex ve gap burada tanımlanabilir veya her biri için ayrı ayrı */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.session-card .status-completed {
    color: #28a745; /* Yeşil */
    font-weight: bold;
}

.session-card .status-upcoming {
    color: #ffc107; /* Sarı */
    font-weight: bold;
}

.session-card .status-cancelled {
    color: #dc3545; /* Kırmızı */
    font-weight: bold;
    text-decoration: line-through;
}

.status-cancelled {
    text-decoration: line-through;
    color: #dc3545; /* Kırmızı */
    font-weight: bold;
}

/* Randevu Kartlarına Özel Durum Stilleri */
.appointment-card .status-confirmed {
    color: #28a745; /* Yeşil (Tamamlandı ile aynı renk) */
    font-weight: bold;
}

.appointment-card .status-pending {
    color: #fd7e14; /* Turuncu */
    font-weight: bold;
}

/* Randevu kartlarındaki aksiyon butonlarına ikon eklemek için genel bir stil */
.data-card-actions .btn-link i {
    margin-right: 5px;
}

/* Ürün Kartlarına Özel Stiller */
.product-card-image {
    width: 100%;
    max-height: 200px; /* Resim yüksekliğini sınırla */
    overflow: hidden; /* Taşan kısımları gizle */
}

.product-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-card .data-card-header {
    /* Ürün kartlarında başlık ve fiyat için belki farklı bir düzen gerekebilir,
       ama şimdilik genel .data-card-header stilini kullanıyoruz. */
}

.product-card .product-price {
    font-weight: bold;
    color: #28a745; /* Yeşil renk fiyat için */
    font-size: 1.1em;
}

.btn-primary-action {
    background-color: #2575fc; /* Mavi - Tema gradientinin ikinci rengi */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    margin-left: 10px; /* Diğer aksiyonlardan ayırmak için */
}

.btn-primary-action i {
    margin-right: 5px;
}

.btn-primary-action:hover {
    background-color: #1a5cbf; /* Biraz daha koyu mavi */
}

/* Ürün listesini daha esnek bir grid yapmak için (isteğe bağlı) */
@media (min-width: 600px) {
    .product-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
    .product-card {
        margin-bottom: 0; /* Grid kullanılıyorsa bu gereksiz */
    }
}

/* Paket Kartı - İlgili Uzman Stili */
.package-sold-by {
    font-size: 0.9em;
    color: #555;
    margin-top: 10px !important; /* Diğer p elementlerinden biraz daha fazla boşluk */
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.package-sold-by strong {
    color: #6a11cb !important; /* Ana tema rengiyle uyumlu */
}

/* Filtre Butonları Stilleri (Seanslar için) */
.filter-buttons {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlarda butonlar alt satıra kayabilir */
    gap: 10px;
}

.filter-btn {
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    color: #555;
    border-radius: 20px; /* Daha yuvarlak butonlar */
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease, color 0.3s ease,
        border-color 0.3s ease;
}

.filter-btn:hover {
    background-color: #e9ecef;
    border-color: #ccc;
}

.filter-btn.active {
    background-color: #6a11cb; /* Ana tema rengi */
    color: white;
    border-color: #6a11cb;
}

/* Genel Birincil Buton Stili (btn-primary-action yerine) */
.btn-primary {
    background-color: #2575fc; /* Mavi - Tema gradientinin ikinci rengi */
    color: white;
    border: none;
    padding: 10px 18px; /* Biraz daha geniş padding */
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em; /* Biraz daha büyük font */
    transition: background-color 0.3s ease;
    text-decoration: none; /* Eğer <a> tagı olarak kullanılırsa */
    display: inline-flex; /* İkon ve metni hizalamak için */
    align-items: center;
}

.btn-primary i {
    margin-right: 8px;
}

.btn-primary:hover {
    background-color: #1a5cbf; /* Biraz daha koyu mavi */
}

/* Ürün kartındaki eski .btn-primary-action sınıfını yeni .btn-primary ile değiştirebiliriz.
   Şimdilik ikisi de kalsın, HTML'de güncelleyince eskiyi silebiliriz.
*/

/* Bölüm Aksiyonları (Yeni Randevu Oluştur gibi butonlar için sarmalayıcı) */
.section-actions {
    margin-bottom: 20px;
    text-align: right; /* Butonları sağa yaslamak için */
}

/* Basitleştirilmiş Ürün Listesi Stilleri */
.product-list.simple-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Kartlar arası daha az boşluk */
}

@media (min-width: 600px) {
    .product-list.simple-list {
        /* Geniş ekranlar için grid yapısını kaldırıp tek sütunlu liste yapıyoruz */
        display: flex; /* grid-template-columns ve margin-bottom:0 override */
        flex-direction: column;
    }
}

.simple-product-item {
    display: flex;
    align-items: center; /* Dikeyde ortala */
    padding: 10px;
    /* .data-card'dan gelen margin-bottom: 20px; burada geçerli olacak veya .product-list.simple-list gap ile yönetilecek */
}

.product-card-image-simple {
    width: 80px; /* Daha küçük resim alanı */
    height: 80px;
    margin-right: 15px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0; /* Küçülmesini engelle */
}

.product-card-image-simple img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi alana sığdır, kırp */
}

.product-info-simple {
    flex-grow: 1; /* Kalan alanı doldur */
}

.product-info-simple h3 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: #333; /* .data-card-header h3 renginden farklı */
}

.product-category-simple {
    font-size: 0.85em;
    color: #777;
    margin: 0;
}

.product-price-simple {
    font-size: 1.1em;
    font-weight: bold;
    color: #6a11cb; /* Ana tema rengi */
    margin-left: 15px;
    white-space: nowrap; /* Fiyatın tek satırda kalmasını sağla */
}

/* Eski .product-card stillerinden bazılarını temizleyelim veya override edelim */
.simple-product-item.product-card .data-card-header,
.simple-product-item.product-card .data-card-body,
.simple-product-item.product-card .data-card-actions {
    display: none; /* Eski kart yapısını bu basit listede gösterme */
}

.simple-product-item.product-card .product-price {
    /* Eski fiyat stilini de gizleyebiliriz, yenisi .product-price-simple */
    display: none;
}

/* Modal Form Elemanları Stilleri */
.form-group {
    margin-bottom: 18px; /* Gruplar arası boşluğu biraz artır */
}

.form-group label {
    display: block;
    margin-bottom: 8px; /* Label ile input arası boşluğu artır */
    font-weight: 600; /* Font ağırlığını biraz artır */
    font-size: 0.95em;
    color: #495057;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select,
.form-group textarea {
    width: 100%; /* Tam genişlik */
    padding: 12px 15px; /* Padding artırıldı */
    border: 1px solid #ced4da;
    border-radius: 6px; /* Daha yuvarlak köşeler */
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #f8f9fa; /* Hafif bir arka plan rengi */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25); /* Tema rengine uygun focus */
}

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

.form-group.form-actions {
    text-align: right;
    margin-top: 30px; /* Butonlarla form arası boşluğu artır */
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.form-group.form-actions .btn-secondary {
    background-color: #6c757d;
    color: white;
    margin-left: 10px;
    padding: 10px 18px;
    font-size: 0.95em;
    border-radius: 6px;
}

.form-group.form-actions .btn-primary {
    /* .btn-primary zaten tanımlı, gerekirse burada override edilebilir */
}

.form-group.form-actions .btn-secondary:hover {
    background-color: #5a6268;
}

.slider-container {
    max-width: 1200px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    position: relative;
    z-index: 1;
}

.slide {
    min-width: 100%;
    display: flex;
    background: white;
    min-height: 400px;
}

.slide-content {
    flex: 1;
    padding: clamp(20px, 5vw, 40px);
    padding-left: clamp(60px, 8vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.slide-image {
    flex: 1;
    min-height: 300px;
    background-size: cover;
    background-position: center;
}

.slide-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #333;
    margin-bottom: clamp(10px, 2vw, 15px);
}

.slide-description {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: #666;
    line-height: 1.6;
    margin-bottom: clamp(15px, 3vw, 20px);
}

.slide-date {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: #888;
    font-style: italic;
}

.slider-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.nav-dot {
    width: clamp(8px, 2vw, 12px);
    height: clamp(8px, 2vw, 12px);
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: background-color 0.3s;
}

.nav-dot.active {
    background: #333;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: clamp(30px, 5vw, 40px);
    height: clamp(30px, 5vw, 40px);
    font-size: clamp(16px, 3vw, 20px);
    opacity: 0.8;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
}

.prev {
    left: clamp(15px, 3vw, 25px);
}

.next {
    right: clamp(15px, 3vw, 25px);
}

@media (max-width: 1024px) {
    .slide {
        min-height: 350px;
    }

    .slide-image {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .slider-container {
        width: 100%;
    }

    .slide {
        flex-direction: column;
        min-height: auto;
    }

    .slide-image {
        min-height: 200px;
        order: -1;
    }

    .slide-content {
        padding: 20px;
        padding-left: clamp(50px, 6vw, 60px);
    }

    .slider-arrow {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .slider-nav {
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .slide-image {
        min-height: 180px;
    }

    .slide-content {
        padding: 15px;
    }

    .slider-arrow {
        width: 35px;
        height: 35px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .slide-image {
        background-size: cover;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .slide {
        min-height: 250px;
    }

    .slide-image {
        min-height: 200px;
    }

    .slide-content {
        padding: 15px;
    }
}

.new-appointment-form fieldset legend {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.reviews-form fieldset legend {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

@media (max-width: 600px) {
    .new-appointment-form fieldset legend,
    .reviews-form fieldset legend {
        font-size: 1rem; /* Küçük ekranlarda yazı boyutunu küçült */
    }
}