/* =========================================================
   ARFER STUDIO — tema "Sky Arena" (terang + bentuk miring)
   Drop-in pengganti style.css: semua nama class sama,
   file PHP tidak perlu diubah.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,500;0,600;0,700;1,600;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --p: #38bdf8; /* biru langit terang (glow, hover) */
  --p2: #0ea5e9; /* awal gradasi tombol */
  --pd: #0369a1; /* akhir gradasi tombol */
  --tc: #0369a1; /* warna teks aksen */
  --pl: #dff1fd; /* tint lembut */
  --ln: #b6defa; /* garis & bayangan keras */
  --on: #ffffff; /* teks di atas tombol */
  --h1: #0ea5e9; /* header panel */
  --h2: #075985;
  --y: #facc15; /* kuning kontras */
  --bg: #e9f6ff;
  --sf: #ffffff;
  --tx: #06223a;
  --mu: #55708a;
  --ok: #16a34a;
  --no: #dc2626;
  --wn: #f59e0b;
  --f-head: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  /* bentuk khas: sudut besar & kecil bergantian */
  --r-card: 8px 28px 8px 28px;
  --r-img: 4px 20px 4px 20px;
  --para: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--f-body);
  background:
    radial-gradient(900px 480px at 92% -8%, rgba(56, 189, 248, 0.4), transparent),
    radial-gradient(620px 420px at -8% 38%, rgba(250, 204, 21, 0.14), transparent),
    var(--bg);
  background-attachment: fixed;
  color: var(--tx);
  line-height: 1.6;
}
/* ---------- siluet logo sebagai latar seluruh web ----------
   Gambar: assets/bg-logo.png (simpan sejajar dengan style.css).
   Warna siluet ikut warna tema tiap halaman (biru, violet, teal, amber). */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  background: var(--p);
  -webkit-mask: url("bg-logo.png") center / contain no-repeat;
  mask: url("bg-logo.png") center / contain no-repeat;
}
/* siluet besar di kanan bawah */
body::before {
  right: -5vw;
  bottom: -10vh;
  width: min(74vw, 800px);
  aspect-ratio: 906 / 1000;
  opacity: 0.2;
}
/* siluet kecil di kiri atas */
body::after {
  left: -4vw;
  top: 14vh;
  width: min(30vw, 330px);
  aspect-ratio: 906 / 1000;
  opacity: 0.12;
}
@media (max-width: 720px) {
  body::before {
    right: -28vw;
    bottom: 6vh;
    width: 120vw;
    opacity: 0.16;
  }
  body::after {
    display: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
}
h1,
h2,
h3 {
  font-family: var(--f-head);
  line-height: 1.15;
}
main {
  max-width: 1040px;
  margin: auto;
  padding: 18px 16px 24px;
}
:focus-visible {
  outline: 3px solid var(--p2);
  outline-offset: 3px;
}

/* ---------- top bar ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 22px;
  border-bottom: 3px solid var(--p);
  box-shadow: 0 6px 24px rgba(14, 165, 233, 0.18);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 19px;
}
.brand img {
  height: 36px;
  width: 36px;
  object-fit: contain;
}
.brand b {
  color: var(--tc);
}
.dn {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dn a {
  padding: 9px 20px;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 600;
  color: #35506a;
  clip-path: var(--para);
  transition: background 0.2s, color 0.2s;
}
.dn a:hover {
  background: var(--pl);
  color: var(--tc);
}
.dn a.on {
  background: linear-gradient(135deg, var(--p2), var(--pd));
  color: var(--on);
}

/* ---------- hero (satu momen utama) ---------- */
/* Biru langit cerah (bukan biru tua), garis & bayangan keras seperti kartu lain */
.hero {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--tx);
  padding: 38px 40px;
  margin: 8px 0 24px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ln);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, #8fdcff 0%, #75d3fe 100%);
  box-shadow: 5px 5px 0 var(--ln);
  animation: hero-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero .logo {
  width: 136px;
  height: 136px;
  object-fit: contain;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: var(--r-card);
  padding: 10px;
  flex: none;
  position: relative;
  z-index: 1;
  box-shadow: 5px 5px 0 var(--y), 0 0 36px rgba(56, 189, 248, 0.45);
}
.hero > div {
  position: relative;
  z-index: 1;
}
.hero h1 {
  margin: 12px 0 10px;
  font-size: clamp(32px, 6.4vw, 56px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--tx);
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.6);
}
.hero p {
  margin: 0 0 20px;
  max-width: 50ch;
  color: #0a3050;
}
.hero .btn.ghost {
  background: #fff;
  color: var(--tc);
  box-shadow: inset 0 0 0 2px var(--p2);
}

/* ===== MODE FOTO =====
   Kalau gambar sudah ada (assets/hero-bg.jpg), hapus tanda komentar
   blok di bawah ini (hapus awal dan akhir komentar saja).
.hero {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(4, 22, 44, 0.8) 0%, rgba(4, 22, 44, 0.55) 50%, rgba(4, 22, 44, 0.15) 100%),
    url("hero-bg.jpg") center / cover no-repeat,
    linear-gradient(120deg, #0284c7, #2563eb);
}
.hero h1 {
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.hero p {
  color: #eaf4ff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.hero .btn.ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
===== AKHIR MODE FOTO ===== */
.pill {
  display: inline-block;
  background: var(--y);
  color: #1c1500;
  padding: 5px 22px;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  clip-path: var(--para);
}
.store {
  display: flex;
  gap: 16px;
  align-items: center;
}
.store p {
  margin: 4px 0 0;
  color: var(--mu);
}
.logo2 {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--r-img);
  background: #fff;
  flex: none;
}

/* ---------- judul bagian ---------- */
.sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 34px 0 14px;
}
.sec h2 {
  margin: 0;
  font-size: 24px;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec h2:before {
  content: "";
  width: 18px;
  height: 24px;
  background: linear-gradient(90deg, var(--p2) 0 42%, transparent 42% 58%, var(--y) 58%);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.sec a {
  color: var(--tc);
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  border: 2px solid var(--ln);
  padding: 5px 16px;
  border-radius: 4px 14px 4px 14px;
  transition: border-color 0.2s, background 0.2s;
}
.sec a:hover {
  border-color: var(--p2);
  background: var(--pl);
}

/* ---------- kartu ---------- */
.card {
  background: var(--sf);
  border-radius: var(--r-card);
  padding: 16px;
  border: 2px solid var(--ln);
  box-shadow: 5px 5px 0 var(--ln);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
a.card:hover,
.grid .card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--p2);
  box-shadow: 8px 8px 0 var(--p), 0 0 34px rgba(56, 189, 248, 0.45);
}
.card img:not(.logo2) {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: var(--r-img);
  background: linear-gradient(135deg, var(--pl), var(--ln));
  margin-bottom: 8px;
}
.card p {
  color: var(--mu);
  font-size: 14px;
  margin: 6px 0 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 8px 12px 20px 4px; /* ruang untuk bayangan keras */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.row::-webkit-scrollbar {
  display: none;
}
.row .card {
  min-width: 160px;
  scroll-snap-align: start;
  flex: none;
}
.price {
  color: var(--tc);
  font-family: var(--f-head);
  font-weight: 700;
}
.card h3 {
  margin: 6px 0;
}

/* ---------- tombol & form ---------- */
.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--p2), var(--pd));
  color: var(--on);
  border: 0;
  padding: 12px 30px;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  clip-path: var(--para);
  transition: filter 0.15s, transform 0.15s;
}
.btn:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn.white {
  background: var(--y);
  color: #1c1500;
}
.btn.ghost {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.btn.off {
  background: #cbd5e1;
  color: #64748b;
  pointer-events: none;
}
label {
  font-size: 13px;
  font-weight: 700;
  color: #35506a;
}
input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--ln);
  border-radius: 6px 14px 6px 14px;
  margin: 5px 0 14px;
  font: inherit;
  color: var(--tx);
  background: #f5fbff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--p2);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3), 0 0 22px rgba(56, 189, 248, 0.35);
  background: #fff;
}
textarea {
  min-height: 90px;
}
.tag {
  display: inline-block;
  background: var(--pl);
  color: var(--tc);
  padding: 3px 16px;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
  clip-path: var(--para);
}

/* ---------- tabel ---------- */
.wrap {
  overflow-x: auto;
  border-radius: var(--r-card);
  border: 2px solid var(--ln);
  box-shadow: 5px 5px 0 var(--ln);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}
td,
th {
  padding: 11px 12px;
  border-bottom: 1px solid #e3f2fd;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--pl);
  color: var(--tc);
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 700;
  border-bottom: 3px solid var(--p);
}
tr:hover td {
  background: #f5fbff;
}
td input,
td select {
  margin: 0;
}

/* ---------- nav bawah (HP) ---------- */
.bn {
  display: none;
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 2px solid var(--ln);
  border-radius: 8px 26px 8px 26px;
  justify-content: space-around;
  padding: 8px 4px;
  z-index: 30;
  box-shadow: 4px 4px 0 var(--ln), 0 10px 30px rgba(12, 74, 110, 0.25);
}
.bn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mu);
  padding: 5px 10px;
  border-radius: 4px 14px 4px 14px;
  transition: 0.2s;
}
.bn a span {
  font-size: 20px;
}
.bn a.on {
  color: var(--on);
  background: linear-gradient(135deg, var(--p2), var(--pd));
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.5);
}

@media (max-width: 720px) {
  .dn {
    display: none;
  }
  .bn {
    display: flex;
  }
  .top {
    padding: 10px 16px;
  }
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 28px 22px;
  }
  .hero p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero .logo {
    width: 96px;
    height: 96px;
  }
  .store {
    flex-direction: column;
    text-align: center;
  }
  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .card img:not(.logo2) {
    height: 100px;
  }
  main {
    padding-bottom: 24px;
  }
}
@media (max-width: 420px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Halaman Masuk / Daftar ===== */
.auth {
  max-width: 430px;
  margin: 24px auto 0;
}
.auth-card {
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: 10px 40px 10px 40px;
  padding: 30px 26px;
  box-shadow: 7px 7px 0 var(--p), 0 0 50px rgba(56, 189, 248, 0.35);
  position: relative;
  overflow: hidden;
}
.auth-card:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 100%;
  background: repeating-linear-gradient(105deg, rgba(56, 189, 248, 0.14) 0 12px, transparent 12px 28px);
}
.auth-logo {
  display: block;
  margin: 0 auto 6px;
  width: 88px;
  height: 88px;
  object-fit: contain;
  position: relative;
}
.auth h1 {
  margin: 0;
  text-align: center;
  font-size: 26px;
  font-style: italic;
  position: relative;
}
.auth .sub {
  text-align: center;
  color: var(--mu);
  font-size: 14px;
  margin: 4px 0 20px;
  position: relative;
}
.seg {
  display: flex;
  background: var(--pl);
  border-radius: 6px 16px 6px 16px;
  padding: 5px;
  margin-bottom: 20px;
  position: relative;
}
.seg button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 11px;
  border-radius: 4px 12px 4px 12px;
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--tc);
  cursor: pointer;
  transition: 0.25s;
}
.seg button.on {
  background: linear-gradient(135deg, var(--p2), var(--pd));
  color: var(--on);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.45);
}
.alert {
  padding: 11px 14px;
  border-radius: 6px 14px 6px 14px;
  font-size: 14px;
  margin-bottom: 14px;
  background: #fee2e2;
  color: #b91c1c;
  position: relative;
}
.alert.ok {
  background: #dcfce7;
  color: #15803d;
}
.field {
  position: relative;
}
.field input {
  padding-left: 44px;
  margin-bottom: 16px;
}
.field i {
  position: absolute;
  left: 14px;
  top: 15px;
  font-style: normal;
  font-size: 16px;
  opacity: 0.8;
}
.field .eye {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
  opacity: 0.6;
  user-select: none;
}
.auth .btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  margin-top: 2px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.auth .foot {
  text-align: center;
  font-size: 13px;
  color: var(--mu);
  margin-top: 16px;
  position: relative;
}
.auth .foot a {
  color: var(--tc);
  font-weight: 700;
  cursor: pointer;
}
form.pane {
  display: none;
}
form.pane.on {
  display: block;
  animation: pop 0.25s ease;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== Area Player ===== */
.pl-body {
  background: transparent;
}

.pl-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(115deg, #38bdf8, #0284c7 60%, #075985);
  color: #fff;
  border-bottom: 4px solid var(--y);
}

.pl-title {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pl-back,
.pl-out {
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.25);
  padding: 7px 16px;
  clip-path: var(--para);
}

.pl-main {
  max-width: 720px;
  margin: auto;
  padding: 16px 16px 120px;
}

.pl-profile {
  text-align: center;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: 10px 36px 10px 36px;
  padding: 26px 16px;
  box-shadow: 6px 6px 0 var(--ln), 0 0 40px rgba(56, 189, 248, 0.25);
}

.pl-profile h2 {
  margin: 10px 0 2px;
}

.pl-profile p {
  margin: 0 0 10px;
  color: var(--mu);
}

.pl-profile .pill {
  background: var(--pl);
  color: var(--tc);
}

.pl-avatar {
  width: 80px;
  height: 80px;
  margin: auto;
  border-radius: 10px 30px 10px 30px;
  background: linear-gradient(135deg, var(--p), var(--pd));
  color: #fff;
  font-family: var(--f-head);
  font-size: 34px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 var(--y), 0 0 30px rgba(56, 189, 248, 0.55);
}

.pl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.pl-stats .card {
  text-align: center;
  padding: 12px 6px;
  border-radius: 6px 18px 6px 18px;
  box-shadow: 3px 3px 0 var(--ln);
}

.pl-stats small {
  color: var(--mu);
  font-size: 11px;
}

.pl-h {
  margin: 20px 0 10px;
}

.pl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 6px 18px 6px 18px;
  box-shadow: 3px 3px 0 var(--ln);
}

.pl-right {
  text-align: right;
}

.pl-empty {
  text-align: center;
  color: var(--mu);
}

.pl-nav {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 500px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 2px solid var(--ln);
  border-radius: 8px 26px 8px 26px;
  padding: 8px 4px;
  box-shadow: 4px 4px 0 var(--ln), 0 10px 30px rgba(12, 74, 110, 0.25);
  z-index: 30;
}

.pl-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--mu);
  padding: 5px 14px;
  border-radius: 4px 14px 4px 14px;
}

.pl-nav a span {
  font-size: 20px;
}

.pl-nav a.on {
  color: #fff;
  background: linear-gradient(135deg, var(--p2), var(--pd));
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.5);
}

/* Warna status */
.st-selesai,
.st-diterima {
  background: #dcfce7;
  color: #15803d;
}

.st-ditolak {
  background: #fee2e2;
  color: #b91c1c;
}

.st-pending {
  background: #fef3c7;
  color: #b45309;
}

.st-proses {
  background: #dbeafe;
  color: #1d4ed8;
}

/* ===== Panel Staff (tiap role punya warna sendiri) ===== */
.pn-body {
  background: var(--bg);
}

/* Admin Store = biru (bawaan) */
.pn-daftar {
  --p: #a78bfa;
  --p2: #8b5cf6;
  --pd: #6d28d9;
  --tc: #6d28d9;
  --pl: #ede9fe;
  --ln: #ddd6fe;
  --h1: #8b5cf6;
  --h2: #4c1d95;
  background: #f7f2ff;
}

.pn-arfer {
  --p: #2dd4bf;
  --p2: #14b8a6;
  --pd: #0f766e;
  --tc: #0f766e;
  --pl: #ccfbf1;
  --ln: #99f6e4;
  --h1: #14b8a6;
  --h2: #115e59;
  background: #effdfa;
}

.pn-layanan {
  --p: #fb7185;
  --p2: #f43f5e;
  --pd: #be123c;
  --tc: #be123c;
  --pl: #ffe4e6;
  --ln: #fecdd3;
  --h1: #f43f5e;
  --h2: #9f1239;
  background: #fff5f6;
}
.pn-owner {
  --p: #fbbf24;
  --p2: #fbbf24;
  --pd: #f59e0b;
  --tc: #b45309;
  --pl: #fef3c7;
  --ln: #fde68a;
  --on: #2a1a00;
  --h1: #f59e0b;
  --h2: #b45309;
  --y: #0ea5e9;
  background: #fffaeb;
}

.pn-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: linear-gradient(115deg, var(--h1), var(--h2));
  color: #fff;
  border-bottom: 4px solid var(--y);
}

.pn-top b {
  font-family: var(--f-head);
  font-size: 19px;
  font-style: italic;
  letter-spacing: 0.04em;
}

.pn-top small {
  opacity: 0.9;
}

.pn-actions a {
  margin-left: 6px;
  padding: 7px 18px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 13px;
  font-weight: 700;
  clip-path: var(--para);
}

.pn-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 2px solid var(--ln);
}

.pn-tabs a {
  white-space: nowrap;
  padding: 9px 20px;
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  clip-path: var(--para);
}

.pn-tabs a:hover {
  background: var(--pl);
}

.pn-tabs a.on {
  color: var(--on);
  background: linear-gradient(135deg, var(--p2), var(--pd));
}

.pn-tabs a.out {
  margin-left: auto;
  color: var(--tc);
}

.pn-main {
  max-width: 1040px;
  margin: auto;
  padding: 18px 16px 60px;
}

.pn-main form.card {
  margin-bottom: 16px;
}

.pn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.pn-row input {
  margin: 0;
}

/* ===== Kartu Game (beranda & top up) ===== */
.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 130px;
  padding: 16px 12px;
  text-align: center;
}

.card img.game-logo,
.game-logo {
  width: 76px;
  height: 76px;
  margin: 0;
  border-radius: 8px 26px 8px 26px;
  object-fit: cover;
  background: var(--pl);
  transition: box-shadow 0.2s;
}

.game-card:hover .game-logo {
  box-shadow: 4px 4px 0 var(--y), 0 0 26px rgba(56, 189, 248, 0.6);
}

.game-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

/* ---------- hormati preferensi kurangi gerakan ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* ===== Deskripsi event ===== */
.desc {
  margin: 4px 0 10px;
  font-size: 14px;
  color: #64748b;
}

/* Versi singkat di beranda: maksimal 2 baris */
.desc-short {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* ===== Gambar event rasio 4:5 (potret) ===== */
.card img.event-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
}

/* Di halaman form pendaftaran: dibatasi supaya tidak terlalu besar */
.card img.event-img-form {
  max-width: 340px;
  margin: 0 auto 14px;
  display: block;
}

/* Kartu event di beranda: lebar tetap, supaya gambar tidak melebar
   mengikuti ukuran aslinya. Tinggi gambar mengikuti rasio 4:5. */
.row .card.event-card {
  flex: 0 0 270px;
  width: 270px;
  min-width: 0;
}

.card img.event-img {
  max-width: 100%;
  min-width: 0;
}

/* ===== Tombol Detail & kartu event ringkas ===== */
.btn.sm {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 12px;
}

.btn.outline {
  background: #fff;
  color: var(--pd);
  border: 2px solid var(--p);
  box-shadow: none;
}

.event-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.event-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.event-actions .btn {
  flex: 1;
  text-align: center;
}

.back-link {
  color: var(--pd);
  font-weight: 600;
}

/* Daftar info di halaman detail event */
.detail-list {
  margin: 12px 0 18px;
  border: 1px solid #e0f2fe;
  border-radius: 14px;
  overflow: hidden;
}

.detail-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #eaf6fe;
}

.detail-list div:last-child {
  border-bottom: 0;
}

.detail-list span {
  color: #64748b;
}

/* ===== Daftar game di menu Top Up: turun ke bawah (grid) ===== */
.game-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.game-grid .game-card {
  min-width: 0;
}

.game-card.on {
  border-color: var(--p2);
  box-shadow: 0 0 0 3px #38bdf855;
}

/* =========================================================
   v2: Layanan, Top Up 3 langkah, Checkout, Detail Event,
   Detail Berita, tombol WhatsApp mengambang
   ========================================================= */

/* ---------- dasar komponen ---------- */
.box {
  background: var(--sf);
  border: 2px solid var(--ln);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: 5px 5px 0 var(--ln);
}
.box h1,
.box h2,
.box h3 {
  margin-top: 0;
}
.muted {
  color: var(--mu);
}
.page-sub {
  margin: -4px 0 18px;
  color: var(--mu);
}
.hint {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #fff8d6;
  border: 2px solid #f0c000;
  border-radius: 6px 14px 6px 14px;
  font-size: 14px;
}
.hint a {
  color: var(--tc);
  font-weight: 800;
  text-decoration: underline;
}
.btn.big {
  padding: 14px 34px;
  font-size: 16px;
}
.btn.wa {
  background: linear-gradient(135deg, #2ee27b, #1faa52);
  color: #fff;
}
.btn.outline {
  background: #fff;
  color: var(--tc);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--p2);
}
.nm-go {
  font-size: 13px;
  font-weight: 700;
  color: var(--tc);
}

/* ---------- teks isi (berita & layanan) ---------- */
.isi p {
  margin: 0 0 14px;
  line-height: 1.75;
  color: #1e3a52;
}
.isi p:last-child {
  margin-bottom: 0;
}
.isi-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.isi-list li {
  position: relative;
  padding: 6px 0 6px 28px;
  color: #1e3a52;
}
.isi-list li:before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 12px;
  height: 8px;
  background: var(--y);
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}

/* ---------- langkah top up ---------- */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 7px;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mu);
}
.steps li i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pl);
  color: var(--tc);
  font-style: normal;
  font-family: var(--f-head);
  font-size: 13px;
}
.steps li.done {
  color: var(--tc);
}
.steps li.done i {
  background: var(--p2);
  color: #fff;
}
.steps li.on {
  border-color: var(--p2);
  color: var(--tx);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.28);
}
.steps li.on i {
  background: linear-gradient(135deg, var(--p2), var(--pd));
  color: #fff;
}

/* ---------- halaman satu game & nominal ---------- */
.game-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.game-head h1 {
  margin: 0;
  font-size: 28px;
  font-style: italic;
}
.game-head p {
  margin: 4px 0 0;
}
.game-head .game-logo {
  width: 92px;
  height: 92px;
  flex: none;
}
.nominal-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.nominal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: var(--r-card);
  box-shadow: 4px 4px 0 var(--ln);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.nominal:hover {
  transform: translate(-3px, -3px);
  border-color: var(--p2);
  box-shadow: 7px 7px 0 var(--p), 0 0 30px rgba(56, 189, 248, 0.4);
}
.nm-label {
  font-family: var(--f-head);
  font-size: 19px;
  font-weight: 700;
}
.nm-price {
  color: var(--tc);
  font-size: 17px;
  font-weight: 800;
}
.nominal .nm-go {
  margin-top: 6px;
}

/* ---------- checkout (top up & daftar turnamen) ---------- */
.co {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 22px;
  align-items: start;
}
.co-side {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 90px;
}
.co-main {
  grid-column: 1;
  grid-row: 1;
}
.sum-game {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--ln);
}
.sum-game .game-logo {
  width: 62px;
  height: 62px;
  flex: none;
}
.sum-game small {
  display: block;
  color: var(--mu);
}
.sum-game b {
  font-family: var(--f-head);
  font-size: 19px;
}
.sum-poster {
  width: 62px;
  height: 78px;
  flex: none;
  object-fit: cover;
  border-radius: 4px 14px 4px 14px;
}
.sum-noposter {
  display: grid;
  place-items: center;
  background: var(--pl);
  font-size: 30px;
}
.sum-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  margin: 14px 0;
  padding: 14px;
  background: linear-gradient(135deg, #fff1a8, #ffd83d);
  border: 2px solid #f0c000;
  border-radius: 6px 18px 6px 18px;
}
.sum-total span {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 700;
  color: #5c4800;
}
.sum-total b {
  font-family: var(--f-head);
  font-size: 26px;
  color: #1c1500;
}
.sum-note {
  margin: 12px 0 0;
  font-size: 14px;
}
.copy {
  border: 0;
  padding: 6px 12px;
  border-radius: 99px;
  background: #fff;
  color: var(--tc);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--p2);
  cursor: pointer;
  transition: 0.15s;
}
.copy:hover {
  background: var(--pl);
}
.copy.ok {
  background: var(--ok);
  color: #fff;
  box-shadow: none;
}
.pay {
  border: 2px solid var(--ln);
  border-radius: 6px 18px 6px 18px;
  overflow: hidden;
}
.pay-h {
  padding: 10px 14px;
  background: var(--pl);
  color: var(--tc);
  font-family: var(--f-head);
  font-weight: 700;
}
.pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--ln);
  font-size: 14px;
}
.pay-num {
  display: block;
  font-family: var(--f-head);
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--tx);
}
.how {
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: langkah;
}
.how li {
  position: relative;
  padding: 6px 0 6px 38px;
  color: #35506a;
  counter-increment: langkah;
}
.how li:before {
  content: counter(langkah);
  position: absolute;
  left: 0;
  top: 4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pl);
  color: var(--tc);
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
}
.co .btn.big {
  width: 100%;
  margin-top: 6px;
}

/* kotak upload bukti bayar */
.drop {
  display: block;
  margin: 5px 0 16px;
  padding: 0;
  border: 2px dashed var(--p2);
  border-radius: 6px 18px 6px 18px;
  background: #f5fbff;
  cursor: pointer;
  transition: 0.2s;
  overflow: hidden;
}
.drop:hover {
  background: var(--pl);
}
.drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.drop-empty,
.drop-has {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 22px 14px;
  text-align: center;
}
.drop-empty span {
  font-size: 30px;
}
.drop-empty small,
.drop-has small {
  color: var(--mu);
}
.drop-has {
  display: none;
}
.drop.has .drop-empty {
  display: none;
}
.drop.has .drop-has {
  display: flex;
}
.drop-prev {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
}
.drop-name {
  word-break: break-all;
}

/* pesanan / pendaftaran terkirim */
.done-card {
  text-align: center;
}
.done-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ee27b, #1faa52);
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  box-shadow: 0 0 0 6px rgba(46, 226, 123, 0.25);
}
.done-sum {
  margin: 18px 0;
  text-align: left;
  border: 2px solid var(--ln);
  border-radius: 6px 18px 6px 18px;
  overflow: hidden;
}
.done-sum div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ln);
}
.done-sum div:last-child {
  border-bottom: 0;
}
.done-sum span {
  color: var(--mu);
}
.done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

/* ---------- detail turnamen ---------- */
.ev {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.ev-poster {
  position: sticky;
  top: 90px;
}
.ev-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--ln);
  border-radius: 10px 36px 10px 36px;
  box-shadow: 7px 7px 0 var(--p), 0 0 40px rgba(56, 189, 248, 0.35);
}
.ev-noposter {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--pl);
  border: 2px solid var(--ln);
  border-radius: 10px 36px 10px 36px;
  font-size: 80px;
}
.ev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.chip {
  display: inline-block;
  padding: 4px 14px;
  background: var(--pl);
  color: var(--tc);
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
  clip-path: var(--para);
}
.chip.ok {
  background: #dcfce7;
  color: #15803d;
}
.chip.warn {
  background: #fef3c7;
  color: #b45309;
}
.chip.off {
  background: #e2e8f0;
  color: #475569;
}
.ev-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 4.4vw, 40px);
  font-style: italic;
}
.ev-info {
  margin: 0 0 18px;
  color: #35506a;
  line-height: 1.7;
}
.ev-prize {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fff1a8, #ffd83d);
  border: 2px solid #f0c000;
  border-radius: 8px 28px 8px 28px;
  box-shadow: 5px 5px 0 var(--p2);
}
.ev-trophy {
  font-size: 44px;
  line-height: 1;
}
.ev-prize small {
  display: block;
  font-weight: 700;
  color: #5c4800;
}
.ev-prize b {
  font-family: var(--f-head);
  font-size: clamp(28px, 5vw, 38px);
  font-style: italic;
  color: #1c1500;
}
.ev-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
.ev-stats div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: 6px 18px 6px 18px;
}
.ev-stats i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--pl);
  font-style: normal;
  font-size: 20px;
}
.ev-stats small {
  color: var(--mu);
  font-size: 12px;
}
.ev-stats b {
  font-family: var(--f-head);
  font-size: 16px;
  line-height: 1.25;
  word-break: break-word;
}
.slot {
  padding: 14px 16px;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: 6px 18px 6px 18px;
}
.slot-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}
.bar {
  height: 12px;
  background: var(--pl);
  border-radius: 99px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--p), var(--p2));
  border-radius: 99px;
  box-shadow: 0 0 12px var(--p);
}
.ev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.how-grid .box {
  padding: 18px;
}
.how-grid i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p2), var(--pd));
  color: #fff;
  font-style: normal;
  font-family: var(--f-head);
  font-weight: 700;
}
.how-grid b {
  display: block;
  font-family: var(--f-head);
  font-size: 17px;
}
.how-grid p {
  margin: 4px 0 0;
  color: var(--mu);
  font-size: 14px;
}

/* ---------- layanan ---------- */
.svc-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.svc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: var(--r-card);
  box-shadow: 5px 5px 0 var(--ln);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.svc:hover {
  transform: translate(-3px, -3px);
  border-color: var(--p2);
  box-shadow: 8px 8px 0 var(--p), 0 0 34px rgba(56, 189, 248, 0.45);
}
.svc-thumb {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--pl), var(--ln));
}
.svc-emoji {
  display: grid;
  place-items: center;
  font-size: 56px;
}
.svc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}
.svc-body h3 {
  margin: 0 0 6px;
  font-size: 20px;
}
.svc-body p {
  flex: 1;
  margin: 0 0 12px;
  color: var(--mu);
  font-size: 14px;
}
.svc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.svc-hero {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.svc-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-img);
  background: linear-gradient(135deg, var(--pl), var(--ln));
}
.svc-cover.svc-emoji {
  font-size: 84px;
}
.svc-info h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 4vw, 36px);
  font-style: italic;
}
.svc-price {
  display: inline-block;
  margin: 12px 0 16px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #fff1a8, #ffd83d);
  border: 2px solid #f0c000;
  border-radius: 6px 16px 6px 16px;
}
.svc-price small {
  display: block;
  font-weight: 700;
  color: #5c4800;
}
.svc-price b {
  font-family: var(--f-head);
  font-size: 22px;
  color: #1c1500;
}
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.sample {
  display: block;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: var(--r-card);
  box-shadow: 4px 4px 0 var(--ln);
  overflow: hidden;
  transition: 0.18s;
}
.sample:hover {
  border-color: var(--p2);
  transform: translateY(-3px);
}
.sample img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.sample span {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
}
.cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
}
.cta-box h3,
.cta-box p {
  margin: 0;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 22, 44, 0.86);
  cursor: zoom-out;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- berita ---------- */
.news-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.news-card .tag {
  align-self: flex-start;
}
.news-card b {
  font-family: var(--f-head);
  font-size: 18px;
  line-height: 1.25;
}
.news-card p {
  flex: 1;
  margin: 0;
}
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px;
}
.article h1 {
  margin: 12px 0 18px;
  font-size: clamp(26px, 4.4vw, 38px);
  font-style: italic;
}
.article .isi p {
  font-size: 16px;
}
.article-foot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px dashed var(--ln);
}

/* ---------- admin: daftar sampel ---------- */
.thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.thumb-row form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 110px;
}
.thumb-row img.thumb {
  width: 110px;
  height: 80px;
  margin: 0;
  object-fit: cover;
  border-radius: 8px;
}

/* ---------- tombol WhatsApp mengambang ---------- */
.wa-float {
  position: fixed;
  right: 16px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: flex;
  align-items: center;
  height: 58px;
  min-width: 58px;
  padding: 0 14px;
  border-radius: 99px;
  background: #25d366;
  color: #fff;
  font-family: var(--f-head);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5), 0 0 0 3px #fff;
  transition: transform 0.2s;
}
.wa-float:hover {
  transform: translateY(-3px);
}
.wa-float svg {
  width: 30px;
  height: 30px;
  flex: none;
  fill: #fff;
}
.wa-float span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.25s, margin 0.25s;
}
.wa-float:hover span {
  max-width: 140px;
  margin-left: 8px;
}
.wa-float:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #25d366;
  opacity: 0.5;
  animation: wa-ping 2.2s ease-out infinite;
}
@keyframes wa-ping {
  from {
    transform: scale(1);
    opacity: 0.5;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}
/* di atas menu bawah (HP & area player) */
.pl-body .wa-float {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
.pn-body .wa-float {
  bottom: 22px;
}

@media (max-width: 860px) {
  .co {
    grid-template-columns: 1fr;
  }
  .co-side,
  .co-main {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .ev,
  .svc-hero {
    grid-template-columns: 1fr;
  }
  .ev-poster {
    position: static;
    max-width: 340px;
    margin: 0 auto;
  }
}
@media (max-width: 720px) {
  .wa-float {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    height: 54px;
    min-width: 54px;
  }
  .game-head {
    gap: 14px;
  }
  .game-head .game-logo {
    width: 70px;
    height: 70px;
  }
  .ev-stats {
    grid-template-columns: 1fr;
  }
  .article {
    padding: 20px;
  }
}

/* admin: baris centang */
label.cek {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  font-weight: 600;
}
label.cek input {
  width: auto;
  margin: 3px 0 0;
  flex: none;
}

/* ---------- chip layanan & tombol "Pakai Jasa Kami" di hero beranda ---------- */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -6px 0 20px;
}
.hero-chips span {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 99px;
  color: var(--tx);
  font-size: 13px;
  font-weight: 700;
}
.hero .btn.dark {
  background: linear-gradient(135deg, #0f3a63, var(--tx));
  color: #fff;
}
@media (max-width: 720px) {
  .hero-chips {
    justify-content: center;
  }
}

/* =========================================================
   Panel staff: tampilan ringkas (admin store, pendaftaran,
   arfer, owner). Semua dibatasi di .pn-body.
   ========================================================= */
.pn-body {
  font-size: 14px;
}
/* siluet latar dibuat samar & hanya satu, supaya panel tidak ramai */
.pn-body::before {
  opacity: 0.06;
}
.pn-body::after {
  display: none;
}

/* header & tab lebih tipis */
.pn-top {
  padding: 8px 16px;
  border-bottom-width: 3px;
}
.pn-top > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pn-top br {
  display: none;
}
.pn-top b {
  font-size: 16px;
}
.pn-top small {
  font-size: 12px;
}
.pn-actions a {
  padding: 4px 14px;
  font-size: 12px;
}
.pn-tabs {
  padding: 5px 12px;
  gap: 2px;
}
.pn-tabs a {
  padding: 6px 14px;
  font-size: 13px;
}
.pn-main {
  max-width: 1120px;
  padding: 14px 14px 80px;
}
.pn-main h2 {
  margin: 2px 0 10px;
  font-size: 20px;
  font-style: italic;
}

/* kartu, isian, tombol, tabel: semua dikecilkan */
.pn-main .card,
.pn-main .box {
  padding: 14px 16px;
  border-width: 1.5px;
  border-radius: 6px 16px 6px 16px;
  box-shadow: 3px 3px 0 var(--ln);
}
.pn-main label {
  font-size: 12px;
}
.pn-main input,
.pn-main select,
.pn-main textarea {
  padding: 7px 11px;
  margin: 3px 0 10px;
  border-width: 1.5px;
  border-radius: 5px 11px 5px 11px;
  font-size: 14px;
}
.pn-main textarea {
  min-height: 64px;
}
.pn-main .pn-row input {
  margin: 0;
}
.pn-main .btn {
  padding: 7px 20px;
  font-size: 13px;
}
.pn-main .btn.sm {
  padding: 5px 14px;
  font-size: 12px;
}
.pn-main td,
.pn-main th {
  padding: 7px 10px;
  font-size: 13px;
}
.pn-main .wrap {
  border-width: 1.5px;
  box-shadow: 3px 3px 0 var(--ln);
}
.pn-main .pl-item {
  padding: 9px 12px;
  margin-bottom: 8px;
}

/* ---------- komponen halaman admin ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-bottom: 8px;
}
.toolbar h2 {
  margin: 0;
}
.toolbar small {
  font-size: 12px;
}
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--pl);
  color: var(--tc);
  font-family: var(--f-body);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
}
.sec-t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  color: var(--tc);
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
}
.sec-t:before {
  content: "";
  width: 5px;
  height: 14px;
  background: var(--p);
  clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
}
.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.fgrid .full {
  grid-column: 1 / -1;
}
.fld label {
  display: block;
}
.pn-row3 {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 90px;
  gap: 10px;
}
.pn-main label.cek {
  margin: 0 0 10px;
}

/* lipatan (accordion) */
details.acc {
  margin-bottom: 8px;
  background: #fff;
  border: 1.5px solid var(--ln);
  border-radius: 6px 14px 6px 14px;
  box-shadow: 3px 3px 0 var(--ln);
}
details.acc > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  list-style: none;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
details.acc > summary::-webkit-details-marker {
  display: none;
}
details.acc > summary:hover {
  background: var(--pl);
}
details.acc > summary .ico {
  width: 28px;
  text-align: center;
  font-size: 19px;
}
details.acc > summary .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
details.acc > summary small {
  color: var(--mu);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
details.acc > summary .chev {
  color: var(--tc);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s;
}
details.acc[open] > summary {
  background: var(--pl);
  border-bottom: 1.5px solid var(--ln);
}
details.acc[open] > summary .chev {
  transform: rotate(90deg);
}
.acc-body {
  padding: 12px 14px 14px;
}
.add-sampel {
  margin-top: 8px;
}
.add-sampel input[name="caption"] {
  flex: 1;
}
.add-sampel input[type="file"] {
  flex: 1;
}
.hapus-layanan {
  margin-top: 10px;
  text-align: right;
}

/* baris berita ringkas */
.nrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 7px 12px;
  background: #fff;
  border: 1.5px solid var(--ln);
  border-radius: 5px 12px 5px 12px;
}
.nrow .t {
  flex: 1;
  min-width: 0;
}
.nrow b,
.nrow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nrow small {
  color: var(--mu);
  font-size: 12px;
}

/* sampel layanan lebih kecil */
.pn-main .thumb-row {
  gap: 8px;
}
.pn-main .thumb-row form {
  width: 92px;
}
.pn-main .thumb-row img.thumb {
  width: 92px;
  height: 64px;
}

@media (max-width: 720px) {
  .fgrid {
    grid-template-columns: 1fr;
  }
  .pn-row3 {
    grid-template-columns: 70px minmax(0, 1fr) 70px;
  }
  details.acc > summary small {
    display: none;
  }
  .pn-top > div:first-child {
    flex-direction: column;
    gap: 0;
  }
}

/* =========================================================
   Pendaftaran: logo tim, tab per event, baris pendaftar, arsip
   ========================================================= */
.logo-sm {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: cover;
  background: var(--pl);
  border-radius: 6px 12px 6px 12px;
}
.logo-sm.ph {
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ln);
  color: var(--tc);
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
}
.tim {
  display: flex;
  align-items: center;
  gap: 9px;
}
.tim b,
.tim small {
  display: block;
}
.tim small {
  color: var(--mu);
  font-size: 12px;
}
.pl-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pl-team .logo-sm {
  width: 42px;
  height: 42px;
}
.proof-sm {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 1.5px solid var(--ln);
  border-radius: 5px;
}
.poster-xs {
  width: 26px;
  height: 32px;
  flex: none;
  object-fit: cover;
  border-radius: 3px 7px 3px 7px;
}
.poster-sm {
  width: 56px;
  height: 70px;
  flex: none;
  object-fit: cover;
  border: 1.5px solid var(--ln);
  border-radius: 4px 10px 4px 10px;
}
.poster-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.poster-row > div {
  flex: 1;
  min-width: 0;
}

/* tab pilih event & ringkasan */
.ptabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ptab {
  padding: 5px 14px;
  background: #fff;
  border: 1.5px solid var(--ln);
  border-radius: 99px;
  color: var(--mu);
  font-size: 13px;
  font-weight: 700;
}
.ptab:hover {
  border-color: var(--p2);
  color: var(--tx);
}
.ptab.on {
  background: linear-gradient(135deg, var(--p2), var(--pd));
  border-color: transparent;
  color: var(--on);
}
.ptab .badge {
  margin-left: 4px;
  background: var(--y);
  color: #1c1500;
}
.ev-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.ev-bar-act {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.mini-stats span {
  padding: 2px 10px;
  background: var(--pl);
  border-radius: 99px;
  color: var(--tc);
  font-size: 12px;
}
.mini-stats span.st-pending {
  background: #fef3c7;
  color: #b45309;
}
.mini-stats span.st-diterima {
  background: #dcfce7;
  color: #15803d;
}
.mini-stats span.st-ditolak {
  background: #fee2e2;
  color: #b91c1c;
}
.badge.warn {
  background: #fef3c7;
  color: #b45309;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.filters a {
  padding: 3px 12px;
  border-radius: 99px;
  color: var(--mu);
  font-size: 12px;
  font-weight: 700;
}
.filters a:hover {
  background: var(--pl);
}
.filters a.on {
  background: var(--pl);
  color: var(--tc);
  box-shadow: inset 0 0 0 1.5px var(--p2);
}
.note {
  margin: 8px 0 0;
  font-size: 12px;
}

/* sel tabel pendaftar */
.pn-main .room-form {
  display: flex;
  gap: 6px;
  min-width: 250px;
}
.pn-main .room-form input {
  flex: 1;
  margin: 0;
}
.pn-main td select {
  padding: 4px 8px;
  font-weight: 700;
}
details.pl summary {
  color: var(--tc);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
details.pl div {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
}

/* arsip */
.arsip-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
  color: var(--mu);
  font-size: 13px;
}
.arsip-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.arsip-act form {
  margin: 0;
}
.pn-main .btn.sm[href] {
  display: inline-block;
}

/* =========================================================
   Admin Store (pesanan berwarna, arsip, game / aplikasi) &
   baris geser di halaman Profil
   ========================================================= */

/* judul bagian Game / Aplikasi */
.kind-bar {
  margin: 16px 0 6px;
}
.kind-bar h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-style: italic;
}
.kind-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  font-size: 18px;
  font-style: italic;
}
.pn-main details.acc > summary .game-logo {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 7px;
  font-size: 16px;
}
.pkg-row {
  margin-bottom: 6px;
}
.pkg-row input:first-of-type {
  flex: 2;
}
.pkg-row input:nth-of-type(2) {
  flex: 1;
}

/* pesanan: baris berwarna sesuai status */
.ord-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.ord-bar .filters {
  margin: 0;
}
.ord-bar form {
  margin: 0;
}
.filters a.fs-pending.on { background: #fef3c7; color: #b45309; box-shadow: inset 0 0 0 1.5px #f59e0b; }
.filters a.fs-proses.on { background: #dbeafe; color: #1d4ed8; box-shadow: inset 0 0 0 1.5px #3b82f6; }
.filters a.fs-selesai.on { background: #dcfce7; color: #15803d; box-shadow: inset 0 0 0 1.5px #16a34a; }
.filters a.fs-ditolak.on { background: #fee2e2; color: #b91c1c; box-shadow: inset 0 0 0 1.5px #dc2626; }

.pn-main tr.os-pending td { background: rgba(245, 158, 11, 0.07); }
.pn-main tr.os-proses td { background: rgba(59, 130, 246, 0.06); }
.pn-main tr.os-selesai td { background: rgba(22, 163, 74, 0.06); }
.pn-main tr.os-ditolak td { background: rgba(220, 38, 38, 0.06); color: #7f1d1d; }
.pn-main tr.os-pending td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.pn-main tr.os-proses td:first-child { box-shadow: inset 4px 0 0 #3b82f6; }
.pn-main tr.os-selesai td:first-child { box-shadow: inset 4px 0 0 #16a34a; }
.pn-main tr.os-ditolak td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.pn-main td small {
  display: block;
  font-size: 12px;
}
.pn-main td.nowrap {
  white-space: nowrap;
}
.pn-main td select.st-pending { background: #fef3c7; color: #b45309; }
.pn-main td select.st-proses { background: #dbeafe; color: #1d4ed8; }
.pn-main td select.st-selesai { background: #dcfce7; color: #15803d; }
.pn-main td select.st-ditolak { background: #fee2e2; color: #b91c1c; }

/* baris geser (portofolio & berita di Profil) */
.row-wrap {
  position: relative;
}
.row .svc {
  min-width: 260px;
  max-width: 260px;
  flex: none;
  scroll-snap-align: start;
}
.row .news-card {
  min-width: 260px;
  max-width: 260px;
}
.news-more {
  justify-content: center;
  text-align: center;
  background: var(--pl);
  border-style: dashed;
}
.row-nav {
  position: absolute;
  top: calc(50% - 26px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  border: 2px solid var(--ln);
  border-radius: 50%;
  background: #fff;
  color: var(--tc);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ln);
  transition: transform 0.15s, border-color 0.15s;
}
.row-nav:hover {
  border-color: var(--p2);
  transform: scale(1.08);
}
.row-nav[hidden] {
  display: none;
}
.row-nav.kiri {
  left: -8px;
}
.row-nav.kanan {
  right: -8px;
}
@media (hover: none) {
  .row-nav {
    display: none;
  }
}

/* nomor halaman daftar berita */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}
.pager a {
  min-width: 38px;
  padding: 7px 14px;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: 99px;
  color: var(--tc);
  font-weight: 700;
  text-align: center;
}
.pager a:hover {
  border-color: var(--p2);
}
.pager a.on {
  background: linear-gradient(135deg, var(--p2), var(--pd));
  border-color: transparent;
  color: var(--on);
}

/* ---------- filter berita (Semua / Collab / Sponsor / Partner / Berita) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.chips a {
  padding: 7px 16px;
  background: #fff;
  border: 2px solid var(--ln);
  border-radius: 99px;
  color: var(--tc);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.chips a:hover {
  border-color: var(--p2);
}
.chips a.on {
  background: linear-gradient(135deg, var(--p2), var(--pd));
  border-color: transparent;
  color: var(--on);
}

/* label jenis di kartu berita */
.news-card .kind,
.article .kind {
  display: inline-block;
  align-self: flex-start;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 99px;
  background: #fff;
  border: 1.5px solid var(--ln);
  color: var(--tc);
  font-size: 12px;
  font-weight: 800;
}
.news-card .tag + .kind {
  margin-left: 0;
}

/* tulisan hak cipta di bawah semua halaman (teks biasa, tanpa kotak) */
.hak-cipta {
  margin: 0 auto;
  padding: 8px 16px 28px;
  color: var(--mu);
  font-size: 13px;
  text-align: center;
}
@media (max-width: 720px) {
  .hak-cipta {
    padding-bottom: 104px;
  }
}


/* =====================================================================
   Ikon SVG (menggantikan emoji) + kartu metode pembayaran
   ===================================================================== */
.ic {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  vertical-align: -0.22em;
  stroke: currentColor;
}

/* ikon di dalam kolom isian */
.field i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  opacity: 1;
  color: var(--tc);
}
.field i .ic {
  width: 20px;
  height: 20px;
}
.field .eye {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  top: 10px;
  opacity: 1;
  color: var(--mu);
}
.field .eye:hover {
  color: var(--tc);
}
.field .eye .ic {
  width: 20px;
  height: 20px;
}
.field .eye .ic + .ic,
.field .eye.on .ic:first-child {
  display: none;
}
.field .eye.on .ic + .ic {
  display: inline;
}

/* lingkaran sukses / menunggu / gagal */
.done-icon .ic {
  width: 38px;
  height: 38px;
  stroke-width: 2.6;
  vertical-align: 0;
}

/* menu bawah (HP), menu panel, dan tab */
.bn a span {
  display: grid;
  place-items: center;
}
.bn a span .ic {
  width: 22px;
  height: 22px;
  vertical-align: 0;
}
.pn-tabs a .ic,
.pl-nav a .ic {
  width: 18px;
  height: 18px;
}
.pl-nav a span {
  display: grid;
  place-items: center;
}
.pn-actions a .ic {
  width: 16px;
  height: 16px;
}

/* kartu info event */
.ev-stats i .ic {
  width: 22px;
  height: 22px;
  color: var(--tc);
  vertical-align: 0;
}
.ev-trophy .ic {
  width: 46px;
  height: 46px;
  stroke-width: 1.6;
  vertical-align: 0;
}
.ev-noposter .ic {
  width: 84px;
  height: 84px;
  color: var(--tc);
  stroke-width: 1.2;
  opacity: 0.7;
}
.sum-noposter .ic {
  width: 30px;
  height: 30px;
  color: var(--tc);
}

/* logo game / layanan tanpa gambar */
.game-emoji .ic {
  width: 44px;
  height: 44px;
  color: var(--tc);
  stroke-width: 1.5;
  vertical-align: 0;
}
.svc-emoji .ic {
  width: 56px;
  height: 56px;
  color: var(--tc);
  stroke-width: 1.4;
  vertical-align: 0;
}
details.acc > summary .ico .ic {
  width: 20px;
  height: 20px;
  vertical-align: -0.3em;
}
.kind-bar h3 .ic,
.kind-h .ic,
.pl-h .ic,
.pay-h .ic {
  width: 20px;
  height: 20px;
  vertical-align: -0.3em;
  color: var(--tc);
}
.btn .ic {
  width: 16px;
  height: 16px;
  vertical-align: -0.2em;
}
.drop-empty span {
  display: grid;
  place-items: center;
}
.drop-empty span .ic {
  width: 30px;
  height: 30px;
  color: var(--tc);
  stroke-width: 1.5;
}

/* pilihan metode pembayaran */
.pm-group {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mu);
}
.pm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 2px solid var(--ln);
  border-radius: 12px;
  background: #f4faff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pm:hover {
  border-color: var(--p);
}
.pm input {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--p2);
}
.pm .pm-nm {
  font-weight: 600;
}
.pm .pm-fee {
  margin-left: auto;
  color: var(--mu);
  font-size: 12px;
}
.pm:has(input:checked) {
  border-color: var(--p2);
  background: var(--pl);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}