/* ============================================================
   components.css v2 — Butonlar · Başlıklar · Formlar
   ============================================================ */

/* ---------- BUTONLAR ---------- */
.btn, .primary_btn {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 15px 32px; background: var(--grad-brand); color: #fff;
    font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: -.01em;
    border-radius: 50px; line-height: 1; box-shadow: var(--shadow-primary);
    transition: transform var(--t), box-shadow var(--t), filter var(--t);
    position: relative; overflow: hidden; white-space: nowrap;
}
/* Parıltı (shine) */
.btn::after, .primary_btn::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); transition: left .7s var(--ease);
}
.btn:hover, .primary_btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 24px 46px rgba(26,143,214,.46); filter: brightness(1.04); }
.btn:hover::after, .primary_btn:hover::after { left: 130%; }
.btn span, .primary_btn span {
    display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%;
    background: rgba(255,255,255,.24); font-weight: 700; font-size: 16px; line-height: 1; position: relative; z-index: 1;
}
.btn > *, .primary_btn > * { position: relative; z-index: 1; }

/* Teal varyant */
.btn-icon-green, .btn.green-bg { background: var(--grad-accent); box-shadow: var(--shadow-accent); }
.btn-icon-green:hover { box-shadow: 0 24px 46px rgba(25,201,193,.46); }

/* Ghost / açık varyant */
.btn-icon-gray { background: #fff; color: var(--primary-deep); box-shadow: var(--shadow-sm); border: 1.5px solid var(--line); }
.btn-icon-gray span { background: var(--primary-soft); color: var(--primary); }
.btn-icon-gray::after { display: none; }
.btn-icon-gray:hover { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-primary); }
.btn-icon-gray:hover span { background: rgba(255,255,255,.24); color: #fff; }

/* ---------- BÖLÜM BAŞLIĞI ---------- */
.section-text h5 {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--primary); background: var(--primary-soft);
    padding: 8px 18px; border-radius: 50px;
    font-family: var(--font-head); font-weight: 700; font-size: 13px;
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px;
}
.section-text h5::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(26,143,214,.18); }
.section-text h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 0; }
.section-text p { margin-top: 18px; font-size: 1.08rem; }
.section-text.section-text-white h5 { color: #fff; background: rgba(255,255,255,.16); }
/* Koyu bilgi kartı zeminini temaya bağla (ana sitede mavi, estetikte mor) — sabit inline gradyanları ezer */
.services-widget-bg { background: var(--grad-band) !important; }
/* Koyu/degrade kartlar üzerindeki eyebrow pill'i okunur yap (iletişim, hizmet detay, randevu) */
.services-widget-bg .about-title h5 { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.section-text.section-text-white h5::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.section-text-white h1 { color: #fff; }

/* ---------- FORM ELEMANLARI ---------- */
.h4appoinment-input { margin-bottom: 22px; }
.h4appoinment-input input, .h4appoinment-input select, .h4appoinment-input textarea {
    width: 100%; padding: 16px 50px 16px 20px; background: #fff; border: 1.5px solid var(--line);
    border-radius: 14px; color: var(--ink); font-size: 15px; transition: var(--t); appearance: none;
}
.h4appoinment-input textarea { padding-right: 20px; resize: vertical; min-height: 120px; }
.h4appoinment-input input::placeholder, .h4appoinment-input textarea::placeholder { color: var(--muted); }
.h4appoinment-input input:focus, .h4appoinment-input select:focus, .h4appoinment-input textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); transform: translateY(-1px);
}
.h4input-icon { position: absolute; right: 18px; top: 17px; color: var(--primary); font-size: 16px; pointer-events: none; }
.h4input-icon i { color: var(--primary); }

.eh-input { width: 100%; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 15px; background: #fff; transition: var(--t); }
.eh-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
label { font-weight: 600; color: var(--ink); font-size: 14px; }

/* ---------- UYARILAR ---------- */
.eh-alert-ok, .eh-alert-err, .alert {
    padding: 16px 20px; border-radius: 14px; font-weight: 500; margin-bottom: 24px;
    border: 1.5px solid; display: flex; align-items: center; gap: 10px;
}
.eh-alert-ok { background: #e6faf2; color: #0a7d4d; border-color: #b6ecd3; }
.eh-alert-err { background: #fdeef0; color: #c0344b; border-color: #f6cdd4; }
.alert-info { background: var(--primary-soft); color: var(--primary-deep); border-color: #c6e6f6; }
.alert-success { background: #e6faf2; color: #0a7d4d; border-color: #b6ecd3; }
.alert-danger { background: #fdeef0; color: #c0344b; border-color: #f6cdd4; }

/* ---------- AVATAR ---------- */
.eh-avatar-initials { display: grid; place-items: center; width: 100%; height: 100%; background: var(--grad-brand); color: #fff; font-weight: 700; font-size: 20px; border-radius: 50%; }

/* ---------- WHATSAPP & SCROLL-TOP ---------- */
a[href*="wa.me"] { transition: var(--t) !important; }
a[href*="wa.me"]:hover { transform: scale(1.08) translateY(-2px); }
/* WhatsApp butonu alt sağda (24px); yukarı-çık onun ÜSTÜNDE (94px) — çakışmaz */
.eh-scroll-top {
    position: fixed; bottom: 94px; right: 24px; width: 50px; height: 50px; border-radius: 15px;
    background: var(--grad-brand); color: #fff; font-size: 18px; display: grid; place-items: center; z-index: 940;
    opacity: 0; visibility: hidden; transform: translateY(16px); transition: var(--t); box-shadow: var(--shadow-primary);
}
.eh-scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.eh-scroll-top:hover { transform: translateY(-3px); }
@media (max-width: 767px) { .eh-scroll-top { bottom: 150px; right: 18px; } }