/* Kakak Recond — sistem reka bentuk (Okt 2026).
   Arah: "The split stage" (taste-skill). Putih + ungu jenama. Bodoni Moda (paparan) + Jost (teks).
   Dimuat oleh index, 404, offline dan halaman Edge (/stock, /model). */

:root{
  --kr-bg:#FFFFFF;
  --kr-paper:#F6F2FA;
  --kr-paper-2:#ECE3F5;
  --kr-ink:#1E1229;
  --kr-muted:#5B4F66;
  --kr-plum:#4A2E7A;
  --kr-plum-hover:#5A3A8F;
  --kr-deep:#24163A;
  --kr-deep-2:#2E1D49;
  --kr-on-deep:#FFFFFF;
  --kr-on-deep-muted:#CDBFE0;
  --kr-lilac:#CBB6E8;

  --kr-display:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --kr-text:'Jost','Helvetica Neue',Arial,sans-serif;
  --kr-step-small:.875rem;                                  /* 14px */
  --kr-step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);   /* 17–19px */
  --kr-step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);     /* 20–26px */
  --kr-step-head:clamp(2rem,1.3rem + 3.2vw,4rem);           /* 32–64px */
  --kr-step-giant:clamp(3.5rem,1rem + 11vw,11rem);          /* 56–176px */

  --kr-gutter:clamp(16px,3vw,40px);
  --kr-max:1320px;
  --kr-header:68px;
  --kr-ease-out:cubic-bezier(.23,1,.32,1);
  /* spring Motion disampel ke linear(): tekan .15/.2, sheet .35/0, modal .3/.08, rise .55/0, pop .3/.15 */
  --kr-spring-press:270ms linear(0,0.086,0.267,0.464,0.639,0.776,0.875,0.941,0.981,1.003,1.012,1.015,1.014,1.011,1.008,1.006,1.004,1.002,1.001,1,1);
  --kr-spring-sheet:590ms linear(0,0.073,0.221,0.382,0.527,0.647,0.742,0.814,0.867,0.906,0.934,0.954,0.968,0.978,0.985,0.99,0.993,0.995,0.997,0.998,1);
  --kr-spring-modal:415ms linear(0,0.053,0.169,0.308,0.445,0.568,0.672,0.756,0.823,0.874,0.912,0.94,0.96,0.974,0.984,0.99,0.994,0.997,0.999,1,1);
  --kr-spring-rise:870ms linear(0,0.065,0.201,0.353,0.493,0.613,0.71,0.785,0.843,0.886,0.918,0.942,0.959,0.971,0.979,0.986,0.99,0.993,0.995,0.997,1);
  --kr-spring-pop:500ms linear(0,0.074,0.232,0.409,0.571,0.705,0.808,0.883,0.934,0.967,0.987,0.998,1.004,1.006,1.006,1.006,1.004,1.003,1.002,1.002,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;interpolate-size:allow-keywords;scroll-padding-top:calc(var(--kr-header) + 12px)}
body{margin:0;background:var(--kr-bg);color:var(--kr-ink);font-family:var(--kr-text);font-size:var(--kr-step-body);line-height:1.6;letter-spacing:.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3{font-family:var(--kr-display);font-weight:500;letter-spacing:-.02em;line-height:.95;margin:0;font-optical-sizing:auto}
h4,b,strong{font-weight:500}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
::selection{background:var(--kr-plum);color:#fff}
:focus-visible{outline:2px solid var(--kr-plum);outline-offset:3px}
a,button,summary,select,input,label{-webkit-tap-highlight-color:transparent}
.kr-wrap{width:100%;max-width:var(--kr-max);margin:0 auto;padding-left:max(var(--kr-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--kr-gutter),env(safe-area-inset-right,0px))}
.kr-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- butang: segi empat, satu warna isian ---------- */
.kr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:0;background:var(--kr-plum);color:#fff;font:500 var(--kr-step-body)/1.1 var(--kr-text);letter-spacing:.02em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--kr-spring-press),background-color 160ms ease}
.kr-btn:active{transform:scale(.97);transition-duration:90ms;transition-timing-function:var(--kr-ease-out)}
.kr-btn svg{width:20px;height:20px;flex:none}
.kr-btn--paper{background:var(--kr-bg);color:var(--kr-ink)}
.kr-btn--tone{background:var(--kr-paper-2);color:var(--kr-ink)}
.kr-btn--ink{background:var(--kr-ink);color:#fff}
.kr-link{color:var(--kr-ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
@media (hover:hover) and (pointer:fine){
  .kr-btn:hover{background:var(--kr-plum-hover)}
  .kr-btn--paper:hover,.kr-btn--tone:hover{background:var(--kr-paper)}
  .kr-btn--ink:hover{background:#34233F}
  .kr-link:hover{color:var(--kr-plum)}
}

/* ---------- header: wordmark, beberapa pautan, satu tindakan ---------- */
.kr-head{position:sticky;top:0;z-index:60;background:var(--kr-bg);padding-top:env(safe-area-inset-top,0px)}
.kr-head-in{max-width:var(--kr-max);margin:0 auto;height:var(--kr-header);padding:0 max(var(--kr-gutter),env(safe-area-inset-right,0px)) 0 max(var(--kr-gutter),env(safe-area-inset-left,0px));display:flex;align-items:center;gap:24px}
.kr-mark{font-family:var(--kr-display);font-size:1.625rem;font-weight:500;letter-spacing:-.02em;color:var(--kr-ink);text-decoration:none;white-space:nowrap;line-height:1}
.kr-nav{display:flex;gap:4px;margin-left:auto}
.kr-nav a{padding:12px 12px;font-size:var(--kr-step-small);font-weight:500;letter-spacing:.04em;color:var(--kr-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){.kr-nav a:hover{color:var(--kr-plum)}}
.kr-head .kr-btn{min-height:44px;padding:0 18px;font-size:var(--kr-step-small)}
.kr-menu{display:none;margin-left:auto}
.kr-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:48px;height:44px;background:var(--kr-ink);color:#fff;transition:transform var(--kr-spring-press)}
.kr-menu>summary::-webkit-details-marker{display:none}
.kr-menu>summary:active{transform:scale(.95)}
.kr-bars{position:relative;width:18px;height:10px;display:block}
.kr-bars::before,.kr-bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform 220ms var(--kr-ease-out)}
.kr-bars::before{top:0}.kr-bars::after{bottom:0}
.kr-menu[open] .kr-bars::before{transform:translateY(4.25px) rotate(45deg)}
.kr-menu[open] .kr-bars::after{transform:translateY(-4.25px) rotate(-45deg)}
.kr-sheet{position:absolute;left:0;right:0;top:100%;background:var(--kr-bg);padding:8px max(var(--kr-gutter),env(safe-area-inset-left,0px)) calc(28px + env(safe-area-inset-bottom,0px));display:grid;max-height:calc(100svh - var(--kr-header));overflow-x:hidden;overflow-y:auto;box-shadow:0 30px 60px rgba(30,18,41,.18)} /* taste-skill-ignore: menu terapung */
.kr-menu[open] .kr-sheet{animation:krSheetIn var(--kr-spring-modal)}
.kr-sheet a:not(.kr-btn){display:flex;align-items:center;min-height:56px;font-family:var(--kr-display);font-size:1.75rem;letter-spacing:-.02em;text-decoration:none;color:var(--kr-ink)}
.kr-sheet .kr-btn{margin-top:18px;width:100%}
@keyframes krSheetIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .kr-nav,.kr-head>.kr-head-in>.kr-btn{display:none}
  .kr-menu{display:block}
  :root{--kr-header:60px}
  .kr-mark{font-size:1.375rem}
}

/* ---------- footer: nama di atas foto terakhir ---------- */
.kr-foot{position:relative;color:#fff;overflow:hidden;background:var(--kr-deep);isolation:isolate}
.kr-foot-photo{position:absolute;inset:0;z-index:-1}
.kr-foot-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.85)}
.kr-foot-in{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(32px,4vw,56px) max(var(--kr-gutter),env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(var(--kr-gutter),env(safe-area-inset-left,0px));max-width:var(--kr-max);margin:0 auto}
.kr-foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.kr-foot ul{list-style:none;margin:0;padding:0}
.kr-foot li a{display:inline-flex;min-height:40px;align-items:center;text-decoration:none;color:#fff}
.kr-foot p{margin:0 0 6px;max-width:42ch}
.kr-foot a{color:#fff}
@media (hover:hover) and (pointer:fine){.kr-foot li a:hover{text-decoration:underline;text-underline-offset:5px}}
.kr-foot-name{font-family:var(--kr-display);font-weight:500;font-size:min(calc((min(100vw, var(--kr-max)) - 2 * var(--kr-gutter)) / 6.9),11.5rem);line-height:.86;letter-spacing:-.03em;white-space:nowrap;margin:clamp(40px,8vw,120px) 0 20px}
.kr-foot-legal{font-size:var(--kr-step-small);color:var(--kr-on-deep-muted);max-width:72ch}
.kr-foot-legal p{max-width:none;margin-bottom:10px}
.kr-foot-sinar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.kr-foot-sinar img{height:36px;width:auto;background:#fff;padding:4px}
.kr-foot--slim .kr-foot-in{min-height:0;gap:20px}
.kr-foot--slim .kr-foot-name{margin:clamp(48px,7vw,96px) 0 16px}

/* ---------- halaman nota (404, offline, ralat) ---------- */
.kr-note{min-height:calc(100svh - var(--kr-header));display:flex;flex-direction:column;justify-content:center;gap:20px;padding-top:48px;padding-bottom:72px}
.kr-note h1{font-size:var(--kr-step-head);max-width:18ch;text-wrap:balance}
.kr-note p{margin:0;max-width:46ch}
.kr-note-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px!important}

/* ---------- gerakan masuk berperingkat (kr-ui.js menambah .kr-in) ---------- */
.kr-rise{opacity:0;transform:translateY(22px);transition:opacity 420ms var(--kr-ease-out),transform var(--kr-spring-rise);transition-delay:var(--kr-delay,0ms)}
.kr-rise.kr-in{opacity:1;transform:none}
html:not(.kr-js) .kr-rise{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .kr-rise{transform:none;transition:opacity 200ms ease}
  .kr-btn,.kr-menu>summary{transition:none}
  .kr-menu[open] .kr-sheet{animation:none}
}
@media print{.kr-head,.kr-foot-photo{display:none}}

/* V2.2 — editorial links, same Kakak Recond visual system */
.kr-guides{background:var(--kr-paper);padding:clamp(64px,8vw,116px) 0}
.kr-guides-intro{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;align-items:end;margin-bottom:clamp(28px,4vw,54px)}
.kr-guides-kicker{grid-column:1/-1;color:var(--kr-plum);font-size:var(--kr-step-small);letter-spacing:.13em;font-weight:500}
.kr-guides-intro h2{font-size:var(--kr-step-head);max-width:14ch}
.kr-guides-intro p{margin:0;max-width:45ch;color:var(--kr-muted)}
.kr-guides-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.kr-guides-grid>a{display:flex;flex-direction:column;gap:17px;min-width:0;background:var(--kr-bg);padding:clamp(20px,3vw,38px);text-decoration:none;transition:background-color .2s ease}
.kr-guides-grid>a>span:first-child{font-size:var(--kr-step-small);color:var(--kr-plum)}
.kr-guides-grid strong{font:500 clamp(1.55rem,1.2rem + 1.7vw,2.8rem)/1.08 var(--kr-display);max-width:25ch}
.kr-guides-more{font-size:var(--kr-step-small);text-decoration:underline;text-underline-offset:5px;margin-top:auto;padding-top:20px}
.kr-guides-all{display:inline-flex;margin-top:28px}
@media(hover:hover) and (pointer:fine){.kr-guides-grid>a:hover{background:var(--kr-paper-2)}}
@media(max-width:660px){.kr-guides-intro,.kr-guides-grid{grid-template-columns:1fr}.kr-guides-grid>a{min-height:185px}}