.cc-page{padding:56px 0 100px;display:flex;flex-direction:column;align-items:center}
.cc-intro{text-align:center;max-width:46ch;margin-bottom:20px}
.cc-intro .hero__eyebrow{margin-bottom:18px}
.cc-intro h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-0.02em;margin:0 0 10px}
.cc-intro p{color:var(--ink-soft);margin:0;line-height:1.6}
.cc-tabs{display:flex;flex-wrap:wrap;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;max-width:fit-content;margin:0 auto 20px}
.cc-tab{border:none;background:transparent;padding:9px 16px;border-radius:999px;font-weight:600;font-size:.82rem;color:var(--ink-soft);cursor:pointer;transition:all var(--dur-fast) var(--ease);white-space:nowrap;display:flex;align-items:center;gap:6px}
.cc-tab svg{width:16px;height:16px;stroke:currentColor}
.cc-tab:hover{color:var(--ink)}.cc-tab.is-active{background:var(--ink);color:#fff}
.cc-content{width:100%;max-width:750px;margin-bottom:20px}
.cc-panel{display:none}.cc-panel.is-active{display:block}
.cc-cuaca-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cc-cuaca-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius-md);padding:20px 14px;text-align:center;cursor:pointer;transition:all var(--dur-fast) var(--ease);display:flex;flex-direction:column;align-items:center;gap:10px}
.cc-cuaca-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px rgba(27,31,59,.1)}
.cc-cuaca-card svg{width:48px;height:48px;stroke:var(--accent)}
.cc-cuaca-card__name{font-size:.85rem;font-weight:600;color:var(--ink)}
.cc-musim-visual,.cc-hujan-visual{background:var(--ink);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 20px 50px -20px rgba(27,31,59,.4)}
#cc-canvas-musim,#cc-canvas-hujan{width:100%;height:100%;display:block}
#cc-canvas-musim{aspect-ratio:2/1}#cc-canvas-hujan{aspect-ratio:1.6/1}
.cc-modal-overlay{position:fixed;inset:0;background:rgba(27,31,59,.5);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.cc-modal{background:var(--surface);border-radius:var(--radius-lg);padding:32px 24px;max-width:380px;width:100%;text-align:center;position:relative;box-shadow:0 30px 60px -20px rgba(27,31,59,.5);animation:modalIn .3s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.cc-modal-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}
.cc-modal-close:hover{background:var(--ink);color:#fff}
.cc-modal-icon svg{width:56px;height:56px;stroke:var(--accent);margin-bottom:12px}
.cc-modal h2{font-family:var(--font-display);font-size:1.2rem;margin:0 0 8px}
.cc-modal p{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin:0}