/* _content/Handman.Web/Components/Layout/AdminLayout.razor.rz.scp.css */
/* HandMan Admin Layout CSS */

.admin-wrapper[b-j7q9i1elbz] {
    display: flex;
    min-height: 100vh;
    background-color: #f1f5f9;
    color: #1e293b;
    font-family: var(--font-primary);
}

/* Sidebar */
.admin-sidebar[b-j7q9i1elbz] {
    width: 260px;
    background-color: #0f172a;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1000;
    border-right: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-header[b-j7q9i1elbz] {
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo[b-j7q9i1elbz] {
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.sidebar-logo span[b-j7q9i1elbz] {
    color: #e8730c;
}

.admin-pill[b-j7q9i1elbz] {
    background: rgba(232, 115, 12, 0.2);
    border: 1px solid rgba(232, 115, 12, 0.5);
    color: #f59e0b;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.btn-close-sidebar[b-j7q9i1elbz] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
}

/* Nav */
.sidebar-nav[b-j7q9i1elbz] {
    flex: 1;
    padding: 20px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-section-title[b-j7q9i1elbz] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #475569;
    padding: 14px 12px 6px;
    text-transform: uppercase;
}

.nav-link-admin[b-j7q9i1elbz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    position: relative;
}

.nav-link-admin:hover[b-j7q9i1elbz] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.nav-link-admin.active[b-j7q9i1elbz] {
    color: #ffffff;
    background: linear-gradient(90deg, #1e293b 0%, rgba(30, 41, 59, 0.8) 100%);
    border-left: 3px solid #e8730c;
}

.nav-link-admin i[b-j7q9i1elbz] {
    font-size: 17px;
    color: #64748b;
    transition: color 0.15s;
}

.nav-link-admin:hover i[b-j7q9i1elbz],
.nav-link-admin.active i[b-j7q9i1elbz] {
    color: #e8730c;
}

.badge-count[b-j7q9i1elbz] {
    margin-left: auto;
    background: #e8730c;
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 50px;
}

.view-site-link[b-j7q9i1elbz] {
    margin-top: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.view-site-link:hover[b-j7q9i1elbz] {
    border-color: #e8730c;
}

/* Sidebar Footer */
.sidebar-footer[b-j7q9i1elbz] {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-user-info[b-j7q9i1elbz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar[b-j7q9i1elbz] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e8730c;
    color: white;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-details[b-j7q9i1elbz] {
    display: flex;
    flex-direction: column;
}

.user-details strong[b-j7q9i1elbz] {
    font-size: 13px;
    color: #ffffff;
}

.user-details span[b-j7q9i1elbz] {
    font-size: 11px;
    color: #64748b;
}

/* Main Area */
.admin-main[b-j7q9i1elbz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-topbar[b-j7q9i1elbz] {
    background-color: #1e293b;
    color: #ffffff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btn-toggle-sidebar[b-j7q9i1elbz] {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    margin-right: 12px;
}

.topbar-title[b-j7q9i1elbz] {
    font-size: 14px;
    font-weight: 700;
    color: #94a3b8;
}

.topbar-actions[b-j7q9i1elbz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-body[b-j7q9i1elbz] {
    padding: 24px;
    flex: 1;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .admin-sidebar[b-j7q9i1elbz] {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
    }

    .admin-sidebar.mobile-open[b-j7q9i1elbz] {
        transform: translateX(0);
    }

    .sidebar-backdrop[b-j7q9i1elbz] {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        z-index: 999;
    }
}
/* _content/Handman.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* HandMan – MainLayout CSS */
html[b-necdrx5cts], body[b-necdrx5cts] {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.boxed-layout-wrapper[b-necdrx5cts] {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
}

.boxed-container[b-necdrx5cts] {
    width: 100%;
    max-width: var(--layout-max-width);
    background-color: var(--color-surface);
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

/* ===== HEADER ===== */
.site-header[b-necdrx5cts] {
    border-bottom: 3px solid var(--color-secondary);
    position: sticky;
    top: 0;
    z-index: 900;
    background-color: var(--color-primary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-content[b-necdrx5cts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    gap: 15px;
    position: relative;
}

.logo[b-necdrx5cts] {
    font-size: 28px;
    font-weight: 900;
    color: white;
    letter-spacing: -1px;
    text-decoration: none;
}

.logo:hover[b-necdrx5cts] { text-decoration: none; color: white; }

.logo span[b-necdrx5cts] {
    color: var(--color-secondary);
}

.mobile-menu-toggle[b-necdrx5cts] {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 5px;
}

/* Join as Handyman Header Button */
.join-handman-btn[b-necdrx5cts] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, rgba(232, 115, 12, 0.16) 0%, rgba(232, 115, 12, 0.28) 100%);
    color: #ffffff;
    border: 1.5px solid rgba(232, 115, 12, 0.7);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(232, 115, 12, 0.2);
    cursor: pointer;
    flex-shrink: 0;
}

.join-handman-btn:hover[b-necdrx5cts] {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(232, 115, 12, 0.4);
}

.join-handman-btn i[b-necdrx5cts] {
    font-size: 15px;
    color: #f59e0b;
    transition: transform 0.2s;
}

.join-handman-btn:hover i[b-necdrx5cts] {
    color: #ffffff;
    transform: scale(1.1);
}

@media (max-width: 1200px) {
    .join-handman-btn span[b-necdrx5cts] {
        display: none;
    }
    .join-handman-btn[b-necdrx5cts] {
        padding: 8px 10px;
    }
}

.search-bar[b-necdrx5cts] {
    flex: 1;
    display: flex;
    max-width: 340px;
    border-radius: 6px;
    overflow: hidden;
}

.search-bar input[b-necdrx5cts] {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-right: none;
    border-radius: 6px 0 0 6px;
    outline: none;
    font-size: 13px;
    background: rgba(255,255,255,0.1);
    color: white;
}

.search-bar input[b-necdrx5cts]::placeholder { color: rgba(255,255,255,0.5); }
.search-bar input:focus[b-necdrx5cts] { background: rgba(255,255,255,0.15); }

.search-bar button[b-necdrx5cts] {
    padding: 10px 16px;
    background: var(--color-secondary);
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    font-size: 16px;
    color: white;
    transition: background-color 0.2s;
}

.search-bar button:hover[b-necdrx5cts] { background: var(--color-secondary-hover); }

.header-actions[b-necdrx5cts] {
    display: flex;
    gap: 20px;
    align-items: center;
}

.action-item[b-necdrx5cts] {
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    transition: color 0.2s;
}

.action-item i[b-necdrx5cts] { font-size: 20px; color: rgba(255,255,255,0.9); }
.action-item:hover[b-necdrx5cts] { color: var(--color-secondary); }
.action-item:hover i[b-necdrx5cts] { color: var(--color-secondary); }

/* Language Selector */
.language-selector[b-necdrx5cts] {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.lang-trigger[b-necdrx5cts] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    pointer-events: none;
}

.lang-trigger .select-arrow[b-necdrx5cts] { font-size: 10px; }

.lang-select[b-necdrx5cts] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none; outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Profile Dropdown */
.profile-dropdown-container[b-necdrx5cts] { position: relative; }

.profile-dropdown[b-necdrx5cts] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 999;
    padding: 8px 0;
}

.profile-dropdown-container:hover .profile-dropdown[b-necdrx5cts] { display: block; }

.profile-dropdown a[b-necdrx5cts] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: var(--color-text-main);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}

.profile-dropdown a:hover[b-necdrx5cts] { background: #f5f5f5; }
.profile-dropdown a i[b-necdrx5cts] { font-size: 16px; color: var(--color-primary); }
.dropdown-divider[b-necdrx5cts] { height: 1px; background: #eee; margin: 4px 0; }

/* Get Quote Button */
.get-quote-btn[b-necdrx5cts] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-secondary);
    color: white;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.2s;
}

.get-quote-btn:hover[b-necdrx5cts] {
    background: var(--color-secondary-hover);
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
}

/* ===== FOOTER ===== */
.site-footer[b-necdrx5cts] { background: var(--color-primary); color: rgba(255,255,255,0.85); }
.footer-main[b-necdrx5cts] { padding: 50px 30px 30px; }

.footer-grid[b-necdrx5cts] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-logo[b-necdrx5cts] {
    font-size: 28px;
    font-weight: 900;
    color: white;
    margin-bottom: 5px;
}

.footer-logo span[b-necdrx5cts] { color: var(--color-secondary); }

.footer-badge[b-necdrx5cts] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-secondary);
    text-transform: uppercase;
    border: 1px solid var(--color-secondary);
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 15px;
}

.footer-address p[b-necdrx5cts] { font-size: 13px; line-height: 1.6; margin: 0 0 10px; }
.footer-contact p[b-necdrx5cts] { font-size: 13px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.footer-contact i[b-necdrx5cts] { color: var(--color-secondary); }

.footer-col h4[b-necdrx5cts] {
    font-size: 15px;
    font-weight: 700;
    color: white;
    margin: 0 0 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-col ul[b-necdrx5cts] { list-style: none; padding: 0; margin: 0; }
.footer-col li[b-necdrx5cts] { margin-bottom: 8px; }

.footer-col a[b-necdrx5cts] {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-col a:hover[b-necdrx5cts] { color: var(--color-secondary); text-decoration: none; }

.social-title[b-necdrx5cts] { margin-top: 25px !important; }

.footer-social[b-necdrx5cts] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-social a[b-necdrx5cts] {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    transition: background 0.2s, transform 0.2s;
}

.footer-social a:hover[b-necdrx5cts] { background: var(--color-secondary); transform: translateY(-2px); }

.footer-bottom[b-necdrx5cts] {
    text-align: center;
    padding: 20px 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav[b-necdrx5cts] {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    border-top: 1px solid #e0e0e0;
    z-index: 999;
    justify-content: space-around;
    padding: 6px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}

.bottom-nav-item[b-necdrx5cts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 600;
    gap: 2px;
    padding: 4px 12px;
    transition: color 0.2s;
}

.bottom-nav-item i[b-necdrx5cts] { font-size: 22px; }
.bottom-nav-item:hover[b-necdrx5cts] { color: var(--color-primary); text-decoration: none; }
.bottom-nav-item.whatsapp-btn[b-necdrx5cts] { color: #25d366; }
.bottom-nav-item.services-btn[b-necdrx5cts] { color: var(--color-secondary); }

/* Get Quote — Raised center CTA button */
.bottom-nav-quote[b-necdrx5cts] {
    position: relative;
    color: #e8730c !important;
}

.bottom-nav-quote-icon[b-necdrx5cts] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8730c, #d45b00);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -22px;
    box-shadow: 0 4px 14px rgba(232, 115, 12, 0.35);
    transition: all 0.2s ease;
}

.bottom-nav-quote-icon i[b-necdrx5cts] {
    font-size: 18px !important;
    color: #ffffff !important;
}

.bottom-nav-quote:hover .bottom-nav-quote-icon[b-necdrx5cts] {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(232, 115, 12, 0.45);
}

/* ===== MOBILE DRAWER ===== */
.mobile-drawer-overlay[b-necdrx5cts] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-drawer-overlay.open[b-necdrx5cts] { display: block; opacity: 1; }

.mobile-drawer[b-necdrx5cts] {
    position: fixed;
    top: 0; left: -300px;
    width: 300px;
    height: 100vh;
    background: white;
    z-index: 1001;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
}

.mobile-drawer.open[b-necdrx5cts] { left: 0; }

.drawer-header[b-necdrx5cts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 3px solid var(--color-secondary);
    background: var(--color-primary);
}

.drawer-logo[b-necdrx5cts] {
    font-size: 22px;
    font-weight: 900;
    color: white;
}

.drawer-logo span[b-necdrx5cts] { color: var(--color-secondary); }

.drawer-header .close-btn[b-necdrx5cts] {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.drawer-content[b-necdrx5cts] { padding: 10px 0; }

.drawer-link[b-necdrx5cts] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--color-text-main);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s;
}

.drawer-link:hover[b-necdrx5cts] { background: #f5f5f5; text-decoration: none; }
.drawer-icon[b-necdrx5cts] { font-size: 20px; }
.drawer-divider[b-necdrx5cts] { height: 1px; background: #eee; margin: 8px 20px; }

/* Mobile Header Tools (Search & Language Pill) */
.mobile-header-tools[b-necdrx5cts] {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mobile-search-toggle-btn[b-necdrx5cts] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-search-toggle-btn:hover[b-necdrx5cts],
.mobile-search-toggle-btn:active[b-necdrx5cts] {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #ffffff;
    transform: scale(1.05);
}

.mobile-lang-pill[b-necdrx5cts] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 10px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-lang-pill:hover[b-necdrx5cts] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

.mobile-lang-select[b-necdrx5cts] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Mobile Expandable Search Bar */
.mobile-expandable-search[b-necdrx5cts] {
    display: none;
    background: #0f172a;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    animation: searchSlideDown-b-necdrx5cts 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-expandable-search.open[b-necdrx5cts] {
    display: block;
}

@keyframes searchSlideDown-b-necdrx5cts {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-search-form[b-necdrx5cts] {
    display: flex;
    align-items: center;
    background: #1e293b;
    border: 1.5px solid rgba(232, 115, 12, 0.6);
    border-radius: 10px;
    padding: 2px 8px;
    gap: 8px;
    box-shadow: 0 0 12px rgba(232, 115, 12, 0.25);
}

.mobile-search-form .search-icon-left[b-necdrx5cts] {
    color: #e8730c;
    font-size: 15px;
    margin-left: 4px;
}

.mobile-search-form input[b-necdrx5cts] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 14px;
    padding: 8px 4px;
}

.mobile-search-form input[b-necdrx5cts]::placeholder {
    color: #94a3b8;
    font-size: 13px;
}

.mobile-search-submit[b-necdrx5cts] {
    background: #e8730c;
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.mobile-search-submit:hover[b-necdrx5cts] {
    background: #d66406;
}

.mobile-search-close[b-necdrx5cts] {
    background: transparent;
    border: none;
    color: #94a3b8;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .mobile-menu-toggle[b-necdrx5cts] { display: flex; }
    .mobile-bottom-nav[b-necdrx5cts] { display: flex; }
    .search-bar[b-necdrx5cts] { display: none; }
    .header-actions[b-necdrx5cts] { display: none; }
    .mobile-header-tools[b-necdrx5cts] { display: flex; }
    .join-handman-btn[b-necdrx5cts] { display: none !important; }
    .get-quote-btn[b-necdrx5cts] { display: none !important; }
    .profile-dropdown-container[b-necdrx5cts] { display: none; }
    .site-footer[b-necdrx5cts] { padding-bottom: 70px; }

    .footer-grid[b-necdrx5cts] {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .header-content[b-necdrx5cts] { padding: 8px 12px; gap: 8px; }
    .logo[b-necdrx5cts] { font-size: 20px; }

    .footer-grid[b-necdrx5cts] {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}
/* _content/Handman.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* HandMan – NavMenu CSS (ECommerce Mega Menu System - 5 Categories Per Row) */

/* Button is inside .header-content (which has position: relative). Wrapper must be static so .all-categories-dropdown stretches to full header width! */
.all-categories-wrapper[b-y18m78td16] {
    position: static;
}

.all-categories-btn[b-y18m78td16] {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    white-space: nowrap;
}

.all-categories-btn:hover[b-y18m78td16],
.all-categories-btn.active[b-y18m78td16] {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.all-categories-btn .chevron-icon[b-y18m78td16] {
    font-size: 10px;
    transition: transform 0.2s ease-in-out;
}

.all-categories-wrapper:hover .chevron-icon[b-y18m78td16],
.all-categories-btn.active .chevron-icon[b-y18m78td16] {
    transform: rotate(180deg);
}

/* POPUP DROPDOWN PANEL (Stretched to Full Width of Boxed Header) */
.all-categories-dropdown[b-y18m78td16] {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    width: auto;
    background: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: visibility 0.2s, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transition-delay: 0.1s;
    padding: 0;
    overflow: visible;
}

.all-categories-wrapper:hover .all-categories-dropdown[b-y18m78td16],
.all-categories-dropdown:hover[b-y18m78td16],
.all-categories-dropdown.open[b-y18m78td16] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Force closed state when a link is clicked */
.all-categories-wrapper.force-closed .all-categories-dropdown[b-y18m78td16],
.all-categories-dropdown.force-closed[b-y18m78td16] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    display: none !important;
}

/* DROPDOWN ROWS (MAIN CATEGORIES - 5 PER ROW GRID) */
.dropdown-nav-row[b-y18m78td16] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background-color: #EAEAEA;
    border-bottom: 1px solid #d0d0d0;
}

.dropdown-nav-row.row-4[b-y18m78td16],
.dropdown-nav-row:last-of-type[b-y18m78td16] {
    border-bottom: 2px solid var(--color-secondary); /* En son satırın altındaki canlı turuncu vurgu çizgisi */
}

.dropdown-nav-item[b-y18m78td16] {
    padding: 11px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    min-width: 0;
    justify-content: flex-start;
    transition: background-color 0.2s, color 0.2s;
    border-right: 1px solid #d0d0d0;
    height: 100%;
}

.dropdown-nav-item:last-child[b-y18m78td16] {
    border-right: none;
}

.dropdown-nav-item:hover[b-y18m78td16],
.dropdown-nav-item.active[b-y18m78td16] {
    background-color: #ffffff;
    color: var(--color-secondary);
}

.dropdown-nav-icon[b-y18m78td16] {
    font-size: 16px;
    flex-shrink: 0;
}

.dropdown-nav-text[b-y18m78td16] {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

/* SUBCATEGORIES BOX CONTAINER */
.subcategories-box-container[b-y18m78td16] {
    background-color: #ffffff;
    border-top: none;
    padding: 20px;
    position: relative;
    min-height: 200px;
    display: none;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Premium Scrollbar */
.subcategories-box-container[b-y18m78td16]::-webkit-scrollbar {
    width: 6px;
}
.subcategories-box-container[b-y18m78td16]::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.subcategories-box-container[b-y18m78td16]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.subcategories-box-container[b-y18m78td16]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.subcategory-pane[b-y18m78td16] {
    animation: paneFadeIn-b-y18m78td16 0.2s ease-out forwards;
}

.subcategory-pane-header[b-y18m78td16] {
    margin-bottom: 16px;
    padding-bottom: 4px;
}

.pane-title-row[b-y18m78td16] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pane-title[b-y18m78td16] {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1;
}

.pane-count[b-y18m78td16] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.pane-divider[b-y18m78td16] {
    width: 100%;
    height: 8px;
    margin-top: 6px;
    display: flex;
    align-items: center;
}

.pane-divider svg[b-y18m78td16] {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes paneFadeIn-b-y18m78td16 {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Subcategory 6-column Grid */
.subcategory-grid[b-y18m78td16] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

/* MINIMALIST & KURUMSAL HİZMET KARTLARI */
.mega-menu-card[b-y18m78td16] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    height: 100%;
}

.mega-menu-card:hover[b-y18m78td16] {
    box-shadow: 0 12px 24px rgba(26, 43, 76, 0.08);
    transform: translateY(-2px);
    border-color: var(--color-secondary);
}

.card-image-wrapper[b-y18m78td16] {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 135px;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.card-image[b-y18m78td16] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-card:hover .card-image[b-y18m78td16] {
    transform: scale(1.05);
}

.card-content[b-y18m78td16] {
    padding: 8px 10px 10px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    background-color: #ffffff;
}

.card-title[b-y18m78td16] {
    font-size: 13px;
    font-weight: 800;
    color: #1a2332;
    margin: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-count[b-y18m78td16] {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-secondary);
    background-color: #fff4eb;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    margin: 5px auto 0 auto;
    width: fit-content;
    line-height: 1;
}

/* Mobile */
@media (max-width: 991px) {
    .all-categories-wrapper[b-y18m78td16] {
        display: none !important;
    }
}
/* _content/Handman.Web/Components/Pages/Arama.razor.rz.scp.css */
.search-page-container[b-0sjitkd345] {
    width: 100%;
    min-height: 80vh;
    background: #f8fafc;
    padding-bottom: 60px;
}

/* Hero Header */
.search-hero[b-0sjitkd345] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
    padding: 48px 20px 40px;
    border-bottom: 3px solid #e8730c;
    text-align: center;
}

.search-hero-content[b-0sjitkd345] {
    max-width: 820px;
    margin: 0 auto;
}

.search-badge[b-0sjitkd345] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 115, 12, 0.15);
    border: 1px solid rgba(232, 115, 12, 0.4);
    color: #e8730c;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
}

.search-title[b-0sjitkd345] {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.25;
}

.query-highlight[b-0sjitkd345] {
    color: #f59e0b;
}

.search-subtitle[b-0sjitkd345] {
    font-size: 15px;
    color: #94a3b8;
    margin-bottom: 28px;
    line-height: 1.5;
}

/* Search Box Form */
.search-box-wrapper[b-0sjitkd345] {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 6px 8px 6px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.search-box-wrapper:focus-within[b-0sjitkd345] {
    border-color: #e8730c;
    box-shadow: 0 12px 35px rgba(232, 115, 12, 0.3);
}

.search-box-icon[b-0sjitkd345] {
    font-size: 18px;
    color: #94a3b8;
    margin-right: 12px;
}

.search-box-input[b-0sjitkd345] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #0f172a;
    font-weight: 500;
    background: transparent;
}

.search-box-input[b-0sjitkd345]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.search-clear-btn[b-0sjitkd345] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s;
}

.search-clear-btn:hover[b-0sjitkd345] {
    color: #ef4444;
}

.search-submit-btn[b-0sjitkd345] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8730c;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-submit-btn:hover[b-0sjitkd345] {
    background: #d66406;
    transform: translateY(-1px);
}

/* Quick Tags */
.search-quick-tags[b-0sjitkd345] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.tags-label[b-0sjitkd345] {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

.quick-tag-chip[b-0sjitkd345] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-tag-chip:hover[b-0sjitkd345] {
    background: #e8730c;
    border-color: #e8730c;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Results Area */
.search-results-area[b-0sjitkd345] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px;
}

.search-loading[b-0sjitkd345] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.results-header-bar[b-0sjitkd345] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.results-count[b-0sjitkd345] {
    font-size: 16px;
    color: #1e293b;
}

.results-count strong[b-0sjitkd345] {
    color: #e8730c;
}

.btn-all-services[b-0sjitkd345] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-all-services:hover[b-0sjitkd345] {
    background: #0f172a;
    color: white;
    border-color: #0f172a;
}

.section-subheading[b-0sjitkd345] {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

/* Matching Categories Mini Grid */
.categories-mini-grid[b-0sjitkd345] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.category-mini-card[b-0sjitkd345] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #0f172a;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.category-mini-card:hover[b-0sjitkd345] {
    border-color: #e8730c;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(232, 115, 12, 0.15);
}

.category-mini-icon[b-0sjitkd345] {
    font-size: 26px;
}

.category-mini-info[b-0sjitkd345] {
    flex: 1;
    min-width: 0;
}

.category-mini-title[b-0sjitkd345] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-mini-desc[b-0sjitkd345] {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-mini-arrow[b-0sjitkd345] {
    color: #94a3b8;
    font-size: 14px;
}

/* Services Results Grid */
.services-results-grid[b-0sjitkd345] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.service-card-item[b-0sjitkd345] {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.service-card-item:hover[b-0sjitkd345] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.service-card-image-wrap[b-0sjitkd345] {
    position: relative;
    width: 100%;
    height: 190px;
    background: #1e293b;
    overflow: hidden;
}

.service-card-image-wrap img[b-0sjitkd345] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-card-item:hover .service-card-image-wrap img[b-0sjitkd345] {
    transform: scale(1.05);
}

.service-badge-popular[b-0sjitkd345] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f59e0b;
    color: #000000;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.service-badge-category[b-0sjitkd345] {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.service-card-body[b-0sjitkd345] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-card-title[b-0sjitkd345] {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.35;
}

.service-card-title a[b-0sjitkd345] {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s;
}

.service-card-title a:hover[b-0sjitkd345] {
    color: #e8730c;
}

.service-card-desc[b-0sjitkd345] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.service-card-meta[b-0sjitkd345] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.service-price-tag[b-0sjitkd345] {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.quote-badge[b-0sjitkd345] {
    color: #0284c7;
    font-size: 12px;
}

.fixed-badge .price-from[b-0sjitkd345] {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.fixed-badge .price-val[b-0sjitkd345] {
    font-size: 16px;
    color: #e8730c;
    font-weight: 800;
}

.service-area-pill span[b-0sjitkd345] {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: 4px;
}

.service-card-footer[b-0sjitkd345] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-card-details[b-0sjitkd345] {
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-card-details:hover[b-0sjitkd345] {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-card-book[b-0sjitkd345] {
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: #e8730c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-card-book:hover[b-0sjitkd345] {
    background: #d66406;
    color: #ffffff;
}

/* Empty State */
.search-empty-state[b-0sjitkd345] {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 40px;
}

.empty-icon-wrap[b-0sjitkd345] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.search-empty-state h3[b-0sjitkd345] {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.search-empty-state p[b-0sjitkd345] {
    font-size: 14px;
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.5;
}

.empty-quick-actions[b-0sjitkd345] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-explore-catalog[b-0sjitkd345] {
    background: #0f172a;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-explore-catalog:hover[b-0sjitkd345] {
    background: #1e293b;
    color: white;
}

.btn-request-custom[b-0sjitkd345] {
    background: #e8730c;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-request-custom:hover[b-0sjitkd345] {
    background: #d66406;
    color: white;
}

.suggested-services-section[b-0sjitkd345] {
    margin-top: 30px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-title[b-0sjitkd345] {
        font-size: 24px;
    }

    .search-box-wrapper[b-0sjitkd345] {
        padding: 4px 6px 4px 12px;
    }

    .search-submit-btn span[b-0sjitkd345] {
        display: none;
    }

    .search-submit-btn[b-0sjitkd345] {
        padding: 10px 14px;
    }

    .services-results-grid[b-0sjitkd345] {
        grid-template-columns: 1fr;
    }

    .service-card-image-wrap[b-0sjitkd345] {
        height: 180px;
    }
}
/* _content/Handman.Web/Components/Pages/BizeKatil.razor.rz.scp.css */
/* HandMan – Bize Katıl / Join Us Multi-Step CSS */

.join-page-wrapper[b-727uipbcxl] {
    background-color: #f8fafc;
    min-height: 100vh;
    padding-bottom: 80px;
}

/* 1. HERO SECTION */
.join-hero-section[b-727uipbcxl] {
    position: relative;
    color: white;
    padding: 70px 24px 60px;
    overflow: hidden;
    background: #0f172a;
}

.hero-image-backdrop[b-727uipbcxl] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-bg-img[b-727uipbcxl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.35;
    filter: brightness(0.85) contrast(1.1);
}

.hero-overlay-gradient[b-727uipbcxl] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 50%, rgba(232, 115, 12, 0.35) 100%);
}

.hero-inner-content[b-727uipbcxl] {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.hero-badge[b-727uipbcxl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 115, 12, 0.2);
    border: 1px solid rgba(232, 115, 12, 0.6);
    color: #f59e0b;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-title[b-727uipbcxl] {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 18px;
    color: #ffffff;
}

.hero-subtitle[b-727uipbcxl] {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 780px;
    margin: 0 auto 36px;
}

.hero-benefits-grid[b-727uipbcxl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.benefit-card[b-727uipbcxl] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    transition: transform 0.2s, background 0.2s;
}

.benefit-card:hover[b-727uipbcxl] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
}

.benefit-icon[b-727uipbcxl] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e8730c;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(232, 115, 12, 0.3);
}

.benefit-text[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
}

.benefit-text strong[b-727uipbcxl] {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
}

.benefit-text span[b-727uipbcxl] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

/* 2. TABS NAV */
.join-container[b-727uipbcxl] {
    max-width: 1040px;
    margin: -32px auto 0;
    position: relative;
    z-index: 10;
    padding: 0 16px;
}

.join-tabs-nav[b-727uipbcxl] {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.join-tab-btn[b-727uipbcxl] {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.2s;
}

.join-tab-btn.active[b-727uipbcxl] {
    background: #0f172a;
    color: white;
    border-color: #0f172a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

.join-tab-btn .tab-badge.edit[b-727uipbcxl] {
    background: #e8730c;
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* 3. ALERTS */
.alert-success-card[b-727uipbcxl] {
    background: #ecfdf5;
    border: 1.5px solid #10b981;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1);
}

.alert-success-card .alert-icon-wrapper i[b-727uipbcxl] {
    font-size: 36px;
    color: #10b981;
}

.alert-success-card h3[b-727uipbcxl] {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: #065f46;
}

.alert-success-card p[b-727uipbcxl] {
    margin: 0;
    color: #047857;
}

.alert-approved-card[b-727uipbcxl] {
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
}

.alert-approved-card .approved-icon[b-727uipbcxl] {
    font-size: 40px;
    color: #d97706;
}

.alert-approved-card h4[b-727uipbcxl] {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    color: #92400e;
}

.alert-approved-card p[b-727uipbcxl] {
    margin: 0;
    font-size: 13px;
    color: #b45309;
}

/* 4. FORM CARD CONTAINER */
.form-card-container[b-727uipbcxl] {
    background: white;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* 5. STEPPER HEADER BAR */
.stepper-header-bar[b-727uipbcxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 22px 36px;
    position: relative;
    user-select: none;
}

.step-indicator[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.step-circle[b-727uipbcxl] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.step-meta[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
}

.step-name[b-727uipbcxl] {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    transition: color 0.2s;
}

.step-sub[b-727uipbcxl] {
    font-size: 11px;
    color: #94a3b8;
}

/* Active Step */
.step-indicator.active .step-circle[b-727uipbcxl] {
    background: #e8730c;
    color: white;
    box-shadow: 0 0 0 4px rgba(232, 115, 12, 0.2), 0 4px 10px rgba(232, 115, 12, 0.3);
}

.step-indicator.active .step-name[b-727uipbcxl] {
    color: #0f172a;
    font-weight: 800;
}

/* Completed Step */
.step-indicator.completed .step-circle[b-727uipbcxl] {
    background: #10b981;
    color: white;
}

.step-indicator.completed .step-name[b-727uipbcxl] {
    color: #0f172a;
}

/* Connector Line */
.stepper-connector[b-727uipbcxl] {
    flex: 1;
    height: 3px;
    background: #e2e8f0;
    margin: 0 16px;
    border-radius: 2px;
    transition: background 0.3s;
}

.stepper-connector.filled[b-727uipbcxl] {
    background: #10b981;
}

/* Error Banner */
.step-error-banner[b-727uipbcxl] {
    background: #fef2f2;
    border-bottom: 1px solid #fee2e2;
    padding: 14px 36px;
    color: #b91c1c;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeIn-b-727uipbcxl 0.2s ease-in;
}

@keyframes fadeIn-b-727uipbcxl {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 6. FORM BODY */
.form-body-wrapper[b-727uipbcxl] {
    padding: 36px 40px;
}

.step-content-pane[b-727uipbcxl] {
    animation: fadeIn-b-727uipbcxl 0.25s ease-out;
}

.step-title-box[b-727uipbcxl] {
    margin-bottom: 28px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
}

.step-title-box h2[b-727uipbcxl] {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
}

.step-title-box p[b-727uipbcxl] {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

/* 7. PHOTO UPLOAD CARD */
.photo-upload-card[b-727uipbcxl] {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1.5px dashed #cbd5e1;
    border-radius: 18px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 30px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.photo-upload-card:hover[b-727uipbcxl] {
    border-color: #e8730c;
    box-shadow: 0 6px 20px rgba(232, 115, 12, 0.08);
}

.photo-avatar-box[b-727uipbcxl] {
    position: relative;
    flex-shrink: 0;
}

.photo-avatar-img[b-727uipbcxl] {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e8730c;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.photo-placeholder-avatar[b-727uipbcxl] {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    border: 3px solid #cbd5e1;
}

.btn-remove-avatar[b-727uipbcxl] {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.15s;
}

.btn-remove-avatar:hover[b-727uipbcxl] {
    transform: scale(1.15);
}

.photo-info-box[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.photo-card-title[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 16px;
}

.badge-recommended[b-727uipbcxl] {
    background: rgba(232, 115, 12, 0.12);
    color: #e8730c;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.photo-card-desc[b-727uipbcxl] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.photo-actions-row[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.btn-upload-photo[b-727uipbcxl] {
    background: #e8730c;
    color: white;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 3px 10px rgba(232, 115, 12, 0.25);
}

.btn-upload-photo:hover[b-727uipbcxl] {
    background: #c95e04;
    transform: translateY(-1px);
}

.btn-clear-photo[b-727uipbcxl] {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-clear-photo:hover[b-727uipbcxl] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.photo-meta-hints[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 2px;
}

.photo-meta-hints i[b-727uipbcxl] {
    color: #10b981;
}

/* 8. FORM INPUTS & GRIDS */
.form-grid-2[b-727uipbcxl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px;
}

.form-grid-3[b-727uipbcxl] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px;
}

.form-group[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-727uipbcxl] {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.form-group .required[b-727uipbcxl] {
    color: #ef4444;
}

.form-control[b-727uipbcxl], .form-select[b-727uipbcxl] {
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: white;
}

.form-control:focus[b-727uipbcxl], .form-select:focus[b-727uipbcxl] {
    border-color: #e8730c;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
    outline: none;
}

.experience-input-wrap[b-727uipbcxl] {
    position: relative;
    display: flex;
    align-items: center;
}

.experience-input-wrap .form-control[b-727uipbcxl] {
    padding-right: 65px;
}

.experience-input-wrap .unit-text[b-727uipbcxl] {
    position: absolute;
    right: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    pointer-events: none;
}

/* 9. CATEGORY SELECTION CARDS */
.categories-selection-grid[b-727uipbcxl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.category-toggle-card[b-727uipbcxl] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.category-toggle-card:hover[b-727uipbcxl] {
    border-color: #cbd5e1;
    background: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.category-toggle-card.selected[b-727uipbcxl] {
    border-color: #e8730c;
    background: rgba(232, 115, 12, 0.04);
    box-shadow: 0 4px 15px rgba(232, 115, 12, 0.12);
}

.cat-checkbox i[b-727uipbcxl] {
    font-size: 18px;
    color: #94a3b8;
    transition: color 0.2s;
}

.category-toggle-card.selected .cat-checkbox i[b-727uipbcxl] {
    color: #e8730c;
}

.cat-icon[b-727uipbcxl] {
    font-size: 22px;
}

.cat-details[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
}

.cat-title[b-727uipbcxl] {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.cat-count[b-727uipbcxl] {
    font-size: 11px;
    color: #64748b;
}

/* 10. SERVICES BREAKDOWN ACCORDION */
.services-breakdown-box[b-727uipbcxl] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    margin-top: 20px;
}

.breakdown-title[b-727uipbcxl] {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.breakdown-groups[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.category-subservices-group[b-727uipbcxl] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.group-heading[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

.btn-select-all[b-727uipbcxl] {
    margin-left: auto;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-select-all:hover[b-727uipbcxl] {
    background: #e8730c;
    color: white;
    border-color: #e8730c;
}

.subservices-checkboxes[b-727uipbcxl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.service-checkbox-label[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

.service-checkbox-label.active[b-727uipbcxl] {
    background: rgba(232, 115, 12, 0.08);
    border-color: #e8730c;
    color: #0f172a;
    font-weight: 600;
}

/* 11. STEP 3 TOGGLE CARDS & ZONES */
.toggle-card-box[b-727uipbcxl] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}

.toggle-card-box.active-toggle[b-727uipbcxl] {
    background: white;
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}

.toggle-icon[b-727uipbcxl] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.toggle-card-box.active-toggle .toggle-icon[b-727uipbcxl] {
    background: #10b981;
    color: white;
}

.toggle-title[b-727uipbcxl] {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.toggle-desc[b-727uipbcxl] {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
}

.zones-selector-box[b-727uipbcxl] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.zones-label[b-727uipbcxl] {
    display: block;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: #0f172a;
}

.zones-pills-grid[b-727uipbcxl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.zone-pill[b-727uipbcxl] {
    background: white;
    border: 1px solid #cbd5e1;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;
}

.zone-pill:hover[b-727uipbcxl] {
    border-color: #e8730c;
}

.zone-pill.selected[b-727uipbcxl] {
    background: rgba(232, 115, 12, 0.08);
    border-color: #e8730c;
    color: #c95e04;
}

.zone-pill.selected i[b-727uipbcxl] {
    color: #e8730c;
}

/* 12. SCHEDULE MATRIX */
.schedule-matrix-wrapper[b-727uipbcxl] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.schedule-matrix-label[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 14px;
}

.schedule-table-responsive[b-727uipbcxl] {
    overflow-x: auto;
}

.schedule-table[b-727uipbcxl] {
    margin: 0;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.schedule-table th[b-727uipbcxl] {
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    padding: 10px 14px;
}

.schedule-table td[b-727uipbcxl] {
    padding: 8px 14px;
    vertical-align: middle;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.slot-check-wrap[b-727uipbcxl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.slot-check-wrap.checked[b-727uipbcxl] {
    background: #ecfdf5;
    color: #065f46;
    font-weight: 700;
}

/* 13. REVIEW SUMMARY CARD (Step 4) */
.portfolio-preview-card[b-727uipbcxl] {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.portfolio-card-head[b-727uipbcxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: gap;
    gap: 16px;
    margin-bottom: 18px;
}

.preview-mini-avatar[b-727uipbcxl] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e8730c;
}

.preview-mini-placeholder[b-727uipbcxl] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.preview-badge-status[b-727uipbcxl] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
}

.portfolio-card-stats-row[b-727uipbcxl] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.stat-pill[b-727uipbcxl] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #334155;
}

/* 14. STEPPER NAVIGATION BAR */
.stepper-nav-bar[b-727uipbcxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}

.btn-step-prev[b-727uipbcxl] {
    background: white;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-step-prev:hover[b-727uipbcxl] {
    background: #f8fafc;
    border-color: #94a3b8;
}

.step-progress-text[b-727uipbcxl] {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
}

.btn-step-next[b-727uipbcxl] {
    background: #0f172a;
    color: white;
    border: none;
    padding: 13px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

.btn-step-next:hover[b-727uipbcxl] {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}

.btn-submit-application[b-727uipbcxl] {
    background: linear-gradient(135deg, #e8730c 0%, #c95e04 100%);
    color: white;
    border: none;
    padding: 13px 32px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(232, 115, 12, 0.35);
}

.btn-submit-application:hover:not(:disabled)[b-727uipbcxl] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 115, 12, 0.45);
}

.btn-submit-application:disabled[b-727uipbcxl] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 15. TRACK / LOOKUP TAB */
.track-lookup-card[b-727uipbcxl] {
    background: white;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.track-header[b-727uipbcxl] {
    text-align: center;
    max-width: 580px;
    margin: 0 auto 30px;
}

.track-icon-badge[b-727uipbcxl] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(232, 115, 12, 0.1);
    color: #e8730c;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.track-header h2[b-727uipbcxl] {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.track-header p[b-727uipbcxl] {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
}

.track-form-box[b-727uipbcxl] {
    max-width: 600px;
    margin: 0 auto;
}

.btn-track-submit[b-727uipbcxl] {
    width: 100%;
    background: #0f172a;
    color: white;
    border: none;
    padding: 13px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-track-submit:hover:not(:disabled)[b-727uipbcxl] {
    background: #1e293b;
}

.application-summary-view[b-727uipbcxl] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
}

.summary-status-header[b-727uipbcxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-ref-tag[b-727uipbcxl] {
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 4px;
}

.status-pill[b-727uipbcxl] {
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.status-pill.status-beklemede[b-727uipbcxl] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.status-pill.status-onaylandi[b-727uipbcxl] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.status-pill.status-reddedildi[b-727uipbcxl] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.admin-feedback-note[b-727uipbcxl] {
    background: white;
    border-left: 4px solid #e8730c;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin-top: 16px;
}

.admin-feedback-note strong[b-727uipbcxl] {
    font-size: 13px;
    color: #0f172a;
}

.admin-feedback-note p[b-727uipbcxl] {
    margin: 4px 0 0;
    font-size: 13px;
    color: #475569;
}

/* 16. RESPONSIVE QUERIES */
@media (max-width: 991px) {
    .hero-benefits-grid[b-727uipbcxl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stepper-header-bar[b-727uipbcxl] {
        padding: 18px 20px;
    }

    .step-sub[b-727uipbcxl] {
        display: none;
    }

    .categories-selection-grid[b-727uipbcxl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid-3[b-727uipbcxl] {
        grid-template-columns: 1fr;
    }

    .zones-pills-grid[b-727uipbcxl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .join-hero-section[b-727uipbcxl] {
        padding: 50px 16px 40px;
    }

    .hero-title[b-727uipbcxl] {
        font-size: 2rem;
    }

    .hero-benefits-grid[b-727uipbcxl] {
        grid-template-columns: 1fr;
    }

    .stepper-header-bar[b-727uipbcxl] {
        padding: 14px 12px;
    }

    .step-name[b-727uipbcxl] {
        display: none;
    }

    .stepper-connector[b-727uipbcxl] {
        margin: 0 8px;
    }

    .photo-upload-card[b-727uipbcxl] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .photo-card-title[b-727uipbcxl] {
        justify-content: center;
    }

    .photo-actions-row[b-727uipbcxl] {
        justify-content: center;
    }

    .photo-meta-hints[b-727uipbcxl] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .form-body-wrapper[b-727uipbcxl] {
        padding: 24px 18px;
    }

    .form-grid-2[b-727uipbcxl] {
        grid-template-columns: 1fr;
    }

    .categories-selection-grid[b-727uipbcxl] {
        grid-template-columns: 1fr;
    }

    .subservices-checkboxes[b-727uipbcxl] {
        grid-template-columns: 1fr;
    }

    .portfolio-card-head[b-727uipbcxl] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 17. OPTIONAL BADGE & FIELD VALIDATION */
.badge-optional[b-727uipbcxl] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-invalid[b-727uipbcxl] {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
    animation: shakeField-b-727uipbcxl 0.3s ease-in-out;
}

@keyframes shakeField-b-727uipbcxl {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.step-nav-inline-error[b-727uipbcxl] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    width: 100%;
    animation: fadeIn-b-727uipbcxl 0.2s ease-in;
}

/* 18. PHOTO CONFIRMATION MODAL */
.photo-modal-backdrop[b-727uipbcxl] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: modalFadeIn-b-727uipbcxl 0.2s ease-out;
}

.photo-modal-card[b-727uipbcxl] {
    background: white;
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    border: 1px solid #e2e8f0;
    animation: modalScaleUp-b-727uipbcxl 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-modal-icon[b-727uipbcxl] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.photo-modal-title[b-727uipbcxl] {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
}

.photo-modal-text[b-727uipbcxl] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 24px;
}

.photo-modal-actions[b-727uipbcxl] {
    display: flex;
    gap: 12px;
}

.btn-modal-cancel[b-727uipbcxl] {
    flex: 1;
    background: #f1f5f9;
    color: #475569;
    border: none;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-modal-cancel:hover[b-727uipbcxl] {
    background: #e2e8f0;
}

.btn-modal-confirm[b-727uipbcxl] {
    flex: 1;
    background: #ef4444;
    color: white;
    border: none;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: background 0.2s, transform 0.15s;
}

.btn-modal-confirm:hover[b-727uipbcxl] {
    background: #dc2626;
    transform: translateY(-1px);
}

@keyframes modalFadeIn-b-727uipbcxl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalScaleUp-b-727uipbcxl {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* 19. ADDITIVE CATEGORY EXPERIENCE SECTION */
.additive-experience-wrapper[b-727uipbcxl] {
    background: #f8fafc;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

.additive-section-header[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.additive-header-icon[b-727uipbcxl] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0f172a;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.additive-header-title[b-727uipbcxl] {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}

.additive-header-subtitle[b-727uipbcxl] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.additive-cards-list[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-experience-card[b-727uipbcxl] {
    background: white;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.category-experience-card:hover[b-727uipbcxl] {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.cat-exp-card-header[b-727uipbcxl] {
    background: #f1f5f9;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
}

.cat-exp-icon[b-727uipbcxl] {
    font-size: 24px;
}

.cat-exp-name[b-727uipbcxl] {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.cat-exp-hint[b-727uipbcxl] {
    font-size: 11.5px;
    color: #64748b;
}

.btn-remove-cat-exp[b-727uipbcxl] {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #dc2626;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-remove-cat-exp:hover[b-727uipbcxl] {
    background: #fee2e2;
    border-color: #fca5a5;
}

.cat-exp-card-body[b-727uipbcxl] {
    padding: 20px;
}

.cat-exp-label[b-727uipbcxl] {
    font-size: 13px;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.cat-exp-textarea[b-727uipbcxl] {
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 10px 14px;
}

.cat-exp-textarea:focus[b-727uipbcxl] {
    border-color: #e8730c;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
}

.cat-exp-subservices[b-727uipbcxl] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
}

.subservices-header-row[b-727uipbcxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.subservices-title[b-727uipbcxl] {
    font-size: 12.5px;
    color: #475569;
}

.btn-select-all-link[b-727uipbcxl] {
    background: none;
    border: none;
    color: #e8730c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.btn-select-all-link:hover[b-727uipbcxl] {
    text-decoration: underline;
}

.subservices-checkbox-grid[b-727uipbcxl] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subservice-pill-label[b-727uipbcxl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #cbd5e1;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

.subservice-pill-label input[b-727uipbcxl] {
    cursor: pointer;
}

.subservice-pill-label.active[b-727uipbcxl] {
    background: #fff7ed;
    border-color: #e8730c;
    color: #9a3412;
}

.no-category-alert[b-727uipbcxl] {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

/* 20. REVIEW SUMMARY BREAKDOWN */
.summary-exp-breakdown[b-727uipbcxl] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

.summary-exp-title[b-727uipbcxl] {
    font-size: 13.5px;
    margin-bottom: 12px;
    color: #0f172a;
}

.summary-exp-grid[b-727uipbcxl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-exp-item[b-727uipbcxl] {
    background: white;
    border-radius: 8px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
}

.summary-exp-cat[b-727uipbcxl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #0f172a;
}

.summary-exp-desc[b-727uipbcxl] {
    font-size: 12px;
    color: #64748b;
    margin: 6px 0 0;
    font-style: italic;
}

/* _content/Handman.Web/Components/Pages/HizmetBolgeleri.razor.rz.scp.css */
.service-areas-page[b-5rcelbxwod] {
    background-color: #f8fafc;
    color: #1e293b;
    font-family: inherit;
    padding-bottom: 2rem;
}

/* ─── HERO BANNER ─── */
.areas-hero[b-5rcelbxwod] {
    background: linear-gradient(135deg, #0b1325 0%, #1e293b 60%, #0f172a 100%);
    color: #ffffff;
    padding: 3.5rem 1.5rem 4rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.areas-hero[b-5rcelbxwod]::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(232, 115, 12, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.areas-hero-container[b-5rcelbxwod] {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.areas-hero-badge[b-5rcelbxwod] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(232, 115, 12, 0.15);
    border: 1px solid rgba(232, 115, 12, 0.4);
    color: #fb923c;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
}

.areas-hero-title[b-5rcelbxwod] {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #ffffff;
}

.areas-hero-desc[b-5rcelbxwod] {
    font-size: 1.05rem;
    color: #94a3b8;
    max-width: 720px;
    margin: 0 auto 2.25rem auto;
    line-height: 1.6;
}

/* ─── POSTCODE CHECKER BOX ─── */
.postcode-checker-box[b-5rcelbxwod] {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.75rem 2rem;
    max-width: 680px;
    margin: 0 auto;
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.checker-label[b-5rcelbxwod] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 0.85rem;
}

.checker-input-group[b-5rcelbxwod] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.checker-input[b-5rcelbxwod] {
    flex: 1;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 0.85rem 1.15rem;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
}

.checker-input:focus[b-5rcelbxwod] {
    background: #ffffff;
    border-color: #e8730c;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
}

.checker-btn[b-5rcelbxwod] {
    background: linear-gradient(135deg, #e8730c 0%, #c25e00 100%);
    color: #ffffff;
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.checker-btn:hover[b-5rcelbxwod] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 115, 12, 0.3);
}

/* ─── CHECKER RESULT CARD ─── */
.checker-result-card[b-5rcelbxwod] {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    text-align: left;
    animation: fadeInResult-b-5rcelbxwod 0.3s ease-out;
}

@keyframes fadeInResult-b-5rcelbxwod {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-success[b-5rcelbxwod] {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
}

.result-info[b-5rcelbxwod] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
}

.result-header[b-5rcelbxwod] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.result-icon[b-5rcelbxwod] {
    font-size: 1.6rem;
    line-height: 1;
}

.success-icon[b-5rcelbxwod] {
    color: #16a34a;
}

.info-icon[b-5rcelbxwod] {
    color: #0284c7;
}

.result-title[b-5rcelbxwod] {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.2rem 0;
    color: #0f172a;
}

.result-sub[b-5rcelbxwod] {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}

.result-stats[b-5rcelbxwod] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.r-stat[b-5rcelbxwod] {
    display: flex;
    flex-direction: column;
}

.r-stat-label[b-5rcelbxwod] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.r-stat-val[b-5rcelbxwod] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.result-action[b-5rcelbxwod] {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ─── HIGHLIGHTS BAR ─── */
.areas-highlights[b-5rcelbxwod] {
    max-width: 1140px;
    margin: -1.75rem auto 2.5rem auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    position: relative;
    z-index: 5;
}

.highlight-item[b-5rcelbxwod] {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease;
}

.highlight-item:hover[b-5rcelbxwod] {
    transform: translateY(-2px);
}

.h-icon[b-5rcelbxwod] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.h-text[b-5rcelbxwod] {
    display: flex;
    flex-direction: column;
}

.h-text strong[b-5rcelbxwod] {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
}

.h-text span[b-5rcelbxwod] {
    font-size: 0.78rem;
    color: #64748b;
}

/* ─── MAIN CONTAINER & HEADERS ─── */
.areas-main-container[b-5rcelbxwod] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem 1.25rem;
}

.section-title-wrap[b-5rcelbxwod] {
    text-align: center;
    margin-bottom: 2rem;
}

.sub-badge[b-5rcelbxwod] {
    display: inline-block;
    color: #ea580c;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.35rem;
}

.section-title-wrap h2[b-5rcelbxwod] {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.section-title-wrap p[b-5rcelbxwod] {
    color: #64748b;
    font-size: 0.95rem;
    max-width: 650px;
    margin: 0 auto;
}

/* ─── FILTER PILLS ─── */
.district-filter-pills[b-5rcelbxwod] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.25rem;
}

.d-pill[b-5rcelbxwod] {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0.6rem 1.15rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.d-pill:hover[b-5rcelbxwod] {
    color: #0f172a;
    border-color: #94a3b8;
}

.d-pill.active[b-5rcelbxwod] {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.2);
}

/* ─── DISTRICT CARDS GRID ─── */
.district-cards-grid[b-5rcelbxwod] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

.district-card[b-5rcelbxwod] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
    scroll-margin-top: 90px;
}

.district-card:hover[b-5rcelbxwod] {
    border-color: #fdba74;
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -5px rgba(232, 115, 12, 0.12);
}

.district-card-header[b-5rcelbxwod] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.d-header-left[b-5rcelbxwod] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.district-icon[b-5rcelbxwod] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.district-title[b-5rcelbxwod] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}

.district-tagline[b-5rcelbxwod] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

.speed-badge[b-5rcelbxwod] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* Postcode badges row */
.postcode-tags-row[b-5rcelbxwod] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.tags-label[b-5rcelbxwod] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.postcode-pill[b-5rcelbxwod] {
    background: #0f172a;
    color: #f8fafc;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}

.district-neighborhoods[b-5rcelbxwod] {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
    background: #f8fafc;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    margin-bottom: 1rem;
}

.district-services-box[b-5rcelbxwod] {
    margin-bottom: 1.25rem;
}

.d-serv-title[b-5rcelbxwod] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.d-serv-list[b-5rcelbxwod] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.d-serv-list li[b-5rcelbxwod] {
    font-size: 0.85rem;
    color: #334155;
    display: flex;
    align-items: center;
}

/* Card Footer */
.district-card-footer[b-5rcelbxwod] {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.callout-note[b-5rcelbxwod] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}

.card-btns[b-5rcelbxwod] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-card-quote[b-5rcelbxwod] {
    flex: 1;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.btn-card-quote:hover[b-5rcelbxwod] {
    background: #e8730c;
    color: #ffffff;
}

.btn-card-call[b-5rcelbxwod], .btn-card-wa[b-5rcelbxwod] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-card-call[b-5rcelbxwod] {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.btn-card-call:hover[b-5rcelbxwod] {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-card-wa[b-5rcelbxwod] {
    background: #25d366;
    color: #ffffff;
}

.btn-card-wa:hover[b-5rcelbxwod] {
    background: #22bf5b;
}

/* ─── KENT ADVANTAGES SECTION ─── */
.kent-advantages-section[b-5rcelbxwod] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 3rem 1.25rem;
}

.advantages-grid[b-5rcelbxwod] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.adv-card[b-5rcelbxwod] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    transition: transform 0.2s ease;
}

.adv-card:hover[b-5rcelbxwod] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
}

.adv-icon[b-5rcelbxwod] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.15rem;
}

.bg-orange-soft[b-5rcelbxwod] {
    background: #fff7ed;
    color: #ea580c;
}

.bg-blue-soft[b-5rcelbxwod] {
    background: #f0f9ff;
    color: #0284c7;
}

.bg-green-soft[b-5rcelbxwod] {
    background: #f0fdf4;
    color: #16a34a;
}

.bg-purple-soft[b-5rcelbxwod] {
    background: #faf5ff;
    color: #9333ea;
}

.adv-card h4[b-5rcelbxwod] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.adv-card p[b-5rcelbxwod] {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

/* ─── POSTCODE TABLE SECTION ─── */
.postcode-table-section[b-5rcelbxwod] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem 1.25rem 3rem 1.25rem;
}

.coverage-table th[b-5rcelbxwod] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
    padding: 0.85rem 1rem;
}

.coverage-table td[b-5rcelbxwod] {
    padding: 0.85rem 1rem;
}

/* ─── FAQ SECTION ─── */
.areas-faq-section[b-5rcelbxwod] {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem 1.25rem;
}

.faq-container[b-5rcelbxwod] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item[b-5rcelbxwod] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.faq-question[b-5rcelbxwod] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.6rem;
}

.faq-answer[b-5rcelbxwod] {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    padding-left: 1.85rem;
}

/* ─── BOTTOM CTA BANNER ─── */
.areas-cta-banner[b-5rcelbxwod] {
    max-width: 1140px;
    margin: 0 auto 3rem auto;
    padding: 0 1.25rem;
}

.cta-inner[b-5rcelbxwod] {
    background: linear-gradient(135deg, #0b1325 0%, #1e293b 100%);
    border-radius: 24px;
    padding: 2.75rem 2.5rem;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2);
}

.cta-text h2[b-5rcelbxwod] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.cta-text p[b-5rcelbxwod] {
    color: #cbd5e1;
    font-size: 0.95rem;
    margin: 0;
    max-width: 500px;
}

.cta-actions[b-5rcelbxwod] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.cta-btn-call[b-5rcelbxwod], .cta-btn-wa[b-5rcelbxwod], .cta-btn-quote[b-5rcelbxwod] {
    padding: 0.85rem 1.4rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.cta-btn-call[b-5rcelbxwod] {
    background: #ffffff;
    color: #0f172a;
}

.cta-btn-call:hover[b-5rcelbxwod] {
    background: #f1f5f9;
}

.cta-btn-wa[b-5rcelbxwod] {
    background: #25d366;
    color: #ffffff;
}

.cta-btn-wa:hover[b-5rcelbxwod] {
    background: #20b858;
}

.cta-btn-quote[b-5rcelbxwod] {
    background: linear-gradient(135deg, #e8730c 0%, #c25e00 100%);
    color: #ffffff;
}

.cta-btn-quote:hover[b-5rcelbxwod] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 115, 12, 0.4);
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 768px) {
    .areas-hero-title[b-5rcelbxwod] {
        font-size: 1.85rem;
    }

    .areas-hero[b-5rcelbxwod] {
        padding: 2.5rem 1rem 3.5rem 1rem;
    }

    .postcode-checker-box[b-5rcelbxwod] {
        padding: 1.25rem 1rem;
    }

    .checker-input-group[b-5rcelbxwod] {
        flex-direction: column;
    }

    .checker-btn[b-5rcelbxwod] {
        width: 100%;
        justify-content: center;
    }

    .district-cards-grid[b-5rcelbxwod] {
        grid-template-columns: 1fr;
    }

    .cta-inner[b-5rcelbxwod] {
        padding: 1.75rem 1.25rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-actions[b-5rcelbxwod] {
        width: 100%;
    }

    .cta-btn-call[b-5rcelbxwod], .cta-btn-wa[b-5rcelbxwod], .cta-btn-quote[b-5rcelbxwod] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/Handman.Web/Components/Pages/HizmetDetay.razor.rz.scp.css */
/* HandMan – HizmetDetay.razor.css */

.service-detail-container[b-dmxb5397g4] {
    padding: 15px 20px 50px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* 1. Breadcrumbs */
.breadcrumb-nav[b-dmxb5397g4] {
    margin-bottom: 5px;
}

.breadcrumb-list[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

.breadcrumb-list a[b-dmxb5397g4] {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb-list a:hover[b-dmxb5397g4] {
    color: var(--color-secondary);
}

.breadcrumb-list .separator[b-dmxb5397g4] {
    color: #cbd5e1;
    font-size: 11px;
}

.breadcrumb-list .current[b-dmxb5397g4] {
    color: #0f172a;
    font-weight: 700;
}

/* 2. Hero Header */
.service-hero-header[b-dmxb5397g4] {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}

.service-title-row[b-dmxb5397g4] {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.service-hero-icon[b-dmxb5397g4] {
    font-size: 40px;
    line-height: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px;
    border-radius: 12px;
}

.service-main-title[b-dmxb5397g4] {
    font-size: 32px;
    font-weight: 900;
    color: var(--color-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.service-short-desc[b-dmxb5397g4] {
    font-size: 15px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

.service-trust-badges[b-dmxb5397g4] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.trust-badge[b-dmxb5397g4] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 3. İki Kolonlu Ana Düzen */
.service-detail-layout[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.service-main-content[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Medya Kartı (Foto & Video Sekmeleri) */
.service-media-card[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.media-tabs-header[b-dmxb5397g4] {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.media-tab-btn[b-dmxb5397g4] {
    padding: 12px 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    border-bottom: 2px solid transparent;
}

.media-tab-btn:hover[b-dmxb5397g4] {
    color: var(--color-primary);
}

.media-tab-btn.active[b-dmxb5397g4] {
    color: var(--color-secondary);
    background: #ffffff;
    border-bottom-color: var(--color-secondary);
}

.media-stage-box[b-dmxb5397g4] {
    width: 100%;
    min-height: 400px;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-viewer-frame[b-dmxb5397g4],
.video-player-frame[b-dmxb5397g4] {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-featured-img[b-dmxb5397g4] {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
}

.service-video-player[b-dmxb5397g4] {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: contain;
}

.media-thumbnails-strip[b-dmxb5397g4] {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: #ffffff;
    overflow-x: auto;
    border-top: 1px solid #f1f5f9;
}

.thumb-item[b-dmxb5397g4] {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.thumb-item:hover[b-dmxb5397g4],
.thumb-item.active[b-dmxb5397g4] {
    border-color: var(--color-secondary);
    transform: scale(1.05);
}

.thumb-item img[b-dmxb5397g4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Açıklama & İş Süreci Kartı */
.service-description-card[b-dmxb5397g4],
.scope-comparison-card[b-dmxb5397g4],
.service-faq-card[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.content-section-title[b-dmxb5397g4] {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.process-intro[b-dmxb5397g4] {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.steps-flow[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.step-flow-item[b-dmxb5397g4] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.step-num[b-dmxb5397g4] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-body h4[b-dmxb5397g4] {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.step-body p[b-dmxb5397g4] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.rich-html-output[b-dmxb5397g4] {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}

/* Kapsam Karşılaştırma Tablosu */
.scope-table-responsive[b-dmxb5397g4] {
    overflow-x: auto;
}

.scope-table[b-dmxb5397g4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.scope-table th[b-dmxb5397g4] {
    background: #f8fafc;
    padding: 12px 16px;
    font-weight: 800;
    color: var(--color-primary);
    border-bottom: 2px solid #e2e8f0;
}

.scope-table td[b-dmxb5397g4] {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.task-title-cell[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.extra-fee-badge[b-dmxb5397g4] {
    background: #fee2e2;
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.scope-icon[b-dmxb5397g4] {
    font-size: 16px;
}

.highlight-col[b-dmxb5397g4] {
    background-color: #fffaf5;
}

/* FAQ */
.faq-accordion[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item[b-dmxb5397g4] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 18px;
    background: #f8fafc;
}

.faq-question[b-dmxb5397g4] {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 6px 0;
}

.faq-answer[b-dmxb5397g4] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Sağ Kolon: Paket Seçim & Randevu Kartı (Sticky) */
.service-booking-sidebar[b-dmxb5397g4] {
    position: relative;
}

.sticky-sidebar-wrapper[b-dmxb5397g4] {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.packages-selector-container[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.packages-heading[b-dmxb5397g4] {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.packages-sub[b-dmxb5397g4] {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 15px 0;
}

.packages-list[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.package-card[b-dmxb5397g4] {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.package-card:hover[b-dmxb5397g4] {
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.package-card.selected[b-dmxb5397g4] {
    border-color: var(--color-secondary);
    background: #fffaf5;
    box-shadow: 0 6px 18px rgba(232, 115, 12, 0.12);
}

.package-card.popular[b-dmxb5397g4] {
    border-color: #fdba74;
}

.package-card.popular.selected[b-dmxb5397g4] {
    border-color: var(--color-secondary);
}

.package-popular-ribbon[b-dmxb5397g4] {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-secondary);
    color: white;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 0 0 0 8px;
    letter-spacing: 0.5px;
}

.package-header[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.pkg-type-badge[b-dmxb5397g4] {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
}

.pkg-price-row[b-dmxb5397g4] {
    display: flex;
    align-items: baseline;
    color: var(--color-secondary);
}

.pkg-currency[b-dmxb5397g4] {
    font-size: 14px;
    font-weight: 800;
}

.pkg-price[b-dmxb5397g4] {
    font-size: 22px;
    font-weight: 900;
}

.pkg-duration[b-dmxb5397g4] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.pkg-desc[b-dmxb5397g4] {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.btn-select-package[b-dmxb5397g4] {
    width: 100%;
    padding: 8px;
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-select-package.selected-btn[b-dmxb5397g4] {
    background: var(--color-secondary);
    color: white;
}

/* Posta Kodu & Randevu Kartı */
.booking-confirmation-box[b-dmxb5397g4] {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.booking-box-title[b-dmxb5397g4] {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-box-desc[b-dmxb5397g4] {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.postcode-input-group[b-dmxb5397g4] {
    display: flex;
    gap: 8px;
}

.postcode-input[b-dmxb5397g4] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    outline: none;
}

.postcode-input:focus[b-dmxb5397g4] {
    border-color: var(--color-secondary);
}

.btn-check-postcode[b-dmxb5397g4] {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-check-postcode:hover[b-dmxb5397g4] {
    background: var(--color-primary-hover);
}

.postcode-status[b-dmxb5397g4] {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.3;
}

.status-success[b-dmxb5397g4] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.status-warning[b-dmxb5397g4] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* Seçilen Paket Özeti */
.selected-summary-card[b-dmxb5397g4] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-line[b-dmxb5397g4] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
}

.summary-line.total[b-dmxb5397g4] {
    border-top: 1px dashed #cbd5e1;
    padding-top: 6px;
    margin-top: 2px;
    font-weight: 800;
    color: var(--color-primary);
    font-size: 14px;
}

.summary-line.total .price[b-dmxb5397g4] {
    color: var(--color-secondary);
    font-size: 18px;
}

.btn-book-appointment[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: var(--color-secondary);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.15s;
    box-shadow: 0 4px 15px rgba(232, 115, 12, 0.25);
}

.btn-book-appointment:hover[b-dmxb5397g4] {
    background: var(--color-secondary-hover);
    color: white;
    text-decoration: none;
}

.instant-phone-contact[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    color: #64748b;
}

.phone-call-link[b-dmxb5397g4] {
    font-weight: 900;
    color: var(--color-secondary);
    text-decoration: none;
    font-size: 14px;
}

/* Loading & Not Found */
.service-loading-container[b-dmxb5397g4],
.service-not-found[b-dmxb5397g4] {
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner[b-dmxb5397g4] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin-b-dmxb5397g4 0.8s linear infinite;
    margin: 0 auto 16px auto;
}

@keyframes spin-b-dmxb5397g4 {
    to { transform: rotate(360deg); }
}

.not-found-icon[b-dmxb5397g4] {
    font-size: 48px;
    margin-bottom: 16px;
}

.btn-primary-handman[b-dmxb5397g4] {
    display: inline-block;
    background: var(--color-secondary);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
    margin-top: 15px;
}

/* Teklif Talep Kartı (Quote Request Form) */
.quote-request-card[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quote-header[b-dmxb5397g4] {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
}

.quote-badge[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0f172a;
    color: #38bdf8;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.quote-title[b-dmxb5397g4] {
    font-size: 20px;
    font-weight: 900;
    color: var(--color-primary);
    margin: 0 0 6px 0;
}

.quote-desc[b-dmxb5397g4] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.45;
}

.quote-form-body[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quote-form-group[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quote-form-group label[b-dmxb5397g4] {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
}

.quote-input[b-dmxb5397g4],
.quote-textarea[b-dmxb5397g4] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: all 0.15s;
    background: #f8fafc;
}

.quote-input:focus[b-dmxb5397g4],
.quote-textarea:focus[b-dmxb5397g4] {
    border-color: var(--color-secondary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.12);
}

.quote-textarea[b-dmxb5397g4] {
    resize: vertical;
    min-height: 70px;
}

.quote-error-text[b-dmxb5397g4] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.btn-submit-quote[b-dmxb5397g4] {
    background: var(--color-secondary);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(232, 115, 12, 0.25);
}

.btn-submit-quote:hover[b-dmxb5397g4] {
    background: #d4630a;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(232, 115, 12, 0.35);
}

.quote-guarantee-note[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    text-align: center;
}

.quote-success-banner[b-dmxb5397g4] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.quote-success-banner h4[b-dmxb5397g4] {
    font-size: 16px;
    font-weight: 800;
    color: #065f46;
    margin: 0;
}

.quote-success-banner p[b-dmxb5397g4] {
    font-size: 13px;
    color: #047857;
    margin: 0;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 991px) {
    .service-detail-layout[b-dmxb5397g4] {
        grid-template-columns: 1fr;
    }
    .sticky-sidebar-wrapper[b-dmxb5397g4] {
        position: static;
    }
}

@media (max-width: 576px) {
    .service-title-row[b-dmxb5397g4] {
        flex-direction: column;
    }
    .service-hero-icon[b-dmxb5397g4] {
        font-size: 32px;
    }
    .service-main-title[b-dmxb5397g4] {
        font-size: 24px;
    }
}

/* ==========================================================================
   BOOKING POPUP MODAL & AUTH MODAL STYLES
   ========================================================================== */
.booking-modal-overlay[b-dmxb5397g4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeInModal-b-dmxb5397g4 0.2s ease-out;
}

@keyframes fadeInModal-b-dmxb5397g4 {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.booking-modal-card[b-dmxb5397g4],
.auth-popup-card[b-dmxb5397g4] {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 740px;
    max-height: 92vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #e2e8f0;
}

.booking-modal-header[b-dmxb5397g4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 20px 20px 0 0;
}

.modal-header-titles h3[b-dmxb5397g4] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-header-titles .modal-pkg-badge[b-dmxb5397g4] {
    display: inline-block;
    background: rgba(232, 115, 12, 0.25);
    color: #f97316;
    border: 1px solid #e8730c;
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 2px 8px;
    font-weight: 600;
}

.modal-close-btn[b-dmxb5397g4] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.2s;
}

.modal-close-btn:hover[b-dmxb5397g4] {
    background: rgba(255, 255, 255, 0.25);
}

/* Step Wizard Progress Bar */
.modal-step-wizard[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px;
    gap: 8px;
}

.wizard-step-item[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
}

.wizard-step-item.active[b-dmxb5397g4] {
    color: #e8730c;
}

.wizard-step-item.completed[b-dmxb5397g4] {
    color: #10b981;
}

.step-num-circle[b-dmxb5397g4] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.wizard-step-item.active .step-num-circle[b-dmxb5397g4] {
    background: #e8730c;
    color: #ffffff;
}

.wizard-step-item.completed .step-num-circle[b-dmxb5397g4] {
    background: #10b981;
    color: #ffffff;
}

.booking-modal-body[b-dmxb5397g4] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.step-intro-title[b-dmxb5397g4] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.step-intro-desc[b-dmxb5397g4] {
    font-size: 0.86rem;
    color: #64748b;
    margin: 0;
}

/* 30-Day Calendar Grid */
.calendar-30days-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
}

.calendar-day-tile[b-dmxb5397g4] {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.calendar-day-tile:hover:not(.dolu)[b-dmxb5397g4] {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calendar-day-tile.selected[b-dmxb5397g4] {
    border-color: #e8730c !important;
    background: #fff7ed !important;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.2) !important;
}

.calendar-day-tile.dolu[b-dmxb5397g4] {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.55;
    cursor: not-allowed;
}

.day-tile-name[b-dmxb5397g4] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}

.day-tile-num[b-dmxb5397g4] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.day-tile-month[b-dmxb5397g4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.day-tile-status[b-dmxb5397g4] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

.day-tile-status.available[b-dmxb5397g4] {
    background: #dcfce7;
    color: #15803d;
}

.day-tile-status.full[b-dmxb5397g4] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Time Slots Grid (09:00 - 19:00) */
.time-slots-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px;
}

.time-slot-tile[b-dmxb5397g4] {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.time-slot-tile:hover:not(.dolu)[b-dmxb5397g4] {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.time-slot-tile.selected[b-dmxb5397g4] {
    border-color: #e8730c !important;
    background: #fff7ed !important;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.2) !important;
}

.time-slot-tile.dolu[b-dmxb5397g4] {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.5;
    cursor: not-allowed;
}

.slot-time-text[b-dmxb5397g4] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.slot-status-badge[b-dmxb5397g4] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.slot-status-badge.available[b-dmxb5397g4] {
    background: #dcfce7;
    color: #15803d;
}

.slot-status-badge.full[b-dmxb5397g4] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Step 3: Address Form */
.booking-form-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.full-span[b-dmxb5397g4] {
    grid-column: span 2;
}

.booking-field-group[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-field-group label[b-dmxb5397g4] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-input[b-dmxb5397g4] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.92rem;
    transition: all 0.2s;
}

.booking-input:focus[b-dmxb5397g4] {
    outline: none;
    border-color: #e8730c;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
}

/* Step 4: Summary & Payment */
.booking-summary-box[b-dmxb5397g4] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-item-row[b-dmxb5397g4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #475569;
}

.summary-item-row.highlight[b-dmxb5397g4] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    border-top: 1px solid #cbd5e1;
    padding-top: 10px;
    margin-top: 4px;
}

.summary-item-row.highlight .highlight-price[b-dmxb5397g4] {
    color: #e8730c;
}

.payment-methods-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .payment-methods-grid[b-dmxb5397g4] {
        grid-template-columns: 1fr;
    }
}

.payment-method-card[b-dmxb5397g4] {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.payment-method-card:hover[b-dmxb5397g4] {
    border-color: #cbd5e1;
}

.payment-method-card.selected[b-dmxb5397g4] {
    border-color: #e8730c;
    background: #fff7ed;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
}

.payment-card-icon[b-dmxb5397g4] {
    font-size: 1.6rem;
    color: #334155;
}

.payment-method-card.selected .payment-card-icon[b-dmxb5397g4] {
    color: #e8730c;
}

.payment-card-title[b-dmxb5397g4] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.payment-card-desc[b-dmxb5397g4] {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.3;
}

.agreement-checkbox-row[b-dmxb5397g4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f1f5f9;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #334155;
    cursor: pointer;
}

.agreement-checkbox-row input[b-dmxb5397g4] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #e8730c;
}

/* Modal Action Footer */
.booking-modal-footer[b-dmxb5397g4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 20px 20px;
}

.btn-modal-back[b-dmxb5397g4] {
    padding: 10px 18px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-modal-back:hover[b-dmxb5397g4] {
    background: #f1f5f9;
}

.btn-modal-next[b-dmxb5397g4] {
    padding: 11px 24px;
    background: #e8730c;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    margin-left: auto;
}

.btn-modal-next:hover:not(:disabled)[b-dmxb5397g4] {
    background: #c95e05;
}

.btn-modal-next:disabled[b-dmxb5397g4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Step 5: Success Card */
.booking-success-wrapper[b-dmxb5397g4] {
    text-align: center;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.success-badge-icon[b-dmxb5397g4] {
    width: 68px;
    height: 68px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

.booking-ref-box[b-dmxb5397g4] {
    background: #f1f5f9;
    border: 2px dashed #94a3b8;
    padding: 12px 24px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-ref-box small[b-dmxb5397g4] {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
}

.booking-ref-box strong[b-dmxb5397g4] {
    font-size: 1.4rem;
    color: #0f172a;
    letter-spacing: 1px;
}

/* Auth Required Dialog */
.auth-popup-card[b-dmxb5397g4] {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.3);
    overflow: hidden;
    animation: fadeInModal-b-dmxb5397g4 0.2s ease-out;
}

.auth-popup-tabs[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.auth-tab-btn[b-dmxb5397g4] {
    padding: 14px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.95rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab-btn.active[b-dmxb5397g4] {
    background: #ffffff;
    color: #e8730c;
    border-bottom: 3px solid #e8730c;
}

/* Postcode Lookup & Address Selector */
.postcode-lookup-row[b-dmxb5397g4] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.btn-lookup-address[b-dmxb5397g4] {
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.2s;
}
.btn-lookup-address:hover:not(:disabled)[b-dmxb5397g4] {
    background: #e8730c;
}
.btn-lookup-address:disabled[b-dmxb5397g4] {
    opacity: 0.6;
    cursor: not-allowed;
}
.address-select-group[b-dmxb5397g4] {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    padding: 12px 14px;
    border-radius: 10px;
}
.address-dropdown-select[b-dmxb5397g4] {
    width: 100%;
    border: 2px solid #e8730c;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0f172a;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
}

/* ========================================================
   MOBİL VE TABLET DÜZENİ (<= 991px)
   İstenen Sıralama:
   1. Hizmet Başlığı (service-hero-header)
   2. Resim / Medya (service-media-card)
   3. Paket Seçimi (packages-selector-container veya quote-request-card)
   4. Booking Alanı (booking-confirmation-box)
   5. Açıklama Alanı (service-description-card, scope-comparison-card, service-faq-card)
   ======================================================== */
@media (max-width: 991px) {
    .service-detail-container[b-dmxb5397g4] {
        padding: 12px 14px 40px 14px;
        gap: 18px;
    }

    .service-hero-header[b-dmxb5397g4] {
        padding-bottom: 16px;
    }

    .service-title-row[b-dmxb5397g4] {
        gap: 12px;
    }

    .service-hero-icon[b-dmxb5397g4] {
        font-size: 32px;
        padding: 8px;
        border-radius: 10px;
    }

    .service-main-title[b-dmxb5397g4] {
        font-size: 22px;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    .service-short-desc[b-dmxb5397g4] {
        font-size: 13.5px;
        line-height: 1.45;
    }

    .service-trust-badges[b-dmxb5397g4] {
        gap: 8px;
        margin-top: 12px;
    }

    .trust-badge[b-dmxb5397g4] {
        font-size: 11px;
        padding: 4px 10px;
    }

    /* Ana layout flex-column yapısına geçer ve alt sarmalayıcılar contents olur */
    .service-detail-layout[b-dmxb5397g4] {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .service-main-content[b-dmxb5397g4] {
        display: contents;
    }

    .service-booking-sidebar[b-dmxb5397g4] {
        display: contents;
    }

    .sticky-sidebar-wrapper[b-dmxb5397g4] {
        display: contents;
    }

    /* 1. Resim & Medya Alanı */
    .service-media-card[b-dmxb5397g4] {
        order: 1;
        width: 100%;
    }

    /* 2. Teklif İsteme Kartı (Mobilde hemen başta görünmeli) */
    .quote-request-card[b-dmxb5397g4] {
        order: 2;
        width: 100%;
    }

    /* 3. Paket Seçimi / Kapsam Rehberi */
    .packages-selector-container[b-dmxb5397g4] {
        order: 3;
        width: 100%;
    }

    /* 4. Booking / Randevu Alanı */
    .booking-confirmation-box[b-dmxb5397g4] {
        order: 4;
        width: 100%;
    }

    /* 5. Sıkça Sorulan Sorular */
    .service-faq-card[b-dmxb5397g4] {
        order: 5;
        width: 100%;
    }

    /* 6. Açıklama & İş Süreci Alanı (En altta) */
    .service-description-card[b-dmxb5397g4] {
        order: 6;
        width: 100%;
    }

    /* 7. Kent Bölgesi Kapsama Alanı (En altta) */
    .kent-coverage-card[b-dmxb5397g4] {
        order: 7;
        width: 100%;
    }

    /* Mobilde paket kartları ve butonların touch optimizasyonu */
    .packages-list[b-dmxb5397g4] {
        gap: 10px;
    }

    .package-card[b-dmxb5397g4] {
        padding: 12px 14px;
    }

    .booking-confirmation-box[b-dmxb5397g4] {
        padding: 16px;
    }

    .btn-book-appointment[b-dmxb5397g4] {
        padding: 14px 16px;
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .service-detail-container[b-dmxb5397g4] {
        padding: 10px 10px 35px 10px;
    }

    .service-main-title[b-dmxb5397g4] {
        font-size: 20px;
    }

    .service-hero-icon[b-dmxb5397g4] {
        font-size: 28px;
        padding: 6px;
    }

    .scope-table th[b-dmxb5397g4], .scope-table td[b-dmxb5397g4] {
        padding: 8px 6px;
        font-size: 12px;
    }
}

/* ========================================================
   HIGH DEMAND & PRIORITY TRADE DISPATCH STYLES
   ======================================================== */
.priority-dispatch-banner[b-dmxb5397g4] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1.5px solid #e8730c;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(232, 115, 12, 0.15);
}

.dispatch-banner-header[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.dispatch-pulse-badge[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
}

.pulse-dot[b-dmxb5397g4] {
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 8px #ef4444;
    animation: dispatchPulse-b-dmxb5397g4 1.5s infinite;
}

@keyframes dispatchPulse-b-dmxb5397g4 {
    0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.dispatch-guarantee-tag[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #38bdf8;
    font-size: 12px;
    font-weight: 700;
}

.dispatch-banner-body p[b-dmxb5397g4] {
    font-size: 13px;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0;
}

.dispatch-banner-body strong[b-dmxb5397g4] {
    color: #ffffff;
}

.priority-dispatch-subbanner[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Sıfır Ön Ödeme Güvence Kartı */
.no-upfront-assurance[b-dmxb5397g4] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}

.assurance-icon[b-dmxb5397g4] {
    font-size: 26px;
    color: #16a34a;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.assurance-text strong[b-dmxb5397g4] {
    display: block;
    color: #14532d;
    font-size: 14px;
    margin-bottom: 3px;
}

.assurance-text p[b-dmxb5397g4] {
    color: #166534;
    font-size: 12.5px;
    line-height: 1.45;
    margin: 0;
}

/* 4 Aşamalı Yol Haritası (Step 5) */
.success-pill-badge[b-dmxb5397g4] {
    display: inline-block;
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.dispatch-steps-roadmap[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    text-align: left;
    margin: 18px 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.roadmap-item[b-dmxb5397g4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.roadmap-dot[b-dmxb5397g4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: #e2e8f0;
    color: #64748b;
    font-weight: 700;
}

.roadmap-item.done .roadmap-dot[b-dmxb5397g4] {
    background: #10b981;
    color: #ffffff;
}

.roadmap-item.active .roadmap-dot[b-dmxb5397g4] {
    background: #e8730c;
    color: #ffffff;
}

.roadmap-dot.pulse[b-dmxb5397g4] {
    box-shadow: 0 0 0 0 rgba(232, 115, 12, 0.7);
    animation: activeStepPulse-b-dmxb5397g4 1.8s infinite;
}

@keyframes activeStepPulse-b-dmxb5397g4 {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(232, 115, 12, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(232, 115, 12, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(232, 115, 12, 0); }
}

.roadmap-content strong[b-dmxb5397g4] {
    display: block;
    font-size: 13px;
    color: #0f172a;
}

.roadmap-content span[b-dmxb5397g4] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   QUOTE WIZARD MEDIA UPLOAD & THUMBNAILS
   ───────────────────────────────────────────────────────────── */
.quote-media-upload-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
}
@media (max-width: 600px) {
    .quote-media-upload-grid[b-dmxb5397g4] {
        grid-template-columns: 1fr;
    }
}
.media-upload-box[b-dmxb5397g4] {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.media-upload-box:hover[b-dmxb5397g4] {
    border-color: var(--color-secondary);
    background: #fff7ed;
    transform: translateY(-1px);
}
.media-upload-icon[b-dmxb5397g4] {
    font-size: 26px;
    color: var(--color-secondary);
}
.media-upload-label[b-dmxb5397g4] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.media-upload-hint[b-dmxb5397g4] {
    font-size: 11px;
    color: #64748b;
    margin: 0;
}
/* ===== QUOTE MEDIA PREVIEWS (PHOTOS & VIDEO) ===== */
.quote-media-preview-section[b-dmxb5397g4] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 14px;
}
.quote-preview-header[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 6px;
}
.preview-title[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}
.badge-count[b-dmxb5397g4] {
    background: #e2e8f0;
    color: #334155;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}
.preview-hint[b-dmxb5397g4] {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
}
.quote-thumbnails-list[b-dmxb5397g4] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.quote-thumb-item[b-dmxb5397g4] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #0f172a;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.quote-thumb-item:hover[b-dmxb5397g4] {
    transform: translateY(-3px) scale(1.02);
    border-color: #f97316;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.quote-thumb-item img[b-dmxb5397g4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.quote-thumb-item:hover img[b-dmxb5397g4] {
    transform: scale(1.06);
}
.thumb-hover-overlay[b-dmxb5397g4] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.thumb-hover-overlay i[b-dmxb5397g4] {
    font-size: 1.25rem;
}
.quote-thumb-item:hover .thumb-hover-overlay[b-dmxb5397g4] {
    opacity: 1;
}
.quote-thumb-remove[b-dmxb5397g4] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(220, 38, 38, 0.92);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.quote-thumb-remove:hover[b-dmxb5397g4] {
    background: #b91c1c;
    transform: scale(1.15);
}

/* Video Card Preview */
.quote-video-card[b-dmxb5397g4] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    max-width: 440px;
}
.quote-video-card:hover[b-dmxb5397g4] {
    border-color: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.12);
}
.video-card-thumb-wrapper[b-dmxb5397g4] {
    position: relative;
    width: 90px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-card-thumb-wrapper video[b-dmxb5397g4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-play-badge[b-dmxb5397g4] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    color: #ffffff;
    font-size: 1.8rem;
    transition: all 0.2s;
}
.quote-video-card:hover .video-play-badge[b-dmxb5397g4] {
    background: rgba(220, 38, 38, 0.65);
    transform: scale(1.08);
}
.video-card-details[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    flex: 1;
}
.video-card-title[b-dmxb5397g4] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.video-card-meta[b-dmxb5397g4] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}
.video-card-action[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #dc2626;
    margin-top: 2px;
}
.quote-video-remove[b-dmxb5397g4] {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.quote-video-remove:hover[b-dmxb5397g4] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: scale(1.1);
}

/* ===== DATE PICKER STRIP (STEP 3) ===== */
.takvim-strip-header[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.takvim-strip-title[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}
.takvim-nav-controls[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.takvim-scroll-btn[b-dmxb5397g4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.takvim-scroll-btn:hover[b-dmxb5397g4] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}
.takvim-selected-badge[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #c2410c;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}
/* ===== STEP 3: DATE SELECTION (QUICK CHIPS & RESPONSIVE CALENDAR GRID) ===== */
.date-quick-chips[b-dmxb5397g4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.quick-chip-btn[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 24px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.quick-chip-btn:hover[b-dmxb5397g4] {
    border-color: #ea580c;
    background: #fff7ed;
    color: #c2410c;
}
.quick-chip-btn.active[b-dmxb5397g4] {
    border-color: #ea580c;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
}
.selected-date-callout[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    margin-bottom: 14px;
}
.badge-ready-pill[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #22c55e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}
.calendar-grid-header[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}
.grid-header-title[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}
.grid-header-note[b-dmxb5397g4] {
    font-size: 0.78rem;
    color: #64748b;
}
.quote-calendar-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    max-height: 290px;
    overflow-y: auto;
    padding: 6px;
    margin-bottom: 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #fafaf9;
    flex-shrink: 0;
    min-height: 190px;
}
.quote-calendar-card[b-dmxb5397g4] {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.quote-calendar-card:hover:not(.disabled)[b-dmxb5397g4] {
    border-color: #ea580c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15);
}
.quote-calendar-card.selected[b-dmxb5397g4] {
    background: #fff7ed !important;
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25) !important;
    transform: translateY(-2px);
}
.quote-calendar-card .card-day-name[b-dmxb5397g4] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.3px;
}
.quote-calendar-card.selected .card-day-name[b-dmxb5397g4] {
    color: #c2410c;
}
.quote-calendar-card .card-day-num[b-dmxb5397g4] {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin: 2px 0;
}
.quote-calendar-card.selected .card-day-num[b-dmxb5397g4] {
    color: #ea580c;
}
.quote-calendar-card .card-month[b-dmxb5397g4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
}
.quote-calendar-card.selected .card-month[b-dmxb5397g4] {
    color: #c2410c;
}
.quote-calendar-card .card-avail[b-dmxb5397g4] {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 4px;
}
.quote-calendar-card .card-avail.open[b-dmxb5397g4] {
    color: #16a34a;
    background: #dcfce7;
}
.quote-calendar-card .card-avail.booked[b-dmxb5397g4] {
    color: #dc2626;
    background: #fee2e2;
}
.quote-calendar-card.disabled[b-dmxb5397g4] {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f8fafc;
}
.custom-date-row[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}
.custom-date-row label[b-dmxb5397g4] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.custom-date-input[b-dmxb5397g4] {
    max-width: 190px !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
}

/* ===== STEP 4: CONFIRMED DATE CHIP & GUARANTEE CARD ===== */
.confirmed-date-summary-chip[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    gap: 12px;
}
.summary-chip-icon[b-dmxb5397g4] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.summary-chip-label[b-dmxb5397g4] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.4px;
}
.summary-chip-date[b-dmxb5397g4] {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}
.btn-change-date[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-change-date:hover[b-dmxb5397g4] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* Kent Competitive Local Rates & Quality Workmanship Box */
.quote-guarantee-card[b-dmxb5397g4] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    margin-top: 14px;
}
.guarantee-header-row[b-dmxb5397g4] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.guarantee-icon-wrap[b-dmxb5397g4] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.22);
}
.guarantee-title[b-dmxb5397g4] {
    color: #0f172a;
    font-size: 14.5px;
    font-weight: 800;
    margin: 0 0 4px 0;
    line-height: 1.3;
}
.guarantee-desc[b-dmxb5397g4] {
    color: #475569;
    font-size: 12.5px;
    margin: 0;
    line-height: 1.45;
}
.guarantee-pills-row[b-dmxb5397g4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.guarantee-pill[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ===== TIME SLOTS GRID (STEP 3) ===== */
.quote-time-slots-container[b-dmxb5397g4] {
    margin-top: 18px;
}
.quote-time-slots-header[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}
.quote-time-slots-title[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}
.quote-time-slots-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
}
.quote-time-slot-btn[b-dmxb5397g4] {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.quote-time-slot-btn:hover[b-dmxb5397g4] {
    border-color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(249, 115, 22, 0.12);
}
.quote-time-slot-btn.selected[b-dmxb5397g4] {
    background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%) !important;
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.22), 0 6px 16px rgba(234, 88, 12, 0.15) !important;
    transform: translateY(-2px);
}
.slot-btn-icon[b-dmxb5397g4] {
    font-size: 1.25rem;
    margin-bottom: 2px;
}
.quote-time-slot-btn.selected .slot-btn-icon[b-dmxb5397g4] {
    color: #ea580c !important;
}
.slot-btn-title[b-dmxb5397g4] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.quote-time-slot-btn.selected .slot-btn-title[b-dmxb5397g4] {
    color: #9a3412;
    font-weight: 800;
}
.slot-btn-sub[b-dmxb5397g4] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}
.quote-time-slot-btn.selected .slot-btn-sub[b-dmxb5397g4] {
    color: #c2410c;
    font-weight: 700;
}

/* ===== LIGHTBOX MODAL FOR FULLSCREEN MEDIA ===== */
.media-lightbox-overlay[b-dmxb5397g4] {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 29, 0.94);
    backdrop-filter: blur(8px);
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInLightbox-b-dmxb5397g4 0.2s ease-out;
}
@keyframes fadeInLightbox-b-dmxb5397g4 {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}
.media-lightbox-content[b-dmxb5397g4] {
    position: relative;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lightbox-header[b-dmxb5397g4] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #ffffff;
    margin-bottom: 8px;
}
.lightbox-title[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
}
.lightbox-close-btn[b-dmxb5397g4] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.lightbox-close-btn:hover[b-dmxb5397g4] {
    background: rgba(239, 68, 68, 0.9);
    border-color: #ef4444;
    transform: rotate(90deg);
}
.lightbox-body[b-dmxb5397g4] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 80vh;
}
.lightbox-img[b-dmxb5397g4] {
    max-width: 88vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}
.lightbox-nav-btn[b-dmxb5397g4] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}
.lightbox-nav-btn.prev[b-dmxb5397g4] {
    left: -20px;
}
.lightbox-nav-btn.next[b-dmxb5397g4] {
    right: -20px;
}
.lightbox-nav-btn:hover[b-dmxb5397g4] {
    background: #e8730c;
    border-color: #e8730c;
    transform: translateY(-50%) scale(1.1);
}
.media-lightbox-content.video-content[b-dmxb5397g4] {
    width: 100%;
    max-width: 860px;
}
.lightbox-video[b-dmxb5397g4] {
    width: 100%;
    max-width: 840px;
    max-height: 75vh;
    border-radius: 14px;
    background: #000000;
    outline: none;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
}

/* Kent Local Coverage & Postcodes Section */
.kent-coverage-card[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.coverage-sub[b-dmxb5397g4] {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.kent-towns-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.town-chip[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.town-chip:hover[b-dmxb5397g4] {
    border-color: #cbd5e1;
    background: #f1f5f9;
    transform: translateY(-1px);
}

.town-chip .town-name[b-dmxb5397g4] {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.town-chip .town-name i[b-dmxb5397g4] {
    color: #e8730c;
    font-size: 12px;
}

.town-chip .town-postcodes[b-dmxb5397g4] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.3px;
}

.coverage-footer-note[b-dmxb5397g4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    font-size: 12px;
    color: #1e40af;
    font-weight: 500;
}

/* ==========================================================================
   MOBILE FULL-SCREEN MODAL EXPANSION & SCROLL CONTAINMENT (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
    .booking-modal-overlay[b-dmxb5397g4] {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100vw !important;
        width: 100dvw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        touch-action: none !important;
    }

    .booking-modal-card[b-dmxb5397g4],
    .auth-popup-card[b-dmxb5397g4] {
        width: 100vw !important;
        width: 100dvw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .booking-modal-header[b-dmxb5397g4] {
        border-radius: 0 !important;
        padding: 14px 16px !important;
        flex-shrink: 0 !important;
    }

    .modal-header-titles h3[b-dmxb5397g4] {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .modal-step-wizard[b-dmxb5397g4] {
        padding: 8px 12px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-step-wizard[b-dmxb5397g4]::-webkit-scrollbar {
        display: none !important;
    }

    .wizard-step-item[b-dmxb5397g4] {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        gap: 4px !important;
    }

    .step-num-circle[b-dmxb5397g4] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        font-size: 0.7rem !important;
    }

    .booking-modal-body[b-dmxb5397g4] {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 14px !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    .booking-modal-footer[b-dmxb5397g4] {
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
        z-index: 10 !important;
    }

    .btn-modal-next[b-dmxb5397g4],
    .btn-modal-back[b-dmxb5397g4] {
        padding: 10px 18px !important;
        font-size: 0.88rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   GEO & SEO: AI QUICK SUMMARY CARD (BLUF / Generative Engines)
   ───────────────────────────────────────────────────────────── */
.service-ai-summary-card[b-dmxb5397g4] {
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 4px 16px rgba(22, 101, 52, 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-summary-badge[b-dmxb5397g4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #15803d;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 12px;
    border-radius: 20px;
    align-self: flex-start;
}

.ai-summary-text[b-dmxb5397g4] {
    font-size: 14.5px;
    line-height: 1.6;
    color: #1e293b;
    margin: 0;
}

.ai-summary-text strong[b-dmxb5397g4] {
    color: #0f172a;
}

.ai-key-facts-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.fact-item[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fact-label[b-dmxb5397g4] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fact-value[b-dmxb5397g4] {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
}

/* FAQ Details Enhancement */
.service-faq-card .faq-item[b-dmxb5397g4] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.service-faq-card .faq-item[open][b-dmxb5397g4] {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.service-faq-card .faq-question[b-dmxb5397g4] {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    list-style: none;
}

.service-faq-card .faq-question[b-dmxb5397g4]::-webkit-details-marker {
    display: none;
}

.service-faq-card .faq-arrow[b-dmxb5397g4] {
    font-size: 14px;
    color: #64748b;
    transition: transform 0.2s ease;
}

.service-faq-card .faq-item[open] .faq-arrow[b-dmxb5397g4] {
    transform: rotate(180deg);
    color: var(--color-secondary, #e8730c);
}

.service-faq-card .faq-answer[b-dmxb5397g4] {
    padding: 0 20px 16px 20px;
    border-top: 1px solid #f1f5f9;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    margin: 12px 0 0 0;
}

/* ─────────────────────────────────────────────────────────────
   VERIFIED CUSTOMER REVIEWS (Google Review / AggregateRating Schema)
   ───────────────────────────────────────────────────────────── */
.service-reviews-section[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 34px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.reviews-header[b-dmxb5397g4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 26px;
    flex-wrap: wrap;
    gap: 16px;
}

.reviews-eyebrow[b-dmxb5397g4] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-secondary, #e8730c);
    display: inline-block;
    margin-bottom: 4px;
}

.reviews-title[b-dmxb5397g4] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.reviews-rating-pill[b-dmxb5397g4] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-stars[b-dmxb5397g4] {
    color: #f59e0b;
    font-size: 14px;
    display: flex;
    gap: 2px;
}

.rating-score[b-dmxb5397g4] {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.rating-count[b-dmxb5397g4] {
    font-size: 12px;
    color: #64748b;
}

.reviews-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.review-card[b-dmxb5397g4] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover[b-dmxb5397g4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.review-stars[b-dmxb5397g4] {
    color: #f59e0b;
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    gap: 2px;
}

.review-text[b-dmxb5397g4] {
    font-size: 13.5px;
    line-height: 1.55;
    color: #334155;
    font-style: italic;
    margin: 0 0 16px 0;
    flex: 1;
}

.review-author[b-dmxb5397g4] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

.author-name[b-dmxb5397g4] {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}

.author-location[b-dmxb5397g4] {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────
   RELATED SERVICES (Topic Cluster Internal Silo Linking)
   ───────────────────────────────────────────────────────────── */
.related-services-section[b-dmxb5397g4] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 34px;
}

.related-services-header[b-dmxb5397g4] {
    margin-bottom: 24px;
}

.related-services-eyebrow[b-dmxb5397g4] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-primary, #1e3a8a);
    display: inline-block;
    margin-bottom: 4px;
}

.related-services-title[b-dmxb5397g4] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
}

.related-services-desc[b-dmxb5397g4] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.related-services-grid[b-dmxb5397g4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.related-service-card[b-dmxb5397g4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.related-service-card:hover[b-dmxb5397g4] {
    transform: translateY(-4px);
    border-color: var(--color-secondary, #e8730c);
    box-shadow: 0 10px 24px rgba(232, 115, 12, 0.14);
}

.related-card-img-wrap[b-dmxb5397g4] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f1f5f9;
    overflow: hidden;
}

.related-card-img-wrap img[b-dmxb5397g4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.related-service-card:hover .related-card-img-wrap img[b-dmxb5397g4] {
    transform: scale(1.05);
}

.related-card-badge[b-dmxb5397g4] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.related-card-body[b-dmxb5397g4] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-card-icon[b-dmxb5397g4] {
    font-size: 22px;
    margin-bottom: 6px;
    display: inline-block;
}

.related-card-title[b-dmxb5397g4] {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.related-card-desc[b-dmxb5397g4] {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 14px 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.related-card-link[b-dmxb5397g4] {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-secondary, #e8730c);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.related-service-card:hover .related-card-link i[b-dmxb5397g4] {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .ai-key-facts-grid[b-dmxb5397g4] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews-grid[b-dmxb5397g4] {
        grid-template-columns: 1fr;
    }

    .related-services-grid[b-dmxb5397g4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .service-ai-summary-card[b-dmxb5397g4],
    .service-reviews-section[b-dmxb5397g4],
    .related-services-section[b-dmxb5397g4] {
        padding: 20px 16px;
    }

    .ai-key-facts-grid[b-dmxb5397g4] {
        grid-template-columns: 1fr;
    }

    .related-services-grid[b-dmxb5397g4] {
        grid-template-columns: 1fr;
    }

    .reviews-title[b-dmxb5397g4],
    .related-services-title[b-dmxb5397g4] {
        font-size: 20px;
    }
}







/* _content/Handman.Web/Components/Pages/Home.razor.rz.scp.css */
/* HandMan – Home Page CSS */

/* ===== HERO SLIDER ===== */
.home-slider-wrapper[b-y6usa772nn] {
    position: relative;
    margin-bottom: 5px;
    overflow: hidden;
}

.slider-container[b-y6usa772nn] {
    overflow: visible;
    padding: 3px 15px 15px 15px;
    margin: 0 -15px;
}

.slider-track[b-y6usa772nn] {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-item[b-y6usa772nn] {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 0 8px;
}

.slide-card[b-y6usa772nn] {
    position: relative;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15), 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slide-card:hover[b-y6usa772nn] {
    box-shadow: 0 20px 45px rgba(0,0,0,0.25), 0 10px 20px rgba(0,0,0,0.15);
}

.slide-img[b-y6usa772nn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 3s ease;
}

.slide-card:hover .slide-img[b-y6usa772nn] {
    transform: scale(1.05);
}

.slide-overlay[b-y6usa772nn] {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(10, 20, 40, 0.92) 0%, rgba(10, 20, 40, 0.75) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px 25px;
    height: 45%;
}

.slide-content[b-y6usa772nn] {
    color: white;
    width: 100%;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.slide-card:hover .slide-content[b-y6usa772nn] {
    transform: translateY(-5px);
}

.slide-content h2[b-y6usa772nn] {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.slide-content p[b-y6usa772nn] {
    font-size: 13px;
    opacity: 0.95;
    margin: 0 0 15px 0;
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-book-now[b-y6usa772nn] {
    display: inline-block;
    background-color: var(--color-secondary);
    color: white;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: 0 6px 15px rgba(232, 115, 12, 0.3);
}

.btn-book-now:hover[b-y6usa772nn] {
    background-color: var(--color-secondary-hover);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* Navigation Buttons */
.slider-btn[b-y6usa772nn] {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #EBEBEB;
    color: var(--color-primary);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 20;
    transition: all 0.2s;
}

.slider-btn:hover[b-y6usa772nn] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.prev-btn[b-y6usa772nn] { left: 20px; }
.next-btn[b-y6usa772nn] { right: 20px; }

/* Dots */
.slider-dots[b-y6usa772nn] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
}

.slider-dot[b-y6usa772nn] {
    width: 12px; height: 12px;
    border-radius: 50%;
    background-color: #D1D5DB;
    cursor: pointer;
    transition: all 0.3s;
}

.slider-dot.active[b-y6usa772nn] {
    background-color: var(--color-secondary);
    width: 30px;
    border-radius: 6px;
}

/* ===== TRUST BAR ===== */
.trust-bar[b-y6usa772nn] {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 25px 30px;
    background: var(--color-primary);
    color: white;
    margin-bottom: 40px;
}

.trust-item[b-y6usa772nn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-item i[b-y6usa772nn] {
    font-size: 28px;
    color: var(--color-secondary);
}

.trust-item strong[b-y6usa772nn] {
    font-size: 22px;
    font-weight: 800;
    display: block;
    line-height: 1.1;
}

.trust-item span[b-y6usa772nn] {
    font-size: 12px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SHOWCASE GRID ===== */
.showcase-section[b-y6usa772nn] {
    padding: 0 20px;
    margin-bottom: 50px;
}

.showcase-header[b-y6usa772nn] {
    text-align: center;
    margin-bottom: 30px;
}

.showcase-header h2[b-y6usa772nn] {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text-main);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.showcase-header p[b-y6usa772nn] {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

.showcase-grid[b-y6usa772nn] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.showcase-card[b-y6usa772nn] {
    display: block;
    text-decoration: none;
    background: white;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.showcase-card:hover[b-y6usa772nn] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    border-color: var(--color-secondary);
    text-decoration: none;
}

.showcase-img-wrapper[b-y6usa772nn] {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}

.showcase-img-wrapper[b-y6usa772nn]::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
}

.showcase-img[b-y6usa772nn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.showcase-card:hover .showcase-img[b-y6usa772nn] {
    transform: scale(1.06);
}

.showcase-card-title[b-y6usa772nn] {
    padding: 14px 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    border-top: 1.5px solid transparent;
    transition: border-color 0.3s, color 0.3s;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

.showcase-card:hover .showcase-card-title[b-y6usa772nn] {
    border-top-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* ===== HOW IT WORKS ===== */
.how-it-works[b-y6usa772nn] {
    text-align: center;
    padding: 50px 20px;
    background: #f9fafb;
    margin-bottom: 0;
}

.how-it-works h2[b-y6usa772nn] {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 40px;
    color: var(--color-text-main);
}

.steps-grid[b-y6usa772nn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.step-card[b-y6usa772nn] {
    flex: 1;
    padding: 30px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
}

.step-card:hover[b-y6usa772nn] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.step-number[b-y6usa772nn] {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: white;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.step-icon[b-y6usa772nn] {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(26, 35, 50, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.step-icon i[b-y6usa772nn] {
    font-size: 26px;
    color: var(--color-primary);
}

.step-card h3[b-y6usa772nn] {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text-main);
}

.step-card p[b-y6usa772nn] {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.step-connector[b-y6usa772nn] {
    color: var(--color-secondary);
    font-size: 24px;
    opacity: 0.5;
}

/* ===== CTA BANNER ===== */
.cta-banner[b-y6usa772nn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #2a3a52 100%);
    color: white;
}

.cta-content h2[b-y6usa772nn] {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
}

.cta-content p[b-y6usa772nn] {
    font-size: 15px;
    opacity: 0.8;
    margin: 0;
}

.cta-actions[b-y6usa772nn] {
    display: flex;
    gap: 12px;
}

.cta-btn[b-y6usa772nn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-btn:hover[b-y6usa772nn] {
    transform: translateY(-2px);
    text-decoration: none;
}

.cta-phone[b-y6usa772nn] {
    background: white;
    color: var(--color-primary);
}

.cta-whatsapp[b-y6usa772nn] {
    background: #25d366;
    color: white;
}

.cta-whatsapp:hover[b-y6usa772nn] { color: white; }

.cta-quote[b-y6usa772nn] {
    background: var(--color-secondary);
    color: white;
    box-shadow: 0 6px 20px rgba(232, 115, 12, 0.3);
}

.cta-quote:hover[b-y6usa772nn] { color: white; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .showcase-grid[b-y6usa772nn] { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}

@media (max-width: 991px) {
    .slide-item[b-y6usa772nn] { flex: 0 0 50% !important; }
    .slide-card[b-y6usa772nn] { height: 350px; }
    .slider-btn[b-y6usa772nn] { width: 34px; height: 34px; font-size: 16px; }
    .prev-btn[b-y6usa772nn] { left: 8px; }
    .next-btn[b-y6usa772nn] { right: 8px; }
    .slide-content h2[b-y6usa772nn] { font-size: 16px; margin-bottom: 5px; }
    .slide-content p[b-y6usa772nn] { font-size: 12px; margin-bottom: 10px; }
    .slide-overlay[b-y6usa772nn] { padding: 15px; }
    .btn-book-now[b-y6usa772nn] { padding: 8px 15px; font-size: 11px; }

    .showcase-grid[b-y6usa772nn] { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .showcase-card-title[b-y6usa772nn] { font-size: 12px; padding: 10px 6px; min-height: 50px; }

    .trust-bar[b-y6usa772nn] { gap: 20px; padding: 20px 15px; flex-wrap: wrap; justify-content: center; }
    .trust-item strong[b-y6usa772nn] { font-size: 18px; }

    .steps-grid[b-y6usa772nn] { flex-direction: column; gap: 15px; }
    .step-connector[b-y6usa772nn] { transform: rotate(90deg); }

    .cta-banner[b-y6usa772nn] { flex-direction: column; text-align: center; gap: 20px; padding: 30px 20px; }
    .cta-actions[b-y6usa772nn] { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 576px) {
    .home-slider-wrapper[b-y6usa772nn] { margin-bottom: 0; padding-bottom: 0; }
    .slider-dots[b-y6usa772nn] { margin-top: 6px; margin-bottom: 6px; }
    .slide-item[b-y6usa772nn] { flex: 0 0 50% !important; }
    .slide-card[b-y6usa772nn] { height: 280px; }
    .slider-container[b-y6usa772nn] { padding: 8px 4px 2px; }

    .showcase-grid[b-y6usa772nn] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .showcase-card-title[b-y6usa772nn] { font-size: 11px; padding: 10px 4px; min-height: 44px; }

    .trust-bar[b-y6usa772nn] { gap: 15px; }
    .trust-item i[b-y6usa772nn] { font-size: 22px; }
    .trust-item strong[b-y6usa772nn] { font-size: 16px; }

    .cta-content h2[b-y6usa772nn] { font-size: 22px; }
    .cta-btn[b-y6usa772nn] { padding: 10px 18px; font-size: 13px; }
}

/* ===== MOBILE JOIN AS HANDYMAN CTA ===== */
.mobile-join-cta[b-y6usa772nn] {
    display: none; /* Hidden on desktop */
}

@media (max-width: 991px) {
    .mobile-join-cta[b-y6usa772nn] {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 4px 15px 10px;
        padding: 14px 18px;
        background: linear-gradient(135deg, #1b2a4a 0%, #0f1d35 60%, #152444 100%);
        border-radius: 14px;
        text-decoration: none;
        color: #ffffff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(15, 29, 53, 0.3), inset 0 1px 0 rgba(255,255,255,0.06);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid rgba(232, 115, 12, 0.25);
    }

    .mobile-join-cta[b-y6usa772nn]::before {
        content: '';
        position: absolute;
        top: 0;
        right: -40px;
        width: 120px;
        height: 100%;
        background: linear-gradient(135deg, transparent, rgba(232, 115, 12, 0.08), transparent);
        transform: skewX(-15deg);
    }

    .mobile-join-cta:hover[b-y6usa772nn] {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(15, 29, 53, 0.4);
        text-decoration: none;
        color: #ffffff;
    }

    .mobile-join-cta-icon[b-y6usa772nn] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 12px;
        background: linear-gradient(135deg, #e8730c, #d45b00);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 10px rgba(232, 115, 12, 0.35);
    }

    .mobile-join-cta-icon i[b-y6usa772nn] {
        font-size: 20px;
        color: #ffffff;
    }

    .mobile-join-cta-text[b-y6usa772nn] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    .mobile-join-cta-text strong[b-y6usa772nn] {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.2px;
        color: #ffffff;
    }

    .mobile-join-cta-text span[b-y6usa772nn] {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }

    .mobile-join-cta-arrow[b-y6usa772nn] {
        font-size: 18px;
        color: #e8730c;
        flex-shrink: 0;
        animation: joinArrowPulse-b-y6usa772nn 1.8s ease-in-out infinite;
    }

    @keyframes joinArrowPulse-b-y6usa772nn {
        0%, 100% { transform: translateX(0); opacity: 0.7; }
        50% { transform: translateX(4px); opacity: 1; }
    }
}
/* _content/Handman.Web/Components/Pages/KategoriDetay.razor.rz.scp.css */
/* HandMan – KategoriDetay.razor.css */

.category-page-container[b-8kmtwdqp01] {
    padding: 15px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 1. Breadcrumb */
.breadcrumb-nav[b-8kmtwdqp01] {
    margin-bottom: 5px;
}

.breadcrumb-list[b-8kmtwdqp01] {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
}

.breadcrumb-list a[b-8kmtwdqp01] {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb-list a:hover[b-8kmtwdqp01] {
    color: var(--color-secondary);
}

.breadcrumb-list .separator[b-8kmtwdqp01] {
    color: #cbd5e1;
    font-size: 11px;
}

.breadcrumb-list .current[b-8kmtwdqp01] {
    color: #0f172a;
    font-weight: 700;
}

/* 2. Hero Başlık */
.category-hero-header[b-8kmtwdqp01] {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}

.category-title-row[b-8kmtwdqp01] {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.category-hero-icon[b-8kmtwdqp01] {
    font-size: 42px;
    line-height: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.category-main-title[b-8kmtwdqp01] {
    font-size: 32px;
    font-weight: 900;
    color: var(--color-primary);
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.category-short-desc[b-8kmtwdqp01] {
    font-size: 15px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

.category-badges-row[b-8kmtwdqp01] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.area-badge[b-8kmtwdqp01] {
    background-color: #f1f5f9;
    color: #334155;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e2e8f0;
}

.coverage-badge[b-8kmtwdqp01] {
    background-color: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 3. Media Showcase */
.category-media-section[b-8kmtwdqp01] {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    overflow: hidden;
}

.media-showcase-container[b-8kmtwdqp01] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    min-height: 420px;
}

.main-media-viewport[b-8kmtwdqp01] {
    background: #0f172a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-right: 1px solid #e2e8f0;
}

.image-stage-wrapper[b-8kmtwdqp01] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    overflow: hidden;
    cursor: pointer;
}

.main-stage-img[b-8kmtwdqp01] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-stage-wrapper:hover .main-stage-img[b-8kmtwdqp01] {
    transform: scale(1.02);
}

.zoom-fullscreen-btn[b-8kmtwdqp01] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: none; /* Normal masaüstü görünümde gizli */
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

.zoom-fullscreen-btn:hover[b-8kmtwdqp01] {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: scale(1.1);
}

.play-hero-video-btn[b-8kmtwdqp01] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(232, 115, 12, 0.95);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.play-hero-video-btn:hover[b-8kmtwdqp01] {
    background: #d06508;
    transform: translate(-50%, -50%) scale(1.06);
}

.video-player-wrapper[b-8kmtwdqp01] {
    width: 100%;
    height: 100%;
    min-height: 380px;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-video-player[b-8kmtwdqp01] {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: contain;
}

.active-media-caption[b-8kmtwdqp01] {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: white;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.caption-title[b-8kmtwdqp01] {
    font-size: 14px;
    font-weight: 700;
}

.caption-sub[b-8kmtwdqp01] {
    font-size: 12px;
    color: #94a3b8;
}

/* Right Thumbnails Strip */
.media-thumbnails-strip[b-8kmtwdqp01] {
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.thumbs-heading[b-8kmtwdqp01] {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.thumbs-grid[b-8kmtwdqp01] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
}

.thumb-card[b-8kmtwdqp01] {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.thumb-card:hover[b-8kmtwdqp01] {
    border-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.thumb-card.selected[b-8kmtwdqp01] {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px rgba(232, 115, 12, 0.3);
}

.thumb-img-wrapper[b-8kmtwdqp01] {
    position: relative;
    height: 75px;
    width: 100%;
    background: #0f172a;
    overflow: hidden;
}

.thumb-img[b-8kmtwdqp01] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-indicator[b-8kmtwdqp01] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    color: white;
    font-size: 24px;
}

.thumb-label[b-8kmtwdqp01] {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumbs-header-row[b-8kmtwdqp01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.thumbs-count-badge[b-8kmtwdqp01] {
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
}

.mobile-tap-zoom-badge[b-8kmtwdqp01] {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    display: none; /* Normal görünümde gizli, sadece mobilde gösterilir */
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0.85;
}

/* Lightbox Fullscreen Modal */
.lightbox-modal-backdrop[b-8kmtwdqp01] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 999999;
    background: rgba(6, 10, 20, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overscroll-behavior: none;
    outline: none;
    animation: lightboxFadeIn-b-8kmtwdqp01 0.22s ease-out;
}

@keyframes lightboxFadeIn-b-8kmtwdqp01 {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-header-bar[b-8kmtwdqp01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-shrink: 0;
    z-index: 20;
    gap: 10px;
    box-sizing: border-box;
}

.lightbox-counter-pill[b-8kmtwdqp01] {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.lightbox-media-title[b-8kmtwdqp01] {
    color: #f8fafc;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.lightbox-close-circle-btn[b-8kmtwdqp01] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox-close-circle-btn:hover[b-8kmtwdqp01] {
    background: #ef4444;
    border-color: #ef4444;
    transform: rotate(90deg);
}

.lightbox-main-stage[b-8kmtwdqp01] {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px 12px;
    touch-action: pan-y pinch-zoom;
    box-sizing: border-box;
}

.lightbox-image-holder[b-8kmtwdqp01] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.lightbox-zoom-img[b-8kmtwdqp01] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: block;
}

.lightbox-video-frame[b-8kmtwdqp01] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 12px;
}

.lightbox-arrow-btn[b-8kmtwdqp01] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 30;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.lightbox-arrow-btn.prev-arrow[b-8kmtwdqp01] {
    left: 14px;
}

.lightbox-arrow-btn.next-arrow[b-8kmtwdqp01] {
    right: 14px;
}

.lightbox-arrow-btn:hover[b-8kmtwdqp01] {
    background: var(--color-secondary, #e8730c);
    border-color: var(--color-secondary, #e8730c);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-arrow-btn:active[b-8kmtwdqp01] {
    transform: translateY(-50%) scale(0.95);
}

.lightbox-bottom-controls[b-8kmtwdqp01] {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    z-index: 20;
    box-sizing: border-box;
}

.lightbox-thumbs-rail[b-8kmtwdqp01] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.lightbox-thumbs-rail[b-8kmtwdqp01]::-webkit-scrollbar {
    display: none;
}

.lightbox-mini-thumb[b-8kmtwdqp01] {
    width: 52px;
    height: 36px;
    min-width: 52px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    padding: 0;
    background: #0f172a;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.18s ease;
    opacity: 0.6;
    flex-shrink: 0;
}

.lightbox-mini-thumb.active[b-8kmtwdqp01] {
    border-color: var(--color-secondary, #e8730c);
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 0 10px rgba(232, 115, 12, 0.6);
}

.lightbox-mini-thumb:hover[b-8kmtwdqp01] {
    opacity: 1;
}

.lightbox-mini-thumb img[b-8kmtwdqp01] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lightbox-touch-hint[b-8kmtwdqp01] {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .lightbox-header-bar[b-8kmtwdqp01] {
        padding: 6px 10px;
        height: 50px;
    }

    .lightbox-counter-pill[b-8kmtwdqp01] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .lightbox-media-title[b-8kmtwdqp01] {
        font-size: 13px;
        padding: 0 6px;
    }

    .lightbox-close-circle-btn[b-8kmtwdqp01] {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 14px;
    }

    .lightbox-main-stage[b-8kmtwdqp01] {
        padding: 4px 6px;
    }

    .lightbox-arrow-btn[b-8kmtwdqp01] {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 18px;
    }

    .lightbox-arrow-btn.prev-arrow[b-8kmtwdqp01] {
        left: 8px;
    }

    .lightbox-arrow-btn.next-arrow[b-8kmtwdqp01] {
        right: 8px;
    }

    .lightbox-mini-thumb[b-8kmtwdqp01] {
        width: 44px;
        height: 30px;
        min-width: 44px;
    }

    .lightbox-touch-hint[b-8kmtwdqp01] {
        font-size: 10px;
    }
}

/* 4. Subcategories Showcase Section */
.subcategories-showcase-section[b-8kmtwdqp01] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-header-row[b-8kmtwdqp01] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}

.section-title[b-8kmtwdqp01] {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.section-subtitle[b-8kmtwdqp01] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Services Grid: 4 Kolon Desktop */
.services-grid[b-8kmtwdqp01] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card[b-8kmtwdqp01] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.service-card:hover[b-8kmtwdqp01] {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(26, 43, 76, 0.1);
    border-color: var(--color-secondary);
}

.service-card-media[b-8kmtwdqp01] {
    position: relative;
    height: 170px;
    width: 100%;
    background: #f1f5f9;
    overflow: hidden;
}

.service-img[b-8kmtwdqp01] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-card:hover .service-img[b-8kmtwdqp01] {
    transform: scale(1.05);
}

.service-price-tag[b-8kmtwdqp01],
.service-quote-tag[b-8kmtwdqp01] {
    display: none !important; /* Kullanıcı talebi: kartlardaki fiyat alanları gizlendi */
}

.quote-survey-badge[b-8kmtwdqp01] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.btn-quote-style[b-8kmtwdqp01] {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

.service-card:hover .btn-quote-style[b-8kmtwdqp01] {
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.price-from[b-8kmtwdqp01] {
    font-size: 10px;
    opacity: 0.9;
}

.price-val[b-8kmtwdqp01] {
    font-size: 14px;
    font-weight: 900;
}

.service-popular-badge[b-8kmtwdqp01] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #1a2332;
    color: #fbbf24;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}

.service-card-body[b-8kmtwdqp01] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.service-card-header[b-8kmtwdqp01] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-icon[b-8kmtwdqp01] {
    font-size: 20px;
    line-height: 1;
}

.service-title[b-8kmtwdqp01] {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    color: var(--color-primary);
    transition: color 0.15s;
}

.service-card:hover .service-title[b-8kmtwdqp01] {
    color: var(--color-secondary);
}

.service-title a:hover[b-8kmtwdqp01] {
    color: var(--color-secondary);
}

.service-description[b-8kmtwdqp01] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-packages-summary[b-8kmtwdqp01] {
    margin-top: auto;
    padding-top: 8px;
}

.packages-count-badge[b-8kmtwdqp01] {
    font-size: 11px;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.service-card-actions[b-8kmtwdqp01] {
    margin-top: 10px;
}

.btn-service-details[b-8kmtwdqp01] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    background: #f1f5f9;
    color: var(--color-primary);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-service-details:hover[b-8kmtwdqp01] {
    background: var(--color-secondary);
    color: white;
    text-decoration: none;
}

/* 5. CKEditor & Coverage Section */
.category-details-and-coverage[b-8kmtwdqp01] {
    margin-top: 10px;
}

.details-coverage-layout[b-8kmtwdqp01] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    align-items: start;
}

.ckeditor-content-box[b-8kmtwdqp01] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.content-box-heading[b-8kmtwdqp01] {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.default-rich-content p[b-8kmtwdqp01] {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 16px;
}

.benefits-checklist[b-8kmtwdqp01] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.benefits-checklist li[b-8kmtwdqp01] {
    font-size: 14px;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.rich-html-output[b-8kmtwdqp01] {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}

/* Postcode Checker Sidebar */
.postcode-checker-box[b-8kmtwdqp01] {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checker-card-header[b-8kmtwdqp01] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checker-card-header h3[b-8kmtwdqp01] {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
}

.checker-subtitle[b-8kmtwdqp01] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.checker-input-row[b-8kmtwdqp01] {
    display: flex;
    gap: 8px;
}

.postcode-input[b-8kmtwdqp01] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    outline: none;
    transition: border 0.15s;
}

.postcode-input:focus[b-8kmtwdqp01] {
    border-color: var(--color-secondary);
}

.btn-check-coverage[b-8kmtwdqp01] {
    background: var(--color-secondary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-check-coverage:hover[b-8kmtwdqp01] {
    background: var(--color-secondary-hover);
}

.checker-result-alert[b-8kmtwdqp01] {
    padding: 12px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.4;
}

.alert-success[b-8kmtwdqp01] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.alert-warning[b-8kmtwdqp01] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.popular-postcodes-pills[b-8kmtwdqp01] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
}

.pills-title[b-8kmtwdqp01] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    width: 100%;
}

.postcode-pill[b-8kmtwdqp01] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.postcode-pill:hover[b-8kmtwdqp01] {
    background: #e2e8f0;
    color: var(--color-primary);
}

.instant-call-help[b-8kmtwdqp01] {
    margin-top: 5px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #475569;
}

.urgent-phone-link[b-8kmtwdqp01] {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: var(--color-secondary);
    text-decoration: none;
}

/* Loading & Not Found */
.category-loading-container[b-8kmtwdqp01],
.category-not-found[b-8kmtwdqp01] {
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner[b-8kmtwdqp01] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin-b-8kmtwdqp01 0.8s linear infinite;
    margin: 0 auto 16px auto;
}

@keyframes spin-b-8kmtwdqp01 {
    to { transform: rotate(360deg); }
}

.not-found-icon[b-8kmtwdqp01] {
    font-size: 48px;
    margin-bottom: 16px;
}

.btn-primary-handman[b-8kmtwdqp01] {
    display: inline-block;
    background: var(--color-secondary);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
    margin-top: 15px;
}

/* Responsive */
@media (max-width: 1200px) {
    .services-grid[b-8kmtwdqp01] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .mobile-tap-zoom-badge[b-8kmtwdqp01] {
        display: flex; /* Sadece mobilde görünür */
    }
    .zoom-fullscreen-btn[b-8kmtwdqp01] {
        display: flex; /* Sadece mobilde görünür */
    }
    .media-showcase-container[b-8kmtwdqp01] {
        grid-template-columns: 1fr;
    }
    .main-media-viewport[b-8kmtwdqp01] {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .details-coverage-layout[b-8kmtwdqp01] {
        grid-template-columns: 1fr;
    }
    .services-grid[b-8kmtwdqp01] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .lightbox-service-action-btn[b-8kmtwdqp01] {
        bottom: 14px;
        right: 16px;
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .services-grid[b-8kmtwdqp01] {
        grid-template-columns: 1fr;
    }
    .category-title-row[b-8kmtwdqp01] {
        flex-direction: column;
    }
    .category-hero-icon[b-8kmtwdqp01] {
        font-size: 32px;
    }
    .category-main-title[b-8kmtwdqp01] {
        font-size: 24px;
    }
    .lightbox-service-action-btn[b-8kmtwdqp01] {
        bottom: 12px;
        right: 12px;
        padding: 7px 14px;
        font-size: 12px;
        gap: 6px;
    }
}

/* Lightbox Service Details Button */
.lightbox-service-action-btn[b-8kmtwdqp01] {
    position: absolute;
    bottom: 24px;
    right: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--color-secondary, #e8730c) 0%, #ea580c 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(232, 115, 12, 0.4);
    z-index: 35;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
}

.lightbox-service-action-btn:hover[b-8kmtwdqp01] {
    transform: translateY(-2px) scale(1.04);
    background: linear-gradient(135deg, #f97316 0%, #e8730c 100%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(232, 115, 12, 0.6);
    color: #ffffff !important;
}

.lightbox-service-action-btn:active[b-8kmtwdqp01] {
    transform: translateY(0) scale(0.96);
}

/* Hero Stage Active Caption & Link */
.active-media-caption[b-8kmtwdqp01] {
    padding: 12px 18px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.caption-text-group[b-8kmtwdqp01] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.caption-title[b-8kmtwdqp01] {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.caption-sub[b-8kmtwdqp01] {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.stage-service-link-btn[b-8kmtwdqp01] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(232, 115, 12, 0.08);
    color: var(--color-secondary, #e8730c);
    border: 1px solid rgba(232, 115, 12, 0.3);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.stage-service-link-btn:hover[b-8kmtwdqp01] {
    background: var(--color-secondary, #e8730c);
    color: #ffffff;
    border-color: var(--color-secondary, #e8730c);
}

/* 6. Visible Category FAQ Section */
.category-faq-section[b-8kmtwdqp01] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.faq-header-group[b-8kmtwdqp01] {
    margin-bottom: 24px;
}

.faq-eyebrow[b-8kmtwdqp01] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-secondary, #e8730c);
    display: inline-block;
    margin-bottom: 6px;
}

.faq-section-title[b-8kmtwdqp01] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
}

.faq-section-desc[b-8kmtwdqp01] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.category-faq-accordion[b-8kmtwdqp01] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item[b-8kmtwdqp01] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item[open][b-8kmtwdqp01] {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.faq-question[b-8kmtwdqp01] {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    list-style: none;
}

.faq-question[b-8kmtwdqp01]::-webkit-details-marker {
    display: none;
}

.faq-icon[b-8kmtwdqp01] {
    font-size: 14px;
    color: #64748b;
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-icon[b-8kmtwdqp01] {
    transform: rotate(180deg);
    color: var(--color-secondary, #e8730c);
}

.faq-answer[b-8kmtwdqp01] {
    padding: 0 20px 18px 20px;
    border-top: 1px solid #f1f5f9;
}

.faq-answer p[b-8kmtwdqp01] {
    margin: 12px 0 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

/* 7. Related Categories (Topic Silo) */
.related-categories-section[b-8kmtwdqp01] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
}

.related-categories-header[b-8kmtwdqp01] {
    margin-bottom: 24px;
}

.related-eyebrow[b-8kmtwdqp01] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #d97706;
    display: inline-block;
    margin-bottom: 6px;
}

.related-categories-title[b-8kmtwdqp01] {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
}

.related-categories-desc[b-8kmtwdqp01] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.related-categories-grid[b-8kmtwdqp01] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.related-category-card[b-8kmtwdqp01] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.related-category-card:hover[b-8kmtwdqp01] {
    transform: translateY(-2px);
    border-color: var(--color-secondary, #e8730c);
    box-shadow: 0 6px 16px rgba(232, 115, 12, 0.12);
}

.related-cat-icon[b-8kmtwdqp01] {
    font-size: 28px;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 10px;
    flex-shrink: 0;
}

.related-cat-info[b-8kmtwdqp01] {
    flex: 1;
    min-width: 0;
}

.related-cat-title[b-8kmtwdqp01] {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-cat-desc[b-8kmtwdqp01] {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.related-cat-arrow[b-8kmtwdqp01] {
    font-size: 16px;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.related-category-card:hover .related-cat-arrow[b-8kmtwdqp01] {
    transform: translateX(4px);
    color: var(--color-secondary, #e8730c);
}

@media (max-width: 768px) {
    .category-faq-section[b-8kmtwdqp01],
    .related-categories-section[b-8kmtwdqp01] {
        padding: 20px 16px;
    }

    .faq-section-title[b-8kmtwdqp01],
    .related-categories-title[b-8kmtwdqp01] {
        font-size: 19px;
    }

    .related-categories-grid[b-8kmtwdqp01] {
        grid-template-columns: 1fr;
    }
}

/* _content/Handman.Web/Components/Pages/Randevularim.razor.rz.scp.css */
/* ==========================================================================
   CUSTOMER DASHBOARD & MINI-ADMIN APPOINTMENTS MANAGEMENT WORKSPACE
   ========================================================================== */

.customer-portal-container[b-tmiwixfovq] {
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 20px 80px 20px;
    font-family: var(--font-primary, 'Inter', system-ui, sans-serif);
}

.portal-loading-box[b-tmiwixfovq] {
    text-align: center;
    padding: 100px 20px;
    color: #64748b;
}

.portal-loading-box p[b-tmiwixfovq] {
    margin-top: 16px;
    font-size: 1rem;
    font-weight: 600;
}

/* Guest Not Signed In */
.portal-guest-card[b-tmiwixfovq] {
    max-width: 540px;
    margin: 60px auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 48px 36px;
    text-align: center;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08);
}

.guest-icon-badge[b-tmiwixfovq] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff7ed;
    color: #e8730c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 24px auto;
    box-shadow: 0 8px 20px rgba(232, 115, 12, 0.15);
}

.portal-guest-card h2[b-tmiwixfovq] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
}

.portal-guest-card p[b-tmiwixfovq] {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.65;
    margin-bottom: 30px;
}

.guest-actions[b-tmiwixfovq] {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-portal-primary[b-tmiwixfovq] {
    background: linear-gradient(135deg, #e8730c 0%, #ea580c 100%);
    color: #ffffff !important;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(232, 115, 12, 0.3);
    transition: all 0.2s ease;
}

.btn-portal-primary:hover[b-tmiwixfovq] {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(232, 115, 12, 0.4);
}

.btn-portal-secondary[b-tmiwixfovq] {
    background: #f1f5f9;
    color: #334155 !important;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-portal-secondary:hover[b-tmiwixfovq] {
    background: #e2e8f0;
}

/* 1. Header Banner */
.portal-header-card[b-tmiwixfovq] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 20px;
    padding: 26px 32px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.user-profile-summary[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-avatar-circle[b-tmiwixfovq] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e8730c 0%, #f97316 100%);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(232, 115, 12, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-role-badge[b-tmiwixfovq] {
    font-size: 0.76rem;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-info-text h2[b-tmiwixfovq] {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #ffffff;
}

.user-meta-chips[b-tmiwixfovq] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: #94a3b8;
}

.user-meta-chips span[b-tmiwixfovq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-action-group[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-book-more[b-tmiwixfovq] {
    background: linear-gradient(135deg, #e8730c 0%, #ea580c 100%);
    color: #ffffff !important;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(232, 115, 12, 0.3);
}

.btn-book-more:hover[b-tmiwixfovq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(232, 115, 12, 0.45);
}

.btn-portal-logout[b-tmiwixfovq] {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1 !important;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-portal-logout:hover[b-tmiwixfovq] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4);
}

/* 2. Interactive KPI Workflow Metric Cards */
.kpi-stats-grid[b-tmiwixfovq] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.kpi-card[b-tmiwixfovq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.kpi-card:hover[b-tmiwixfovq] {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -4px rgba(15, 23, 42, 0.08);
}

.kpi-card.active-kpi[b-tmiwixfovq] {
    border-color: #e8730c;
    background: #fffbf7;
    box-shadow: 0 0 0 2px rgba(232, 115, 12, 0.25), 0 8px 18px -4px rgba(232, 115, 12, 0.15);
}

.kpi-icon-box[b-tmiwixfovq] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.bg-blue[b-tmiwixfovq] { background: #eff6ff; color: #2563eb; }
.bg-amber[b-tmiwixfovq] { background: #fef3c7; color: #d97706; }
.bg-purple[b-tmiwixfovq] { background: #faf5ff; color: #9333ea; }
.bg-green[b-tmiwixfovq] { background: #ecfdf5; color: #059669; }
.bg-slate[b-tmiwixfovq] { background: #f1f5f9; color: #64748b; }

.kpi-info[b-tmiwixfovq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-value-row[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kpi-value[b-tmiwixfovq] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.kpi-pulse-dot[b-tmiwixfovq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d97706;
    animation: pulseGlow-b-tmiwixfovq 1.8s infinite;
}

@keyframes pulseGlow-b-tmiwixfovq {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

.kpi-title[b-tmiwixfovq] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. Navigation Tabs */
.portal-nav-tabs[b-tmiwixfovq] {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 22px;
    overflow-x: auto;
}

.portal-tab-btn[b-tmiwixfovq] {
    background: none;
    border: none;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
}

.portal-tab-btn:hover[b-tmiwixfovq] {
    color: #0f172a;
}

.portal-tab-btn.active[b-tmiwixfovq] {
    color: #e8730c;
    border-bottom-color: #e8730c;
    font-weight: 700;
}

.tab-badge[b-tmiwixfovq] {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}

.portal-tab-btn.active .tab-badge[b-tmiwixfovq] {
    background: #fff7ed;
    color: #e8730c;
}

/* 4. Mini-Admin Control Bar & Workflow Filter */
.mini-admin-control-bar[b-tmiwixfovq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.workflow-filter-row[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.workflow-filter-row[b-tmiwixfovq]::-webkit-scrollbar {
    display: none;
}

.workflow-tab-btn[b-tmiwixfovq] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.workflow-tab-btn:hover[b-tmiwixfovq] {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.workflow-tab-btn.active[b-tmiwixfovq] {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.workflow-tab-btn.active .wf-badge[b-tmiwixfovq] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.wf-badge[b-tmiwixfovq] {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.wf-badge.amber-badge[b-tmiwixfovq] {
    background: #fef3c7;
    color: #b45309;
}

.workflow-tab-btn.active .wf-badge.amber-badge[b-tmiwixfovq] {
    background: #f59e0b;
    color: #ffffff;
}

.control-tools-row[b-tmiwixfovq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.search-box-wrap[b-tmiwixfovq] {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 480px;
}

.search-icon[b-tmiwixfovq] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
}

.portal-search-input[b-tmiwixfovq] {
    width: 100%;
    padding: 8px 34px 8px 36px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s;
}

.portal-search-input:focus[b-tmiwixfovq] {
    border-color: #e8730c;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
}

.clear-search-btn[b-tmiwixfovq] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px;
}

.clear-search-btn:hover[b-tmiwixfovq] {
    color: #475569;
}

.tools-right-group[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-sort-select[b-tmiwixfovq] {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    outline: none;
    cursor: pointer;
}

.portal-sort-select:focus[b-tmiwixfovq] {
    border-color: #e8730c;
}

.view-mode-toggle[b-tmiwixfovq] {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 2px;
    border: 1px solid #e2e8f0;
}

.view-btn[b-tmiwixfovq] {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.view-btn.active[b-tmiwixfovq] {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 5. TABLE VIEW: Mini-Admin Data Grid */
.mini-admin-table-container[b-tmiwixfovq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.mini-admin-table[b-tmiwixfovq] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.88rem;
}

.mini-admin-table thead[b-tmiwixfovq] {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.mini-admin-table th[b-tmiwixfovq] {
    padding: 14px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.mini-admin-table tbody tr[b-tmiwixfovq] {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
    cursor: pointer;
}

.mini-admin-table tbody tr:hover[b-tmiwixfovq] {
    background: #fafafa;
}

.mini-admin-table td[b-tmiwixfovq] {
    padding: 14px 16px;
    vertical-align: middle;
}

.tbl-ref-cell[b-tmiwixfovq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tbl-ref-link[b-tmiwixfovq] {
    font-family: monospace;
    font-weight: 700;
    font-size: 0.92rem;
    color: #0f172a;
}

.tbl-created-date[b-tmiwixfovq] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.tbl-service-cell[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
}

.tbl-service-icon[b-tmiwixfovq] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff7ed;
    color: #e8730c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tbl-service-meta[b-tmiwixfovq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tbl-service-title[b-tmiwixfovq] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbl-category-badge[b-tmiwixfovq] {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbl-date-cell[b-tmiwixfovq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tbl-date-main[b-tmiwixfovq] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.88rem;
    white-space: nowrap;
}

.tbl-time-slot[b-tmiwixfovq] {
    font-size: 0.75rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tbl-address-cell[b-tmiwixfovq] {
    max-width: 220px;
}

.tbl-postcode-pill[b-tmiwixfovq] {
    display: inline-block;
    background: #f1f5f9;
    color: #1e293b;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 4px;
    margin-bottom: 2px;
}

.tbl-address-line[b-tmiwixfovq] {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbl-media-chips[b-tmiwixfovq] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.media-mini-chip[b-tmiwixfovq] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.media-mini-chip.has-photos[b-tmiwixfovq] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.media-mini-chip.has-video[b-tmiwixfovq] {
    background: #fdf2f8;
    color: #be185d;
    border-color: #fbcfe8;
}

/* Status Chips */
.status-pill[b-tmiwixfovq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.status-pending[b-tmiwixfovq] {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.status-confirmed[b-tmiwixfovq] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.status-active[b-tmiwixfovq] {
    background: #faf5ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.status-completed[b-tmiwixfovq] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.status-cancelled[b-tmiwixfovq] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.tbl-price-cell[b-tmiwixfovq] {
    font-weight: 800;
    font-size: 0.95rem;
    color: #0f172a;
    white-space: nowrap;
}

.tbl-quote-label[b-tmiwixfovq] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0284c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.tbl-actions-cell[b-tmiwixfovq] {
    white-space: nowrap;
    text-align: right;
}

.btn-tbl-action[b-tmiwixfovq] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-tbl-action:hover[b-tmiwixfovq] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

/* 6. CARDS VIEW: Redesigned Appointment Cards */
.appointments-grid[b-tmiwixfovq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.appointment-card[b-tmiwixfovq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.appointment-card:hover[b-tmiwixfovq] {
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.card-header-bar[b-tmiwixfovq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
}

.ref-info-group[b-tmiwixfovq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ref-tag[b-tmiwixfovq] {
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.ref-date-sub[b-tmiwixfovq] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.card-body-content[b-tmiwixfovq] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.booking-category-breadcrumb[b-tmiwixfovq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 6px;
    width: fit-content;
}

.service-identity[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-icon-box[b-tmiwixfovq] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff7ed;
    color: #e8730c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.service-main-title[b-tmiwixfovq] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.package-name-badge[b-tmiwixfovq] {
    font-size: 0.75rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.appointment-details-list[b-tmiwixfovq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #f1f5f9;
}

.detail-row[b-tmiwixfovq] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
}

.detail-icon[b-tmiwixfovq] {
    color: #94a3b8;
    font-size: 1rem;
    margin-top: 1px;
}

.detail-label[b-tmiwixfovq] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value[b-tmiwixfovq] {
    color: #1e293b;
    font-weight: 600;
}

.time-slot-tag[b-tmiwixfovq] {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.note-row[b-tmiwixfovq] {
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
}

.note-text[b-tmiwixfovq] {
    font-style: italic;
    color: #475569;
    font-weight: 400;
}

/* Stepper Tracker */
.service-stepper[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.stepper-step[b-tmiwixfovq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    min-width: 50px;
    text-align: center;
}

.stepper-step.completed[b-tmiwixfovq] {
    color: #059669;
}

.step-bullet[b-tmiwixfovq] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid #cbd5e1;
}

.stepper-step.completed .step-bullet[b-tmiwixfovq] {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.stepper-line[b-tmiwixfovq] {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    margin: 0 4px 16px 4px;
}

.stepper-line.active[b-tmiwixfovq] {
    background: #10b981;
}

.card-footer-bar[b-tmiwixfovq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.pay-amount[b-tmiwixfovq] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.card-action-btns[b-tmiwixfovq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-card-details[b-tmiwixfovq] {
    padding: 7px 16px;
    background: #0f172a;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-card-details:hover[b-tmiwixfovq] {
    background: #e8730c;
}

.btn-card-cancel[b-tmiwixfovq] {
    padding: 7px 12px;
    background: #ffffff;
    border: 1px solid #fca5a5;
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-card-cancel:hover[b-tmiwixfovq] {
    background: #fee2e2;
}

/* 7. FULL DETAIL SLIDE-OVER / MODAL */
.talep-detail-overlay[b-tmiwixfovq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn 0.2s ease-out;
}

.talep-detail-card[b-tmiwixfovq] {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    border: 1px solid #e2e8f0;
}

.talep-detail-header[b-tmiwixfovq] {
    background: #0f172a;
    color: #ffffff;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header-titles h3[b-tmiwixfovq] {
    margin: 0 0 4px 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-modal-close-btn[b-tmiwixfovq] {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s;
}

.detail-modal-close-btn:hover[b-tmiwixfovq] {
    background: #ef4444;
}

.talep-detail-body[b-tmiwixfovq] {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
}

.detail-section-title[b-tmiwixfovq] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-media-gallery[b-tmiwixfovq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.detail-photo-thumb[b-tmiwixfovq] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: transform 0.2s;
}

.detail-photo-thumb:hover[b-tmiwixfovq] {
    transform: scale(1.04);
    border-color: #e8730c;
}

.talep-detail-footer[b-tmiwixfovq] {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.btn-contact-support[b-tmiwixfovq] {
    padding: 10px 18px;
    background: #2563eb;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-whatsapp-support[b-tmiwixfovq] {
    padding: 10px 18px;
    background: #16a34a;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Empty State */
.empty-state-card[b-tmiwixfovq] {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    margin: 20px 0;
}

.empty-state-icon[b-tmiwixfovq] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-state-card h4[b-tmiwixfovq] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.empty-state-card p[b-tmiwixfovq] {
    font-size: 0.9rem;
    color: #64748b;
    max-width: 440px;
    margin: 0 auto 20px auto;
}

/* Saved Addresses & Profile styles */
.section-top-row h3[b-tmiwixfovq] {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.section-top-row p[b-tmiwixfovq] {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 20px;
}

.addresses-grid[b-tmiwixfovq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.address-card[b-tmiwixfovq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    transition: all 0.2s;
}

.address-card:hover[b-tmiwixfovq] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.address-card-header[b-tmiwixfovq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.address-title[b-tmiwixfovq] {
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-default[b-tmiwixfovq] {
    background: #dcfce7;
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.address-card-body p[b-tmiwixfovq] {
    margin: 0 0 4px 0;
    font-size: 0.86rem;
    color: #475569;
}

.country-text[b-tmiwixfovq] {
    font-size: 0.78rem;
    color: #94a3b8;
}

.profile-card-wrapper[b-tmiwixfovq] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    max-width: 680px;
}

.profile-details-grid[b-tmiwixfovq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.profile-field label[b-tmiwixfovq] {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.profile-field.full-width[b-tmiwixfovq] {
    grid-column: 1 / -1;
}

.profile-field .form-control[b-tmiwixfovq] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #1e293b;
    font-size: 0.9rem;
}

.role-display-box[b-tmiwixfovq] {
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.profile-footer-actions[b-tmiwixfovq] {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 1100px) {
    .kpi-stats-grid[b-tmiwixfovq] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .portal-header-card[b-tmiwixfovq] {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .user-profile-summary[b-tmiwixfovq] {
        flex-direction: column;
        align-items: flex-start;
    }
    .kpi-stats-grid[b-tmiwixfovq] {
        grid-template-columns: repeat(2, 1fr);
    }
    .profile-details-grid[b-tmiwixfovq] {
        grid-template-columns: 1fr;
    }
    .control-tools-row[b-tmiwixfovq] {
        flex-direction: column;
        align-items: stretch;
    }
    .search-box-wrap[b-tmiwixfovq] {
        max-width: 100%;
    }
    .tools-right-group[b-tmiwixfovq] {
        justify-content: space-between;
    }
    .mini-admin-table-container[b-tmiwixfovq] {
        overflow-x: auto;
    }

    .talep-detail-overlay[b-tmiwixfovq] {
        padding: 0 !important;
    }

    .talep-detail-card[b-tmiwixfovq] {
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    .talep-detail-footer[b-tmiwixfovq] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/Handman.Web/Components/Pages/SayfaDetay.razor.rz.scp.css */
.cms-page-wrapper[b-yxk4dbf2yn] {
    background: #f8fafc;
    min-height: 80vh;
    padding-bottom: 4rem;
}

/* ─── CMS HERO ─── */
.cms-hero[b-yxk4dbf2yn] {
    background: linear-gradient(135deg, #0b1325 0%, #1e293b 100%);
    color: #ffffff;
    padding: 3rem 1.5rem 3.5rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cms-hero-container[b-yxk4dbf2yn] {
    max-width: 1040px;
    margin: 0 auto;
}

.cms-breadcrumbs[b-yxk4dbf2yn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}

.cms-breadcrumbs a[b-yxk4dbf2yn] {
    color: #cbd5e1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease;
}

.cms-breadcrumbs a:hover[b-yxk4dbf2yn] {
    color: #e8730c;
}

.cms-breadcrumbs .sep[b-yxk4dbf2yn] {
    font-size: 0.75rem;
    color: #64748b;
}

.cms-breadcrumbs .current[b-yxk4dbf2yn] {
    color: #f1f5f9;
    font-weight: 600;
}

.cms-badge[b-yxk4dbf2yn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(232, 115, 12, 0.15);
    border: 1px solid rgba(232, 115, 12, 0.35);
    color: #fb923c;
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.85rem;
}

.cms-title[b-yxk4dbf2yn] {
    font-size: 2.3rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cms-lead[b-yxk4dbf2yn] {
    font-size: 1.1rem;
    color: #cbd5e1;
    max-width: 780px;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.cms-meta-row[b-yxk4dbf2yn] {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
    flex-wrap: wrap;
}

.cms-meta-row span[b-yxk4dbf2yn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ─── BODY CONTAINER ─── */
.cms-body-container[b-yxk4dbf2yn] {
    max-width: 1040px;
    margin: -1.75rem auto 0 auto;
    padding: 0 1.25rem;
}

.cms-grid[b-yxk4dbf2yn] {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 2rem;
    align-items: start;
}

/* ─── ARTICLE CARD ─── */
.cms-article-card[b-yxk4dbf2yn] {
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem 2.5rem;
    border: 1px solid #e2e8f0;
}

.cms-content-prose[b-yxk4dbf2yn] {
    color: #334155;
    font-size: 1rem;
    line-height: 1.75;
}

.cms-content-prose h2[b-yxk4dbf2yn] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 2rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #f1f5f9;
}

.cms-content-prose h3[b-yxk4dbf2yn] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.cms-content-prose p[b-yxk4dbf2yn] {
    margin-bottom: 1rem;
}

.cms-content-prose ul[b-yxk4dbf2yn], .cms-content-prose ol[b-yxk4dbf2yn] {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.cms-content-prose li[b-yxk4dbf2yn] {
    margin-bottom: 0.5rem;
}

.cms-content-prose .lead[b-yxk4dbf2yn] {
    font-size: 1.15rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.65;
}

/* Article footer */
.cms-article-footer[b-yxk4dbf2yn] {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-note[b-yxk4dbf2yn] {
    font-size: 0.82rem;
    color: #64748b;
}

.footer-actions[b-yxk4dbf2yn] {
    display: flex;
    gap: 0.6rem;
}

/* ─── SIDEBAR ─── */
.cms-sidebar[b-yxk4dbf2yn] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cms-side-card[b-yxk4dbf2yn] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.side-card-title[b-yxk4dbf2yn] {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.side-links-list[b-yxk4dbf2yn] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.side-links-list li a[b-yxk4dbf2yn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.side-links-list li a:hover[b-yxk4dbf2yn] {
    background: #f8fafc;
    color: #0f172a;
}

.side-links-list li a.active[b-yxk4dbf2yn] {
    background: rgba(232, 115, 12, 0.1);
    color: #e8730c;
    font-weight: 700;
}

.help-card[b-yxk4dbf2yn] {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-color: #cbd5e1;
}

.help-card h4[b-yxk4dbf2yn] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 900px) {
    .cms-grid[b-yxk4dbf2yn] {
        grid-template-columns: 1fr;
    }

    .cms-article-card[b-yxk4dbf2yn] {
        padding: 1.75rem 1.25rem;
    }

    .cms-title[b-yxk4dbf2yn] {
        font-size: 1.85rem;
    }
}
/* _content/Handman.Web/Components/Pages/Servisler.razor.rz.scp.css */
.services-directory-page[b-td8le0qo29] {
    width: 100%;
    min-height: 85vh;
    background: #f8fafc;
    padding-bottom: 80px;
}

/* Hero Header */
.services-hero[b-td8le0qo29] {
    background: linear-gradient(135deg, #090d16 0%, #111827 50%, #1e293b 100%);
    color: white;
    padding: 56px 20px 48px;
    border-bottom: 3px solid #e8730c;
    position: relative;
    overflow: hidden;
}

.services-hero[b-td8le0qo29]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(232, 115, 12, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.services-hero-inner[b-td8le0qo29] {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-badge[b-td8le0qo29] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 115, 12, 0.15);
    border: 1px solid rgba(232, 115, 12, 0.35);
    color: #fb923c;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

.hero-title[b-td8le0qo29] {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.hero-desc[b-td8le0qo29] {
    font-size: 16px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Search and Area Filter Container */
.services-search-container[b-td8le0qo29] {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.services-search-bar[b-td8le0qo29] {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 6px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

.services-search-bar:focus-within[b-td8le0qo29] {
    border-color: #e8730c;
    box-shadow: 0 12px 35px rgba(232, 115, 12, 0.3);
}

.services-search-bar .search-icon[b-td8le0qo29] {
    font-size: 18px;
    color: #94a3b8;
    margin-right: 12px;
}

.services-search-bar input[b-td8le0qo29] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #0f172a;
    font-weight: 500;
    background: transparent;
    padding: 8px 0;
}

.services-search-bar input[b-td8le0qo29]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.clear-search-btn[b-td8le0qo29] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 0 6px;
    transition: color 0.2s;
}

.clear-search-btn:hover[b-td8le0qo29] {
    color: #ef4444;
}

.area-filter-pills[b-td8le0qo29] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.area-pill[b-td8le0qo29] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.area-pill:hover[b-td8le0qo29] {
    background: rgba(255, 255, 255, 0.18);
    color: white;
}

.area-pill.active[b-td8le0qo29] {
    background: #e8730c;
    border-color: #e8730c;
    color: white;
    box-shadow: 0 4px 12px rgba(232, 115, 12, 0.35);
}

/* Category Filter Navigation Bar (Sticky) */
.category-nav-bar-wrapper[b-td8le0qo29] {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 60px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.category-nav-bar[b-td8le0qo29] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.category-nav-bar[b-td8le0qo29]::-webkit-scrollbar {
    height: 4px;
}

.category-nav-bar[b-td8le0qo29]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.category-nav-pill[b-td8le0qo29] {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 8px 14px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.category-nav-pill:hover[b-td8le0qo29] {
    background: #e2e8f0;
    color: #0f172a;
}

.category-nav-pill.active[b-td8le0qo29] {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.category-nav-pill.active .pill-count[b-td8le0qo29] {
    background: #e8730c;
    color: white;
}

.pill-icon[b-td8le0qo29] {
    font-size: 15px;
}

.pill-count[b-td8le0qo29] {
    background: #cbd5e1;
    color: #0f172a;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

/* Content Area */
.services-content-wrapper[b-td8le0qo29] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 20px;
}

.services-loading-state[b-td8le0qo29] {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
}

/* Categorized Section Blocks */
.categorized-sections-container[b-td8le0qo29] {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.category-section-block[b-td8le0qo29] {
    scroll-margin-top: 130px;
}

.category-block-header[b-td8le0qo29] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}

.category-title-group[b-td8le0qo29] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.category-block-icon[b-td8le0qo29] {
    font-size: 34px;
    width: 52px;
    height: 52px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.category-block-title[b-td8le0qo29] {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px 0;
    line-height: 1.25;
}

.category-block-title a[b-td8le0qo29] {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s;
}

.category-block-title a:hover[b-td8le0qo29] {
    color: #e8730c;
}

.category-block-desc[b-td8le0qo29] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.category-block-link[b-td8le0qo29] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #e8730c;
    text-decoration: none;
    transition: all 0.2s;
}

.category-block-link:hover[b-td8le0qo29] {
    color: #d66406;
    transform: translateX(3px);
}

/* Filtered View Header */
.filtered-view-header[b-td8le0qo29] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e2e8f0;
}

.filtered-view-title h2[b-td8le0qo29] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.filtered-count[b-td8le0qo29] {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.btn-category-page-link[b-td8le0qo29] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-category-page-link:hover[b-td8le0qo29] {
    background: #1e293b;
    color: #ffffff;
}

/* Services Cards Grid */
.services-cards-grid[b-td8le0qo29] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 24px;
}

/* Service Card Item */
.service-card[b-td8le0qo29] {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.service-card:hover[b-td8le0qo29] {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
    border-color: #cbd5e1;
}

.service-card-media[b-td8le0qo29] {
    position: relative;
    width: 100%;
    height: 195px;
    background: #0f172a;
    overflow: hidden;
}

.service-card-media img[b-td8le0qo29] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.service-card:hover .service-card-media img[b-td8le0qo29] {
    transform: scale(1.05);
}

.badge-tag[b-td8le0qo29] {
    position: absolute;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
    text-decoration: none;
}

.popular-tag[b-td8le0qo29] {
    top: 10px;
    right: 10px;
    background: #f59e0b;
    color: #000000;
}

.category-tag[b-td8le0qo29] {
    bottom: 10px;
    left: 10px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.service-card-content[b-td8le0qo29] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-title[b-td8le0qo29] {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 8px 0;
    line-height: 1.35;
}

.service-title a[b-td8le0qo29] {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s;
}

.service-title a:hover[b-td8le0qo29] {
    color: #e8730c;
}

.service-desc[b-td8le0qo29] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Service Info Row */
.service-info-row[b-td8le0qo29] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.price-badge[b-td8le0qo29] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fixed-price .price-prefix[b-td8le0qo29] {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.fixed-price .price-number[b-td8le0qo29] {
    font-size: 17px;
    font-weight: 800;
    color: #e8730c;
}

.quote-price[b-td8le0qo29] {
    color: #0284c7;
    font-size: 12px;
    font-weight: 700;
}

.duration-badge[b-td8le0qo29] {
    background: #f1f5f9;
    color: #475569;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Service Actions Row */
.service-actions-row[b-td8le0qo29] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-details[b-td8le0qo29] {
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-details:hover[b-td8le0qo29] {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-book[b-td8le0qo29] {
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    background: #e8730c;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-book:hover[b-td8le0qo29] {
    background: #d66406;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Empty State */
.no-services-found[b-td8le0qo29] {
    text-align: center;
    padding: 70px 20px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.no-services-icon[b-td8le0qo29] {
    font-size: 38px;
    color: #94a3b8;
    margin-bottom: 14px;
}

.no-services-found h3[b-td8le0qo29] {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.no-services-found p[b-td8le0qo29] {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
}

.btn-reset-filters[b-td8le0qo29] {
    background: #0f172a;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-reset-filters:hover[b-td8le0qo29] {
    background: #e8730c;
}

/* Mobile Category Menu Bar & Drawer */
.mobile-category-menu-bar[b-td8le0qo29] {
    display: none;
}

.mobile-category-backdrop[b-td8le0qo29] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 1050;
    animation: fadeIn-b-td8le0qo29 0.2s ease;
}

.mobile-category-drawer[b-td8le0qo29] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
    animation: slideUp-b-td8le0qo29 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.drawer-top-header[b-td8le0qo29] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.drawer-title[b-td8le0qo29] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.drawer-total-count[b-td8le0qo29] {
    color: #e8730c;
    font-weight: 700;
    font-size: 14px;
}

.drawer-close-btn[b-td8le0qo29] {
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.drawer-close-btn:hover[b-td8le0qo29] {
    background: #cbd5e1;
    color: #0f172a;
}

.drawer-category-list[b-td8le0qo29] {
    padding: 12px 16px 24px;
    overflow-y: auto;
    max-height: calc(80vh - 65px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drawer-category-item[b-td8le0qo29] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.15s ease;
    width: 100%;
}

.drawer-category-item:hover[b-td8le0qo29] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.drawer-category-item.active[b-td8le0qo29] {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.drawer-category-item.active .item-count[b-td8le0qo29] {
    background: #e8730c;
    color: #ffffff;
}

.drawer-category-item.active .active-check[b-td8le0qo29] {
    color: #fb923c;
    margin-left: auto;
    font-size: 18px;
    font-weight: 800;
}

.item-icon[b-td8le0qo29] {
    font-size: 18px;
    flex-shrink: 0;
}

.item-name[b-td8le0qo29] {
    flex: 1;
}

.item-count[b-td8le0qo29] {
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

@keyframes slideUp-b-td8le0qo29 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes fadeIn-b-td8le0qo29 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .desktop-only-pills[b-td8le0qo29] {
        display: none !important;
    }

    .mobile-category-menu-bar[b-td8le0qo29] {
        display: block;
        padding: 10px 16px;
    }

    .mobile-category-burger-btn[b-td8le0qo29] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #0f172a;
        color: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 10px 14px;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
        transition: background 0.2s ease;
    }

    .mobile-category-burger-btn:hover[b-td8le0qo29] {
        background: #1e293b;
    }

    .burger-left[b-td8le0qo29] {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
    }

    .burger-icon-box[b-td8le0qo29] {
        background: rgba(232, 115, 12, 0.2);
        color: #fb923c;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .burger-info[b-td8le0qo29] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;
        text-align: left;
    }

    .burger-sub[b-td8le0qo29] {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #94a3b8;
        font-weight: 700;
    }

    .burger-title[b-td8le0qo29] {
        font-size: 13px;
        font-weight: 700;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .burger-right[b-td8le0qo29] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .burger-badge[b-td8le0qo29] {
        background: #e8730c;
        color: white;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 10px;
    }

    .burger-arrow[b-td8le0qo29] {
        color: #94a3b8;
        font-size: 13px;
    }

    .hero-title[b-td8le0qo29] {
        font-size: 26px;
    }

    .hero-desc[b-td8le0qo29] {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .category-nav-bar-wrapper[b-td8le0qo29] {
        top: 50px;
    }

    .services-cards-grid[b-td8le0qo29] {
        grid-template-columns: 1fr;
    }

    .category-block-header[b-td8le0qo29] {
        flex-direction: column;
        align-items: flex-start;
    }

    .service-card-media[b-td8le0qo29] {
        height: 180px;
    }
}
/* _content/Handman.Web/Components/Pages/TeklifAl.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   GET A QUOTE PAGE — Wizard & HizmetDetay Flow
   ═══════════════════════════════════════════════════════ */

/* Page Container */
.gq-page[b-63sm834kos] {
    min-height: 100vh;
    background: #f8fafc;
    padding-bottom: 3rem;
}

/* ─── Hero Section ─── */
.gq-hero[b-63sm834kos] {
    position: relative;
    background: linear-gradient(135deg, #0b1325 0%, #1e293b 60%, #0f172a 100%);
    padding: 45px 20px 40px;
    text-align: center;
    overflow: hidden;
}

.gq-hero-bg-pattern[b-63sm834kos] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(232, 115, 12, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.gq-hero-content[b-63sm834kos] {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}

.gq-hero-badge[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 115, 12, 0.15);
    border: 1px solid rgba(232, 115, 12, 0.3);
    color: #fb923c;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.gq-hero h1[b-63sm834kos] {
    font-size: 2.3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}

.gq-hero p[b-63sm834kos] {
    font-size: 1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

/* ─── Main Content Grid ─── */
.gq-main[b-63sm834kos] {
    max-width: 1200px;
    margin: -25px auto 40px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.gq-grid[b-63sm834kos] {
    display: grid;
    grid-template-columns: 1fr 370px;
    gap: 28px;
    align-items: start;
}

/* ─── Form Card (Wizard Container) ─── */
.gq-form-card[b-63sm834kos] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.gq-wizard-header[b-63sm834kos] {
    background: #0f172a;
    padding: 20px 24px;
    color: #ffffff;
}

.gq-wizard-title-wrap[b-63sm834kos] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.gq-wizard-title-wrap h2[b-63sm834kos] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-pkg-badge[b-63sm834kos] {
    background: rgba(232, 115, 12, 0.18);
    border: 1px solid rgba(232, 115, 12, 0.4);
    color: #fb923c;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ─── Modal Step Wizard Progress Bar ─── */
.modal-step-wizard[b-63sm834kos] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
    padding: 12px 18px;
    gap: 10px;
}

.wizard-step-item[b-63sm834kos] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.wizard-step-item.active[b-63sm834kos] {
    color: #e8730c;
    font-weight: 700;
}

.wizard-step-item.completed[b-63sm834kos] {
    color: #10b981;
}

.step-num-circle[b-63sm834kos] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wizard-step-item.active .step-num-circle[b-63sm834kos] {
    background: #e8730c;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.2);
}

.wizard-step-item.completed .step-num-circle[b-63sm834kos] {
    background: #10b981;
    color: #ffffff;
}

/* ─── Wizard Body ─── */
.gq-wizard-body[b-63sm834kos] {
    padding: 24px 28px;
}

.step-intro-desc[b-63sm834kos] {
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ─── Booking Form Fields & Layout ─── */
.category-selection-box[b-63sm834kos] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
}

.booking-form-grid[b-63sm834kos] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.booking-field-group[b-63sm834kos] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.booking-field-group label[b-63sm834kos] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.booking-input[b-63sm834kos] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.92rem;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
}

.booking-input:focus[b-63sm834kos] {
    border-color: #e8730c;
    box-shadow: 0 0 0 3px rgba(232, 115, 12, 0.15);
}

.btn-check-postcode[b-63sm834kos] {
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-check-postcode:hover:not(:disabled)[b-63sm834kos] {
    background: #e8730c;
}

/* ─── STEP 2: MEDIA UPLOADS ─── */
.quote-media-upload-grid[b-63sm834kos] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 14px;
    margin-bottom: 16px;
}

.media-upload-box[b-63sm834kos] {
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.media-upload-box:hover[b-63sm834kos] {
    border-color: #e8730c;
    background: #fff7ed;
    transform: translateY(-2px);
}

.media-upload-icon[b-63sm834kos] {
    font-size: 28px;
    color: #e8730c;
}

.media-upload-label[b-63sm834kos] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.media-upload-hint[b-63sm834kos] {
    font-size: 11.5px;
    color: #64748b;
    margin: 0;
}

/* Previews */
.quote-media-preview-section[b-63sm834kos] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    margin-top: 16px;
}

.quote-preview-header[b-63sm834kos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 6px;
}

.preview-title[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

.badge-count[b-63sm834kos] {
    background: #e2e8f0;
    color: #334155;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.preview-hint[b-63sm834kos] {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
}

.quote-thumbnails-list[b-63sm834kos] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.quote-thumb-item[b-63sm834kos] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: #0f172a;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
}

.quote-thumb-item:hover[b-63sm834kos] {
    transform: translateY(-3px);
    border-color: #f97316;
}

.quote-thumb-item img[b-63sm834kos] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-hover-overlay[b-63sm834kos] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s;
}

.quote-thumb-item:hover .thumb-hover-overlay[b-63sm834kos] {
    opacity: 1;
}

.quote-thumb-remove[b-63sm834kos] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(220, 38, 38, 0.92);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Video Card Preview */
.quote-video-card[b-63sm834kos] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.25s;
}

.quote-video-card:hover[b-63sm834kos] {
    border-color: #dc2626;
    transform: translateY(-2px);
}

.video-card-thumb-wrapper[b-63sm834kos] {
    position: relative;
    width: 90px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    flex-shrink: 0;
}

.video-card-thumb-wrapper video[b-63sm834kos] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-badge[b-63sm834kos] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    color: #ffffff;
    font-size: 1.8rem;
}

.video-card-details[b-63sm834kos] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.video-card-title[b-63sm834kos] {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.video-card-meta[b-63sm834kos] {
    font-size: 0.75rem;
    color: #64748b;
}

.video-card-action[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #dc2626;
}

.quote-video-remove[b-63sm834kos] {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ─── STEP 3: DATE SELECTION ─── */
.date-quick-chips[b-63sm834kos] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.quick-chip-btn[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 24px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-chip-btn:hover[b-63sm834kos], .quick-chip-btn.active[b-63sm834kos] {
    border-color: #ea580c;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 700;
}

.selected-date-callout[b-63sm834kos] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    margin-bottom: 14px;
}

.badge-ready-pill[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #22c55e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.calendar-grid-header[b-63sm834kos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}

.grid-header-title[b-63sm834kos] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.grid-header-note[b-63sm834kos] {
    font-size: 0.78rem;
    color: #64748b;
}

.quote-calendar-grid[b-63sm834kos] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    max-height: 290px;
    overflow-y: auto;
    padding: 8px;
    margin-bottom: 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #fafaf9;
}

.quote-calendar-card[b-63sm834kos] {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quote-calendar-card:hover:not(.disabled)[b-63sm834kos] {
    border-color: #ea580c;
    transform: translateY(-2px);
}

.quote-calendar-card.selected[b-63sm834kos] {
    background: #fff7ed !important;
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25) !important;
}

.card-day-name[b-63sm834kos] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}

.card-day-num[b-63sm834kos] {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.card-month[b-63sm834kos] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
}

.card-avail[b-63sm834kos] {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 4px;
}

.card-avail.open[b-63sm834kos] {
    color: #16a34a;
    background: #dcfce7;
}

.card-avail.booked[b-63sm834kos] {
    color: #dc2626;
    background: #fee2e2;
}

.quote-calendar-card.disabled[b-63sm834kos] {
    opacity: 0.45;
    cursor: not-allowed;
}

.custom-date-row[b-63sm834kos] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}

.custom-date-row label[b-63sm834kos] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.custom-date-input[b-63sm834kos] {
    max-width: 190px !important;
    padding: 6px 10px !important;
}

/* ─── STEP 4: TIME SLOTS & RECAP ─── */
.confirmed-date-summary-chip[b-63sm834kos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    gap: 12px;
}

.summary-chip-icon[b-63sm834kos] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.summary-chip-label[b-63sm834kos] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
}

.summary-chip-date[b-63sm834kos] {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.btn-change-date[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.quote-time-slots-container[b-63sm834kos] {
    margin-top: 18px;
}

.quote-time-slots-header[b-63sm834kos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.quote-time-slots-title[b-63sm834kos] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.takvim-selected-badge[b-63sm834kos] {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #c2410c;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.quote-time-slots-grid[b-63sm834kos] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
}

.quote-time-slot-btn[b-63sm834kos] {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quote-time-slot-btn:hover[b-63sm834kos] {
    border-color: #f97316;
    transform: translateY(-2px);
}

.quote-time-slot-btn.selected[b-63sm834kos] {
    background: #fff7ed !important;
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2) !important;
}

.slot-btn-icon[b-63sm834kos] {
    font-size: 1.25rem;
}

.slot-btn-title[b-63sm834kos] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.slot-btn-sub[b-63sm834kos] {
    font-size: 0.72rem;
    color: #64748b;
}

.quote-recap-box[b-63sm834kos] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recap-row[b-63sm834kos] {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
}

.recap-label[b-63sm834kos] {
    color: #64748b;
}

.recap-val[b-63sm834kos] {
    color: #0f172a;
    font-weight: 700;
    text-align: right;
}

.quote-guarantee-card[b-63sm834kos] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    margin-top: 14px;
}

.guarantee-header-row[b-63sm834kos] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.guarantee-icon-wrap[b-63sm834kos] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.guarantee-title[b-63sm834kos] {
    color: #0f172a;
    font-size: 14.5px;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.guarantee-desc[b-63sm834kos] {
    color: #475569;
    font-size: 12.5px;
    margin: 0;
    line-height: 1.45;
}

.guarantee-pills-row[b-63sm834kos] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.guarantee-pill[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 11.5px;
    font-weight: 700;
}

.agreement-checkbox-row[b-63sm834kos] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

/* ─── Wizard Footer Buttons ─── */
.gq-wizard-footer[b-63sm834kos] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.btn-modal-back[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-back:hover[b-63sm834kos] {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-modal-next[b-63sm834kos] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #e8730c 0%, #c25e00 100%);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-next:hover:not(:disabled)[b-63sm834kos] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(232, 115, 12, 0.35);
}

.btn-modal-next:disabled[b-63sm834kos] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── STEP 5: SUCCESS CONFIRMATION ─── */
.booking-success-wrapper[b-63sm834kos] {
    text-align: center;
    padding: 20px 10px;
}

.success-badge-icon[b-63sm834kos] {
    font-size: 3.5rem;
    color: #16a34a;
    margin-bottom: 12px;
}

.success-pill-badge[b-63sm834kos] {
    display: inline-block;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.booking-ref-box[b-63sm834kos] {
    display: inline-block;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 12px 24px;
    margin: 16px 0 24px 0;
}

.booking-ref-box small[b-63sm834kos] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.booking-ref-box strong[b-63sm834kos] {
    font-size: 1.35rem;
    color: #e8730c;
    font-family: monospace;
}

.dispatch-steps-roadmap[b-63sm834kos] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.roadmap-item[b-63sm834kos] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.roadmap-dot[b-63sm834kos] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.roadmap-item.done .roadmap-dot[b-63sm834kos] {
    background: #16a34a;
    color: #ffffff;
}

.roadmap-item.active .roadmap-dot[b-63sm834kos] {
    background: #e8730c;
    color: #ffffff;
}

.roadmap-content strong[b-63sm834kos] {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.roadmap-content span[b-63sm834kos] {
    font-size: 0.78rem;
    color: #64748b;
}

/* Alert Box */
.alert-danger-box[b-63sm834kos] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── SIDEBAR COLUMN ─── */
.gq-sidebar-column[b-63sm834kos] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gq-info-card[b-63sm834kos] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.gq-info-card h3[b-63sm834kos] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gq-benefits-list[b-63sm834kos] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gq-benefits-list li[b-63sm834kos] {
    display: flex;
    gap: 12px;
}

.gq-benefit-icon[b-63sm834kos] {
    color: #e8730c;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.gq-benefits-list strong[b-63sm834kos] {
    font-size: 0.9rem;
    color: #0f172a;
    display: block;
}

.gq-benefits-list p[b-63sm834kos] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 2px 0 0;
}

.gq-steps-mini[b-63sm834kos] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gq-step-mini[b-63sm834kos] {
    display: flex;
    gap: 12px;
}

.gq-step-num[b-63sm834kos] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e8730c;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.gq-step-mini strong[b-63sm834kos] {
    font-size: 0.9rem;
    color: #0f172a;
    display: block;
}

.gq-step-mini p[b-63sm834kos] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 2px 0 0;
}

.gq-contact-card[b-63sm834kos] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    border: none;
}

.gq-contact-card h3[b-63sm834kos] {
    color: #ffffff;
}

.gq-contact-card p[b-63sm834kos] {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.gq-phone-btn[b-63sm834kos], .gq-whatsapp-btn[b-63sm834kos] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.gq-phone-btn[b-63sm834kos] {
    background: #ffffff;
    color: #0f172a;
}

.gq-phone-btn:hover[b-63sm834kos] {
    background: #f1f5f9;
}

.gq-whatsapp-btn[b-63sm834kos] {
    background: #25d366;
    color: #ffffff;
}

.gq-whatsapp-btn:hover[b-63sm834kos] {
    background: #20ba59;
}

.gq-hours[b-63sm834kos] {
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: center;
    margin: 10px 0 0;
}

/* ─── FULLSCREEN LIGHTBOX & POPUP ─── */
.handman-media-lightbox[b-63sm834kos] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox-dialog[b-63sm834kos] {
    background: #1e293b;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 800px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lightbox-top-bar[b-63sm834kos] {
    padding: 14px 20px;
    background: #0f172a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
}

.lightbox-title[b-63sm834kos] {
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lightbox-close-btn[b-63sm834kos] {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
}

.lightbox-stage[b-63sm834kos] {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    background: #0b1120;
}

.lightbox-full-img[b-63sm834kos] {
    max-width: 100%;
    max-height: 65vh;
    border-radius: 10px;
    object-fit: contain;
}

.lightbox-bottom-bar[b-63sm834kos] {
    padding: 12px 20px;
    background: #0f172a;
    display: flex;
    justify-content: space-between;
}

.lightbox-nav-btn[b-63sm834kos] {
    background: #334155;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 992px) {
    .gq-grid[b-63sm834kos] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .modal-step-wizard[b-63sm834kos] {
        grid-template-columns: 1fr 1fr;
    }
    .booking-form-grid[b-63sm834kos] {
        grid-template-columns: 1fr;
    }
    .quote-media-upload-grid[b-63sm834kos] {
        grid-template-columns: 1fr;
    }
    .gq-wizard-body[b-63sm834kos] {
        padding: 18px 16px;
    }
    .gq-hero h1[b-63sm834kos] {
        font-size: 1.85rem;
    }
}