.muted{color:var(--muted)}
[hidden]{display:none!important}

/* Kepala halaman artikel */
.b-head{position:relative;overflow:hidden;padding:8rem 1.2rem 3.2rem;color:#FFFDF8;background:linear-gradient(135deg,var(--a,#2C8199),var(--b,#1B5566))}
.b-head::before{content:"";position:absolute;right:-6%;top:-45%;width:42vw;max-width:520px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,218,.75),rgba(255,214,140,0) 68%)}
.b-head .wrap{position:relative}
.b-head h1{font-size:clamp(1.9rem,5vw,3rem);margin:.6rem 0;text-shadow:0 2px 20px rgba(10,35,45,.3);text-wrap:balance}

.b-body{padding:3rem 1.2rem 5rem}
.hal-head+.b-body{padding-top:1.4rem}

/* Sampul: foto bila ada, jika tidak gradasi senja dengan matahari dan ombak tipis */
.b-feature,.b-top,.a-pk{position:relative;display:block;overflow:hidden;
  background:
    radial-gradient(circle at 80% 28%,rgba(255,246,218,.78) 0 9%,rgba(255,246,218,0) 10%),
    radial-gradient(ellipse 130% 55% at 25% 118%,rgba(255,253,248,.30) 0 58%,rgba(255,253,248,0) 59%),
    radial-gradient(ellipse 130% 45% at 80% 125%,rgba(27,85,102,.30) 0 58%,rgba(27,85,102,0) 59%),
    linear-gradient(135deg,var(--a),var(--b))}
.b-feature>img,.b-top img,.a-pk>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* Label kecil */
.b-meta{color:var(--muted);font-size:.88rem}
.b-chip{display:inline-block;padding:.24rem .8rem;border-radius:999px;background:rgba(14,40,50,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#FFFDF8;font-size:.78rem;font-weight:600;letter-spacing:.02em;border:1px solid rgba(255,253,248,.35)}
.b-chip.terang{background:var(--senja);color:var(--ink);border-color:transparent}
.b-top .b-chip{position:absolute;left:.9rem;top:.9rem;z-index:1}
.b-more{display:inline-flex;align-items:center;gap:.4rem;color:var(--karang);font-weight:600}
.b-more svg,.b-panah svg,.a-pk-btn svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}

/* Pilihan topik */
.b-topik{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 auto 2rem}
.b-topik button{padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--krem);color:var(--ink);
  font:inherit;font-size:.93rem;font-weight:600;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.b-topik button:hover{border-color:var(--laut2);transform:translateY(-2px)}
.b-topik button.on{background:var(--laut);border-color:var(--laut);color:#FFFDF8}

/* Artikel terbaru: foto penuh dengan teks di atasnya */
.b-feature{min-height:460px;margin-bottom:2rem;border-radius:28px;text-decoration:none;color:#FFFDF8;
  display:flex;align-items:flex-end;box-shadow:0 18px 44px rgba(20,55,68,.16);transition:transform .4s,box-shadow .4s}
.b-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,38,0) 25%,rgba(10,30,38,.55) 60%,rgba(10,30,38,.88))}
.b-feature:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(20,55,68,.22)}
.b-feature-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:.75rem;max-width:720px;padding:clamp(1.4rem,4vw,2.8rem)}
.b-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.b-feature h2{font-size:clamp(1.6rem,3.4vw,2.5rem);margin:0;line-height:1.15;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.b-feature p{margin:0;color:rgba(255,253,248,.88);font-size:1.05rem;max-width:600px}
.b-foot{display:flex;align-items:center;gap:1rem;margin-top:.3rem}
.b-foot small{color:rgba(255,253,248,.8);font-size:.9rem}
.b-panah{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--karang);color:#fff;flex:none;transition:background .3s}

/* Kartu artikel */
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem}
.b-card{display:flex;flex-direction:column;background:var(--krem);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .35s,box-shadow .35s,border-color .35s}
.b-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(20,55,68,.14);border-color:transparent}
.b-top{aspect-ratio:16/10}
.b-in{display:flex;flex-direction:column;gap:.55rem;padding:1.2rem 1.35rem 1.4rem;flex:1}
.b-in h3{font-size:1.28rem;line-height:1.25;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-in p{color:var(--muted);font-size:.97rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-in .b-more{margin-top:auto;padding-top:.5rem}
.b-kosong{text-align:center;color:var(--muted);padding:2rem 0}

.b-feature:hover>img,.b-card:hover .b-top img,.a-pk:hover>img{transform:scale(1.06)}
.b-card:hover .b-more svg,.b-feature:hover .b-panah svg,.a-pk:hover .a-pk-btn svg{transform:translateX(4px)}
.b-feature:hover .b-panah{background:#BA4630}

/* Garis kemajuan membaca */
.a-progres{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.a-progres span{display:block;height:100%;background:linear-gradient(90deg,var(--senja),var(--karang));transform:scaleX(0);transform-origin:left}

/* Kepala halaman artikel dengan foto sampul */
.a-head{padding-bottom:6.5rem}
.a-head.has-img{background:linear-gradient(180deg,rgba(14,40,50,.45),rgba(14,40,50,.82)),var(--img) center/cover no-repeat}
.a-head.has-img::before{display:none}
.a-tag{display:inline-block;margin-top:1.4rem;padding:.25rem .85rem;border-radius:999px;background:var(--senja);color:var(--ink);font-size:.8rem;font-weight:700;letter-spacing:.03em}
.a-head h1{font-size:clamp(1.8rem,4.2vw,2.8rem);margin:.8rem 0 .8rem}
.a-lead{max-width:640px;font-size:1.12rem;color:rgba(255,253,248,.9);margin:0 0 1.2rem;text-shadow:0 1px 10px rgba(10,35,45,.3)}
.a-meta{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.a-meta li{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .9rem;border-radius:999px;
  background:rgba(255,253,248,.16);border:1px solid rgba(255,253,248,.35);font-size:.92rem;font-weight:500}
.a-meta svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Tombol kembali ke semua artikel (sama dengan halaman detail paket) */
.b-back{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem .4rem .65rem;border-radius:999px;
  background:rgba(14,40,50,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1.5px solid rgba(255,253,248,.55);
  color:#FFFDF8;font-size:.875rem;font-weight:600;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:background .25s,border-color .25s,transform .25s}
.b-back svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.b-back:hover{background:var(--karang);border-color:var(--karang);transform:translateX(-3px)}

/* Isi artikel dan daftar isi di sampingnya */
.a-layout{position:relative;max-width:760px;margin:-4rem auto 0;padding:0 1.2rem}
.a-layout.ada-isi{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:2rem;align-items:start}
.article{position:relative;padding:2.8rem clamp(1.3rem,5vw,3.2rem) 2.4rem;
  background:var(--krem);border:1px solid var(--line);border-radius:24px;box-shadow:0 20px 50px rgba(20,55,68,.10);
  font-size:1.09rem;line-height:1.8}
.article h2{display:flex;align-items:baseline;gap:.75rem;font-size:clamp(1.3rem,3vw,1.6rem);margin:2.4rem 0 .9rem;line-height:1.25;text-wrap:balance}
.a-no{flex:none;font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--karang);padding:.2rem .5rem;border-radius:8px;background:rgba(210,83,58,.1);transform:translateY(-.15em)}
.article>h2:first-child{margin-top:0}
.article p{margin-bottom:1.1rem}
.article p:last-child{margin-bottom:0}

/* Kerapian tulisan: baris terakhir tidak menyisakan satu kata, judul dibagi seimbang.
   Rata kiri-kanan hanya untuk paragraf artikel di layar lebar; di HP dan kartu sempit tetap rata kiri. */
.article p,.a-lead,.b-in p,.b-feature p,.a-paket-head p,.cta-box p{text-wrap:pretty;overflow-wrap:break-word}
.article h2,.b-in h3,.b-feature h2,.a-head h1{text-wrap:balance}
@media (min-width:700px){
  .article p{text-align:justify;text-justify:inter-word}
}
.article>h2:first-child+p::first-letter{float:left;font-family:var(--serif);font-size:3.3em;line-height:.9;margin:.08em .12em 0 0;color:var(--laut)}

.a-isi{position:sticky;top:6rem;margin-top:5rem}
.a-isi nav{padding:1.3rem 1.2rem;background:var(--krem);border:1px solid var(--line);border-radius:18px}
.a-isi b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.7rem}
.a-isi ol{list-style:none;padding:0;margin:0;display:grid;gap:.15rem;counter-reset:isi}
.a-isi a{display:flex;gap:.55rem;padding:.45rem .55rem;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.92rem;line-height:1.35;
  border-left:3px solid transparent;transition:background .2s,border-color .2s,color .2s}
.a-isi a::before{counter-increment:isi;content:counter(isi,decimal-leading-zero);font-size:.75rem;font-weight:700;color:var(--muted);padding-top:.1rem}
.a-isi a:hover{background:var(--pasir2)}
.a-isi a.on{background:var(--pasir2);border-left-color:var(--karang);color:var(--laut);font-weight:600}
.a-isi a.on::before{color:var(--karang)}

/* Paket yang dibahas */
.a-paket{padding:3.5rem 1.2rem 0}
.a-paket-head{text-align:center;margin-bottom:1.6rem}
.a-paket-head h2{margin:0 0 .3rem}
.a-paket-head p{color:var(--muted);margin:0}
.a-paket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.a-pk{aspect-ratio:4/3;border-radius:22px;text-decoration:none;color:#FFFDF8;display:flex;align-items:flex-end;
  box-shadow:0 12px 30px rgba(20,55,68,.14);transition:transform .35s,box-shadow .35s}
.a-pk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,38,0) 35%,rgba(10,30,38,.85))}
.a-pk:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(20,55,68,.2)}
.a-pk-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:.25rem;padding:1.2rem 1.3rem}
.a-pk-in small{font-size:.82rem;font-weight:600;color:var(--senja);text-transform:uppercase;letter-spacing:.05em}
.a-pk-in b{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.2}
.a-pk-btn{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;font-size:.9rem;font-weight:600}

/* Ajakan memesan */
.cta-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;margin:3rem auto 0;
  padding:2rem clamp(1.3rem,4vw,2.4rem);border-radius:24px;color:#FFFDF8;
  background:radial-gradient(circle at 92% 0%,rgba(255,246,218,.45),rgba(255,214,140,0) 45%),linear-gradient(135deg,var(--laut2),var(--laut))}
.cta-box>div:first-child{flex:1 1 300px}
.cta-box h2{font-size:clamp(1.4rem,3vw,1.8rem);margin:0 0 .4rem}
.cta-box p{margin:0;color:#DCE8E8}
.cta-btn{display:flex;flex-wrap:wrap;gap:.7rem}
.btn-wa{background:#3A9161}.btn-wa:hover{background:#317E54}

/* Artikel lainnya */
.more-posts{max-width:1120px;margin:0 auto}
.more-posts>h2{font-size:1.6rem;margin-bottom:1.2rem}

@media (max-width:900px){
  .a-layout.ada-isi{display:block;max-width:760px}
  .a-isi{display:none}
}
@media (max-width:820px){
  .b-feature{min-height:400px;border-radius:22px}
  .b-feature p{font-size:.98rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .b-topik{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -1.2rem 1.6rem;padding:0 1.2rem .3rem;scrollbar-width:none}
  .b-topik::-webkit-scrollbar{display:none}
  .b-topik button{flex:none}
  .b-grid{grid-template-columns:1fr}
  .a-head{padding-bottom:5rem}
  .a-layout{margin-top:-3rem;padding:0 1rem}
  .article{font-size:1.03rem;padding-top:2.2rem}
  .a-paket{padding-top:2.6rem}
  .cta-box{margin:2rem 1rem 0}
  .cta-btn,.cta-btn .btn,.cta-btn .wa-pilih{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .b-feature,.b-card,.a-pk,.b-feature>img,.b-top img,.a-pk>img,.b-more svg,.b-back,.b-topik button{transition:none}
}