/* Belajar Tanpa Rewel — Stylesheet */

body {
            /* Desktop background, mobile container will be white/dark */
            background-color: #F3F4F6; 
        }
        .dark body {
            background-color: #000000;
        }
        
        /* Hide scrollbar for clean app feel */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .dark .glass {
            background: rgba(30, 41, 59, 0.85);
        }

        /* Gradient Text */
        .text-gradient {
            background: linear-gradient(135deg, #FF7B93, #FFA07A);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        /* Animated Border for Reseller */
        .animated-border {
            position: relative;
            background: #fff;
            background-clip: padding-box;
            border: 3px solid transparent;
            border-radius: 1.5rem;
        }
        .dark .animated-border {
            background: #1E293B;
            background-clip: padding-box;
        }
        .animated-border::before {
            content: '';
            position: absolute;
            top: -3px; right: -3px; bottom: -3px; left: -3px;
            z-index: -1;
            border-radius: inherit;
            background: linear-gradient(90deg, #FF7B93, #FFD700, #48D1CC, #FF7B93);
            background-size: 300% 300%;
            animation: moveGradient 4s linear infinite;
        }
        @keyframes moveGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    


                .scroll-track { display:flex; gap:14px; width:max-content; }
                .scroll-right  { animation: scrR 38s linear infinite; }
                .scroll-left   { animation: scrL 44s linear infinite; }
                .scroll-right2 { animation: scrR 50s linear infinite; }
                @keyframes scrR { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
                @keyframes scrL { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
                .scroll-row:hover .scroll-track { animation-play-state:paused; }

                .ws-card-new {
                    width:140px; flex-shrink:0;
                    border-radius:12px; overflow:hidden;
                    background:#fff;
                    box-shadow:0 4px 16px rgba(0,0,0,0.10);
                    border:1.5px solid rgba(255,255,255,0.9);
                    transition:transform 0.25s, box-shadow 0.25s;
                }
                .ws-card-new:hover {
                    transform:translateY(-4px) scale(1.03);
                    box-shadow:0 10px 28px rgba(0,0,0,0.15);
                    z-index:10;
                }
                .ws-card-header {
                    padding:5px 8px;
                    font-size:9px; font-weight:700;
                    color:#fff; font-family:'Nunito',sans-serif;
                    text-align:center; letter-spacing:0.03em;
                    text-transform:uppercase;
                }
                .ws-card-body {
                    height:155px; overflow:hidden;
                }
                .ws-card-footer {
                    padding:4px 6px;
                    font-size:8px; font-weight:700;
                    color:#555; font-family:'Nunito',sans-serif;
                    text-align:center; background:#fafafa;
                    border-top:1px solid #f0f0f0;
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                }

                /* real image card */
                .ws-card-real {
                    width:140px; flex-shrink:0;
                    border-radius:12px; overflow:hidden;
                    background:#fff;
                    box-shadow:0 4px 16px rgba(0,0,0,0.10);
                    border:1.5px solid rgba(255,255,255,0.9);
                    transition:transform 0.25s, box-shadow 0.25s;
                }
                .ws-card-real:hover {
                    transform:translateY(-4px) scale(1.03);
                    box-shadow:0 10px 28px rgba(0,0,0,0.15);
                    z-index:10;
                }
                .ws-card-real img {
                    width:100%; height:155px; object-fit:cover; display:block;
                }
                .ws-card-real .ws-card-footer {
                    padding:4px 6px;
                    font-size:8px; font-weight:700;
                    color:#555; font-family:'Nunito',sans-serif;
                    text-align:center; background:#fafafa;
                    border-top:1px solid #f0f0f0;
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                }
            


                .testi-track{display:flex;gap:12px;width:max-content}
                .testi-r{animation:tsR 30s linear infinite}
                .testi-l{animation:tsL 35s linear infinite}
                .testi-r2{animation:tsR 40s linear infinite}
                @keyframes tsR{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
                @keyframes tsL{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
                .testi-row:hover .testi-track{animation-play-state:paused}

                .wa-card{
                    flex-shrink:0;
                    width:210px;
                    border-radius:12px;
                    overflow:hidden;
                    box-shadow:0 4px 16px rgba(0,0,0,0.12);
                    background:#fff;
                    border:1px solid #e5e7eb;
                }
                .dark .wa-card{background:#1a1a2e;border-color:#2d2d44}

                /* Top bar kayak app WA */
                .wa-top-bar{
                    background:#075E54;
                    padding:5px 8px;
                    display:flex;
                    align-items:center;
                    gap:4px;
                }
                .wa-dot{width:6px;height:6px;border-radius:50%}
                .wa-dot.r{background:#ff5f57}
                .wa-dot.y{background:#febc2e}
                .wa-dot.g{background:#28c840}
                .wa-app{color:rgba(255,255,255,0.7);font-size:8px;font-weight:600;margin-left:4px;font-family:'Nunito',sans-serif}

                /* Contact header */
                .wa-body{background:#fff}
                .dark .wa-body{background:#1a1a2e}
                .wa-contact-row{
                    background:#075E54;
                    padding:6px 10px 8px;
                    display:flex;
                    align-items:center;
                    gap:7px;
                }
                .wa-pic{
                    width:30px;height:30px;
                    border-radius:50%;
                    object-fit:cover;
                    filter:blur(4px);
                    border:1.5px solid rgba(255,255,255,0.4);
                    flex-shrink:0;
                }
                .wa-contact-info{display:flex;flex-direction:column}
                .wa-cname{color:#fff;font-size:10px;font-weight:700;font-family:'Nunito',sans-serif;line-height:1.2}
                .wa-online{color:#9de3d7;font-size:8px;font-family:'Nunito',sans-serif}

                /* Chat area */
                .wa-msg-wrap{
                    background:#ECE5DD;
                    padding:8px;
                    min-height:70px;
                }
                .dark .wa-msg-wrap{background:#0d1117}
                .wa-msg{
                    background:#fff;
                    border-radius:0 8px 8px 8px;
                    padding:6px 8px;
                    display:inline-block;
                    max-width:100%;
                    box-shadow:0 1px 2px rgba(0,0,0,0.1);
                    position:relative;
                }
                .dark .wa-msg{background:#202c33}
                .wa-msg::before{
                    content:'';
                    position:absolute;
                    top:0;left:-6px;
                    border:6px solid transparent;
                    border-top-color:#fff;
                    border-right-color:#fff;
                }
                .dark .wa-msg::before{border-top-color:#202c33;border-right-color:#202c33}
                .wa-msg-text{
                    font-size:10px;
                    color:#303030;
                    line-height:1.5;
                    display:block;
                    font-family:'Nunito',sans-serif;
                }
                .dark .wa-msg-text{color:#e9edef}
                .wa-msg-meta{
                    display:flex;
                    align-items:center;
                    gap:4px;
                    margin-top:3px;
                }
                .wa-stars{font-size:7px}
                .wa-mtime{font-size:8px;color:#999;margin-left:auto}
                .wa-check{font-size:9px;color:#53bdeb;font-weight:700}
            


            /* Animated glowing border */
            @keyframes borderFlow {
                0%   { background-position: 0% 50%; }
                50%  { background-position: 100% 50%; }
                100% { background-position: 0% 50%; }
            }
            @keyframes dotPulse {
                0%, 100% { box-shadow: 0 0 0 0 rgba(107,203,119,0.7); }
                50%      { box-shadow: 0 0 0 4px rgba(107,203,119,0); }
            }
            .notif-border-wrap {
                padding: 1.5px;
                border-radius: 13.5px;
                background: linear-gradient(270deg, #FF7B93, #FFD93D, #6BCB77, #4D96FF, #FF7B93);
                background-size: 300% 300%;
                animation: borderFlow 3s ease infinite;
                box-shadow: 0 8px 32px rgba(0,0,0,0.25);
            }
            .notif-inner {
                background: linear-gradient(135deg, rgba(26,26,46,0.97), rgba(22,33,62,0.97));
                border-radius: 12px;
                padding: 8px 10px;
                display: flex;
                align-items: center;
                gap: 8px;
                backdrop-filter: blur(10px);
            }
            .notif-dot {
                width: 5px; height: 5px;
                border-radius: 50%;
                background: #6BCB77;
                display: inline-block;
                flex-shrink: 0;
                animation: dotPulse 1.5s ease-in-out infinite;
            }
            .dark .notif-inner { background: #1E293B !important; }
            .dark .notif-inner #notif-name { color: #fff !important; }
            .dark .notif-inner span[style*="color:#2D2D2D"] { color: #fff !important; }
            .dark .notif-inner span[style*="color:#888"] { color: #aaa !important; }
            .dark #notif-avatar { border-color: rgba(255,255,255,0.2) !important; }