:root{
    --black:#151515;
    --black-soft:#272727;
    --cream:#fff7ed;
    --white:#ffffff;
    --text:#202020;
    --muted:#6b7280;
    --line:#e4ddd3;
    --red:#e63946;
    --red-soft:#ffe8ea;
    --gold:#f4b942;
    --green:#15a36d;
    --shadow:0 28px 76px rgba(21,21,21,.14);
    --radius:24px
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:#fffdfa;
    color:var(--text);
    font-family:Arial,"Helvetica Neue",sans-serif;
    line-height:1.65
}
button,input,textarea{font:inherit}
button{cursor:pointer}
.waktu-container{width:min(1180px,calc(100% - 36px));margin:auto}
.waktu-skip{
    position:fixed;
    top:-70px;
    left:18px;
    z-index:99999;
    padding:10px 14px;
    border-radius:8px;
    background:var(--white);
    color:var(--black)
}
.waktu-skip:focus{top:18px}

/* Header */
.waktu-header{
    position:sticky;
    top:0;
    z-index:90;
    background:rgba(21,21,21,.96);
    border-bottom:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(14px)
}
.waktu-header__inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}
.waktu-brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:var(--white);
    text-decoration:none;
    font-weight:900
}
.waktu-brand__icon{
    position:relative;
    width:38px;
    height:38px;
    display:block;
    border-radius:50%;
    background:var(--red)
}
.waktu-brand__icon i,
.waktu-brand__icon b{
    position:absolute;
    left:50%;
    bottom:50%;
    width:2px;
    border-radius:99px;
    background:var(--white);
    transform-origin:bottom
}
.waktu-brand__icon i{height:10px;transform:translateX(-50%) rotate(16deg)}
.waktu-brand__icon b{height:14px;transform:translateX(-50%) rotate(118deg)}
.waktu-brand__icon em{
    position:absolute;
    top:50%;
    left:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
    transform:translate(-50%,-50%)
}
.waktu-navigation{display:flex;align-items:center;gap:25px}
.waktu-navigation a{color:#d1d5db;text-decoration:none;font-weight:750}
.waktu-navigation a:hover{color:var(--white)}
.waktu-menu-button{display:none;border:0;background:transparent}
.waktu-menu-button span{display:block;width:25px;height:2px;margin:6px 0;background:var(--white)}

/* Hero */
.waktu-hero{
    padding:76px 0 56px;
    color:var(--white);
    background:
        radial-gradient(circle at 84% 4%,rgba(244,185,66,.2),transparent 28%),
        linear-gradient(135deg,var(--black),#3a171b)
}
.waktu-hero__layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(285px,.5fr);
    gap:68px;
    align-items:end
}
.waktu-eyebrow,
.waktu-section-title p{
    margin:0;
    color:var(--red);
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.16em
}
.waktu-hero .waktu-eyebrow{color:var(--gold)}
.waktu-hero h1{
    margin:12px 0 22px;
    font-size:clamp(3.8rem,9vw,7.5rem);
    line-height:.9;
    letter-spacing:-.073em
}
.waktu-hero__copy>p:last-child{
    max-width:710px;
    margin:0;
    color:#d1d5db;
    font-size:1.17rem
}
.waktu-live-card{
    padding:24px;
    border-radius:19px;
    background:var(--cream);
    color:var(--black);
    box-shadow:var(--shadow)
}
.waktu-live-card span,
.waktu-live-card small{display:block;color:#6b625a}
.waktu-live-card span{
    margin-bottom:5px;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase
}
.waktu-live-card strong{
    display:block;
    font-size:clamp(2.3rem,5vw,3.8rem);
    line-height:1.05;
    font-variant-numeric:tabular-nums
}

/* Clock */
.waktu-tool{padding:22px 0 84px}
.waktu-clock{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:var(--shadow)
}
.waktu-clock__controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid var(--line);
    background:#fffaf5
}
.waktu-tabs{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border-radius:13px;
    background:#f2ebe4
}
.waktu-tabs button{
    border:0;
    border-radius:10px;
    padding:10px 18px;
    background:transparent;
    color:var(--muted);
    font-weight:850
}
.waktu-tabs button.is-active{
    background:var(--white);
    color:var(--black);
    box-shadow:0 4px 12px rgba(21,21,21,.08)
}
.waktu-format{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    color:#5f5b57;
    font-size:.88rem;
    font-weight:800;
    white-space:nowrap
}
.waktu-format input{position:absolute;opacity:0;pointer-events:none}
.waktu-format>span{
    position:relative;
    width:44px;
    height:25px;
    border-radius:99px;
    background:#d6cec6;
    transition:.2s
}
.waktu-format>span i{
    position:absolute;
    top:3px;
    left:3px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--white);
    transition:.2s
}
.waktu-format input:checked+span{background:var(--red)}
.waktu-format input:checked+span i{transform:translateX(19px)}
.waktu-fullscreen{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--white);
    color:var(--black)
}
.waktu-fullscreen svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.9}
.waktu-clock__body{
    min-height:510px;
    display:grid;
    place-items:center;
    padding:48px
}
.waktu-panel{width:100%}
.waktu-panel[hidden]{display:none!important}
.waktu-digital{text-align:center}
.waktu-digital time{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:.15em;
    white-space:nowrap
}
.waktu-digital time span{
    color:var(--black);
    font-size:clamp(4.8rem,11vw,10.4rem);
    line-height:.88;
    font-weight:800;
    letter-spacing:-.07em;
    font-variant-numeric:tabular-nums
}
.waktu-digital time em{
    padding-bottom:.25em;
    color:var(--red);
    font-size:1.4rem;
    font-style:normal;
    font-weight:900
}
.waktu-digital>p{
    margin:25px 0 14px;
    color:var(--black-soft);
    font-size:1.24rem;
    font-weight:700
}
.waktu-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.waktu-meta span{
    padding:7px 11px;
    border-radius:99px;
    background:var(--red-soft);
    color:#8d1f2a;
    font-size:.84rem
}

/* Analog */
.waktu-analog{text-align:center}
.waktu-face{
    position:relative;
    width:min(390px,76vw);
    aspect-ratio:1;
    margin:auto;
    border:4px solid var(--black);
    border-radius:50%;
    background:radial-gradient(circle at center,#fff 0 68%,#fff4e8 69% 100%);
    box-shadow:inset 0 0 0 10px #fffaf5,0 20px 45px rgba(21,21,21,.13)
}
.waktu-hour{
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    margin:-15px;
    display:grid;
    place-items:center;
    color:var(--black);
    font-size:1rem;
    font-weight:900
}
.waktu-hour--1{transform:rotate(30deg) translateY(-163px) rotate(-30deg)}
.waktu-hour--2{transform:rotate(60deg) translateY(-163px) rotate(-60deg)}
.waktu-hour--3{transform:rotate(90deg) translateY(-163px) rotate(-90deg)}
.waktu-hour--4{transform:rotate(120deg) translateY(-163px) rotate(-120deg)}
.waktu-hour--5{transform:rotate(150deg) translateY(-163px) rotate(-150deg)}
.waktu-hour--6{transform:rotate(180deg) translateY(-163px) rotate(-180deg)}
.waktu-hour--7{transform:rotate(210deg) translateY(-163px) rotate(-210deg)}
.waktu-hour--8{transform:rotate(240deg) translateY(-163px) rotate(-240deg)}
.waktu-hour--9{transform:rotate(270deg) translateY(-163px) rotate(-270deg)}
.waktu-hour--10{transform:rotate(300deg) translateY(-163px) rotate(-300deg)}
.waktu-hour--11{transform:rotate(330deg) translateY(-163px) rotate(-330deg)}
.waktu-hour--12{transform:rotate(0deg) translateY(-163px) rotate(0deg)}
.waktu-hand{position:absolute;left:50%;bottom:50%;border-radius:99px;transform-origin:bottom}
.waktu-hand--hour{width:7px;height:25%;background:var(--black)}
.waktu-hand--minute{width:5px;height:34%;background:var(--red)}
.waktu-hand--second{width:2px;height:40%;background:var(--gold)}
.waktu-center{
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px var(--black);
    transform:translate(-50%,-50%)
}
.waktu-analog__info{margin-top:22px}
.waktu-analog__info strong{display:block;font-size:1.45rem;font-variant-numeric:tabular-nums}
.waktu-analog__info span{color:var(--muted)}
.waktu-clock__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 20px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.88rem
}
.waktu-clock__footer span{display:flex;align-items:center;gap:8px}
.waktu-clock__footer span i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.waktu-clock__footer button{border:0;background:transparent;color:var(--red);font-weight:850}

/* Lower homepage */
.waktu-benefits,.waktu-content,.waktu-faq{padding:72px 0}
.waktu-section-title{max-width:760px;margin-bottom:28px}
.waktu-section-title h2{
    margin:7px 0;
    color:var(--black);
    font-size:clamp(2.1rem,4.7vw,3.8rem);
    line-height:1.05;
    letter-spacing:-.05em
}
.waktu-benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.waktu-benefit-grid article{
    min-height:205px;
    padding:23px;
    border-radius:18px;
    background:var(--cream)
}
.waktu-benefit-grid article:nth-child(2),
.waktu-benefit-grid article:nth-child(4){background:var(--black);color:var(--white)}
.waktu-benefit-grid span{color:var(--red);font-weight:900}
.waktu-benefit-grid h3{margin:28px 0 7px}
.waktu-benefit-grid p{margin:0;color:var(--muted)}
.waktu-benefit-grid article:nth-child(2) p,
.waktu-benefit-grid article:nth-child(4) p{color:#d1d5db}
.waktu-prose{
    max-width:930px;
    margin:auto;
    padding:clamp(28px,5vw,56px);
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--white)
}
.waktu-prose h2{
    margin:1.65em 0 .5em;
    color:var(--black);
    font-size:2rem;
    line-height:1.2;
    letter-spacing:-.025em
}
.waktu-prose h2:first-child{margin-top:0}
.waktu-prose p,.waktu-prose li{color:#57534e}
.waktu-prose a{color:var(--red)}
.waktu-faq__list{max-width:930px}
.waktu-faq details,.waktu-side-faq details{
    margin:10px 0;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--white);
    padding:17px 19px
}
.waktu-faq summary,.waktu-side-faq summary{
    display:flex;
    justify-content:space-between;
    gap:15px;
    cursor:pointer;
    font-weight:850
}
.waktu-faq details p,.waktu-side-faq details p{color:var(--muted)}

/* Pages */
.waktu-page-hero{padding:64px 0 32px;color:var(--white);background:var(--black)}
.waktu-breadcrumbs{display:flex;gap:8px;margin-bottom:25px;color:#a3a3a3}
.waktu-breadcrumbs a{color:var(--gold);text-decoration:none}
.waktu-page-hero h1{
    margin:10px 0 16px;
    max-width:900px;
    font-size:clamp(3rem,7vw,5.6rem);
    line-height:.94;
    letter-spacing:-.06em
}
.waktu-page-hero__intro{max-width:760px;color:#d4d4d4;font-size:1.08rem}
.waktu-document{padding:48px 0 88px}
.waktu-document__grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start}
.waktu-side-faq{position:sticky;top:95px}
.waktu-contact{display:grid;gap:16px;margin-top:28px}
.waktu-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.waktu-contact label{display:grid;gap:7px;font-weight:800}
.waktu-contact input,.waktu-contact textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fffaf5;
    padding:12px
}
.waktu-primary{
    justify-self:start;
    border:0;
    border-radius:10px;
    background:var(--red);
    color:var(--white);
    padding:12px 17px;
    font-weight:850
}
.hp-field{position:absolute;left:-9999px}
.waktu-alert{padding:13px;border-radius:10px}
.waktu-alert.is-success{background:#dcfae6;color:#05603a}
.waktu-alert.is-error{background:#fee4e2;color:#912018}

/* Footer */
.waktu-footer{padding:52px 0;background:var(--black);color:var(--white)}
.waktu-brand--footer{color:var(--white)}
.waktu-footer__grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:36px}
.waktu-footer p{color:#a3a3a3}
.waktu-footer__links{display:grid;gap:8px}
.waktu-footer__links a{color:#f5f5f5;text-decoration:none}
.waktu-footer__note{text-align:right}

/* Fullscreen */
.waktu-clock:fullscreen,.waktu-clock.is-screen-mode{
    width:100vw;
    height:100dvh;
    border:0;
    border-radius:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    background:var(--white)
}
.waktu-clock.is-screen-mode{position:fixed;inset:0;z-index:99999}
.waktu-lock{overflow:hidden!important}
.waktu-clock:fullscreen .waktu-clock__body,
.waktu-clock.is-screen-mode .waktu-clock__body{min-height:0}
.waktu-clock:fullscreen .waktu-digital time span,
.waktu-clock.is-screen-mode .waktu-digital time span{font-size:clamp(7rem,17vw,16rem)}
.waktu-clock:fullscreen .waktu-face,
.waktu-clock.is-screen-mode .waktu-face{width:min(68vh,68vw,720px)}

/* Responsive */
@media(max-width:920px){
    .waktu-hero__layout,.waktu-document__grid,.waktu-footer__grid{grid-template-columns:1fr}
    .waktu-live-card{max-width:430px}
    .waktu-benefit-grid{grid-template-columns:repeat(2,1fr)}
    .waktu-side-faq{position:static}
    .waktu-footer__note{text-align:left}
}
@media(max-width:720px){
    .waktu-menu-button{display:block}
    .waktu-navigation{
        display:none;
        position:absolute;
        top:72px;
        left:18px;
        right:18px;
        flex-direction:column;
        align-items:stretch;
        padding:16px;
        border-radius:14px;
        background:var(--black-soft);
        box-shadow:var(--shadow)
    }
    .waktu-navigation.is-open{display:flex}
    .waktu-clock__controls{gap:9px;padding:12px}
    .waktu-tabs{flex:1;min-width:0}
    .waktu-tabs button{flex:1;min-width:0;padding:10px 8px;font-size:.86rem}
    .waktu-format{gap:6px;font-size:.78rem}
    .waktu-fullscreen{width:40px;height:40px;flex-basis:40px}
    .waktu-clock__body{padding:38px 18px}
    .waktu-contact__row{grid-template-columns:1fr}
}
@media(max-width:520px){
    .waktu-container{width:min(100% - 20px,1180px)}
    .waktu-hero{padding:52px 0 40px}
    .waktu-hero h1{font-size:clamp(3.2rem,18vw,5rem)}
    .waktu-format b{display:none}
    .waktu-format>span{width:38px;height:22px}
    .waktu-format>span i{width:16px;height:16px}
    .waktu-format input:checked+span i{transform:translateX(16px)}
    .waktu-fullscreen{width:38px;height:38px;flex-basis:38px}
    .waktu-digital time span{font-size:clamp(3.3rem,18vw,5.2rem)}
    .waktu-digital time em{font-size:1rem}
    .waktu-benefit-grid{grid-template-columns:1fr}
    .waktu-clock__footer{align-items:flex-start;flex-direction:column}
    .waktu-face{width:min(310px,82vw)}
    .waktu-hour--1{transform:rotate(30deg) translateY(-128px) rotate(-30deg)}
    .waktu-hour--2{transform:rotate(60deg) translateY(-128px) rotate(-60deg)}
    .waktu-hour--3{transform:rotate(90deg) translateY(-128px) rotate(-90deg)}
    .waktu-hour--4{transform:rotate(120deg) translateY(-128px) rotate(-120deg)}
    .waktu-hour--5{transform:rotate(150deg) translateY(-128px) rotate(-150deg)}
    .waktu-hour--6{transform:rotate(180deg) translateY(-128px) rotate(-180deg)}
    .waktu-hour--7{transform:rotate(210deg) translateY(-128px) rotate(-210deg)}
    .waktu-hour--8{transform:rotate(240deg) translateY(-128px) rotate(-240deg)}
    .waktu-hour--9{transform:rotate(270deg) translateY(-128px) rotate(-270deg)}
    .waktu-hour--10{transform:rotate(300deg) translateY(-128px) rotate(-300deg)}
    .waktu-hour--11{transform:rotate(330deg) translateY(-128px) rotate(-330deg)}
    .waktu-hour--12{transform:rotate(0deg) translateY(-128px) rotate(0deg)}
    .waktu-clock.is-screen-mode .waktu-clock__footer,
    .waktu-clock:fullscreen .waktu-clock__footer{display:none}
}
@supports(padding:max(0px)){
    .waktu-clock.is-screen-mode{
        padding-top:env(safe-area-inset-top);
        padding-right:env(safe-area-inset-right);
        padding-bottom:env(safe-area-inset-bottom);
        padding-left:env(safe-area-inset-left)
    }
}