/* ==========================================================================
   Beranda modern (dimuat bersama tt.css oleh shell)
   ========================================================================== */
.tt-home-hero { position: relative; overflow: hidden; padding: 3.5rem 0 4.5rem; background: linear-gradient(180deg, #fff6e0 0%, var(--tt-bg) 100%); }
.tt-home-hero::before, .tt-home-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.tt-home-hero::before { width: 420px; height: 420px; background: #f7c862; top: -140px; right: -80px; }
.tt-home-hero::after { width: 320px; height: 320px; background: #f2b3a8; bottom: -160px; left: -80px; opacity: .35; }
.tt-home-hero .tt-container { position: relative; z-index: 1; }
.tt-hero-cols { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tt-hero-cols { grid-template-columns: 1.1fr .9fr; } }
.tt-home-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.08; margin-bottom: 1rem; }
.tt-mark { background: linear-gradient(180deg, transparent 62%, rgba(243, 182, 84, .75) 62%); padding: 0 .12em; border-radius: 4px; }
.tt-lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: #54503f; max-width: 34em; }
.tt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.tt-chip { background: rgba(255, 255, 255, .8); border: 1px solid var(--tt-line); border-radius: 999px; padding: .3rem .75rem; font-size: .85rem; font-weight: 650; }

/* mockup layar tryout */
.tt-device-wrap { position: relative; display: flex; justify-content: center; padding: 1rem 0; }
.tt-device {
    width: min(340px, 100%); background: #fff; border-radius: 28px; border: 8px solid #1b1a17;
    box-shadow: 0 30px 60px rgba(27, 26, 23, .25); overflow: hidden; transform: rotate(2deg);
}
.tt-device-bar { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; background: #faf7ef; border-bottom: 1px solid var(--tt-line); font-size: .8rem; font-weight: 700; }
.tt-device-timer { background: var(--tt-info-soft); color: var(--tt-info); border-radius: 999px; padding: .1rem .55rem; font-variant-numeric: tabular-nums; }
.tt-device-body { padding: 1rem .9rem 1.1rem; }
.tt-device-q { font-weight: 700; margin-bottom: .7rem; font-size: .95rem; }
.tt-device-opt { display: flex; gap: .5rem; align-items: center; border: 1.5px solid var(--tt-line); border-radius: 10px; padding: .5rem .6rem; margin-bottom: .4rem; font-size: .88rem; }
.tt-device-opt.sel { border-color: var(--tt-maroon); background: var(--tt-maroon-soft); font-weight: 650; }
.tt-device-opt b { width: 22px; height: 22px; border-radius: 50%; background: #eee9dc; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; flex: none; }
.tt-device-opt.sel b { background: var(--tt-maroon); color: #fff; }
.tt-float {
    position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--tt-shadow-lg);
    padding: .55rem .8rem; font-size: .82rem; font-weight: 700; border: 1px solid var(--tt-line);
}
.tt-float.a { left: -4px; bottom: 36px; }
.tt-float.b { right: -4px; top: 40px; }
@media (max-width: 480px) { .tt-float.a { left: 0; } .tt-float.b { right: 0; } }

/* strip angka */
.tt-statbar { margin-top: -2.2rem; position: relative; z-index: 2; }
.tt-statbar-in { background: #fff; border: 1px solid var(--tt-line); border-radius: 18px; box-shadow: var(--tt-shadow); display: grid; grid-template-columns: repeat(3, 1fr); }
.tt-statbar-in > div { padding: 1.1rem .8rem; text-align: center; }
.tt-statbar-in > div + div { border-left: 1px solid var(--tt-line); }
.tt-statbar-in b { display: block; font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: -.02em; color: var(--tt-maroon); }
.tt-statbar-in span { font-size: .82rem; color: var(--tt-muted); }

/* bagian umum */
.tt-sec-head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.tt-sec-head p { color: var(--tt-muted); }
.tt-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--tt-gold-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: .75rem; }
.tt-feature { padding: 1.3rem; height: 100%; }
.tt-feature h4 { margin-bottom: .3rem; }
.tt-prog { display: flex; align-items: center; gap: .85rem; padding: 1rem; color: inherit !important; text-decoration: none !important; }
.tt-prog-ava { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--tt-gold), #f8d99a); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex: none; }

/* langkah */
.tt-steps { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tt-steps { grid-template-columns: repeat(3, 1fr); } }
.tt-steps .tt-step { background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); padding: 1.2rem; box-shadow: var(--tt-shadow); }

/* contoh hasil */
.tt-showcase { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tt-showcase { grid-template-columns: 1fr 1fr; } }
.tt-mock-result { background: #fff; border: 1px solid var(--tt-line); border-radius: 20px; box-shadow: var(--tt-shadow-lg); padding: 1.3rem; }
.tt-mock-score { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.tt-ring { width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--tt-maroon) 0 78%, #eee9dc 78% 100%); display: flex; align-items: center; justify-content: center; flex: none; }
.tt-ring span { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; }
.tt-mock-row { margin-bottom: .7rem; }
.tt-mock-row .tt-row { font-size: .82rem; }
.tt-check-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.tt-check-list li { padding-left: 1.7rem; position: relative; margin-bottom: .55rem; }
.tt-check-list li::before {
    content: "\2713"; position: absolute; left: 0; top: .1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--tt-ok-soft); color: var(--tt-ok); font-weight: 800; font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
}

/* testimoni, faq */
.tt-quote { padding: 1.3rem; height: 100%; position: relative; }
.tt-quote::before { content: "\201C"; position: absolute; top: -.1rem; left: .8rem; font-size: 3.5rem; color: var(--tt-gold); line-height: 1; }
.tt-quote p { margin-top: 1.4rem; }
.tt-faq details { background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius-sm); padding: .85rem 1rem; margin-bottom: .6rem; }
.tt-faq summary { cursor: pointer; font-weight: 700; }
.tt-faq details[open] { border-color: var(--tt-gold); }
.tt-faq details p { margin: .6rem 0 0; color: var(--tt-muted); }

/* ajakan akhir */
.tt-band { background: linear-gradient(135deg, var(--tt-maroon) 0%, #4a0000 100%); color: #fff; border-radius: 28px; padding: 2.75rem 1.5rem; text-align: center; position: relative; overflow: hidden; }
.tt-band::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--tt-gold); opacity: .25; right: -80px; top: -100px; filter: blur(30px); }
.tt-band h2, .tt-band p { color: #fff; position: relative; z-index: 1; }
.tt-band .tt-btn { position: relative; z-index: 1; }

.tt-reveal { animation: tt-rise .6s ease both; }
@keyframes tt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tt-reveal { animation: none; } .tt-device { transform: none; } }