/* =====================================================================
   style.css — Profil Rehberi
   Tasarım dili: Koyu, modern bir "ilan dizini" görünümü — ferah pastel
   spa temasından, kartların ve CTA butonlarının öne çıktığı antrasit/
   siyah zemin + canlı adaçayı yeşili ve gold vurgulara geçildi.
   Tailwind utility class'ları ile birlikte, Tailwind'in karşılamadığı
   özel detaylar (renk tonları, font, yumuşak geçişler) burada tanımlanır.
   ===================================================================== */

:root {
    /* --- Ana Palet: koyu zemin + canlı adaçayı yeşili + gold vurgular ---
       Not: sage-700/800 artık "metin" rolünde (koyu zemin üstünde okunabilir,
       parlak yeşil başlık rengi); sage-100/200/300 ise "zemin/border" rolünde
       (koyu tonlar) kullanılıyor. */
    --sage-50:  #242c1d;   /* en hafif hover tonu (kart zemininden biraz açık) */
    --sage-100: #202a19;   /* rozet / badge zemini (koyu yeşil) */
    --sage-200: #333d29;   /* standart ince border rengi */
    --sage-300: #46543a;   /* biraz daha belirgin border */
    --sage-400: #6f8f5c;   /* input focus ring, orta ton */
    --sage-500: #6fae4f;   /* ana marka rengi / buton (canlı yeşil) */
    --sage-600: #5c9342;   /* buton hover (biraz koyu yeşil) */
    --sage-700: #9ed17f;   /* başlık / vurgu metni (koyu zeminde okunan parlak yeşil) */
    --sage-800: #c3ecac;   /* en parlak başlık / rakam rengi */

    --cream-50:  #0f110c;   /* sayfa zemini (en koyu, sıcak siyah) */
    --cream-100: #191c14;   /* kart zemini (card-soft) */
    --cream-200: #23271b;   /* ikincil zemin (ad-box gradient, hover) */

    --warm-brown-500: #c9a876;
    --warm-brown-700: #ecd9b3;  /* reklam kutusu başlığı — artık açık ton */

    --gold-400: #e8c06c;
    --gold-500: #cf9a3a;

    --ink-700: #f1ede2; /* ana metin rengi (sıcak beyaz) */
    --ink-400: #a79f8c; /* ikincil / muted metin rengi */

    --radius-lg: 1.25rem;
    --radius-md: 0.75rem;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    background-color: var(--cream-50);
    color: var(--ink-700);
}

.font-display {
    font-family: 'Playfair Display', Georgia, serif;
}

/* --- Yeniden kullanılabilir bileşen sınıfları --- */

.btn-primary {
    background-color: var(--sage-500);
    color: #fff;
    transition: background-color .25s ease, transform .2s ease;
}
.btn-primary:hover {
    background-color: var(--sage-600);
    transform: translateY(-1px);
}

.btn-whatsapp {
    background-color: #25D366;
    color: #fff;
    transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn-whatsapp:hover {
    background-color: #1ebc59;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.btn-gold {
    background-color: var(--gold-500);
    color: #fff;
    transition: background-color .25s ease;
}
.btn-gold:hover {
    background-color: var(--gold-400);
}

.card-soft {
    background-color: var(--cream-100);
    border: 1px solid var(--sage-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.card-soft:hover {
    border-color: var(--sage-400);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    transform: translateY(-3px);
}

.badge-sage {
    background-color: var(--sage-100);
    color: var(--sage-700);
}

/* Hizmet tipi rozeti (Kendi Yerinde / Evinize-Otelinize Gelir) */
.service-badge {
    background-color: var(--sage-100);
    color: var(--sage-700);
    border: 1px solid var(--sage-300);
    white-space: nowrap;
}

/* Ana sayfadaki hizmet tipi filtre butonları */
.filter-pill {
    border: 1px solid var(--sage-300);
    color: var(--ink-400);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.filter-pill:hover {
    border-color: var(--sage-500);
    color: var(--ink-700);
}
.filter-pill.active {
    background-color: var(--sage-500);
    border-color: var(--sage-500);
    color: #fff;
}

.ad-box {
    background: linear-gradient(135deg, var(--cream-200), var(--sage-100));
    border: 1px dashed var(--gold-500);
    border-radius: var(--radius-lg);
}

/* Sayfa geçişlerinde / görsellerde yumuşak fade */
.fade-in {
    animation: fadeIn .6s ease both;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Admin paneli için sürüklenebilir satır göstergesi */
.drag-handle {
    cursor: grab;
    color: var(--ink-400);
}
.sortable-ghost {
    opacity: .4;
}

/* Flash mesajlar */
.flash-success {
    background-color: var(--sage-100);
    color: var(--sage-700);
    border: 1px solid var(--sage-300);
}
.flash-error {
    background-color: #2a1414;
    color: #f4b3b3;
    border: 1px solid #5c2626;
}

/* Form elemanları: tarayıcı varsayılanı (beyaz zemin/siyah metin) yerine
   koyu temaya uygun görünüm. Tüm formlarda tek tek class eklemek yerine
   merkezi olarak burada tanımlandı. */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="file"],
textarea,
select {
    background-color: var(--cream-50);
    color: var(--ink-700);
}
input::placeholder,
textarea::placeholder {
    color: var(--ink-400);
    opacity: 1;
}
select option {
    background-color: var(--cream-100);
    color: var(--ink-700);
}
input[type="checkbox"] {
    accent-color: var(--sage-500);
}
/* Dosya seçme butonunun (input[type=file]) tarayıcı varsayılan "Dosya Seç"
   butonunu da koyu temaya uydur. */
input[type="file"]::file-selector-button {
    background-color: var(--sage-100);
    color: var(--sage-700);
    border: 1px solid var(--sage-300);
    border-radius: var(--radius-md);
    padding: .4rem .8rem;
    margin-right: .75rem;
    cursor: pointer;
    transition: background-color .2s ease;
}
input[type="file"]::file-selector-button:hover {
    background-color: var(--sage-200);
}

/* --- Logo: sabit, yuvarlak, çerçevesiz, küçük ve şık --- */
.logo-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    max-height: 4.75rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--cream-100);
    font-size: 2rem;
}

/* --- Kaydırmalı fotoğraf galerisi (profil detay sayfası) --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.slider-arrow {
    background-color: rgba(15, 17, 12, 0.55);
    color: #fff;
    backdrop-filter: blur(2px);
    transition: background-color .2s ease;
}
.slider-arrow:hover {
    background-color: rgba(15, 17, 12, 0.8);
}

.slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background-color: var(--sage-300);
    transition: background-color .2s ease, transform .2s ease;
    cursor: pointer;
}
.slider-dot.active {
    background-color: var(--sage-500);
    transform: scale(1.3);
}

/* Basit scrollbar inceltme (opsiyonel, sadece webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: var(--cream-50); }
::-webkit-scrollbar-thumb { background-color: var(--sage-300); border-radius: 10px; }

/* ---------------------------------------------------------------------
   Admin > İstatistikler: mum (sütun) grafikleri — assets/js/stats-chart.js
   Seri renkleri koyu kart zeminine (#191c14) karşı renk körlüğü ve kontrast
   kontrollerinden geçirildi (mavi = tekil ziyaretçi, gold = tekil mesaj).
   --------------------------------------------------------------------- */
:root {
    --viz-visitors: #3987e5;
    --viz-messages: #c98500;
}
.stats-chart-wrap { position: relative; }
.stats-chart { overflow-x: auto; overflow-y: hidden; min-height: 200px; }
.stats-chart svg { display: block; }
.stats-grid { stroke: var(--sage-200); stroke-width: 1; shape-rendering: crispEdges; }
.stats-axis { fill: var(--ink-400); font-size: 11px; font-variant-numeric: tabular-nums; }
.stats-value { fill: var(--ink-700); font-size: 11px; font-weight: 600; }
.stats-hit { cursor: pointer; outline: none; }
.stats-hit.is-active, .stats-hit:focus-visible { fill: rgba(241, 237, 226, 0.06); }
.stats-chart-empty {
    height: 200px; display: flex; align-items: center; justify-content: center;
    color: var(--ink-400); font-size: 0.875rem;
}
.stats-tooltip {
    position: absolute; z-index: 10; pointer-events: none; white-space: nowrap;
    background: var(--cream-200); border: 1px solid var(--sage-300); border-radius: var(--radius-md);
    padding: 6px 10px; font-size: 12px; color: var(--ink-700);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.stats-tooltip-title { color: var(--ink-400); margin-bottom: 2px; }
.stats-tooltip-row { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.stats-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }