/* ==========================================================================
   İZEEG STUDIO - HIGGSFIELD 1:1 EXACT STYLESHEET
   Obsidian Dark Theme, Neon Lime (#D4FF00), Magenta (#FF007A)
   ========================================================================== */

:root {
    --hf-bg: #090a0f;
    --hf-card: #13141b;
    --hf-card-hover: #1b1d27;
    --hf-input: #151720;
    --hf-surface: #1e202c;
    --hf-modal: #161822;
    
    --hf-lime: #D4FF00;
    --hf-yellow: #E5FE10;
    --hf-magenta: #FF007A;
    --hf-blue: #0088ff;
    
    --hf-text: #FFFFFF;
    --hf-text-dim: #9FA1B0;
    --hf-text-muted: #646777;
    
    --hf-border: rgba(255, 255, 255, 0.08);
    --hf-border-light: rgba(255, 255, 255, 0.15);
    
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;
    
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', var(--font-sans);
}

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

body.higgsfield-body {
    background-color: var(--hf-bg);
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--hf-text);
    font-family: var(--font-sans);
    overflow-x: hidden;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

a, button {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    transition: all 0.15s ease;
}

/* ==========================================================================
   1. MASTER FIXED HEADER (TOP DUYURU + NAVBAR HİZALAMASI)
   ========================================================================== */
.hf-header-master {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.hf-navbar {
    position: relative;
    height: 76px;
    background: rgba(8, 8, 10, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.hf-nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.hf-social-links-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hf-social-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #9fa1b0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
    text-decoration: none;
    flex-shrink: 0;
}

.hf-social-icon-btn:hover {
    color: #08080A;
    background: var(--hf-lime, #D4FF00);
    border-color: var(--hf-lime, #D4FF00);
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.5);
    transform: translateY(-2px) scale(1.08);
}

.hf-social-icon-btn svg,
.hf-social-icon-btn i {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor;
    display: block;
}

.hf-logo-dropdown-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hf-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.hf-logo-chevron {
    display: none !important;
}

.hf-brand-logo {
    height: 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(212, 255, 0, 0.45), 0 0 8px rgba(212, 255, 0, 0.3);
    border: 2px solid var(--hf-lime);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.25s ease;
    object-fit: cover;
    display: block;
    cursor: pointer;
    background: #000000;
    flex-shrink: 0;
}

.hf-logo-link:hover .hf-brand-logo {
    transform: scale(1.06);
    box-shadow: 0 0 34px rgba(212, 255, 0, 0.8), 0 0 12px rgba(212, 255, 0, 0.6);
}

.hf-brand-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hf-brand-title-text {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #FFFFFF;
    white-space: nowrap;
    line-height: 1;
    display: inline-block;
}

.hf-brand-studio-badge {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 11px;
    font-weight: 800;
    color: #08080A;
    background: var(--hf-lime);
    padding: 2.5px 7px;
    border-radius: 6px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.4);
}

/* HIGGSFIELD EXACT MEGA MENU DROPDOWN (2-3 BOY BÜYÜTÜLMÜŞ PRO FORM) */
.hf-mega-menu {
    position: fixed;
    top: 86px;
    left: 20px;
    width: 900px;
    max-width: 94vw;
    background: linear-gradient(180deg, rgba(16, 18, 26, 0.98) 0%, rgba(10, 11, 16, 0.99) 100%);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    box-shadow: 0 35px 95px rgba(0, 0, 0, 0.98), 0 0 50px rgba(212, 255, 0, 0.12);
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.24s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0.24s ease;
    z-index: 99999;
    padding: 24px 28px 20px;
    box-sizing: border-box;
    pointer-events: none;
}

.hf-mega-menu.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.hf-mega-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.hf-mega-col {
    display: flex;
    flex-direction: column;
}

.hf-mega-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 8px;
}

.hf-mega-col-header i {
    width: 17px;
    height: 17px;
    color: var(--hf-lime);
}

.hf-mega-col-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aa2b8;
}

.hf-mega-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hf-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
    border: 1px solid transparent;
}

.hf-mega-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

.hf-mega-ico {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--hf-lime);
    transition: all 0.2s ease;
}

.hf-mega-ico i {
    width: 20px;
    height: 20px;
}

.hf-mega-item:hover .hf-mega-ico {
    background: rgba(212, 255, 0, 0.16);
    border-color: rgba(212, 255, 0, 0.45);
    color: var(--hf-lime);
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.35);
}

.hf-mega-ico.ico-soul {
    color: var(--hf-lime);
}

.hf-mega-ico.ico-auto {
    color: #00b4d8;
}

.hf-mega-ico.ico-gen {
    color: #a855f7;
}

.hf-mega-text {
    flex: 1;
    min-width: 0;
}

.hf-mega-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}

.hf-mega-top strong {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.hf-mega-text p {
    font-size: 12px;
    color: #9aa2b8;
    line-height: 1.35;
    margin: 0;
    white-space: normal;
}

.hf-mega-item:hover .hf-mega-text p {
    color: #dbe2f3;
}

/* Mega Menu Bottom Footer */
.hf-mega-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hf-mega-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #9aa2b8;
}

.hf-mega-footer-left strong {
    color: #ffffff;
}

.hf-engine-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--hf-lime);
    box-shadow: 0 0 10px var(--hf-lime);
    display: inline-block;
}

.hf-mega-f-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 0, 122, 0.15);
    border: 1px solid rgba(255, 0, 122, 0.45);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-mega-f-btn:hover {
    background: rgba(255, 0, 122, 0.3);
    box-shadow: 0 0 16px rgba(255, 0, 122, 0.6);
}

.hf-mega-f-btn i {
    width: 14px;
    height: 14px;
    color: var(--hf-magenta);
}

.hf-badge-gray {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2.5px 6px;
    border-radius: 5px;
}

.hf-badge-white {
    background-color: #ffffff;
    color: #000;
    font-size: 9.5px;
    font-weight: 900;
    padding: 2.5px 6px;
    border-radius: 5px;
}

.hf-nav-links {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    scroll-behavior: smooth;
    mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
}

.hf-nav-links::-webkit-scrollbar {
    display: none;
}

.hf-nav-item {
    background: transparent;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    border: 1px solid transparent;
}

.hf-nav-item i {
    width: 16px;
    height: 16px;
    color: var(--hf-lime);
}

.hf-nav-item:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.hf-nav-item.active {
    color: #08080a;
    background-color: var(--hf-lime);
    border-color: var(--hf-lime);
    box-shadow: 0 0 22px rgba(212, 255, 0, 0.5);
    font-weight: 800;
}

.hf-nav-item.active i {
    color: #08080a;
}

/* Glowing Pulsing Neon Badges */
@keyframes pulseNeonGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

.hf-badge-hot {
    background-color: var(--hf-magenta);
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    padding: 3.5px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 14px rgba(255, 0, 122, 0.85);
    animation: pulseNeonGlow 2s infinite ease-in-out;
}

.hf-badge-purple {
    background-color: #a855f7;
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    padding: 3.5px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.85);
    animation: pulseNeonGlow 2.3s infinite ease-in-out;
}

.hf-badge-cyan {
    background-color: #00d2ff;
    color: #000;
    font-size: 10.5px;
    font-weight: 900;
    padding: 3.5px 7px;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.85);
    animation: pulseNeonGlow 2.2s infinite ease-in-out;
}

.hf-badge-gold {
    background-color: #facc15;
    color: #000;
    font-size: 10.5px;
    font-weight: 900;
    padding: 3.5px 7px;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.85);
    animation: pulseNeonGlow 2.5s infinite ease-in-out;
}

.hf-badge-yellow {
    background-color: #e5fe10;
    color: #000;
    font-size: 10.5px;
    font-weight: 900;
    padding: 3.5px 7px;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(229, 254, 16, 0.85);
    animation: pulseNeonGlow 1.9s infinite ease-in-out;
}

.hf-badge-orange {
    background-color: #fb923c;
    color: #000;
    font-size: 10.5px;
    font-weight: 900;
    padding: 3.5px 7px;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(251, 146, 60, 0.85);
    animation: pulseNeonGlow 2.1s infinite ease-in-out;
}

.hf-badge-rose {
    background: linear-gradient(135deg, #ff0844, #ffb199);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 6.5px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 16px rgba(255, 8, 68, 0.9);
    animation: pulseNeonGlow 2.2s infinite ease-in-out;
}

.hf-badge-pixar {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 6.5px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.9);
    animation: pulseNeonGlow 2.4s infinite ease-in-out;
}

.hf-badge-blue {
    background-color: #00b4d8;
    color: #000;
    font-size: 9.5px;
    font-weight: 900;
    padding: 2.5px 6px;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(0, 180, 216, 0.85);
    animation: pulseNeonGlow 2.6s infinite ease-in-out;
}

.hf-badge-green {
    background-color: var(--hf-lime);
    color: #000;
    font-size: 9.5px;
    font-weight: 900;
    padding: 2.5px 6px;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.85);
    animation: pulseNeonGlow 2s infinite ease-in-out;
}

/* Nav Right */
.hf-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Language Switcher */
.hf-lang-switch {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--hf-border-light);
    border-radius: var(--radius-full);
    padding: 4px 8px;
    gap: 4px;
    flex-shrink: 0;
}

.hf-lang-btn {
    background: transparent;
    color: var(--hf-text-dim);
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
}

.hf-lang-btn:hover {
    color: #fff;
}

.hf-lang-btn.active {
    background-color: var(--hf-lime);
    color: #000;
    font-weight: 900;
}

.hf-lang-sep {
    font-size: 11px;
    color: var(--hf-text-muted);
    opacity: 0.5;
}

.hf-pricing-btn {
    background: rgba(255, 0, 122, 0.14);
    border: 1px solid rgba(255, 0, 122, 0.4);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    padding: 8px 15px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.hf-pricing-btn:hover {
    background: rgba(255, 0, 122, 0.25);
    box-shadow: 0 0 18px rgba(255, 0, 122, 0.5);
}

.hf-pricing-btn i {
    width: 16px;
    height: 16px;
    color: var(--hf-magenta);
}

.hf-pricing-pill {
    background-color: var(--hf-magenta);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: var(--radius-full);
}

.hf-nav-assets-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.hf-nav-assets-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

.hf-nav-assets-btn i {
    width: 16px;
    height: 16px;
    color: var(--hf-lime);
}

.hf-nav-assets-badge {
    background: var(--hf-lime);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

/* Guest Nav Login Button (Visible when unauthenticated) */
.hf-nav-login-btn {
    background: linear-gradient(135deg, rgba(212, 255, 0, 0.2), rgba(212, 255, 0, 0.06));
    border: 1.5px solid var(--hf-lime);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 0 18px rgba(212, 255, 0, 0.3);
}

.hf-nav-login-btn:hover {
    background: var(--hf-lime);
    color: #08080a;
    box-shadow: 0 0 28px rgba(212, 255, 0, 0.7);
    transform: translateY(-1px);
}

.hf-nav-login-btn i {
    width: 16px;
    height: 16px;
}

/* Free Trial Navbar Button */
.hf-trial-nav-btn {
    background: rgba(212, 255, 0, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hf-lime);
    padding: 7px 15px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-trial-nav-btn:hover {
    background: rgba(212, 255, 0, 0.18);
    border-color: var(--hf-lime);
    box-shadow: 0 0 18px rgba(212, 255, 0, 0.35);
    transform: translateY(-1px);
}

.hf-trial-nav-btn i {
    width: 15px;
    height: 15px;
}

.hf-login-bonus-pill {
    background-color: var(--hf-magenta);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
    box-shadow: 0 0 12px rgba(255, 0, 122, 0.7);
}

/* Profile Wrapper & Dropdown Popover (Higgsfield Exact Screenshot) */
.hf-profile-wrapper {
    position: relative;
    flex-shrink: 0;
}

.hf-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--hf-lime);
    background: rgba(212, 255, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.4);
}

.hf-profile-avatar:hover {
    box-shadow: 0 0 26px rgba(212, 255, 0, 0.75);
    transform: scale(1.06);
}

.hf-avatar-inner {
    width: 32px;
    height: 32px;
    background-color: var(--hf-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-nav-avatar-initial {
    font-size: 13px;
    font-weight: 900;
    color: var(--hf-lime);
}

/* Dropdown Menu Box */
.hf-user-dropdown {
    position: absolute;
    top: 42px;
    right: 0;
    width: 280px;
    background-color: #14151b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 1000;
    animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-user-dropdown.show {
    display: block;
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hf-user-dr-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hf-user-dr-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--hf-lime);
    background: rgba(212, 255, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-user-dr-avatar-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--hf-lime);
}

.hf-user-dr-info {
    flex: 1;
    overflow: hidden;
}

.hf-user-dr-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hf-user-dr-plan {
    font-size: 11px;
    color: var(--hf-text-dim);
    margin-top: 1px;
}

.hf-user-dr-credits {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hf-user-dr-c-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--hf-text-dim);
}

.hf-dr-info-ico {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    color: var(--hf-text-muted);
}

.hf-user-dr-c-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--hf-lime);
    cursor: pointer;
}

.hf-user-dr-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.hf-user-dr-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.hf-user-dr-dots .dot.active {
    background: var(--hf-lime);
    box-shadow: 0 0 6px rgba(212, 255, 0, 0.7);
}

.hf-user-dr-upgrade {
    margin: 12px 14px;
    padding: 10px 12px;
    background: rgba(212, 255, 0, 0.06);
    border: 1px solid rgba(212, 255, 0, 0.25);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-user-dr-upgrade:hover {
    background: rgba(212, 255, 0, 0.12);
    border-color: var(--hf-lime);
}

.hf-dr-up-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hf-dr-crown {
    font-size: 14px;
}

.hf-dr-up-text {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
}

.hf-dr-up-btn {
    background: var(--hf-lime);
    color: #000;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
}

.hf-user-dr-menu {
    padding: 4px 8px;
}

.hf-dr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--hf-text-dim);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hf-dr-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.hf-dr-item i {
    width: 14px;
    height: 14px;
    color: var(--hf-text-muted);
}

.hf-dr-badge-new {
    margin-left: auto;
    background: var(--hf-lime);
    color: #000;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.hf-dr-item-select {
    justify-content: space-between;
}

.hf-dr-lang-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-dr-lang-val {
    font-size: 11.5px;
    color: var(--hf-text-muted);
    font-weight: 600;
}

.hf-user-dr-footer {
    padding: 8px 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hf-dr-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: #ff5555;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hf-dr-logout-btn:hover {
    background: rgba(255, 85, 85, 0.1);
    color: #ff7777;
}

.hf-dr-logout-btn i {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   2. APP LAYOUT & SIDEBAR
   ========================================================================== */
.hf-main-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
}

.hf-sidebar {
    width: 56px;
    background-color: #0c0c11;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    position: fixed;
    top: 96px;
    left: 0;
    bottom: 0;
    z-index: 900;
    transition: opacity 0.2s ease;
}

.hf-sidebar.home-hidden {
    display: none !important;
}

.hf-sidebar-top, .hf-sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
}

/* Higgsfield Tarzı Kutucuklu Kare Buton Tasarımı */
.hf-side-btn {
    background: #14141b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #888899;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hf-side-btn i {
    width: 20px;
    height: 20px;
    transition: transform 0.2s, color 0.2s;
}

.hf-side-btn span {
    display: none !important; /* Asla yazı taşması olmasın, kutucuk ikon kalsın */
}

.hf-side-btn:hover {
    color: #ffffff;
    background-color: #1c1c26;
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.hf-side-btn:hover i {
    transform: scale(1.12);
    color: #ffffff;
}

.hf-side-btn.active {
    color: var(--hf-lime, #d4ff00);
    background-color: rgba(212, 255, 0, 0.08);
    border-color: var(--hf-lime, #d4ff00);
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.25);
}

.hf-side-btn.active i {
    color: var(--hf-lime, #d4ff00);
}

/* ==========================================================================
   3. MARKETING STUDIO CENTER GÖBEK
   ========================================================================== */
.hf-center-canvas {
    flex: 1;
    margin-left: 56px;
    padding: 0;
    max-width: calc(100vw - 56px);
    width: calc(100vw - 48px);
    box-sizing: border-box;
    transition: margin-left 0.2s ease, max-width 0.2s ease, width 0.2s ease;
}

.hf-center-canvas.no-sidebar {
    margin-left: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
}

.hf-hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0;
    width: 100%;
}

.hf-hero-section.category-mode {
    padding-top: 116px;
    padding-bottom: 24px;
}

.hf-marketing-tag {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hf-border);
    padding: 5px 16px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--hf-text-dim);
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* ==========================================================================
   3.1 ARTLIST 1:1 EXACT CINEMATIC VIDEO HERO (SADECE ANA SAYFA)
   ========================================================================== */
.hf-artlist-hero {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 60px;
    border-bottom: 1px solid rgba(212, 255, 0, 0.25);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.95);
    background-color: #08080a;
    box-sizing: border-box;
}

.hf-hero-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.hf-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.05) contrast(1.08);
    opacity: 1;
}

/* Crystal clear video overlay - no muddy dark sheets, lion video is 100% visible */
.hf-hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 10, 0.4) 0%,
        rgba(8, 8, 10, 0.08) 20%,
        transparent 38%,
        transparent 65%,
        rgba(8, 8, 10, 0.6) 85%,
        #08080a 100%
    );
    pointer-events: none;
}

.hf-hero-artlist-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 980px;
    margin-top: 10px;
}

.hf-hero-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    background: rgba(8, 8, 10, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 255, 0, 0.55);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 900;
    color: var(--hf-lime);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 22px;
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.35);
    animation: pulseNeonGlow 2.8s infinite ease-in-out;
}

.hf-hero-tag-pill i {
    width: 15px;
    height: 15px;
}

.hf-artlist-title {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 1);
}

.hf-artlist-title em,
.hf-artlist-title .accent-serif {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--hf-lime);
    text-shadow: 0 0 30px rgba(212, 255, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 1);
}

.hf-artlist-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #e2e8f5;
    max-width: 740px;
    margin: 0 0 26px;
    line-height: 1.6;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 1);
}

.hf-artlist-models {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.hf-model-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(8, 8, 10, 0.75);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    font-family: inherit;
    outline: none;
}

.hf-model-badge:hover {
    border-color: var(--hf-lime);
    background: rgba(212, 255, 0, 0.18);
    color: #ffffff;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 20px rgba(212, 255, 0, 0.45);
}

.hf-model-badge i {
    width: 14px;
    height: 14px;
    color: var(--hf-lime);
}

.hf-artlist-cta-wrap {
    margin-bottom: 16px;
}

.hf-artlist-cta-btn {
    background: var(--hf-lime);
    color: #08080a;
    font-size: 16.5px;
    font-weight: 900;
    padding: 16px 42px;
    border-radius: var(--radius-full);
    box-shadow: 0 0 35px rgba(212, 255, 0, 0.7), 0 4px 18px rgba(0, 0, 0, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: none;
    letter-spacing: 0.02em;
}

.hf-artlist-cta-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 50px rgba(212, 255, 0, 1);
    background-color: #e5fe10;
}

.hf-artlist-cta-btn i {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.hf-artlist-cta-btn:hover i {
    transform: translateX(4px);
}

.hf-artlist-footer-tag {
    font-size: 14px;
    font-weight: 500;
    color: #a8b0c5;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
    .hf-artlist-hero {
        padding: 90px 16px 30px;
        min-height: 520px;
    }
    .hf-artlist-title {
        font-size: 34px;
    }
    .hf-artlist-subtitle {
        font-size: 14.5px;
    }
    .hf-artlist-cta-btn {
        padding: 13px 30px;
        font-size: 15px;
    }
}

/* 3D Coverflow (Büyük, Görkemli & Sinematik 3D Vitrin) */
.hf-coverflow-container {
    width: 100%;
    max-width: 1240px;
    height: 480px;
    position: relative;
    perspective: 1400px;
    margin-top: 10px;
    margin-bottom: 26px;
}

.hf-coverflow-track {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-cf-card {
    position: absolute;
    width: 320px;
    height: 430px;
    border-radius: 22px;
    overflow: hidden;
    background-color: #121319;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.hf-cf-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}

.hf-cf-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0.88;
    transition: opacity 0.35s ease;
    display: block;
}

.hf-cf-card.active video {
    opacity: 1;
}

.hf-card-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 5;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 6px;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.hf-card-badge.motion-badge {
    background: linear-gradient(135deg, #0066ff, #00ccff);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hf-card-badge.motion-badge i {
    width: 12px;
    height: 12px;
}

.hf-cf-card.active {
    transform: translateX(0) scale(1.18) translateZ(120px);
    z-index: 10;
    border: 2px solid var(--hf-lime);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.98), 0 0 45px rgba(212, 255, 0, 0.4);
}

.hf-cf-card.prev-1 {
    transform: translateX(-240px) scale(0.92) rotateY(24deg);
    z-index: 5;
    opacity: 0.9;
}

.hf-cf-card.prev-2 {
    transform: translateX(-470px) scale(0.78) rotateY(36deg);
    z-index: 2;
    opacity: 0.45;
}

.hf-cf-card.next-1 {
    transform: translateX(240px) scale(0.92) rotateY(-24deg);
    z-index: 5;
    opacity: 0.9;
}

.hf-cf-card.next-2 {
    transform: translateX(470px) scale(0.78) rotateY(-36deg);
    z-index: 2;
    opacity: 0.45;
}

/* Slogan */
.hf-slogan-block {
    margin-bottom: 24px;
}

.hf-slogan-main {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
}

.hf-slogan-sub {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hf-text-dim);
    margin-top: 4px;
}

/* Generator Control Bar - Spacious 2-Tier Console */
.hf-generator-bar {
    width: 100%;
    max-width: 1180px;
    background-color: #11131a;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    padding: 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.95), 0 0 40px rgba(212, 255, 0, 0.08);
    position: relative;
    z-index: 10;
}

/* Tier 1: Top Prompt Stage */
.hf-gen-top-tier {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.hf-gen-mode-box {
    display: flex;
    flex-direction: column;
    background-color: #090a0f;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 4px;
    flex-shrink: 0;
}

.hf-mode-btn {
    background: transparent;
    color: #8f95aa;
    font-size: 11.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.2s ease;
}

.hf-mode-btn i {
    width: 16px;
    height: 16px;
}

.hf-mode-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}

.hf-mode-btn.active {
    background-color: #1e212c;
    color: var(--hf-lime);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Prompt Input Stage */
.hf-gen-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #161822;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 8px 12px 8px 18px;
    gap: 12px;
    transition: all 0.2s ease;
}

.hf-gen-input-wrap:focus-within {
    border-color: var(--hf-lime);
    background-color: #191b26;
    box-shadow: 0 0 24px rgba(212, 255, 0, 0.2);
}

.hf-gen-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 500;
    font-family: inherit;
    padding: 6px 0;
    letter-spacing: -0.01em;
}

.hf-gen-input::placeholder {
    color: #7b8296;
    font-weight: 400;
    font-size: 14.5px;
}

.hf-btn-inline-suggest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 255, 0, 0.12);
    border: 1px solid rgba(212, 255, 0, 0.35);
    color: var(--hf-lime);
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.hf-btn-inline-suggest:hover {
    background: var(--hf-lime);
    color: #000;
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.4);
    transform: scale(1.02);
}

/* Right Action Slots */
.hf-gen-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hf-slot-box {
    width: 92px;
    height: 60px;
    background-color: #161822;
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px 4px;
}

.hf-slot-box:hover {
    border-color: var(--hf-lime);
    background-color: rgba(212, 255, 0, 0.08);
    transform: translateY(-1px);
}

.hf-slot-icon {
    color: #8b92a6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-slot-icon i {
    width: 18px;
    height: 18px;
}

.hf-slot-mini-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--hf-lime);
}

.hf-slot-label {
    font-size: 11px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.hf-btn-generate {
    background: var(--hf-lime);
    color: #000;
    padding: 0 26px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 0 35px rgba(212, 255, 0, 0.45);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hf-btn-generate:hover {
    background: #e2ff33;
    transform: translateY(-2px);
    box-shadow: 0 0 50px rgba(212, 255, 0, 0.65);
}

.hf-gen-text {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.hf-gen-cost {
    font-size: 11.5px;
    font-weight: 700;
    opacity: 0.85;
}

/* Tier 2: Bottom Toolbar & Pills */
.hf-gen-bottom-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.hf-gen-pills-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Dropdown Wrapper & Popover Menu */
.hf-pill-dropdown-wrap {
    position: relative;
    display: inline-block;
}

.hf-pill {
    background-color: #171924;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #d1d6e6;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.hf-pill:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: #1f2231;
    color: #ffffff;
}

.hf-pill-voice {
    background-color: rgba(212, 255, 0, 0.08);
    border-color: rgba(212, 255, 0, 0.35);
    color: var(--hf-lime);
}

.hf-pill-voice:hover {
    background-color: rgba(212, 255, 0, 0.16);
    border-color: var(--hf-lime);
    color: #fff;
}

.hf-pill-ico {
    width: 15px;
    height: 15px;
}

.hf-pill-ico.lime, .hf-pill-ico.green {
    color: var(--hf-lime);
}

.hf-pill-arr {
    width: 13px;
    height: 13px;
    color: #8b92a6;
    transition: transform 0.2s ease;
}

.hf-pill-dropdown-wrap.open .hf-pill-arr {
    transform: rotate(180deg);
    color: var(--hf-lime);
}

.hf-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 9999;
    background: #11131b;
    border: 1.5px solid rgba(212, 255, 0, 0.35);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 25px rgba(212, 255, 0, 0.15);
    min-width: 250px;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    animation: dropSlide 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-dropdown-menu.active {
    display: flex;
}

@keyframes dropSlide {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hf-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: #e2e8f0;
    width: 100%;
    text-align: left;
    transition: all 0.15s ease;
    font-family: inherit;
}

.hf-dd-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.hf-dd-item.active {
    background: rgba(212, 255, 0, 0.12);
    border-color: rgba(212, 255, 0, 0.4);
}

.hf-dd-item.active .dd-info strong {
    color: var(--hf-lime);
}

.dd-icon, .dd-flag {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.dd-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dd-info strong {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.dd-info small {
    font-size: 10px;
    color: #8b92a6;
    margin-top: 1px;
}

.dd-check {
    display: none;
    width: 14px;
    height: 14px;
    color: var(--hf-lime);
    flex-shrink: 0;
}

.hf-dd-item.active .dd-check {
    display: inline-block;
}

.hf-pill-counter {
    padding: 4px 10px;
    gap: 8px;
}

.hf-cnt-btn {
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    padding: 0 4px;
    cursor: pointer;
    border: none;
}

.hf-cnt-btn:hover {
    color: var(--hf-lime);
}

#countValText {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

/* Prompt Guide Hints */
.hf-gen-guide-hints {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--hf-text-dim);
    flex-wrap: wrap;
}

.hf-gen-guide-hints .lime-text {
    color: var(--hf-lime);
}

.hf-gen-guide-hints .hint-sep {
    color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   4. EXPLORE TEMPLATES SECTION (CANLI 18+ KART IZGARASI)
   ========================================================================== */
.hf-templates-section {
    margin-top: 36px;
    padding: 0 28px 60px;
    box-sizing: border-box;
    width: 100%;
}

.hf-sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hf-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.hf-sec-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
}

.hf-sec-sub {
    font-size: 11.5px;
    color: var(--hf-text-muted);
}

/* Sub-Navigation Category Pills & Filter Row (Higgsfield Exact Bar) */
.hf-subnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.hf-subnav-categories {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hf-subnav-pill {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd0e0;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
}

.hf-subnav-pill:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.hf-subnav-pill.active {
    background-color: #ffffff;
    color: #08080a;
    font-weight: 800;
    border-color: #ffffff;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* Media Filter Group (Tümü / Görseller / Videolar) */
.hf-filter-group {
    display: inline-flex;
    align-items: center;
    background: #11131a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    padding: 4px;
    gap: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.hf-filter-btn {
    background: transparent;
    border: none;
    color: #9ea5b8;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    font-family: inherit;
}

.hf-filter-btn i {
    width: 14px;
    height: 14px;
}

.hf-filter-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

.hf-filter-btn.active {
    background: #ffffff;
    color: #08080a;
    font-weight: 800;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
}

.hf-filter-btn.active i {
    color: #08080a;
}

/* 5 Columns Immersive Edge-to-Edge Grid (Higgsfield 1:1 Layout) */
.hf-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    width: 100%;
}

.hf-grid.grid-motion {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.hf-grid.grid-posters {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1400px) {
    .hf-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .hf-grid.grid-motion {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .hf-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hf-grid.grid-motion {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .hf-grid.grid-motion {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.hf-grid-card {
    aspect-ratio: 9 / 16;
    min-height: 420px;
    height: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background-color: #101117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.hf-grid-card.aspect-16-9 {
    aspect-ratio: 16 / 9;
    min-height: unset;
    height: auto;
}

.hf-grid-card.aspect-1-1 {
    aspect-ratio: 1 / 1;
    min-height: unset;
    height: auto;
}

.hf-grid-card.aspect-9-16 {
    aspect-ratio: 9 / 16;
    min-height: 420px;
    height: auto;
}

.hf-grid-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--hf-lime);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95), 0 0 25px rgba(212, 255, 0, 0.25);
}

.hf-grid-card img, .hf-grid-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-grid-card:hover img, .hf-grid-card:hover video {
    transform: scale(1.03);
}

.hf-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hf-grid-card:hover .hf-card-video {
    opacity: 1;
}

.hf-card-cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(8, 8, 10, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 5px 9px;
    border-radius: 6px;
    letter-spacing: 0.07em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.hf-card-cat-badge.badge-hot {
    background: linear-gradient(135deg, rgba(255, 0, 122, 0.95), rgba(255, 51, 102, 0.9));
    border-color: #ff007a;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 0, 122, 0.4);
}

.hf-card-cat-badge.badge-gold {
    background: linear-gradient(135deg, rgba(212, 255, 0, 0.95), rgba(180, 220, 0, 0.9));
    border-color: #d4ff00;
    color: #08080a;
    font-weight: 900;
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.35);
}

.hf-card-cat-badge.badge-pixar {
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.95), rgba(0, 102, 255, 0.9));
    border-color: #00ccff;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 204, 255, 0.35);
}

.hf-card-cat-badge.badge-motion {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.95), rgba(0, 204, 255, 0.9));
    border-color: #00ccff;
    color: #ffffff;
}

.hf-card-cat-badge.badge-ugc {
    background: linear-gradient(135deg, var(--hf-magenta), #ff0055);
    border-color: var(--hf-magenta);
}

.hf-card-cat-badge.badge-ref {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--hf-lime);
    color: var(--hf-lime);
}

.hf-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    z-index: 1;
}

.hf-card-tit {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}

.hf-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--hf-text-dim);
}

/* ==========================================================================
   4.1 HIGGSFIELD EXACT HOME BANNER SECTIONS & MASONRY GRIDS
   ========================================================================== */
.hf-home-sections-feed {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 20px;
}

.hf-banner-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hf-banner-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.hf-banner-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hf-banner-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--hf-lime);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.hf-banner-desc {
    font-size: 13.5px;
    color: var(--hf-text-dim);
    max-width: 680px;
    line-height: 1.4;
}

.hf-banner-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    width: fit-content;
    margin-bottom: 2px;
}

.hf-banner-pill-tag.green {
    background: rgba(212, 255, 0, 0.12);
    color: var(--hf-lime);
    border-color: rgba(212, 255, 0, 0.35);
}

.hf-banner-pill-tag.rose {
    background: rgba(255, 8, 68, 0.15);
    color: #ff4b72;
    border-color: rgba(255, 8, 68, 0.4);
    box-shadow: 0 0 14px rgba(255, 8, 68, 0.25);
}

.hf-banner-pill-tag.pixar {
    background: rgba(0, 242, 254, 0.15);
    color: #00f2fe;
    border-color: rgba(0, 242, 254, 0.4);
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.25);
}

.hf-banner-pill-tag i {
    width: 12px;
    height: 12px;
}

.hf-banner-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hf-banner-cta-btn {
    background: var(--hf-lime);
    color: #000;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.35);
    transition: all 0.2s ease;
}

.hf-banner-cta-btn:hover {
    box-shadow: 0 0 24px rgba(212, 255, 0, 0.6);
    transform: translateY(-2px);
}

.hf-banner-cta-btn i {
    width: 14px;
    height: 14px;
}

.hf-dual-cta {
    display: flex;
    gap: 8px;
}

.hf-banner-cta-lime {
    background: var(--hf-lime);
    color: #000;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.35);
    transition: all 0.2s ease;
}

.hf-banner-cta-lime:hover {
    box-shadow: 0 0 24px rgba(212, 255, 0, 0.6);
    transform: translateY(-2px);
}

.hf-banner-cta-glass {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
}

.hf-banner-cta-glass:hover {
    background: rgba(255, 255, 255, 0.16);
}

.hf-banner-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    width: 100%;
}

@media (max-width: 1400px) {
    .hf-banner-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1100px) {
    .hf-banner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .hf-banner-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ==========================================================================
   5. MODAL 1: RECREATE TEMPLATE (HIGGSFIELD EXACT 1:1 SCALE & BLUR)
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 99999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-backdrop.active {
    display: flex !important;
}

.hf-recreate-sheet {
    width: 100%;
    max-width: 1180px;
    height: auto;
    max-height: 92vh;
    background-color: #111218;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 28px 34px;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.95), 0 0 50px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
}

.hf-sheet-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: #a0a5b5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.hf-sheet-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: rotate(90deg);
}

.hf-recreate-body {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    margin-bottom: 18px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .hf-recreate-body {
        grid-template-columns: 1fr;
    }
}

.hf-recreate-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hf-phone-frame {
    width: 100%;
    height: 100%;
    min-height: 420px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background-color: #0b0c10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
    position: relative;
    transition: all 0.3s ease;
}

.hf-phone-frame.aspect-16-9 {
    aspect-ratio: 16 / 9 !important;
    min-height: 240px !important;
    height: auto !important;
    max-height: 320px !important;
}

.hf-phone-frame.aspect-1-1 {
    aspect-ratio: 1 / 1 !important;
    min-height: 300px !important;
    height: auto !important;
    max-height: 360px !important;
}

.hf-phone-frame.aspect-9-16 {
    aspect-ratio: 9 / 16 !important;
    min-height: 420px !important;
}

.hf-phone-frame img, .hf-phone-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hf-recreate-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hf-recreate-heading {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dual / Single Action Slots (Dynamic per Category) */
.hf-dual-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.hf-dual-slots.single-slot {
    grid-template-columns: 1fr !important;
}

.hf-form-group {
    margin-bottom: 12px;
}

.hf-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.hf-lbl-text {
    font-size: 13px;
    font-weight: 700;
    color: #d1d6e6;
    letter-spacing: 0.01em;
}

.hf-lbl-req {
    font-size: 11px;
    color: var(--hf-lime);
    font-weight: 700;
}

.hf-lbl-opt {
    font-size: 11px;
    color: #8b92a6;
    font-weight: 600;
}

.hf-upload-box {
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 16px 14px;
    min-height: 98px;
    background-color: #151722;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.hf-upload-box:hover {
    border-color: rgba(212, 255, 0, 0.6);
    background-color: #1b1e2c;
    transform: translateY(-1px);
}

.hf-slot-thumb {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--hf-lime);
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.5);
}

.hf-up-ico {
    width: 24px;
    height: 24px;
    color: #9aa0b6;
}

.hf-up-txt {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* URL-to-Product Input Field */
.hf-product-url-wrapper {
    margin-bottom: 14px;
}

.hf-url-input-box {
    display: flex;
    align-items: center;
    background-color: #151722;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 7px 10px 7px 14px;
    gap: 10px;
    transition: all 0.2s ease;
}

.hf-url-input-box:focus-within {
    border-color: rgba(212, 255, 0, 0.7);
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.18);
}

.hf-url-ico {
    width: 16px;
    height: 16px;
    color: #8b92a6;
    flex-shrink: 0;
}

.hf-url-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    width: 100%;
    font-family: inherit;
}

.hf-url-input::placeholder {
    color: #6e7488;
}

.hf-url-btn {
    background: var(--hf-lime);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: none;
}

.hf-url-btn:hover {
    background: #e2ff33;
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.5);
    transform: translateY(-1px);
}

.hf-url-btn-ico {
    width: 13px;
    height: 13px;
}

.hf-textarea-wrap {
    position: relative;
    background-color: #151722;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.hf-textarea-wrap:focus-within {
    border-color: rgba(212, 255, 0, 0.7);
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.15);
}

.hf-text-ico {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 16px;
    height: 16px;
    color: #8b92a6;
}

.hf-recreate-area {
    width: 100%;
    height: 76px;
    background: transparent;
    border: none;
    padding: 10px 12px 10px 36px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    outline: none;
}

.hf-recreate-area::placeholder {
    color: #6e7488;
    line-height: 1.5;
}

.hf-bump-box {
    background: rgba(255, 0, 122, 0.08);
    border: 1px solid rgba(255, 0, 122, 0.28);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.hf-bump-label {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.hf-bump-label input {
    accent-color: var(--hf-magenta);
    width: 16px;
    height: 16px;
}

.hf-bump-tit {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    width: 100%;
}

.hf-bump-prc {
    color: var(--hf-magenta);
    font-weight: 800;
}

.hf-bump-sub {
    font-size: 10.5px;
    color: #9da3b7;
    margin-top: 2px;
}

.hf-btn-recreate-green {
    background-color: var(--hf-lime);
    color: #000;
    font-weight: 900;
    font-size: 15px;
    padding: 14px;
    border-radius: 10px;
    width: 100%;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px rgba(212, 255, 0, 0.35);
    border: none;
    cursor: pointer;
}

.hf-btn-recreate-green:hover {
    background-color: #e2ff33;
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.6);
    transform: translateY(-1px);
}

/* Explore More Slider (Higgsfield 1:1 Vertical Cards) */
.hf-explore-more-bar {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 12px;
}

.hf-more-title {
    font-size: 11px;
    font-weight: 800;
    color: #888d9d;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hf-more-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hf-more-slider::-webkit-scrollbar {
    display: none;
}

.hf-more-card {
    min-width: 96px;
    width: 96px;
    height: 136px;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #13141a;
    position: relative;
}

.hf-more-card:hover {
    transform: scale(1.06);
    border-color: var(--hf-lime);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.95);
    z-index: 2;
}

.hf-more-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   6. MODAL 2: AVATARS OVERLAY
   ========================================================================== */
.hf-avatar-sheet {
    width: 100%;
    max-width: 760px;
    background-color: #171821;
    border: 1px solid var(--hf-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    width: 95%;
    max-width: 1100px;
    height: 88vh;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background-color: #0d0e14;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

.hf-av-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: #11131a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hf-av-top-tabs {
    display: flex;
    gap: 6px;
}

.hf-av-tab {
    background: transparent;
    color: var(--hf-text-muted);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
}

.hf-av-tab.active {
    background-color: #fff;
    color: #000;
    font-weight: 700;
}

.hf-av-content {
    display: grid;
    grid-template-columns: 210px 1fr;
    flex: 1;
    overflow: hidden;
}

.hf-av-side {
    background-color: #0e1017;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.hf-av-side-btn {
    background: transparent;
    color: var(--hf-text-dim);
    font-size: 11.5px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transition: all 0.18s ease;
}

.hf-av-side-btn i {
    width: 14px;
    height: 14px;
}

.hf-av-side-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.hf-av-side-btn.active {
    background: rgba(212, 255, 0, 0.12);
    color: var(--hf-lime);
    border-left: 2.5px solid var(--hf-lime);
}

.hf-av-main {
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hf-av-main-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hf-av-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-av-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}

.hf-av-count-badge {
    background: rgba(212, 255, 0, 0.1);
    color: var(--hf-lime);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid rgba(212, 255, 0, 0.25);
}

.hf-av-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #141620;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    flex: 1;
    max-width: 320px;
    transition: border-color 0.2s;
}

.hf-av-search-box:focus-within {
    border-color: var(--hf-lime);
}

.hf-av-search-box i {
    width: 14px;
    height: 14px;
    color: var(--hf-text-muted);
}

.hf-av-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 11.5px;
    width: 100%;
}

.hf-gender-group {
    display: flex;
    background-color: #12141c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px;
    border-radius: var(--radius-full);
    gap: 2px;
}

.hf-g-btn {
    background: transparent;
    color: var(--hf-text-muted);
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    transition: all 0.18s ease;
}

.hf-g-btn.active {
    background-color: #fff;
    color: #000;
    font-weight: 700;
}

.hf-av-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding-bottom: 24px;
}

/* 1. Create Avatar Card (First item in grid) */
.hf-av-create-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #14161f;
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    height: 190px;
    transition: all 0.2s ease;
    gap: 12px;
}

.hf-av-create-card:hover {
    border-color: var(--hf-lime);
    background: rgba(212, 255, 0, 0.04);
    transform: translateY(-2px);
}

.hf-av-create-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.hf-av-create-card:hover .hf-av-create-icon {
    background: var(--hf-lime);
    color: #000;
}

.hf-av-create-label {
    font-size: 11px;
    font-weight: 700;
    color: #ccc;
}

/* 2. Model Cards (3:4 Vertical Fashion Card) */
.hf-av-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    background: transparent;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-av-photo {\n    flex-shrink: 0; /* av-photo */
    width: 100%;
    height: 190px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #111218;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
}

.hf-av-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.hf-av-card:hover .hf-av-photo {
    border-color: rgba(255, 255, 255, 0.3);
}

.hf-av-card:hover .hf-av-photo img {
    transform: scale(1.05);
}

.hf-av-card.active .hf-av-photo {
    border: 2px solid var(--hf-lime);
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.35);
}

/* Hover Select Avatar Lime Capsule Button */
.hf-av-select-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--hf-lime);
    color: #000;
    font-size: 10.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 100px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    z-index: 3;
}

.hf-av-card:hover .hf-av-select-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hf-av-card.active .hf-av-select-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    background: #fff;
    color: #000;
}

.hf-av-name {
    font-size: 11px;
    font-weight: 700;
    color: #eee;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.hf-av-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
}

.hf-av-tag.female {
    background: rgba(255, 0, 122, 0.85);
    color: #fff;
}

.hf-av-tag.male {
    background: rgba(0, 149, 255, 0.85);
    color: #fff;
}

.hf-av-tag.hijab {
    background: rgba(16, 185, 129, 0.85);
    color: #fff;
}

.hf-av-info {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    gap: 2px;
}

.hf-av-name {
    font-size: 10.5px;
    font-weight: 700;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hf-av-style-sub {
    font-size: 9px;
    font-weight: 500;
    color: var(--hf-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   7. PRICING SHEET (Lüks, Geniş & Okunur)
   ========================================================================== */
.hf-pricing-sheet {
    width: 100%;
    max-width: 1220px;
    background-color: #11131a;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 36px 40px;
    position: relative;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.95);
}

.hf-pricing-top {
    text-align: center;
    margin-bottom: 28px;
}

.hf-launch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 255, 0, 0.12);
    color: var(--hf-lime);
    font-size: 11.5px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
    border: 1px solid rgba(212, 255, 0, 0.35);
    letter-spacing: 0.03em;
}

.hf-pricing-top h2 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
}

.hf-pricing-top p {
    font-size: 14.5px;
    color: var(--hf-text-dim);
    margin-top: 6px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hf-pricing-guarantees {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.hf-pricing-guarantees span {
    font-size: 12px;
    font-weight: 700;
    color: #d1d5e5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hf-pricing-guarantees span i {
    width: 14px;
    height: 14px;
    color: var(--hf-lime);
}

.hf-p-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .hf-p-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hf-p-grid-4 {
        grid-template-columns: 1fr;
    }
}

.hf-p-card {
    background-color: #151722;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.25s ease;
}

.hf-p-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 255, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.hf-p-card.popular {
    border-color: var(--hf-lime);
    background: linear-gradient(180deg, rgba(212, 255, 0, 0.08) 0%, rgba(21, 23, 34, 1) 100%);
    box-shadow: 0 0 35px rgba(212, 255, 0, 0.2);
}

.hf-p-ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hf-lime);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.hf-p-badge-top {
    font-size: 10px;
    font-weight: 800;
    color: var(--hf-lime);
    background: rgba(212, 255, 0, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 8px;
}

.hf-p-tier {
    font-size: 11px;
    font-weight: 800;
    color: #8b92a6;
    letter-spacing: 0.03em;
}

.hf-p-izi {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--hf-lime);
    margin: 4px 0;
}

.hf-p-summary {
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 12px;
    min-height: 32px;
}

.hf-p-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.hf-old-price {
    font-size: 13px;
    color: #71778c;
    text-decoration: line-through;
    font-weight: 600;
}

.hf-p-price {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
}

.hf-p-price span {
    font-size: 14px;
    color: var(--hf-text-dim);
}

.hf-per-video-hint {
    font-size: 11.5px;
    color: #9aa0b6;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hf-per-video-hint strong {
    color: var(--hf-lime);
}

.hf-p-list {
    list-style: none;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.hf-p-list li {
    font-size: 12px;
    color: #e2e8f0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.35;
}

.hf-p-list li i {
    width: 14px;
    height: 14px;
    color: var(--hf-lime);
    flex-shrink: 0;
    margin-top: 2px;
}

.hf-btn-buy {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
}

.hf-btn-buy:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

.hf-btn-buy.popular-btn {
    background: var(--hf-lime);
    color: #000;
    border-color: var(--hf-lime);
    box-shadow: 0 4px 18px rgba(212, 255, 0, 0.3);
}

.hf-btn-buy.popular-btn:hover {
    background: #e0ff33;
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.55);
}

/* Order Bump Banner */
.hf-pricing-bump-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 0, 122, 0.07);
    border: 1px solid rgba(255, 0, 122, 0.3);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}

.bump-left {
    flex: 1;
    min-width: 260px;
}

.bump-tag {
    background: var(--hf-magenta);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}

.bump-left h4 {
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.bump-left p {
    font-size: 12px;
    color: #b0b5c7;
}

.bump-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.bump-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bump-price .old-prc {
    font-size: 13px;
    color: #8c92a6;
    text-decoration: line-through;
}

.bump-price strong {
    font-size: 20px;
    color: var(--hf-magenta);
    font-weight: 900;
}

.bump-price strong span {
    font-size: 12px;
    color: #fff;
}

.bump-badge {
    font-size: 11px;
    color: #8b92a6;
    font-style: italic;
}

/* Competitor Comparison Section */
.hf-competitor-comparison-section {
    background: #0e0f16;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-top: 10px;
}

.hf-comp-header {
    text-align: center;
    margin-bottom: 18px;
}

.hf-comp-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-top: 4px;
}

.hf-comp-header p {
    font-size: 12.5px;
    color: #8f95a8;
}

.hf-comp-table-wrap {
    overflow-x: auto;
    margin-bottom: 18px;
}

.hf-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.hf-comp-table th {
    background: #141620;
    color: #8b92a6;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.hf-comp-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    vertical-align: middle;
}

.provider-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.provider-cell .p-icon {
    font-size: 18px;
    line-height: 1;
}

.provider-cell strong {
    font-size: 12.5px;
    color: #fff;
    display: block;
}

.provider-cell small {
    font-size: 10.5px;
    color: #71778c;
}

.cost-high {
    color: #f87171;
    font-weight: 700;
}

.cost-med {
    color: #fbbf24;
    font-weight: 700;
}

.badge-yes {
    color: var(--hf-lime);
    font-weight: 700;
}

.badge-no {
    color: #ef4444;
    font-weight: 600;
}

.badge-neutral {
    color: #94a3b8;
    font-weight: 600;
}

.highlight-izeeg-row {
    background: rgba(212, 255, 0, 0.08) !important;
    border-top: 1.5px solid var(--hf-lime);
    border-bottom: 1.5px solid var(--hf-lime);
}

.highlight-izeeg-row td {
    color: #fff !important;
    font-weight: 600;
}

.izeeg-green-text {
    color: var(--hf-lime) !important;
}

.izeeg-star-badge {
    display: inline-block;
    background: var(--hf-lime);
    color: #000;
    font-size: 9.5px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 2px;
}

.hf-comp-footer-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(212, 255, 0, 0.12) 0%, rgba(212, 255, 0, 0.03) 100%);
    border: 1px solid rgba(212, 255, 0, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-cta-text h4 {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

.footer-cta-text p {
    font-size: 12px;
    color: #cbd5e1;
}

.footer-cta-text strong {
    color: var(--hf-lime);
}

.hf-btn-comp-cta {
    background: var(--hf-lime);
    color: #000;
    font-weight: 900;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hf-btn-comp-cta:hover {
    background: #e2ff33;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.5);
    transform: translateY(-1px);
}

/* ==========================================================================
   8. TOAST
   ========================================================================== */
.hf-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #151620;
    border: 1px solid var(--hf-lime);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 255, 0, 0.25);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    transform: translateY(80px);
    opacity: 0;
    transition: all 0.25s ease;
}

.hf-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.hf-toast-icon {
    font-size: 14px;
    color: var(--hf-lime);
}

.hf-toast-text {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* ==========================================================================
   9. SUPER ADMIN FAST BUTTON & DROPDOWN HIGHLIGHTS
   ========================================================================== */
.hf-admin-nav-btn {
    background: linear-gradient(135deg, rgba(212, 255, 0, 0.18), rgba(255, 215, 0, 0.12));
    border: 1.5px solid rgba(212, 255, 0, 0.5);
    color: var(--hf-lime);
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 15px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    animation: adminPulse 2.5s infinite alternate ease-in-out;
}

@keyframes adminPulse {
    0% { box-shadow: 0 0 12px rgba(212, 255, 0, 0.2); }
    100% { box-shadow: 0 0 24px rgba(212, 255, 0, 0.5); border-color: #d4ff00; }
}

.hf-admin-nav-btn:hover {
    background: var(--hf-lime);
    color: #000;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.7);
}

.hf-admin-nav-crown {
    font-size: 14px;
}

.hf-dr-item-admin {
    background: rgba(212, 255, 0, 0.08) !important;
    color: var(--hf-lime) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--hf-lime);
}

.hf-dr-item-admin:hover {
    background: rgba(212, 255, 0, 0.18) !important;
}

/* ==========================================================================
   9. HIGGSFIELD CLEAN MINIMAL AUTH CARD (#authModal)
   ========================================================================== */
.hf-clean-auth-card {
    width: 100%;
    max-width: 440px;
    background: #0d0f17;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 38px 28px 28px 28px;
    position: relative;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.95), 0 0 50px rgba(212, 255, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 94vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.hf-clean-auth-card::-webkit-scrollbar {
    width: 5px;
}
.hf-clean-auth-card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Header & Centered Logo */
.hf-clean-auth-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hf-clean-auth-logo-box {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hf-clean-auth-logo {
    height: 52px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 4px 20px rgba(212, 255, 0, 0.3));
    transition: transform 0.2s ease;
}
.hf-clean-auth-logo:hover {
    transform: scale(1.04);
}

.hf-clean-auth-title {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.5px;
}

.hf-clean-auth-subtitle {
    font-size: 14px;
    color: #8F94A6;
    margin: 0;
    font-weight: 400;
}

/* Business Email & Bonus Pill (Lime Tinted Highlight Button) */
.hf-clean-bonus-pill {
    width: 100%;
    background: rgba(212, 255, 0, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.35);
    border-radius: 12px;
    padding: 13px 18px;
    color: #D4FF00;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.08);
}

.hf-clean-bonus-pill:hover {
    background: rgba(212, 255, 0, 0.16);
    border-color: #D4FF00;
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(212, 255, 0, 0.22);
}

/* Action SSO Provider Buttons */
.hf-clean-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.hf-clean-sso-btn {
    width: 100%;
    height: 48px;
    background: #141722;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #FFFFFF;
    font-size: 14.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.hf-clean-sso-btn:hover {
    background: #1C2030;
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.hf-clean-sso-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hf-clean-sso-icon-lucide {
    width: 18px;
    height: 18px;
    color: #8F94A6;
    flex-shrink: 0;
}

/* Divider (OR) */
.hf-clean-auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
    position: relative;
}

.hf-clean-auth-divider::before,
.hf-clean-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.hf-clean-auth-divider span {
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: #62677B;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Email Trigger & Form Wrapper */
.hf-clean-email-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.hf-clean-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    animation: fadeInModal 0.2s ease;
}

.hf-clean-form-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #12141C;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 4px;
    margin-bottom: 2px;
}

.hf-clean-form-tab {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8F94A6;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hf-clean-form-tab.active {
    background: #1F2333;
    color: #D4FF00;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hf-clean-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hf-clean-input-group label {
    font-size: 12.5px;
    font-weight: 500;
    color: #A4A9BD;
}

.hf-clean-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hf-clean-forgot {
    font-size: 12px;
    color: #8F94A6;
    text-decoration: none;
    transition: color 0.15s;
}

.hf-clean-forgot:hover {
    color: #D4FF00;
    text-decoration: underline;
}

.hf-clean-input-box {
    display: flex;
    align-items: center;
    background: #12141D;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0 12px;
    height: 44px;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hf-clean-input-box:focus-within {
    border-color: #D4FF00;
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.18);
}

.hf-clean-input-box i {
    width: 16px;
    height: 16px;
    color: #62677B;
    flex-shrink: 0;
}

.hf-clean-input-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-size: 14px;
    width: 100%;
}

.hf-clean-input-box input::placeholder {
    color: #4A4E63;
}

.hf-clean-eye-btn {
    background: transparent;
    border: none;
    color: #8F94A6;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.hf-clean-eye-btn:hover {
    color: #FFFFFF;
}

.hf-clean-submit-btn {
    width: 100%;
    height: 46px;
    background: #D4FF00;
    color: #08080A;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(212, 255, 0, 0.22);
}

.hf-clean-submit-btn:hover {
    background: #E4FF4D;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(212, 255, 0, 0.35);
}

/* Footer SSO / Plan Link */
.hf-clean-auth-footer {
    margin-top: 4px;
    text-align: center;
}

.hf-clean-auth-footer span {
    font-size: 12px;
    color: #62677B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.hf-clean-auth-footer span i {
    width: 14px;
    height: 14px;
    color: #8F94A6;
}

@media (max-width: 480px) {
    .hf-clean-auth-card {
        padding: 30px 18px 22px 18px;
        border-radius: 20px;
        gap: 14px;
    }
    .hf-clean-auth-title {
        font-size: 23px;
    }
    .hf-clean-auth-subtitle {
        font-size: 13.5px;
    }
    .hf-clean-sso-btn {
        height: 46px;
        font-size: 14px;
    }
}

/* ==========================================================================
   SUPER ADMIN DASHBOARD MODAL STYLES (obsidian + lime + gold)
   ========================================================================== */
.modal-backdrop-admin {
    background-color: rgba(5, 6, 8, 0.94);
    backdrop-filter: blur(16px);
}

.hf-admin-sheet {
    width: 96vw;
    max-width: 1320px;
    height: 90vh;
    background-color: #0c0e15;
    border: 1.5px solid rgba(212, 255, 0, 0.35);
    border-radius: 22px;
    padding: 24px 28px;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.98), 0 0 50px rgba(212, 255, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeInModal 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hf-admin-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hf-admin-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid var(--hf-lime);
    object-fit: cover;
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.3);
}

.hf-admin-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-admin-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: 0.5px;
}

.hf-admin-crown-badge {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.hf-admin-subtitle {
    font-size: 12px;
    color: var(--hf-text-dim);
    margin: 3px 0 0 0;
}

.hf-admin-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hf-admin-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: var(--radius-full);
}

.hf-admin-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hf-lime);
    color: #000;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hf-admin-uinfo {
    display: flex;
    flex-direction: column;
}

.hf-admin-uinfo strong {
    font-size: 12px;
    color: #fff;
}

.hf-admin-uinfo span {
    font-size: 10px;
    color: var(--hf-text-dim);
}

.hf-admin-close-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-admin-close-btn:hover {
    background: #ff0055;
    border-color: #ff0055;
    color: #fff;
}

.hf-admin-close-btn i {
    width: 15px;
    height: 15px;
}

.hf-admin-live-strip {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin: 12px 0 16px 0;
    font-size: 11.5px;
    color: var(--hf-text-dim);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hf-live-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hf-live-item i {
    width: 14px;
    height: 14px;
    color: var(--hf-lime);
}

.hf-live-item strong {
    color: #fff;
}

.live-dot-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: liveDotPulse 1.5s infinite;
}

.hf-admin-nav-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hf-admin-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--hf-text-dim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-admin-tab-btn i {
    width: 16px;
    height: 16px;
}

.hf-admin-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.hf-admin-tab-btn.active {
    background: rgba(212, 255, 0, 0.12);
    border-color: rgba(212, 255, 0, 0.35);
    color: var(--hf-lime);
}

.hf-admin-count-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

.hf-admin-count-tag.live {
    background: var(--hf-magenta);
    color: #fff;
}

.hf-admin-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.hf-admin-view {
    display: none;
    flex-direction: column;
    gap: 18px;
}

.hf-admin-view.active {
    display: flex;
}

/* KPI GRID */
.hf-admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.hf-kpi-card {
    background: #13151f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.hf-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hf-kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hf-text-dim);
}

.hf-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-kpi-icon.users { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.hf-kpi-icon.revenue { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.hf-kpi-icon.credit { background: rgba(212, 255, 0, 0.15); color: var(--hf-lime); }
.hf-kpi-icon.video { background: rgba(255, 0, 122, 0.15); color: var(--hf-magenta); }

.hf-kpi-icon i {
    width: 16px;
    height: 16px;
}

.hf-kpi-val {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin: 8px 0 4px 0;
}

.hf-kpi-growth {
    font-size: 11px;
    font-weight: 600;
}

.hf-kpi-growth.pos { color: #22c55e; }
.hf-kpi-growth.note { color: var(--hf-lime); }

/* Fast Actions */
.hf-admin-fast-actions {
    background: #12141e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
}

.hf-admin-fast-actions h3 {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
}

.hf-fast-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hf-f-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.hf-f-btn i { width: 15px; height: 15px; }

.hf-f-btn.lime {
    background: rgba(212, 255, 0, 0.12);
    border-color: rgba(212, 255, 0, 0.35);
    color: var(--hf-lime);
}
.hf-f-btn.lime:hover { background: var(--hf-lime); color: #000; }

.hf-f-btn.cyan {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.35);
    color: #06b6d4;
}
.hf-f-btn.cyan:hover { background: #06b6d4; color: #000; }

.hf-f-btn.gold {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.35);
    color: #ffd700;
}
.hf-f-btn.gold:hover { background: #ffd700; color: #000; }

.hf-f-btn.ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.hf-f-btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Activity Feed */
.hf-admin-feed-section {
    background: #12141e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
}

.hf-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.hf-feed-header h3 {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.hf-btn-feed-refresh {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--hf-text-dim);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: 0.2s;
}

.hf-btn-feed-refresh:hover { color: #fff; border-color: #fff; }
.hf-btn-feed-refresh i { width: 12px; height: 12px; }

.hf-admin-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hf-feed-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #171926;
    border-radius: 8px;
    font-size: 12px;
    border-left: 3px solid var(--hf-lime);
}

.hf-feed-row.pay { border-left-color: #22c55e; }
.hf-feed-row.render { border-left-color: var(--hf-magenta); }
.hf-feed-row.user { border-left-color: #3b82f6; }

.hf-feed-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-feed-text {
    color: #e2e8f0;
}

.hf-feed-text strong {
    color: #fff;
}

.hf-feed-time {
    font-size: 10.5px;
    color: var(--hf-text-muted);
}

/* Tables & Toolbars */
.hf-admin-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.hf-toolbar-search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #141622;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 14px;
    border-radius: 10px;
}

.hf-toolbar-search i { width: 15px; height: 15px; color: var(--hf-text-muted); }
.hf-toolbar-search input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 12.5px;
    width: 100%;
}

.hf-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-admin-select {
    background: #141622;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.hf-admin-btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--hf-lime);
    color: #000;
    font-size: 12.5px;
    font-weight: 800;
    padding: 9px 15px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.3);
    transition: 0.2s;
}

.hf-admin-btn-primary:hover {
    background: #e2ff33;
    transform: translateY(-1px);
}

.hf-admin-btn-primary i { width: 15px; height: 15px; }

.hf-admin-table-wrapper {
    background: #11131c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow-x: auto;
}

.hf-admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 12.5px;
}

.hf-admin-table th {
    background: #161824;
    padding: 12px 14px;
    color: var(--hf-text-dim);
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.hf-admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    vertical-align: middle;
}

.hf-admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

.hf-u-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-u-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(212, 255, 0, 0.2);
    color: var(--hf-lime);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hf-u-avatar-sm.admin {
    background: #ffd700;
    color: #000;
}

.hf-u-names strong {
    display: block;
    color: #fff;
    font-size: 12.5px;
}

.hf-u-names span {
    font-size: 10.5px;
    color: var(--hf-text-dim);
}

.hf-role-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    display: inline-block;
}

.hf-role-pill.admin {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.hf-role-pill.user {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.hf-status-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.hf-status-pill.active { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.hf-status-pill.rendering { background: rgba(234, 179, 8, 0.15); color: #facc15; }
.hf-status-pill.success { background: rgba(34, 197, 94, 0.15); color: #4ade80; }

.hf-tbl-action-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hf-t-btn {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s;
}

.hf-t-btn.grant {
    background: rgba(212, 255, 0, 0.15);
    color: var(--hf-lime);
    border-color: rgba(212, 255, 0, 0.35);
}
.hf-t-btn.grant:hover { background: var(--hf-lime); color: #000; }

.hf-t-btn.delete {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}
.hf-t-btn.delete:hover { background: #ef4444; color: #fff; }

/* Payments Tab Stats */
.hf-admin-pay-stats {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.p-stat-card {
    background: #13151f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--hf-text-dim);
}

.p-stat-card strong {
    color: #22c55e;
    font-size: 15px;
    margin-left: 6px;
}

/* Settings Grid */
.hf-admin-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.hf-settings-card {
    background: #12141e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hf-settings-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hf-settings-head i { width: 20px; height: 20px; color: var(--hf-lime); }
.hf-settings-head h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.hf-settings-desc { font-size: 12px; color: var(--hf-text-dim); margin: 0; }

.hf-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hf-form-group label {
    font-size: 11.5px;
    font-weight: 600;
    color: #cbd5e1;
}

.hf-input-unit {
    display: flex;
    align-items: center;
    background: #181a26;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
}

.hf-input-unit input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    flex: 1;
}

.hf-input-unit span {
    font-size: 12px;
    font-weight: 700;
    color: var(--hf-lime);
}

.hf-btn-save-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--hf-lime);
    color: #000;
    font-size: 13.5px;
    font-weight: 800;
    padding: 12px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.3);
    transition: 0.2s;
}

.hf-btn-save-settings:hover {
    background: #e2ff33;
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.6);
}

.hf-btn-save-settings i { width: 16px; height: 16px; }

/* Sub-modal: Grant Credit Sheet */
.hf-grant-sheet {
    width: 100%;
    max-width: 480px;
    background: #11131c;
    border: 1.5px solid var(--hf-lime);
    border-radius: 20px;
    padding: 26px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95);
    animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-grant-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.hf-grant-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(212, 255, 0, 0.15);
    color: var(--hf-lime);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-grant-ico i { width: 22px; height: 22px; }

.hf-grant-header h3 { font-size: 17px; font-weight: 800; color: #fff; margin: 0; }
.hf-grant-header p { font-size: 12px; color: var(--hf-text-dim); margin: 3px 0 0 0; }

.hf-grant-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hf-grant-current-bakiye {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #181b28;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    color: var(--hf-text-dim);
}

.hf-grant-current-bakiye strong {
    font-size: 16px;
    color: var(--hf-lime);
}

.hf-grant-lbl {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hf-text-dim);
}

.hf-grant-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hf-grant-p-btn {
    background: #181b28;
    border: 1px solid rgba(212, 255, 0, 0.25);
    color: var(--hf-lime);
    font-size: 11.5px;
    font-weight: 700;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.hf-grant-p-btn:hover {
    background: var(--hf-lime);
    color: #000;
}

.hf-grant-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hf-grant-field label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hf-text-dim);
}

.hf-grant-field .unit {
    font-size: 12px;
    font-weight: 700;
    color: var(--hf-lime);
}

.hf-grant-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.hf-grant-cancel-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 11px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.hf-grant-confirm-btn {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--hf-lime);
    color: #000;
    padding: 11px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.35);
}

.hf-grant-confirm-btn:hover {
    background: #e2ff33;
}

/* Responsive Overrides */
@media (max-width: 900px) {
    .hf-auth-split-sheet {
        grid-template-columns: 1fr;
        max-height: 94vh;
    }
    .hf-auth-video-col {
        min-height: 200px;
        max-height: 220px;
    }
    .hf-admin-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    .hf-admin-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   10. VARLIKLAR (ASSETS STORAGE HUB) & NAVBAR BUTTON
   ========================================================================== */
.hf-nav-assets-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hf-border);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-nav-assets-btn:hover {
    background: rgba(212, 255, 0, 0.1);
    border-color: var(--hf-lime);
    color: var(--hf-lime);
}

.hf-nav-assets-btn.active {
    background: var(--hf-lime);
    border-color: var(--hf-lime);
    color: #000;
}

.hf-nav-assets-btn.active .hf-nav-assets-badge {
    background: #000;
    color: var(--hf-lime);
}

.hf-nav-assets-btn i {
    width: 14px;
    height: 14px;
}

.hf-nav-assets-badge {
    background: var(--hf-lime);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

/* Assets View Full Page */
.hf-assets-view {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: calc(100vh - 54px);
    background-color: var(--hf-bg);
}

/* Assets Left Sub-Sidebar */
.hf-assets-sidebar {
    width: 240px;
    border-right: 1px solid var(--hf-border);
    background-color: #0b0c10;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hf-asset-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
}

.hf-asset-search-wrap i {
    width: 14px;
    height: 14px;
    color: var(--hf-text-muted);
}

.hf-asset-search-wrap input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 12px;
    width: 100%;
}

.hf-asset-search-wrap input::placeholder {
    color: var(--hf-text-muted);
}

.hf-asset-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hf-asset-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--hf-text-dim);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hf-asset-nav-item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.hf-asset-nav-item.active {
    color: var(--hf-lime);
    background-color: rgba(212, 255, 0, 0.08);
    font-weight: 700;
}

.hf-asset-nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hf-asset-nav-left i {
    width: 14px;
    height: 14px;
}

.hf-asset-pill {
    font-size: 10px;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    color: var(--hf-text-muted);
}

.hf-asset-nav-item.active .hf-asset-pill {
    background-color: var(--hf-lime);
    color: #000;
}

.hf-asset-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hf-text-muted);
    padding: 6px 10px 0 10px;
}

.hf-asset-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hf-text-muted);
    padding: 6px 10px 0 10px;
}

.hf-asset-add-folder-btn {
    background: transparent;
    color: var(--hf-text-dim);
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-asset-add-folder-btn:hover {
    color: var(--hf-lime);
}

.hf-asset-btn-action {
    color: var(--hf-text-muted);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.hf-asset-btn-action:hover {
    border-color: var(--hf-lime);
    color: var(--hf-lime);
}

/* Assets Content Area */
.hf-assets-content {
    flex: 1;
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.hf-assets-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hf-border);
    margin-bottom: 24px;
}

.hf-assets-top-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.hf-assets-main-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-display);
}

.hf-assets-top-count {
    font-size: 12px;
    color: var(--hf-text-muted);
}

.hf-assets-top-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hf-assets-zoom-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hf-text-muted);
}

.hf-assets-zoom-wrap i {
    width: 14px;
    height: 14px;
}

.hf-assets-zoom-wrap input[type="range"] {
    width: 70px;
    accent-color: var(--hf-lime);
    cursor: pointer;
}

.hf-btn-create-asset {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--hf-lime);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-btn-create-asset:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.5);
}

.hf-btn-create-asset i {
    width: 14px;
    height: 14px;
}

/* Assets Grid */
.hf-assets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hf-assets-grid.scale-1 {
    grid-template-columns: repeat(5, 1fr);
}

.hf-assets-grid.scale-2 {
    grid-template-columns: repeat(4, 1fr);
}

.hf-assets-grid.scale-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Individual Asset Card */
.hf-asset-card {
    background-color: #12131a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.hf-asset-card:hover {
    border-color: var(--hf-lime);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(212, 255, 0, 0.15);
}

.hf-asset-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background-color: #08090d;
    overflow: hidden;
}

.hf-asset-card.aspect-16-9 .hf-asset-thumb-wrap {
    aspect-ratio: 16 / 9;
}

.hf-asset-card.aspect-1-1 .hf-asset-thumb-wrap {
    aspect-ratio: 1 / 1;
}

.hf-asset-thumb-wrap img,
.hf-asset-thumb-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hf-asset-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}

.hf-asset-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s ease;
}

.hf-asset-fav-btn.active {
    color: var(--hf-magenta);
    border-color: var(--hf-magenta);
}

.hf-asset-fav-btn i {
    width: 12px;
    height: 12px;
}

/* Hover Quick Actions Overlay */
.hf-asset-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.hf-asset-card:hover .hf-asset-hover-overlay {
    opacity: 1;
}

.hf-asset-action-circle {
    background: rgba(20, 21, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-asset-action-circle:hover {
    background: var(--hf-lime);
    color: #000;
    border-color: var(--hf-lime);
    transform: scale(1.1);
}

.hf-asset-action-circle i {
    width: 15px;
    height: 15px;
}

.hf-asset-info {
    padding: 10px 12px;
}

.hf-asset-title-text {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.hf-asset-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: var(--hf-text-muted);
}

.hf-asset-dl-link {
    color: var(--hf-lime);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hf-asset-dl-link:hover {
    text-decoration: underline;
}

/* Empty State Illustration Deck */
.hf-assets-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto 0;
    padding: 60px 0;
    text-align: center;
}

.hf-empty-deck {
    position: relative;
    width: 140px;
    height: 110px;
    margin-bottom: 24px;
}

.hf-deck-card {
    position: absolute;
    width: 70px;
    height: 95px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.hf-deck-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hf-deck-card.d1 {
    left: 10px;
    top: 5px;
    transform: rotate(-12deg);
    z-index: 1;
}

.hf-deck-card.d2 {
    left: 35px;
    top: 0;
    transform: rotate(0deg);
    z-index: 2;
    border-color: var(--hf-lime);
}

.hf-deck-card.d3 {
    left: 60px;
    top: 5px;
    transform: rotate(12deg);
    z-index: 1;
}

.hf-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.hf-empty-sub {
    font-size: 12px;
    color: var(--hf-text-muted);
    max-width: 400px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.hf-btn-empty-action {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #000;
    font-size: 12.5px;
    font-weight: 800;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-btn-empty-action:hover {
    background: var(--hf-lime);
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.5);
    transform: translateY(-1px);
}

.hf-btn-empty-action i {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   11. GOOGLE OAUTH SIMULATOR MODAL
   ========================================================================== */
.hf-google-oauth-sheet {
    width: 100%;
    max-width: 400px;
    background-color: #ffffff;
    color: #1f1f1f;
    border-radius: 12px;
    padding: 28px 24px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
    animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-google-oauth-sheet .hf-sheet-close {
    color: #5f6368;
}

.hf-google-header {
    text-align: center;
    margin-bottom: 24px;
}

.hf-google-logo-big {
    margin-bottom: 10px;
}

.hf-google-header h3 {
    font-size: 20px;
    font-weight: 500;
    color: #202124;
    margin-bottom: 4px;
}

.hf-google-header p {
    font-size: 13px;
    color: #5f6368;
}

.hf-google-accounts-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.hf-google-acc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 6px;
}

.hf-google-acc-item:hover {
    background-color: #f5f5f5;
}

.hf-google-acc-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #0b8043;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-google-acc-avatar.other {
    background-color: #e8f0fe;
    color: #1a73e8;
}

.hf-google-acc-info {
    flex: 1;
}

.hf-google-acc-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #202124;
}

.hf-google-acc-email {
    font-size: 11.5px;
    color: #5f6368;
}

.hf-google-acc-badge {
    font-size: 10px;
    color: #137333;
    font-weight: 600;
}

.hf-g-arrow {
    width: 16px;
    height: 16px;
    color: #5f6368;
}

.hf-google-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    font-size: 13px;
    color: #1a73e8;
    font-weight: 600;
}

.hf-google-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(26, 115, 232, 0.2);
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.hf-google-footer {
    margin-top: 18px;
    text-align: center;
}

.hf-google-footer p {
    font-size: 11px;
    color: #5f6368;
    line-height: 1.4;
}

/* ==========================================================================
   12. APPLE OAUTH SIMULATOR MODAL
   ========================================================================== */
.hf-apple-oauth-sheet {
    width: 100%;
    max-width: 380px;
    background-color: #1c1c1e;
    color: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 28px 24px;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95);
    animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-apple-header {
    text-align: center;
    margin-bottom: 22px;
}

.hf-apple-logo-big {
    margin-bottom: 8px;
}

.hf-apple-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hf-apple-header p {
    font-size: 12px;
    color: var(--hf-text-dim);
}

.hf-apple-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hf-apple-acc-box {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
}

.hf-apple-label {
    font-size: 10.5px;
    color: var(--hf-text-muted);
}

.hf-apple-val {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}

.hf-apple-input-wrap {
    display: flex;
    align-items: center;
    background-color: #2c2c2e;
    border-radius: 8px;
    padding: 6px 8px 6px 12px;
}

.hf-apple-input-wrap input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    width: 100%;
}

.hf-apple-submit-btn {
    background: #0071e3;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hf-apple-submit-btn i {
    width: 14px;
    height: 14px;
}

.hf-apple-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--hf-text-dim);
    cursor: pointer;
}

.hf-apple-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    font-size: 12px;
    color: var(--hf-lime);
}

.hf-apple-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ==========================================================================
   13. PROFILE DETAILS & MANAGE ACCOUNT MODALS
   ========================================================================== */
/* ==========================================================================
   13. PROFILE DETAILS & MANAGE ACCOUNT MODALS (LARGE & REGAL)
   ========================================================================== */
.hf-profile-details-sheet {
    width: 100%;
    max-width: 600px;
    background-color: #12131a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 255, 0, 0.1);
}

.hf-prof-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hf-prof-avatar-big {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(212, 255, 0, 0.15);
    border: 3px solid var(--hf-lime);
    color: var(--hf-lime);
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.35);
    flex-shrink: 0;
}

.hf-prof-meta h3 {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.hf-prof-meta p {
    font-size: 13.5px;
    color: var(--hf-text-dim);
    margin-bottom: 8px;
}

.hf-prof-badge-plan {
    font-size: 11px;
    font-weight: 800;
    background: var(--hf-lime);
    color: #000;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    display: inline-block;
}

.hf-prof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}

.hf-prof-stat-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.hf-prof-stat-box .lbl {
    font-size: 11.5px;
    color: var(--hf-text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.hf-prof-stat-box .val {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.hf-prof-actions {
    display: flex;
    gap: 12px;
}

.hf-btn-prof-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--hf-lime);
    color: #000;
    font-weight: 800;
    font-size: 14px;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3);
}

.hf-btn-prof-primary:hover {
    box-shadow: 0 6px 22px rgba(212, 255, 0, 0.5);
    transform: translateY(-1px);
}

.hf-btn-prof-secondary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
}

.hf-btn-prof-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Manage Account Sheet */
.hf-manage-sheet {
    width: 100%;
    max-width: 620px;
    background-color: #12131a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95);
}

.hf-manage-header {
    margin-bottom: 20px;
}

.hf-manage-header h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.hf-manage-header p {
    font-size: 13.5px;
    color: var(--hf-text-dim);
}

.hf-manage-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 24px;
}

.hf-m-tab {
    background: transparent;
    color: var(--hf-text-dim);
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-m-tab.active {
    background: rgba(212, 255, 0, 0.12);
    color: var(--hf-lime);
}

.hf-manage-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 26px;
}

.hf-m-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hf-m-field label {
    font-size: 13px;
    font-weight: 700;
    color: #e0e2ec;
}

.hf-m-field input,
.hf-m-field select {
    background-color: #1a1c26;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    transition: all 0.2s ease;
}

.hf-m-field input:focus,
.hf-m-field select:focus {
    border-color: var(--hf-lime);
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.2);
}

.hf-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #fff;
}

.hf-btn-save-manage {
    width: 100%;
    background: var(--hf-lime);
    color: #000;
    font-weight: 800;
    font-size: 14.5px;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(212, 255, 0, 0.3);
}

.hf-btn-save-manage:hover {
    box-shadow: 0 6px 22px rgba(212, 255, 0, 0.5);
    transform: translateY(-1px);
}

/* ==========================================================================
   14. ASSET PREVIEW MODAL
   ========================================================================== */
.hf-asset-preview-sheet {
    width: 100%;
    max-width: 480px;
    background-color: #121319;
    border: 1px solid var(--hf-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.hf-asset-preview-media {
    width: 100%;
    max-height: 480px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-asset-preview-media video,
.hf-asset-preview-media img {
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.hf-asset-preview-details {
    padding: 18px 20px;
}

.hf-asset-preview-details h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.hf-asset-preview-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--hf-text-muted);
    margin-bottom: 16px;
}

.hf-asset-preview-btns {
    display: flex;
    gap: 10px;
}

.hf-btn-asset-dl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--hf-lime);
    color: #000;
    font-weight: 800;
    font-size: 12.5px;
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.hf-btn-asset-recreate {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* ==========================================================================
   14.1 HOW-TO GUIDE BUTTONS & MODAL (HER SAYFAYA ÖZEL REHBER)
   ========================================================================== */
.hf-cat-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hf-cat-header-row .hf-marketing-tag {
    margin-bottom: 0;
}

.hf-guide-pill-btn {
    background: rgba(212, 255, 0, 0.1);
    border: 1px solid rgba(212, 255, 0, 0.45);
    color: var(--hf-lime);
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 0 14px rgba(212, 255, 0, 0.2);
    letter-spacing: 0.02em;
}

.hf-guide-pill-btn:hover {
    background: rgba(212, 255, 0, 0.22);
    box-shadow: 0 0 22px rgba(212, 255, 0, 0.5);
    transform: translateY(-2px);
    border-color: var(--hf-lime);
}

.hf-guide-pill-btn i {
    width: 14px;
    height: 14px;
}

.hf-guide-pill-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 12px;
    box-shadow: none;
}

.hf-guide-pill-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--hf-lime);
    color: var(--hf-lime);
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.3);
}

.hf-artlist-guide-btn {
    background: rgba(8, 8, 10, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 24px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hf-artlist-guide-btn:hover {
    background: rgba(212, 255, 0, 0.15);
    border-color: var(--hf-lime);
    color: var(--hf-lime);
    box-shadow: 0 0 24px rgba(212, 255, 0, 0.35);
    transform: scale(1.02);
}

.hf-artlist-guide-btn i {
    width: 16px;
    height: 16px;
    color: var(--hf-lime);
}

.hf-banner-guide-link {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #cfd4e2;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-banner-guide-link:hover {
    background: rgba(212, 255, 0, 0.12);
    border-color: var(--hf-lime);
    color: #fff;
    box-shadow: 0 0 14px rgba(212, 255, 0, 0.3);
}

.hf-banner-guide-link i {
    width: 13px;
    height: 13px;
    color: var(--hf-lime);
}

/* Module Guide Sheet Modal (Ultra-Spacious, Readable & High-Contrast) */
.hf-guide-sheet {
    width: 100%;
    max-width: 980px;
    max-height: 90vh;
    background-color: #10121a;
    border: 1.5px solid rgba(212, 255, 0, 0.4);
    border-radius: 24px;
    padding: 36px 42px;
    position: relative;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.98), 0 0 50px rgba(212, 255, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 22px;
}

.hf-guide-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hf-guide-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(212, 255, 0, 0.14);
    border: 2px solid var(--hf-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 28px rgba(212, 255, 0, 0.45);
}

.hf-guide-icon-badge i {
    width: 32px;
    height: 32px;
    color: var(--hf-lime);
}

.hf-guide-header-info {
    flex: 1;
}

.hf-guide-cat-pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: var(--hf-lime);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hf-guide-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.25;
}

.hf-guide-desc {
    font-size: 15px;
    color: #cbd5e1;
    line-height: 1.55;
}

.hf-guide-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hf-guide-card {
    background: #151824;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px 24px;
}

.hf-guide-card.superpower {
    background: linear-gradient(135deg, rgba(212, 255, 0, 0.1) 0%, rgba(20, 23, 34, 0.98) 100%);
    border-color: rgba(212, 255, 0, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.hf-guide-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.hf-guide-card-head h4 {
    font-size: 16.5px;
    font-weight: 800;
    color: #ffffff;
}

.hf-guide-card-head i.neon-lime {
    color: var(--hf-lime);
    width: 22px;
    height: 22px;
}

.hf-guide-card-head i.gold-crown {
    color: #facc15;
    width: 22px;
    height: 22px;
}

.hf-guide-card p {
    font-size: 14.5px;
    color: #e2e8f0;
    line-height: 1.6;
}

.hf-guide-steps-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hf-guide-section-label {
    font-size: 15.5px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.hf-guide-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .hf-guide-steps-grid {
        grid-template-columns: 1fr;
    }
}

.hf-guide-step-card {
    background: #151722;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.25s ease;
}

.hf-guide-step-card:hover {
    border-color: var(--hf-lime);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 255, 0, 0.15);
}

.hf-step-num {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 20px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
}

.hf-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(212, 255, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.hf-step-icon i {
    width: 20px;
    height: 20px;
    color: var(--hf-lime);
}

.hf-guide-step-card h5 {
    font-size: 15.5px;
    font-weight: 800;
    color: #ffffff;
}

.hf-guide-step-card p {
    font-size: 13.5px;
    color: #94a3b8;
    line-height: 1.5;
}

.hf-guide-tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hf-guide-tips-list li {
    font-size: 14.5px;
    color: #e2e8f0;
    line-height: 1.6;
    position: relative;
    padding-left: 26px;
}

.hf-guide-tips-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--hf-lime);
    font-weight: 900;
    font-size: 16px;
}

.hf-guide-info-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 22px;
    gap: 16px;
    flex-wrap: wrap;
}

.hf-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}

.hf-strip-item .lbl {
    color: #94a3b8;
    font-weight: 700;
}

.hf-strip-item .val {
    color: #ffffff;
    font-weight: 800;
}

.hf-guide-footer {
    padding-top: 8px;
}

.hf-btn-guide-action {
    width: 100%;
    background: var(--hf-lime);
    color: #08080a;
    font-size: 16px;
    font-weight: 900;
    padding: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.4);
    transition: all 0.25s ease;
}

.hf-btn-guide-action:hover {
    background: #e0ff33;
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 0 35px rgba(212, 255, 0, 0.6);
}

.hf-btn-guide-action i {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   14. VIP COMPACT WHATSAPP CHECKOUT MODAL
   ========================================================================== */
.hf-simple-checkout-box {
    width: 100%;
    max-width: 480px;
    background-color: #0d0f18;
    border: 1.5px solid rgba(212, 255, 0, 0.45);
    border-radius: 20px;
    padding: 24px 26px;
    position: relative;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.98), 0 0 45px rgba(212, 255, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-s-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
}

.hf-s-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hf-s-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--hf-lime);
    object-fit: cover;
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.35);
}

.hf-s-logo-wrap h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin: 2px 0 0 0;
}

/* Package Strip */
.hf-s-pkg-card {
    background: linear-gradient(135deg, rgba(212, 255, 0, 0.06) 0%, rgba(20, 23, 34, 0.95) 100%);
    border: 1px solid rgba(212, 255, 0, 0.35);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hf-s-pkg-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hf-s-tier {
    font-size: 10px;
    font-weight: 800;
    color: var(--hf-magenta);
    background: rgba(255, 0, 122, 0.12);
    border: 1px solid rgba(255, 0, 122, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.hf-s-ref-code {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px dashed rgba(212, 255, 0, 0.5);
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(212, 255, 0, 0.3);
}

.hf-s-pkg-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.hf-s-pkg-main h4 {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.hf-s-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hf-s-price {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
    color: #fff;
}

.hf-s-price span {
    font-size: 12px;
    color: var(--hf-text-dim);
}

.hf-s-izi {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--hf-lime);
}

.hf-s-ref-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: #4ade80;
    margin-top: 2px;
}

.hf-s-ref-hint i {
    width: 13px;
    height: 13px;
}

/* Form */
.hf-s-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hf-s-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hf-s-field label {
    font-size: 11px;
    font-weight: 700;
    color: var(--hf-text-dim);
}

.hf-s-field .hf-input-wrap {
    display: flex;
    align-items: center;
    background: #141724;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    padding: 9px 12px;
    gap: 8px;
    transition: 0.2s;
}

.hf-s-field .hf-input-wrap:focus-within {
    border-color: var(--hf-lime);
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.25);
}

.hf-s-field .hf-input-wrap i {
    width: 15px;
    height: 15px;
    color: var(--hf-text-muted);
}

.hf-s-field .hf-input-wrap input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    width: 100%;
}

/* Payment Method Tabs in Checkout Modal */
.hf-pay-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #0f1118;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hf-pay-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #94a3b8;
    border: none;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-pay-tab-btn i {
    width: 16px;
    height: 16px;
}

.hf-pay-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.hf-pay-tab-btn.active {
    background: #1e2230;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pay-discount-tag {
    font-size: 9.5px;
    font-weight: 800;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

.pay-fee-tag {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--hf-magenta);
    background: rgba(255, 0, 122, 0.15);
    border: 1px solid rgba(255, 0, 122, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

.hf-pay-tab-content {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.hf-pay-tab-content.active {
    display: flex;
}

/* Bank Info Card (Havale / EFT) */
.hf-bank-info-card {
    background: #11141f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.bank-row .lbl {
    color: var(--hf-text-dim);
    font-weight: 600;
}

.bank-row .val {
    color: #fff;
    font-weight: 700;
}

.bank-row.iban-row {
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px dashed rgba(212, 255, 0, 0.35);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.val-iban {
    font-family: 'JetBrains Mono', monospace, Consolas, Courier;
    color: var(--hf-lime);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    flex: 1;
    word-break: break-all;
}

.btn-copy-iban {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(212, 255, 0, 0.15);
    color: var(--hf-lime);
    border: 1px solid rgba(212, 255, 0, 0.4);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-iban:hover {
    background: var(--hf-lime);
    color: #000;
}

.btn-copy-iban i {
    width: 12px;
    height: 12px;
}

.bank-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
    margin-top: 2px;
    font-size: 12px;
    color: #cbd5e1;
}

.bank-total-row strong {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 900;
    color: #fff;
}

/* Shopier Info Card (Kredi Kartı) */
.hf-shopier-info-card {
    background: linear-gradient(135deg, rgba(255, 0, 122, 0.05) 0%, rgba(17, 20, 31, 0.95) 100%);
    border: 1px solid rgba(255, 0, 122, 0.3);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shopier-badge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shopier-logo-text {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 1px;
    color: #ff3399;
}

.shopier-secure-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 2px 8px;
    border-radius: 4px;
}

.shopier-secure-tag i {
    width: 11px;
    height: 11px;
}

.shopier-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.shopier-calc-row .calc-left {
    display: flex;
    flex-direction: column;
}

.shopier-calc-row .calc-left span {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.shopier-calc-row .calc-left small {
    font-size: 10px;
    color: var(--hf-text-dim);
}

.shopier-calc-price {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    color: var(--hf-magenta);
}

.hf-btn-shopier-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff007a 0%, #d80068 100%);
    color: #fff;
    padding: 11px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(255, 0, 122, 0.35);
    transition: all 0.2s ease;
}

.hf-btn-shopier-pay:hover {
    background: linear-gradient(135deg, #ff2690 0%, #ea0071 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 0, 122, 0.5);
}

.hf-btn-shopier-pay i {
    width: 16px;
    height: 16px;
}

/* Direct WhatsApp Action Button */
.hf-btn-whatsapp-direct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #25D366;
    color: #06200f;
    padding: 13px 18px;
    border-radius: 12px;
    text-decoration: none;
    gap: 12px;
    box-shadow: 0 0 25px rgba(37, 211, 102, 0.4);
    transition: all 0.22s ease;
    cursor: pointer;
}

.hf-btn-whatsapp-direct:hover {
    background: #2ee672;
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(37, 211, 102, 0.6);
}

.hf-btn-whatsapp-direct > i:first-child {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.wa-btn-texts {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wa-btn-texts strong {
    font-size: 13.5px;
    font-weight: 900;
    color: #000;
}

.wa-btn-texts span {
    font-size: 11px;
    color: #0a3a1b;
    font-weight: 600;
}

.wa-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.hf-btn-whatsapp-direct:hover .wa-arrow {
    transform: translateX(4px);
}

/* Footer Note */
.hf-s-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 10.5px;
    color: var(--hf-text-dim);
    line-height: 1.4;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hf-s-footer-note i {
    width: 13px;
    height: 13px;
    color: var(--hf-lime);
    flex-shrink: 0;
    margin-top: 1px;
}

/* WhatsApp Reply Button in Admin Table */
.hf-t-btn.whatsapp {
    background: rgba(37, 211, 102, 0.15);
    color: #25D366;
    border-color: rgba(37, 211, 102, 0.35);
}
.hf-t-btn.whatsapp:hover {
    background: #25D366;
    color: #000;
}
.hf-status-pill.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ==========================================================================
   14. SOUL ID STUDIO & URL-TO-AD SMART SCRAPER STYLES
   ========================================================================== */
.hf-custom-studio-container {
    width: 100%;
    margin-bottom: 40px;
    animation: fadeIn 0.3s ease;
}

/* Studio Banners */
.hf-studio-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    background: linear-gradient(135deg, #13141a 0%, #0c0d12 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.hf-studio-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.soul-id-banner::before {
    background: rgba(212, 255, 0, 0.08);
}

.url-to-ad-banner::before {
    background: rgba(59, 130, 246, 0.12);
}

.hf-studio-banner-left {
    flex: 1;
    position: relative;
    z-index: 1;
}

.hf-studio-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.hf-studio-pill.green {
    background: rgba(212, 255, 0, 0.12);
    color: var(--hf-lime);
    border: 1px solid rgba(212, 255, 0, 0.3);
}

.hf-studio-pill.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.hf-studio-banner-left h2 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.25;
}

.hf-studio-banner-left p {
    font-size: 13.5px;
    color: var(--hf-text-dim);
    max-width: 680px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.hf-studio-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 600;
    color: #e2e8f0;
}

.stat-pill i {
    width: 14px;
    height: 14px;
    color: var(--hf-lime);
}

/* Active Soul ID Badge Card */
.hf-studio-banner-right {
    position: relative;
    z-index: 1;
}

.hf-active-soul-badge-card {
    background: rgba(18, 20, 28, 0.95);
    border: 1.5px solid var(--hf-lime);
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.15);
    border-radius: 16px;
    padding: 16px 20px;
    width: 340px;
}

.soul-badge-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.soul-badge-top .lbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--hf-text-dim);
    letter-spacing: 0.5px;
}

.lock-tag {
    background: rgba(212, 255, 0, 0.15);
    color: var(--hf-lime);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(212, 255, 0, 0.35);
}

.soul-active-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.soul-active-avatar-row img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--hf-lime);
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.3);
}

.soul-active-info h4 {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}

.soul-active-info p {
    font-size: 11px;
    color: var(--hf-text-dim);
    margin-bottom: 4px;
}

.soul-active-info .status-text {
    font-size: 10px;
    font-weight: 700;
    color: var(--hf-lime);
}

/* Studio 2-Column Grid */
.hf-studio-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
}

.hf-studio-card {
    background: #11131a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.hf-studio-card .hf-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.hf-card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hf-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hf-icon-circle.green {
    background: rgba(212, 255, 0, 0.12);
    color: var(--hf-lime);
    border: 1px solid rgba(212, 255, 0, 0.25);
}

.hf-icon-circle.gold {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.hf-card-title-group h3 {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}

.hf-card-title-group p {
    font-size: 11.5px;
    color: var(--hf-text-dim);
}

.hf-studio-card .hf-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ==========================================================================
   SOUL ID / MARKA MANKENİ STUDIO - HIGGSFIELD FACELY ARCHITECTURE
   ========================================================================== */

/* Hero Active Model Action Button */
.soul-hero-action-btn {
    width: 100%;
    background: var(--hf-lime);
    color: #000;
    font-size: 11.5px;
    font-weight: 800;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.soul-hero-action-btn:hover {
    background: #e2ff33;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 255, 0, 0.4);
}

.soul-hero-action-btn i {
    width: 13px;
    height: 13px;
}

/* 3-Tab Navigation Bar */
.soul-tabs-nav-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(18, 20, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 6px 8px;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
}

.soul-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--hf-text-dim);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
}

.soul-nav-tab i {
    width: 16px;
    height: 16px;
}

.soul-nav-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.soul-nav-tab.active {
    background: #1e212d;
    border-color: rgba(212, 255, 0, 0.4);
    color: var(--hf-lime);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.soul-tab-count {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.soul-nav-tab.active .soul-tab-count {
    background: rgba(212, 255, 0, 0.15);
    color: var(--hf-lime);
}

.soul-tab-pill-hot {
    background: var(--hf-magenta);
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* TAB 1: Vitrin Controls & Filters */
.soul-filter-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.soul-filter-chips-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.soul-chip-btn {
    background: #141620;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.soul-chip-btn:hover {
    border-color: rgba(212, 255, 0, 0.35);
    color: #fff;
    transform: translateY(-1px);
}

.soul-chip-btn.active {
    background: rgba(212, 255, 0, 0.12);
    border-color: var(--hf-lime);
    color: var(--hf-lime);
    font-weight: 800;
    box-shadow: 0 0 14px rgba(212, 255, 0, 0.2);
}

.soul-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #141620;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 14px;
    width: 280px;
    transition: 0.2s;
}

.soul-search-wrap:focus-within {
    border-color: var(--hf-lime);
    box-shadow: 0 0 12px rgba(212, 255, 0, 0.2);
}

.soul-search-wrap i {
    width: 15px;
    height: 15px;
    color: #64748b;
}

.soul-search-wrap input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 12.5px;
    width: 100%;
}

/* Models Grid */
.soul-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.soul-model-card {
    background: #0f1118;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.soul-model-card:hover {
    border-color: rgba(212, 255, 0, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 255, 0, 0.15);
}

.soul-model-card.active-locked,
.soul-model-card.is-locked {
    border-color: var(--hf-lime);
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.25);
}

.soul-card-thumb-wrap,
.soul-card-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    background: #08090d;
}

.soul-card-thumb-wrap img,
.soul-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.soul-model-card:hover .soul-card-thumb-wrap img,
.soul-model-card:hover .soul-card-img-wrap img {
    transform: scale(1.05);
}

.soul-card-overlay-badges,
.soul-card-tag-top {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.soul-cat-pill,
.soul-badge-category {
    background: rgba(10, 12, 18, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.soul-pinned-pill,
.soul-badge-locked-overlay {
    background: rgba(212, 255, 0, 0.95);
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.soul-card-locked-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(212, 255, 0, 0.95);
    color: #000;
    font-size: 10.5px;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.soul-card-body,
.soul-card-details {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.soul-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.soul-card-title-row h4,
.soul-card-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soul-age-tag,
.soul-card-age {
    font-size: 11px;
    color: var(--hf-lime);
    font-weight: 700;
    background: rgba(212, 255, 0, 0.1);
    border: 1px solid rgba(212, 255, 0, 0.25);
    padding: 2px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}

.soul-card-style-desc,
.soul-card-meta-desc {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
    min-height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.soul-card-spec-row,
.soul-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.spec-pill,
.soul-mini-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.soul-card-footer {
    padding: 0 16px 14px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-soul-lock-pill,
.soul-card-btn-lock {
    flex: 1;
    background: rgba(212, 255, 0, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.35);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-soul-lock-pill:hover,
.soul-card-btn-lock:hover {
    background: var(--hf-lime);
    color: #000;
    border-color: var(--hf-lime);
    box-shadow: 0 4px 15px rgba(212, 255, 0, 0.35);
}

.btn-soul-lock-pill.active,
.soul-card-btn-lock.is-active {
    background: var(--hf-lime);
    color: #000;
    border-color: var(--hf-lime);
    font-weight: 900;
    cursor: default;
    box-shadow: 0 2px 10px rgba(212, 255, 0, 0.3);
}

.btn-soul-custom-pill {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #d8b4fe;
    font-size: 11.5px;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-soul-custom-pill:hover {
    background: rgba(168, 85, 247, 0.25);
    color: #fff;
    border-color: rgba(168, 85, 247, 0.6);
}

/* TAB 2: PROMPT CREATOR STUDIO */
.soul-creator-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 28px;
}

.soul-creator-left {
    background: #11131b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.soul-panel-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 8px 0 4px 0;
}

.soul-panel-header p {
    font-size: 12.5px;
    color: var(--hf-text-dim);
    margin: 0;
    line-height: 1.45;
}

.soul-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 255, 0, 0.1);
    border: 1px solid rgba(212, 255, 0, 0.25);
    color: var(--hf-lime);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.soul-field-lbl {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hf-text-dim);
    margin-bottom: 6px;
    display: block;
}

.soul-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.soul-quick-chip {
    background: #171924;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
}

.soul-quick-chip:hover {
    background: rgba(212, 255, 0, 0.08);
    border-color: rgba(212, 255, 0, 0.4);
    color: var(--hf-lime);
}

.soul-prompt-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.soul-prompt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.soul-prompt-top label {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.soul-btn-ai-enhance {
    background: rgba(212, 255, 0, 0.1);
    border: 1px solid rgba(212, 255, 0, 0.3);
    color: var(--hf-lime);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s;
}

.soul-btn-ai-enhance:hover {
    background: var(--hf-lime);
    color: #000;
}

.soul-prompt-box-wrap textarea {
    background: #161824;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: 0.2s;
}

.soul-prompt-box-wrap textarea:focus {
    border-color: var(--hf-lime);
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.25);
}

.soul-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.soul-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.soul-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.soul-form-field label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hf-text-dim);
}

.soul-input-inner {
    display: flex;
    align-items: center;
    background: #161824;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 9px 12px;
    gap: 8px;
    transition: 0.2s;
}

.soul-input-inner:focus-within {
    border-color: var(--hf-lime);
}

.soul-input-inner i {
    width: 14px;
    height: 14px;
    color: #64748b;
}

.soul-input-inner input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    width: 100%;
}

.soul-select {
    background: #161824;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: 0.2s;
}

.soul-select:focus {
    border-color: var(--hf-lime);
}

.soul-face-upload-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #161824;
    border: 1.5px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: 0.2s;
}

.soul-face-upload-box:hover {
    border-color: var(--hf-lime);
    background: rgba(212, 255, 0, 0.02);
}

.soul-face-upload-box img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.upload-txt strong {
    font-size: 11.5px;
    color: #fff;
    display: block;
}

.upload-txt span {
    font-size: 10px;
    color: #64748b;
}

.soul-btn-create-glow {
    background: var(--hf-lime);
    color: #000;
    font-size: 14px;
    font-weight: 800;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.35);
}

.soul-btn-create-glow:hover {
    background: #e2ff33;
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(212, 255, 0, 0.5);
}

/* Right Holographic Dossier Card */
.soul-creator-right {
    position: sticky;
    top: 90px;
}

.soul-preview-dossier-card {
    background: #11131b;
    border: 1.5px solid rgba(212, 255, 0, 0.3);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 255, 0, 0.1);
}

.dossier-badge-top {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 0.5px;
}

.live-pulse-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e;
    animation: liveDotPulse 1.5s infinite;
}

.dossier-badge-top .engine-tag {
    margin-left: auto;
    background: rgba(212, 255, 0, 0.15);
    color: var(--hf-lime);
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 4px;
}

.dossier-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    background: #000;
}

.dossier-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dossier-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dossier-name-overlay {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.dossier-meta-overlay {
    font-size: 11.5px;
    color: var(--hf-lime);
    font-weight: 600;
}

.dossier-details-list {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.dossier-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    padding-bottom: 6px;
}

.detail-label {
    color: var(--hf-text-dim);
}

.detail-val {
    color: #fff;
    font-weight: 700;
}

.detail-val.highlight {
    color: var(--hf-lime);
}

/* TAB 3: PORTFOLIO */
.soul-portfolio-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.soul-portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #11131b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
}

.soul-portfolio-header h3 {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px 0;
}

.soul-portfolio-header p {
    font-size: 12.5px;
    color: var(--hf-text-dim);
    margin: 0;
}

.soul-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}

.soul-btn-secondary:hover {
    background: rgba(212, 255, 0, 0.12);
    border-color: var(--hf-lime);
    color: var(--hf-lime);
}

.soul-saved-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
}

.hf-saved-soul-card,
.soul-saved-item-card {
    background: #11131c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.hf-saved-soul-card.active-locked,
.soul-saved-item-card.is-active-locked {
    border-color: var(--hf-lime);
    background: rgba(212, 255, 0, 0.04);
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.15);
}

.soul-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.soul-card-left img,
.soul-saved-avatar-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: #08090d;
    display: block;
}

.hf-saved-soul-card.active-locked .soul-card-left img,
.soul-saved-item-card.is-active-locked .soul-saved-avatar-thumb {
    border-color: var(--hf-lime);
}

.soul-card-meta,
.soul-saved-info {
    flex: 1;
    min-width: 0;
}

.soul-card-meta h4,
.soul-saved-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soul-card-meta p,
.soul-saved-meta {
    font-size: 11.5px;
    color: var(--hf-text-dim);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voice-meta {
    font-size: 10.5px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
}

.soul-card-actions,
.soul-saved-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.badge-locked-pill {
    background: var(--hf-lime);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    padding: 7px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 10px rgba(212, 255, 0, 0.25);
    white-space: nowrap;
}

.btn-select-soul,
.soul-btn-activate {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-select-soul:hover,
.soul-btn-activate:hover {
    background: var(--hf-lime);
    color: #000;
    border-color: var(--hf-lime);
    box-shadow: 0 2px 12px rgba(212, 255, 0, 0.3);
}

@media (max-width: 900px) {
    .soul-creator-grid {
        grid-template-columns: 1fr;
    }
    .soul-creator-right {
        position: static;
    }
    .soul-form-grid-3 {
        grid-template-columns: 1fr;
    }
    .soul-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   URL-TO-AD SMART SCRAPER STYLES
   ========================================================================== */
.hf-supported-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.plat-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    color: #93c5fd;
}

.plat-tag i {
    width: 12px;
    height: 12px;
    color: #60a5fa;
}

/* Quick Demo Box */
.hf-url-quick-demo-box {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    width: 340px;
}

.demo-box-lbl {
    font-size: 11px;
    font-weight: 800;
    color: #93c5fd;
    display: block;
    margin-bottom: 10px;
}

.demo-links-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.demo-link-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s;
}

.demo-link-pill:hover,
.demo-link-pill.active {
    background: rgba(59, 130, 246, 0.18);
    border-color: #60a5fa;
    color: #fff;
    transform: translateX(3px);
}

/* Scraper Input Bar */
.hf-url-scraper-bar {
    margin-bottom: 24px;
}

.hf-url-input-main-wrap {
    display: flex;
    align-items: center;
    background: #141722;
    border: 1.5px solid rgba(59, 130, 246, 0.35);
    border-radius: 16px;
    padding: 6px 8px 6px 16px;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.22s;
}

.hf-url-input-main-wrap:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.25);
}

.url-main-ico {
    width: 20px;
    height: 20px;
    color: #60a5fa;
    flex-shrink: 0;
}

.hf-url-input-main-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    outline: none;
}

.hf-btn-fetch-marketplace {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hf-btn-fetch-marketplace:hover {
    background: #60a5fa;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
}

/* Scraper Progress Pipeline */
.hf-scraper-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #11141e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 24px;
    margin-bottom: 24px;
    animation: fadeIn 0.3s ease;
}

.pipeline-step {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.pipeline-step.active {
    opacity: 1;
}

.pipeline-step.done {
    opacity: 1;
}

.pipeline-step.done .step-ico {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border-color: #22c55e;
}

.step-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.step-texts strong {
    font-size: 12px;
    color: #fff;
    display: block;
}

.step-texts .step-status {
    font-size: 10px;
    color: var(--hf-text-dim);
}

.pipeline-arrow i {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.2);
}

/* Scraped Product Result Card */
.hf-scraped-result-card {
    background: #11131a;
    border: 1.5px solid rgba(59, 130, 246, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.scraped-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(59, 130, 246, 0.08);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.scraped-source-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.scraped-match-score {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #22c55e;
    font-size: 11.5px;
    font-weight: 700;
}

.scraped-match-score i {
    width: 14px;
    height: 14px;
}

.scraped-body-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 28px;
    padding: 28px;
}

.scraped-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scraped-main-preview {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: #000;
}

.scraped-main-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.85);
    color: var(--hf-lime);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(212, 255, 0, 0.4);
}

.scraped-thumbs-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.scraped-thumb-btn {
    width: 100%;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    background: #000;
    cursor: pointer;
    padding: 0;
    transition: all 0.18s;
}

.scraped-thumb-btn.active {
    border-color: var(--hf-lime);
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.3);
}

.scraped-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scraped-controls-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Ad Styles Grid */
.scraped-ad-styles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.ad-style-btn {
    background: #161822;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.ad-style-btn i {
    width: 18px;
    height: 18px;
    color: var(--hf-text-dim);
    margin-bottom: 6px;
}

.ad-style-btn strong {
    font-size: 12.5px;
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.ad-style-btn p {
    font-size: 10.5px;
    color: var(--hf-text-dim);
    margin: 0;
}

.ad-style-btn:hover {
    border-color: rgba(212, 255, 0, 0.4);
    transform: translateY(-2px);
}

.ad-style-btn.active {
    background: rgba(212, 255, 0, 0.08);
    border-color: var(--hf-lime);
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.15);
}

.ad-style-btn.active i {
    color: var(--hf-lime);
}

.hf-btn-generate-scraped-ad {
    width: 100%;
    background: var(--hf-lime);
    color: #000;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 900;
    padding: 16px 24px;
    border-radius: 14px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.4);
    transition: all 0.22s ease;
    margin-top: 8px;
}

.hf-btn-generate-scraped-ad:hover {
    background: #e1ff33;
    transform: translateY(-2px);
    box-shadow: 0 0 45px rgba(212, 255, 0, 0.6);
}

.hf-btn-generate-scraped-ad .cost-tag {
    background: #000;
    color: var(--hf-lime);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
}

/* ==========================================================================
   14.1 PROMPT REHBERİ, SES & DUBLAJ SEÇİCİLERİ, AI SENARYO ÖNERİ STİLLERİ
   ========================================================================== */
.hf-gen-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    position: relative;
}

.hf-btn-inline-suggest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 255, 0, 0.12);
    border: 1px solid rgba(212, 255, 0, 0.35);
    color: var(--hf-lime);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.hf-btn-inline-suggest:hover {
    background: var(--hf-lime);
    color: #000;
    box-shadow: 0 0 15px rgba(212, 255, 0, 0.4);
    transform: scale(1.02);
}

.hf-gen-guide-hints {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--hf-text-dim);
    margin-top: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    flex-wrap: wrap;
}

.hf-gen-guide-hints .lime-text {
    color: var(--hf-lime);
}

.hf-gen-guide-hints .hint-sep {
    color: rgba(255, 255, 255, 0.2);
}

/* Ses & Dublaj Grid Seçicileri */
.hf-voice-lang-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.url-voice-grid {
    grid-template-columns: repeat(5, 1fr);
}

.hf-voice-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.hf-voice-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.hf-voice-btn.active {
    background: rgba(212, 255, 0, 0.1);
    border-color: var(--hf-lime);
    box-shadow: 0 0 16px rgba(212, 255, 0, 0.15);
}

.hf-voice-btn .v-flag {
    font-size: 16px;
    line-height: 1;
}

.hf-voice-btn .v-meta {
    display: flex;
    flex-direction: column;
}

.hf-voice-btn .v-meta strong {
    font-size: 11px;
    color: #fff;
    font-weight: 700;
}

.hf-voice-btn.active .v-meta strong {
    color: var(--hf-lime);
}

.hf-voice-btn .v-meta small {
    font-size: 9px;
    color: var(--hf-text-muted);
}

.hf-voice-btn.active .v-meta small {
    color: rgba(212, 255, 0, 0.8);
}

/* Quick Script Suggester Button in Headers */
.hf-btn-quick-suggest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 255, 0, 0.12);
    border: 1px solid rgba(212, 255, 0, 0.35);
    color: var(--hf-lime);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-btn-quick-suggest:hover {
    background: var(--hf-lime);
    color: #000;
    box-shadow: 0 0 14px rgba(212, 255, 0, 0.4);
}

/* Recreate Pro Guide Chips Box */
.hf-recreate-pro-guide {
    background: rgba(212, 255, 0, 0.04);
    border: 1px dashed rgba(212, 255, 0, 0.28);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
}

.hf-recreate-pro-guide .guide-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hf-lime);
    margin-bottom: 9px;
}

.hf-recreate-pro-guide .guide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hf-recreate-pro-guide .g-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hf-recreate-pro-guide .g-chip:hover {
    background: rgba(212, 255, 0, 0.18);
    border-color: var(--hf-lime);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 255, 0, 0.2);
}

/* ==========================================================================
   15. HIGGSFIELD EXACT MOBILE FIRST SYSTEM & RESPONSIVE ARCHITECTURE
   ========================================================================== */

/* Desktop / Default state for Mobile Bottom Dock and Mobile Hero Container */
.hf-mobile-bottom-dock {
    display: none;
}
.hf-mobile-hero-container {
    display: none;
}

@media (max-width: 1200px) {
    .hf-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hf-assets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .hf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hf-recreate-body {
        grid-template-columns: 1fr;
    }
    .hf-av-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hf-assets-view {
        flex-direction: column;
    }
    .hf-assets-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--hf-border);
    }
    .hf-assets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hf-voice-lang-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   TOP NEON ANNOUNCEMENT BANNER (HIGGSFIELD EXACT 1:1 PROMO STRIP)
   ========================================================================== */
.hf-top-announcement-bar {
    width: 100%;
    background: #D4FF00;
    color: #08080A;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 1005;
    box-shadow: 0 2px 12px rgba(212, 255, 0, 0.35);
}

.hf-announcement-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.hf-ann-icon {
    width: 16px;
    height: 16px;
    color: #08080A;
    flex-shrink: 0;
}

.hf-ann-action-btn {
    background: #08080A;
    color: #D4FF00;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease;
}

.hf-ann-action-btn:hover {
    transform: scale(1.05);
}

.hf-brand-title-text {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    white-space: nowrap;
    font-family: var(--font-display);
}

.hf-nav-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
}

.hf-nav-social-btn:hover {
    color: #08080A;
    background: var(--hf-lime, #D4FF00);
    border-color: var(--hf-lime, #D4FF00);
    box-shadow: 0 0 14px rgba(212, 255, 0, 0.45);
    transform: scale(1.08);
}

.hf-mega-mobile-header {
    display: none;
}

/* ==========================================================================
   SMARTPHONE & MOBILE DEVICE EXCELLENCE (< 768px) - HIGGSFIELD 1:1 EXACT
   ========================================================================== */
@media (max-width: 768px) {
    /* Master Header Container on mobile */
    .hf-header-master {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    /* Top Announcement Bar on mobile */
    .hf-top-announcement-bar {
        font-size: 11px !important;
        padding: 5px 8px !important;
        gap: 6px !important;
        height: 28px !important;
    }

    .hf-ann-action-btn {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    /* 1. Global Page Layout & Safe Area Padding */
    body.higgsfield-body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden !important;
        -webkit-tap-highlight-color: transparent;
    }

    .hf-main-wrapper {
        padding-top: 94px !important;
    }

    /* 2. Top Header on Mobile (Clean, Single Row, Large Luminous Logo, Social Trio & Actions) */
    .hf-navbar {
        height: 66px !important;
        padding: 0 12px !important;
        background: rgba(8, 8, 10, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hf-nav-left {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .hf-logo-dropdown-wrapper {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .hf-logo-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Hide desktop horizontal category links in navbar */
    .hf-nav-links {
        display: none !important;
    }

    /* Generous, Luminous, Regal Lion Logo on Mobile */
    .hf-brand-logo {
        height: 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        border-radius: 13px !important;
        border: 2px solid var(--hf-lime) !important;
        box-shadow: 0 0 20px rgba(212, 255, 0, 0.55), 0 0 6px rgba(212, 255, 0, 0.3) !important;
        object-fit: cover !important;
        display: block !important;
        cursor: pointer !important;
        background: #000000 !important;
        flex-shrink: 0 !important;
    }

    .hf-brand-title-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .hf-brand-title-text {
        display: inline-block !important;
        font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #FFFFFF !important;
        letter-spacing: 0.6px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .hf-brand-studio-badge {
        display: inline-block !important;
        font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        color: #08080A !important;
        background: var(--hf-lime) !important;
        padding: 2px 5px !important;
        border-radius: 5px !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        box-shadow: 0 0 10px rgba(212, 255, 0, 0.4) !important;
    }

    @media (max-width: 380px) {
        .hf-brand-studio-badge {
            display: none !important;
        }
    }

    .hf-logo-chevron {
        display: none !important;
    }

    /* Social Media Trio (Instagram, TikTok, YouTube) in the header gap */
    .hf-social-links-group {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-left: 10px !important;
        flex-shrink: 0 !important;
    }

    @media (max-width: 680px) {
        .hf-social-links-group {
            display: none !important;
        }
    }

    .hf-social-icon-btn {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        text-decoration: none !important;
        transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
        flex-shrink: 0 !important;
    }

    .hf-social-icon-btn:active {
        transform: scale(0.9) !important;
    }

    .hf-social-icon-btn svg {
        width: 13px !important;
        height: 13px !important;
    }

    .hf-soc-instagram:hover,
    .hf-soc-instagram:active {
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
        color: #ffffff !important;
        border-color: transparent !important;
    }

    .hf-soc-tiktok {
        color: #00f2fe !important;
        border-color: rgba(0, 242, 254, 0.3) !important;
    }

    .hf-soc-tiktok:hover,
    .hf-soc-tiktok:active {
        background: #000000 !important;
        border-color: #00f2fe !important;
        color: #00f2fe !important;
        box-shadow: 0 0 10px rgba(0, 242, 254, 0.5) !important;
    }

    .hf-soc-youtube {
        color: #ff3344 !important;
        border-color: rgba(255, 51, 68, 0.3) !important;
    }

    .hf-soc-youtube:hover,
    .hf-soc-youtube:active {
        background: #ff0000 !important;
        border-color: #ff0000 !important;
        color: #ffffff !important;
    }

    .hf-trial-nav-btn {
        display: none !important;
    }

    .hf-nav-assets-btn,
    .hf-admin-nav-btn {
        display: none !important;
    }

    .hf-nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .hf-lang-switch {
        display: flex !important;
        padding: 3px 6px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .hf-lang-btn {
        font-size: 10px !important;
        font-weight: 700 !important;
        padding: 2px 5px !important;
    }

    .hf-lang-sep {
        font-size: 10px !important;
        color: rgba(255, 255, 255, 0.3) !important;
    }

    .hf-pricing-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        border-radius: 16px !important;
        background: rgba(255, 0, 122, 0.15) !important;
        border: 1px solid rgba(255, 0, 122, 0.4) !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 30px !important;
    }

    .hf-pricing-btn i {
        display: none !important;
    }

    .hf-pricing-pill {
        font-size: 9px !important;
        padding: 2px 5px !important;
        background: var(--hf-magenta) !important;
        color: #fff !important;
        border-radius: 6px !important;
        font-weight: 800 !important;
    }

    .hf-profile-avatar {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hf-nav-signup-btn,
    .hf-nav-login-btn {
        padding: 5px 12px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        height: 30px !important;
        border-radius: 16px !important;
        background: var(--hf-lime, #D4FF00) !important;
        color: #08080A !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 0 12px rgba(212, 255, 0, 0.35) !important;
    }

    /* Mega Menu Full-Screen Modal Drawer for Mobile (No upward shifting) */
    .hf-mega-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .hf-mega-menu.active,
    .hf-logo-dropdown-wrapper.active .hf-mega-menu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 20px 16px calc(30px + env(safe-area-inset-bottom)) 16px !important;
        transform: translateY(0) !important;
        background: rgba(10, 11, 16, 0.98) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;
        z-index: 3000 !important;
        overflow-y: auto !important;
        border: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .hf-mega-mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-bottom: 14px !important;
    }

    .hf-mega-mob-brand {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
    }

    .hf-mega-mob-logo {
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
        border: 1.5px solid var(--hf-lime) !important;
        box-shadow: 0 0 12px rgba(212, 255, 0, 0.4) !important;
        object-fit: cover !important;
    }

    .hf-mega-close-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        cursor: pointer !important;
    }

    .hf-mega-close-btn i {
        width: 18px !important;
        height: 18px !important;
    }

    /* 3. Mobile Hero Layout: Open Cinematic Lion Video with Slim Lower Third */
    #homeHeroCinematic {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: center !important;
        position: relative !important;
        min-height: 560px !important;
        padding: 30px 12px 24px 12px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: #08080a !important;
        border-bottom: 1px solid rgba(212, 255, 0, 0.2) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
    }

    #homeHeroCinematic .hf-hero-video-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }

    #homeHeroCinematic .hf-hero-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 22% !important;
        filter: brightness(1.2) contrast(1.1) !important;
        opacity: 1 !important;
    }

    /* Crystal clear video overlay - no dark fog covering the lion */
    #homeHeroCinematic .hf-hero-video-overlay {
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(8, 8, 10, 0.15) 0%,
            transparent 22%,
            transparent 58%,
            rgba(8, 8, 10, 0.65) 82%,
            #08080a 100%
        ) !important;
    }

    #homeHeroCinematic .hf-hero-artlist-content {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-top: 140px !important;
        gap: 6px !important;
    }

    #homeHeroCinematic .hf-hero-tag-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 4px 11px !important;
        font-size: 9.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 4px !important;
        border-radius: 999px !important;
        background: rgba(8, 8, 10, 0.75) !important;
        border: 1px solid rgba(212, 255, 0, 0.5) !important;
        color: var(--hf-lime) !important;
        box-shadow: 0 0 12px rgba(212, 255, 0, 0.3) !important;
    }

    #homeHeroCinematic .hf-artlist-title {
        font-size: 21px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
        letter-spacing: -0.02em !important;
        margin: 0 0 4px 0 !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95) !important;
    }

    #homeHeroCinematic .hf-artlist-subtitle {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        line-height: 1.35 !important;
        margin: 0 0 10px 0 !important;
        max-width: 90% !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
    }

    #homeHeroCinematic .hf-artlist-models {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    /* Inceltilmiş ve aşağı indirilmiş zarif model çipleri */
    #homeHeroCinematic .hf-model-badge {
        font-size: 10px !important;
        padding: 3.5px 10px !important;
        border-radius: 999px !important;
        background: rgba(8, 8, 10, 0.55) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }

    #homeHeroCinematic .hf-artlist-cta-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 270px !important;
        margin: 0 auto 4px auto !important;
    }

    #homeHeroCinematic .hf-artlist-cta-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px 22px !important;
        font-size: 13.5px !important;
        font-weight: 900 !important;
        border-radius: 999px !important;
        background: var(--hf-lime) !important;
        color: #08080a !important;
        border: none !important;
        box-shadow: 0 0 20px rgba(212, 255, 0, 0.6) !important;
    }

    #homeHeroCinematic .hf-artlist-guide-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 7px 16px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }

    #homeHeroCinematic .hf-artlist-footer-tag {
        display: none !important;
    }

    .hf-mobile-hero-container {
        display: none !important;
    }

    /* ROW 4: TEMPLATE SECTIONS ON MOBILE (2-COLUMN 9:16 FEED) */
    .hf-templates-section {
        padding: 0 10px !important;
    }

    .hf-sec-header {
        padding: 8px 4px !important;
        margin-bottom: 6px !important;
    }

    .hf-sec-title {
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
    }

    .hf-sec-sub {
        font-size: 10px !important;
    }

    .hf-banner-section {
        margin-bottom: 24px !important;
    }

    .hf-banner-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
        padding: 0 4px !important;
    }

    .hf-banner-title {
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .hf-banner-desc {
        font-size: 11px !important;
        color: #8c91a4 !important;
    }

    .hf-dual-cta {
        display: none !important; /* Keep mobile clean */
    }

    .hf-banner-grid,
    .hf-templates-grid,
    .hf-grid,
    .hf-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .hf-card {
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: #0f1015 !important;
        overflow: hidden !important;
    }

    .hf-card-media {
        aspect-ratio: 9/16 !important;
        min-height: 200px !important;
    }

    .hf-card-badge {
        font-size: 9px !important;
        font-weight: 800 !important;
        padding: 3px 6px !important;
        top: 8px !important;
        left: 8px !important;
        border-radius: 5px !important;
    }

    .hf-card-info {
        padding: 10px 8px !important;
    }

    .hf-card-title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hf-card-footer {
        margin-top: 6px !important;
    }

    .hf-card-cost {
        font-size: 11px !important;
    }

    .hf-card-btn-recreate {
        font-size: 11px !important;
        padding: 5px 9px !important;
        border-radius: 7px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* 4. Bottom Sheet Modals (Higgsfield iOS/Android Drawer Feel) */
    .modal-backdrop {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .modal-container,
    .hf-auth-modal-card,
    .hf-checkout-card,
    .hf-grant-sheet,
    .hf-custom-modal-card,
    .hf-recreate-modal-container {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)) 16px !important;
        border-bottom: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: #0f1015 !important;
        animation: slideUpMobileSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9) !important;
    }

    /* Grab bar at top of mobile bottom sheet */
    .modal-container::before,
    .hf-auth-modal-card::before,
    .hf-checkout-card::before,
    .hf-grant-sheet::before,
    .hf-recreate-modal-container::before {
        content: '';
        display: block;
        width: 44px;
        height: 5px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 4px;
        margin: 0 auto 12px auto;
    }

    @keyframes slideUpMobileSheet {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Auth Modal Optimization on Mobile */
    .hf-auth-grid {
        grid-template-columns: 1fr !important;
    }

    .hf-auth-video-col {
        display: none !important; /* Fast touch authentication */
    }

    .hf-auth-form-col {
        padding: 6px 2px !important;
    }

    /* Input zoom prevention (16px minimum on iOS) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }

    .hf-mega-menu-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* 6. Mobile Bottom Navigation Dock Styles */
    .hf-mobile-bottom-dock {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: rgba(10, 10, 14, 0.94) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        z-index: 999 !important;
        align-items: center !important;
        justify-content: space-around !important;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.65) !important;
    }

    .hf-mob-dock-btn {
        background: none !important;
        border: none !important;
        color: #8e95a5 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        flex: 1 !important;
        height: 100% !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        font-family: inherit !important;
        padding: 6px 0 !important;
        position: relative !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .hf-mob-dock-btn i {
        width: 20px !important;
        height: 20px !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }

    .hf-mob-dock-btn span {
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        transition: color 0.2s ease !important;
    }

    .hf-mob-dock-btn:active {
        transform: scale(0.92) !important;
    }

    .hf-mob-dock-btn.active {
        color: var(--hf-lime, #D4FF00) !important;
    }

    .hf-mob-dock-btn.active i {
        color: var(--hf-lime, #D4FF00) !important;
        transform: translateY(-2px) !important;
    }

    .hf-mob-dock-btn.active span {
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* Center Glowing Elevated "ÜRET" Button */
    .hf-mob-dock-btn.center-create {
        position: relative !important;
        overflow: visible !important;
    }

    .hf-mob-dock-btn.center-create .center-create-inner {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #D4FF00 0%, #a3e635 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #08080a !important;
        box-shadow: 0 4px 18px rgba(212, 255, 0, 0.45) !important;
        transform: translateY(-12px) !important;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        border: 2px solid #08080a !important;
    }

    .hf-mob-dock-btn.center-create .center-create-inner i {
        width: 22px !important;
        height: 22px !important;
        color: #08080a !important;
        stroke-width: 2.5 !important;
    }

    .hf-mob-dock-btn.center-create span {
        position: absolute !important;
        bottom: 5px !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        color: var(--hf-lime, #D4FF00) !important;
    }

    .hf-mob-dock-btn.center-create:active .center-create-inner {
        transform: translateY(-8px) scale(0.92) !important;
        box-shadow: 0 2px 10px rgba(212, 255, 0, 0.3) !important;
    }

    /* 7. Soul ID & URL-to-Ad Mobile Optimization */
    .soul-studio-grid,
    .url-ad-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* 8. Admin Panel on Mobile */
    .hf-admin-nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
    }

    .hf-admin-nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .hf-admin-tab-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    .hf-admin-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .hf-admin-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}


/* =========================================================================
   VISUAL EFFECTS (VFX) 1:1 HIGGSFIELD AESTHETICS & GRID STYLES
   ========================================================================= */

.hf-vfx-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 28px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hf-vfx-banner-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hf-vfx-title {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--hf-lime, #d4ff00);
    text-transform: uppercase;
    margin: 0;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    text-shadow: 0 0 25px rgba(212, 255, 0, 0.35);
}

.hf-vfx-subtitle {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.65);
    max-width: 680px;
    line-height: 1.5;
    margin: 0;
}

.hf-vfx-gen-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--hf-lime, #d4ff00);
    color: #000;
    font-weight: 800;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.3);
}

.hf-vfx-gen-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.6);
    background: #e1ff33;
}

.hf-vfx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 60px;
}

.hf-vfx-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #111115;
    aspect-ratio: 9/16;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
}

.hf-vfx-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 255, 0, 0.6);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(212, 255, 0, 0.2);
}

.hf-vfx-img,
.hf-vfx-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.hf-vfx-video {
    opacity: 0;
    z-index: 1;
}

.hf-vfx-card:hover .hf-vfx-video {
    opacity: 1;
}

.hf-vfx-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.88) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 24px 18px;
    z-index: 2;
    transition: background 0.3s ease;
}

.hf-vfx-card:hover .hf-vfx-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.92) 100%);
}

.hf-vfx-card-title {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
    margin-bottom: 12px;
    text-align: center;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: color 0.25s ease;
}

.hf-vfx-card:hover .hf-vfx-card-title {
    color: var(--hf-lime, #d4ff00);
}

.hf-vfx-recreate-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    width: 85%;
}

.hf-vfx-recreate-btn:hover {
    background: var(--hf-lime, #d4ff00);
    color: #000;
    border-color: var(--hf-lime, #d4ff00);
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.5);
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .hf-vfx-banner {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .hf-vfx-title {
        font-size: 26px;
    }
    .hf-vfx-gen-btn {
        justify-content: center;
    }
    .hf-vfx-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}


/* =========================================================================
   VISUAL EFFECTS (VFX) 1:1 HIGGSFIELD STUDIO SPLIT WORKSPACE
   ========================================================================= */

.hf-vfx-workspace {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    margin: 16px 0 60px 0;
    min-height: 80vh;
}

/* Left Sidebar Control Dock */
.hf-vfx-left-dock {
    width: 310px;
    flex-shrink: 0;
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(18, 18, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 18px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.hf-vfx-selected-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 14px;
    overflow: hidden;
    background: #09090c;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.hf-vfx-selected-preview img,
.hf-vfx-selected-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hf-vfx-dock-badge {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 45%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
}

.vfx-name-badge {
    font-size: 14.5px;
    font-weight: 900;
    color: var(--hf-lime, #d4ff00);
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

.vfx-btn-change {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.vfx-btn-change:hover {
    background: var(--hf-lime, #d4ff00);
    color: #000;
    border-color: var(--hf-lime, #d4ff00);
}

.hf-vfx-slots-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hf-vfx-slot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hf-vfx-slot-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 255, 0, 0.4);
}

.hf-vfx-slot-item.filled {
    border-style: solid;
    border-color: rgba(212, 255, 0, 0.6);
    background: rgba(212, 255, 0, 0.05);
}

.hf-vfx-slot-item .slot-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.hf-vfx-slot-item .slot-icon i {
    width: 16px;
    height: 16px;
}

.hf-vfx-slot-item .slot-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hf-vfx-slot-item .slot-meta strong {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.hf-vfx-slot-item .slot-meta span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hf-vfx-prompt-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
}

.hf-vfx-prompt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hf-vfx-field-lbl {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hf-vfx-textarea {
    width: 100%;
    height: 64px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 10px;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.hf-vfx-textarea:focus {
    border-color: var(--hf-lime, #d4ff00);
}

.hf-vfx-settings-row {
    display: flex;
    gap: 8px;
}

.hf-vfx-setting-pill {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: border-color 0.2s;
}

.hf-vfx-setting-pill:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.hf-vfx-setting-pill .lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
}

.hf-vfx-setting-pill .val {
    color: #fff;
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 2px;
}

.hf-vfx-submit-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--hf-lime, #d4ff00);
    color: #000;
    font-weight: 900;
    font-size: 14px;
    padding: 13px 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.3);
}

.hf-vfx-submit-btn:hover {
    background: #e2ff33;
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(212, 255, 0, 0.55);
}

.hf-vfx-submit-btn .vfx-btn-cost {
    background: rgba(0, 0, 0, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
}

/* Right Main Gallery */
.hf-vfx-right-gallery {
    flex: 1;
    min-width: 0;
}

.hf-vfx-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 16px;
}

.hf-vfx-gallery-tabs {
    display: flex;
    gap: 8px;
}

.hf-vfx-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.hf-vfx-tab-btn.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.hf-vfx-tab-btn i {
    width: 15px;
    height: 15px;
}

.hf-vfx-search-wrap {
    position: relative;
    width: 280px;
}

.hf-vfx-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    padding: 8px 12px 8px 34px;
    outline: none;
    transition: border-color 0.2s;
}

.hf-vfx-search-input:focus {
    border-color: var(--hf-lime, #d4ff00);
}

.hf-vfx-search-wrap .search-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: rgba(255, 255, 255, 0.4);
}

.hf-vfx-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    scrollbar-width: none;
}

.hf-vfx-filter-chips::-webkit-scrollbar {
    display: none;
}

.hf-vfx-chip {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s;
}

.hf-vfx-chip:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.hf-vfx-chip.active {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 900;
}

.hf-vfx-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.hf-vfx-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #111116;
    aspect-ratio: 9/16;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hf-vfx-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 255, 0, 0.4);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

.hf-vfx-card.selected {
    border: 2px solid var(--hf-lime, #d4ff00) !important;
    box-shadow: 0 0 24px rgba(212, 255, 0, 0.4) !important;
}

.hf-vfx-check {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hf-lime, #d4ff00);
    color: #000;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
}

.hf-vfx-check i {
    width: 14px;
    height: 14px;
    stroke-width: 3px;
}

.hf-vfx-card.selected .hf-vfx-check {
    display: flex;
}

.hf-vfx-thumb,
.hf-vfx-hover-vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hf-vfx-hover-vid {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.25s ease;
}

.hf-vfx-card:hover .hf-vfx-hover-vid {
    opacity: 1;
}

.hf-vfx-card-footer {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 8px;
    z-index: 3;
}

.hf-vfx-card-name {
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    text-align: center;
    transition: color 0.2s;
}

.hf-vfx-card:hover .hf-vfx-card-name,
.hf-vfx-card.selected .hf-vfx-card-name {
    color: var(--hf-lime, #d4ff00);
}

@media (max-width: 960px) {
    .hf-vfx-workspace {
        flex-direction: column;
    }
    .hf-vfx-left-dock {
        width: 100%;
        position: static;
    }
    .hf-vfx-masonry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}




/* =========================================================================
   PERFECT 1:1 HIGGSFIELD EFFECTS/USE LAYOUT & STYLES (EXPANDED & TÜRKÇE)
   ========================================================================= */

.hf-vfx-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    margin: 8px 0 60px 0;
    min-height: calc(100vh - 120px);
}

/* Left Sidebar Dock (360px Wide & Spacious) */
.hf-vfx-dock {
    width: 360px;
    flex-shrink: 0;
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: #0f0f13;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
    box-sizing: border-box;
}

.hf-vfx-dock-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dock-poster, .dock-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dock-header-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, transparent 45%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

.dock-title-neon {
    font-size: 15px;
    font-weight: 900;
    color: var(--hf-lime, #d4ff00);
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(212, 255, 0, 0.4);
}

.dock-btn-change {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.dock-btn-change:hover {
    background: var(--hf-lime, #d4ff00);
    color: #000;
    border-color: var(--hf-lime, #d4ff00);
}

/* 2-Column Slot Layout (Character & Location in Row 1, Products in Row 2) */
.hf-vfx-slots-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.hf-vfx-slot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 10px 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 82px;
    box-sizing: border-box;
    overflow: hidden;
}

.hf-vfx-slot-card.hf-vfx-slot-full {
    grid-column: 1 / -1;
    min-height: 70px;
}

.hf-vfx-slot-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 255, 0, 0.5);
}

.hf-vfx-slot-card.filled {
    border-style: solid;
    border-color: rgba(212, 255, 0, 0.6);
    background: rgba(212, 255, 0, 0.04);
}

.slot-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

.slot-ico-box {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.slot-ico-box i {
    width: 15px;
    height: 15px;
}

.slot-opt-badge {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.slot-title {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    white-space: nowrap;
}

.slot-sub {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.25;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hf-vfx-prompt-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
}

.prompt-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.prompt-lbl {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hf-vfx-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
}

.hf-vfx-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.vfx-switch-knob {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: .3s;
    border-radius: 18px;
}

.vfx-switch-knob:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

.hf-vfx-switch input:checked + .vfx-switch-knob {
    background-color: var(--hf-lime, #d4ff00);
}

.hf-vfx-switch input:checked + .vfx-switch-knob:before {
    transform: translateX(14px);
    background-color: #000;
}

.prompt-textarea {
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 11.5px;
    line-height: 1.4;
    padding: 8px 10px;
    resize: none;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.prompt-textarea:focus {
    border-color: var(--hf-lime, #d4ff00);
}

.hf-vfx-settings-row {
    display: flex;
    gap: 8px;
}

.setting-item {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.setting-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.s-label {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    font-weight: 700;
}

.s-val {
    color: #fff;
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 1px;
}

.hf-vfx-chatgpt-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s;
}

.hf-vfx-chatgpt-bar:hover {
    background: rgba(255, 255, 255, 0.06);
}

.gpt-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gpt-left i {
    width: 14px;
    height: 14px;
    color: var(--hf-lime, #d4ff00);
}

.hf-vfx-generate-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: var(--hf-lime, #d4ff00);
    color: #000;
    font-weight: 900;
    font-size: 14px;
    padding: 13px 18px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.3);
}

.hf-vfx-generate-btn:hover {
    background: #e2ff33;
    transform: scale(1.02);
    box-shadow: 0 0 28px rgba(212, 255, 0, 0.55);
}

/* Right Content Gallery */
.hf-vfx-content {
    flex: 1;
    min-width: 0;
}

/* Clean Single Tab Navbar */
.hf-vfx-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 4px;
}

.vfx-tabs-group {
    display: flex;
    gap: 8px;
}

.vfx-tab-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.vfx-tab-pill.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.vfx-tab-pill i {
    width: 14px;
    height: 14px;
}

.vfx-search-container {
    position: relative;
    width: 280px;
}

.vfx-search-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    padding: 8px 12px 8px 34px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.vfx-search-field:focus {
    border-color: var(--hf-lime, #d4ff00);
}

.vfx-search-ico {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.35);
}

/* 5-Column True Masonry Gallery Grid */
.hf-vfx-columns-grid {
    column-count: 5;
    column-gap: 12px;
}

@media (max-width: 1440px) {
    .hf-vfx-columns-grid {
        column-count: 4;
    }
}

@media (max-width: 1100px) {
    .hf-vfx-columns-grid {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .hf-vfx-layout {
        flex-direction: column;
    }
    .hf-vfx-dock {
        width: 100%;
        position: static;
    }
    .hf-vfx-columns-grid {
        column-count: 2;
    }
}

.hf-vfx-item {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 14px;
    overflow: hidden;
    background: #0f0f13;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    break-inside: avoid;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hf-vfx-item:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 255, 0, 0.4);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

.hf-vfx-item.selected {
    border: 2px solid var(--hf-lime, #d4ff00) !important;
    box-shadow: 0 0 20px rgba(212, 255, 0, 0.4) !important;
}

.vfx-item-check {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--hf-lime, #d4ff00);
    color: #000;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}

.vfx-item-check i {
    width: 13px;
    height: 13px;
    stroke-width: 3px;
}

.hf-vfx-item.selected .vfx-item-check {
    display: flex;
}

.vfx-item-poster {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 13px;
}

.vfx-item-video, .vfx-item-hover-anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hf-vfx-item:hover .vfx-item-video,
.hf-vfx-item:hover .vfx-item-hover-anim {
    opacity: 1;
}

.vfx-item-title-row {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
    display: flex;
    align-items: flex-end;
    padding: 10px;
    z-index: 3;
}

.vfx-item-title-text {
    font-size: 11.5px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.95);
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    transition: color 0.2s;
}

.hf-vfx-item:hover .vfx-item-title-text,
.hf-vfx-item.selected .vfx-item-title-text {
    color: var(--hf-lime, #d4ff00);
}

/* ==========================================================================
   HIGGSFIELD ADS STUDIO — EXACT 1-TO-1 VISUAL STYLING (SCREENSHOTS 1, 2, 3, 4, 5)
   ========================================================================== */

/* Sub-views Shared Layout */
.ads-subview {
    animation: fadeInView 0.25s ease-out;
    width: 100%;
}

@keyframes fadeInView {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ads-subview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 24px 0;
}

.ads-back-link {
    background: transparent;
    border: none;
    color: #999;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
    padding: 6px 12px;
    border-radius: 8px;
}

.ads-back-link:hover {
    color: var(--hf-lime, #d4ff00);
    background: rgba(255, 255, 255, 0.04);
}

.ads-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--hf-lime, #d4ff00);
    background: rgba(212, 255, 0, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* ==========================================================================
   1. ADS STUDIO ANA SAYFA (SCREENSHOT 3)
   ========================================================================== */
.ads-home-hero {
    text-align: center;
    padding: 24px 16px 20px 16px;
    max-width: 960px;
    margin: 0 auto;
}

.ads-home-title {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.25;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
}

.ads-home-strip-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 12px 4px 20px 4px;
    scroll-behavior: smooth;
}

.ads-home-strip-carousel::-webkit-scrollbar {
    height: 6px;
}

.ads-home-strip-carousel::-webkit-scrollbar-thumb {
    background: rgba(212, 255, 0, 0.3);
    border-radius: 3px;
}

.ads-strip-item-card {
    flex: 0 0 130px;
    height: 190px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #111116;
    cursor: pointer;
    transition: transform 0.25s, border-color 0.25s;
}

.ads-strip-item-card:hover {
    transform: translateY(-4px);
    border-color: var(--hf-lime, #d4ff00);
}

.ads-strip-item-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ads-tools-section {
    margin-top: 32px;
}

.ads-section-tagline {
    font-size: 14px;
    font-weight: 700;
    color: #888;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ads-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ads-tool-card {
    position: relative;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0d0d12;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s;
}

.ads-tool-card:hover {
    border-color: rgba(212, 255, 0, 0.4);
}

.tool-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ads-tool-card:hover .tool-card-bg {
    transform: scale(1.04);
}

.tool-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 10, 0.1) 0%, rgba(8, 8, 10, 0.6) 50%, rgba(8, 8, 10, 0.96) 100%);
}

.tool-card-content {
    position: relative;
    z-index: 2;
    padding: 28px;
    width: 100%;
}

.tool-card-content h3 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.3;
}

.tool-card-content p {
    font-size: 14px;
    color: #b5b5be;
    margin-bottom: 20px;
    line-height: 1.5;
}

.ads-lime-btn {
    background: var(--hf-lime, #d4ff00);
    color: #000;
    font-weight: 800;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ads-lime-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(212, 255, 0, 0.4);
}

/* Nasıl Çalışır Section */
.ads-how-it-works-section {
    margin-top: 56px;
    padding-bottom: 40px;
}

.ads-how-label {
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #777;
    margin-bottom: 20px;
}

.ads-how-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ads-how-tab-btn {
    background: #14141a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 8px 18px;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.ads-how-tab-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.ads-how-tab-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}

.ads-how-tab-btn.active .step-num {
    background: #000;
    color: #fff;
}

.step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.ads-how-card {
    max-width: 680px;
    margin: 0 auto;
    background: #101015;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    padding: 32px;
    text-align: center;
}

.ads-how-preview {
    background: #171720;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 24px;
}

.how-inner-box h4 {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 12px 0 16px 0;
    letter-spacing: 0.5px;
}

.how-fake-input {
    background: #0b0b0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #777;
    font-size: 13.5px;
    width: 100%;
    max-width: 380px;
}

.how-products-preview-box,
.how-formats-preview-box,
.how-insights-preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.how-mini-prod-row,
.how-aspect-pills-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.how-prod-pill,
.aspect-chip {
    background: #0b0b0f;
    border: 1px solid rgba(212, 255, 0, 0.25);
    color: #eee;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
}

.how-insight-metric {
    background: #0b0b0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.insight-val {
    color: var(--hf-lime, #d4ff00);
    font-size: 16px;
    font-weight: 900;
}

.insight-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
}

.ads-how-footer-text h5 {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.ads-how-footer-text p {
    font-size: 13.5px;
    color: #888;
    line-height: 1.5;
}

/* ==========================================================================
   2. WEB SİTENİZİ GİRİN (SCREENSHOT 2)
   ========================================================================= */
.ads-research-center-box {
    max-width: 600px;
    margin: 40px auto 80px auto;
    text-align: center;
    padding: 0 16px;
}

.ads-center-title {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    letter-spacing: -0.5px;
}

.ads-center-subtitle {
    font-size: 15px;
    color: #888;
    margin-bottom: 32px;
}

.ads-research-input-row {
    margin-bottom: 16px;
}

.ads-input-wrap {
    background: #14141a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.ads-input-wrap:focus-within {
    border-color: var(--hf-lime, #d4ff00);
    box-shadow: 0 0 18px rgba(212, 255, 0, 0.15);
}

.ads-input-icon {
    color: #666;
    width: 20px;
    height: 20px;
}

.ads-input-wrap input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15px;
    width: 100%;
    outline: none;
    font-weight: 500;
}

.ads-quick-demos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.demo-lbl {
    font-size: 12px;
    color: #666;
}

.demo-chip-btn {
    background: #181822;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: #aaa;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.demo-chip-btn:hover {
    border-color: var(--hf-lime, #d4ff00);
    color: #fff;
}

.ads-lime-btn-lg {
    width: 100%;
    height: 54px;
    background: var(--hf-lime, #d4ff00);
    color: #000;
    font-size: 15px;
    font-weight: 800;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ads-lime-btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(212, 255, 0, 0.45);
}

.ads-divider-text {
    margin: 20px 0;
    font-size: 13px;
    color: #555;
    position: relative;
}

.ads-dark-btn-lg {
    width: 100%;
    height: 52px;
    background: #1f1f28;
    color: #ddd;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.ads-dark-btn-lg:hover {
    background: #272733;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   3. MARKA KİTİNİZİ OLUŞTURUN (SCREENSHOT 1)
   ========================================================================== */
.ads-kit-header {
    text-align: center;
    margin-bottom: 32px;
}

.ads-kit-title {
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.ads-kit-subtitle {
    font-size: 14px;
    color: #888;
}

.ads-kit-form-container {
    max-width: 760px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ads-kit-card {
    background: #15151c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    transition: border-color 0.2s;
}

.ads-kit-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Üst Marka Adı & Logo Kartı */
.kit-card-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 180px;
}

.kit-brand-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kit-brand-name-input {
    background: transparent;
    border: none;
    font-size: 30px;
    font-weight: 900;
    color: #888;
    text-transform: uppercase;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    outline: none;
    letter-spacing: 0.5px;
}

.kit-brand-name-input:focus {
    color: #fff;
}

.kit-url-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.kit-url-input-wrap input {
    background: transparent;
    border: none;
    color: #888;
    font-size: 14px;
    outline: none;
    width: 260px;
}

.kit-url-input-wrap input:focus {
    color: #fff;
}

.kit-add-square-btn {
    width: 36px;
    height: 36px;
    background: #1d1d26;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s;
}

.kit-add-square-btn:hover {
    color: var(--hf-lime, #d4ff00);
    border-color: var(--hf-lime, #d4ff00);
}

.kit-brand-right {
    margin-left: 20px;
}

.kit-logo-uploader {
    width: 120px;
    height: 120px;
    background: #20202a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.kit-logo-uploader:hover {
    border-color: rgba(212, 255, 0, 0.5);
    color: var(--hf-lime, #d4ff00);
}

.kit-logo-icon {
    width: 36px;
    height: 36px;
}

/* Çipler */
.kit-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.chip-usp {
    color: var(--hf-lime, #d4ff00);
}

.chip-icon-usd {
    width: 22px;
    height: 22px;
    background: var(--hf-lime, #d4ff00);
    color: #000;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
}

.chip-aesthetic {
    color: #d4ff00;
}

.chip-audience {
    color: #58a6ff;
}

.kit-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #999;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    resize: none;
    font-family: inherit;
}

.kit-textarea:focus {
    color: #fff;
}

.ads-kit-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 640px) {
    .ads-kit-bottom-grid {
        grid-template-columns: 1fr;
    }
}

.kit-card-tone,
.kit-card-fonts {
    background: #15151c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px;
    transition: border-color 0.2s;
}

.chip-tone { color: #d4ff00; }
.chip-fonts { color: #a371f7; }

.kit-single-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #bbb;
    font-size: 13.5px;
    outline: none;
    font-family: inherit;
    margin-top: 4px;
}

.kit-single-input:focus {
    color: #fff;
}

/* ==========================================================================
   2.5. MARKA KİTİ ANALİZ RADARI (STEP 2: RESEARCH SPHERE / PROGRESS)
   ========================================================================== */
.ads-research-progress-box {
    max-width: 640px;
    margin: 40px auto 80px auto;
    text-align: center;
    padding: 0 16px;
}

.ads-progress-title {
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    letter-spacing: -0.5px;
}

.ads-progress-subtitle {
    font-size: 14px;
    color: #888;
    margin-bottom: 36px;
}

.ads-radar-sphere-container {
    width: 140px;
    height: 140px;
    margin: 0 auto 36px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--hf-lime, #d4ff00);
    opacity: 0;
    animation: radarPulse 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.radar-pulse-ring.r1 { animation-delay: 0s; }
.radar-pulse-ring.r2 { animation-delay: 0.8s; }
.radar-pulse-ring.r3 { animation-delay: 1.6s; }

@keyframes radarPulse {
    0% { transform: scale(0.3); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.radar-core-glow {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hf-lime, #d4ff00) 0%, rgba(212, 255, 0, 0.1) 70%, transparent 100%);
    box-shadow: 0 0 25px rgba(212, 255, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    position: relative;
    z-index: 2;
}

.radar-core-icon {
    width: 28px;
    height: 28px;
    animation: spinSlow 8s linear infinite;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ads-progress-checklist {
    background: #14141b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: #666;
    transition: all 0.3s;
}

.check-item.active {
    color: #fff;
    font-weight: 700;
}

.check-item.done {
    color: var(--hf-lime, #d4ff00);
}

.check-item .chk-icon {
    font-size: 15px;
    width: 22px;
}

/* ==========================================================================
   3.5. ÜRÜN SEÇİMİ (STEP 4: SELECT PRODUCTS)
   ========================================================================== */
.ads-products-center-box {
    max-width: 880px;
    margin: 30px auto 60px auto;
    padding: 0 16px;
    text-align: center;
}

.ads-products-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 24px;
}

.prod-bar-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ads-btn-add-prod {
    background: #1c1c26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eee;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.ads-btn-add-prod:hover {
    border-color: var(--hf-lime, #d4ff00);
    color: var(--hf-lime, #d4ff00);
}

.ads-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
    text-align: left;
}

.ads-product-select-card {
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    padding: 12px;
}

.ads-product-select-card:hover {
    border-color: rgba(212, 255, 0, 0.3);
    transform: translateY(-2px);
}

.ads-product-select-card.selected {
    border-color: var(--hf-lime, #d4ff00);
    background: rgba(212, 255, 0, 0.03);
    box-shadow: 0 0 18px rgba(212, 255, 0, 0.12);
}

.prod-card-thumb-wrap {
    height: 170px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #09090d;
    margin-bottom: 12px;
}

.prod-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prod-card-chk {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 13px;
    font-weight: 900;
    transition: all 0.2s;
}

.ads-product-select-card.selected .prod-card-chk {
    background: var(--hf-lime, #d4ff00);
    border-color: var(--hf-lime, #d4ff00);
}

.prod-card-info h5 {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-card-price-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--hf-lime, #d4ff00);
    background: rgba(212, 255, 0, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

/* ==========================================================================
   3.8. REKLAM SAYISI (STEP 5: ADS COUNT)
   ========================================================================== */
.ads-count-center-box {
    max-width: 820px;
    margin: 30px auto 60px auto;
    padding: 0 16px;
    text-align: center;
}

.ads-count-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 32px;
    text-align: left;
}

@media (max-width: 768px) {
    .ads-count-options-grid {
        grid-template-columns: 1fr;
    }
}

.ads-count-card {
    background: #13131b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
}

.ads-count-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.ads-count-card.active {
    border-color: var(--hf-lime, #d4ff00);
    background: rgba(212, 255, 0, 0.04);
    box-shadow: 0 0 24px rgba(212, 255, 0, 0.15);
}

.count-card-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--hf-lime, #d4ff00);
    background: rgba(212, 255, 0, 0.12);
    border: 1px solid rgba(212, 255, 0, 0.3);
    border-radius: 6px;
    padding: 2px 8px;
    margin-bottom: 12px;
}

.count-card-number {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
}

.count-card-desc {
    font-size: 12.5px;
    color: #888;
    line-height: 1.45;
    margin-bottom: 20px;
}

.count-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

.price-izi {
    font-size: 22px;
    font-weight: 900;
    color: var(--hf-lime, #d4ff00);
}

.price-unit {
    font-size: 12px;
    color: #777;
    font-weight: 600;
}

.ads-kit-footer-bar {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.ads-kit-back-btn {
    background: transparent;
    border: none;
    color: #999;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ads-kit-back-btn:hover {
    color: #fff;
}

.ads-lime-btn-md {
    background: var(--hf-lime, #d4ff00);
    color: #000;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 32px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.ads-lime-btn-md:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(212, 255, 0, 0.4);
}

/* ==========================================================================
   4. REKLAM ÇARPANI / AD MULTIPLIER (SCREENSHOT 5)
   ========================================================================== */
.ads-multiplier-layout {
    display: grid;
    grid-template-columns: 410px 1fr;
    gap: 32px;
    padding: 10px 0 40px 0;
}

/* Sol Kontrol Paneli */
.ads-multiplier-left-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.multiplier-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ads-text-link {
    background: transparent;
    border: none;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
}

.ads-text-link:hover {
    color: #fff;
}

.multiplier-hero-card {
    background: linear-gradient(135deg, #102a3a 0%, #0d1e2b 50%, #0c1520 100%);
    border: 1px solid rgba(88, 166, 255, 0.2);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.mult-hero-text h4 {
    color: #d4ff00;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.mult-hero-text p {
    font-size: 12px;
    color: #8ea8bf;
    line-height: 1.4;
}

.mult-step-card {
    background: #14141b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.mult-step-card:hover {
    border-color: rgba(212, 255, 0, 0.4);
    background: #181822;
}

.mult-step-icon {
    width: 40px;
    height: 40px;
    background: #1d1d27;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

.mult-step-icon-triple {
    display: flex;
    margin-right: 4px;
}

.triple-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #22222e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-left: -8px;
}

.triple-circle:first-child {
    margin-left: 0;
}

.mult-step-info h6 {
    font-size: 13px;
    font-weight: 700;
    color: #eee;
    margin-bottom: 3px;
}

.mult-step-info small {
    font-size: 11px;
    color: #777;
}

.mult-plus-badge {
    margin-left: auto;
    width: 24px;
    height: 24px;
    background: #20202c;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--hf-lime, #d4ff00);
}

.mult-prompt-card,
.mult-hook-card {
    background: #14141b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
}

.mult-prompt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mult-prompt-head label {
    font-size: 13px;
    font-weight: 700;
    color: #ddd;
}

.mult-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #bbb;
    font-size: 12.5px;
    line-height: 1.5;
    outline: none;
    resize: none;
    font-family: inherit;
}

.mult-textarea:focus {
    color: #fff;
}

/* Switch */
.hf-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.hf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #262633;
    transition: .3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
}

input:checked + .slider {
    background-color: var(--hf-lime, #d4ff00);
}

input:checked + .slider:before {
    transform: translateX(16px);
    background-color: #000;
}

.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
}

.mult-format-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.mult-fmt-lbl {
    font-size: 12px;
    color: #777;
}

.fmt-pill {
    background: #181822;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11.5px;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fmt-pill.active {
    border-color: var(--hf-lime, #d4ff00);
    color: #fff;
    background: rgba(212, 255, 0, 0.06);
}

.fmt-pill input {
    display: none;
}

.mult-btn-generate {
    margin-top: 10px;
}

/* Sağ Önizleme / Split-Screen Viewer */
.ads-multiplier-right-viewer {
    display: flex;
    flex-direction: column;
}

.mult-viewer-top-bar {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    padding-bottom: 12px;
}

.mult-split-viewer-container {
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    height: 480px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.split-frame {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.split-frame {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    user-select: none;
}

.split-side.split-left {
    position: absolute;
    inset: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    transition: width 0.05s ease-out;
}

.split-side.split-right {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.split-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.split-divider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #ffffff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
    z-index: 10;
    cursor: ew-resize;
    transform: translateX(-50%);
    touch-action: none;
    transition: left 0.05s ease-out;
}

.split-slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 11px;
    font-weight: 900;
    user-select: none;
    cursor: ew-resize;
    transition: transform 0.15s, background-color 0.15s;
}

.split-slider-handle:hover,
.split-divider-line:active .split-slider-handle {
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--hf-lime, #d4ff00);
}

.split-tag {
    position: absolute;
    bottom: 14px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 6;
}

.tag-ref {
    left: 14px;
    background: rgba(0, 0, 0, 0.7);
    color: #bbb;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tag-new {
    right: 14px;
    background: rgba(212, 255, 0, 0.9);
    color: #000;
    border: 1px solid var(--hf-lime, #d4ff00);
}

.mult-idea-section {
    text-align: center;
    padding: 28px 16px;
}

.mult-idea-badge {
    color: var(--hf-lime, #d4ff00);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.mult-idea-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.mult-idea-desc {
    font-size: 13.5px;
    color: #888;
    max-width: 540px;
    margin: 0 auto 20px auto;
    line-height: 1.5;
}

.mult-idea-carousel {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.idea-arrow-btn {
    width: 32px;
    height: 32px;
    background: #181822;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.idea-arrow-btn:hover {
    color: #fff;
    border-color: var(--hf-lime, #d4ff00);
}

.idea-circles-wrap {
    display: flex;
    gap: 12px;
}

.idea-thumb-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.25s;
}

.idea-thumb-circle:hover {
    transform: scale(1.08);
}

.idea-thumb-circle.active {
    border-color: #fff;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.idea-thumb-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   5. HIGGSFIELD AI MANKEN KÜTÜPHANESİ MODALI (SCREENSHOT 4)
   ========================================================================== */
.ads-model-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(16px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInModal 0.25s ease-out;
}

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

.ads-model-modal-dialog {
    width: 100%;
    max-width: 1200px;
    height: 88vh;
    background: #0d0d12;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
}

.model-modal-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #09090d;
}

.model-modal-tabs {
    display: flex;
    gap: 8px;
}

.m-tab-btn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.m-tab-btn:hover {
    color: #fff;
}

.m-tab-btn.active {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}

.model-modal-close {
    background: #1a1a24;
    border: none;
    color: #aaa;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.model-modal-close:hover {
    background: #ff0055;
    color: #fff;
}

.model-modal-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.model-modal-sidebar {
    width: 230px;
    background: #09090d;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-side-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.m-side-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}

.m-side-btn.active {
    background: rgba(212, 255, 0, 0.08);
    border-color: var(--hf-lime, #d4ff00);
    color: var(--hf-lime, #d4ff00);
}

.model-modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 24px;
}

.model-modal-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.model-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.model-title-wrap h3 {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
}

.model-active-badge {
    background: rgba(212, 255, 0, 0.12);
    border: 1px solid rgba(212, 255, 0, 0.3);
    color: var(--hf-lime, #d4ff00);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 14px;
}

.model-search-box {
    background: #14141b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 40px;
    width: 280px;
}

.model-search-box input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    outline: none;
    width: 100%;
}

.model-gender-pills {
    display: flex;
    gap: 6px;
}

.m-gender-pill {
    background: #15151e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.m-gender-pill:hover {
    color: #fff;
}

.m-gender-pill.active {
    background: #ffffff;
    color: #000;
    border-color: #fff;
}

/* Models Grid */
.model-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
    overflow-y: auto;
    padding-bottom: 20px;
}

.model-create-new-card {
    border: 1.5px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s;
    background: rgba(255, 255, 255, 0.01);
}

.model-create-new-card:hover {
    border-color: var(--hf-lime, #d4ff00);
    background: rgba(212, 255, 0, 0.03);
}

.create-plus-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1a1a24;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.2s;
}

.model-create-new-card:hover .create-plus-icon {
    background: var(--hf-lime, #d4ff00);
    color: #000;
}

.model-create-new-card span {
    font-size: 13px;
    font-weight: 700;
    color: #888;
}

.ads-model-card {
    position: relative;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    background: #111116;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.ads-model-card:hover {
    transform: translateY(-4px);
    border-color: var(--hf-lime, #d4ff00);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.ads-model-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-card-gender-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.gender-erkek {
    background: #0088ff;
    color: #fff;
}

.gender-kadin {
    background: #ff007a;
    color: #fff;
}

.model-card-name-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 10px 10px 10px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    z-index: 2;
}

.model-card-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}

.ads-model-card:hover .model-card-hover-overlay {
    opacity: 1;
}

.btn-select-model {
    background: var(--hf-lime, #d4ff00);
    color: #000;
    font-size: 12px;
    font-weight: 900;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 960px) {
    .ads-tools-grid,
    .ads-kit-bottom-grid,
    .ads-multiplier-layout {
        grid-template-columns: 1fr;
    }
    .model-modal-body {
        flex-direction: column;
    }
    .model-modal-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }
}

/* ==========================================================================
   HIGGSFIELD ADS STUDIO - LIVE VIDEO SHOWCASE & AD TEMPLATES LIBRARY
   ========================================================================== */
.ads-how-video-wrapper {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
    margin-top: 18px;
}

#adsHowMainVideo {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    background: #000;
}

.how-live-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(8, 8, 10, 0.88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 255, 0, 0.35);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 800;
    color: #D4FF00;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.how-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D4FF00;
    box-shadow: 0 0 10px #D4FF00;
    animation: howLivePulse 1.8s infinite ease-in-out;
}

@keyframes howLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.how-action-row {
    position: relative;
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    z-index: 2;
}

.ads-how-video-wrapper {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ads-how-video-wrapper:hover {
    transform: scale(1.005);
    box-shadow: 0 24px 70px rgba(212, 255, 0, 0.15), 0 0 30px rgba(0, 0, 0, 0.9);
}

/* Split-Screen Real Video Enhancements */
.split-side video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.split-side img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-how-action {
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-how-action.primary {
    background: #D4FF00;
    color: #000;
    border: none;
    box-shadow: 0 6px 24px rgba(212, 255, 0, 0.35);
}

.btn-how-action.primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 8px 30px rgba(212, 255, 0, 0.5);
}

/* Ads Library Showcase Section */
.ads-library-showcase-section {
    margin-top: 60px;
    padding: 40px 0 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ads-library-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.ads-lib-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 255, 0, 0.1);
    border: 1px solid rgba(212, 255, 0, 0.3);
    color: #D4FF00;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.ads-lib-title {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
    margin: 0 0 6px 0;
}

.ads-lib-subtitle {
    font-size: 14px;
    color: #888;
    margin: 0;
}

.ads-lib-filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 24px;
    scrollbar-width: none;
}

.ads-lib-filter-tabs::-webkit-scrollbar {
    display: none;
}

.ads-lib-filter-pill {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #999;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ads-lib-filter-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
}

.ads-lib-filter-pill.active {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 900;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
}

.ads-lib-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.ads-lib-card {
    background: #0c0c0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ads-lib-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 255, 0, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(212, 255, 0, 0.15);
}

.ads-lib-video-box {
    position: relative;
    width: 100%;
    aspect-ratio: 9/12;
    background: #000;
    overflow: hidden;
}

.ads-lib-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ads-lib-badge-left {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.ads-lib-badge-right {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #D4FF00;
    color: #000;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.ads-lib-format-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #ccc;
    z-index: 2;
}

.ads-lib-sound-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    z-index: 2;
}

.ads-lib-card-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.ads-lib-card-cat {
    font-size: 11px;
    font-weight: 800;
    color: #D4FF00;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.ads-lib-card-title {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.ads-lib-card-hook {
    font-size: 13px;
    font-style: italic;
    color: #f0f0f0;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #D4FF00;
    padding: 8px 10px;
    border-radius: 4px;
    margin: 0;
    line-height: 1.4;
}

.ads-lib-card-desc {
    font-size: 12px;
    color: #777;
    margin: 0;
    line-height: 1.4;
}

.ads-lib-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.btn-recreate-ad {
    flex: 1;
    background: #D4FF00;
    color: #000;
    font-size: 12px;
    font-weight: 900;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.btn-recreate-ad:hover {
    filter: brightness(1.15);
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(212, 255, 0, 0.3);
}

.btn-copy-hook {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ccc;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-copy-hook:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

/* =========================================================================
   İZEEG STUDIO E-TİCARET ÖZELLİK & REKLAM PANOSU (HIGGSFIELD FEATURE BOARD)
   ========================================================================= */
.hf-feature-board {
    width: 100%;
    max-width: 1400px;
    margin: 20px auto 44px auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: block;
}

.hf-fb-header {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hf-fb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 255, 0, 0.08);
    border: 1px solid rgba(212, 255, 0, 0.25);
    color: var(--hf-lime, #D4FF00);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    width: fit-content;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hf-fb-tag i {
    width: 13px;
    height: 13px;
}

.hf-fb-title {
    font-size: 22px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.3px;
    font-family: inherit;
}

/* 4'lü Üst Sıra Canlı Video Kartları */
.hf-fb-grid-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.hf-fb-card {
    background: #111115;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    user-select: none;
}

.hf-fb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 255, 0, 0.45);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(212, 255, 0, 0.18);
}

.hf-fb-media-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    background: #000;
}

.hf-fb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hf-fb-card:hover .hf-fb-video {
    transform: scale(1.05);
}

.hf-fb-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hf-fb-badge.lime {
    background: var(--hf-lime, #D4FF00);
    color: #000;
}

.hf-fb-badge.green {
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
}

.hf-fb-badge.hot {
    background: #FF007A;
    color: #fff;
}

.hf-fb-badge.blue {
    background: #00D2FF;
    color: #000;
}

.hf-fb-card-body {
    padding: 14px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.hf-fb-card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.hf-fb-card-desc {
    font-size: 12px;
    color: #9A9AA6;
    margin: 0;
    line-height: 1.45;
    font-weight: 400;
}

/* Alt Sıra: Sol Büyük Lansman + Sağ 6'lı Matris */
.hf-fb-grid-bottom {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 16px;
}

.hf-fb-promo-card {
    background: linear-gradient(135deg, rgba(24, 30, 16, 0.95) 0%, rgba(13, 15, 18, 0.98) 100%);
    border: 1px solid rgba(212, 255, 0, 0.3);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.hf-fb-promo-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 255, 0, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.hf-fb-promo-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hf-fb-promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hf-lime, #D4FF00);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.hf-fb-promo-tag i {
    width: 14px;
    height: 14px;
}

.hf-fb-promo-title {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.hf-fb-promo-desc {
    font-size: 12.5px;
    color: #A0A0B0;
    margin: 0;
    line-height: 1.5;
}

.hf-fb-promo-btn {
    background: var(--hf-lime, #D4FF00);
    color: #000;
    font-weight: 800;
    font-size: 13px;
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: fit-content;
    margin-top: 10px;
    box-shadow: 0 4px 20px rgba(212, 255, 0, 0.35);
}

.hf-fb-promo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 26px rgba(212, 255, 0, 0.5);
    background: #E2FF33;
}

.hf-fb-promo-btn i {
    width: 15px;
    height: 15px;
}

.hf-fb-promo-badge-box {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 255, 0, 0.3);
    border-radius: 10px;
    padding: 6px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.hf-promo-percent {
    font-size: 16px;
    font-weight: 900;
    color: var(--hf-lime, #D4FF00);
    line-height: 1;
}

.hf-promo-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #9A9AA6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* 6'lı (2x3) Kompakt Özellikler Matrisi */
.hf-fb-mini-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
}

.hf-fb-mini-item {
    background: #111115;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.22s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
}

.hf-fb-mini-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 255, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.hf-fb-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mini-icon {
    width: 18px;
    height: 18px;
}

.mini-icon.lime { color: var(--hf-lime, #D4FF00); }
.mini-icon.green { color: #10B981; }
.mini-icon.yellow { color: #F59E0B; }
.mini-icon.cyan { color: #06B6D4; }
.mini-icon.blue { color: #3B82F6; }
.mini-icon.magenta { color: #EC4899; }

.mini-pill {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-pill.hot { background: #FF007A; color: #fff; }
.mini-pill.new { background: var(--hf-lime, #D4FF00); color: #000; }
.mini-pill.fast { background: rgba(245, 158, 11, 0.2); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.4); }
.mini-pill.trend { background: rgba(6, 182, 212, 0.2); color: #06B6D4; border: 1px solid rgba(6, 182, 212, 0.4); }
.mini-pill.pro { background: rgba(59, 130, 246, 0.2); color: #3B82F6; border: 1px solid rgba(59, 130, 246, 0.4); }
.mini-pill.auto { background: rgba(236, 72, 153, 0.2); color: #EC4899; border: 1px solid rgba(236, 72, 153, 0.4); }

.mini-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px 0;
}

.mini-desc {
    font-size: 11px;
    color: #8E8E9C;
    margin: 0;
    line-height: 1.35;
}

/* Responsiveness */
@media (max-width: 1200px) {
    .hf-fb-grid-top {
        grid-template-columns: repeat(2, 1fr);
    }
    .hf-fb-grid-bottom {
        grid-template-columns: 1fr;
    }
    .hf-fb-mini-matrix {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .hf-feature-board {
        padding: 0 14px;
        margin: 16px auto 32px auto;
    }
    .hf-fb-title {
        font-size: 18px;
    }
    .hf-fb-grid-top {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .hf-fb-card {
        flex: 0 0 260px;
        scroll-snap-align: start;
    }
    .hf-fb-mini-matrix {
        grid-template-columns: repeat(2, 1fr);
    }
    .hf-fb-promo-card {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .hf-fb-mini-matrix {
        grid-template-columns: 1fr;
    }
}