/* Seksi "Kenalan sama Typhoon Panel" di beranda (owner 03/11 20:13). Gaya ikut token samudra.css (--ink, --blue, --line, --fog). */
.typ{background:var(--fog)}
.typ-head{text-align:center;max-width:720px;margin:0 auto}
.typ-kicker{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink)}
.typ-kicker img{width:24px;height:24px;border-radius:7px}
.typ-head h2{margin-top:16px;font-size:clamp(32px,4vw,48px);letter-spacing:-.03em;line-height:1.08}
.typ-head p{margin-top:14px;font-size:18px;color:var(--text)}
.typ-video{margin:40px auto 0;max-width:1040px;border-radius:20px;overflow:hidden;background:#060A1F;border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(10,13,26,.5)}
.typ-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#060A1F}
.typ-bab{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1040px;margin:18px auto 0}
.typ-bab button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .15s}
.typ-bab button:hover{border-color:#C4C9D6}
.typ-bab button.aktif{background:var(--ink);border-color:var(--ink);color:#fff}
.typ-bab button.hot{border-color:#1E3BFF;color:#1E3BFF}
.typ-bab button.hot.aktif{background:#1E3BFF;border-color:#1E3BFF;color:#fff}
/* sorotan terminal */
.typ-term{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;max-width:1040px;margin:64px auto 0}
.typ-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:#E8EDFF;color:#1E3BFF;font-size:13px;font-weight:700;letter-spacing:.02em}
.typ-pill i{width:7px;height:7px;border-radius:50%;background:#1E3BFF;box-shadow:0 0 0 4px rgba(30,59,255,.18)}
.typ-term h3{margin-top:16px;font-size:clamp(26px,3vw,34px);letter-spacing:-.025em;line-height:1.12}
.typ-term-teks>p{margin-top:14px;font-size:17px;color:var(--text)}
.typ-term-teks ul{list-style:none;margin-top:18px;display:grid;gap:11px;font-size:15.5px;color:var(--text)}
.typ-term-teks li{display:flex;gap:10px}
.typ-term-teks li svg{flex:none;width:19px;height:19px;color:var(--blue);margin-top:2px}
.typ-term-teks small{display:block;margin-top:18px;font-size:13.5px;color:var(--mute)}
.typ-jendela{border-radius:16px;overflow:hidden;background:#0C0E16;box-shadow:0 40px 80px -30px rgba(10,13,26,.65),0 0 0 1px rgba(255,255,255,.06)}
.typ-jendela-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#13162299;border-bottom:1px solid rgba(255,255,255,.07);font:500 12.5px ui-monospace,Menlo,Consolas,monospace;color:#9AA3C7}
.typ-jendela-bar i{width:10px;height:10px;border-radius:50%;background:#2A2F45}.typ-jendela-bar i:first-child{background:#FF5F57}.typ-jendela-bar i:nth-child(2){background:#FEBC2E}.typ-jendela-bar i:nth-child(3){background:#28C840}
.typ-jendela-bar b{margin-left:8px;font-weight:600;color:#E6EAFF}.typ-jendela-bar em{margin-left:auto;font-style:normal;color:#3DDC84}
.typ-layar{min-height:292px;padding:16px 18px 20px;font:400 13.2px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#D7DCF2;white-space:pre-wrap;word-break:break-word}
.typ-layar .p{color:#7CE3A1;font-weight:600}.typ-layar .k{color:#fff}.typ-layar .m{color:#8D96BE}
.typ-layar .kur{display:inline-block;width:8px;height:15px;margin-left:2px;vertical-align:-2px;background:#7CE3A1;animation:typKur 1s steps(2) infinite}
@keyframes typKur{50%{opacity:0}}
/* fitur */
.typ-fitur{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1040px;margin:64px auto 0}
.typ-f{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px}
.typ-f.hot{background:linear-gradient(160deg,#0B1330,#16215B);border-color:#1E2A6B;color:#fff}
.typ-f .ik{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--fog);color:var(--ink)}
.typ-f.hot .ik{background:rgba(255,255,255,.12);color:#fff}
.typ-f .ik svg{width:21px;height:21px}
.typ-f h3{margin-top:14px;font-size:16.5px;letter-spacing:-.01em}
.typ-f p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--text)}
.typ-f.hot p{color:#B9C4F5}
.typ-lain{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1040px;margin:18px auto 0;font-size:14px;color:var(--mute)}
.typ-lain span{padding:6px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500}
/* typhoon vs cpanel */
.typ-beda{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;max-width:1040px;margin:56px auto 0}
.typ-kartu{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.typ-kartu.utama{border:2px solid var(--ink)}
.typ-kartu-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.typ-kartu-h img{height:26px;width:auto}.typ-kartu-h .tyn{display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.01em}.typ-kartu-h .tyn img{width:30px;height:30px;border-radius:8px}
.typ-kartu .tag{margin:0;background:#E5F6EF;color:#12805c}.typ-kartu .tag::after{display:none}.typ-kartu .tag-abu{background:var(--fog);color:var(--mute)}
.typ-kartu h3{margin-top:18px;font-size:21px;letter-spacing:-.01em}
.typ-kartu ul{list-style:none;margin-top:14px;display:grid;gap:10px;font-size:15px;color:var(--text)}
.typ-kartu li{display:flex;gap:10px}.typ-kartu li svg{flex:none;width:19px;height:19px;color:var(--blue);margin-top:2px}
.typ-pilih{max-width:1040px;margin:20px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.typ-pilih p{font-size:15px;color:var(--text)}.typ-pilih p b{color:var(--ink)}.typ-pilih .btns{display:flex;gap:10px;flex:none}
@media (max-width:900px){.typ-term{grid-template-columns:1fr;gap:28px}.typ-fitur{grid-template-columns:repeat(2,1fr)}}
@media (max-width:800px){.typ-beda{grid-template-columns:1fr}.typ-pilih{flex-direction:column;align-items:stretch}.typ-pilih .btns{flex-direction:column}}
@media (max-width:560px){.typ-fitur{grid-template-columns:1fr}.typ-kartu{padding:22px 20px}.typ-video{border-radius:14px;margin-top:28px}.typ-layar{font-size:11.6px;min-height:250px;padding:14px}}
@media (prefers-reduced-motion:reduce){.typ-layar .kur{animation:none}}
.typ-f.hot h3{color:#fff}