/* ============================================================================
   app.css — Ekstensi khusus tekrabyte.link di atas theme.css
   Tidak menduplikasi token/komponen dari theme.css, hanya menambah:
   1. Mobile nav toggle (dashboard)
   2. Block editor (drag reorder, block cards)
   3. Public biolink page renderer (5 tema: minimal/gradient/dark/neon/pastel)
   ============================================================================ */

/* ---------- 1. Mobile nav toggle ---------- */
.mobile-nav-toggle{display:none;}
@media (max-width:900px){
  .mobile-nav-toggle{
    display:flex;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface);align-items:center;justify-content:center;color:var(--text-muted);
  }
  .sidebar.open{
    display:flex;position:fixed;inset:0 30% 0 0;z-index:100;box-shadow:var(--shadow-md);
  }
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;}
  .sidebar-backdrop.open{display:block;}
}

/* ---------- 2. Block editor ---------- */
.block-editor-layout{display:grid;grid-template-columns:1.3fr .9fr;gap:20px;align-items:start;}
@media (max-width:900px){.block-editor-layout{grid-template-columns:1fr;}}

.block-add-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}

.block-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 14px 14px 10px;margin-bottom:10px;display:flex;gap:10px;align-items:flex-start;
  cursor:grab;
}
.block-card.dragging{opacity:.45;}
.block-card.drag-over{border-color:var(--primary);}
.block-card .drag-handle{color:var(--text-muted);padding:4px 2px;cursor:grab;user-select:none;}
.block-card .block-body{flex:1;min-width:0;}
.block-card .block-type-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);font-weight:700;margin-bottom:2px;}
.block-card .block-title-text{font-weight:600;font-size:14px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.block-card .block-sub-text{font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.block-card .block-actions{display:flex;gap:6px;flex-shrink:0;}
.block-card.inactive{opacity:.5;}

.theme-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;}
.theme-swatch{
  border:2px solid var(--border);border-radius:var(--radius-sm);padding:10px;text-align:center;
  font-size:12.5px;font-weight:600;cursor:pointer;background:var(--surface);
}
.theme-swatch.selected{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);}
.theme-swatch.locked{opacity:.5;cursor:not-allowed;}
.theme-preview-dot{width:100%;height:36px;border-radius:6px;margin-bottom:8px;}

.device-btn{border-radius:0 !important;}
.device-btn.active{background:var(--primary);color:var(--on-primary);}

.preview-frame-wrap{position:sticky;top:80px;}
.phone-frame{
  width:285px;height:620px;margin:0 auto;border:8px solid var(--text);border-radius:36px;
  overflow:hidden;box-shadow:var(--shadow-md);background:#000;position:relative;
}
.phone-screen{
  width:375px;height:813px;transform-origin:top left;transform:scale(0.76);
  overflow:hidden;background:#fff;
}
.phone-screen iframe{width:375px;height:813px;border:0;display:block;background:#fff;}

/* ---------- 3. Public biolink page renderer (theme-driven) ---------- */
/* Semua tampilan halaman publik diambil dari token tema di bawah.
   Ganti tema di editor -> variabel berubah -> seluruh UI ikut berubah. */
.pub-page{
  min-height:100vh;padding:44px 18px 60px;display:flex;flex-direction:column;align-items:center;
  font-family:var(--font-body);background:var(--pub-bg);color:var(--pub-text);
}
.pub-container{width:100%;max-width:600px;}

.pub-avatar{
  width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 16px;
  border:3px solid var(--pub-surface);box-shadow:var(--pub-shadow,0 6px 24px rgba(0,0,0,.08));
}
.avatar-tile{border-radius:50% !important;font-family:var(--font-display);background:var(--pub-accent);color:var(--pub-on-accent);}
.pub-name{text-align:center;font-family:var(--font-display);font-weight:700;font-size:23px;margin:0 0 6px;color:var(--pub-text);}
.pub-bio{text-align:center;font-size:14px;line-height:1.6;color:var(--pub-muted);margin:0 0 26px;white-space:pre-line;}

.pub-block{margin-bottom:12px;}
.pub-block-link{
  display:flex;align-items:center;gap:16px;
  width:100%;max-width:600px;min-height:80px;height:auto;margin:0 auto 12px;padding:14px 18px;
  border-radius:12px;background:var(--pub-surface);border:1px solid rgb(229,231,235);
  box-shadow:rgba(0,0,0,.1) 0 4px 6px -1px;
  color:#111827;text-align:left;justify-content:flex-start;
  text-decoration:none;box-sizing:border-box;overflow:visible;position:relative;
  transition:transform .2s ease-in-out,box-shadow .2s ease-in-out,border-color .2s ease-in-out;
}
.pub-block-link:hover{
  transform:translateY(-2px);box-shadow:rgba(0,0,0,.16) 0 10px 22px -4px;border-color:var(--pub-accent);
}
.pub-block-link .pub-block-link-thumb{
  width:48px;height:48px;min-width:48px;border-radius:12px;object-fit:cover;margin:0;flex-shrink:0;display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.pub-block-link .pub-block-link-text{
  display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;
}
.pub-block-link .pub-block-link-caption{
  display:block;font-size:12px;color:#6b7280;line-height:1.2;margin-bottom:2px;
}
.pub-block-link .pub-block-link-title{
  display:block;font-size:16px;font-weight:700;color:#111827;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pub-block-video-thumb{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:8px;}
.pub-block-text{padding:12px 16px;font-size:14px;color:var(--pub-muted);text-align:center;white-space:pre-line;}
.pub-block-image img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-sm);display:block;}
.pub-block-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-sm);}
.pub-block-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:var(--radius-sm);}
.pub-block-header{
  text-align:center;font-family:var(--font-display);font-weight:700;font-size:17px;
  margin:26px 0 12px;padding-bottom:8px;color:var(--pub-text);opacity:.9;
  border-bottom:1px solid var(--pub-border);
}
.pub-block-social{display:flex;justify-content:center;gap:var(--soc-gap,10px);flex-wrap:wrap;}
.pub-block-social a{
  --soc:44px;--soc-radius:50%;
  width:var(--soc);height:var(--soc);border-radius:var(--soc-radius);background:var(--pub-surface);border:1px solid var(--pub-border);
  color:var(--pub-text);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--pub-shadow,0 6px 24px rgba(0,0,0,.08));transition:transform .12s ease;
}
.pub-block-social a:hover{transform:scale(1.08);color:var(--soc-hover-color,currentColor);}
.pub-block-social a svg{width:calc(var(--soc)/2);height:calc(var(--soc)/2);display:block;flex:none;}
.pub-social-fallback{font-size:calc(var(--soc)/4);font-weight:700;letter-spacing:.5px;}
.pub-block-product{
  display:flex;gap:12px;align-items:center;background:var(--pub-surface);border:1px solid var(--pub-border);
  border-radius:14px;padding:13px;box-shadow:var(--pub-shadow,0 6px 24px rgba(0,0,0,.08));transition:transform .12s ease,box-shadow .12s ease;
}
.pub-block-product:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.12);}
.pub-block-product img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--pub-surface-2);}
.pub-block-product .p-name{font-weight:700;font-size:13.5px;margin-bottom:2px;color:var(--pub-text);}
.pub-block-product .p-price{font-size:13px;color:var(--pub-accent);font-weight:700;}
.pub-block-embed{border-radius:var(--radius-sm);overflow:hidden;}

.pub-footer{text-align:center;margin-top:34px;font-size:12px;color:var(--pub-muted);opacity:.75;}
.pub-footer a{font-weight:700;color:var(--pub-accent);}

/* ---- Button style variants (dari theme_settings.button_style) ---- */
.pub-btn-rounded .pub-block-link{border-radius:12px;}
.pub-btn-sharp .pub-block-link{border-radius:0;}
.pub-btn-pill .pub-block-link{border-radius:999px;}
.pub-btn-pill .pub-block-product{border-radius:999px;}

/* ---- Layout variants (dari theme_settings.layout) ---- */
.pub-layout-compact .pub-container{max-width:420px;}
.pub-layout-compact .pub-avatar{width:76px;height:76px;margin-bottom:10px;}
.pub-layout-compact .pub-block{margin-bottom:8px;}
.pub-layout-compact .pub-block-link{padding:12px 16px;}

/* ---- Carousel blok link (theme_settings.block_layout = carousel) ---- */
.pub-carousel{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 14px;margin:-4px -2px 0;
  scrollbar-width:thin;
}
.pub-carousel-card{
  flex:0 0 46%;min-width:150px;max-width:200px;
  scroll-snap-align:start;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:16px;border:1px solid var(--pub-border);
  background:var(--pub-surface);text-decoration:none;color:var(--pub-text);
  transition:transform .15s ease;
}
.pub-carousel-card:hover{transform:scale(1.02);}
.pub-carousel-img{aspect-ratio:1/1;background-size:cover;background-position:center;background-color:var(--pub-surface-2);}
.pub-carousel-body{padding:10px 12px;}
.pub-carousel-title{display:block;font-weight:700;font-size:calc(var(--fs) - 1px);line-height:1.35;color:inherit;}
.pub-carousel-caption{display:block;margin-bottom:4px;font-size:calc(var(--fs) - 4px);color:var(--pub-muted);line-height:1.4;}
.pub-layout-compact .pub-carousel-card{flex-basis:48%;min-width:135px;max-width:180px;}

/* ============================================================
   TOKEN TIAP TEMA — semua komponen publik ambil warna dari sini.
   ============================================================ */
.pub-theme-minimal{
  --pub-bg:#F5F7FC; --pub-surface:#FFFFFF; --pub-surface-2:#EEF2FB;
  --pub-text:#10161F; --pub-muted:#5B6472; --pub-accent:#1D6FFF; --pub-on-accent:#FFFFFF; --pub-border:#E1E6F0;
}
.pub-theme-gradient{
  --pub-bg:linear-gradient(160deg,#E8F0FF 0%,#F5F7FC 55%,#EEF2FB 100%);
  --pub-surface:#FFFFFF; --pub-surface-2:#EEF2FB;
  --pub-text:#10161F; --pub-muted:#5B6472; --pub-accent:#1D6FFF; --pub-on-accent:#FFFFFF; --pub-border:#E1E6F0;
}
.pub-theme-dark{
  --pub-bg:#0D1320; --pub-surface:#161D2E; --pub-surface-2:#1D2740;
  --pub-text:#E7ECF7; --pub-muted:#93A0B8; --pub-accent:#4C8DFF; --pub-on-accent:#071022; --pub-border:#26314A;
}
.pub-theme-neon{
  --pub-bg:#0A0A12; --pub-surface:#12121F; --pub-surface-2:#1C1C30;
  --pub-text:#F5F5FF; --pub-muted:#B9A9E8; --pub-accent:#7C3AED; --pub-on-accent:#FFFFFF; --pub-border:#7C3AED;
  --pub-shadow:0 0 14px rgba(124,58,237,.45);
}
.pub-theme-pastel{
  --pub-bg:#FDF3F8; --pub-surface:#FFFFFF; --pub-surface-2:#FBE7F2;
  --pub-text:#4A3B45; --pub-muted:#8A7480; --pub-accent:#A855F7; --pub-on-accent:#FFFFFF; --pub-border:#F3D9E8;
}

@media (max-width:480px){
  .phone-frame{width:100%;height:70vh;border-width:0;border-radius:0;box-shadow:none;}
  .phone-screen{transform:scale(1);width:100%;height:70vh;}
  .phone-screen iframe{width:100%;height:70vh;}
}

/* ---------- 3c. Upload gambar — zona dashed-border (drag & drop, native) ---------- */
/* Area upload rapi bergaris putus-putus, bukan tombol browser default.
   Input file native ditumpuk transparan di atas zona supaya klik & drop jalan. */
.upload-zone{
  position:relative;display:flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;
  padding:20px;border:2px dashed #ccc;border-radius:8px;
  background:var(--surface);color:var(--text-muted);cursor:pointer;text-align:center;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.upload-zone:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.upload-zone:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.upload-zone-ico{color:var(--primary);opacity:.9;margin-bottom:2px;}
.upload-zone-text{font-size:14px;font-weight:600;color:var(--text);}
.upload-zone-hint{font-size:12px;color:var(--text-muted);}
/* Input file bawaan disembunyikan secara visual (teknik clip) namun tetap
   berfungsi saat zona diklik/seret (implicit label association). */
.upload-zone-input{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.upload-zone-preview{max-width:160px;border-radius:var(--radius-sm);border:1px solid var(--border);}

/* ---------- 3e. Media gambar di dalam blok (link/video/product) ---------- */
.pub-block-media{display:block;width:100%;max-width:360px;margin:0 auto 10px;border-radius:var(--radius);object-fit:cover;aspect-ratio:1/1;}
/* Prettify upload zone preview (replaced inline) */
.upload-zone-placeholder{display:flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;}
.upload-zone-live{max-width:220px;max-height:160px;border-radius:var(--radius-sm);border:1px solid var(--border);margin:0 auto;object-fit:contain;}

/* ---------- Switch toggle (replaces checkbox) ---------- */
.switch-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500;font-size:13px;}
.switch-input{display:none;}
.switch-slider{
  position:relative;width:40px;height:22px;background:#ccc;border-radius:999px;
  transition:background .2s ease;flex-shrink:0;
}
.switch-slider::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch-input:checked + .switch-slider{background:var(--primary);}
.switch-input:checked + .switch-slider::after{transform:translateX(18px);}