/* =============================================================================
   Berber Randevu Sistemi — Müşteri Sayfaları (Salon Dizin + Berber Seçimi)
   Yeşil/Krem Tema
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --green-dark:  #1a3c2e;
    --green-mid:   #2d6a4f;
    --green-light: #40916c;
    --green-pale:  #d8f3dc;
    --cream:       #fdf8f0;
    --cream-dark:  #f0e6d3;
    --gold:        #c9a84c;
    --text-dark:   #1a2e1f;
    --text-mid:    #4a5e50;
    --text-light:  #7a9080;
    --white:       #ffffff;
    --shadow-sm:   0 2px 8px rgba(26,60,46,.10);
    --shadow-md:   0 6px 20px rgba(26,60,46,.14);
    --radius:      14px;
    --radius-sm:   8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Body ────────────────────────────────────────────── */
body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    min-height: 100vh;
    color: var(--text-dark);
    background:
        linear-gradient(160deg, rgba(26,60,46,.80) 0%, rgba(45,106,79,.68) 50%, rgba(26,60,46,.86) 100%),
        url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?w=1600&q=80&auto=format&fit=crop')
        center/cover fixed;
    padding: 2rem 1rem 3rem;
}

/* ── Sayfa sarmalayıcı ───────────────────────────────── */
.wrap {
    max-width: 760px;
    margin: 0 auto;
}

/* ── Üst başlık ──────────────────────────────────────── */
.page-header {
    text-align: center;
    color: var(--white);
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .4rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.page-header p {
    font-size: .97rem;
    opacity: .82;
}

/* ── Geri linki ──────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: color .15s;
}

.back-link:hover { color: var(--white); }

/* ── Arama çubuğu ────────────────────────────────────── */
.search-bar {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.search-bar input {
    flex: 1;
    padding: .75rem 1.1rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .97rem;
    font-family: inherit;
    background: rgba(255,255,255,.96);
    color: var(--text-dark);
    transition: border-color .18s, box-shadow .18s;
}

.search-bar input:focus {
    outline: 0;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}

.search-bar button {
    padding: .75rem 1.4rem;
    background: var(--green-mid);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
    font-family: inherit;
    transition: background .18s, transform .15s;
}

.search-bar button:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
}

/* ── Kart — ortak ────────────────────────────────────── */
.card {
    background: rgba(253,248,240,.97);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: .75rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(201,168,76,.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    transition: transform .18s, box-shadow .18s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26,60,46,.2);
}

/* ── Salon kartı ─────────────────────────────────────── */
.salon-info h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: .25rem;
}

.salon-meta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    font-size: .83rem;
    color: var(--text-mid);
    margin-bottom: .3rem;
}

.badge {
    display: inline-block;
    background: var(--green-pale);
    color: var(--green-mid);
    border: 1px solid rgba(45,106,79,.25);
    border-radius: 20px;
    padding: .18rem .65rem;
    font-size: .78rem;
    font-weight: 600;
}

.salon-desc {
    font-size: .85rem;
    color: var(--text-mid);
    margin-top: .35rem;
    line-height: 1.5;
}

/* ── Berber kartı ────────────────────────────────────── */
.provider-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-light), var(--green-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(45,106,79,.3);
    border: 2px solid rgba(201,168,76,.3);
}

.provider-info { flex: 1; min-width: 0; }

.provider-info h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: .2rem;
}

.provider-meta {
    font-size: .83rem;
    color: var(--text-mid);
    margin-top: .15rem;
}

/* ── Salon detay başlık ──────────────────────────────── */
.salon-header-card {
    background: rgba(253,248,240,.97);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(201,168,76,.18);
}

.salon-header-card h1 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: .4rem;
}

.salon-header-card .salon-meta {
    margin-bottom: .4rem;
}

.salon-header-card .salon-desc {
    font-size: .92rem;
}

.section-title {
    color: rgba(255,255,255,.88);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

/* ── Butonlar ────────────────────────────────────────── */
.btn-primary {
    display: inline-block;
    padding: .6rem 1.3rem;
    background: linear-gradient(135deg, var(--green-mid), var(--green-light));
    color: var(--white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 3px 10px rgba(45,106,79,.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(45,106,79,.35);
    color: var(--white);
    text-decoration: none;
}

/* ── Boş durum ───────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(255,255,255,.75);
}

.empty-state p { margin: .4rem 0; font-size: .95rem; }

.empty-state a {
    color: var(--gold);
    text-decoration: none;
}

.empty-state a:hover { text-decoration: underline; }

/* ── Footer linki ────────────────────────────────────── */
.footer-link {
    text-align: center;
    margin-top: 2rem;
    font-size: .88rem;
}

.footer-link a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color .15s;
}

.footer-link a:hover { color: var(--white); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
    body { padding: 1rem .75rem 2rem; background-attachment: scroll; }

    .page-header h1 { font-size: 1.55rem; }

    .card { padding: 1rem 1.1rem; }

    .salon-header-card { padding: 1.1rem 1.2rem; }

    .btn-primary { padding: .55rem 1rem; font-size: .85rem; }
}