/* ============================================================
   tiles.css — tile Metro: ukuran, efek melayang, tilt, animasi
   ============================================================ */

.tile{
  position:relative;
  perspective:900px;
  padding:0;
  background:none;
  touch-action:manipulation;
  --tile-color:#2d89ef;
  animation:tileIn calc(.55s / max(var(--speed),.001)) var(--ease) backwards;
  animation-delay:calc(var(--i, 0) * 45ms / max(var(--speed),.001));
}
@keyframes tileIn{
  from{opacity:0; transform:translateY(26px) scale(.9) rotateX(14deg)}
  to  {opacity:1; transform:none}
}

/* --- ukuran (unit = tile kecil) --- */
.tile.sm{grid-row:span 1; grid-column:span 1}
.tile.md{grid-row:span 2; grid-column:span 2}
.tile.wd{grid-row:span 2; grid-column:span 4}
.tile.lg{grid-row:span 4; grid-column:span 4}
.tile.tall{grid-row:span 4; grid-column:span 2}

/* --- badan tile yang "melayang" --- */
.tile-inner{
  position:relative;
  width:100%; height:100%;
  background:var(--tile-color);
  color:#fff;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .2s;
  box-shadow:
    0 26px 44px -18px rgba(0,0,0,.85),
    0 8px 14px -8px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.08);
  will-change:transform;
}
/* pantulan warna di "lantai" -> kesan mengambang */
.tile::after{
  content:"";
  position:absolute; left:8%; right:8%; bottom:-12px; height:22px;
  background:var(--tile-color);
  filter:blur(16px); opacity:.42;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events:none; z-index:-1;
}
.tile:hover::after{opacity:.75; transform:translateY(6px) scale(1.04)}

.tile:hover .tile-inner{
  box-shadow:
    0 40px 60px -20px rgba(0,0,0,.9),
    0 12px 22px -10px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,255,255,.18);
  filter:brightness(1.07);
}
.tile:focus-visible{outline:none}
.tile:focus-visible .tile-inner{box-shadow:0 0 0 3px #fff, 0 30px 50px -18px rgba(0,0,0,.9)}
.tile.is-press .tile-inner{transform:scale(.96)}

/* kilau menyapu saat hover */
.tile-shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
}
.tile:hover .tile-shine{transform:translateX(120%)}

/* sorotan mengikuti kursor */
.tile-glow{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.30), transparent 65%);
  transition:opacity .25s ease;
}
.tile:hover .tile-glow{opacity:1}

/* --- isi tile --- */
.tile-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--u) * .12);
  text-align:left;
}
.tile-icon{
  position:absolute; top:12%; left:calc(var(--u) * .12);
  opacity:.95;
  transition:transform .35s var(--ease);
}
.tile-icon svg{width:calc(var(--u) * .48); height:calc(var(--u) * .48); display:block}
.tile:hover .tile-icon{transform:translateY(-3px) scale(1.06)}
.tile.sm .tile-icon{top:auto; bottom:calc(var(--u) * .12); left:50%; transform:translateX(-50%)}
.tile.sm .tile-icon svg{width:calc(var(--u) * .4); height:calc(var(--u) * .4)}
.tile.sm:hover .tile-icon{transform:translateX(-50%) translateY(-4px) scale(1.06)}
.tile.sm .tile-content{align-items:flex-start; justify-content:flex-start}

/* ikon tile dengan teks berputar: gantian tampil, tidak numpuk bareng teksnya */
.tile-icon--live{
  animation:iconFlip calc(9s / max(var(--speed),.001)) infinite;
}
@keyframes iconFlip{
  0%,42%{opacity:.95}
  50%,88%{opacity:0}
  100%{opacity:.95}
}

.tile-label{font-size:clamp(13px,calc(var(--u) * .2),23px); font-weight:400; letter-spacing:.2px; line-height:1.15}
.tile.sm .tile-label{font-size:clamp(11px,calc(var(--u) * .17),14px)}
.tile-tag{
  font-size:clamp(10px,calc(var(--u) * .12),13px); font-weight:300;
  opacity:.78; margin-top:2px; line-height:1.2;
}
.tile.sm .tile-tag{display:none}

/* live tile: konten berputar seperti Windows Phone */
.tile-live{
  position:absolute; left:0; right:0; top:14%;
  padding:0 calc(var(--u) * .12);
  font-size:clamp(11px,calc(var(--u) * .14),16px); font-weight:300; opacity:.9;
  animation:liveFlip calc(9s / max(var(--speed),.001)) infinite;
}
.tile.wd .tile-live,.tile.lg .tile-live{top:34%; font-size:clamp(13px,calc(var(--u) * .2),26px)}
@keyframes liveFlip{
  0%,42%{opacity:0; transform:translateY(14px)}
  50%,88%{opacity:.92; transform:none}
  100%{opacity:0; transform:translateY(-10px)}
}

/* penanda tile favorit */
.tile-pin{
  position:absolute; top:8px; right:8px; width:0; height:0;
  border-top:16px solid rgba(255,255,255,.9); border-left:16px solid transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
}

/* --- seret-pindah tile --- */
body.is-dragging-tile{cursor:grabbing; user-select:none}
body.is-dragging-tile .tile{cursor:grabbing}
.tile.is-dragging .tile-inner{opacity:.25; filter:saturate(.4)}
.tile.is-dragging::after{opacity:0}
.tile.drag-ghost{animation:none; z-index:80}
.tile.drag-ghost .tile-inner{
  transform:scale(1.05) rotate(-1.2deg);
  box-shadow:0 46px 70px -18px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.3);
}
.grid{transition:none}
.tile:not(.is-dragging){transition:transform .18s var(--ease)}

/* mode getar kecil saat ganti warna */
.tile.is-recolor .tile-inner{animation:recolor calc(.5s / max(var(--speed),.001)) var(--ease)}
@keyframes recolor{ 0%{transform:scale(1)} 35%{transform:scale(1.06) rotate(.6deg)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion:reduce){
  .tile,.bg-layer,.tile-live,.tile-icon--live{animation:none}
  .tile-inner,.tile-shine{transition:none}
}