/* toko.css — halaman Master Toko */
/* ---- Master Toko ---- */
.tokogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.tcard{background:#fff;border-radius:22px;padding:16px 16px 14px;box-shadow:0 8px 22px rgba(40,40,60,.06);cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;animation:dUp .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0)*45ms)}
.tcard:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(40,40,60,.12)}
.tc-top{display:flex;align-items:center;gap:12px}
.tc-av{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex-shrink:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.tcard:hover .tc-av{transform:rotate(-8deg) scale(1.1)}
.tc-id{flex:1;min-width:0}
.tc-name{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-sub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-sub a{color:var(--muted);text-decoration:none}.tc-sub a:hover{color:var(--red)}
.tc-x{border:none;background:#fbeeea;color:var(--red);width:28px;height:28px;border-radius:9px;cursor:pointer;opacity:0;transition:opacity .2s;font-size:12px}
.tcard:hover .tc-x{opacity:1}
@media (hover:none){.tc-x{opacity:.7}}
.tc-addr{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.4}
.tc-stats{display:grid;grid-template-columns:1.3fr 1.3fr .7fr;gap:8px;margin-top:12px}
.tc-stats span{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
.tc-stats b{display:block;font-size:14px;margin-top:2px;letter-spacing:-.01em}
.tc-bar{height:6px;background:#f1eeed;border-radius:6px;margin-top:12px;overflow:hidden}
.tc-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--orange),var(--red));transform-origin:left;animation:dGrow .9s .3s cubic-bezier(.2,.8,.2,1) both}
.tc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;min-height:30px}

/* ---- Toko v2: toolbar, hero mobile, modal ---- */
.tk-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tk-tools input[type=search]{flex:1;min-width:200px;border-radius:999px;padding:11px 18px}
.tk-sort{display:flex;gap:6px;flex-wrap:wrap}
.tk-sort .btn{border-radius:999px;padding:9px 15px;font-size:12.5px}
.tk-add{border-radius:999px;padding:11px 20px;font-size:13px;box-shadow:0 8px 18px rgba(213,62,15,.25);white-space:nowrap}
.tc-foot .btn.sm{border-radius:999px;padding:7px 14px}
.tk-hero{position:relative;overflow:hidden;color:#fff;border-radius:26px;padding:18px 18px 16px;margin-bottom:14px;background:linear-gradient(145deg,#F26A2E -10%,#D53E0F 46%,#7E0306 118%);box-shadow:0 18px 38px rgba(126,3,6,.28);animation:dUp .55s cubic-bezier(.2,.8,.2,1) both}
.tk-hero>*:not(.pf-hbg){position:relative;z-index:1}
.tk-hl{font-size:12.5px;font-weight:700;opacity:.92}
.tk-hv{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.tk-hs{font-size:11.5px;opacity:.85;margin-top:2px}
.tk-hrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tk-hrow>div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:9px 12px;min-width:0}
.tk-hrow span{display:block;font-size:10.5px;font-weight:600;opacity:.88}
.tk-hrow b{display:block;font-size:15px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* modal toko */
.modal:has(.tk-md){padding:0;overflow:hidden auto}
.tk-mh{position:relative;overflow:hidden;color:#fff;padding:22px 22px 20px;background:linear-gradient(140deg,#F26A2E -10%,#D53E0F 48%,#7E0306 120%)}
.tk-mh::after{content:"";position:absolute;right:-50px;top:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,0) 70%);pointer-events:none}
.tk-mh .close{position:absolute;right:14px;top:12px;float:none;z-index:2;color:#fff;background:rgba(255,255,255,.2);width:32px;height:32px;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tk-mhrow{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding-right:38px}
.tk-mh .tc-av{width:54px;height:54px;border-radius:18px;font-size:24px;box-shadow:0 8px 18px rgba(0,0,0,.2);transition:background .25s,color .25s}
.tk-mt{font-size:18px;font-weight:800;letter-spacing:-.01em}
.tk-ms{font-size:12px;opacity:.88;margin-top:2px}
.tk-mb{padding:18px 22px calc(22px + var(--sab))}
.tk-mb input{border-radius:999px;padding-left:16px;padding-right:16px}
.tk-mact{margin-top:18px;display:flex;justify-content:flex-end;gap:8px}
.tk-mact .btn{border-radius:999px;padding:11px 22px}
@media (max-width:820px){
  .tokogrid{grid-template-columns:1fr;gap:12px}
  .tcard{border-radius:22px;padding:15px}
  .tcard:active{transform:scale(.985)}
  .tc-x{opacity:.8;width:32px;height:32px}
  .tc-stats{grid-template-columns:1fr 1fr;gap:10px}
  .tc-stats>div:last-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:8px}
  .tc-stats>div:last-child b{margin:0}
  .tk-tools{gap:9px}
  .tk-tools input[type=search]{flex:1 1 100%;min-width:0}
  .tk-sort{flex:1 1 100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .tk-sort .btn{padding:9px 4px;text-align:center}
  .tk-add{flex:1 1 100%;padding:13px}
  .tk-mh{padding:20px 16px 18px}.tk-mb{padding:16px 16px calc(22px + var(--sab))}
  .tk-mact .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.tk-hero{animation:none!important}}


/* hero desktop */
.tk-hd{padding:26px 28px 22px;border-radius:28px;margin-bottom:18px}
.tk-hd .tk-hv{font-size:clamp(32px,4vw,46px)}
.tk-hdtop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tk-hadd{background:#fff;color:var(--red);border-radius:999px;padding:11px 20px;font-weight:700;border:none;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.tk-hadd:hover{background:var(--cream);color:var(--red)}
.tk-h4{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.tk-h4>div{padding:13px 16px;border-radius:20px}
.tk-h4 b{font-size:20px}
@media (max-width:820px){.tk-hd{padding:18px 18px 16px;border-radius:26px}.tk-hadd{display:none}.tk-h4{grid-template-columns:1fr 1fr}}
@media (min-width:821px){.tk-add{display:none}}
.tk-hrow b .cnt{display:inline;font-size:inherit;font-weight:inherit;opacity:1}