/* ============================================================
   Kuaför — genel stiller (tek doğruluk kaynağı).

   Tasarım dili: uygulama simgesinin koyu turkuazı (kabuk), nane yeşili vurgu, gümüş ayrıntı; açık zemin üzerinde
   beyaz kartlar, yuvarlak köşeler, büyük dokunma alanları. Telefonda altta yüzen menü, masaüstünde üstte sekmeler.
   Erkek hizmetleri turkuaz, bayan hizmetleri gül rengiyle ayrılır.
   Kırmızı YALNIZ iptal / sil içindir.
   Renk değişirse ŞU YERLER elle eşlenir: Kuafor.Web/wwwroot/index.html (theme-color + açılış) ·
   Kuafor.Web/wwwroot/manifest.webmanifest · Kuafor.Mobile/wwwroot/index.html ·
   Kuafor.Mobile/Platforms/Android/MainActivity.cs + Resources/values/colors.xml · Kuafor.Mobile.csproj.
   ============================================================ */

/* Plus Jakarta Sans (SIL OFL 1.1, bkz. fonts/OFL.txt) — uygulamanın içinde taşınır, internetsiz de açılır. */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ---- Marka (uygulama simgesi) ---- */
    --kf-kabuk: #0E4F5C;
    --kf-kabuk-koyu: #0A3B45;
    --kf-kabuk-acik: #15707D;
    --kf-ana: #0F6B78;
    --kf-ana-koyu: #0C5864;
    --kf-ana-basili: #094852;
    --kf-ana-soluk: #E5F3F2;
    --kf-ana-kenar: #B5DAD6;
    --kf-nane: #3FAE8A;
    --kf-nane-acik: #A8E6CF;
    --kf-nane-soluk: #E7F7F0;
    --kf-gumus: #AEB6BF;

    /* ---- Kategoriler ---- */
    --kf-erkek: #0F6B78;
    --kf-erkek-soluk: #E5F3F2;
    --kf-bayan: #C2416E;
    --kf-bayan-soluk: #FCEBF1;

    /* ---- Yüzeyler ---- */
    --kf-zemin: #F1F5F6;
    --kf-yuzey: #FFFFFF;
    --kf-yuzey-2: #F6F9FA;
    --kf-yuzey-3: #ECF1F3;
    --kf-perde: rgba(7, 30, 36, .48);

    /* ---- Kenarlıklar ---- */
    --kf-kenar: #E0E8EA;
    --kf-kenar-koyu: #C7D3D7;
    --kf-kenar-ince: #EDF2F3;

    /* ---- Metin ---- */
    --kf-metin: #12262C;
    --kf-metin-2: #3A5057;
    --kf-metin-3: #687C82;
    --kf-metin-4: #9AAAAF;

    /* ---- Anlamsal ---- */
    --kf-kirmizi: #DC2626;
    --kf-kirmizi-koyu: #B91C1C;
    --kf-kirmizi-soluk: #FDECEC;
    --kf-yesil: #12A150;
    --kf-yesil-soluk: #E6F6EC;
    --kf-turuncu: #D97706;
    --kf-turuncu-soluk: #FEF3E2;
    --kf-mavi: #2563EB;
    --kf-mavi-soluk: #EAF1FE;
    --kf-whatsapp: #25D366;
    --kf-whatsapp-koyu: #1DA851;

    /* ---- Biçim ---- */
    --kf-yaricap: 18px;
    --kf-yaricap-k: 12px;
    --kf-golge-1: 0 1px 2px rgba(14, 50, 58, .05), 0 1px 3px rgba(14, 50, 58, .07);
    --kf-golge-2: 0 10px 30px rgba(14, 50, 58, .10);
    --kf-golge-3: 0 20px 60px rgba(14, 50, 58, .18);
    --kf-yazi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --icerik-max: 1180px;
    --alt-menu-yuksekligi: 72px;

    /* Bootstrap değişkenleri */
    --bs-body-font-family: var(--kf-yazi);
    --bs-body-color: var(--kf-metin);
    --bs-body-bg: var(--kf-zemin);
    --bs-primary: var(--kf-ana);
    --bs-primary-rgb: 15, 107, 120;
    --bs-link-color: var(--kf-ana);
    --bs-link-color-rgb: 15, 107, 120;
    --bs-link-hover-color: var(--kf-ana-koyu);
    --bs-border-color: var(--kf-kenar);
}

/* ================= Temel ================= */

html, body {
    font-family: var(--kf-yazi);
    background: var(--kf-zemin);
    color: var(--kf-metin);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100dvh;
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5 {
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--kf-metin);
}

a {
    color: var(--kf-ana);
    text-decoration: none;
}

a:hover {
    color: var(--kf-ana-koyu);
}

button {
    font-family: inherit;
}

:focus-visible {
    outline: 3px solid rgba(15, 107, 120, .35);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

.ikon {
    flex: none;
    vertical-align: -0.2em;
}

.metin-sonuk { color: var(--kf-metin-3); }
.metin-kucuk { font-size: 13px; }
.fw-800 { font-weight: 800; }
.bosluk { flex: 1; }

/* ================= Kabuk ================= */

.kabuk {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.ust-cubuk {
    position: sticky;
    top: 0;
    z-index: 50;
    color: #FFFFFF;
    background: linear-gradient(180deg, #11606D 0%, var(--kf-kabuk) 100%);
    padding-top: env(safe-area-inset-top);
    box-shadow: 0 2px 12px rgba(7, 30, 36, .18);
}

.ust-ic {
    max-width: var(--icerik-max);
    height: 60px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ust-marka {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ust-marka:hover { color: #FFFFFF; }

.ust-marka img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.ust-marka small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--kf-nane-acik);
    letter-spacing: .04em;
    line-height: 1;
}

.ust-geri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    border-radius: 12px;
    color: #FFFFFF;
}

.ust-geri:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

.ust-baslik {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ust-nav {
    display: none;
    flex: 1;
    align-items: center;
    gap: 4px;
    margin-left: 24px;
}

.ust-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
    font-size: 14px;
}

.ust-nav a:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.ust-nav a.aktif { background: rgba(255, 255, 255, .16); color: #FFFFFF; }

.ust-sag {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ust-kullanici {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    max-width: 210px;
}

.ust-kullanici:hover { background: rgba(255, 255, 255, .2); color: #FFFFFF; }

.ust-kullanici span.ad {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ust-giris {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--kf-kabuk);
    font-weight: 700;
    font-size: 14px;
}

.ust-giris:hover { background: var(--kf-nane-soluk); color: var(--kf-kabuk); }

.icerik {
    flex: 1;
    width: 100%;
    max-width: var(--icerik-max);
    margin: 0 auto;
    padding: 20px 16px calc(var(--alt-menu-yuksekligi) + 32px + env(safe-area-inset-bottom));
}

.menusuz .icerik {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

/* ---- Altta yüzen menü (telefon) ---- */
.alt-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    gap: 2px;
    padding: 6px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    border: 1px solid var(--kf-kenar);
    border-radius: 24px;
    box-shadow: var(--kf-golge-3);
    max-width: 560px;
    margin: 0 auto;
}

.alt-oge {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px 6px;
    border-radius: 18px;
    color: var(--kf-metin-3);
    font-size: 11px;
    font-weight: 700;
    transition: background-color .15s, color .15s;
}

.alt-oge:hover { color: var(--kf-ana); }

.alt-oge.aktif {
    background: var(--kf-ana-soluk);
    color: var(--kf-ana);
}

.alt-oge span.yazi {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.alt-ikon {
    position: relative;
    display: inline-flex;
}

.alt-rozet {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--kf-turuncu);
    color: #FFFFFF;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.site-alt {
    display: none;
    padding: 24px 16px 32px;
    color: var(--kf-metin-3);
    font-size: 13px;
    text-align: center;
}

.site-alt a { color: var(--kf-metin-2); font-weight: 600; }

@media (min-width: 992px) {
    .ust-ic { height: 68px; }
    .ust-nav { display: flex; }
    .alt-menu { display: none; }
    .icerik { padding: 28px 24px 48px; }
    .site-alt { display: block; }
    .mobil-yalniz { display: none !important; }
}

@media (max-width: 991.98px) {
    .masaustu-yalniz { display: none !important; }
}

/* ================= Sayfa başlığı ================= */

.sayfa-baslik {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.sayfa-baslik h1 {
    margin: 0;
    font-size: 24px;
}

.sayfa-baslik p {
    margin: 4px 0 0;
    color: var(--kf-metin-3);
}

.sayfa-baslik-eylem {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bolum-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 12px;
}

.bolum-baslik h2 {
    margin: 0;
    font-size: 18px;
}

@media (min-width: 992px) {
    .sayfa-baslik h1 { font-size: 28px; }
}

/* ================= Kart ================= */

.kart {
    background: var(--kf-yuzey);
    border: 1px solid var(--kf-kenar);
    border-radius: var(--kf-yaricap);
    box-shadow: var(--kf-golge-1);
}

.kart + .kart { margin-top: 16px; }

.kart-govde { padding: 18px; }

.kart-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kf-kenar-ince);
    font-weight: 800;
}

.kart-baslik h2, .kart-baslik h3 {
    margin: 0;
    font-size: 16px;
}

.kart-alt {
    padding: 14px 18px;
    border-top: 1px solid var(--kf-kenar-ince);
    background: var(--kf-yuzey-2);
    border-radius: 0 0 var(--kf-yaricap) var(--kf-yaricap);
}

.kart-tiklanir {
    display: block;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.kart-tiklanir:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: var(--kf-golge-2);
    border-color: var(--kf-ana-kenar);
}

.izgara {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.izgara-2 {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 768px) {
    .izgara-2 { grid-template-columns: 1fr 1fr; }
}

/* ================= Düğmeler ================= */

.btn {
    --bs-btn-font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border-radius: var(--kf-yaricap-k);
    font-size: 15px;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-sm {
    min-height: 36px;
    padding: .35rem .8rem;
    font-size: 13px;
    border-radius: 10px;
}

.btn-buyuk {
    min-height: 54px;
    padding: .8rem 1.4rem;
    font-size: 16px;
    border-radius: 14px;
}

/* Bootstrap bu sürümde düğme renklerini doğrudan verir (değişkenle değil): renkler burada açıkça ezilir. */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    color: #FFFFFF;
    background-color: var(--kf-ana);
    border-color: var(--kf-ana);
    box-shadow: 0 4px 14px rgba(15, 107, 120, .25);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #FFFFFF;
    background-color: var(--kf-ana-koyu);
    border-color: var(--kf-ana-koyu);
}

.btn-primary:active,
.btn-check:checked + .btn-primary {
    color: #FFFFFF;
    background-color: var(--kf-ana-basili);
    border-color: var(--kf-ana-basili);
}

.btn-primary:focus,
.btn-primary:active:focus {
    box-shadow: 0 0 0 4px rgba(15, 107, 120, .25);
}

.btn-outline-primary {
    color: var(--kf-ana);
    background-color: #FFFFFF;
    border-color: var(--kf-ana-kenar);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: var(--kf-ana-koyu);
    background-color: var(--kf-ana-soluk);
    border-color: var(--kf-ana);
    box-shadow: none;
}

.btn-outline-secondary {
    color: var(--kf-metin-2);
    background-color: #FFFFFF;
    border-color: var(--kf-kenar-koyu);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--kf-metin);
    background-color: var(--kf-yuzey-2);
    border-color: var(--kf-metin-4);
    box-shadow: none;
}

.btn-outline-secondary:disabled {
    color: var(--kf-metin-4);
    background-color: #FFFFFF;
}

.btn-acik {
    background: var(--kf-ana-soluk);
    color: var(--kf-ana);
    border: 1px solid transparent;
}

.btn-acik:hover { background: #D5ECEA; color: var(--kf-ana-koyu); }

.btn-danger,
.btn-danger:disabled {
    color: #FFFFFF;
    background-color: var(--kf-kirmizi);
    border-color: var(--kf-kirmizi);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: #FFFFFF;
    background-color: var(--kf-kirmizi-koyu);
    border-color: var(--kf-kirmizi-koyu);
    box-shadow: none;
}

.btn-outline-danger {
    color: var(--kf-kirmizi);
    background-color: #FFFFFF;
    border-color: #F3B4B4;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: var(--kf-kirmizi-koyu);
    background-color: var(--kf-kirmizi-soluk);
    border-color: var(--kf-kirmizi);
    box-shadow: none;
}

.btn-success,
.btn-success:disabled {
    color: #FFFFFF;
    background-color: var(--kf-yesil);
    border-color: var(--kf-yesil);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: #FFFFFF;
    background-color: #0E8443;
    border-color: #0E8443;
    box-shadow: none;
}

.btn-whatsapp {
    background: var(--kf-whatsapp);
    border: 1px solid var(--kf-whatsapp);
    color: #FFFFFF;
}

.btn-whatsapp:hover { background: var(--kf-whatsapp-koyu); border-color: var(--kf-whatsapp-koyu); color: #FFFFFF; }

.btn-beyaz {
    background: #FFFFFF;
    color: var(--kf-kabuk);
    border: 1px solid #FFFFFF;
}

.btn-beyaz:hover { background: var(--kf-nane-soluk); color: var(--kf-kabuk); }

.btn-cam {
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .28);
}

.btn-cam:hover { background: rgba(255, 255, 255, .24); color: #FFFFFF; }

.btn-ikon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
}

.btn-link {
    color: var(--kf-ana);
    text-decoration: none;
    font-weight: 700;
}

.btn-link:hover { color: var(--kf-ana-koyu); }

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23B5DAD6'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ================= Formlar ================= */

.form-label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--kf-metin-2);
}

.form-control, .form-select {
    min-height: 48px;
    padding: .65rem .9rem;
    border: 1.5px solid var(--kf-kenar-koyu);
    border-radius: var(--kf-yaricap-k);
    font-size: 16px; /* iPhone: 16 pikselden küçük kutuda yakınlaştırma yapar */
    color: var(--kf-metin);
    background-color: #FFFFFF;
}

textarea.form-control { min-height: 96px; }

.form-control:focus, .form-select:focus {
    border-color: var(--kf-ana);
    box-shadow: 0 0 0 4px rgba(15, 107, 120, .14);
}

.form-control::placeholder { color: var(--kf-metin-4); }

.form-text {
    margin-top: 6px;
    font-size: 13px;
    color: var(--kf-metin-3);
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    border: 1.5px solid var(--kf-kenar-koyu);
}

.form-check-input:checked {
    background-color: var(--kf-ana);
    border-color: var(--kf-ana);
}

.form-check-input:focus {
    border-color: var(--kf-ana);
    box-shadow: 0 0 0 4px rgba(15, 107, 120, .14);
}

.form-switch .form-check-input {
    width: 2.6em;
    height: 1.45em;
    margin-top: .05em;
}

.validation-message {
    margin-top: 6px;
    font-size: 13px;
    color: var(--kf-kirmizi);
}

.invalid { border-color: var(--kf-kirmizi) !important; }

.sifre-kutu {
    position: relative;
}

.sifre-kutu .form-control { padding-right: 48px; }

.sifre-goster {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--kf-metin-3);
}

.sifre-goster:hover { background: var(--kf-yuzey-2); color: var(--kf-metin); }

/* Ayar satırı: solda açıklama, sağda anahtar */
.ayar-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--kf-kenar-ince);
}

.ayar-satir:last-child { border-bottom: 0; }

.ayar-satir strong { display: block; font-size: 15px; }
.ayar-satir small { display: block; color: var(--kf-metin-3); font-size: 13px; }

/* Hap biçimli seçenekler (süre, aralık...) */
.hap-grup {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1.5px solid var(--kf-kenar-koyu);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--kf-metin-2);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
}

.hap:hover { border-color: var(--kf-ana); color: var(--kf-ana); }

.hap.secili {
    background: var(--kf-ana);
    border-color: var(--kf-ana);
    color: #FFFFFF;
}

.hap.bayan.secili { background: var(--kf-bayan); border-color: var(--kf-bayan); }

/* Bölümlü seçici (Erkek | Bayan) */
.bolumlu {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: 14px;
    background: var(--kf-yuzey-3);
}

.bolumlu button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 18px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--kf-metin-3);
    font-weight: 700;
    font-size: 14px;
}

.bolumlu button.secili {
    background: #FFFFFF;
    color: var(--kf-metin);
    box-shadow: var(--kf-golge-1);
}

.bolumlu button.secili.erkek { color: var(--kf-erkek); }
.bolumlu button.secili.bayan { color: var(--kf-bayan); }

.bolumlu-tam { display: flex; }
.bolumlu-tam button { flex: 1; justify-content: center; }

/* ================= Uyarı, rozet ================= */

.alert {
    border: 0;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.alert-danger { background: var(--kf-kirmizi-soluk); color: var(--kf-kirmizi-koyu); }
.alert-success { background: var(--kf-yesil-soluk); color: #0E7A3E; }
.alert-warning { background: var(--kf-turuncu-soluk); color: #9A4F05; }
.alert-info { background: var(--kf-ana-soluk); color: var(--kf-ana-koyu); }

.rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.rozet-bekliyor { background: var(--kf-turuncu-soluk); color: #9A4F05; }
.rozet-onay { background: var(--kf-ana-soluk); color: var(--kf-ana-koyu); }
.rozet-tamam { background: var(--kf-yesil-soluk); color: #0E7A3E; }
.rozet-iptal { background: var(--kf-kirmizi-soluk); color: var(--kf-kirmizi-koyu); }
.rozet-gelmedi { background: var(--kf-yuzey-3); color: var(--kf-metin-2); }
.rozet-notr { background: var(--kf-yuzey-3); color: var(--kf-metin-2); }
.rozet-erkek { background: var(--kf-erkek-soluk); color: var(--kf-erkek); }
.rozet-bayan { background: var(--kf-bayan-soluk); color: var(--kf-bayan); }
.rozet-sure { background: var(--kf-yuzey-3); color: var(--kf-metin-2); }

/* ================= Boş durum, yükleniyor ================= */

.bos-durum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

.bos-durum-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 8px;
    border-radius: 26px;
    background: var(--kf-ana-soluk);
    color: var(--kf-ana);
}

.bos-durum-baslik {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.bos-durum-metin {
    max-width: 420px;
    margin: 0 0 8px;
    color: var(--kf-metin-3);
}

.yukleniyor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--kf-metin-3);
    font-weight: 600;
}

.donen {
    width: 36px;
    height: 36px;
    border: 3.5px solid var(--kf-ana-soluk);
    border-top-color: var(--kf-ana);
    border-radius: 50%;
    animation: don .8s linear infinite;
}

.donen-kucuk {
    width: 18px;
    height: 18px;
    border-width: 2.5px;
    border-color: rgba(255, 255, 255, .35);
    border-top-color: #FFFFFF;
}

@keyframes don { to { transform: rotate(360deg); } }

.iskelet {
    background: linear-gradient(90deg, var(--kf-yuzey-3) 0%, #F7FAFA 50%, var(--kf-yuzey-3) 100%);
    background-size: 200% 100%;
    animation: iskelet 1.2s ease-in-out infinite;
    border-radius: 12px;
}

@keyframes iskelet {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================= Pencere (modal / alt sayfa) ================= */

.pencere-perde {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--kf-perde);
    animation: perde-gir .18s ease-out;
}

.pencere {
    width: 100%;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 24px 24px 0 0;
    box-shadow: var(--kf-golge-3);
    animation: pencere-gir .22s ease-out;
    padding-bottom: env(safe-area-inset-bottom);
}

.pencere-ust {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 12px;
}

.pencere-ust h2 {
    flex: 1;
    margin: 0;
    font-size: 19px;
}

.pencere-kapat {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: var(--kf-yuzey-3);
    color: var(--kf-metin-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pencere-kapat:hover { background: var(--kf-kenar); }

.pencere-govde {
    padding: 4px 20px 16px;
    overflow-y: auto;
}

.pencere-alt {
    display: flex;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--kf-kenar-ince);
}

.pencere-alt .btn { flex: 1; }

@media (min-width: 640px) {
    .pencere-perde { align-items: center; padding: 24px; }
    .pencere { max-width: 520px; border-radius: 24px; padding-bottom: 0; }
    .pencere.genis { max-width: 720px; }
    .pencere-alt .btn { flex: 0 0 auto; }
    .pencere-alt { justify-content: flex-end; }
}

@keyframes perde-gir { from { opacity: 0; } }
@keyframes pencere-gir { from { transform: translateY(24px); opacity: 0; } }

/* ================= Tost ================= */

.tost-katman {
    position: fixed;
    left: 50%;
    bottom: calc(var(--alt-menu-yuksekligi) + 24px + env(safe-area-inset-bottom));
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 420px);
    transform: translateX(-50%);
    pointer-events: none;
}

.tost {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--kf-metin);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--kf-golge-3);
    pointer-events: auto;
    animation: pencere-gir .2s ease-out;
}

.tost-basari .ikon { color: var(--kf-nane-acik); }
.tost-hata { background: var(--kf-kirmizi-koyu); }

@media (min-width: 992px) {
    .tost-katman { bottom: 32px; }
}

/* ================= Avatar ================= */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .02em;
}

.avatar-kucuk { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.avatar-buyuk { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; }
.avatar-yuvarlak { border-radius: 50%; }

/* ================= Hesap (giriş / kayıt) ================= */

.hesap-govde {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    background:
        radial-gradient(60% 50% at 85% 0%, rgba(168, 230, 207, .22) 0%, transparent 70%),
        radial-gradient(120% 80% at 50% 0%, #15707D 0%, var(--kf-kabuk) 55%, var(--kf-kabuk-koyu) 100%);
}

.hesap-kart {
    width: 100%;
    max-width: 440px;
    padding: 28px 22px;
    background: #FFFFFF;
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.hesap-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    font-weight: 800;
    font-size: 20px;
    color: var(--kf-kabuk);
}

.hesap-logo img {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(14, 79, 92, .3);
}

.hesap-kart h1 {
    margin: 0;
    font-size: 23px;
    text-align: center;
}

.hesap-alt-baslik {
    margin: 6px 0 22px;
    color: var(--kf-metin-3);
    text-align: center;
    font-size: 14px;
}

.hesap-baglantilar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
}

.hesap-alt {
    margin-top: 20px;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    text-align: center;
}

.hesap-alt a { color: #FFFFFF; font-weight: 700; }

.whatsapp-bilgi {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #E8FBEF;
    color: #146C36;
    font-size: 13.5px;
    font-weight: 600;
}

.whatsapp-bilgi .ikon-kutu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--kf-whatsapp);
    color: #FFFFFF;
}

.kod-girdi {
    height: 64px;
    font-size: 30px !important;
    font-weight: 800;
    letter-spacing: .5em;
    text-align: center;
    padding-left: .5em !important;
    font-variant-numeric: tabular-nums;
}

.gelistirme-kodu {
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 1.5px dashed var(--kf-turuncu);
    border-radius: 14px;
    background: var(--kf-turuncu-soluk);
    color: #9A4F05;
    font-size: 13.5px;
}

.gelistirme-kodu strong {
    font-size: 18px;
    letter-spacing: .2em;
}

/* ================= Ana sayfa ================= */

.kahraman {
    position: relative;
    overflow: hidden;
    padding: 28px 22px 26px;
    margin: -4px 0 22px;
    border-radius: 26px;
    color: #FFFFFF;
    background:
        radial-gradient(50% 70% at 100% 0%, rgba(168, 230, 207, .28) 0%, transparent 70%),
        linear-gradient(135deg, #15707D 0%, var(--kf-kabuk) 60%, var(--kf-kabuk-koyu) 100%);
    box-shadow: var(--kf-golge-2);
}

.kahraman::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    background: url("img/kuafor-amblem.png") center / contain no-repeat;
    opacity: .1;
    pointer-events: none;
}

.kahraman h1 {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1.2;
}

.kahraman p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .82);
    max-width: 520px;
}

.arama-kutu {
    position: relative;
    max-width: 560px;
    z-index: 1;
}

.arama-kutu .ikon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--kf-metin-3);
}

.arama-kutu .form-control {
    height: 54px;
    padding-left: 46px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.kahraman-hap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.kahraman-hap button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}

.kahraman-hap button.secili {
    background: #FFFFFF;
    color: var(--kf-kabuk);
    border-color: #FFFFFF;
}

@media (min-width: 992px) {
    .kahraman { padding: 44px 40px 40px; }
    .kahraman h1 { font-size: 36px; }
    .kahraman::after { width: 320px; height: 320px; right: 20px; bottom: -40px; }
}

.isletme-kart { overflow: hidden; }

.isletme-kapakcik {
    position: relative;
    height: 92px;
    background: linear-gradient(135deg, var(--renk, var(--kf-ana)) 0%, var(--kf-kabuk-koyu) 120%);
}

.isletme-kapakcik::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 8px;
    width: 76px;
    height: 76px;
    background: url("img/kuafor-amblem.png") center / contain no-repeat;
    opacity: .16;
}

.isletme-harf {
    position: absolute;
    left: 18px;
    bottom: -26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 4px solid #FFFFFF;
    border-radius: 18px;
    background: var(--renk, var(--kf-ana));
    color: #FFFFFF;
    font-weight: 800;
    font-size: 21px;
    box-shadow: var(--kf-golge-1);
}

.isletme-kart-govde { padding: 34px 18px 16px; }

.isletme-kart h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.isletme-konum {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--kf-metin-3);
    font-size: 13.5px;
}

.isletme-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.isletme-kart-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid var(--kf-kenar-ince);
    font-size: 14px;
}

.isletme-kart-alt strong { color: var(--kf-ana); }

.davet-kart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 22px;
    margin-top: 28px;
    border-radius: var(--kf-yaricap);
    background: linear-gradient(135deg, var(--kf-nane-soluk) 0%, #FFFFFF 100%);
    border: 1px solid #CBEBDD;
}

.davet-kart .metin { flex: 1; min-width: 220px; }
.davet-kart h3 { margin: 0 0 4px; font-size: 18px; }
.davet-kart p { margin: 0; color: var(--kf-metin-2); }

/* ================= İşletme sayfası ================= */

.isletme-kapak {
    position: relative;
    overflow: hidden;
    padding: 24px 20px 22px;
    margin: -4px 0 20px;
    border-radius: 26px;
    color: #FFFFFF;
    background:
        radial-gradient(50% 70% at 100% 0%, rgba(168, 230, 207, .25) 0%, transparent 70%),
        linear-gradient(135deg, #15707D 0%, var(--kf-kabuk) 60%, var(--kf-kabuk-koyu) 100%);
    box-shadow: var(--kf-golge-2);
}

.isletme-kapak-ust {
    display: flex;
    align-items: center;
    gap: 16px;
}

.isletme-kapak .isletme-buyuk-harf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    font-weight: 800;
    font-size: 26px;
}

.isletme-kapak h1 {
    margin: 0;
    color: #FFFFFF;
    font-size: 24px;
}

.isletme-kapak .isletme-konum { color: rgba(255, 255, 255, .8); }

.isletme-kapak p.aciklama {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .85);
    max-width: 620px;
}

.isletme-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.hizmet-satir {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kf-kenar-ince);
}

.hizmet-satir:last-child { border-bottom: 0; }

.hizmet-satir .ad { flex: 1; min-width: 0; font-weight: 700; }
.hizmet-satir .ad small { display: block; font-weight: 500; color: var(--kf-metin-3); }
.hizmet-satir .fiyat { font-weight: 800; color: var(--kf-metin); white-space: nowrap; }

.calisan-serit {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}

.calisan-serit::-webkit-scrollbar { display: none; }

.calisan-kucuk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 84px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.calisan-kucuk small { font-weight: 500; color: var(--kf-metin-3); font-size: 12px; }

.saat-tablosu {
    width: 100%;
    font-size: 14px;
}

.saat-tablosu td {
    padding: 8px 0;
    border-bottom: 1px solid var(--kf-kenar-ince);
}

.saat-tablosu tr:last-child td { border-bottom: 0; }
.saat-tablosu td:last-child { text-align: right; font-weight: 700; }
.saat-tablosu tr.bugun td { color: var(--kf-ana); font-weight: 800; }
.saat-tablosu .kapali { color: var(--kf-metin-4); font-weight: 600; }

.alt-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--alt-menu-yuksekligi) + 20px + env(safe-area-inset-bottom));
    z-index: 55;
    max-width: 560px;
    margin: 0 auto;
}

.alt-cta .btn { width: 100%; box-shadow: 0 12px 30px rgba(15, 107, 120, .4); }

@media (min-width: 992px) {
    .alt-cta { display: none; }
}

/* ================= Randevu sihirbazı ================= */

.adimlar {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

.adim {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--kf-metin-4);
    min-width: 0;
}

.adim::before {
    content: "";
    height: 5px;
    border-radius: 3px;
    background: var(--kf-kenar);
}

.adim.tamam::before, .adim.aktif::before { background: var(--kf-ana); }
.adim.aktif, .adim.tamam { color: var(--kf-ana); }
.adim.tamam { cursor: pointer; }

.adim span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sihirbaz-ozet {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sihirbaz-ozet button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--kf-kenar);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--kf-metin-2);
    font-size: 13px;
    font-weight: 700;
}

.sihirbaz-ozet button:hover { border-color: var(--kf-ana); color: var(--kf-ana); }

.secim-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.secim-oge {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--kf-kenar);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--kf-metin);
    text-align: left;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.secim-oge:hover { border-color: var(--kf-ana-kenar); box-shadow: var(--kf-golge-1); }

.secim-oge.secili {
    border-color: var(--kf-ana);
    background: var(--kf-ana-soluk);
    box-shadow: 0 0 0 3px rgba(15, 107, 120, .12);
}

.secim-oge.bayan.secili {
    border-color: var(--kf-bayan);
    background: var(--kf-bayan-soluk);
    box-shadow: 0 0 0 3px rgba(194, 65, 110, .12);
}

.secim-oge .govde { flex: 1; min-width: 0; }
.secim-oge .baslik { display: block; font-weight: 800; font-size: 15.5px; }
.secim-oge .alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; color: var(--kf-metin-3); font-size: 13px; }
.secim-oge .fiyat { font-weight: 800; font-size: 16px; white-space: nowrap; }

.secim-isaret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border: 2px solid var(--kf-kenar-koyu);
    border-radius: 50%;
    color: transparent;
}

.secili .secim-isaret {
    border-color: var(--kf-ana);
    background: var(--kf-ana);
    color: #FFFFFF;
}

.bayan.secili .secim-isaret { border-color: var(--kf-bayan); background: var(--kf-bayan); }

.berber-izgara {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

.berber-secim {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--kf-kenar);
    border-radius: 16px;
    background: #FFFFFF;
    text-align: left;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.berber-secim:hover { border-color: var(--kf-ana-kenar); }

.berber-secim.secili {
    border-color: var(--kf-ana);
    background: var(--kf-ana-soluk);
    box-shadow: 0 0 0 3px rgba(15, 107, 120, .12);
}

.berber-secim strong { display: block; font-size: 15px; }
.berber-secim small { display: block; color: var(--kf-metin-3); font-size: 12.5px; }

.fark-etmez-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--kf-nane-soluk);
    color: var(--kf-nane);
}

/* Tarih şeridi */
.tarih-seridi {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    margin: 0 -2px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.tarih-hucre {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 64px;
    padding: 10px 4px 8px;
    border: 1.5px solid var(--kf-kenar);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--kf-metin);
    scroll-snap-align: start;
    transition: all .15s;
}

.tarih-hucre .gun { font-size: 12px; font-weight: 700; color: var(--kf-metin-3); text-transform: uppercase; }
.tarih-hucre .no { font-size: 21px; font-weight: 800; line-height: 1.15; }
.tarih-hucre .ay { font-size: 11.5px; font-weight: 600; color: var(--kf-metin-3); }
.tarih-hucre .durum { font-size: 10.5px; font-weight: 700; color: var(--kf-nane); min-height: 15px; }

.tarih-hucre:hover:not(:disabled) { border-color: var(--kf-ana); }

.tarih-hucre.secili {
    border-color: var(--kf-ana);
    background: var(--kf-ana);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(15, 107, 120, .3);
}

.tarih-hucre.secili .gun, .tarih-hucre.secili .ay, .tarih-hucre.secili .durum { color: rgba(255, 255, 255, .85); }

.tarih-hucre:disabled {
    background: var(--kf-yuzey-2);
    color: var(--kf-metin-4);
    cursor: not-allowed;
}

.tarih-hucre:disabled .durum { color: var(--kf-metin-4); }

/* Saat kutuları: boş olan tıklanır, dolu / geçmiş pasif */
.saat-grup + .saat-grup { margin-top: 18px; }

.saat-grup-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--kf-metin-3);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.saat-izgarasi {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
}

.saat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 6px 4px;
    border: 1.5px solid var(--kf-ana-kenar);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--kf-ana-koyu);
    font-weight: 800;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    transition: all .12s;
}

.saat small {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
}

.saat-bos:hover {
    border-color: var(--kf-ana);
    background: var(--kf-ana-soluk);
}

.saat.secili {
    border-color: var(--kf-ana);
    background: var(--kf-ana);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(15, 107, 120, .35);
}

.saat-dolu {
    border-color: var(--kf-kenar);
    background: repeating-linear-gradient(-45deg, #F3F6F7 0 6px, #EAEFF1 6px 12px);
    color: var(--kf-metin-4);
    cursor: not-allowed;
}

.saat-dolu span { text-decoration: line-through; }
.saat-dolu small { color: var(--kf-metin-3); }

.saat-gecmis {
    border-color: var(--kf-kenar-ince);
    background: var(--kf-yuzey-2);
    color: #C3CDD0;
    cursor: not-allowed;
}

.saat-lejant {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--kf-metin-3);
    font-size: 12.5px;
    font-weight: 600;
}

.saat-lejant span { display: inline-flex; align-items: center; gap: 6px; }

.saat-lejant i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 5px;
}

.lejant-bos { border: 1.5px solid var(--kf-ana-kenar); background: #FFFFFF; }
.lejant-dolu { background: repeating-linear-gradient(-45deg, #F3F6F7 0 3px, #DCE3E6 3px 6px); }
.lejant-gecmis { background: var(--kf-yuzey-3); }
.lejant-secili { background: var(--kf-ana); }

.ozet-tablo {
    display: flex;
    flex-direction: column;
}

.ozet-satir {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--kf-kenar-ince);
}

.ozet-satir:last-child { border-bottom: 0; }

.ozet-satir .ikon-kutu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--kf-ana-soluk);
    color: var(--kf-ana);
}

.ozet-satir small { display: block; color: var(--kf-metin-3); font-size: 12.5px; font-weight: 600; }
.ozet-satir strong { display: block; font-size: 15.5px; }

.toplam-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--kf-yuzey-2);
    font-weight: 700;
}

.toplam-satir strong { font-size: 20px; color: var(--kf-ana); }

.basari {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 0 4px;
}

.basari-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--kf-yesil-soluk);
    color: var(--kf-yesil);
    animation: basari-gir .5s cubic-bezier(.2, 1.4, .4, 1);
}

.basari-ikon.bekliyor { background: var(--kf-turuncu-soluk); color: var(--kf-turuncu); }

@keyframes basari-gir {
    from { transform: scale(.4); opacity: 0; }
}

.basari h1 { margin: 0 0 6px; font-size: 24px; }
.basari p { color: var(--kf-metin-3); max-width: 420px; }

.sihirbaz-alt {
    position: sticky;
    bottom: calc(var(--alt-menu-yuksekligi) + 16px + env(safe-area-inset-bottom));
    z-index: 20;
    margin-top: 18px;
}

.sihirbaz-alt .btn { width: 100%; box-shadow: 0 10px 28px rgba(15, 107, 120, .35); }

.menusuz .sihirbaz-alt,
.menusuz .kaydet-serit {
    bottom: calc(16px + env(safe-area-inset-bottom));
}

@media (min-width: 992px) {
    .sihirbaz-alt { bottom: 16px; }
    .sihirbaz-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
    .sihirbaz-yan { position: sticky; top: 92px; }
}

/* ================= Randevu kartı ================= */

.randevu-kart {
    display: flex;
    gap: 14px;
    padding: 16px;
}

.randevu-tarih {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 62px;
    height: 70px;
    border-radius: 16px;
    background: var(--kf-ana-soluk);
    color: var(--kf-ana);
}

.randevu-tarih .no { font-size: 24px; font-weight: 800; line-height: 1.05; }
.randevu-tarih .ay { font-size: 12px; font-weight: 700; text-transform: uppercase; }

.randevu-tarih.gecmis { background: var(--kf-yuzey-3); color: var(--kf-metin-3); }
.randevu-tarih.iptal { background: var(--kf-kirmizi-soluk); color: var(--kf-kirmizi-koyu); }

.randevu-govde { flex: 1; min-width: 0; }

.randevu-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.randevu-govde h3 { margin: 0; font-size: 16px; }

.randevu-bilgi {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    color: var(--kf-metin-2);
    font-size: 13.5px;
}

.randevu-bilgi span { display: inline-flex; align-items: center; gap: 5px; }

.randevu-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sekmeler {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sekmeler::-webkit-scrollbar { display: none; }

.sekme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--kf-metin-3);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.sekme:hover { color: var(--kf-metin); background: var(--kf-yuzey-3); }

.sekme.aktif {
    background: var(--kf-metin);
    color: #FFFFFF;
}

.sekme .sayi {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .08);
    font-size: 12px;
}

.sekme.aktif .sayi { background: rgba(255, 255, 255, .2); }

/* ================= Panel ================= */

.panel-duzen {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
}

.panel-yan { display: none; }

@media (min-width: 992px) {
    .panel-duzen { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
    .panel-yan { display: block; position: sticky; top: 92px; }
}

.panel-isletme {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--kf-kenar-ince);
}

.panel-isletme strong { display: block; font-size: 15px; line-height: 1.25; }
.panel-isletme small { display: block; color: var(--kf-metin-3); font-size: 12.5px; }

.panel-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
}

.panel-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--kf-metin-2);
    font-weight: 700;
    font-size: 14.5px;
}

.panel-menu a:hover { background: var(--kf-yuzey-2); color: var(--kf-metin); }
.panel-menu a.aktif { background: var(--kf-ana-soluk); color: var(--kf-ana); }

.panel-mobil-ust {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--kf-kenar);
}

.panel-mobil-ust strong { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.istatistik-izgara {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 992px) {
    .istatistik-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

.istatistik {
    padding: 16px;
    border-radius: var(--kf-yaricap);
    background: #FFFFFF;
    border: 1px solid var(--kf-kenar);
    box-shadow: var(--kf-golge-1);
}

.istatistik .etiket {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kf-metin-3);
    font-size: 13px;
    font-weight: 700;
}

.istatistik .etiket .ikon-kutu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--kf-ana-soluk);
    color: var(--kf-ana);
}

.istatistik .deger {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.istatistik .deger small { font-size: 14px; color: var(--kf-metin-3); font-weight: 700; }

.doluluk-cubuk {
    height: 6px;
    margin-top: 10px;
    border-radius: 3px;
    background: var(--kf-yuzey-3);
    overflow: hidden;
}

.doluluk-cubuk span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--kf-nane), var(--kf-ana));
}

.kurulum-adim {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kf-kenar-ince);
    color: var(--kf-metin);
}

.kurulum-adim:last-child { border-bottom: 0; }
.kurulum-adim:hover { background: var(--kf-yuzey-2); color: var(--kf-metin); }

.kurulum-adim .isaret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px dashed var(--kf-kenar-koyu);
    color: var(--kf-metin-4);
    font-weight: 800;
    font-size: 13px;
}

.kurulum-adim.tamam .isaret {
    border: 0;
    background: var(--kf-yesil);
    color: #FFFFFF;
}

.kurulum-adim.tamam .metin { color: var(--kf-metin-3); text-decoration: line-through; }
.kurulum-adim .metin { flex: 1; font-weight: 700; }
.kurulum-adim .metin small { display: block; font-weight: 500; color: var(--kf-metin-3); text-decoration: none; }

.liste-satir {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kf-kenar-ince);
    color: var(--kf-metin);
}

.liste-satir:last-child { border-bottom: 0; }
a.liste-satir:hover, button.liste-satir:hover { background: var(--kf-yuzey-2); color: var(--kf-metin); }

button.liste-satir {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--kf-kenar-ince);
    background: transparent;
    text-align: left;
}

.liste-satir .govde { flex: 1; min-width: 0; }
.liste-satir .govde strong { display: block; font-size: 15px; }
.liste-satir .govde small { display: block; color: var(--kf-metin-3); font-size: 13px; }

.saat-blok {
    flex: none;
    min-width: 58px;
    padding: 6px 8px;
    border-radius: 12px;
    background: var(--kf-ana-soluk);
    color: var(--kf-ana-koyu);
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.saat-blok small { display: block; font-weight: 600; font-size: 11px; color: var(--kf-metin-3); }

.paylas-kutu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px dashed var(--kf-ana-kenar);
    border-radius: 14px;
    background: var(--kf-ana-soluk);
    font-weight: 700;
    color: var(--kf-ana-koyu);
    word-break: break-all;
    user-select: all;
}

/* ================= Takvim ================= */

.takvim-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.takvim-tarih {
    flex: 1;
    min-width: 160px;
    font-weight: 800;
    font-size: 17px;
}

.takvim-tarih small { display: block; color: var(--kf-metin-3); font-size: 13px; font-weight: 600; }

.takvim-kap {
    overflow: auto;
    max-height: calc(100dvh - 230px);
    border: 1px solid var(--kf-kenar);
    border-radius: var(--kf-yaricap);
    background: #FFFFFF;
    box-shadow: var(--kf-golge-1);
}

@media (min-width: 992px) {
    .takvim-kap { max-height: calc(100dvh - 210px); }
}

.takvim {
    display: grid;
    min-width: max-content;
}

.takvim-kose, .takvim-sutun-baslik {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #FFFFFF;
    border-bottom: 1px solid var(--kf-kenar);
}

.takvim-kose {
    left: 0;
    z-index: 4;
}

.takvim-sutun-baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-left: 1px solid var(--kf-kenar-ince);
    font-weight: 800;
    font-size: 14px;
}

.takvim-sutun-baslik small { display: block; color: var(--kf-metin-3); font-weight: 600; font-size: 12px; }

.takvim-saatler {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #FFFFFF;
    border-right: 1px solid var(--kf-kenar);
}

.takvim-saat-etiket {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    color: var(--kf-metin-3);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.takvim-sutun {
    position: relative;
    border-left: 1px solid var(--kf-kenar-ince);
    background: repeating-linear-gradient(-45deg, #F7F9FA 0 6px, #F1F4F5 6px 12px);
}

.takvim-calisma {
    position: absolute;
    left: 0;
    right: 0;
    background: #FFFFFF;
}

.takvim-cizgi {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--kf-kenar-ince);
    pointer-events: none;
}

.takvim-cizgi.tam { border-top-color: var(--kf-kenar); }

.takvim-bos {
    position: absolute;
    left: 3px;
    right: 3px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: transparent;
    font-size: 12px;
    font-weight: 700;
}

.takvim-bos:hover {
    background: var(--kf-ana-soluk);
    color: var(--kf-ana);
    outline: 1.5px dashed var(--kf-ana-kenar);
}

.takvim-izin {
    position: absolute;
    left: 3px;
    right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    background: repeating-linear-gradient(-45deg, #E9EEF0 0 6px, #DEE5E8 6px 12px);
    color: var(--kf-metin-3);
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
}

.takvim-randevu {
    position: absolute;
    left: 4px;
    right: 4px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    border: 0;
    border-left: 4px solid var(--renk, var(--kf-ana));
    border-radius: 10px;
    background: color-mix(in srgb, var(--renk, var(--kf-ana)) 13%, #FFFFFF);
    color: var(--kf-metin);
    text-align: left;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(14, 50, 58, .12);
    transition: box-shadow .15s, transform .1s;
}

.takvim-randevu:hover { box-shadow: var(--kf-golge-2); z-index: 2; }

.takvim-randevu strong { font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.takvim-randevu small { font-size: 11.5px; color: var(--kf-metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.takvim-randevu.bekliyor {
    border-left-color: var(--kf-turuncu);
    background: var(--kf-turuncu-soluk);
    outline: 1.5px dashed #F2C27D;
}

.takvim-randevu.tamam { opacity: .72; }
.takvim-randevu.gelmedi { opacity: .55; text-decoration: line-through; }

.takvim-randevu.iptal {
    display: none;
}

.takvim-simdi {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 2px;
    background: var(--kf-kirmizi);
    pointer-events: none;
}

.takvim-simdi::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kf-kirmizi);
}

/* ================= Haftalık program (tıklayarak seçim) ================= */

.gun-sekmeleri {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

.gun-sekme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px;
    border: 1.5px solid var(--kf-kenar);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--kf-metin);
    font-weight: 800;
    font-size: 14px;
}

.gun-sekme small {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--kf-nane);
    white-space: nowrap;
}

.gun-sekme.kapali small { color: var(--kf-metin-4); }

.gun-sekme.aktif {
    border-color: var(--kf-ana);
    background: var(--kf-ana);
    color: #FFFFFF;
}

.gun-sekme.aktif small { color: rgba(255, 255, 255, .85); }

.program-izgara {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.program-hucre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 4px;
    border: 1.5px dashed var(--kf-kenar-koyu);
    border-radius: 12px;
    background: var(--kf-yuzey-2);
    color: var(--kf-metin-4);
    font-weight: 800;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .1s, border-color .1s, color .1s;
}

.program-hucre small { font-size: 10px; font-weight: 700; }

.program-hucre.acik {
    border: 1.5px solid var(--kf-ana);
    background: var(--kf-ana);
    color: #FFFFFF;
}

.program-hucre:hover { border-color: var(--kf-ana); }
.program-hucre.acik:hover { background: var(--kf-ana-koyu); }

.program-ozet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--kf-yuzey-2);
    font-weight: 700;
    font-size: 14px;
}

.program-ozet.kapali { color: var(--kf-metin-3); }

.renk-secici {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.renk-secici button {
    width: 36px;
    height: 36px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--kf-kenar-koyu);
}

.renk-secici button.secili { box-shadow: 0 0 0 3px var(--kf-metin); }

.kaydet-serit {
    position: sticky;
    bottom: calc(var(--alt-menu-yuksekligi) + 16px + env(safe-area-inset-bottom));
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-top: 18px;
    border-radius: 18px;
    background: var(--kf-metin);
    color: #FFFFFF;
    box-shadow: var(--kf-golge-3);
    animation: pencere-gir .2s ease-out;
}

.kaydet-serit span { flex: 1; font-weight: 700; font-size: 14px; }

@media (min-width: 992px) {
    .kaydet-serit { bottom: 16px; }
}

/* ================= Mesaj günlüğü ================= */

.mesaj-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #E8FBEF;
    color: var(--kf-whatsapp-koyu);
}

.mesaj-ikon.hata { background: var(--kf-kirmizi-soluk); color: var(--kf-kirmizi); }

/* ================= Tablo ================= */

.tablo {
    width: 100%;
    font-size: 14px;
}

.tablo th {
    padding: 10px 14px;
    background: var(--kf-yuzey-2);
    color: var(--kf-metin-3);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--kf-kenar);
}

.tablo td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--kf-kenar-ince);
    vertical-align: middle;
}

.tablo tr:last-child td { border-bottom: 0; }

/* ================= Metin sayfası ================= */

.metin-sayfa {
    max-width: 760px;
}

.metin-sayfa h2 { font-size: 18px; margin-top: 24px; }
.metin-sayfa p, .metin-sayfa li { color: var(--kf-metin-2); }

/* ================= Hata şeridi ================= */

#blazor-error-ui {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: none;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: var(--kf-kirmizi-koyu);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .2);
}

#blazor-error-ui .reload { color: #FFFFFF; text-decoration: underline; margin-left: 8px; }

#blazor-error-ui .dismiss {
    position: absolute;
    right: 20px;
    cursor: pointer;
}