.page-harga .premium-hero,
.page-harga .premium-hero .hero-inner{min-height:clamp(230px,18vw,280px)}
.page-harga .hero-inner{padding:24px 40px 30px}
.page-harga .hero-copy{width:48%;max-width:600px}
.page-harga .hero-copy .eyebrow-pill{padding:6px 16px;border-radius:40px;background:#e2f4ea;color:var(--deep);font-size:13px;letter-spacing:.06em}
.page-harga .hero-copy h1{margin:12px 0 10px;font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.045em}
.page-harga .hero-copy p{max-width:470px;font-size:clamp(14px,1.2vw,17px);line-height:1.45;color:var(--ink)}
.page-harga .hero-copy:after{content:"";display:block;width:min(130px,40%);height:16px;margin-top:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 16'%3E%3Cpath d='M0 8h52M78 8h52' stroke='%23d39b30' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M65 2l6 6-6 6-6-6z' fill='%23fff' stroke='%23d39b30' stroke-width='2.2'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.premium.page-harga .premium-hero .hero-art.hero-art{inset:auto 0 0 auto;width:min(48%,659px);height:auto;aspect-ratio:659/226;border-radius:0;transform:none;opacity:1;mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 12%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 12%);mask-composite:intersect;-webkit-mask-composite:source-in}
.page-harga .hero-art>img{left:0;top:0;width:100%;height:100%;min-height:0;transform:none;object-fit:cover}
.page-harga .hero-light{background:linear-gradient(90deg,var(--cream) 0,var(--cream) 40%,color-mix(in srgb,var(--cream) 70%,transparent) 48%,transparent 58%)}

.pricing-page{width:min(1280px,calc(100% - 48px));padding-top:22px}
.price-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:20px}
.price-plan{position:relative;display:flex;flex-direction:column;border:3px solid #fff;border-radius:24px;box-shadow:0 12px 30px #163c3414}
.price-plan-csr{background:linear-gradient(160deg,#eef8f1,#f8fcf9 55%,#e9f5ed)}
.price-plan-full{background:linear-gradient(160deg,#fdf5e1,#fffbf2 55%,#fbf0d6)}
.price-plan-featured{border-color:#eab531;background:#fff;box-shadow:0 16px 36px #8a6a1a26}
.price-plan-top{padding:24px 22px 16px}
.price-plan-featured .price-plan-top{padding-top:30px;border-radius:20px 20px 26px 26px;background:linear-gradient(150deg,#0b8a5f,#05583f);color:#fff}
.price-plan-badge{position:absolute;top:0;left:50%;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 18px;border-radius:30px;background:linear-gradient(115deg,#f6d25a,#eab531);color:#2d2306;font-size:13px;white-space:nowrap;transform:translate(-50%,-55%);box-shadow:0 6px 14px #8a6a1a30}
.price-plan-badge .icon{width:16px;height:16px;fill:currentColor}
.price-plan-badge small{font-size:12px;font-weight:600}
.price-plan-head{display:flex;align-items:center;gap:14px}
.price-plan-icon{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:16px;color:#fff;background:linear-gradient(140deg,#0b8c5c,#05664a);box-shadow:0 8px 18px #0b4a3424}
.price-plan-featured .price-plan-icon{background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff40}
.price-plan-full .price-plan-icon{background:linear-gradient(140deg,#f6d25a,#e0a521);box-shadow:0 8px 18px #8a6a1a30}
.price-plan-icon .icon{width:36px;height:36px;stroke-width:1.9}
.price-plan-head h2{margin:0 0 6px;font-size:clamp(20px,1.9vw,27px);line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.price-plan-featured .price-plan-head h2{color:#fff}
.price-plan-chip{display:inline-block;padding:3px 12px;border-radius:20px;background:#d5eedd;color:#0b5a3e;font-size:13px;font-weight:700}
.price-plan-featured .price-plan-chip{background:#e7f6ec;color:#05583f}
.price-plan-full .price-plan-chip{background:#f8e2a6;color:#6b4a06}
.price-plan-amount{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:72px;margin:16px 0 12px;padding:10px 18px;border-radius:16px;background:#fff;box-shadow:0 6px 16px #163c3412}
.price-plan-full .price-plan-amount{background:#fff8e6;box-shadow:inset 0 0 0 1px #f2dca2}
.price-prefix{font-size:15px;font-weight:700;color:var(--ink)}
.price-currency{font-size:20px;font-weight:800;color:var(--ink)}
.price-plan-amount strong{font-size:clamp(26px,2.4vw,36px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.price-plan-featured .price-plan-amount strong,.price-plan-featured .price-currency{color:#05583f}
.price-plan-full .price-plan-amount strong,.price-plan-full .price-currency{color:#b07a0c}
.price-plan-amount .price-text{font-size:clamp(20px,1.8vw,26px)}
.price-note{font-size:15px;line-height:1.15;font-weight:600;color:#2f5260}
.price-plan-featured .price-note{font-size:18px;font-weight:800;color:#05583f}
.price-plan-csr .price-note,.price-plan-full .price-note{max-width:80px;margin-left:auto}
.price-plan-full .price-plan-amount{flex-wrap:nowrap;gap:8px;padding-inline:14px}
.price-plan-desc{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.price-plan-featured .price-plan-desc{color:#e2f2ec}
.price-plan-features{display:grid;gap:8px;margin:0;padding:14px 22px 20px;list-style:none}
.price-plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.35;color:var(--ink)}
.price-plan-features .icon{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:#16935e;color:#fff;stroke-width:3}
.premium .price-plan-btn{align-self:stretch;margin:auto 22px 22px;gap:12px;padding:12px 20px;font-size:15px;border-width:2px}
.premium .price-plan-full .price-plan-btn{border-color:#b07a0c;color:#6b4a06;background:#fffdf7}
.premium .price-plan-csr .price-plan-btn{background:#fff}

.price-compare{display:grid;grid-template-columns:minmax(200px,.27fr) minmax(0,1fr);gap:10px;margin-top:28px;padding:10px;border:1px solid #eef0e8;border-radius:24px;background:#fff;box-shadow:0 10px 28px #163c3410}
.price-compare-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;padding:26px 22px;border-radius:18px;background:linear-gradient(160deg,#0b7a55,#05503d);color:#fff}
.price-compare-art{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:24px;background:#ffffff14;color:#d9f2e3;box-shadow:inset 0 0 0 1px #ffffff26}
.price-compare-art>.icon{width:54px;height:54px;stroke-width:1.5}
.price-compare-art span{position:absolute;right:-8px;bottom:-8px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:#0b7a55;box-shadow:0 4px 10px #0003}
.price-compare-art span .icon{width:18px;height:18px;stroke-width:3}
.price-compare-intro h2{max-width:220px;margin:22px 0 10px;font-size:clamp(20px,1.7vw,25px);line-height:1.15;letter-spacing:-.02em;color:#fff}
.price-compare-intro h2:after{content:"";display:block;width:44px;height:3px;margin:12px auto 0;border-radius:3px;background:#eab531}
.price-compare-intro p{max-width:220px;margin:0;font-size:13.5px;line-height:1.5;color:#d6ece1}
.price-compare .table-scroll{border-radius:14px}
.price-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:13.5px}
.price-table th,.price-table td{padding:7px 10px;border-bottom:1px solid #edf0ea;text-align:center;vertical-align:middle;color:var(--ink)}
.price-table thead th{padding:10px;border-bottom:0;font-size:15px;line-height:1.1;font-weight:800;color:#fff}
.price-table thead th:first-child{background:#eef7f1;color:var(--ink);text-align:left;border-radius:12px 0 0 0}
.price-table thead .price-col-csr{background:linear-gradient(180deg,#14995f,#0b7a4c)}
.price-table thead .price-col-managed{background:linear-gradient(180deg,#3b8ee8,#1f6fd1)}
.price-table thead .price-col-full{background:linear-gradient(180deg,#c99a2b,#a77a12);border-radius:0 12px 0 0}
.price-table tbody th{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;text-align:left}
.price-table tbody th .icon{flex:none;width:18px;height:18px;color:var(--green)}
.price-table tbody .price-col-managed{background:#f2f7fe}
.price-table tbody .price-col-full{background:#fffaf0}
.price-table td{width:19%;font-size:13px;line-height:1.3}
.price-table td small{margin-left:6px;font-size:12.5px;color:var(--ink)}
.price-check .icon{width:20px;height:20px;color:#14925a;stroke-width:3;vertical-align:middle}
.price-dash{font-weight:700;color:#4b5b5f}
.price-pill{display:inline-block;padding:3px 14px;border-radius:20px;font-size:12.5px;font-weight:700}
.price-pill-csr{background:#d8f0e0;color:#0b6a43}
.price-pill-managed{background:#d7e8fd;color:#1a5fb4}
.price-pill-full{background:#fbe39b;color:#6b4a06}

.price-why{display:grid;grid-template-columns:minmax(230px,1.3fr) repeat(4,minmax(0,1fr));align-items:center;margin-top:24px;padding:18px 14px;border:1px solid #eef0e8;border-radius:24px;background:#fff;box-shadow:0 10px 28px #163c3410}
.price-why h2{display:flex;align-items:center;gap:14px;margin:0;padding-right:18px;font-size:clamp(17px,1.6vw,21px);line-height:1.2;color:var(--ink)}
.price-why-badge{display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:50%;background:linear-gradient(140deg,#f6d25a,#e0a521);color:#fff;box-shadow:0 6px 14px #8a6a1a30}
.price-why-badge .icon{width:34px;height:34px}
.price-why article{display:flex;align-items:center;gap:12px;padding:4px 14px;border-left:1px solid #e3e6dc}
.price-why-icon{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;background:#e6f5ec;color:var(--green)}
.price-why-icon .icon{width:28px;height:28px}
.price-why b{display:block;font-size:15px;line-height:1.2;color:var(--ink)}
.price-why small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:#2f5260}

.price-cta{position:relative;margin-top:44px;padding:34px 0 30px;background:linear-gradient(105deg,#0a7a52,#005a45 60%,#0b6a4c);color:#fff}
.price-cta:before{content:"";position:absolute;left:0;right:0;top:-26px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28C300 4 560 0 760 10S1180 26 1440 6V28Z' fill='%230a7a52'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.price-cta:after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,#f6d25a,#eab531,#f6d25a)}
.price-cta-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:30px}
.price-cta h2{display:flex;align-items:center;gap:14px;margin:0;padding:14px 26px;border-radius:40px;background:linear-gradient(115deg,#fbe08a,#f2c53d);color:#063a33;font-size:clamp(20px,2vw,28px);white-space:nowrap}
.price-cta-icon .icon{width:32px;height:32px}
.price-cta p{margin:0;padding-right:30px;border-right:1px solid #ffffff4d;font-size:clamp(14px,1.2vw,17px);line-height:1.45;color:#e2f2ec}
.premium .price-cta .price-cta-btn{gap:14px;padding:12px 26px;border-radius:40px;background:#fff;border-color:#fff;color:#063a33;text-align:left}
.price-cta-btn>.icon:first-child{width:30px;height:30px;color:#0b7a52}
.price-cta-btn b{display:block;font-size:15px}
.price-cta-btn small{display:block;font-size:14px;font-weight:600}
.price-footer{padding:20px 0;background:#073f3a;color:#e5f4ed;font-size:14px}
.price-footer .wrap{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;align-items:center;gap:10px 30px}
.price-footer .wrap>*+*{padding-left:30px;border-left:1px solid #ffffff40}
.price-footer a{display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}
.price-footer .icon{width:22px;height:22px}

@media(max-width:1100px){
    .price-plans{grid-template-columns:1fr;max-width:620px;margin-inline:auto;gap:34px}
    .price-compare{grid-template-columns:1fr}
    .price-compare-intro{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:0 20px;text-align:left}
    .price-compare-art{width:64px;height:64px;border-radius:18px}
    .price-compare-art>.icon{width:40px;height:40px}
    .price-compare-art span{width:26px;height:26px;right:-6px;bottom:-6px}
    .price-compare-art span .icon{width:15px;height:15px}
    .price-compare-intro h2{flex:1;max-width:none;margin:0}
    .price-compare-intro h2 br{display:none}
    .price-compare-intro h2:after{margin-left:0}
    .price-compare-intro p{flex-basis:100%;max-width:none;margin-top:12px}
    .price-why{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
    .price-why h2{grid-column:1/-1;padding:0 0 6px}
    .price-why article:nth-of-type(odd){border-left:0}
    .price-cta-inner{grid-template-columns:1fr;justify-items:start;gap:16px}
    .price-cta p{padding-right:0;border-right:0}
}
@media(max-width:900px){
    .page-harga .hero-inner{padding-inline:24px}
    .page-harga .hero-copy{width:52%}
    .price-footer .wrap{grid-template-columns:1fr;justify-content:start}
    .price-footer .wrap>*+*{padding-left:0;border-left:0}
}
@media(max-width:620px){
    .page-harga .premium-hero,.page-harga .premium-hero .hero-inner{min-height:0}
    .page-harga .premium-hero{display:flex;flex-direction:column-reverse}
    .page-harga .hero-inner{padding:24px 20px 10px}
    .page-harga .hero-copy{width:100%}
    .premium.page-harga .premium-hero .hero-art.hero-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:659/226;mask-image:linear-gradient(0deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(0deg,#000 85%,transparent);mask-composite:add;-webkit-mask-composite:source-over}
    .page-harga .hero-light{display:none}
    .pricing-page{width:calc(100% - 32px)}
    .price-plan-top{padding:22px 18px 14px}
    .price-plan-features{padding:12px 18px 18px}
    .premium .price-plan-btn{margin:auto 18px 18px}
    .price-why{grid-template-columns:1fr}
    .price-why article{border-left:0;padding:4px 0}
    .price-cta h2{white-space:normal;font-size:20px;padding:12px 20px}
    .premium .price-cta .price-cta-btn{width:100%}
}