/* ============================================================
   UI KIT — Panduan Claude AI untuk Pemula
   Kanvas dokumentasi dwibahasa (BM / ID). Statik, tiada build.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#E7DCC4;color:#191512;
     font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#F05323;text-decoration:none}
a:hover{color:#191512}
button{font-family:inherit}
.mono{font-family:'Space Mono',ui-monospace,Menlo,monospace}

/* ---------- kanvas ---------- */
.canvas{width:1680px;max-width:100%;margin:0 auto;padding:56px 48px 120px}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(231,220,196,.92);
        backdrop-filter:blur(10px);border-bottom:1.5px solid #CFC0A2}
.topbar-in{width:1680px;max-width:100%;margin:0 auto;padding:12px 48px;
           display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tb-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.tb-dot{width:26px;height:9px;border-radius:9px;background:#F05323}
.navlinks{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.navlinks a{font-size:12.5px;font-weight:600;color:#5E564D;padding:7px 11px;border-radius:999px}
.navlinks a:hover{background:#F1EAD8;color:#191512}

/* ---------- suis bahasa ---------- */
.langsw{display:flex;background:#191512;border-radius:999px;padding:4px;gap:4px;flex:none}
.langsw button{border:none;background:none;cursor:pointer;color:#C9BFAF;
               font-size:13px;font-weight:700;padding:8px 18px;white-space:nowrap;border-radius:999px;
               transition:background .16s ease,color .16s ease}
.langsw button.on{background:#F05323;color:#fff}
.langsw button:hover:not(.on){color:#FAF6EE}

/* ---------- seksyen ---------- */
.sechead{display:flex;align-items:center;gap:14px;margin:76px 0 26px}
.secnum{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
        padding:9px 15px;border-radius:999px;background:#191512;color:#FAF6EE;white-space:nowrap}
.secline{flex:1;height:2px;background:#CFC0A2}
.secsub{font-size:14px;font-weight:500;color:#6E6458;max-width:520px;text-align:right}

.card{background:#FAF6EE;border:1.5px solid #E0D2B4;border-radius:26px;padding:28px}
.card-dark{background:#191512;border-radius:26px;padding:28px;color:#FAF6EE}
.card h3,.card-dark h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.cap{font-size:13.5px;font-weight:500;color:#6E6458;margin-top:6px;line-height:1.45}
.grid2{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.g{display:grid;gap:22px}
@media(max-width:1100px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* ---------- swatch ---------- */
.sw{border-radius:18px;height:104px;border:1px solid rgba(0,0,0,.08)}
.swname{font-size:13.5px;font-weight:700;margin-top:10px}
.swhex{font-size:11.5px;color:#6E6458;margin-top:2px}

/* ---------- telefon ---------- */
.phone{width:390px;height:844px;background:#F9F3E5;border-radius:46px;flex:none;
       box-shadow:0 30px 60px -22px rgba(0,0,0,.45),0 0 0 10px #111,0 0 0 12px #2a2a2a;
       position:relative;overflow:hidden;display:flex;flex-direction:column}
.phone-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}
.phone-scroll::-webkit-scrollbar,.xs::-webkit-scrollbar{width:0;height:0}
.statusbar{height:52px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;
           padding:0 30px 6px;font-size:15px;font-weight:600;color:#111;position:relative;z-index:5}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;
         border-radius:3px;background:#111;opacity:.85;pointer-events:none}

/* ---------- blok skrin ---------- */
.screen{display:grid;grid-template-columns:430px 1fr;gap:34px;align-items:start;
        background:#FAF6EE;border:1.5px solid #E0D2B4;border-radius:32px;padding:30px;margin-bottom:26px}
@media(max-width:1100px){.screen{grid-template-columns:1fr}}
.scr-id{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F05323}
.scr-title{font-size:clamp(26px,2.2vw,32px);font-weight:700;letter-spacing:-.025em;margin:8px 0 0;line-height:1.08}
.scr-lead{font-size:15.5px;line-height:1.6;color:#4A423A;margin:12px 0 0;max-width:760px}
.metabar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.meta{font-size:12px;font-weight:600;background:#F1EAD8;border:1px solid #E0D2B4;
      border-radius:999px;padding:6px 12px;color:#5E564D}
.meta b{color:#191512}
.spec{margin-top:22px;display:grid;gap:16px}
.spec-h{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8B7F72;
        display:flex;align-items:center;gap:9px}
.spec-h::after{content:'';flex:1;height:1px;background:#E0D2B4}
.anat{display:grid;gap:9px}
.anat-row{display:flex;gap:12px;align-items:flex-start;background:#F4EDDC;border-radius:14px;padding:11px 13px}
.anat-n{width:24px;height:24px;border-radius:8px;background:#191512;color:#FAF6EE;flex:none;
        display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.anat-t{font-size:14px;line-height:1.5;color:#3F3931}
.anat-t b{color:#191512}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 16px;font-size:13.5px;line-height:1.55}
.kv dt{font-weight:700;color:#191512}
.kv dd{margin:0;color:#4A423A}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8B7F72;
        padding:0 12px 10px;border-bottom:1.5px solid #E0D2B4;font-weight:700}
.tbl td{padding:11px 12px;border-bottom:1px solid #EDE3C9;color:#3F3931;vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      color:#fff;border-radius:8px;padding:3px 9px}
.note{border-left:4px solid #F05323;background:#F1EAD8;border-radius:0 16px 16px 0;padding:13px 16px;
      font-size:14px;line-height:1.55;color:#3F3931}
.do{border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.5}
.do-y{background:#E4F3EE;border:1px solid #B9E0D2;color:#12492C}
.do-n{background:#FDEDE7;border:1px solid #F5CBBB;color:#6B2314}

/* ---------- galeri ikon ---------- */
.icongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.iconcell{background:#F4EDDC;border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;
          align-items:center;gap:8px;transition:background .15s ease}
.iconcell:hover{background:#EDE3C9}
.iconcell span{font-size:9.5px;color:#6E6458;text-align:center;word-break:break-all;line-height:1.2}

/* ---------- petak demo komponen ---------- */
.demo{background:#F9F3E5;border:1px dashed #D8CEBA;border-radius:20px;padding:20px;margin-top:16px}
.demo-lbl{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
          color:#A2968A;margin-bottom:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.rowwrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- animasi ---------- */
@keyframes cgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5%)}}
@media (prefers-reduced-motion:reduce){[style*="cgFloat"]{animation:none!important}}
@media(max-width:820px){
  .canvas{padding:28px 16px 80px}
  .topbar-in{padding:10px 16px}
  .navlinks{display:none}
  .phone{width:100%;max-width:390px;height:760px}
  .secsub{display:none}
  .langsw button{padding:8px 12px;font-size:12px}
  .icongrid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .kv{grid-template-columns:1fr}
}