/* Slidecraft main stylesheet — diekstrak dari seluruh legacy inline style. */

/* ===== home ===== */
body[data-page="home"] { font-family: 'Inter', sans-serif; background-color: #fcfcfc; overflow-x: hidden; }
    
    .font-montserrat { font-family: 'Montserrat', sans-serif; }

    .hero-glow {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 1000px; height: 1000px;
      background: radial-gradient(circle, rgba(249,115,22,.08) 0%, rgba(248,250,252,0) 65%);
      z-index: -1; pointer-events: none;
    }
    
    .grad-text {
      background: linear-gradient(135deg, #f97316, #fdba74);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    /* Efek transisi pada kartu */
    .hover-card-up { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .hover-card-up:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1); }
    
    /* Animasi Scroll */
    .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

/* ===== login ===== */
body[data-page="login"] { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ===== admin ===== */
body[data-page="admin"] { font-family: 'Plus Jakarta Sans', sans-serif; } 
        body[data-page="admin"] *::-webkit-scrollbar { width: 8px; }
        body[data-page="admin"] *::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px;}
        body[data-page="admin"] *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        body[data-page="admin"] *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== manage-users ===== */
body[data-page="manage-users"] { font-family: 'Plus Jakarta Sans', sans-serif; } 
        body[data-page="manage-users"] *::-webkit-scrollbar { width: 8px; }
        body[data-page="manage-users"] *::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px;}
        body[data-page="manage-users"] *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        body[data-page="manage-users"] *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        .brand-gradient { background: linear-gradient(to right, #f97316, #f59e0b); }

/* ===== catalog ===== */
body[data-page="catalog"] { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; } 
        body[data-page="catalog"] *::-webkit-scrollbar { width: 6px; }
        body[data-page="catalog"] button:focus, body[data-page="catalog"] a:focus, body[data-page="catalog"] input:focus { outline: none !important; box-shadow: none !important; }
body[data-page="catalog"] * { -webkit-tap-highlight-color: transparent !important; }   
        body[data-page="catalog"] *::-webkit-scrollbar-track { background: transparent; }
        body[data-page="catalog"] *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        body[data-page="catalog"] *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .view-section { display: none; animation: fadeIn 0.3s ease-in-out; }
        .view-section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .nav-item.active { background-color: #fff7ed; color: #ea580c; font-weight: 700; }
        .nav-item.active i { color: #ea580c; }
        .brand-gradient { background: linear-gradient(to right, #f97316, #f59e0b); }
        .brand-text { color: #ea580c; }
        .brand-border { border-color: #fdba74; }
        .brand-bg-light { background-color: #fff7ed; }
        
        .premium-card { border: 2px solid #fbbf24 !important; box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.2); }
        #mobile-sidebar { transition: transform 0.3s ease-in-out; }
        .sidebar-open { transform: translateX(0%); }
        .sidebar-closed { transform: translateX(-100%); }
        @keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
        .animate-bounce-slow { animation: bounce-slow 3s infinite ease-in-out; }
        .progress-stripe { background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; animation: progress-stripes 1s linear infinite; }
        @keyframes progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }

/* ===== generator ===== */
body[data-page="generator"] { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; scroll-behavior: smooth; }
        body[data-page="generator"] *::-webkit-scrollbar { width: 6px; height: 6px; }
        body[data-page="generator"] *::-webkit-scrollbar-track { background: transparent; }
        body[data-page="generator"] *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        body[data-page="generator"] *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        #slidePreviewImage { transition: opacity 0.2s ease-in-out; }
        
        body[data-page="generator"] .chat-bubble-user { background: #fff7ed; color: #ea580c; border-radius: 16px 16px 0 16px; margin-left: auto; max-width: 85%; border: 1px solid #ffedd5; }
        body[data-page="generator"] .chat-bubble-ai { background: #f1f5f9; color: #334155; border-radius: 16px 16px 16px 0; margin-right: auto; max-width: 85%; border: 1px solid #e2e8f0; }
        
        body[data-page="generator"] .chat-bubble-ai p { margin-bottom: 0.75rem; line-height: 1.6; }
        body[data-page="generator"] .chat-bubble-ai p:last-child { margin-bottom: 0; }
        body[data-page="generator"] .chat-bubble-ai ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 0.75rem; }
        body[data-page="generator"] .chat-bubble-ai ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 0.75rem; }
        body[data-page="generator"] .chat-bubble-ai li { margin-bottom: 0.25rem; }
        body[data-page="generator"] .chat-bubble-ai strong { font-weight: 700; color: #0f172a; }
        body[data-page="generator"] .chat-bubble-ai h3, body[data-page="generator"] .chat-bubble-ai h4 { font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; color: #0f172a; }

        .progress-stripe { background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; animation: progress-stripes 1s linear infinite; }
        @keyframes progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
        
        .popover-triangle {
            position: absolute;
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fed7aa; 
            top: -10px; 
            right: 20px; 
            left: auto;
        }
        .popover-triangle::after {
            content: '';
            position: absolute;
            width: 0; 
            height: 0; 
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
            border-bottom: 9px solid #ffffff;
            top: 1px;
            right: -9px;
            left: auto;
        }

/* ===== slides-agent ===== */
#mobile-sidebar { transition: transform 0.3s ease-in-out; }
        .sidebar-open { transform: translateX(0%); }
        .sidebar-closed { transform: translateX(-100%); }
        @keyframes fadeIn { 
            from { opacity: 0; transform: translateY(10px); } 
            to { opacity: 1; transform: translateY(0); } 
        }
            @keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
        .animate-bounce-slow { animation: bounce-slow 3s infinite ease-in-out; }
body[data-page="slides-agent"] { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; } 
        body[data-page="slides-agent"] *::-webkit-scrollbar { width: 6px; }
        body[data-page="slides-agent"] *::-webkit-scrollbar-track { background: transparent; }
        body[data-page="slides-agent"] *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        body[data-page="slides-agent"] *::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        
        #chatBoxInner, #splitChatBoxInner { width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; padding: 0 16px; }
        
        body[data-page="slides-agent"] .chat-bubble-user { background: #f8fafc; color: #334155; border-radius: 16px 16px 0 16px; margin-left: auto; max-width: 85%; padding: 14px 18px; font-size: 14px; border: 1px solid #e2e8f0; }
        body[data-page="slides-agent"] .chat-bubble-ai { background: #ffffff; border: 1px solid #f1f5f9; color: #334155; border-radius: 16px 16px 16px 0; margin-right: auto; max-width: 95%; padding: 16px 20px; font-size: 14px; line-height: 1.7; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
        body[data-page="slides-agent"] .chat-bubble-ai p { margin-bottom: 0.75rem; }
        body[data-page="slides-agent"] .chat-bubble-ai p:last-child { margin-bottom: 0; }
        body[data-page="slides-agent"] .chat-bubble-ai ul, body[data-page="slides-agent"] .chat-bubble-ai ol { margin-left: 1.5rem; margin-bottom: 0.75rem; }
        
        .live-slide-card { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background-color: #1e293b; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); display: flex; flex-col items-center justify-center text-center p-8 mb-6; border: 2px solid transparent; transition: border-color 0.2s; }
        .live-slide-card:hover { border-color: #f97316; }
        .live-input-title { background: transparent; color: white; font-size: 1.5rem; font-weight: 800; text-align: center; width: 100%; resize: none; outline: none; border-bottom: 1px dashed rgba(255,255,255,0.2); }
        .live-input-title:focus { border-bottom-color: #f97316; }
        .live-input-content { background: transparent; color: rgba(255,255,255,0.8); font-size: 0.875rem; text-align: center; width: 100%; resize: none; outline: none; margin-top: 1rem; border-bottom: 1px dashed rgba(255,255,255,0.2); }
        .live-input-content:focus { border-bottom-color: #f97316; color: white; }
        
        .mode-tab { border-bottom: 2px solid transparent; color: #64748b; transition: all 0.2s; cursor: pointer; }
        .mode-tab:hover { color: #f97316; }
        .mode-tab.active { color: #f97316; border-bottom-color: #f97316; font-weight: bold; }
body[data-page="slides-agent"] select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* ===== pricing ===== */
body[data-page="pricing"] { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
        .pricing-card { transition: all 0.3s ease; }
        body[data-page="pricing"] button:focus, body[data-page="pricing"] a:focus, body[data-page="pricing"] input:focus { outline: none !important; box-shadow: none !important; }
body[data-page="pricing"] * { -webkit-tap-highlight-color: transparent !important; }  
        .pricing-card:hover { transform: translateY(-8px); }

/* ===== tutorial ===== */
/* =========================================================
       SLIDECRAFT CUSTOM THEME FOR DRIVER.JS
    ========================================================= */
    .slidecraft-tour {
        border-radius: 1.25rem !important; 
        padding: 1.2rem !important; /* Dikecilkan sedikit agar muat di HP */
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        border: 1px solid #f1f5f9 !important; 
        box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important; 
        background-color: #ffffff !important;
        width: 350px !important;
        max-width: 90vw !important; /* ✅ FIX: Mentok 90% dari lebar layar HP */
    }
    
    /* Pastikan pop-up tutorial (tombol Next/Prev) tetap bisa di-klik */
    .driver-popover {
        pointer-events: auto !important;
    }

    .slidecraft-tour .driver-popover-title {
        font-size: 1.05rem !important; 
        font-weight: 700 !important; 
        color: #0f172a !important; 
        margin-bottom: 0.5rem !important;
        line-height: 1.4 !important;
    }
    .slidecraft-tour .driver-popover-description {
        font-size: 0.85rem !important; 
        color: #64748b !important; 
        line-height: 1.6 !important;
        font-weight: 500 !important;
    }
    .slidecraft-tour .driver-popover-footer {
        margin-top: 1.25rem !important;
    }
    .slidecraft-tour .driver-popover-footer button {
        border-radius: 0.75rem !important; 
        font-weight: 700 !important; 
        font-size: 0.75rem !important; 
        padding: 0.6rem 1.2rem !important;
        text-shadow: none !important;
        transition: all 0.2s ease-in-out !important;
    }
    .slidecraft-tour .driver-popover-next-btn {
        background-color: #f97316 !important; 
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2) !important;
    }
    .slidecraft-tour .driver-popover-next-btn:hover { 
        background-color: #ea580c !important; 
        transform: translateY(-1px) !important;
    }
    .slidecraft-tour .driver-popover-prev-btn {
        background-color: #f8fafc !important; 
        color: #64748b !important; 
        border: 1px solid #e2e8f0 !important; 
    }
    .slidecraft-tour .driver-popover-prev-btn:hover { 
        background-color: #f1f5f9 !important; 
        color: #0f172a !important; 
    }
    .slidecraft-tour .driver-popover-close-btn { 
        color: #94a3b8 !important; 
        transition: 0.2s !important; 
    }
    .slidecraft-tour .driver-popover-close-btn:hover { 
        color: #ef4444 !important; 
    }

    .hide-close-btn .driver-popover-close-btn { display: none !important; }

    body[data-page="slides-agent"] details[open] > .agent-notification-menu {
        display: block;
    }
    body[data-page="slides-agent"] summary::-webkit-details-marker {
        display: none;
    }