/* Fitur tambahan: alat hitung, layanan, proyek, CivilAI, penghitung pengunjung.
   Memakai variabel tema dari style.css (kertas, tinta, merah). */

/* ---------- Bentuk dasar ---------- */
.tabs,.ctrl,.slots,.pl{display:flex;flex-wrap:wrap;gap:.5rem}
.tabs{margin-bottom:1.25rem}
.ctrl,.slots{margin-top:1rem}
.pl{list-style:none;margin:1rem 0 0;padding:0}
.tab{font:700 .98rem/1 var(--font-body);padding:.7rem 1rem;color:var(--ink);background:var(--paper-hi);border:2px solid var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.tab:hover{transform:translateY(-2px)}
.tab[aria-selected="true"],.tab[aria-pressed="true"]{background:var(--ink);color:var(--paper-hi);box-shadow:4px 4px 0 var(--accent)}
.panel{animation:fade-up .45s var(--ease)}
.panel[hidden]{display:none}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:.9rem 1.1rem;margin-bottom:1.25rem}
.fld{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.92rem}
.fld--wide{grid-column:1/-1}
.fld input,.fld select,.fld textarea{width:100%;min-height:2.9rem;padding:.6rem .7rem;font:500 1rem/1.3 var(--font-body);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:0}
.fld textarea{min-height:5.5rem;resize:vertical}
.fld :focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.hint,.note{color:var(--ink-2);font-size:.88rem;font-weight:400}
.note{margin:1rem 0 0;max-width:62ch}
.msg{margin:1rem 0 0;padding:.8rem 1rem;background:var(--paper-lo);border-left:5px solid var(--accent);font-weight:600}
.msg--ok{border-left-color:var(--ink)}
.plate .actions{margin-top:1.2rem}
#rec-form .form{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* ---------- Hasil hitung ---------- */
.out{margin:0;border-top:2px solid var(--ink)}
.out > div{display:grid;grid-template-columns:minmax(7rem,1fr) auto;gap:1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line);animation:unroll .6s var(--ease) backwards}
.out dt{color:var(--ink-2);font-weight:500}
.out dd{margin:0;font:800 1.7rem/1 var(--font-display);text-align:right}
.out dd small{margin-left:.35rem;font:600 .85rem var(--font-body);color:var(--ink-2)}
.out .no{color:var(--accent-text)}

/* ---------- Katalog dan kalender ---------- */
.skill-grid .plate .chips{margin-bottom:0}
.cal{padding:.8rem;background:var(--paper);border:2px solid var(--ink)}
.cal__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.cal__bar strong{font:800 1.5rem/1 var(--font-display)}
.cal__nav{width:2.4rem;height:2.4rem;font-size:1.3rem;line-height:1;color:var(--ink);background:var(--paper-hi);border:2px solid var(--ink);cursor:pointer}
.cal__nav:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
.cal__nav:disabled{opacity:.35;cursor:not-allowed}
.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal__grid span{text-align:center;font-size:.78rem;font-weight:700;color:var(--ink-2)}
.day{aspect-ratio:1;font:600 .95rem var(--font-body);color:var(--ink);background:var(--paper-hi);border:1px solid var(--line);cursor:pointer;transition:transform .12s,box-shadow .12s}
.day:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
.day:disabled{opacity:.35;cursor:not-allowed}
.day--today{outline:2px dashed var(--ink);outline-offset:-4px}
.day[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--ink)}

/* ---------- Unggah berkas ---------- */
.drop{position:relative;display:grid;place-items:center;gap:.2rem;padding:1.4rem 1rem;text-align:center;background:var(--paper);border:2px dashed var(--ink);cursor:pointer;transition:background .2s,transform .2s}
.drop:hover,.drop.on{background:var(--paper-lo);transform:translate(-2px,-2px)}
.drop:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.files{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0;padding:0;list-style:none}
.files li{display:flex;align-items:center;gap:.5rem;padding:.35rem .4rem .35rem .7rem;font-size:.85rem;font-weight:600;color:var(--paper-hi);background:var(--ink);animation:node-in .3s var(--ease)}
.files button{width:1.5rem;height:1.5rem;color:var(--on-accent);background:var(--accent);border:0;font-weight:800;cursor:pointer}

/* ---------- Proyek: 3D, sebelum-sesudah, peta ---------- */
.v3d{position:relative;aspect-ratio:16/10;border:2px solid var(--ink);background-color:var(--paper);background-image:linear-gradient(rgba(var(--ink-rgb),.08) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.08) 1px,transparent 1px);background-size:28px 28px}
.v3d canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.v3d canvas:active{cursor:grabbing}
.cmp{--p:50%;position:relative;aspect-ratio:16/9;overflow:hidden;border:2px solid var(--ink);user-select:none;background:var(--paper-lo)}
.cmp__l{position:absolute;inset:0;background-size:cover;background-position:center}
.cmp__top{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp__tag{position:absolute;top:.7rem;padding:.3rem .6rem;font-size:.85rem;font-weight:700;color:var(--paper-hi);background:var(--ink)}
.cmp__bar{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:var(--accent);pointer-events:none}
.cmp__bar::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px;background:var(--paper-hi);border:3px solid var(--ink);transform:rotate(45deg)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp:focus-within{outline:3px solid var(--ink);outline-offset:3px}
/* ilustrasi bawaan; ganti dengan foto asli (lihat README) */
.scene-a{background:repeating-linear-gradient(90deg,transparent 0 56px,var(--accent) 56px 60px) 0 66%/100% 10% no-repeat,linear-gradient(180deg,var(--scene-sky) 0 58%,var(--scene-ground) 58% 100%)}
.scene-b{background:linear-gradient(var(--accent),var(--accent)) 50% 58%/40% 7% no-repeat,linear-gradient(var(--ink),var(--ink)) 50% 100%/34% 44% no-repeat,linear-gradient(180deg,var(--scene-sky) 0 58%,var(--scene-ground) 58% 100%)}
.cmp__l.foto{background-size:cover;background-position:center;background-repeat:no-repeat}
.map{position:relative;z-index:0;isolation:isolate;height:clamp(300px,55vh,520px);background:var(--paper-lo);border:2px solid var(--ink)}
.map .leaflet-tile-pane{filter:grayscale(.75) contrast(1.05)}
.map .msg{margin:1rem}
.pin i{display:block;width:16px;height:16px;margin:3px;background:var(--accent);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(45deg);animation:pin-in .5s var(--ease) backwards}
.leaflet-popup-content-wrapper{border-radius:0;color:var(--ink);background:var(--paper-hi);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--accent);font-family:var(--font-body)}
.leaflet-popup-tip{background:var(--paper-hi)}

/* ---------- CivilAI ---------- */
.chat-fab{position:fixed;right:1.3rem;bottom:1.3rem;z-index:30;display:flex;align-items:center;gap:.55rem;padding:.8rem 1.1rem;font:700 1rem/1 var(--font-body);color:var(--on-accent);background:var(--accent);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s;animation:place .75s cubic-bezier(.3,1.3,.5,1) 1.6s backwards}
.chat-fab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.chat-fab[hidden],.chat[hidden]{display:none}
.chat{position:fixed;right:1.3rem;bottom:1.3rem;z-index:40;display:flex;flex-direction:column;width:min(23.5rem,calc(100vw - 2rem));max-height:min(36rem,calc(100dvh - 2.6rem));background:var(--paper-hi);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--accent);animation:chat-in .35s var(--ease)}
.chat__head{display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;color:var(--paper-hi);background:var(--ink)}
.chat__head strong{font:800 1.35rem/1 var(--font-display);letter-spacing:.02em}
.chat__x{width:2rem;height:2rem;font-size:1.4rem;line-height:1;color:var(--paper-hi);background:transparent;border:1.5px solid var(--paper-hi);cursor:pointer}
.chat__log{flex:1;display:flex;flex-direction:column;gap:.6rem;min-height:8rem;padding:.9rem;overflow-y:auto}
.bub{max-width:90%;padding:.6rem .8rem;font-size:.95rem;line-height:1.45;white-space:pre-line}
.bub--bot{align-self:flex-start;background:var(--paper-lo);border-left:4px solid var(--accent)}
.bub--me{align-self:flex-end;color:var(--paper-hi);background:var(--ink)}
.bub a{font-weight:700}
.dots i{display:inline-block;width:6px;height:6px;margin-right:4px;background:var(--ink-2);animation:blink 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
.chat__qs{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 .9rem .7rem}
.chat__qs button{padding:.4rem .6rem;font:600 .85rem/1.1 var(--font-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);cursor:pointer}
.chat__qs button:hover{background:var(--ink);color:var(--paper-hi)}
.chat__form{display:flex;border-top:2px solid var(--ink)}
.chat__form input{flex:1;min-width:0;padding:.8rem;font:500 1rem var(--font-body);color:var(--ink);background:var(--paper-hi);border:0}
.chat__form button{padding:0 1rem;font-weight:700;color:var(--on-accent);background:var(--accent);border:0;border-left:2px solid var(--ink);cursor:pointer}
.chat__note{margin:0;padding:.35rem .9rem .5rem;font-size:.75rem;color:var(--ink-2)}

/* ---------- Gerak ---------- */
@keyframes pin-in{from{opacity:0;transform:rotate(45deg) scale(0)}to{opacity:1;transform:rotate(45deg) scale(1)}}
@keyframes chat-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.25}}

/* ---------- Layar kecil ---------- */
@media (max-width:52rem){
  .site-nav ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(4.6rem,1fr);overflow-x:auto;scrollbar-width:none}
  .site-nav ul::-webkit-scrollbar{display:none}
  .chat-fab,.chat{bottom:calc(4.9rem + env(safe-area-inset-bottom))}
  .chat{right:1rem;max-height:calc(100dvh - 7.6rem)}
  .v3d,.cmp{aspect-ratio:4/3}
  .out dd{font-size:1.45rem}
}