/* Glassmorphism Dark Premium theme */
:root{
  --bg:#0f0c29;
  --panel:rgba(255,255,255,0.07);
  --panel2:rgba(255,255,255,0.04);
  --text:#f0efff;
  --muted:rgba(224,224,255,0.55);
  --line:rgba(255,255,255,0.1);
  --accent:#ff6496;
  --accent2:#7c4dff;
  --accent3:#00c9ff;
  --accent4:#f9a825;
  --accent5:#00e5b0;
  --danger:#ff4f4f;
  --success:#00e5b0;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --radius: 1rem;
  --max: 1100px;
  --font: 'Syne', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  padding-top:56px;
  font-family:'DM Sans', sans-serif;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  background-attachment: fixed;
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* Floating orbs background */
body::before{
  content:'';
  position:fixed;
  top:-100px; left:30%;
  width:400px; height:400px;
  background: radial-gradient(circle, rgba(255,100,150,0.2), transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation: floatOrb 8s ease-in-out infinite;
}
body::after{
  content:'';
  position:fixed;
  bottom:-50px; right:15%;
  width:350px; height:350px;
  background: radial-gradient(circle, rgba(124,77,255,0.2), transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation: floatOrb 10s ease-in-out infinite reverse;
}
@keyframes floatOrb{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-30px) scale(1.05)}
}

a{color:inherit; text-decoration:none; transition:color .15s ease}
a:hover{color:var(--accent)}
small{color:var(--muted)}

.container{max-width:var(--max); margin:0 auto; padding:1.25rem; position:relative; z-index:1}
.grid{display:grid; gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr} }

.card{
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover{
  box-shadow:var(--shadow-lg);
  border-color:rgba(255,100,150,0.3);
  transform:translateY(-2px);
}

.card .pad{padding:1.25rem}

.badge{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.4rem 0.9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  color:var(--text); font-size:0.75rem; font-weight:500;
}
.badge.accent{
  background:rgba(255,100,150,0.15);
  color:var(--accent);
  border-color:rgba(255,100,150,0.3);
}
.badge.success{
  background:rgba(0,229,176,0.12);
  color:var(--success);
  border-color:rgba(0,229,176,0.25);
}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(15,12,41,0.85);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:0.75rem; font-weight:800; letter-spacing:-.02em; color:var(--text); font-family:var(--font);}
.brand .logo{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
  box-shadow: 0 2px 12px rgba(255,100,150,0.4);
}
.navlinks{display:flex; align-items:center; gap:0.25rem; flex-wrap:wrap}
.navlinks a{
  color:var(--muted);
  padding:0.5rem 0.75rem;
  border-radius:0.5rem;
  font-size:0.9rem;
  font-weight:500;
  transition: all .15s ease;
}
.navlinks a:hover{
  background:rgba(255,255,255,0.08);
  color:var(--text);
}
.navright{display:flex; align-items:center; gap:0.75rem}
.search{
  display:flex; align-items:center; gap:0.5rem;
  padding:0.5rem 0.75rem;
  border-radius:0.75rem;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(10px);
  min-width:220px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within{
  border-color:rgba(255,100,150,0.5);
  box-shadow: 0 0 0 3px rgba(255,100,150,0.15);
}
.search input{
  width:100%;
  background:transparent;
  border:0; outline:0;
  color:var(--text);
  font-size:0.9rem;
}
.search input::placeholder{color:var(--muted)}
@media (max-width:860px){ .search{min-width:160px} }
@media (max-width:720px){ .nav{flex-wrap:wrap} .search{flex:1; min-width:0} }

/* ── Mobile: search inline with brand, hide desktop navlinks ── */
@media (max-width:680px){
  .nav {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    height: 56px;
  }
  .navlinks { display: none; }
  .navright { flex: 1; min-width: 0; }
  .search { min-width: 0; width: 100%; }
  .brand span:last-child { display: none; } /* hide text, keep logo on very small */
}
@media (max-width:400px){
  .brand span:last-child { display: none; }
}

/* ── Vertical "Menu" tab ── */
.menu-tab {
  display: none;
  position: fixed;
  left: 0;
  top: 56px; /* right below the topbar */
  z-index: 200;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 10px 9px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font);
  box-shadow: 3px 0 16px rgba(255,100,150,0.35);
  transition: all .2s ease;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  writing-mode: horizontal-tb; /* keep letters upright */
}
/* Each letter stacks as its own line, upright and readable */
.menu-tab span {
  display: block;
  line-height: 1.2;
  text-align: center;
}
.menu-tab:hover {
  padding-left: 13px;
  box-shadow: 4px 0 22px rgba(255,100,150,0.55);
}
.menu-tab.hidden { opacity: 0; pointer-events: none; }

@media (max-width:680px){
  .menu-tab { display: flex; }
}

/* ── Sidebar overlay ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sidebar-overlay.show { display: block; }

/* ── Sidebar drawer ── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 260px;
  z-index: 400;
  background: rgba(15,12,41,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255,255,255,0.1);
  box-shadow: 8px 0 40px rgba(0,0,0,0.5);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}
.sidebar.open { transform: translateX(0); }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text);
}
.sidebar-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.sidebar-close:hover { background: rgba(255,100,150,0.15); color: var(--accent); }

.sidebar-links {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
  border: 1px solid transparent;
}
.sidebar-link:hover {
  background: rgba(255,100,150,0.1);
  border-color: rgba(255,100,150,0.2);
  color: var(--text);
}

.hero{padding:1.5rem 0 0.5rem}
.h1{
  font-size:2.25rem; line-height:1.15; margin:0.5rem 0 0.75rem;
  font-weight:800; letter-spacing:-.03em;
  font-family:var(--font);
}
.hero .h1{
  background: linear-gradient(135deg, #fff 0%, rgba(255,180,200,0.9) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.p{color:var(--muted); max-width:42rem; margin:0 0 0.75rem; font-size:1rem}
.kpi{display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:1rem}

.breadcrumb{display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:0.8rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}
.sep{opacity:.6}

.section-title{display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.5rem 0}
.section-title h2{margin:0; font-size:1.1rem; font-weight:700; color:var(--text); font-family:var(--font);}
.section-title .hint{color:var(--muted); font-size:0.8rem}

/* Tool cards */
.tool{
  display:flex; flex-direction:column; gap:0.75rem;
  padding:1.25rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition: all .2s ease;
  min-height:120px;
  position:relative;
  overflow:hidden;
}
.tool::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  opacity:0;
  transition: opacity .2s ease;
}
.tool:hover{
  transform: translateY(-2px);
  border-color:rgba(255,100,150,0.25);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,100,150,0.15);
  background: rgba(255,255,255,0.08);
}
.tool:hover::before{opacity:1}
.tool .row{display:flex; gap:0.75rem; align-items:flex-start}
.icon{
  width:40px; height:40px;
  border-radius:0.75rem;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,100,150,0.2), rgba(124,77,255,0.2));
  color:var(--accent);
  flex:0 0 auto;
  border:1px solid rgba(255,100,150,0.2);
}
.tool h3{margin:0; font-size:1rem; font-weight:700; color:var(--text)}
.tool p{margin:0; color:var(--muted); font-size:0.85rem; line-height:1.5}

.cta-row{display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.75rem}
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  color:var(--text);
  padding:0.6rem 1rem;
  border-radius:0.5rem;
  font-weight:600;
  font-size:0.9rem;
  cursor:pointer;
  transition: all .15s ease;
}
.btn:hover{
  border-color:rgba(255,100,150,0.4);
  background: rgba(255,100,150,0.1);
  color:var(--accent);
}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color:transparent;
  color:#fff;
}
.btn.primary:hover{
  opacity:0.9;
  box-shadow: 0 4px 20px rgba(255,100,150,0.4);
}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* AdSense area */
.ad{
  border:1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  backdrop-filter:blur(16px);
  border-radius:var(--radius);
  padding:1.5rem;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: all .2s ease;
  position:relative;
}
.ad:hover{
  border-color:rgba(255,100,150,0.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.ad::before{
  content:"Sponsored"; position:absolute; top:0.5rem; left:0.75rem;
  font-size:0.65rem; font-weight:600; letter-spacing:.05em;
  color:var(--muted); text-transform:uppercase;
}
.ad strong,.ad .ad-inner{color:var(--text)}
.ad-mid{margin-top:1rem}
.ad-bottom{margin-top:1.5rem}

.uploader{
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(16px);
  border-radius:var(--radius);
  padding:1.25rem;
}
.drop{
  border:2px dashed rgba(255,100,150,0.35);
  background:rgba(255,100,150,0.06);
  border-radius:0.75rem;
  padding:1.5rem;
  display:flex; gap:1rem; align-items:flex-start;
  transition: all .15s ease;
}
.drop.dragover{border-color:var(--accent2); background:rgba(124,77,255,0.1)}
.drop .meta{flex:1}
.drop .meta b{display:block; margin-bottom:0.25rem}
.fileline{margin-top:0.75rem; color:var(--muted); font-size:0.8rem; display:flex; gap:0.5rem; flex-wrap:wrap}

.kv{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
@media (max-width:640px){ .kv{grid-template-columns:1fr} }

.result{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  padding:1rem;
}
.result pre{
  margin:0;
  max-height:220px;
  overflow:auto;
  padding:1rem;
  border-radius:0.5rem;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.2);
  color:var(--text);
  font-size:0.85rem;
  white-space:pre-wrap;
}

.faq details{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  border-radius:0.5rem;
  padding:0.75rem 1rem;
}
.faq details + details{margin-top:0.5rem}
.faq summary{cursor:pointer; font-weight:600}
.faq p{margin:0.5rem 0 0; color:var(--muted)}

.footer{
  margin-top:2rem;
  border-top:1px solid rgba(255,255,255,0.08);
  background: rgba(15,12,41,0.6);
  backdrop-filter:blur(20px);
  position:relative; z-index:1;
}
.footer .cols{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:1.5rem}
@media (max-width:820px){ .footer .cols{grid-template-columns:1fr} }
.footer a{color:var(--muted)}
.footer a:hover{color:var(--accent)}
.footer .mini{color:var(--muted); font-size:0.85rem}
.pills{display:flex; gap:0.5rem; flex-wrap:wrap}

.toast{
  position:fixed; bottom:1rem; right:1rem; z-index:999;
  max-width:340px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(15,12,41,0.9);
  backdrop-filter:blur(20px);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:1rem;
  display:none;
}
.toast.show{display:block}
.toast .t{font-weight:700; margin:0 0 0.25rem}
.toast .m{margin:0; color:var(--muted); font-size:0.85rem}

/*Kenaikan kategori*/
section[id], [id] {
  scroll-margin-top: 80px;
}

/*Donate melayang*/
.donate-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,100,150,0.4);
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.donate-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(255,100,150,0.5);
  color: #fff;
}

/* Report a Bug button — inline in hero KPI row */
.bug-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ff4f4f, #ff6496);
  border: 1.5px solid rgba(255,100,150,0.4);
  box-shadow: 0 3px 14px rgba(255,79,79,0.35);
  transition: all .2s ease;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
  margin-left: auto;
}
.bug-report-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
}
.bug-report-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255,79,79,0.5);
  color: #fff;
  border-color: rgba(255,100,150,0.7);
}
.bug-report-btn svg {
  flex-shrink: 0;
}

/* Report a Bug — floating fixed button (all pages, bottom-left) */
.bug-float-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 2147483646;
  background: rgba(15,12,41,0.88);
  color: rgba(224,224,255,0.75);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid rgba(255,79,79,0.35);
  box-shadow: 0 3px 16px rgba(0,0,0,0.4);
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: 7px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bug-float-btn:hover {
  background: linear-gradient(135deg, #ff4f4f, #ff6496);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(255,79,79,0.45);
  transform: translateY(-2px);
}