/* ==========================================================
   QYZEL — Tutorial & Manual Online
   style.css

   Breakpoint:
     dasar    : HP kecil (320px+)
     >= 560px : HP besar / HP landscape
     >= 768px : tablet
     >= 1024px: desktop
     >= 1280px: desktop lebar
   ========================================================== */

:root{
  --bg:        #0e0f11;
  --bg-2:      #16181b;
  --card:      #1c1f23;
  --card-2:    #23272c;
  --line:      #2e3338;
  --text:      #eef1f4;
  --text-2:    #a8b1ba;
  --text-3:    #6f7a84;
  --accent:    #00c8d7;
  --accent-2:  #00e0f0;
  --accent-dim:rgba(0,200,215,.12);
  --warn:      #ffb84d;
  --radius:    16px;
  --radius-sm: 10px;
  --pad:       16px;
  --max:       1040px;
  --hdr:       59px;   /* 58px tinggi isi + 1px border bawah */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 64px);
}

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; }

/* fokus keyboard yang jelas (aksesibilitas) */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

.wrap{
  width:100%; max-width:var(--max); margin:0 auto;
  padding-left:var(--pad); padding-right:var(--pad);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(14,15,17,.9);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; gap:10px; min-height:var(--hdr);
}
.brand{
  display:flex; align-items:center; gap:9px; min-width:0;
  font-weight:800; letter-spacing:.13em; font-size:14px;
  color:var(--text); text-transform:uppercase;
}
.brand:hover{ text-decoration:none; }
.brand-mark{
  width:26px;height:26px;flex:0 0 26px;
  border:2.5px solid var(--text); border-radius:7px;
  display:grid; place-items:center; font-size:12px; font-weight:900; letter-spacing:0;
}
.brand span{ min-width:0; }
.brand small{
  display:block; font-size:9px; font-weight:600; letter-spacing:.09em;
  color:var(--text-3); text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.header-spacer{ flex:1 1 auto; }

.lang-switch{
  display:inline-flex; flex:0 0 auto; padding:3px; gap:2px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
}
.lang-switch button{
  appearance:none; border:0; cursor:pointer; background:transparent;
  color:var(--text-2); font:inherit; font-size:12px; font-weight:700;
  letter-spacing:.04em; padding:6px 13px; border-radius:999px;
  min-height:32px; transition:background .16s, color .16s;
}
.lang-switch button[aria-pressed="true"]{ background:var(--accent); color:#05282c; }
.lang-switch button:hover:not([aria-pressed="true"]){ color:var(--text); }

@media (min-width:560px){
  .brand{ font-size:15px; letter-spacing:.14em; }
  .brand small{ font-size:9.5px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:26px 0 22px;
  background:
    radial-gradient(900px 380px at 85% -20%, rgba(0,200,215,.13), transparent 65%),
    linear-gradient(180deg,#121417 0%, var(--bg) 100%);
}
.hero-inner{ display:grid; gap:20px; align-items:center; }

.eyebrow{
  display:inline-block; margin:0 0 11px;
  font-size:10.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-dim);
  border:1px solid rgba(0,200,215,.28); padding:5px 11px; border-radius:999px;
}
h1{
  margin:0 0 10px;
  font-size:clamp(25px,6.6vw,40px); line-height:1.15;
  font-weight:800; letter-spacing:-.02em; overflow-wrap:break-word;
}
.lede{
  margin:0; max-width:58ch;
  color:var(--text-2); font-size:clamp(14.5px,3.4vw,17px);
}
.hero-img{
  border-radius:var(--radius); border:1px solid var(--line);
  overflow:hidden; background:#0b0c0e;
}

@media (min-width:768px){
  .hero{ padding:40px 0 30px; }
  .hero-inner{ grid-template-columns:1.05fr .95fr; gap:32px; }
}

/* =========================================================
   TABS
   ========================================================= */
.tabbar{
  position:sticky; top:var(--hdr); z-index:50;
  background:rgba(14,15,17,.94);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.tablist{
  display:flex; gap:8px; padding:9px 0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tablist::-webkit-scrollbar{ display:none; }

.tab{
  appearance:none; cursor:pointer; flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:10px 16px; white-space:nowrap;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  color:var(--text-2); font-size:14.5px; font-weight:700; letter-spacing:.01em;
  transition:background .16s, color .16s, border-color .16s;
}
.tab:hover{ color:var(--text); background:var(--card-2); }
.tab[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:#05282c;
}
.tab .ico{ flex:0 0 auto; display:grid; place-items:center; font-size:15px; line-height:1; }
.tab .cnt{
  font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px;
  background:rgba(255,255,255,.09); color:inherit;
}
.tab[aria-selected="true"] .cnt{ background:rgba(0,0,0,.16); }

@media (min-width:560px){
  .tablist{ gap:10px; }
  .tab{ flex:0 1 auto; min-width:190px; font-size:15px; padding:11px 22px; }
}

/* HP sangat kecil (320–400px): kedua tab harus muat utuh, jangan sampai
   tab "Manual Book" terpotong di tepi layar. Angka jumlah disembunyikan
   karena informasinya sudah ada di bilah pembaca manual. */
@media (max-width:400px){
  .tablist{ gap:6px; }
  .tab{ padding:10px 10px; font-size:13.5px; gap:6px; }
  .tab .cnt{ display:none; }
}

/* HP posisi landscape: layar sangat pendek, jangan boroskan tinggi
   untuk dua bilah menempel sekaligus */
@media (max-height:520px){
  .site-header, .tabbar{ position:static; }
}

/* panel */
.tabpanel{ padding:26px 0 40px; }
.tabpanel[hidden]{ display:none; }

@media (min-width:768px){ .tabpanel{ padding:34px 0 52px; } }

/* =========================================================
   HEADINGS
   ========================================================= */
h2{
  margin:0 0 6px;
  font-size:clamp(19px,4.6vw,26px); font-weight:800; letter-spacing:-.015em;
}
h3{ margin:0 0 6px; font-size:16px; font-weight:700; }
p{ margin:0 0 12px; color:var(--text-2); }
strong{ color:var(--text); font-weight:650; }
.section-sub{ margin:0 0 20px; color:var(--text-3); font-size:14px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:12px 20px; border-radius:12px;
  font-size:14.5px; font-weight:700; text-align:center;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  cursor:pointer; transition:transform .12s, background .16s, border-color .16s;
}
.btn:hover{ text-decoration:none; background:var(--card-2); border-color:#3b4249; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#05282c; }
.btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#05282c; }
.btn-sm{ min-height:38px; padding:8px 14px; font-size:13.5px; border-radius:10px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.btn-row .btn{ flex:1 1 auto; }
@media (min-width:560px){ .btn-row .btn{ flex:0 1 auto; } }

/* =========================================================
   CARDS / GRID
   ========================================================= */
.grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .grid.cols-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:600px){ .grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:17px;
}
.card p{ margin:0; font-size:14px; }
.card h3{ font-size:16px; }

/* kartu produk (halaman hub) */
.product-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; color:inherit;
  transition:border-color .18s, transform .18s;
}
.product-card:hover{ border-color:var(--accent); transform:translateY(-2px); text-decoration:none; }
.product-card .thumb{
  background:#0b0c0e; aspect-ratio:16/7; display:grid; place-items:center;
  padding:10px; border-bottom:1px solid var(--line);
}
.product-card .thumb img{ max-height:100%; width:auto; }
.product-card .body{ padding:15px 17px 17px; }
.product-card .cat{
  font-size:10px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin:0 0 5px;
}
.product-card h3{ margin:0 0 5px; font-size:17.5px; }
.product-card p{ margin:0 0 12px; font-size:13.8px; color:var(--text-2); }
.product-card .go{ font-size:14px; font-weight:700; color:var(--accent); }
.product-card.soon{ opacity:.5; pointer-events:none; }
.product-card.soon .go{ color:var(--text-3); }

/* =========================================================
   CALLOUT
   ========================================================= */
.note{
  display:flex; gap:11px;
  background:var(--accent-dim); border:1px solid rgba(0,200,215,.25);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:13px 15px; margin:14px 0;
  font-size:14px; color:var(--text);
}
.note.warn{
  background:rgba(255,184,77,.1);
  border-color:rgba(255,184,77,.28); border-left-color:var(--warn);
}
.note .ico{ flex:0 0 auto; font-weight:800; color:var(--accent); }
.note.warn .ico{ color:var(--warn); }
.note p{ margin:0; color:inherit; }

/* =========================================================
   TAB VIDEO
   ========================================================= */
.video-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:700px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){ .video-grid{ gap:20px; } }

.video-item{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
}
.video-frame{ position:relative; aspect-ratio:16/9; background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-meta{ padding:14px 16px 16px; }
.video-meta .step{
  font-size:10px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin:0 0 5px;
}
.video-meta h3{ margin:0 0 4px; font-size:15.5px; line-height:1.35; }
.video-meta p{ margin:0; font-size:13.5px; color:var(--text-3); }

/* placeholder saat data-yt masih kosong */
.video-frame.empty{
  display:grid; place-items:center; text-align:center;
  background:
    linear-gradient(135deg,#191c20 25%,#1e2126 25%,#1e2126 50%,
                    #191c20 50%,#191c20 75%,#1e2126 75%) 0 0/22px 22px;
}
.video-frame.empty .ph{ padding:14px; }
.video-frame.empty .ph .play{
  width:44px;height:44px;margin:0 auto 10px;
  border:2px solid var(--text-3); border-radius:50%;
  display:grid; place-items:center; color:var(--text-3); font-size:14px;
}
.video-frame.empty .ph span{
  display:block; font-size:11.5px; color:var(--text-3);
  letter-spacing:.06em; text-transform:uppercase; font-weight:700;
}

/* =========================================================
   TAB MANUAL — pembaca halaman
   ========================================================= */
.reader-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:16px;
}
.reader-bar .info{ flex:1 1 auto; min-width:150px; }
.reader-bar .info b{ display:block; font-size:14.5px; color:var(--text); }
.reader-bar .info span{ font-size:12.5px; color:var(--text-3); }
.reader-bar .acts{ display:flex; flex-wrap:wrap; gap:8px; }

.reader{ display:grid; gap:14px; grid-template-columns:1fr; }

/* Di layar lebar, halaman manual dibatasi lebarnya dan dipusatkan.
   Tanpa ini satu halaman A4 akan terentang ~1000px di monitor dan
   terasa raksasa. Di HP tetap selebar layar. */
@media (min-width:900px){
  #panel-pdf h2,
  #panel-pdf .section-sub,
  #panel-pdf .note,
  .reader,
  .reader-bar,
  .reader-end{ max-width:760px; margin-left:auto; margin-right:auto; }
  .reader{ gap:20px; }
}

.page{
  position:relative; margin:0; cursor:zoom-in;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:0 8px 26px rgba(0,0,0,.35);
  aspect-ratio:1100/1595;
}
.page img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.page .no{
  position:absolute; right:9px; bottom:9px; z-index:2;
  background:rgba(16,17,19,.82); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.03em;
  padding:4px 9px; border-radius:999px; backdrop-filter:blur(4px);
}
.page .zoomhint{
  position:absolute; left:9px; bottom:9px; z-index:2;
  background:rgba(16,17,19,.82); color:#fff;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;
}
@media (hover:none){ .page{ cursor:default; } }

.reader-end{
  margin-top:18px; padding:20px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
}
.reader-end p{ margin:0 0 4px; font-size:14px; }

/* =========================================================
   LIGHTBOX (zoom halaman manual)
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(8,9,10,.97);
}
.lightbox.open{ display:flex; flex-direction:column; }
.lb-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--line);
  background:var(--bg); flex:0 0 auto;
}
.lb-bar .lb-page{
  flex:1 1 auto; text-align:center;
  font-size:13.5px; font-weight:700; color:var(--text-2);
}
.lb-bar button{
  appearance:none; cursor:pointer; min-width:44px; min-height:40px;
  display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-size:17px; font-weight:700;
}
.lb-bar button:hover{ background:var(--card-2); }
.lb-bar button:disabled{ opacity:.35; cursor:default; }
.lb-stage{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  display:grid; place-items:center; padding:12px;
  touch-action:pinch-zoom pan-x pan-y;
}
.lb-stage img{
  max-width:100%; max-height:100%;
  background:#fff; border-radius:8px; transition:max-width .2s;
}
.lb-stage.zoomed{ place-items:start center; }
.lb-stage.zoomed img{ max-width:none; max-height:none; width:190%; }
@media (min-width:900px){ .lb-stage.zoomed img{ width:130%; } }

/* =========================================================
   BANTUAN / SUPPORT
   ========================================================= */
.support{
  background:linear-gradient(135deg,#15181c,#1c2126);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 18px; text-align:center;
}
.support h2{ margin-bottom:8px; }
.support p{ margin:0 auto 4px; max-width:48ch; font-size:14.5px; }
.support .btn-row{ justify-content:center; }
@media (min-width:768px){ .support{ padding:30px; } }

/* =========================================================
   FOOTER  — mengikuti footer toko qyzel.com
   ========================================================= */
.site-footer{ background:#0b0b0c; border-top:1px solid #1c1c1f; }

/* ---- bagian atas: logo + alamat + kolom tautan ---- */
.footer-main{
  display:grid; gap:30px; grid-template-columns:1fr;
  padding:34px 0 32px;
}
@media (min-width:700px){
  .footer-main{ grid-template-columns:1.5fr 1fr 1fr; gap:34px; padding:44px 0 40px; }
}
@media (min-width:1024px){
  .footer-main{ grid-template-columns:2fr 1fr 1fr; gap:48px; }
}

.f-logo{ display:inline-block; margin:0 0 18px; }
.f-logo img{ width:170px; max-width:60%; height:auto; }

.f-addr{
  margin:0 0 20px; max-width:44ch;
  font-size:15px; line-height:1.55; color:#b9b9be;
}

.f-social{ display:flex; gap:12px; }
.f-social a{
  width:42px; height:42px; border-radius:50%;
  border:1px solid #45454a; color:#e8e8ea;
  display:grid; place-items:center;
  transition:border-color .16s, color .16s, background .16s;
}
.f-social a:hover{
  border-color:var(--accent); color:var(--accent);
  background:rgba(0,200,215,.08); text-decoration:none;
}
.f-social svg{ width:19px; height:19px; display:block; }

.f-col h3{
  margin:0 0 16px;
  font-size:17px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; color:#fff;
}
.f-col ul{ list-style:none; margin:0; padding:0; }
.f-col li + li{ margin-top:13px; }
.f-col a{ font-size:15px; color:#b9b9be; }
.f-col a:hover{ color:#fff; text-decoration:none; }

/* ---- bilah pemilih bahasa ---- */
.footer-lang{ background:#000; padding:20px 0; }
.footer-lang-switch{
  background:transparent; border:0; padding:0;
  gap:12px; flex-wrap:wrap;
}
.footer-lang-switch button{
  min-height:52px; padding:13px 26px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:0;
  background:transparent; color:#fff; border:1px solid #3d3d42;
}
.footer-lang-switch button[aria-pressed="true"]{
  background:#fff; color:#111; border-color:#fff;
}
.footer-lang-switch button:hover:not([aria-pressed="true"]){
  background:rgba(255,255,255,.09); color:#fff;
}

/* ---- bilah paling bawah ---- */
.footer-bottom{ background:#0b0b0c; border-top:1px solid #1c1c1f; padding:16px 0 20px; }
.footer-bottom .wrap{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:8px 18px;
}
.footer-bottom .copy{ font-size:13px; color:#8e8e94; margin:0; }
.footer-bottom .copy a{ color:#8e8e94; }
.footer-bottom .copy a:hover{ color:var(--accent); }
@supports (padding:env(safe-area-inset-bottom)){
  .footer-bottom{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.totop{
  position:fixed; right:14px; bottom:14px; z-index:70;
  width:46px;height:46px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  display:grid; place-items:center; cursor:pointer; font-size:17px;
  opacity:0; pointer-events:none; transition:opacity .2s;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.totop.show{ opacity:1; pointer-events:auto; }
.totop:hover{ background:var(--card-2); }
@supports (padding:env(safe-area-inset-bottom)){
  .totop{ bottom:calc(14px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   VISIBILITAS BAHASA
   Elemen ber-atribut data-lang disembunyikan, lalu dimunculkan sesuai
   atribut lang pada <html>. `revert` mengembalikan display ke bawaan
   browser, jadi elemen dengan display khusus (flex / inline-block)
   ditegaskan ulang di bawahnya.
   ========================================================= */
[data-lang]{ display:none; }
html[lang="id"] [data-lang="id"]{ display:revert; }
html[lang="en"] [data-lang="en"]{ display:revert; }

html[lang="id"] .eyebrow[data-lang="id"],
html[lang="en"] .eyebrow[data-lang="en"]{ display:inline-block; }

html[lang="id"] .note[data-lang="id"],
html[lang="en"] .note[data-lang="en"]{ display:flex; }

/* =========================================================
   PREFERENSI PENGGUNA
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

/* =========================================================
   CETAK
   ========================================================= */
@media print{
  .site-header,.tabbar,.totop,.btn-row,.lang-switch,
  .reader-bar,.lightbox,.hero-img,.support{ display:none !important; }
  body{ background:#fff; color:#000; }
  .tabpanel[hidden]{ display:block !important; }
  .page{ box-shadow:none; border:0; page-break-after:always; }
}