/* Atlas — kertas peta: garis kontur, pin, kartu pos berperangko, garis rute putus-putus */
.fam-atlas { --card: color-mix(in oklab, var(--bg) 55%, #fff); }
.fam-atlas .display, .fam-atlas .h1, .fam-atlas .h2 { text-transform: uppercase; letter-spacing: -.005em; line-height: .98; }
.fam-atlas .h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); }
.fam-atlas .display em, .fam-atlas .h1 em, .fam-atlas .h2 em { font-style: normal; color: var(--primary-text); text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.fam-atlas .eyebrow { gap: .5rem; color: var(--ink); letter-spacing: .16em; font-weight: 800; }
.fam-atlas .eyebrow::before { content: ""; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); }
.fam-atlas .sec--categories, .fam-atlas .sec--about, .fam-atlas .sec--faq { background: var(--topo); }

.fam-atlas .btn { border-radius: var(--r-sm); font-weight: 800; letter-spacing: .02em; }
.fam-atlas .btn--ghost { border: 2px dashed var(--ink); }
.fam-atlas .badge { border-radius: var(--r-xs); background: var(--ink); color: var(--bg); text-transform: uppercase; letter-spacing: .06em; }

/* kartu produk: kartu pos berperangko */
.pcard--postcard { padding: 10px; border-radius: 4px; background: #fffdf6; color: #2a2620; --muted: #6b6457; --line: #e3dccd; --surface-2: #ece5d6; box-shadow: 0 14px 26px -18px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .05); transition: transform .25s ease; }
.pcard--postcard:nth-child(odd) { transform: rotate(-.6deg); }
.pcard--postcard:nth-child(even) { transform: rotate(.6deg); }
.pcard--postcard:hover { transform: rotate(0) translateY(-4px); }
.pcard--postcard .pcard__media { aspect-ratio: 4 / 3; border-radius: 0; outline: 3px dotted #fffdf6; outline-offset: -3px; }
.pcard--postcard .pcard__body { position: relative; padding: .8rem .2rem .2rem; }
.pcard--postcard .pcard__body::before { content: ""; position: absolute; right: 2px; top: -26px; width: 52px; height: 52px; border: 2px solid color-mix(in oklab, var(--primary) 70%, #000); border-radius: 50%; opacity: .55; background: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in oklab, var(--primary) 60%, transparent) 7px 8px); transform: rotate(-12deg); pointer-events: none; }
.pcard--postcard .pcard__cat { color: color-mix(in oklab, var(--primary) 80%, #000); }
.pcard--postcard .pcard__name { font-weight: 800; text-transform: uppercase; letter-spacing: 0; padding-right: 30px; }
.pcard--postcard .pcard__foot { padding-top: .5rem; border-top: 1px solid var(--line); }
.pcard--postcard .pcard__add, .pcard--postcard .pcard__go { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.pcard--postcard .pcard__add .ic, .pcard--postcard .pcard__go .ic { transform: rotate(45deg); }
.pcard--postcard .pcard__go { background: var(--accent); color: var(--on-accent); }
@media (max-width: 559px) { .pcard--postcard .pcard__add { transform: rotate(-45deg); } }
.pgrid:has(> .pcard--postcard) { gap: 22px 16px; }

/* blok isi */
.fam-atlas .feat, .fam-atlas .tcard, .fam-atlas .step, .fam-atlas .cinfo, .fam-atlas .pd__box { border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--card); }
.fam-atlas .flist__i { border-bottom: 1.5px dashed var(--line-strong); }
.fam-atlas .feat__ic { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); color: var(--on-accent); }
.fam-atlas .feat__ic .ic { transform: rotate(45deg); }
.fam-atlas .stats { border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--ink); }
.fam-atlas .stat__v { font-family: var(--font-head), sans-serif; }
.fam-atlas .faq { border-top: 1.5px solid var(--ink); }
.fam-atlas .faq__i { border-bottom: 1.5px dashed var(--line-strong); }
.fam-atlas .faq__q { text-transform: uppercase; letter-spacing: .01em; font-weight: 800; }
.fam-atlas .crail__img { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0 0 2px var(--ink); }
.fam-atlas .crail__img img, .fam-atlas .crail__img .ic { transform: rotate(45deg) scale(1.4); }
.fam-atlas .crail__img--all .ic { transform: rotate(45deg); }
.fam-atlas .crail__img--all { font-size: .9rem; }
.fam-atlas .cat { border-radius: var(--r-sm); border: 1.5px solid var(--ink); }
.fam-atlas .about__img, .fam-atlas .feats-split__img, .fam-atlas .ahero__img { border-radius: 4px; padding: 10px 10px 34px; background: #fffdf6; box-shadow: 0 16px 30px -18px rgb(0 0 0 / .5); transform: rotate(-1.2deg); }
.fam-atlas .about__img img, .fam-atlas .feats-split__img img, .fam-atlas .ahero__img img { height: 100%; }
.fam-atlas .map { border: 1.5px solid var(--ink); border-radius: var(--r-sm); position: relative; }
.fam-atlas .cta { border-radius: var(--r); }
.fam-atlas .cta--split { border: 1.5px solid var(--ink); background: var(--topo), var(--card); }
.fam-atlas .gitem { border-radius: 4px; }
.fam-atlas .gmason .gitem { padding: 6px; background: #fffdf6; box-shadow: 0 10px 20px -14px rgb(0 0 0 / .5); }
.fam-atlas .pd__main { border-radius: var(--r-sm); border: 1.5px solid var(--ink); }
.fam-atlas .input, .fam-atlas .select, .fam-atlas .textarea, .fam-atlas .catbtn, .fam-atlas .qty { border: 1.5px solid var(--ink); }

/* kepala halaman: koordinat & garis rute */
.phead--coords { position: relative; margin-bottom: clamp(28px, 4vw, 56px); background: var(--topo); border-bottom: 1.5px solid var(--ink); }
.phead--coords .h1 { text-transform: uppercase; max-width: 18ch; }
.phead--coords .phead__in::after { content: ""; display: block; width: min(100%, 260px); height: 0; margin-top: .4rem; border-top: 3px dashed var(--accent); }
.phead--coords .crumbs { width: fit-content; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 600; }
.fam-atlas .crail__i { gap: 16px; }
.fam-atlas .crail__img { width: 56px; height: 56px; }
@media (min-width: 960px) { .fam-atlas .crail__img { width: 62px; height: 62px; } }