@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@300;400;600&display=swap');

/* NOT: Renk tanımları theme.css dosyasından çekilmektedir. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }

body {
    background-color: var(--bg-dark);
    background-image: var(--bg-body-gradient);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0; display: flex; justify-content: center; align-items: center;
    min-height: 100vh; padding-bottom: 90px;
}

/* --- KONTEYNER --- */
.container {
    background: var(--bg-card);
    width: 92%; max-width: 420px;
    padding: 35px 25px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--gold-border);
    box-shadow: var(--shadow-hard);
    text-align: center;
    border-radius: 30px;
    position: relative;
    z-index: 10;
    animation: fadeIn 0.8s ease-out;
}

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

/* --- TİPOGRAFİ --- */
h1, h2 { font-family: 'Playfair Display', serif; color: var(--gold); letter-spacing: 1px; margin-top: 0; }

.logo-container { position: relative; width: 100px; height: 100px; margin: 0 auto 15px auto; }

.logo-img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--gold); padding: 3px;
    box-shadow: var(--shadow-glow-pulse-start);
    animation: pulseGlow 3s infinite ease-in-out;
    transition: opacity 0.3s ease;
}
.logo-img[src=""], .logo-img:not([src]) { opacity: 0; visibility: hidden; }

@keyframes pulseGlow {
    0% { box-shadow: var(--shadow-glow-pulse-start); }
    50% { box-shadow: var(--shadow-glow-pulse-mid); }
    100% { box-shadow: var(--shadow-glow-pulse-start); }
}

h1.dynamic-brand-name {
    font-size: 24px; margin-bottom: 5px;
    background: var(--brand-shine-gradient);
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent;
    background-size: 200% auto; animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

.subtitle { color: var(--text-dim); font-size: 13px; margin-bottom: 25px; font-weight: 300; }

/* --- INPUT GRUPLARI --- */
.input-group { position: relative; margin-bottom: 15px; }
.input-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); font-size: 16px; transition: 0.3s;
}
input, select {
    width: 100%; background: var(--input-bg); border: 1px solid var(--border-light);
    padding: 16px 15px 16px 45px; 
    color: var(--text-main); font-size: 15px; border-radius: 15px; transition: all 0.3s ease;
    margin-bottom: 0;
}
input:focus, select:focus { 
    border-color: var(--gold); background: var(--input-bg-focus); 
    box-shadow: var(--shadow-soft);
}
input:focus + .input-icon { color: var(--gold); }
input::placeholder { color: var(--text-placeholder); }

.password-toggle {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); cursor: pointer; padding: 5px;
}

/* --- BUTONLAR --- */
.btn-primary {
    width: 100%; padding: 16px; 
    background: var(--btn-primary-gradient);
    color: var(--text-dark); border: none; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.5px;
    cursor: pointer; transition: 0.3s; margin-top: 15px;
    border-radius: 15px;
    box-shadow: var(--shadow-soft);
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }

.btn-secondary {
    background: transparent; border: 1px solid var(--border-light); color: var(--text-dim);
    padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 13px;
    margin-bottom: 20px; transition: 0.3s;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

.toggle-link {
    color: var(--text-dim); cursor: pointer; font-size: 13px;
    margin-top: 25px; display: block; transition: 0.3s;
}
.toggle-link b { color: var(--gold); }
.toggle-link:hover { color: var(--text-main); }

/* --- BENİ HATIRLA & CHECKBOX --- */
.remember-me {
    display: flex; align-items: center; gap: 10px; margin: 15px 0 20px 5px;
    font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none;
}
.remember-me input { display: none; }
.custom-checkbox-box {
    width: 20px; height: 20px; border: 2px solid var(--border-dark); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; transition: 0.3s;
    background: transparent;
}
.remember-me input:checked + .custom-checkbox-box { background: var(--gold); border-color: var(--gold); }
.custom-checkbox-box i { font-size: 12px; color: var(--text-dark); display: none; }
.remember-me input:checked + .custom-checkbox-box i { display: block; }

/* --- SÖZLEŞME CHECKBOX --- */
.terms-container {
    display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 25px 0;
    cursor: pointer; user-select: none; text-align: left; padding-left: 5px;
}
.terms-container input { display: none; }
.big-checkbox {
    width: 28px; height: 28px; min-width: 28px;
    border: 2px solid var(--text-placeholder); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; background: var(--calendar-cell-bg);
}
.terms-container input:checked + .big-checkbox {
    background: var(--gold); border-color: var(--gold);
    box-shadow: var(--shadow-glow-pulse-start);
}
.big-checkbox i { font-size: 16px; color: var(--text-dark); display: none; }
.terms-container input:checked + .big-checkbox i { display: block; }
.terms-text { font-size: 13px; color: var(--text-dim); line-height: 1.4; margin-top: 2px; }

.profile-header {
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 30px; /* Alt boşluk artırıldı */
    background: var(--staff-card-bg); 
    
    /* Yükseklik Ayarı Burada: */
    padding-top: 35px;     /* Üstten boşluk artırıldı */
    padding-bottom: 35px;  /* Alttan boşluk artırıldı */
    min-height: 130px;     /* Alanın minimum boyunu uzattık */
    
    border-radius: 20px; 
    border: 1px solid var(--border-light); 
    position: relative;
    text-align: left;
}

.profile-header .img-wrapper { 
    position: relative; 
    width: 100px;    /* ESKİSİ: 70px idi -> 100px yaptık */
    height: 100px;   /* ESKİSİ: 70px idi -> 100px yaptık */
    flex-shrink: 0; 
    cursor: pointer; 
    transition: transform 0.3s; /* Tıklarken hafif efekt olsun */
}

/* Fotoğrafa tıklandığında hafif küçülme efekti (Opsiyonel Şıklık) */
.profile-header .img-wrapper:active {
    transform: scale(0.95);
}

.profile-header img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--gold); box-shadow: var(--shadow-soft);
}
.profile-header .camera-icon {
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    background: var(--gold); 
    color: var(--text-dark);
    border-radius: 50%; 
    
    /* Boyutları artırıyoruz */
    width: 32px;    /* ESKİSİ: 24px */
    height: 32px;   /* ESKİSİ: 24px */
    
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 2px solid #1a1a1a; 
    font-size: 14px; /* İkonun kendi boyutu */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.profile-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.profile-info h3 {
    margin: 0; font-size: 18px; font-weight: 700; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-info p { margin: 2px 0 0 0; font-size: 13px; color: var(--gold); font-weight: 500; opacity: 0.8; }
.btn-logout {
    background: var(--danger-bg); border: 1px solid var(--danger-bg); color: var(--danger);
    width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s; flex-shrink: 0;
}
.btn-logout:hover { background: var(--danger); color: var(--text-main); box-shadow: 0 0 15px rgba(255, 68, 68, 0.4); }

/* --- LİSTELER (Staff & Service) --- */
.staff-grid, .date-scroll-wrapper, .admin-nav {
    display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 20px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.staff-grid::-webkit-scrollbar, .date-scroll-wrapper::-webkit-scrollbar, .admin-nav::-webkit-scrollbar { display: none; }

.staff-card {
    min-width: 100px; background: var(--staff-card-bg); border: 1px solid var(--border-light);
    border-radius: 15px; padding: 15px 10px; text-align: center; cursor: pointer; transition: 0.3s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.staff-card img, .default-avatar {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--border-light); margin-bottom: 8px;
}
.default-avatar { background: #222; color: var(--text-main); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; }
.staff-card.selected { border-color: var(--gold); background: var(--gold-bg-low); }
.staff-card.selected img, .staff-card.selected .default-avatar { border-color: var(--gold); }
.staff-name { font-size: 13px; font-weight: 600; color: var(--text-main); }

.service-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; }
.service-card {
    background: var(--staff-card-bg); border: 1px solid var(--border-light);
    border-radius: 15px; padding: 15px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; transition: 0.3s; position: relative; text-align: left;
}
.service-card:hover { background: var(--staff-card-hover); }
.service-card.selected { border-color: var(--gold); background: var(--gold-bg-low); box-shadow: var(--shadow-glow-pulse-start); }
.service-icon { font-size: 24px; color: var(--text-dim); margin-right: 15px; width: 30px; text-align: center; }
.service-card.selected .service-icon { color: var(--gold); }
.service-info { text-align: left; flex: 1; }
.service-title { display: block; font-weight: 600; color: var(--text-main); font-size: 15px; }
.service-price { color: var(--gold); font-weight: bold; font-size: 14px; }
.popular-tag {
    position: absolute; top: -8px; right: 10px; background: var(--gold); color: var(--text-dark);
    font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;
}

/* --- TARİH VE SAAT --- */
.date-card {
    min-width: 70px; background: #111; border: 1px solid var(--border-light); border-radius: 12px;
    padding: 12px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s;
}
.date-card.selected { background: var(--gold); border-color: var(--gold); box-shadow: var(--shadow-glow-pulse-start); }
.date-card.selected span { color: var(--text-dark) !important; }

/* --- SAAT GRİD DÜZENLEMESİ (FİNAL) --- */
.time-grid {
    display: grid !important;          /* Grid yapısını zorla */
    grid-template-columns: repeat(4, 1fr); /* Yan yana 4 kutu olsun */
    gap: 10px;                         /* Kutular arası boşluk */
    margin-bottom: 20px;
    width: 100%;
    overflow: visible;                 /* Kaydırmayı kapat */
}

.time-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 0;
    font-size: 14px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

/* Seçili Saat */
.time-slot.selected {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
    font-weight: 800;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    transform: scale(1.05);
}

/* Dolu / Geçmiş Saat (Daha Temiz Görünüm) */
.time-slot.disabled {
    opacity: 0.3;                    /* Sönükleştir */
    pointer-events: none;            /* Tıklanamaz yap */
    background: transparent;
    border-color: #333;
    color: #666;
    text-decoration: none;           /* Üstünü çizmeyi kaldır (daha okunaklı olsun) */
    position: relative;
}

/* Dolu saatlere küçük bir nokta koyalım (Opsiyonel şıklık) */
.time-slot.disabled::after {
    content: '•';
    position: absolute;
    top: 2px;
    right: 5px;
    color: var(--danger);
    font-size: 10px;
}
/* --- PREMIUM TICKET TASARIMI (YENİ) --- */

/* Biletin Genel Duruşu */
.ticket-wrapper {
    width: 100%;
    margin: 0 auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); /* Gölgeyi filter ile veriyoruz ki delikler şeffaf kalsın */
    animation: ticketPopUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 20px;
}

@keyframes ticketPopUp {
    0% { transform: scale(0.8) translateY(50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* --- ÜST KISIM (BİLGİLER) --- */
.ticket-top {
    background: linear-gradient(160deg, #1f1f1f 0%, #141414 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 25px 20px;
    border: 1px solid rgba(255,255,255,0.05);
    border-bottom: none;
    position: relative;
}

/* Marka / Onay Rozeti */
.ticket-brand {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 20px;
    font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--success);
    text-transform: uppercase;
    background: rgba(46, 204, 113, 0.1); padding: 8px 16px; border-radius: 30px;
    width: fit-content; margin-left: auto; margin-right: auto;
}

/* Dev Saat ve Tarih */
.ticket-main-time { text-align: center; margin-bottom: 25px; }
.big-time {
    font-family: 'Playfair Display', serif;
    font-size: 56px; line-height: 1;
    background: linear-gradient(to bottom, #fff, #bbb);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 800; letter-spacing: -1px;
}
.sub-date {
    font-size: 15px; color: var(--gold);
    font-weight: 500; letter-spacing: 1px;
    margin-top: 5px; text-transform: uppercase;
}

/* Detaylar Grid */
.ticket-details-grid {
    display: flex; justify-content: space-between;
    background: rgba(255,255,255,0.03);
    padding: 15px; border-radius: 16px;
}
.t-detail-item { display: flex; flex-direction: column; text-align: left; }
.t-detail-item.right { text-align: right; }
.t-detail-item .lbl { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.t-detail-item .val { font-size: 14px; color: #fff; font-weight: 600; }

/* --- YIRTILMA ÇİZGİSİ (MAGIC PART) --- */
.ticket-rip-line {
    height: 30px;
    background: #141414; /* Üst ve alt ile aynı renk tabanı */
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    margin-top: -1px; margin-bottom: -1px; /* Çizgi oluşmasını engelle */
    z-index: 2;
}
/* Sol ve Sağ Çentikler (Delikler) */
.notch-left, .notch-right {
    position: absolute; top: 0; width: 24px; height: 30px;
    background: var(--bg-dark); /* Arka plan rengi neyse o olmalı (delik gibi görünmesi için) */
    border-radius: 50%;
    z-index: 3;
}
.notch-left { left: -12px; } /* Yarısı içeride */
.notch-right { right: -12px; }

/* Kesik Çizgi */
.dashed-line {
    width: 85%; height: 1px;
    border-top: 2px dashed #333;
}

/* --- ALT KISIM (SAYAÇ & BUTONLAR) --- */
.ticket-bottom {
    background: #141414;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 25px 20px;
    border: 1px solid rgba(255,255,255,0.05);
    border-top: none;
    text-align: center;
}

/* Canlı Sayaç */
.live-counter-box { margin-bottom: 25px; position: relative; }
.live-counter-box p { font-size: 10px; color: #666; letter-spacing: 2px; margin: 0 0 5px 0; }
.timer-digits {
    font-size: 26px; font-weight: 700; color: var(--gold);
    font-family: 'Courier New', monospace;
}
/* Yanıp Sönen Nokta */
.status-pulse {
    width: 8px; height: 8px; background: var(--success);
    border-radius: 50%; display: inline-block;
    box-shadow: 0 0 0 rgba(46, 204, 113, 0.4);
    animation: pulse-green 2s infinite;
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
}
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Butonlar */
.btn-ticket-back {
    margin-top: 0; 
    background: var(--gold); 
    color: #000; 
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.25);
}
.btn-ticket-cancel {
    width: 100%; 
    background: rgba(255, 68, 68, 0.1); /* Hafif kırmızı arka plan */
    border: 1px solid rgba(255, 68, 68, 0.2);
    color: #ff4444 !important; /* Rengi zorla kırmızı yap */
    padding: 12px; 
    margin-top: 10px;
    border-radius: 12px;
    font-size: 12px; 
    font-weight: 700; 
    cursor: pointer;
    transition: 0.3s; 
    opacity: 0.9;
}

.btn-ticket-cancel:hover { 
    background: rgba(255, 68, 68, 0.2); 
    opacity: 1; 
    transform: scale(1.02);
}
/* --- ADMIN NAVBAR --- */
.admin-nav button { 
    flex: 0 0 auto; background: transparent; border: none; color: var(--text-muted-light); 
    padding: 10px 20px; cursor: pointer; border-radius: 8px; font-weight: 600; 
    transition: 0.3s; font-size: 14px;
}
.admin-nav button.active { background: var(--gold); color: var(--text-dark); box-shadow: 0 4px 15px rgba(201, 162, 77, 0.4); }

.admin-staff-item { 
    display: flex; justify-content: space-between; align-items: center; 
    background: rgba(255,255,255,0.05); padding: 15px; 
    margin-bottom: 10px; border-radius: 10px; cursor: pointer; text-align: left;
}
.staff-stats-modal { text-align: left; }

/* --- MODALLER --- */
.modal-overlay {
    position: fixed; inset: 0; background: var(--modal-overlay); z-index: 2000;
    display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.modal-content {
    background: var(--modal-bg); width: 90%; max-width: 350px; padding: 25px;
    border-radius: 20px; border: 1px solid var(--gold); text-align: center;
    max-height: 80vh; overflow-y: auto; position: relative;
}
.close-modal {
    color: var(--danger) !important; font-size: 28px; font-weight: bold;
    position: absolute; top: 10px; right: 15px; background: none; border: none; cursor: pointer;
}

/* --- CUSTOM CONFIRM MODAL --- */
#customConfirmModal { background: rgba(0, 0, 0, 0.85); }
#customConfirmModal .modal-content { padding: 30px; display: flex; flex-direction: column; align-items: center; }
#customConfirmModal i { font-size: 40px; color: var(--gold); margin-bottom: 15px; display: block; }
#customConfirmModal h3 { color: var(--text-main); margin-bottom: 10px; font-size: 20px; width: 100%; }
#customConfirmModal p { color: #ccc; font-size: 14px; margin-bottom: 25px; line-height: 1.4; width: 100%; }

.modal-btn-row { 
    display: flex; flex-direction: row; align-items: stretch; justify-content: center; 
    gap: 15px; width: 100%; margin: 0; padding: 0; 
}
.modal-btn-row button { 
    flex: 1; height: 45px; margin: 0 !important; padding: 0; 
    display: flex; align-items: center; justify-content: center; 
    border-radius: 10px; font-weight: bold; font-size: 14px; 
    cursor: pointer; text-transform: uppercase; 
}
#btnConfirmNo { background: transparent; border: 1px solid var(--text-placeholder); color: var(--text-dim); }
#btnConfirmYes { background: var(--gold); color: var(--text-dark); border: none; box-shadow: 0 4px 10px rgba(201, 162, 77, 0.3); }

/* --- RATING MODAL --- */
.star-rating { display: flex; justify-content: center; gap: 10px; font-size: 24px; color: var(--text-placeholder); cursor: pointer; }
.star-rating .fas { color: var(--gold); } 
#ratingComment { width: 100%; background: #252525; border: 1px solid var(--border-dark); border-radius: 15px; padding: 15px; color: var(--text-main); resize: none; margin-top: 15px; }
#ratingComment:focus { border-color: var(--gold); }

/* --- BİLDİRİM (TOAST) --- */
.toast-container { 
    position: fixed; top: 15px; left: 50%; transform: translateX(-50%); 
    z-index: 100001; width: 92%; max-width: 380px; 
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.toast { 
    background: var(--toast-bg);
    border: 1px solid var(--border-light); 
    color: var(--text-main); padding: 16px 20px; 
    border-radius: 24px; display: flex; align-items: center; gap: 15px; 
    box-shadow: var(--shadow-toast); 
    backdrop-filter: blur(10px); 
    pointer-events: auto; touch-action: none; user-select: none; cursor: grab;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
    animation: slideInElastic 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0; transform: translateY(-100px) scale(0.9);
}
.toast.dragging { transition: none !important; cursor: grabbing; transform: scale(1.03); }
.toast i { font-size: 20px; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }
.toast.info i { color: var(--info); }
@keyframes slideInElastic {
    0% { opacity: 0; transform: translateY(-100px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- FOOTER & INFO BAR --- */
#dynamicFooter { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; }
.footer-social-content {
    background: var(--toast-bg); border-top: 1px solid var(--border-light);
    display: flex; justify-content: center; gap: 40px; padding: 10px 0; backdrop-filter: blur(10px);
}
.footer-social-content a { color: var(--text-dim); font-size: 22px; transition: 0.3s; }
.footer-social-content a:hover { color: var(--gold); transform: scale(1.2); }

.mini-status-bar {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%;
    
    /* Eski turuncu yerine Koyu Buzlu Cam */
    background: rgba(15, 15, 15, 0.9); 
    border-bottom: 1px solid var(--gold-border); /* Altına ince altın çizgi */
    color: var(--gold); /* Yazılar Altın Rengi */
    
    padding: 12px 15px; 
    z-index: 2000; 
    display: none;
    justify-content: center; 
    align-items: center; 
    gap: 10px;
    font-size: 13px; 
    font-weight: 600; 
    letter-spacing: 0.5px;
    
    cursor: pointer; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    
    /* Buzlu Cam Efekti */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    
    animation: slideDown 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* İçindeki sayı (dakika) beyaz kalsın ki okunsun */
.mini-status-bar b {
    color: #fff;
    font-weight: 800;
}

@keyframes slideDown { 
    from { transform: translateY(-100%); } 
    to { transform: translateY(0); } 
}
/* --- DİĞER --- */
.boss-img-effect { border: 2px solid var(--gold) !important; box-shadow: var(--shadow-soft); }
.boss-crown-icon { color: var(--gold); margin-left: 8px; font-size: 14px; vertical-align: middle; }
.btn-rate { 
    background: var(--btn-rate-gradient); background-size: 200% auto; 
    color: var(--text-dark); border: none; border-radius: 50px; 
    padding: 8px 16px; font-size: 11px; font-weight: 900; 
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer; 
    display: inline-flex; align-items: center; gap: 6px; 
}

/* CROPPER */
.crop-modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: #000; z-index: 9999; display: none; 
    flex-direction: column; align-items: center; justify-content: center; padding: 20px; 
}
.crop-container-wrapper { width: 100%; height: 60vh; background: #111; margin-bottom: 20px; position: relative; overflow: hidden; }
#cropImageToEdit { display: block; max-width: 100%; }

/* --- TAKVİM & MUHASEBE (Grid & Cell) --- */
.calendar-wrapper {
    background: var(--bg-card); border-radius: 20px; border: 1px solid var(--border-light);
    padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: fadeIn 0.5s ease;
}
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.calendar-header button {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-light); color: var(--text-main);
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.calendar-header button:hover { border-color: var(--gold); color: var(--gold); }
.cal-title h3 { margin: 0; font-size: 16px; color: var(--text-main); }
.cal-total { font-size: 12px; color: var(--text-muted-light); margin-top: 2px; }

.view-toggle { display: flex; background: #222; border-radius: 8px; padding: 3px; margin-bottom: 15px; }
.view-toggle button {
    flex: 1; border: none; background: transparent; color: var(--text-muted-light); padding: 6px 0;
    font-size: 12px; font-weight: bold; cursor: pointer; border-radius: 6px; transition: 0.3s;
}
.view-toggle button.active { background: var(--gold); color: var(--text-dark); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day-name { text-align: center; font-size: 10px; color: var(--text-muted); font-weight: bold; text-transform: uppercase; margin-bottom: 5px; }
.cal-cell {
    background: var(--calendar-cell-bg); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px; aspect-ratio: 1; padding: 4px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: 0.2s; cursor: pointer; min-height: 50px;
}
.cal-cell:hover { background: var(--calendar-cell-hover); border-color: #555; }
.cal-cell.has-money { background: var(--gold-bg-low); border-color: rgba(201, 162, 77, 0.3); }
.cal-cell.today { border: 1px solid var(--text-main); }
.cal-num { font-size: 11px; color: #aaa; font-weight: bold; }
.cal-money { font-size: 9px; color: var(--gold); font-weight: 800; text-align: right; line-height: 1; }
.cal-cell.empty { background: transparent; border: none; pointer-events: none; }

/* HAFTALIK ŞERİT GÖRÜNÜMÜ */
.week-strip-wrapper { display: flex; flex-direction: column; gap: 15px; }
.week-strip {
    background: var(--staff-card-bg); border: 1px solid var(--border-light);
    border-radius: 15px; padding: 12px; cursor: pointer; transition: 0.3s;
}
.week-strip:hover { background: var(--staff-card-hover); border-color: var(--gold); transform: translateY(-2px); }
.week-strip-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.week-strip-title { font-weight: bold; color: var(--text-main); font-size: 14px; }
.week-strip-total { color: var(--gold); font-weight: 800; font-size: 15px; }
.week-strip-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ws-day {
    background: var(--calendar-cell-bg); border-radius: 6px; text-align: center; padding: 4px 0;
    font-size: 10px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px;
}
.ws-day.active { background: var(--gold-bg-mid); color: var(--text-main); border: 1px solid rgba(201, 162, 77, 0.2); }
.ws-day-num { font-weight: bold; margin-bottom: 2px; }
.ws-day-money { font-size: 8px; color: var(--gold); }

/* DETAY MODAL */
#detailList { max-height: 300px; overflow-y: auto; }
.detail-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: left;
}
.detail-item:last-child { border-bottom: none; }
.detail-left div { color: var(--text-main); font-weight: 600; font-size: 14px; }
.detail-left span { color: var(--text-muted-light); font-size: 12px; }
.detail-right { text-align: right; }
.detail-right div { color: var(--gold); font-weight: bold; }
.detail-right span { color: #555; font-size: 11px; }

/* --- MOBİL UYUMLULUK DÜZELTMESİ (TAKVİM İÇİN) --- */
@media (max-width: 480px) {
    /* Takvim çerçevesinin kenar boşluklarını azalt */
    .calendar-wrapper { 
        padding: 8px; 
        width: 100%;
        overflow: hidden; /* Taşmayı engelle */
        box-sizing: border-box;
    }

    /* Grid aralarındaki boşluğu (gap) düşür ki 7 tane yan yana sığsın */
    .calendar-grid { 
        gap: 2px !important; 
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important; /* 7 Eşit parça */
    }

    /* Gün isimleri (Pzt, Sal...) */
    .cal-day-name {
        font-size: 9px;
        margin-bottom: 2px;
    }

    /* Takvim Kutucukları */
    .cal-cell { 
        min-height: 40px; /* Kutuları biraz kısalt */
        border-radius: 6px; 
        padding: 2px; /* İç boşluğu azalt */
        overflow: hidden; /* İçerik taşarsa gizle */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Gün Numarası (1, 2, 3...) */
    .cal-num { 
        font-size: 10px; 
        margin-bottom: 2px;
    }

    /* Para Miktarı (1.250 ₺) */
    .cal-money { 
        font-size: 7.5px; /* Yazıyı küçült sığsın */
        letter-spacing: -0.5px; /* Harfleri birbirine yaklaştır */
        white-space: nowrap; /* Alt satıra inmesin */
        overflow: hidden; /* Taşarsa gizle */
        text-overflow: ellipsis; /* ... koy */
        width: 100%;
        text-align: center;
    }

    /* Muhasebe başlık yazılarını da mobilde biraz küçültelim */
    .cal-title h3 { font-size: 13px; }
    .cal-total { font-size: 10px; }
}

/* Crop Container Override */
.crop-container {
    max-width: 100%; max-height: 60vh; background: #000; margin-bottom: 20px; overflow: hidden;
}
/* Selection Btn */
.selection-btn {
    width: 100%; padding: 15px; margin-bottom: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-light);
    color: var(--text-main); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: 0.3s; font-size: 14px;
}
.selection-btn:hover { border-color: var(--gold); background: rgba(255,255,255,0.08); }
.selection-btn i { font-size: 18px; color: var(--gold); }
/* --- PREMIUM SAAT & İZİN AYARLARI KARTLARI --- */

.premium-card {
    background: rgba(255, 255, 255, 0.03); /* Hafif transparan */
    border: 1px solid var(--border-light);
    border-radius: 20px;
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: fadeIn 0.5s ease;
}

/* Kart Başlığı */
.card-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 100%);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--border-light);
}

/* Profil Resmi / Harf Yuvarlağı */
.avatar-circle {
    width: 50px; height: 50px;
    background: var(--gold);
    color: #000;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 22px;
    box-shadow: 0 0 15px var(--gold-glow);
    border: 2px solid rgba(255,255,255,0.1);
}
.avatar-img {
    width: 50px; height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
}

.staff-info h3 { margin: 0; color: var(--text-main); font-size: 18px; font-weight: 600; }
.status-text { color: var(--text-muted); font-size: 13px; }

/* Kart İçeriği */
.card-body { padding: 20px; }

.control-group { margin-bottom: 20px; }
.control-group label {
    display: block; color: var(--gold);
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 10px;
}
.control-group label i { margin-right: 5px; }

/* Özel Select Kutusu */
.select-wrapper { position: relative; }
.select-wrapper select {
    width: 100%; background: var(--input-bg); color: var(--text-main);
    border: 1px solid var(--border-medium); padding: 15px;
    border-radius: 12px; font-size: 16px;
    appearance: none; outline: none;
}
.select-wrapper i { 
    position: absolute; right: 15px; top: 50%; 
    transform: translateY(-50%); color: var(--text-muted); pointer-events: none; 
}

/* Saat Kutuları (Time Grid) */
.time-grid { display: flex; align-items: center; gap: 10px; }
.time-box {
    flex: 1; background: var(--input-bg); border: 1px solid var(--border-medium);
    border-radius: 12px; padding: 10px; text-align: center;
    transition: 0.3s;
}
.time-box:focus-within { border-color: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }

.time-box span { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 1px; }
.time-box input {
    width: 100%; background: transparent; border: none;
    color: var(--text-main); font-size: 20px; font-weight: bold;
    text-align: center; font-family: 'Courier New', monospace; outline: none;
}
.time-divider { color: var(--text-muted); font-size: 12px; }

/* Tarih Ekleme Alanı */
.date-add-row { display: flex; gap: 10px; }
.date-add-row input {
    flex: 1; background: var(--input-bg); border: 1px solid var(--border-medium);
    color: var(--text-main); padding: 12px; border-radius: 12px;
    font-size: 16px; outline: none; font-family: 'Inter', sans-serif;
}
.date-add-row button {
    width: 50px; background: var(--gold); border: none;
    border-radius: 12px; color: #000; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* İzin Rozetleri */
.off-days-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.badge-date {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-dim); padding: 6px 12px; border-radius: 20px;
    font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.badge-date i { color: #ff5555; cursor: pointer; padding: 2px; }

/* Kaydet Butonu */
.save-btn {
    width: 100%; background: transparent;
    border-top: 1px solid var(--border-light); border-left: none; border-right: none; border-bottom: none;
    padding: 18px; color: var(--gold);
    font-weight: 800; font-size: 14px; letter-spacing: 1px;
    cursor: pointer; transition: 0.2s;
    text-transform: uppercase;
}
.save-btn:active { background: var(--gold-bg-low); }

/* Dükkan Genel Ayarları Kartı */
.shop-header-card {
    background: linear-gradient(145deg, var(--gold-bg-low) 0%, rgba(0,0,0,0) 100%);
    border: 1px solid var(--gold-border);
    border-radius: 20px; padding: 20px; margin-bottom: 30px;
}
.shop-save-btn {
    width: 100%; margin-top: 15px; padding: 12px; 
    background: var(--gold); color: #000; border: none; 
    border-radius: 10px; font-weight: bold; cursor: pointer;
}
/* --- DÜZELTİLMİŞ SAAT KUTULARI (GÜNCELLENDİ) --- */

.time-grid-fixed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.time-input-container {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    padding: 8px 0; /* Yanlardan padding'i kaldırdık, sadece üst-alt */
    
    /* İÇERİĞİ ZORLA ORTALA */
    display: flex;
    flex-direction: column; /* Alt alta diz */
    align-items: center;    /* Yatayda tam ortala */
    justify-content: center; /* Dikeyde tam ortala */
    
    position: relative;
    transition: 0.3s;
}

.time-input-container:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 10px var(--gold-glow);
}

.input-label {
    display: block;
    width: 100%; /* Tam genişlik */
    text-align: center; /* Yazıyı ortala */
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
    letter-spacing: 1px;
    font-weight: bold;
    text-transform: uppercase;
}

.time-input-container input {
    display: block;
    width: 100%; /* Kapsayıcının tamamını kaplasın */
    background: transparent;
    border: none;
    color: var(--text-main);
    
    font-size: 20px;
    font-weight: 800;
    font-family: 'Courier New', monospace; /* Rakamların hizalı durması için */
    
    text-align: center; /* İçindeki metni ortala */
    padding: 0;
    margin: 0;
    outline: none;
    appearance: none; /* Tarayıcı varsayılan stilini sil */
    -webkit-appearance: none;
}

/* Chrome/Edge'deki saat ikonunu GÖRÜNÜR YAP ve SAĞA YASLA */
.time-input-container input::-webkit-calendar-picker-indicator {
    filter: invert(1); /* İkonu beyaz yap */
    cursor: pointer;
    opacity: 0.6;
    
    /* DEĞİŞİKLİK BURADA: İkonu görünür yapıp sağa sabitliyoruz */
    display: block !important; 
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 20px;
    height: 100%;
}

/* Ayırıcı Ok İkonu */
.time-divider-icon {
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- İZİN / TATİL EKLEME ALANI (FİNAL DÜZELTME) --- */

.date-add-row {
    display: flex;
    align-items: center; /* Dikeyde ortalar */
    gap: 10px;           
    width: 100%;         
    position: relative;
    box-sizing: border-box;
    margin-top: 5px;
    height: 50px; /* Satır yüksekliğini sabitliyoruz */
}

/* Tarih Seçici Kapsayıcısı */
.custom-date-wrapper {
    flex: 1;              /* Esnek genişlik */
    background: var(--input-bg);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 15px;      
    height: 100%;         /* Satır yüksekliğini doldur */
    position: relative;
    transition: 0.3s;
    overflow: hidden;     /* Taşmaları gizle */
}

.custom-date-wrapper:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 10px var(--gold-glow);
    background: rgba(255, 255, 255, 0.05);
}

/* İkon (Sol Tarafta) */
.calendar-icon-addon {
    color: var(--gold);
    font-size: 18px;
    margin-right: 10px;
    pointer-events: none; /* Tıklamayı engelle, inputa geçsin */
    display: flex;
    align-items: center;
}

/* Asıl Input (SORUNUN ÇÖZÜLDÜĞÜ YER) */
.custom-date-input {
    flex: 1;              
    background: transparent !important; /* Arka planı şeffaf yap */
    border: none !important;
    color: var(--text-main);
    font-size: 14px;      
    font-weight: 500;
    height: 100%;
    width: 100%;
    outline: none;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 0;
    margin: 0;
    
    /* iOS ve Mobil için Varsayılan Stilleri Sıfırla */
    -webkit-appearance: none;
    appearance: none;
    display: block;
}

/* Mobilde tarih seçici ikonunu düzelt */
.custom-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1); /* İkonu beyaza çevir */
    opacity: 0.5;
    cursor: pointer;
    margin-left: auto; /* İkonu en sağa it */
}

/* Ekle Butonu (+) */
.btn-add-date {
    width: 50px;          
    height: 100%;         /* Satır yüksekliğini doldur */
    background: linear-gradient(135deg, var(--gold), #b89325);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    padding: 0;
    margin: 0;
}

.btn-add-date:active { 
    transform: scale(0.95); 
}
/* --- MUHASEBE PERFORMANS ANALİZİ (YENİ) --- */
.accounting-stats-wrapper {
    margin-top: 20px;
    animation: fadeInUp 0.6s ease-out;
}

.stats-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.stats-title {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trend-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
}

.trend-badge.up {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.trend-badge.down {
    background: rgba(255, 68, 68, 0.15);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.3);
}

/* Kıyaslama Barları */
.comparison-area {
    margin-top: 20px;
}

.comp-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.comp-label {
    width: 80px;
    font-size: 11px;
    color: #888;
}

.comp-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 10px;
}

.comp-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 1s ease-out;
}

.comp-val {
    width: 60px;
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
/* admin.html içine <style> olarak da ekleyebilirsin */
.analysis-summary {
    padding: 15px; border-radius: 12px; margin-bottom: 20px;
}
.analysis-summary.success { background: rgba(46, 204, 113, 0.1); border: 1px solid rgba(46, 204, 113, 0.3); }
.analysis-summary.danger { background: rgba(255, 68, 68, 0.1); border: 1px solid rgba(255, 68, 68, 0.3); }
.analysis-summary h3 { margin: 0 0 5px 0; font-size: 16px; color: #fff; }
.analysis-summary p { margin: 0; font-size: 12px; color: #ccc; }

.analysis-card {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.03); padding: 12px; border-radius: 10px;
    margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.05);
}
.ac-name { font-weight: bold; color: #fff; font-size: 14px; }
.ac-sub { font-size: 11px; color: #888; margin-top: 2px; }
.ac-detail { font-size: 11px; color: var(--gold); margin-top: 2px; }
.success-text { color: #2ecc71; font-weight: bold; }
.danger-pill { 
    background: #ff4444; color: #fff; font-size: 10px; padding: 3px 8px; 
    border-radius: 20px; font-weight: bold; margin-bottom: 5px; display: inline-block;
}
.btn-call-mini {
    display: block; text-align: center; font-size: 11px; text-decoration: none;
    color: var(--text-main); background: #333; padding: 4px; border-radius: 4px;
}
.analysis-empty { text-align: center; color: #666; font-size: 13px; font-style: italic; padding: 20px; }
/* --- ANALİZ BUTONU (PREMIUM & RESPONSIVE) --- */
.analysis-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 25px;       /* Masaüstü için dolgunluk */
    margin-top: 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-decoration: none;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    white-space: nowrap;      /* Yazının alt satıra kaymasını engelle */
}

/* -- RENK VARYASYONLARI -- */
.analysis-btn.up {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.25));
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}
.analysis-btn.down {
    background: linear-gradient(90deg, rgba(255, 68, 68, 0.1), rgba(255, 68, 68, 0.25));
    border-color: rgba(255, 68, 68, 0.4);
    color: #ff4444;
}

/* -- HOVER EFEKTLERİ (Masaüstü) -- */
.analysis-btn:hover { transform: translateY(-2px); }
.analysis-btn.up:hover { box-shadow: 0 0 20px rgba(46, 204, 113, 0.4); border-color: #2ecc71; }
.analysis-btn.down:hover { box-shadow: 0 0 20px rgba(255, 68, 68, 0.4); border-color: #ff4444; }

/* -- PARLAMA EFEKTİ -- */
.analysis-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s; pointer-events: none;
}
.analysis-btn:hover::after { left: 100%; transition: 0.5s ease-in-out; }

/* -- İKON AYARLARI -- */
.analysis-btn i.main-icon { font-size: 16px; }
.analysis-btn i.arrow-icon { font-size: 12px; transition: transform 0.3s; }
.analysis-btn:hover i.arrow-icon { transform: translateX(5px); }

/* --- MOBİL UYUMLULUK (TELEFONLAR İÇİN) --- */
@media (max-width: 480px) {
    .analysis-btn {
        display: flex;            /* Flexbox ile esnet */
        width: 100%;              /* Genişliği fulle */
        justify-content: space-between; /* İkonu sola, oku sağa, yazıyı ortaya al */
        padding: 14px 20px;       /* Parmak için daha geniş alan */
        font-size: 13px;          /* Yazıyı biraz büyüt */
        margin-top: 20px;         /* Üstten biraz daha ayır */
    }

    /* Mobilde hover olmadığı için tıklama (active) efekti */
    .analysis-btn:active {
        transform: scale(0.98);   /* Tıklayınca hafifçe küçülsün */
        opacity: 0.8;
    }
}
/* --- İSTATİSTİK KARTI DÜZENİ (SAĞ ÜST SABİTLEME) --- */

.stats-card {
    position: relative; /* Rozeti içeride tutmak için referans */
    /* Mevcut stiller korunuyor... */
}

/* Başlık Alanı - Flex yapısını iptal ediyoruz ki yazı rahat yayılsın */
.stats-header {
    display: block !important; 
    margin-bottom: 20px;
    padding-right: 120px; /* Sağ üstteki rozet için güvenli boşluk bırak */
}

/* Yüzdelik Rozeti - Sağ Üste Çivile */
.trend-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    /* Mobilde daha şık durması için gölge ekleyelim */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 5;
}

/* Mobilde boşluğu biraz ayarlayalım */
@media (max-width: 480px) {
    .stats-header {
        padding-right: 100px; /* Mobilde rozet biraz daha küçük olabilir */
    }
    .trend-badge {
        font-size: 11px; /* Yazıyı hafif küçült */
        padding: 5px 10px;
        top: 15px;
        right: 15px;
    }
}
/* --- MINI GRAFİK SİSTEMİ (BADGE YERİNE) --- */
.mini-graph-wrapper {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 120px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 5;
}

.graph-percent {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    font-family: 'Inter', sans-serif;
}

/* Renk Temaları */
.graph-theme-up .graph-percent { color: #2ecc71; }
.graph-theme-up svg path { stroke: #2ecc71; }
.graph-theme-up { filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.3)); }

.graph-theme-down .graph-percent { color: #ff4444; }
.graph-theme-down svg path { stroke: #ff4444; }
.graph-theme-down { filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.3)); }

/* SVG ve Animasyon */
.mini-graph-svg {
    width: 100%;
    height: 40px;
    overflow: visible;
}

.mini-graph-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 300; /* Çizgi uzunluğu tahmini */
    stroke-dashoffset: 300; /* Başlangıçta gizli */
    animation: drawGraph 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes drawGraph {
    to { stroke-dashoffset: 0; }
}

/* Mobilde Grafik Konumu */
@media (max-width: 480px) {
    .mini-graph-wrapper {
        top: 15px;
        right: 15px;
        width: 100px; /* Mobilde biraz daha dar */
    }
}
/* --- ULTRA PREMIUM MINI GRAFİK --- */
/* --- SARI (SABİT) TEMA --- */
.theme-yellow .graph-label { color: #ffeb3b; }
.theme-yellow .graph-line { stroke: #ffeb3b; }
.theme-yellow .graph-area { fill: url(#gradYellow); }
.theme-yellow .graph-dot { fill: #ffeb3b; filter: drop-shadow(0 0 5px #ffeb3b); }

/* Sabit Butonu */
.analysis-btn.stable {
    background: linear-gradient(90deg, rgba(255, 235, 59, 0.1), rgba(255, 235, 59, 0.25));
    border-color: rgba(255, 235, 59, 0.4);
    color: #ffeb3b;
}
.analysis-btn.stable:hover { 
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.4); 
    border-color: #ffeb3b; 
}

.mini-graph-container {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 140px;
    height: 90px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none; /* Tıklamayı engelle, arkaya geçsin */
}

/* Yüzdelik Yazısı (Grafiğin Üstünde) */
.graph-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: -5px; /* Grafiğin içine biraz girsin */
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    display: flex; align-items: center; gap: 4px;
}

/* Grafik SVG Alanı */
.mini-graph-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* --- POLYGONAL GRAFİK AYARLARI --- */
.graph-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: square; /* Yuvarlak yerine Küt/Kare uçlar */
    stroke-linejoin: miter; /* Yuvarlak dönüşler yerine Sivri Köşeler */
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawLine 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Alan Dolgusu (Area) */
.graph-area {
    stroke: none;
    opacity: 0;
    animation: fadeInArea 1s ease-out 0.5s forwards; /* Çizgi başladıktan sonra belirsin */
}

/* Sondaki Parlayan Nokta */
.graph-dot {
    opacity: 0;
    animation: fadeInDot 0.5s ease-out 1.2s forwards, pulseDot 2s infinite 1.2s;
    transform-box: fill-box;
    transform-origin: center;
}

/* --- TEMA RENKLERİ --- */

/* YEŞİL (ARTIŞ) TEMA */
.theme-green .graph-label { color: #2ecc71; }
.theme-green .graph-line { stroke: #2ecc71; }
.theme-green .graph-area { fill: url(#gradGreen); }
.theme-green .graph-dot { fill: #2ecc71; filter: drop-shadow(0 0 5px #2ecc71); }

/* KIRMIZI (DÜŞÜŞ) TEMA */
.theme-red .graph-label { color: #ff4444; }
.theme-red .graph-line { stroke: #ff4444; }
.theme-red .graph-area { fill: url(#gradRed); }
.theme-red .graph-dot { fill: #ff4444; filter: drop-shadow(0 0 5px #ff4444); }

/* --- ANİMASYON KEYFRAMES --- */
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeInArea { to { opacity: 0.3; } }
@keyframes fadeInDot { to { opacity: 1; } }
@keyframes pulseDot {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    50% { transform: scale(1.5); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Mobilde Konumlandırma */
@media (max-width: 480px) {
    .mini-graph-container {
        width: 110px;
        height: 90px;
        right: 15px;
        top: 15px;
    }
    .graph-label { font-size: 11px; }
    .mini-graph-svg { transform: scaleY(0.9); transform-origin: bottom; } /* Mobilde çok yüksek olmasın */
}
/* --- MOBİL İÇİN ÖZEL AYARLAR (ÇARPIŞMA DÜZELTİLDİ) --- */
@media (max-width: 480px) {
    .mini-graph-container {
        width: 110px;  /* Grafik boyutu aynı kalsın */
        height: 85px;
        top: 18px;    /* Grafiği çok az daha aşağı indirdik */
        right: 15px;
    }
    
    .stats-header {
        /* ÖNEMLİ DÜZELTME: */
        /* Önceden 95px idi, şimdi 120px yapıyoruz ki yazı grafiğe değmesin */
        padding-right: 120px !important; 
        
        /* Yazı ve ciro alt alta düzgün dursun */
        flex-direction: column; 
        align-items: flex-start;
    }
    
    .stats-title {
        font-size: 11px; 
        /* Yazı çok uzunsa grafiğin altına girmek yerine alt satıra geçsin */
        white-space: normal; 
        line-height: 1.4;
        display: block;
        width: 100%;
    }
    
    /* Grafiğin içindeki yazı boyutu */
    .graph-label {
        font-size: 10px; 
    }
}

/* =========================================
   1. BUTON HİZALAMA DÜZELTMESİ (Modal Actions)
   ========================================= */
.modal-actions {
    display: flex;
    align-items: center;       /* Dikeyde tam ortala */
    justify-content: center;   /* Yatayda tam ortala */
    gap: 15px;
    width: 100%;
    margin-top: 15px;
}

/* Butonların dış boşluklarını sıfırla ki hizaları bozulmasın */
.modal-actions button {
    margin: 0 !important;      /* Mevcut marginleri ez */
    height: 50px;              /* İkisini de aynı yüksekliğe zorla */
    flex: 1;                   /* Eşit genişlikte olsunlar */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   2. CROPPER.JS ÖZELLEŞTİRME (Sarı Daire)
   ========================================= */

/* Seçim Alanını Daire Yap */
.cropper-view-box,
.cropper-face {
    border-radius: 50%; 
}

/* Ana Çerçeve Rengini Sarı (Gold) Yap */
.cropper-view-box {
    outline: 2px solid var(--gold) !important; 
    box-shadow: 0 0 0 1px var(--gold) !important; 
}

/* Kesik Çizgileri (Izgara) Sarı Yap */
.cropper-dashed {
    border-color: var(--gold) !important;
    opacity: 0.5;
}

/* Köşe ve Kenar Tutamaçlarını Sarı Yap */
.cropper-point {
    background-color: var(--gold) !important;
    opacity: 0.8;
}

/* Orta Artı İşaretini Sarı Yap */
.cropper-center::before,
.cropper-center::after {
    background-color: var(--gold) !important;
}

/* Arka planı biraz daha karart */
.cropper-modal {
    opacity: 0.8 !important;
}
/* --- MANUEL RANDEVU DÜZELTMELERİ (FİNAL) --- */

/* 1. İsim/Tel Inputlarındaki Boşluğu Düzelt */
.manual-form-container input {
    padding-left: 15px !important; /* O gereksiz 45px boşluğu iptal eder */
}

/* 2. Hızlı Randevu Butonu (Koyu Gri & Sarı Yazı) */
.btn-dark-gold {
    background: #222; /* Koyu Gri Arka Plan */
    color: var(--gold); /* Sarı Yazı */
    border: 1px solid rgba(212, 175, 55, 0.3); /* İnce sarı çerçeve */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-dark-gold:hover {
    background: #333; /* Üzerine gelince hafif açılır */
    border-color: var(--gold); /* Çerçeve parlar */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

/* 3. Hizmet Kartları (Index.html Tarzı) */
.manual-service-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 8px;
    transition: 0.2s;
}
.manual-service-card:hover { background: rgba(255,255,255,0.08); }
.manual-service-card.selected {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.15); /* Seçilince hafif sarı zemin */
}
.manual-service-card .ms-title { font-size: 14px; font-weight: bold; color: #fff; }
.manual-service-card .ms-price { font-size: 13px; font-weight: bold; color: var(--gold); }
/* --- PREMIUM KARŞILAMA HEADER (YENİ) --- */
.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alt çizgiye hizala */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1); /* İnce alt çizgi */
    position: relative;
}

.greeting-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.greeting-top {
    font-family: 'Playfair Display', serif;
    font-size: 26px; /* Yazıyı büyüttük */
    font-weight: 700;
    
    /* Altın Gradient Efekti */
    background: var(--brand-shine-gradient); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    display: flex;
    align-items: center;
    gap: 10px;
}

.greeting-icon {
    font-size: 22px;
    color: var(--gold);
    -webkit-text-fill-color: var(--gold); /* İkonun içi dolu olsun */
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.user-name-display {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    font-weight: 400;
}

/* Geçmiş Butonunu (Sağdaki) Ufak Revize Edelim */
.header-action-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-light);
    color: var(--text-main);
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s;
    font-size: 16px;
}
.header-action-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(255,255,255,0.08);
}
/* --- COMPACT & CHIC GREETING HEADER --- */
.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alt çizgi yerine ortalayalım */
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.greeting-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.greeting-top {
    font-family: 'Inter', sans-serif; /* Playfair yerine daha modern Inter */
    font-size: 13px; /* Çok daha küçük ve zarif */
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Harf aralığını açarak şıklık kattık */
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

.greeting-icon {
    font-size: 14px; /* İkon da küçüldü */
    color: var(--gold);
    animation: none; /* Zıplama animasyonunu kaldırdık, daha sakin dursun */
}

/* Kullanıcı Adı Artık Ana Odak */
.user-name-display {
    font-family: 'Playfair Display', serif;
    font-size: 22px; /* İsim daha büyük ve dikkat çekici */
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.5px;
    background: linear-gradient(to right, #fff, #e0e0e0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Geçmiş Butonu (Daha Minimal) */
.header-action-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-dim);
    width: 36px; height: 36px; /* Biraz küçülttük */
    border-radius: 50%; /* Kare yerine tam yuvarlak */
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s;
    font-size: 14px;
}
.header-action-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: rotate(15deg); /* Hafif bir hareket */
}
/* --- PREMIUM ONAY MODALI (style.css EN ALTINA EKLE) --- */

.confirm-card-design {
    padding: 0 !important; /* İç boşluğu sıfırla, biz ayarlayacağız */
    border: 1px solid var(--gold-border);
    overflow: hidden; /* Köşeler taşmasın */
    background: #121212;
}

.confirm-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0));
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.confirm-header i { font-size: 24px; color: var(--gold); margin-bottom: 10px; }
.confirm-header h3 { margin: 0; font-size: 18px; color: #fff; }
.confirm-header p { margin: 5px 0 0 0; font-size: 12px; color: #888; }

.confirm-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Satır Düzeni */
.c-row {
    display: flex; align-items: center; gap: 15px;
    background: rgba(255,255,255,0.03);
    padding: 12px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: left;
}
.c-row-group { display: flex; gap: 10px; }
.c-row.half { flex: 1; } /* Yarım genişlik */

/* İkon Kutusu */
.c-icon {
    width: 36px; height: 36px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-size: 14px;
    flex-shrink: 0;
}

/* Bilgi Metinleri */
.c-info { display: flex; flex-direction: column; }
.c-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.c-val { font-size: 14px; color: #fff; font-weight: 600; margin-top: 2px; }

/* Toplam Tutar Alanı */
.confirm-total {
    background: rgba(212, 175, 55, 0.1);
    padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.confirm-total span { font-size: 12px; font-weight: bold; color: var(--gold); letter-spacing: 1px; }
.confirm-total strong { font-size: 20px; color: #fff; font-family: 'Playfair Display', serif; }

/* Buton Alanı */
.modal-actions {
    padding: 20px;
    display: flex; gap: 15px;
}
.modal-actions button { margin: 0; width: 100%; }
/* --- MODAL PERSONEL FOTOĞRAFI --- */
.c-icon.profile-icon {
    padding: 0; /* Resim olduğu için iç boşluğu sıfırla */
    overflow: hidden; /* Taşan kısımları gizle */
    border: 1px solid var(--gold); /* Şık bir altın çerçeve ekle */
    background: #000; /* Resim yüklenmezse siyah fon */
}

.c-icon.profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi bozmadan yuvarlağın içine doldur */
    display: block;
}
/* --- GEÇMİŞ RANDEVULAR (PREMIUM KART TASARIMI) --- */
.history-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 15px;
    transition: 0.3s;
    position: relative;
    text-align: left; /* Modal center olduğu için bunu sola çekiyoruz */
}
.history-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Kart Üst Bilgi (Tarih & Fiyat) */
.h-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.h-date-group { display: flex; flex-direction: column; }
.h-date { 
    color: #fff; font-weight: 700; font-size: 15px; 
    display: flex; align-items: center; gap: 8px; 
}
.h-date i { color: var(--gold); font-size: 14px; }
.h-time { color: #888; font-size: 13px; margin-left: 24px; margin-top: 2px; }

.h-price-tag {
    background: rgba(212, 175, 55, 0.1); color: var(--gold);
    padding: 5px 10px; border-radius: 8px;
    font-weight: 800; font-size: 14px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Kart Orta Kısım (Hizmet & Personel) */
.h-body { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.h-service-info { display: flex; flex-direction: column; gap: 4px; }
.h-service { color: #eee; font-weight: 600; font-size: 14px; }
.h-staff { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #aaa; }
.h-staff img { 
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover; 
    border: 1px solid #444; 
}

/* Kart Alt Kısım (Buton) */
.h-footer { display: flex; justify-content: flex-end; }
.btn-rate-modern {
    background: var(--btn-rate-gradient);
    border: none; border-radius: 8px;
    padding: 8px 16px; font-size: 11px; font-weight: 800;
    color: #000; cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: 0.3s; text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-rate-modern:hover { 
    transform: scale(1.05); 
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); 
}
.rated-badge {
    color: var(--success); font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 5px;
    background: rgba(46, 204, 113, 0.1); padding: 6px 12px; border-radius: 8px;
}
/* --- BİLET PERSONEL FOTOĞRAFI --- */
.ticket-staff-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Sağa yaslı olduğu için */
    gap: 10px; /* İsimle resim arası boşluk */
    margin-top: 4px;
}

#ticketStaffImg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold); /* Altın çerçeve */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Hafif gölge */
    background: #000;
}
/* --- BİLET EKRANI - ORTALANMIŞ PERSONEL FOTOĞRAFI --- */

/* Kapsayıcıyı dikey ve ortalanmış yap */
.staff-centered-block {
    display: flex !important; /* Mevcut 'right' hizalamasını ezmek için */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 10px; /* Üstteki 'Hizmet'ten biraz uzaklaşsın */
}

/* Fotoğrafın Stili (Üstte ve Büyükçe) */
#ticketStaffImg {
    width: 55px;  /* Biraz daha büyük ve belirgin */
    height: 55px;
    border-radius: 50%; /* Tam yuvarlak */
    object-fit: cover;
    border: 2px solid var(--gold); /* Altın çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Şık bir gölge */
    background: #111;
    margin-bottom: 8px; /* Yazılarla arasına boşluk */
}

/* Altındaki Yazıların Kutusu */
.staff-text-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Etiket ve İsim Ortalanmış Olsun */
.staff-centered-block .lbl,
.staff-centered-block .val {
    text-align: center;
    width: 100%;
    display: block;
}

/* İsim biraz daha parlak olsun */
.staff-centered-block .val {
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.5px;
}
/* --- BİLET DETAYLARI (3 SÜTUNLU YAPI) --- */

.ticket-details-grid {
    display: flex;
    justify-content: space-between; /* Sağa ve sola yasla, ortayı merkeze al */
    align-items: center; /* Dikeyde hepsini ortala */
    background: rgba(255,255,255,0.03);
    padding: 15px 20px;
    border-radius: 16px;
    position: relative;
}

/* Orta Fotoğraf Kutusu */
.ticket-middle-photo {
    flex: 0 0 auto; /* Esnemesin, fotoğraf kadar yer kaplasın */
    margin: 0 10px; /* Sağdan soldan biraz boşluk bırak */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fotoğrafın Kendisi */
#ticketStaffImg {
    width: 45px;  /* Fotoğrafı belirgin şekilde büyüttük */
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
    box-shadow: 0 0 20px rgba(0,0,0,0.6); /* Güçlü bir gölge ile öne çıksın */
    background: #111;
    transform: translateY(-2px); /* Hafif yukarı kalkık dursun */
}

/* Sağ Tarafı Düzeltme */
.t-detail-item.right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Yazıları sağa daya */
}
/* --- ADMIN GEÇMİŞ KART TASARIMI --- */
.admin-history-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    transition: 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-history-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--gold);
    transform: translateX(5px);
}

.ah-left { display: flex; flex-direction: column; gap: 4px; }
.ah-name { font-weight: 700; color: #fff; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ah-detail { font-size: 12px; color: #888; display: flex; gap: 10px; align-items: center; }
.ah-detail span { display: flex; align-items: center; gap: 4px; }
.ah-detail i { color: var(--gold); font-size: 10px; }

.ah-right { text-align: right; }
.ah-price { color: var(--gold); font-weight: 800; font-size: 16px; letter-spacing: 0.5px; }
.ah-badge { 
    font-size: 10px; padding: 3px 8px; border-radius: 6px; 
    font-weight: bold; text-transform: uppercase; 
    display: inline-block; margin-top: 4px;
}
.badge-manual { background: rgba(255, 159, 67, 0.2); color: #ff9f43; border: 1px solid rgba(255, 159, 67, 0.3); }
.badge-web { background: rgba(52, 152, 219, 0.2); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); }
/* --- ADMIN PANELİ YENİ TASARIM (Tarih & Saat Grid) --- */

.admin-date-card.is-today {
    border: 1px solid rgba(46, 204, 113, 0.5); /* Hafif yeşil çerçeve */
    background: rgba(46, 204, 113, 0.05);      /* Çok hafif yeşil zemin */
}

/* Eğer "Bugün" olan kart AYNI ZAMANDA "Seçili" ise */
.admin-date-card.selected.is-today {
    background: linear-gradient(135deg, var(--gold), #b89325); /* Gold arka plan baskın gelir */
    border: none;
}

/* Seçiliyken BUGÜN yazısının rengi siyah olsun (Gold üstüne siyah okunur) */
.admin-date-card.selected.is-today .today-badge {
    color: #000;
    background: rgba(255, 255, 255, 0.3);
}

/* 2. "BUGÜN" Etiketi Tasarımı */
.today-badge {
    font-size: 8px;
    font-weight: 900;
    color: #2ecc71; /* Yeşil Yazı */
    letter-spacing: 0.5px;
    background: rgba(46, 204, 113, 0.15); /* Yazı arkasına hafif fon */
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
}

/* Eski nokta stilini iptal etmek için (varsa silebilirsin de) */
.today-indicator-dot {
    display: none !important;
}

/* 2. Saat Izgarası */
    .admin-time-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Yan yana 4 kutu */
        gap: 10px;
        margin-bottom: 20px;
    }

    .admin-time-slot {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 15px 5px;
        text-align: center;
        position: relative;
        cursor: pointer;
        transition: 0.2s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60px;
    }

    .admin-time-slot:active { transform: scale(0.95); }

    .admin-time-text {
        font-size: 16px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        color: #fff;
    }
    .admin-time-sub {
        font-size: 10px;
        color: #888;
        margin-top: 2px;
    }

    /* 3. Yanıp Sönen Durum Noktaları (Trafik Işığı) */
    .status-dot {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        animation: blink-animation 1.5s infinite;
    }

    .dot-green { background-color: #2ecc71; box-shadow: 0 0 8px #2ecc71; } /* Dolu */
    .dot-orange { background-color: #f39c12; box-shadow: 0 0 8px #f39c12; } /* Boş */
    .dot-red { background-color: #ff4444; box-shadow: 0 0 8px #ff4444; }    /* Geçmiş */

    @keyframes blink-animation {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.8); }
        100% { opacity: 1; transform: scale(1); }
    }

    /* Mobilde 3 sütuna düşür */
    @media (max-width: 400px) {
        .admin-time-grid { grid-template-columns: repeat(3, 1fr); }
    }
    /* --- ADMIN PANELİ YENİ TASARIM (GÜNCELLENMİŞ) --- */

    /* 1. Personel Filtre Şeridi (YENİ) */
    .admin-staff-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 5px;
        margin-bottom: 15px;
        scrollbar-width: none;
    }
    .admin-staff-scroll::-webkit-scrollbar { display: none; }

    .admin-staff-chip {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        color: #aaa;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .admin-staff-chip img {
        width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
    }

    .admin-staff-chip.selected {
        background: var(--gold);
        color: #000;
        border-color: var(--gold);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    }

    /* 2. Tarih Kartları (Daha Kibar) */
    .admin-date-scroll {
        display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; margin-bottom: 15px; scrollbar-width: none;
    }
    .admin-date-card {
    min-width: 65px;
    background: rgba(255, 255, 255, 0.03); /* Daha şeffaf */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Çok ince kenar */
    border-radius: 16px; /* Daha yuvarlak */
    padding: 12px 5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s; position: relative;
}
.admin-date-card.selected {
    background: linear-gradient(135deg, var(--gold), #b89325); /* Gradient eklendi */
    color: #000; border: none; font-weight: bold;
    transform: translateY(-2px); /* Seçilince hafif yukarı */
}
.today-indicator-dot {
    position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
    background-color: #2ecc71; border-radius: 50%; box-shadow: 0 0 5px #2ecc71;
    animation: blink-animation 1.5s infinite;
}

/* --- KOMPAKT & ŞIK KUTULAR (KAYDIRMAYI ÖNLEMEK İÇİN) --- */

/* 1. Izgarayı Sıkılaştır (Daha çok kutu sığsın) */
.admin-time-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Masaüstünde yan yana 5 tane */
    gap: 6px; /* Aradaki boşlukları azalttık */
    margin-bottom: 15px;
    padding: 0 5px;
}

.admin-time-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Bilgisayarda 5 sütun */
    gap: 6px; 
    margin-bottom: 20px;
    padding: 0 5px;
}

/* --- 2. KUTU GENEL AYARI (BOŞ SAATLER) --- */
.admin-time-slot {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px; 
    padding: 4px 2px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 45px; /* İnce ve kibar yükseklik */
}

/* Hover Efekti */
.admin-time-slot:hover {
    background: #252525;
    border-color: #555;
}

/* Yazı Ayarları */
.admin-time-text {
    font-size: 13px;
    font-weight: 700;
    color: #eee;
    font-family: 'Inter', sans-serif;
    margin-bottom: 1px;
}

.admin-time-sub {
    font-size: 10px;
    color: #888;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* --- 3. AKTİF RANDEVU (YEŞİL - GELECEK) --- */
/* "slot-booked" sınıfı varsa ama "slot-expired" YOKSA burası çalışır */
.slot-booked {
    background: rgba(46, 204, 113, 0.1) !important; /* Hafif Yeşil Zemin */
    border: 1px solid #2ecc71 !important;          /* Yeşil Çerçeve */
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.15);
}

.slot-booked .admin-time-text {
    color: #2ecc71 !important; /* Saat Yeşil */
}

.slot-booked .admin-time-sub {
    color: #fff !important;    /* İsim Beyaz */
}

/* --- 4. GEÇMİŞ RANDEVU (GRİ KUTU / KIRMIZI İSİM) --- */
/* "slot-expired" sınıfı en sonda olduğu için yeşili ezer ve bunu uygular */
.slot-expired {
    background: #141414 !important;    /* Kutu: Koyu Gri */
    border: 1px solid #333 !important; /* Çerçeve: Mat Gri */
    box-shadow: none !important;       /* Gölgeyi kaldır */
    opacity: 0.85;
    cursor: pointer;
}

.slot-expired .admin-time-text { 
    color: #666 !important;        /* Saat: Gri */
    text-decoration: line-through; /* Üstü Çizili */
    text-decoration-color: #444;   
}

.slot-expired .admin-time-sub {
    color: #ff4444 !important;     /* İsim: KIRMIZI */
    display: block !important;
}

/* Noktalar */
.status-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* Geçmiş Randevunun Noktası (Kırmızı) */
.slot-expired .status-dot {
    background-color: #ff4444 !important;
    box-shadow: 0 0 5px #ff4444 !important;
    opacity: 1;
}

/* --- MOBİL AYARLARI --- */
@media (max-width: 480px) {
    .admin-time-grid { 
        grid-template-columns: repeat(4, 1fr); /* Mobilde 4 sütun */
    }
}
/* --- GEÇMİŞ RANDEVULAR TARİH BAŞLIĞI --- */
.history-group-header {
    font-size: 11px;
    font-weight: 800;
    color: #666;
    margin: 20px 0 10px 5px; /* Kartların arasına mesafe koyar */
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Başlığın sağına ince bir çizgi çekelim (Şık durur) */
.history-group-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

/* Rozetlerin yerleşimini az düzelttim */
.ah-badge {
    margin-top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* --- GEÇMİŞ SAYFASI TARİH FİLTRESİ (KATALOG) --- */
.history-filter-wrapper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 20px;
    scrollbar-width: none; /* Firefox scroll gizle */
}
.history-filter-wrapper::-webkit-scrollbar { display: none; }

.history-date-chip {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Seçili Tarih */
.history-date-chip.active {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    font-weight: 800;
}
/* --- MÜŞTERİLER (CRM) MODU --- */

/* 1. Üst Arama ve İstatistik Alanı */
.crm-header {
    position: sticky; 
    top: 0; 
    background: transparent; /* Siyah arka planı kaldırdık */
    z-index: 10; 
    padding-bottom: 15px; 
    margin-bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Arkadan geçen yazılar karışmasın diye hafif buzlu cam efekti */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Kenar boşluklarını sıfırlayalım ki tam otursun */
    margin-left: -25px; 
    margin-right: -25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px; /* Üstten biraz boşluk */
}

.crm-search-box {
    position: relative;
    margin-bottom: 10px;
}
.crm-search-box input {
    padding-left: 45px !important; /* İkon için boşluk */
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-medium);
    border-radius: 50px; /* Tam yuvarlak kenarlar */
    color: #fff;
    width: 100%;
}
.crm-search-box input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}
.crm-search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--gold);
}

/* 2. Müşteri Kartı */
.customer-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.2s ease;
}

/* Durum Renkleri (Otomatik Sınıflar) */
.customer-card.is-banned {
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.05);
}
.customer-card.is-risky {
    border-color: #f39c12;
    background: rgba(243, 156, 18, 0.05);
}

/* Avatar (Baş Harf) */
.c-avatar {
    width: 45px; height: 45px;
    background: #222; color: #aaa;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
    margin-right: 15px;
    border: 1px solid var(--border-medium);
}
.is-banned .c-avatar { background: #3a1c1c; color: #ff4444; border-color: #ff4444; }
.is-risky .c-avatar { background: #3a2e1c; color: #f39c12; border-color: #f39c12; }

/* Bilgi Alanı */
.c-info { flex: 1; overflow: hidden; }
.c-name { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-phone { font-size: 12px; color: #666; font-family: monospace; margin-top: 2px; }

/* Rozetler (Ceza Puanı Burada Görünecek) */
.c-badges { display: flex; gap: 5px; margin-top: 6px; }
.c-badge { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: bold; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }

/* Rozet Renkleri */
.badge-clean { background: rgba(46, 204, 113, 0.1); color: #2ecc71; } /* Temiz */
.badge-penalty { background: rgba(243, 156, 18, 0.15); color: #f39c12; border: 1px solid rgba(243, 156, 18, 0.3); } /* Ceza Puanı Var */
.badge-banned { background: rgba(255, 68, 68, 0.15); color: #ff4444; border: 1px solid rgba(255, 68, 68, 0.3); } /* Yasaklı */

/* Aksiyon Butonları */
.c-actions { display: flex; gap: 8px; }
.btn-icon-mini {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
    font-size: 14px;
}
.btn-reset { background: rgba(255,255,255,0.05); color: #ccc; }
.btn-ban { background: rgba(255, 68, 68, 0.1); color: #ff4444; }
.btn-unban { background: rgba(46, 204, 113, 0.1); color: #2ecc71; }

.btn-reset:hover { background: #fff; color: #000; }
.btn-ban:hover { background: #ff4444; color: #fff; }
.btn-unban:hover { background: #2ecc71; color: #fff; }
/* --- MOBİL ARAMA ODAKLANMA MODU (DÜZELTİLDİ: SİYAH KUTU YOK) --- */
@media (max-width: 480px) {
    /* Arama kutusuna tıklandığında üst kısmı ve menüyü GİZLE */
    body.search-focused .profile-header,
    body.search-focused .admin-nav {
        display: none !important;
    }

    /* Konteynırın boşluklarını sıfırla */
    body.search-focused .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Arama başlığını en tepeye sabitle (ŞEFFAF VE BULANIK) */
    body.search-focused .crm-header {
        top: 0;
        padding-top: 15px;
        background: transparent !important; /* Siyah rengi kaldırdık */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        
        /* Arkası yine buzlu cam olsun */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        /* Tam genişlik ayarı (Eğer kenarlarda boşluk kalıyorsa) */
        width: 100%; 
        border-radius: 0 0 20px 20px; /* Alt köşeleri hafif yuvarla */
    }

    /* Listenin altına devasa boşluk bırak (Klavye için güvenli alan) */
    body.search-focused #customerListArea {
        padding-bottom: 350px !important; 
    }
}
/* --- ADMIN PANELİ DÜZENLEMESİ (BEKLEYEN KISMI) --- */

/* 1. Filtreleme Kartı (Tüm filtreleri tutan kutu) */
.filter-dashboard-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 20px 15px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 2. Bölüm Başlıkları (Daha küçük ve net) */
.dashboard-section-title {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dashboard-section-title i { color: var(--gold); }

/* 3. Araya Çizgi (İstediğin Ayırıcı) */
.dashboard-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    margin: 20px 0;
    width: 100%;
}

/* 4. Saat Durumu Başlığı (Tablo Üstü) */
.grid-header-row {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 15px;
    padding: 0 5px;
}

/* 5. Hızlı İşlem Butonu (Daha Premium) */
.btn-quick-action {
    background: linear-gradient(135deg, #222, #1a1a1a);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    padding: 15px;
    width: 100%;
    border-radius: 16px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    margin-bottom: 20px;
    transition: 0.3s;
}
.btn-quick-action:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
}
/* --- BİLDİRİM SİSTEMİ STİLLERİ --- */

/* Zil Butonu (Profile Header içine gelecek) */
.btn-notif {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-light);
    color: var(--text-dim);
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.3s; flex-shrink: 0;
    margin-right: 10px; /* Çıkış butonu ile arasına boşluk */
    position: relative;
}
.btn-notif.active { color: var(--gold); border-color: var(--gold); background: rgba(212, 175, 55, 0.1); }
.btn-notif:hover { transform: scale(1.05); color: #fff; }

/* Install Guide Modal (PWA Kurulum Rehberi) */
.install-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 99999;
    display: none; flex-direction: column; align-items: center; justify-content: flex-end;
    padding-bottom: 50px; text-align: center;
}
.install-content {
    background: #1a1a1a; padding: 30px; border-radius: 20px 20px 0 0;
    width: 100%; max-width: 500px; border-top: 2px solid var(--gold);
    animation: slideUp 0.5s ease;
}
.install-icon { font-size: 40px; color: var(--gold); margin-bottom: 15px; }
.install-title { color: #fff; font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.install-text { color: #ccc; font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.install-step { display: flex; align-items: center; gap: 10px; color: #fff; margin-bottom: 10px; font-size: 14px; justify-content: center; }
.install-step i { color: #3498db; font-size: 18px; }

/* Ok İşaretleri (Animasyonlu) */
.arrow-bounce { animation: bounce 2s infinite; font-size: 24px; color: var(--gold); margin-top: 10px; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} }
#installModal .modal-overlay,
.modal-overlay {
    background: rgba(0, 0, 0, 0.9) !important; /* Arka planı koyulaştır */
    display: none; /* Varsayılan gizli */
    z-index: 99999 !important;
    backdrop-filter: blur(5px);
}

#installModal .modal-content,
.modal-content {
    background-color: #1a1a1a !important; /* Kutunun rengi koyu gri */
    border: 1px solid #d4af37 !important; /* Kenarlığı GOLD yap */
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,1) !important;
    max-width: 90% !important;
    width: 350px !important;
    color: #fff !important;
}

/* O "Siyah Alt" Sorununu Çözen Kısım Burası */
#installModal .step-box,
.step-box {
    background-color: #333 !important; /* İçindeki kutuyu daha açık gri yap */
    border: 1px solid #555 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    color: #eee !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Başlık ve Yazılar */
#installModal h3, .modal-content h3 {
    color: #d4af37 !important; /* Başlık Gold olsun */
    margin-bottom: 10px !important;
    font-size: 20px !important;
}

#installModal p, .modal-content p {
    color: #ccc !important;
}

/* Kapatma Butonu */
.close-modal-btn {
    color: #fff !important;
    background: #d44 !important; /* Kırmızı buton */
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    margin-top: 10px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    width: 100% !important;
}
/* 1. Modal İçindeki Input Alanlarını Güzelleştirme */
.modal-content label {
    color: #bbb !important; /* Etiket rengi biraz daha açık */
    font-size: 13px !important;
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content select {
    background: rgba(255, 255, 255, 0.07) !important; /* Daha şeffaf arka plan */
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 12px 15px !important; /* Daha geniş iç boşluk */
    border-radius: 10px !important; /* Daha yuvarlak köşeler */
    width: 100%;
    margin-bottom: 20px; /* Alt boşluk arttı */
    transition: all 0.3s ease; /* Yumuşak geçiş efekti */
    font-size: 14px;
}

/* Inputa tıklayınca (Focus) Altın Efekti */
.modal-content input:focus,
.modal-content select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); /* Hafif altın parlama */
    background: rgba(255, 255, 255, 0.1) !important;
    outline: none;
}

/* --- İKON KUTULARI (DÜZELTİLMİŞ & SIĞDIRILMIŞ) --- */
.icon-selection-grid {
    display: grid;
    /* Ekran genişliğine göre sığdığı kadar sütun aç (Telefonda 3 veya 4, PC'de 4) */
    grid-template-columns: repeat(4, 1fr); 
    gap: 8px; /* Boşlukları biraz azalttık ki sığsın */
    margin-bottom: 20px;
    margin-top: 10px;
}

.icon-option-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    border-radius: 8px; /* Köşeleri biraz küçülttük */
    padding: 8px 4px; /* İç boşluğu azalttık */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* İÇERİK ORTALAMA */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* ÖNEMLİ DÜZELTME: Sabit yükseklik yerine oran koruma */
    aspect-ratio: 1 / 1; 
    /* min-height: 80px;  <-- BU SATIRI SİLDİK, TAŞMAYI BU YAPIYORDU */
    width: 100%; /* Bulunduğu sütuna tam otursun */
}

/* Mouse ile üzerine gelince */
.icon-option-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* SEÇİLİ DURUM */
.icon-option-card.selected {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2);
}

/* İkon Boyutu (Mobilde sığması için biraz küçülttük) */
.icon-option-card i {
    font-size: 20px; /* 24px'den 20px'e düşürdük */
    color: #888;
    margin-bottom: 5px;
    transition: color 0.2s;
}

.icon-option-card.selected i {
    color: var(--gold);
}

/* Yazı Stili */
.icon-option-label {
    font-size: 10px; /* Yazıyı biraz küçülttük */
    color: #aaa;
    line-height: 1.1;
    word-break: break-word; /* Uzun kelime olursa alt satıra geçsin, taşmasın */
}

.icon-option-card.selected .icon-option-label {
    color: #fff;
    font-weight: 500;
}

/* KAYDET Butonu */
#serviceModal .btn-primary {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--gold), #b88a00);
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-top: 10px;
}
#serviceModal .btn-primary:hover {
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

/* ÇOK KÜÇÜK EKRANLAR İÇİN (iPhone SE vb.) */
@media (max-width: 380px) {
    .icon-selection-grid {
        grid-template-columns: repeat(3, 1fr); /* Ekrana sığmazsa 3'lü yap */
    }
}
#serviceModal input, 
#serviceModal select, 
#serviceModal textarea {
    text-align: left !important; /* Yazı soldan başlasın */
    padding-left: 15px !important; /* Sol kenara yapışmasın */
}
.service-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important; /* Aradaki boşluğu öldür */
    margin: 0 !important;
    padding: 0 10px !important; /* İkon ile yazı arasına biraz mesafe */
}

.service-title {
    display: block !important;
    margin-bottom: 2px !important; /* Başlığın altına minik boşluk */
    line-height: 1.1 !important;   /* Satırları sıkılaştır */
    padding: 0 !important;
}

/* Açıklama yazısı için özel sınıf */
.service-desc-text {
    display: block !important;
    font-size: 11px !important;
    color: #888 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important; /* Açıklama satırlarını iyice sıkılaştır */
}
/* --- MODERN AÇ/KAPA ANAHTARI (TOGGLE SWITCH) --- */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444; /* Pasif Rengi (Gri) */
    transition: .4s;
    border-radius: 34px;
    border: 1px solid #555;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Aktif Olunca (Altın Rengi) */
input:checked + .slider {
    background-color: var(--gold);
    border-color: var(--gold);
}

input:checked + .slider:before {
    transform: translateX(22px); /* Sağa kaydır */
}

/* Odaklanınca etrafında hafif parlama */
input:focus + .slider {
    box-shadow: 0 0 1px var(--gold);
}

#manDateScroll, #dateScroll {
    padding-top: 25px !important; /* Etiketler için üstten pay */
    margin-top: 0 !important;     /* Başlık ile aradaki boşluğu SIFIRLA */
    padding-bottom: 5px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none; /* Scroll çubuğunu gizle */
}

/* --- TARİH KARTI (KOMPAKT & ORANTILI) --- */
.date-card {
    position: relative !important; 
    height: 75px !important;       /* Yükseklik: İdeal (60px) */
    min-width: 55px !important;    /* Genişlik: Rakamlar sığsın (55px) */
    
    display: flex;
    flex-direction: column;
    justify-content: center;       
    align-items: center;           
    
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;           
    
    overflow: visible !important;  /* Etiketin dışarı taşmasına izin ver */
    transition: all 0.2s ease;
    padding: 0 !important;         /* İç boşluğu sıfırla, sıkışmasın */
    margin: 0 !important;          /* Dış boşluğu sıfırla */
    flex-shrink: 0;                /* Kutuların büzülmesini engelle */
}

/* --- ETİKET TASARIMI (BUGÜN / YARIN) --- */
.today-label-badge {
    position: absolute;
    top: -20px;                    /* Kutunun biraz daha üzerine çıkar */
    left: 50%;
    transform: translateX(-50%);   /* Tam ortala */
    
    background: transparent !important; /* Arka planı YOK ET */
    box-shadow: none !important;        /* Gölgeyi YOK ET */
    
    font-family: 'Inter', sans-serif;   /* Zarif font */
    font-size: 10px;                    /* Okunabilir boyut */
    font-weight: 600;                   /* Orta kalınlık */
    letter-spacing: 1.5px;              /* Harf aralığını aç (Elegans katar) */
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 10;
}

/* Gün İsmi (Pzt) */
.date-day-text {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #aaa !important;
    text-transform: uppercase;
    margin-bottom: 2px;
    line-height: 1;
}

/* Gün Sayısı (24) */
.date-day-number {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1;
}

/* Seçili Durum */
.date-card.selected {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px); /* Seçilince hafif zıplasın */
}

.date-card.selected .date-day-text { color: #333 !important; font-weight: 700; }
.date-card.selected .date-day-number { color: #000 !important; }
@media (max-width: 480px) {
    
    /* 1. Profil Kartı Mobil Ayarı */
    .profile-header, .premium-card .card-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        
        /* BURAYI DEĞİŞTİRİYORUZ (Eskisi 12px 15px idi) */
        padding-top: 20px !important;    
        padding-bottom: 20px !important; 
        padding-left: 20px !important;
        padding-right: 20px !important;
        
        min-height: 120px; /* Mobilde de en az bu kadar yüksek olsun */
    }

    /* 2. İsim Alanı (Admin, Personel ve Müşteri için Ortak) */
    /* İsim uzunsa alt satıra geçsin, "..." olmasın */
    #adminNameDisplay, 
    #pName, 
    #uNameDisplay, 
    .staff-info h3 {
        white-space: normal !important;   /* Tek satır zorlamasını kaldır */
        overflow: visible !important;     /* Gizlemeyi kapat */
        text-overflow: clip !important;   /* Üç noktayı (...) kaldır */
        font-size: 15px !important;       /* Mobilde fontu 1 tık küçült */
        line-height: 1.2 !important;      /* Satır aralığını daralt */
        word-break: break-word !important;/* Çok uzun kelimeyi böl */
        display: block !important;        
        max-width: 100% !important;
    }

    /* 3. Alt Başlık (Yönetim Paneli vb.) */
    .profile-header div span, 
    .staff-info .status-text {
        font-size: 11px !important;       /* Alt metni de küçültelim */
        white-space: normal !important;
    }

    /* 4. Sağdaki Butonları (Bildirim/Çıkış) Küçült */
    /* İsme daha çok yer kalsın */
    .profile-header button, 
    .card-header button { 
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        margin-left: 2px !important;
    }

    /* Buton içindeki ikonları ortala */
    .profile-header button i, 
    .card-header button i {
        font-size: 13px !important;
    }
}

/* === KRİTİK UYARI MODU === */
/* Normal modal-content'e bu sınıf eklenince devreye girer */

.modal-content.critical-warning {
    border: 3px solid #ff3333 !important; /* Kalın Kırmızı Çerçeve */
    box-shadow: 0 0 25px rgba(255, 51, 51, 0.4) !important; /* Kırmızı parlama efekti */
}

/* Kritik modda ikon görünür ve kırmızı olur */
.modal-content.critical-warning #confirmIcon {
    display: inline-block !important;
    color: #ff3333 !important;
    animation: pulse 1.5s infinite; /* Hafifçe yanıp sönsün */
}

/* Kritik modda "EVET" butonu da kırmızı olsun */
.modal-content.critical-warning .btn-primary {
    background: #ff3333 !important;
    color: white !important;
    border: none !important;
}

/* Yanıp sönme efekti */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
/* --- PERSONEL RÜTBE SEÇİM KARTLARI --- */

.role-selection-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.role-card {
    flex: 1; /* Kutuları eşit genişliğe yay */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Hover Efekti */
.role-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* İkonlar */
.role-icon {
    font-size: 24px;
    color: #888;
    margin-bottom: 8px;
    transition: 0.3s;
}

/* Yazılar */
.role-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.role-desc {
    display: block;
    font-size: 10px;
    color: #888;
    line-height: 1.2;
}

/* --- SEÇİLİ OLMA DURUMU (NORMAL PERSONEL) --- */
.role-card.selected {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.role-card.selected .role-icon { color: #fff; }
.role-card.selected .check-circle { opacity: 1; transform: scale(1); }

/* --- SEÇİLİ OLMA DURUMU (ADMİN - GOLD) --- */
.role-card.admin-type.selected {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}
.role-card.admin-type.selected .role-icon { color: var(--gold); }
.role-card.admin-type.selected .role-title { color: var(--gold); }
.role-card.admin-type.selected .check-circle { background: var(--gold); color: #000; }

/* Sağ üstteki tik işareti (Animasyonlu) */
.check-circle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    opacity: 0; /* Başta gizli */
    transform: scale(0);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

/* Resim Çerçevesi (Admin ile Aynı) */
.profile-header .img-wrapper {
    position: relative;
    width: 55px;  /* Standart Boyut */
    height: 55px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--gold); /* Altın Çerçeve */
    flex-shrink: 0;
}

/* Resim */
#adminPhoto {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: none; /* JS ile açılacak */
}

/* Harf Kutusu */
#adminInitial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #222;
    display: none; /* JS ile açılacak */
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

/* Kamera İkonu (Tam yerine oturur) */
.camera-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--gold);
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--bg-card); /* Arka plan renginde sınır */
    z-index: 2;
}

.profile-info {
    flex: 1;
    margin-left: 15px;
    text-align: left;
}

.profile-info h3 { margin: 0; font-size: 16px; color: #fff; }
.profile-info p { margin: 0; font-size: 12px; color: var(--gold); }

.admin-profile-pic {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
    
    /* BURASINI DEĞİŞTİRDİK: Daha koyu bir zemin rengi (#151515) */
    background-color: #151515; 
    
    /* Animasyon ayarı aynı kalıyor */
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}

/* Animasyon renklerini de koyulaştırıyoruz */
@keyframes skeleton-pulse {
    0% { background-color: #151515; } /* Çok koyu */
    50% { background-color: #252525; } /* Nefes alırken hafif açılır */
    100% { background-color: #151515; } /* Tekrar kararır */
}

/* 1. PROFİL BAŞLIĞI YAPISI */
.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

/* 2. RESİM ÇERÇEVESİ (DIŞ KUTU) */
.profile-header .img-wrapper {
    position: relative;
    width: 60px;          /* Masaüstü Genişlik */
    height: 60px;         /* Masaüstü Yükseklik */
    border-radius: 50%;
    cursor: pointer;
    
    /* --- DÜZELTME 1: ÇERÇEVE BOŞLUĞU --- */
    border: 2px solid var(--gold); 
    padding: 4px;         /* Fotoğraf ile çerçeve arasındaki boşluk (Arttırıldı) */
    box-sizing: border-box; 
    
    flex-shrink: 0;
}

/* 3. FOTOĞRAF VE HARF */
#adminPhoto {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: none;        /* JS ile açılır */
}

#adminInitial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #222;
    display: none;        /* JS ile açılır */
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
}

/* 4. KAMERA İKONU (MASAÜSTÜ İÇİN KÜÇÜLTÜLDÜ) */
.camera-icon {
    position: absolute;
    
    /* --- DÜZELTME 2: KONUM VE BOYUT --- */
    bottom: 0;
    right: 0;
    
    width: 18px;          /* 22px'den 18px'e düşürüldü (Daha zarif) */
    height: 18px;
    font-size: 10px;      /* İkon boyutu küçültüldü */
    
    background: var(--gold);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card); /* İkonun etrafında ince bir boşluk çizgisi */
    z-index: 5;
}

/* 5. YAZILAR */
.profile-info {
    flex: 1;
    margin-left: 15px;
    text-align: left;
}
.profile-info h3 { margin: 0; font-size: 16px; color: #fff; }
.profile-info p { margin: 0; font-size: 12px; color: var(--gold); }

/* --- 6. TELEFON İÇİN ÖZEL AYARLAR --- */
@media screen and (max-width: 480px) {
    
    /* Mobilde çerçeve ve resim biraz daha küçülür */
    .profile-header .img-wrapper {
        width: 50px;
        height: 50px;
        padding: 3px;
    }

    /* Mobilde ikon daha da küçülür */
    .camera-icon {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
    
    #adminInitial {
        font-size: 18px;
    }
}
/* --- PERSONEL PANELİ ÖZEL CSS (ÇAKIŞMA GARANTİLİ ÇÖZÜM) --- */

/* 1. Ana Satır (Gri Kutu) */
.staff-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    position: relative;
    
    background: rgba(255, 255, 255, 0.05); /* Şeffaf Gri */
    padding: 15px;      
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 2. Profil Kutusu (Çerçeve) */
.staff-profile-box {
    position: relative;
    width: 60px;          
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    
    border: 2px solid var(--gold); 
    padding: 0px;         /* İdeal boşluk */
    box-sizing: border-box; 
    
    flex-shrink: 0;
    background: transparent;
}

/* 3. Resim ve Harf */
.staff-profile-box img, 
.staff-profile-box #adminInitial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* --- HARF AYARLARI (GÜNCELLENDİ) --- */
.staff-profile-box #adminInitial {
    background: #222;
    display: flex; 
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    
    /* BURAYI BÜYÜTTÜK */
    font-size: 28px; 
}

/* 4. Kamera İkonu */
.staff-cam-icon {
    position: absolute;
    bottom: -2px;       
    right: -2px;
    
    width: 20px;        
    height: 20px;
    font-size: 10px;
    
    background: var(--gold);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card); 
    z-index: 10;
}

/* 5. Yazılar */
.staff-info-text {
    flex: 1;
    margin-left: 15px;
    text-align: left;
}
.staff-info-text h3 { margin: 0; font-size: 16px; color: #fff; }
.staff-info-text p { margin: 0; font-size: 12px; color: var(--gold); }

/* --- TELEFON (MOBİL) AYARLARI --- */
@media screen and (max-width: 480px) {
    
    .staff-header-row { padding: 24px; }

    .staff-profile-box {
        width: 60px;
        height: 60px;
        padding: 2px;
    }

    .staff-cam-icon {
        width: 16px;    
        height: 16px;
        font-size: 8px;
        bottom: -1px;
        right: -1px;
    }
    
    /* MOBİL HARF BOYUTU DA BÜYÜDÜ */
    .staff-profile-box #adminInitial {
        font-size: 22px;
    }
}

.date-card {
    overflow: visible !important;  /* Yazının dışarı taşmasına izin ver */
    margin-top: 25px !important;   /* Üstten boşluk bırak ki yazı sığsın */
    position: relative;
}

/* --- "BUGÜN / YARIN" Yazısı (Zarif & Kutusuz) --- */
.date-badge {
    position: absolute !important;
    top: -20px !important;         /* Kutunun tam tepesine */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Tam ortala */
    
    background: transparent !important; /* Arka plan YOK (Kutu silindi) */
    border: none !important;            /* Çerçeve YOK */
    box-shadow: none !important;        /* Gölge YOK */
    padding: 0 !important;
    
    font-family: 'Inter', sans-serif;   /* Modern font */
    font-size: 10px !important;         /* Küçük ve kibar */
    font-weight: 600 !important;        
    letter-spacing: 1.5px !important;   /* Harf aralığını aç (Elegans katar) */
    text-transform: uppercase;
    white-space: nowrap !important;
    pointer-events: none;
}
#dateScroll {
    padding-top: 15px !important;  /* Sadece "BUGÜN" yazısı sığacak kadar yer kalsın */
    margin-top: 0 !important;      /* Dış boşluğu tamamen sıfırla */
    padding-bottom: 5px !important;
}

/* 2. Kartların üzerindeki ekstra itme gücünü kaldır */
.date-card {
    margin-top: 0 !important;      /* Karta verdiğimiz 25px boşluğu İPTAL ET */
    overflow: visible !important;  /* Etiketler taşmaya devam etsin */
}

/* 3. Etiketi biraz daha aşağı, karta yaklaştır (Daha derli toplu durur) */
.date-badge {
    top: -15px !important;         /* Kutuya daha yakın olsun */
    font-size: 9px !important;     /* Fontu bir tık küçült, zarif olsun */
    letter-spacing: 1px !important;
}

/* 4. Eğer "Tarih Seçiniz" bir başlık ise onun da alt boşluğunu kıs */
#appointmentForm h3, 
.input-group label {
    margin-bottom: 5px !important; /* Başlık ile şerit arasını iyice kapat */
}