/* ========================================================================== ULik.me — app stylesheet (mobile-first) Brand: ULik.me — modern, clean, creator-focused, Indonesian SaaS ========================================================================== */ :root{ --ink:var(--ulik-slate-main); --ink-2:#334155; --mut:var(--ulik-slate-muted); --mut-2:#94A3B8; --bg:var(--ulik-bg); --bg-2:#F0F9FF; --ind:var(--ulik-sky-main); --vio:var(--ulik-sky-light); --pink:var(--ulik-sky-light); --sky:#0EA5E9; --teal:#0D9488; --grad:linear-gradient(120deg,var(--ulik-sky-main) 0%,var(--ulik-sky-light) 55%,#7DD3FC 100%); --grad-soft:linear-gradient(120deg,var(--ulik-sky-main),var(--ulik-sky-light)); --ok:#059669; --warn:#D97706; --err:#DC2626; --info:#0284C7; --line:rgba(15,23,42,.09); --glass:rgba(255,255,255,.66); --radius:16px; --radius-lg:22px; --radius-sm:10px; --shadow:0 10px 34px -12px rgba(14,165,233,.22); --shadow-lg:0 22px 60px -18px rgba(14,165,233,.30); --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; } /* ========================================================================== DESIGN TOKENS BAKU — ULik.me Dashboard Redesign (Fase 0) -------------------------------------------------------------------------- STATUS: PENDAFTARAN TOKEN SAJA. Lapisan ini belum dipakai oleh satu pun aturan/ komponen UI — nilai di bawah adalah SUMBER BAKU untuk tahap redesign berikutnya. Konvensi penamaan mengikuti nama token yang diminta (gaya Tailwind), dan padanannya bila kelak dipakai bersama utility class: ulik-bg → bg-ulik-bg (canvas utama) ulik-sky-main → bg-/text-/border-ulik-sky-main ulik-sky-light → bg-/text-ulik-sky-light ulik-sky-tint → bg-ulik-sky-tint (latar biru lembut) ulik-sky-border → border-ulik-sky-border ulik-slate-main → text-ulik-slate-main (heading/teks utama) ulik-slate-muted → text-ulik-slate-muted (teks sekunder/subtitle) rounded-bento → radius kartu utama 18px rounded-button → radius tombol baku 10px ATURAN PENTING (jangan diubah tanpa membaca AGENTS.md): Token ini SENGAJA TIDAK menimpa variabel brand yang sudah berjalan (--bg, --ind, --sky, --radius, --radius-sm, dst) dan tidak direferensikan aturan mana pun. Menyalin nilai token ini ke variabel lama = mengubah tampilan yang sudah rilis, dan itu BUKAN cakupan fase pendaftaran ini. ========================================================================== */ :root{ /* Colors */ --ulik-bg:#F4F7FB; /* Background canvas utama */ --ulik-sky-main:#0EA5E9; /* Sky blue deep */ --ulik-sky-light:#38BDF8; /* Sky blue bright/master */ --ulik-sky-tint:#E0F2FE; /* Soft blue background */ --ulik-sky-border:#BAE6FD; /* Border tipis aksen */ --ulik-slate-main:#0F172A; /* Warna teks utama / heading */ --ulik-slate-muted:#64748B; /* Warna teks sekunder / subtitle */ /* Border radius */ --radius-bento:18px; /* Radius kartu utama */ --radius-button:10px; /* Radius tombol baku */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg); background-image:radial-gradient(900px 520px at 12% -8%,rgba(56,189,248,.16),transparent 60%), radial-gradient(800px 480px at 105% 8%,rgba(56,189,248,.13),transparent 55%), radial-gradient(700px 500px at 50% 115%,rgba(14,165,233,.10),transparent 60%); background-attachment:fixed;line-height:1.55;min-height:100vh} img{max-width:100%;vertical-align:middle} a{color:var(--ind);text-decoration:none} a:hover{opacity:.85} h1,h2,h3,h4{line-height:1.2;margin:0 0 .4em;letter-spacing:-.02em;font-weight:800} h1{font-size:clamp(1.7rem,4.5vw,2.6rem)} h2{font-size:clamp(1.35rem,3vw,1.8rem)} h3{font-size:1.1rem} p{margin:.35em 0} .muted{color:var(--mut)} small{color:var(--mut)} code{background:var(--ulik-sky-tint);border-radius:6px;padding:.1em .4em;font-size:.92em;word-break:break-all} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .wrap{max-width:1140px;margin:0 auto;padding:0 20px} .checkout-wrap,.err-wrap{max-width:640px;margin:0 auto;padding:28px 16px 60px} .ic{display:inline-flex;vertical-align:-4px} /* ------------------------------------------------------------------ logo --- */ .ulik-logo{font-size:1.4rem;font-weight:900;letter-spacing:-.03em;color:var(--ink);display:inline-flex;align-items:center} .ulik-logo span{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent} .logo-light{color:#fff} /* ------------------------------------------------------------------ flash --- */ .flash-stack{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:900;width:min(92vw,560px);display:flex;flex-direction:column;gap:8px} .flash{border-radius:14px;padding:12px 42px 12px 16px;position:relative;font-size:.93rem;box-shadow:var(--shadow);backdrop-filter:blur(14px)} .flash-ok{background:rgba(236,253,245,.96);border:1px solid #a7f3d0;color:#065f46} .flash-err{background:rgba(254,242,242,.97);border:1px solid #fecaca;color:#991b1b} .flash-info{background:rgba(224,242,254,.97);border:1px solid #bae6fd;color:#075985} .flash-warn{background:rgba(255,247,237,.97);border:1px solid #fed7aa;color:#92400e} .flash-close{position:absolute;right:8px;top:6px;border:0;background:none;font-size:1.2rem;cursor:pointer;color:inherit;opacity:.6} .flash a,.flash code{color:inherit} code.flash-code{display:inline-block;margin-top:6px;max-width:100%;overflow-wrap:break-word} /* ------------------------------------------------------------- buttons ----- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-family:var(--font); border-radius:999px;padding:12px 22px;border:1px solid transparent;cursor:pointer;font-size:.95rem; transition:transform .12s ease,box-shadow .12s ease,background .15s;line-height:1.2;text-decoration:none} .btn:active{transform:scale(.97)} .btn-sm{padding:8px 15px;font-size:.85rem} .btn-lg{padding:15px 30px;font-size:1.05rem} .btn-block{width:100%} .btn-primary{background:var(--grad-soft);color:#fff;box-shadow:0 10px 24px -10px rgba(14,165,233,.65)} .btn-primary:hover{box-shadow:0 14px 30px -8px rgba(14,165,233,.8);opacity:1} .btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:var(--line)} .btn-danger{background:linear-gradient(120deg,#ef4444,#dc2626);color:#fff} .btn-soft{background:var(--ulik-sky-tint);color:var(--ind)} .btn-outline{background:transparent;border-color:rgba(14,165,233,.4);color:var(--ind)} .btn[disabled]{opacity:.55;cursor:not-allowed} .icon-btn{border:0;background:none;cursor:pointer;padding:6px;border-radius:9px;color:var(--mut);display:inline-flex} .icon-btn:hover{background:var(--ulik-sky-tint);color:var(--ind)} .icon-btn.danger:hover{background:#FEE2E2;color:var(--err)} /* --------------------------------------------------------------- top bar --- */ .site-top{position:relative;z-index:20} .site-top-in{display:flex;align-items:center;gap:18px;padding:16px 20px;max-width:1140px;margin:0 auto} .site-nav{display:flex;gap:4px;margin-left:auto} .snk{padding:8px 13px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:.92rem} .snk:hover{background:rgba(255,255,255,.75);opacity:1} .snk.active{background:rgba(255,255,255,.8);color:var(--ind);box-shadow:0 2px 10px rgba(14,165,233,.12)} .site-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap} @media(max-width:560px){ .site-top-in{flex-wrap:wrap;gap:10px;padding:12px 16px} .site-nav{order:3;width:100%;margin-left:0;justify-content:center} .site-cta{margin-left:auto;gap:8px} .site-cta .btn{padding:8px 13px;font-size:.82rem} } /* -------------------------------------------------------------- footer ----- */ .site-foot{margin-top:70px;border-top:1px solid var(--line);background:rgba(255,255,255,.45);backdrop-filter:blur(10px)} .foot-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;padding:36px 20px 20px;max-width:1140px;margin:0 auto} .foot-brand{max-width:340px} .foot-links{display:grid;grid-template-columns:repeat(2,auto);gap:8px 26px;align-content:start} .foot-links a{color:var(--mut);font-size:.93rem} .foot-copy{color:var(--mut-2);font-size:.83rem;padding:14px 20px 26px;text-align:center} .heart{color:var(--pink)} /* ------------------------------------------------------------- hero/landing */ .hero{text-align:center;padding:64px 20px 40px;position:relative} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);border:1px solid var(--line); color:var(--ind);font-weight:700;font-size:.8rem;border-radius:999px;padding:7px 15px;margin-bottom:22px;backdrop-filter:blur(8px)} .hero h1{font-size:clamp(2.1rem,6vw,3.6rem);font-weight:900;max-width:860px;margin:0 auto .5rem} .hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .lead{color:var(--mut);font-size:clamp(1rem,2.4vw,1.22rem);max-width:640px;margin:0 auto 34px} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .hero-note{color:var(--mut-2);font-size:.85rem;margin-top:18px} .hero-stats{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:34px;color:var(--mut);font-size:.9rem} .hero-stats b{color:var(--ink);font-size:1.15rem;display:block} /* mock device preview */ .preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,280px));gap:22px;justify-content:center;padding:26px 16px 10px;max-width:1000px;margin:0 auto} .mock-card{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-lg); padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(180%)} .mock-top{display:flex;align-items:center;gap:12px;margin-bottom:14px} .mock-dot{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800} .mock-bar{height:12px;border-radius:8px;background:#E2E8F0;margin:8px 0} .mock-bar.w70{width:70%}.mock-bar.w100{width:100%}.mock-bar.w85{width:85%} .mock-link{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-top:10px;box-shadow:0 2px 8px rgba(15,23,42,.04)} .mock-link .ml-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none} .mock-link .ml-t{font-size:.82rem;font-weight:600;color:var(--ink-2);flex:1} .mock-link .ml-p{font-size:.72rem;color:var(--ind);font-weight:800} /* section scaffolding */ .sec{padding:58px 20px} .sec-head{text-align:center;max-width:660px;margin:0 auto 42px} .sec-head .kicker{color:var(--ind);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase} .sec-head p{color:var(--mut)} .grid{display:grid;gap:20px} .grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .feat{background:var(--glass);border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg); padding:26px;backdrop-filter:blur(18px) saturate(180%);box-shadow:var(--shadow);transition:transform .18s ease} .feat:hover{transform:translateY(-4px)} .feat-ic{width:52px;height:52px;border-radius:16px;background:var(--grad-soft);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 10px 20px -8px rgba(14,165,233,.6)} .feat h3{margin-bottom:6px} .feat p{color:var(--mut);font-size:.93rem;margin:0} /* how-it-works */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;counter-reset:step} .step{background:var(--glass);border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);padding:24px 20px;position:relative;backdrop-filter:blur(18px)} .step b{display:block;margin-top:14px} .step p{color:var(--mut);font-size:.88rem;margin:0} .step .n{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 8px 16px -6px rgba(14,165,233,.55)} .step.demo-tag{background:linear-gradient(150deg,rgba(56,189,248,.10),rgba(56,189,248,.12));border-style:dashed;border-color:rgba(14,165,233,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px} .step.demo-tag b{margin-top:0} /* cta band */ .cta-band{max-width:760px;margin:10px auto 0;background:var(--grad);border-radius:28px;color:#fff;text-align:center;padding:46px 24px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .cta-band:before{content:'';position:absolute;inset:0;background:radial-gradient(300px 160px at 15% 0%,rgba(255,255,255,.25),transparent 60%),radial-gradient(260px 160px at 90% 100%,rgba(255,255,255,.2),transparent 60%)} .cta-band h2,.cta-band p{position:relative;color:#fff} .cta-band .btn{background:#fff;color:var(--ind);position:relative} /* ------------------------------------------------------------------ cards */ .card{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-lg);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(180%)} .pad-lg{padding:clamp(20px,4vw,36px)} .prose{max-width:760px} .prose h1{margin-bottom:14px} .prose h2{margin-top:26px} /* --------------------------------------------------------- auth pages ----- */ .label-hint{margin:2px 0 6px;padding:0;list-style:none;color:var(--mut-2);font-size:.75rem} .input-prefix{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .input-prefix:focus-within{outline:2px solid rgba(14,165,233,.3)} .input-prefix span{color:var(--mut);padding:0 0 0 14px;font-weight:700} .input-prefix input{border:0 !important;outline:none !important;flex:1} /* ------------------------------------------------------------------ forms */ .form-stack{display:flex;flex-direction:column;gap:15px} label{display:block;font-weight:600;font-size:.86rem;color:var(--ink-2)} input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=tel],input[type=date],input[type=search],select,textarea{ width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink); background:#fff;margin-top:6px;transition:border .15s,box-shadow .15s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ind);box-shadow:0 0 0 3px rgba(14,165,233,.16)} textarea{min-height:110px;resize:vertical} input[type=checkbox],input[type=radio]{accent-color:var(--ind);width:17px;height:17px;margin:0 6px 0 0;vertical-align:-3px} .form-errors{background:#FEF2F2;border:1px solid #fecaca;color:#991b1b;border-radius:12px;padding:12px 16px;font-size:.9rem;margin-bottom:14px} .form-errors ul{margin:6px 0 0;padding-left:18px} .check-line{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--ink-2);font-size:.86rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px} @media(max-width:560px){.form-row{grid-template-columns:1fr}} /* ------------------------------------------------------- creator page ----- */ /* Halaman creator: latarnya selalu dari tema pilihan kreator (inline), jadi di sini hanya transparan supaya tidak menimpa tema apa pun. */ .pg-creator{background:transparent} .creator-shell{min-height:100vh} .creator-head{text-align:center;padding:44px 20px 10px;max-width:620px;margin:0 auto} .avatar-ring{width:118px;height:118px;margin:0 auto 14px;padding:4px;border-radius:50%;background:conic-gradient(from 210deg,var(--ulik-sky-main),var(--ulik-sky-light),var(--ulik-sky-light),var(--ulik-sky-main));box-shadow:0 12px 30px -8px rgba(56,189,248,.5)} .avatar-ring .avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff} .creator-head h1{margin:0;font-size:1.5rem} .creator-handle{color:var(--mut);font-weight:600;font-size:.92rem} .creator-bio{color:var(--ink-2);white-space:pre-line;margin-top:10px;font-size:.95rem} .creator-loc{margin-top:8px;font-size:.85rem;color:var(--mut)} .socials{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px auto 6px;max-width:620px;padding:0 16px} .so-chip{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--ind);box-shadow:0 6px 16px -6px rgba(15,23,42,.18);transition:transform .15s} .so-chip:hover{transform:translateY(-3px) scale(1.05);opacity:1} .so-chip svg{width:20px;height:20px} .creator-body{max-width:620px;margin:0 auto;padding:14px 16px 70px} .linkstack{display:flex;flex-direction:column;gap:12px;margin-top:12px} .btnlink{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95); border-radius:16px;padding:14px 16px;color:var(--ink);font-weight:700;box-shadow:0 8px 22px -10px rgba(14,165,233,.25); backdrop-filter:blur(10px);transition:transform .14s ease,box-shadow .14s} .btnlink:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(14,165,233,.35);opacity:1} .btnlink .bl-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none} .btnlink svg{width:22px;height:22px} .btnlink .bl-arrow{margin-left:auto;color:var(--mut-2);flex:none} .bl-title{font-size:.98rem} .bl-sub{font-size:.76rem;color:var(--mut);font-weight:500;overflow-wrap:anywhere} /* v1.40: judul & keterangan kartu link SELALU bertumpuk (dulu menempel sebaris). */ .btnlink .bl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .btnlink .bl-title,.btnlink .bl-sub{display:block} .sec-div{display:flex;align-items:center;gap:14px;margin:30px 2px 14px;color:var(--ink-2);font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase} .sec-div:before,.sec-div:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(15,23,42,.15));} .sec-div:after{background:linear-gradient(90deg,rgba(15,23,42,.15),transparent)} .products{display:flex;flex-direction:column;gap:14px} .pcard{display:flex;gap:14px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.98);border-radius:18px; padding:14px;box-shadow:0 10px 28px -12px rgba(14,165,233,.28);align-items:center} .pthumb{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:none;background:var(--ulik-sky-tint)} .pthumb-ph{display:flex;align-items:center;justify-content:center;color:#fff;background:var(--grad-soft);font-weight:800;font-size:.7rem;letter-spacing:.05em} .pinfo{flex:1;min-width:0} .pinfo h3{font-size:.98rem;margin:0 0 2px} .pinfo .pdesc{color:var(--mut);font-size:.82rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px} .price{font-weight:900;color:var(--ink)} .buy{background:var(--grad-soft);color:#fff;border:0;border-radius:999px;padding:9px 18px;font-weight:800;font-size:.84rem;cursor:pointer;box-shadow:0 8px 18px -7px rgba(14,165,233,.6);font-family:var(--font);text-decoration:none} .ptype-tag{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:.72rem;font-weight:600;margin-bottom:4px} .category-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px} .cat-pill{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:999px;padding:6px 15px;font-size:.8rem;font-weight:700;color:var(--ink-2)} .creator-foot{text-align:center;padding:26px;color:var(--mut-2);font-size:.83rem} .empty-owner-note{background:var(--ulik-sky-tint);border:1px dashed rgba(14,165,233,.4);color:var(--ind);border-radius:14px;padding:14px;text-align:center;font-size:.9rem} /* ------------------------------------------------------ product/checkout -- */ .store-head{display:flex;align-items:center;gap:12px;margin-bottom:18px} .checkout-card{max-width:640px;margin:0 auto} .buyer-summary{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:18px} .pay-channel{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;cursor:pointer;transition:border .12s,box-shadow .12s;margin-bottom:10px} .pay-channel:hover{border-color:rgba(14,165,233,.5)} .pay-channel input{margin:0;flex:none} .pay-channel.selected{border-color:var(--ind);box-shadow:0 0 0 3px rgba(14,165,233,.14)} .pc-name{font-weight:700;font-size:.93rem;flex:1} .pc-group{color:var(--mut);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em} .pc-fee{font-size:.78rem;color:var(--mut)} /* Kotak metode bayar berlogo (v1.39): grup "Bayar instan" / "Lainnya" / "Mode uji". Radio tetap ada (bisa dipilih keyboard) tetapi disembunyikan; kotak terpilih ditandai lewat :has(input:checked) dan kelas .selected sebagai cadangan. */ .pm-grp{padding:12px 0 4px;border-top:1px solid var(--ed-line,var(--line))} .pm-grp:first-of-type{border-top:0;padding-top:4px} .pm-grp-h{display:block;font-size:.8rem;font-weight:700;color:var(--ed-mut,var(--mut));margin-bottom:9px} .pm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pm-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:80px;padding:14px 8px 10px;background:#fff;border:1.5px solid var(--ed-line,var(--line));border-radius:14px;cursor:pointer;text-align:center;transition:border .12s,box-shadow .12s} .pm-tile:hover{border-color:rgba(14,165,233,.5)} .pm-tile input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .pm-tile:has(input:focus-visible){outline:2px solid var(--ind);outline-offset:2px} .pm-tile.selected,.pm-tile:has(input:checked){border-color:var(--ind);box-shadow:0 0 0 3px rgba(14,165,233,.14);background:var(--ed-surface-2,#F5FAFF)} .pm-tile.selected::after,.pm-tile:has(input:checked)::after{content:"✓";position:absolute;top:7px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--ind);color:#fff;font-size:.68rem;font-weight:900;display:grid;place-items:center} .pm-logo{height:30px;max-width:96px;object-fit:contain} .pm-ph{width:34px;height:34px;border-radius:9px;background:var(--ulik-sky-tint,#E0F2FE);display:grid;place-items:center;color:var(--ind)} .pm-name{font-weight:700;font-size:.84rem;color:var(--ed-ink,var(--ink));line-height:1.25} .pm-note{font-size:.7rem;color:var(--ed-mut,var(--mut));line-height:1.3} .pm-tile.wide{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:14px;text-align:left;padding:16px 36px 12px 14px} .pm-tile.wide .pm-logo{height:34px;max-width:80px;flex:none} .pm-tile.wide .pm-txt{display:flex;flex-direction:column;gap:2px} .pm-badge{position:absolute;top:-9px;left:12px;background:var(--ind);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:999px} .pm-tile.pm-sim{background:#FFFBEB;border-color:#FDE68A} .pm-tile.pm-sim .pm-ph{background:#FEF3C7;color:#92400E} @media(max-width:360px){.pm-tiles{grid-template-columns:1fr}} /* Checkout SATU halaman (v1.39): kiri produk + data pembeli, kanan rincian + metode + bayar. */ .checkout-wrap.ck-wide,body.pg-checkout .checkout-wrap.ck-wide{max-width:980px} .ck-back{display:inline-flex;align-items:center;gap:6px;color:var(--ed-mut,var(--mut));font-size:.88rem;margin-bottom:8px} .ck-title{font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 16px} .ck-flash{position:static;width:auto;transform:none;margin:0 0 14px} .ck-grid{display:grid;gap:16px} @media(min-width:880px){.ck-grid{grid-template-columns:1.1fr 1fr;align-items:start}.ck-side{position:sticky;top:20px}} .ck-card{padding:20px} .ck-main .ck-card + .ck-card{margin-top:16px} .ck-h{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ed-mut-2,var(--mut-2));margin:0 0 12px} .ck-prod{display:flex;gap:14px;align-items:center} .ck-thumb{width:64px;height:64px;border-radius:13px;object-fit:cover;flex:none} .ck-prod-tx{flex:1;min-width:0} .ck-prod-tx b{display:block;line-height:1.35} .ck-prod .price{white-space:nowrap} .ck-row{display:flex;justify-content:space-between;padding:7px 0;color:var(--ed-ink-2,var(--ink-2))} .ck-free{color:var(--ok)} .ck-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ed-line,var(--line));margin:6px 0 4px;padding-top:12px;font-weight:800} .ck-total .price{font-size:1.3rem} .ck-side .form-errors,.ck-side .empty{margin-top:14px} /* tombol ringkas metode terpilih (hanya bila JavaScript aktif) */ .ck-method{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;background:var(--ed-surface-2,#F5FAFF);border:1.5px solid var(--ed-acc-line,rgba(14,165,233,.2));border-radius:14px;padding:12px 14px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border .12s,box-shadow .12s} .ck-method:hover,.ck-method:focus-visible{border-color:var(--ind);box-shadow:0 0 0 3px rgba(14,165,233,.12)} .ck-method .lg{width:64px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--ed-line,var(--line));display:grid;place-items:center;flex:none;overflow:hidden} .ck-method .lg .pm-logo{height:26px;max-width:56px} .ck-method .tx{flex:1;min-width:0} .ck-method .tx b{display:block} .ck-method .tx span{font-size:.8rem;color:var(--ed-mut,var(--mut))} .ck-method .chg{font-size:.82rem;font-weight:700;color:var(--ind);white-space:nowrap} /* daftar metode: tanpa JS tampil biasa; dengan JS (.is-modal) jadi jendela / bottom sheet */ .ck-ov{margin-top:14px} .ck-ov:not(.is-modal) .ck-mh,.ck-ov:not(.is-modal) .ck-confirm{display:none} .ck-ov.is-modal{position:fixed;inset:0;margin:0;background:rgba(15,23,42,.45);z-index:200;display:none;align-items:center;justify-content:center;padding:16px} .ck-ov.is-modal.open{display:flex} .ck-ov.is-modal .ck-modal{background:var(--ed-surface,#fff);border-radius:20px;width:100%;max-width:460px;max-height:88vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(15,23,42,.5);padding:20px} @media(max-width:600px){.ck-ov.is-modal{align-items:flex-end;padding:0}.ck-ov.is-modal .ck-modal{max-width:none;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}} .ck-mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .ck-mh h2,.skin-ed .ck-mh h2{font-family:var(--ed-serif,inherit);font-weight:600;font-size:1.35rem;line-height:1.2;margin:0} .ck-x{border:0;background:var(--ed-surface-2,#F5FAFF);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1rem;color:var(--ed-mut,var(--mut))} .ck-confirm{margin-top:14px} .ck-secure{display:flex;gap:10px;align-items:center;margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--ed-acc-soft,var(--ulik-sky-tint));font-size:.8rem;color:var(--ed-ink-2,var(--ink-2))} .ck-secure .ic{color:var(--ind);flex:none} .ck-agree{margin:14px 0} /* Nomor HP wajib untuk e-wallet (v1.39.1) */ .ph-state{font-weight:500;color:var(--ed-mut,var(--mut))} .ph-hint{display:block;margin-top:5px;font-size:.78rem;font-weight:600;line-height:1.4;color:var(--info,#0284C7)} .pm-phone{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--ed-acc-soft,var(--ulik-sky-tint));border:1px solid var(--ed-acc-line,rgba(14,165,233,.2))} .pm-phone label{display:block;font-weight:700;font-size:.9rem} .pm-phone input{margin-top:6px} .steps-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:16px} .steps-box ol{margin:10px 0 0;padding-left:22px} .steps-box li{margin:7px 0;color:var(--ink-2);font-size:.92rem} .paycode-big{background:var(--ulik-sky-tint);border:1.5px dashed rgba(14,165,233,.5);border-radius:14px;padding:14px;text-align:center;font-weight:900;font-size:1.4rem;letter-spacing:.12em;color:var(--ind);margin:12px 0} .status-hero{text-align:center;padding:34px 18px} .status-ic{width:86px;height:86px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center} .status-ic.paid{background:#D1FAE5;color:var(--ok)} .status-ic.pending{background:#FEF3C7;color:var(--warn)} .status-ic.failed,.status-ic.expired{background:#FEE2E2;color:var(--err)} .status-ic svg{width:42px;height:42px} .dl-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px} .dl-row .dl-name{flex:1;font-weight:600;font-size:.93rem;word-break:break-all} .dl-row .dl-size{color:var(--mut);font-size:.78rem} .delivery-content{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;white-space:pre-wrap;font-size:.95rem;color:var(--ink-2);margin-bottom:16px} /* ------------------------------------------------------------------ app --- */ .app-shell{display:flex;min-height:100vh} .app-side{width:252px;flex:none;background:linear-gradient(175deg,#075985 0%,#0369A1 60%,#0C4A6E 100%);color:var(--ulik-sky-tint); display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto} .side-head{padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,.12)} .side-tag{display:block;margin-top:2px;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ulik-sky-border)} .side-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:2px} .sn{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--ulik-sky-border);font-weight:600;font-size:.9rem} .sn:hover{background:rgba(255,255,255,.09);color:#fff;opacity:1} .sn.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .side-foot{border-top:1px solid rgba(255,255,255,.12);padding:12px 10px;display:flex;flex-direction:column;gap:2px} .app-main{flex:1;min-width:0;display:flex;flex-direction:column} .app-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:14px 22px; background:rgba(240,249,255,.82);backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid var(--line)} .app-top-title{font-weight:800;letter-spacing:-.01em} .app-top-user{margin-left:auto;display:flex;align-items:center;gap:10px} .atu-name{font-weight:600;font-size:.9rem} .drawer-btn{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px} .drawer-btn span{width:22px;height:2.4px;border-radius:3px;background:var(--ink)} .app-content{padding:22px;max-width:1200px;width:100%;margin:0 auto} .side-head{position:relative} .side-close{display:none} .drawer-backdrop{display:none} @media(max-width:900px){ .app-side{position:fixed;left:0;top:0;bottom:0;z-index:100;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 60px rgba(15,23,42,.3)} .drawer-toggle:checked ~ .app-side{transform:none} .drawer-btn{display:inline-flex} .app-side{width:280px} /* backdrop: tap area outside the sidebar to close the drawer */ .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(15,10,40,.55);backdrop-filter:blur(2px); z-index:95;opacity:0;pointer-events:none;transition:opacity .18s ease;cursor:pointer} .drawer-toggle:checked ~ .drawer-backdrop{opacity:1;pointer-events:auto} /* close (x) button inside the drawer header */ .side-close{display:inline-flex;position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px; align-items:center;justify-content:center;color:#E0F2FE;cursor:pointer;background:rgba(255,255,255,.08)} .side-close svg{width:16px;height:16px} .side-close:hover{background:rgba(255,255,255,.18);color:#fff} } @media(min-width:901px){ .drawer-toggle{display:none !important} .side-close,.drawer-backdrop{display:none !important} } /* app content pieces */ .grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px} .stat-card{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:18px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:0 8px 22px -14px rgba(14,165,233,.35);backdrop-filter:blur(16px)} .stat-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;background:var(--grad-soft)} .stat-val{font-size:1.28rem;font-weight:900;letter-spacing:-.02em} .stat-label{color:var(--mut);font-size:.8rem;font-weight:600} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 16px;text-align:left;max-width:none} .sec-title{font-size:1.15rem;margin:0} .sec-sub{margin:2px 0 0;font-size:.85rem} .panel{background:var(--glass);border:1px solid rgba(255,255,255,.8);border-radius:18px;padding:clamp(16px,3vw,22px);box-shadow:0 8px 26px -16px rgba(14,165,233,.4);margin-bottom:22px;backdrop-filter:blur(16px) saturate(180%);overflow:hidden} .panel .tblwrap{margin:14px -22px -22px;overflow-x:auto} .tbl{width:100%;border-collapse:collapse;font-size:.89rem} .tbl th{text-align:left;color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl td{padding:12px 16px;border-bottom:1px solid rgba(15,23,42,.06);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tr:hover td{background:rgba(14,165,233,.03)} .badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.74rem;font-weight:800;white-space:nowrap} .badge-ok{background:#D1FAE5;color:#065F46} .badge-warn{background:#FEF3C7;color:#92400E} .badge-err{background:#FEE2E2;color:#991B1B} .badge-info{background:#E0F2FE;color:#075985} .badge-muted{background:#F1F5F9;color:var(--ulik-slate-muted)} .empty{text-align:center;color:var(--mut);padding:44px 16px} .empty-ic{display:flex;justify-content:center;color:#94A3B8;margin-bottom:10px} .quick-actions{display:flex;gap:10px;flex-wrap:wrap} /* product grid in dash */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px} .pgrid-card{background:var(--glass);border:1px solid rgba(255,255,255,.85);border-radius:18px;overflow:hidden;box-shadow:0 8px 22px -16px rgba(14,165,233,.45);display:flex;flex-direction:column} .pgrid-thumb{height:118px;object-fit:cover;width:100%;background:var(--ulik-sky-tint)} .pgrid-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .pgrid-body h3{margin:0;font-size:.98rem} .pgrid-actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap} .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px} .toolbar .spacer{flex:1} .filter-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .ftab{padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.6);color:var(--mut);font-size:.84rem;font-weight:700} .ftab.active{background:var(--ink);color:#fff} .mini-avatars{display:flex;gap:-8px} .sort-ctrl{display:flex;gap:6px} .sort-ctrl form{display:inline} .cat-chip{font-size:.72rem;background:var(--ulik-sky-tint);color:var(--ind);border-radius:999px;padding:2px 10px;font-weight:700} /* errors */ .err-wrap{display:flex;align-items:center;justify-content:center;min-height:72vh} .err-card{text-align:center;background:var(--glass);border:1px solid rgba(255,255,255,.85);border-radius:24px;padding:48px 30px;max-width:460px;box-shadow:var(--shadow-lg)} .err-code{font-size:4rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* tables responsive on mobile */ @media(max-width:720px){ .tbl thead{display:none} .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%} .tbl tr{border-bottom:1px solid var(--line);padding:8px 4px} .tbl td{border:0;padding:5px 14px} .tbl td:before{content:attr(data-label);display:block;font-size:.68rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;font-weight:700} .card-td{display:none !important} } .mobile-hide{display:inline} @media(max-width:720px){.mobile-hide{display:none}} /* misc */ .flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .rowline{display:flex;align-items:center;gap:10px} .divider{height:1px;background:var(--line);margin:18px 0} .thumb-64{width:64px;height:64px;object-fit:cover;border-radius:12px;background:var(--ulik-sky-tint)} .avatar{object-fit:cover;border-radius:50%;display:inline-block} .avatar-ph{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.4rem;border-radius:50%} .pos-rel{position:relative} .copy-field{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 14px} .copy-field input{border:0 !important;outline:none;margin:0;padding:4px 0;background:transparent} .copy-field button{border:0;border-radius:8px;background:var(--ulik-sky-tint);color:var(--ind);font-weight:700;padding:8px 14px;cursor:pointer;font-family:var(--font)} .mini-note{font-size:.78rem;color:var(--mut-2)} .err-ic{color:var(--err)} h1 .subtitle,.muted-lg{font-weight:500} .hero-emoji{font-size:2rem} /* ========================================================================== Creator page themes + link manager polish (ULik.me) ========================================================================== */ /* --- token tema creator --------------------------------------------------- Semua token ditulis INLINE di .creator-shell oleh Themes::shellStyle(), jadi halaman creator tidak lagi bergantung pada blok CSS per-tema di file ini. Yang tersisa di sini hanya NILAI CADANGAN (kalau JS/atribut style hilang) dan GAYA STRUKTURAL yang dipakai bersama semua tema. */ .creator-shell{ --c-page:linear-gradient(180deg,#FAF8FF 0%,#F1EDFF 55%,#F7F5FF 100%); --c-card:rgba(255,255,255,.92); --c-card-border:rgba(255,255,255,.98); --c-ink:#1F1B3A; --c-ink2:#3A3560; --c-sub:#635F82; --c-line:rgba(31,27,58,.10); --c-acc:linear-gradient(120deg,#4F46E5 0%,#8B5CF6 100%); --c-acc-ink:#fff; --c-ring:conic-gradient(from 210deg,#4F46E5,#A855F7,#EC4899,#4F46E5); --c-pill-bg:rgba(255,255,255,.85); --c-pill-ink:#3A3560; --c-glow:rgba(79,70,229,.28); --c-rad:16px; --c-rad-sm:13px; --c-head-font:var(--font); color:var(--c-ink);min-height:100vh; } /* kartu link: radius & bentuk dari token tema */ .creator-shell .btnlink{border-radius:var(--c-btn-rad,var(--c-rad))} .creator-shell .bl-ic{border-radius:var(--c-rad-sm)} .creator-shell .pcard{border-radius:var(--c-btn-rad,calc(var(--c-rad) + 2px))} /* bentuk "solid": kartu ber-border tegas + bayangan keras (neo brutal) */ .creator-shell[data-theme="neo"] .btnlink, .creator-shell[data-theme="neo"] .pcard, .creator-shell[data-theme="neo"] .pb-text{ box-shadow:4px 4px 0 var(--c-ink);border-width:2px} .creator-shell[data-theme="neo"] .btnlink:hover, .creator-shell[data-theme="neo"] .pcard-link:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--c-ink)} .creator-shell[data-theme="neo"] .avatar-ring{border:2px solid var(--c-ink);box-shadow:4px 4px 0 var(--c-ink);padding:4px} .creator-shell[data-theme="neo"] .linkstack{border-width:2px;box-shadow:4px 4px 0 var(--c-ink)} /* bentuk "outline": kartu rata, hanya garis tipis `.pb-text` IKUT di sini karena blok Text sekarang berkartu (lihat aturan dasarnya) — tanpa ini kelima tema rata akan memberi blok teks sebuah bayangan, padahal ciri khas tema-tema itu justru TANPA bayangan. */ .creator-shell[data-theme="mono"] .btnlink, .creator-shell[data-theme="mono"] .pcard, .creator-shell[data-theme="mono"] .pb-text, .creator-shell[data-theme="snow"] .btnlink, .creator-shell[data-theme="snow"] .pcard, .creator-shell[data-theme="snow"] .pb-text, .creator-shell[data-theme="ink"] .btnlink, .creator-shell[data-theme="ink"] .pcard, .creator-shell[data-theme="ink"] .pb-text, .creator-shell[data-theme="vapor"] .btnlink, .creator-shell[data-theme="vapor"] .pcard, .creator-shell[data-theme="vapor"] .pb-text, .creator-shell[data-theme="terminal"] .btnlink, .creator-shell[data-theme="terminal"] .pcard, .creator-shell[data-theme="terminal"] .pb-text{box-shadow:none} /* nama creator mengikuti token font tema (serif/sans/mono) */ .creator-shell .creator-head h1{font-family:var(--c-head-font)} .creator-shell .creator-foot,.creator-shell .creator-bio{font-family:var(--font)} /* --- make the creator page components theme-aware ----------------------- */ .creator-shell .creator-handle,.creator-shell .creator-loc{color:var(--c-sub)} .creator-shell .creator-bio{color:var(--c-ink2)} .creator-shell .avatar-ring{background:var(--c-ring)} .creator-shell .btnlink{background:var(--c-btn-bg,var(--c-card)); border-width:var(--c-btn-bw,1px);border-style:solid; border-color:var(--c-btn-border,var(--c-card-border));color:var(--c-btn-ink,var(--c-ink)); box-shadow:var(--c-btn-shadow,0 8px 22px -10px var(--c-glow))} .creator-shell .btnlink:hover{box-shadow:var(--c-btn-shadow-h,0 14px 30px -10px var(--c-glow))} .creator-shell .bl-sub{color:var(--c-sub)} .creator-shell .bl-arrow{color:var(--c-sub)} .creator-shell .pcard{background:var(--c-card);border:1px solid var(--c-card-border);box-shadow:0 10px 28px -12px var(--c-glow)} .creator-shell .pinfo .pdesc{color:var(--c-sub)} .creator-shell .price{color:var(--c-ink)} .creator-shell .pthumb-ph,.creator-shell .buy{background:var(--c-acc);color:var(--c-acc-ink)} .creator-shell .sec-div{color:var(--c-ink2)} .creator-shell .sec-div:before{background:linear-gradient(90deg,transparent,var(--c-line))} .creator-shell .sec-div:after{background:linear-gradient(90deg,var(--c-line),transparent)} .creator-shell .cat-pill{background:var(--c-pill-bg);border:1px solid var(--c-line);color:var(--c-pill-ink)} .creator-shell .creator-foot{color:var(--c-sub)} .creator-shell .mini-note,.creator-shell .muted{color:var(--c-sub)} .creator-shell .socials{color:inherit} /* ========================================================================== APPEARANCE SYSTEM (Design) — Fase 2 -------------------------------------------------------------------------- SEMUA nilai di bawah ini berasal dari token `--c-*` yang ditulis INLINE di `.creator-shell` oleh `Core/Appearance.php` (preset tema + override user). Tidak ada satu pun aturan di sini yang mengubah tampilan bila creator belum mengatur apa pun: setiap var punya fallback = perilaku lama, dan perilaku yang butuh markup/atribut hanya menyala lewat `data-*` yang juga hanya ditulis bila fiturnya benar-benar dipakai. Blok ini SENGAJA diletakkan SEBELUM CSS preview HP (di bawah) supaya aturan preview yang lebih spesifik tetap menang tanpa perlu menduplikasi nilai. ========================================================================== */ /* --- text: skala. 1 = ukuran asli, jadi calc(... × 1) == nilai lama --------- */ .creator-shell{--c-text-scale:1} .creator-shell .creator-head h1{font-size:calc(1.5rem * var(--c-text-scale))} .creator-shell .creator-handle{font-size:calc(.92rem * var(--c-text-scale))} .creator-shell .creator-loc{font-size:calc(.85rem * var(--c-text-scale))} .creator-shell .creator-bio{font-size:calc(.95rem * var(--c-text-scale))} .creator-shell .bl-title{font-size:calc(.98rem * var(--c-text-scale))} .creator-shell .bl-sub{font-size:calc(.76rem * var(--c-text-scale))} .creator-shell .ptype-tag{font-size:calc(.72rem * var(--c-text-scale))} .creator-shell .pinfo h3{font-size:calc(.98rem * var(--c-text-scale))} .creator-shell .pinfo .pdesc{font-size:calc(.82rem * var(--c-text-scale))} .creator-shell .price{font-size:calc(1rem * var(--c-text-scale))} .creator-shell .pb-text{font-size:calc(1rem * var(--c-text-scale)); /* Blok Text = KARTU, memakai token tema yang SAMA dengan kartu lain (`.pcard`, `.pbimg`) — bukan gaya khusus halaman publik. Sebelum perbaikan ini container-nya tidak pernah ada, padahal aturan tema `neo` sudah lama mengasumsikan `.pb-text` berkartu (`border-width:2px` + bayangan keras), dan PRATINJAU HP memberi kartu putih hardcoded (`#fff` + `var(--line)`) → blok teks tampak BEDA antara preview dan halaman publik. Sekarang keduanya memakai aturan ini. */ background:var(--c-card);border:1px solid var(--c-card-border); border-radius:var(--c-rad);box-shadow:0 10px 28px -12px var(--c-glow); color:var(--c-ink2);padding:14px 16px;overflow-wrap:anywhere} /* --- blok TEXT berformat (Fase T1) --------------------------------------- Styling HANYA untuk isi blok Text (kelas .pb-text, dipakai halaman publik DAN pratinjau HP). Ditambahkan supaya daftar & paragraf hasil editor tampil rapi; tidak ada aturan global yang berubah. */ .creator-shell .pb-text p{margin:0 0 .55em} .creator-shell .pb-text p:last-child{margin-bottom:0} .creator-shell .pb-text ul,.creator-shell .pb-text ol{margin:.35em 0 .55em;padding-left:1.35em} .creator-shell .pb-text ul:last-child,.creator-shell .pb-text ol:last-child{margin-bottom:0} .creator-shell .pb-text li{margin:.12em 0} .creator-shell .pb-text li::marker{color:var(--c-acc-solid,var(--c-acc))} .creator-shell .pb-text s,.creator-shell .pb-text strike{text-decoration:line-through} .creator-shell .pb-text u{text-decoration:underline} .creator-shell .pb-text span[style]{overflow-wrap:anywhere} .creator-shell .pb-text ul ul,.creator-shell .pb-text ol ol{margin-bottom:0} /* --- blok LINK bergambar (opsional) -------------------------------------- Hanya LAYOUT + gambar: seluruh warna/radius/bayangan tetap dari token tema dan dari aturan `.btnlink` yang sudah ada (termasuk override Buttons), jadi tidak ada sistem desain baru. Link tanpa gambar TIDAK memakai kelas ini sama sekali. */ .creator-shell .btnlink.bl-hasimg{align-items:center;padding:10px} .creator-shell .bl-img{width:76px;height:76px;flex:none;object-fit:cover;display:block; border-radius:var(--c-rad-sm);background:var(--c-pill-bg)} .creator-shell .bl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .creator-shell .bl-info .bl-title{font-size:calc(.98rem * var(--c-text-scale))} .creator-shell .bl-info .bl-sub{font-size:calc(.76rem * var(--c-text-scale))} /* tanda "gambar" pada baris blok di My Page */ .block-pic{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700; color:var(--ind);background:var(--ulik-sky-tint);border-radius:999px;padding:1px 8px;margin-top:2px;width:max-content} .block-pic .ic{width:12px;height:12px} /* --- blok GAMBAR (tipe `image`) ------------------------------------------ Memakai token tema yang sama (.creator-shell) supaya ikut tema creator — bukan sistem desain baru. Gambar WAJIB responsif: lebar 100% + tinggi auto + wadah `overflow:hidden`, sehingga tidak pernah menimbulkan gulir horizontal walau berkasnya sangat lebar/panjang. */ .creator-shell .pbimg{display:block;background:var(--c-card);border:1px solid var(--c-card-border); border-radius:var(--c-rad);overflow:hidden;box-shadow:0 10px 28px -12px var(--c-glow);color:var(--c-ink); text-decoration:none;max-width:100%} .creator-shell a.pbimg{transition:transform .14s ease,box-shadow .14s} .creator-shell a.pbimg:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px var(--c-glow);opacity:1} .creator-shell .pbimg-img{display:block;width:100%;height:auto;max-width:100%} .creator-shell .pbimg-cap{display:block;padding:10px 14px;font-size:calc(.86rem * var(--c-text-scale)); color:var(--c-sub);line-height:1.4;word-break:break-word} .creator-shell a.pbimg .pbimg-cap{color:var(--c-ink)} .creator-shell .creator-foot{font-size:calc(.83rem * var(--c-text-scale))} /* font isi hanya bila creator memilih sendiri (data-font) */ .creator-shell[data-font="1"]{font-family:var(--c-font-body)} /* preview HP memakai kelas .phone-name (bukan .creator-head h1) — tanpa aturan ini Page Preview tidak mengikuti font judul yang dipilih, padahal halaman publiknya mengikuti. Disamakan supaya pratinjau == halaman publik. */ .creator-shell .phone-name{font-family:var(--c-head-font)} /* --- wallpaper gambar ------------------------------------------------------- Satu lapisan di belakang konten, memakai pseudo-element supaya TIDAK perlu markup tambahan di renderer. Hanya aktif untuk wallpaper berupa GAMBAR; wallpaper preset/warna memakai longhand background inline di elemen shell. Lapisan ::after = peredup (dim). `overflow:hidden` menahan efek blur supaya tidak menambah area gulir halaman. */ .creator-shell{position:relative;z-index:0} .creator-shell[data-wall="image"]{overflow:hidden} .creator-shell[data-wall="image"]::before, .creator-shell[data-wall="image"]::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none} .creator-shell[data-wall="image"]::before{background-image:var(--c-wall-img); background-size:var(--c-wall-size,cover);background-position:center; background-repeat:var(--c-wall-repeat,no-repeat); filter:blur(var(--c-wall-blur,0px));transform:scale(1.06)} .creator-shell[data-wall="image"]::after{background:var(--c-wall-dim,transparent)} /* --- sticker: dekorasi sudut, tidak pernah menghalangi klik ----------------- LAPISAN: `.creator-stickers` = lapisan dekorasi (z-index 1) DI ATAS latar/wallpaper (yang digambar oleh ::before/::after dengan z-index -1) tetapi DI BAWAH konten (`.creator-head`/`.creator-body` berada di z-index otomatis dalam konteks yang sama, dan lapisan ini `pointer-events:none` sehingga klik selalu tembus ke konten). z-index tiap stiker ditulis eksplisit dari urutan daftar (pb_creator_stickers), jadi stiker terakhir di daftar = paling atas. ANTI-OVERFLOW: semua anchor memakai jarak dari tepi (left/right), bukan lebar tetap, sehingga tidak pernah melebihi lebar layar — diuji di 320/360/390px. */ .creator-stickers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .cstick{position:absolute;font-size:var(--c-stick-size,44px);line-height:1;user-select:none; max-width:calc(100% - 28px)} .cstick img{width:var(--c-stick-size,44px);height:auto;display:block;max-width:100%} .cstick-tl{left:14px;top:14px} .cstick-tr{right:14px;top:14px} /* tengah: translateY(-50%) supaya BENAR-BENAR di tengah vertikal (dulu hanya top:50% tanpa pergeseran, sehingga stiker tampak turun setengah tingginya) */ .cstick-ml{left:14px;top:50%;transform:translateY(-50%)} .cstick-mr{right:14px;top:50%;transform:translateY(-50%)} .cstick-bl{left:14px;bottom:78px} .cstick-br{right:14px;bottom:78px} /* layar sangat sempit: rapatkan jarak tepi supaya dekorasi tidak menutupi konten */ @media(max-width:380px){ .cstick-tl,.cstick-ml,.cstick-bl{left:8px} .cstick-tr,.cstick-mr,.cstick-br{right:8px} } /* --- footer kustom (teks + tautan) ----------------------------------------- */ .creator-foot[data-foot="left"]{text-align:left} .cfoot-custom{margin-bottom:6px} .cfoot-text{margin:0} .cfoot-links{margin:4px 0 0} .cfoot-sep{opacity:.5;margin:0 6px} .cfoot-links a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* --- dashboard: link manager ------------------------------------------- */ .linkcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:12px} .linkcard .soc-ic{width:36px;height:36px;border-radius:11px;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 14px -6px rgba(15,23,42,.35)} .linkcard .soc-ic svg{width:19px;height:19px} .linkcard .click-chip,.block-flags .click-chip{display:inline-flex;align-items:center;gap:4px;background:var(--ulik-sky-tint);color:var(--ind);border-radius:999px;padding:3px 9px;font-size:.74rem;font-weight:800;white-space:nowrap;flex:none} .linkcard .sort-ctrl form{display:inline} .rowedit{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px} .rowedit summary{list-style:none;cursor:pointer;font-size:.8rem;font-weight:700;color:var(--ind);display:inline-flex;align-items:center;gap:5px;padding:4px 2px} .rowedit summary::-webkit-details-marker{display:none} .rowedit summary .ic{vertical-align:-2px} .addrow{margin-top:14px;border:1.5px dashed rgba(14,165,233,.35);border-radius:16px;padding:10px 14px;background:rgba(255,255,255,.55)} .addrow summary{list-style:none;cursor:pointer;font-weight:800;color:var(--ind);font-size:.86rem} .addrow summary::-webkit-details-marker{display:none} /* --- dashboard: theme picker (halaman Design) --------------------------- */ .theme-group{margin-bottom:14px} .theme-group-t{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--mut-2);margin:0 0 8px} .theme-group-n{letter-spacing:0;font-size:.68rem;font-weight:700;color:var(--ind); background:var(--ulik-sky-tint);border-radius:999px;padding:1px 7px} .theme-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin:0} .theme-opt{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;cursor:pointer; border:2px solid var(--line);border-radius:16px;padding:9px 8px;background:#fff;transition:border .15s,box-shadow .15s} .theme-opt:hover{border-color:rgba(14,165,233,.45)} .theme-opt:has(input:checked){border-color:var(--ind);box-shadow:0 0 0 3px rgba(14,165,233,.14)} .theme-opt input{position:absolute;opacity:0;pointer-events:none} .theme-opt:has(input:focus-visible){outline:2px solid var(--ind);outline-offset:2px} /* Mini-preview NYATA per tema: latar (`page`) + token `--c-*` dari tema itu sendiri (ditulis inline oleh Themes::cssVars()), jadi bentuk/warna yang tampil di kotak ini berasal dari nilai yang sama dengan halaman publik. */ .ts-page{position:relative;width:100%;height:64px;border-radius:10px;overflow:hidden; border:1px solid rgba(15,23,42,.08);display:block} .ts-ring{position:absolute;left:8px;top:8px;width:17px;height:17px;border-radius:50%; background:var(--c-ring,var(--ulik-sky-main));box-shadow:0 0 0 2.5px rgba(255,255,255,.85)} .ts-card{position:absolute;left:7px;right:7px;bottom:6px;height:27px;border-radius:var(--c-rad-sm,8px); background:var(--c-card,rgba(255,255,255,.92));border:1px solid var(--c-card-border,rgba(0,0,0,.08)); display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 5px} .ts-line{height:3px;border-radius:2px;width:72%;background:var(--c-ink,#333);opacity:.5} .ts-line.w2{width:46%;opacity:.3} .ts-btn{position:absolute;right:11px;bottom:11px;width:24px;height:8px;border-radius:4px; background:var(--c-acc,var(--ulik-sky-main));box-shadow:0 1px 3px var(--c-glow,rgba(0,0,0,.2))} .ts-name{font-size:.76rem;font-weight:800;color:var(--ink-2)} .ts-desc{font-size:.64rem;color:var(--mut-2);line-height:1.25;margin-top:-2px} .mt-12{margin-top:12px} /* logout button in sidebar renders like its sibling nav items */ .sn-form{margin:0;padding:0 10px} .sn-btn{width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer;margin:0} .sn-btn:hover{color:#fff} /* payout / fee notes */ .payout-note{background:#ECFDF5;border:1px solid #a7f3d0;color:#065f46;border-radius:14px;padding:12px 14px;margin-top:14px;font-size:.86rem;line-height:1.5} .fee-note{background:#F0F9FF;border:1px dashed rgba(14,165,233,.4);color:var(--ink-2);border-radius:12px;padding:10px 12px;font-size:.84rem;display:flex;gap:8px;align-items:flex-start} .fee-note .ic{flex:none;margin-top:2px;color:var(--ind)} /* Rincian potongan & jumlah bersih di halaman Penarikan (dihitung real-time) */ .fee-calc{background:#F0F9FF;border:1px dashed rgba(14,165,233,.4);border-radius:14px;padding:12px 14px} .fee-calc-rows{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-top:10px; padding-top:10px;border-top:1px dashed rgba(14,165,233,.35);font-size:.86rem} .fee-calc-rows span{color:var(--mut)} .fee-calc-rows b{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .fee-calc-rows .is-total{color:var(--ink);font-weight:800;font-size:.92rem} .fee-calc-rows b.is-total{color:#047857} .fee-calc-note{margin:10px 0 0;font-size:.8rem;color:var(--mut);line-height:1.5} .fee-calc-note.is-bad{color:#B91C1C;font-weight:700} /* --- creator page: product card is a link to detail (no direct buy) ------- */ .pcard-link{text-decoration:none;color:inherit;transition:transform .14s ease,box-shadow .14s} .pcard-link:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(14,165,233,.35)} .pcard-link h3{transition:color .12s} .pcard-link:hover h3{color:var(--ind)} .view-detail{display:inline-flex;align-items:center;background:var(--ulik-sky-tint);color:var(--ind);border-radius:999px; padding:8px 16px;font-weight:800;font-size:.82rem;white-space:nowrap} .pcard-link:hover .view-detail{background:var(--grad-soft);color:#fff} /* --- product detail page -------------------------------------------------- */ .product-detail{max-width:680px} .pd-head{display:flex;gap:16px;align-items:center;margin:14px 0 18px} .pd-thumb{width:92px;height:92px;border-radius:18px;object-fit:cover;flex:none} .pd-thumb-ph{display:flex;align-items:center;justify-content:center;color:#fff;background:var(--grad-soft)} .pd-short{background:#F0F9FF;border:1px solid rgba(14,165,233,.18);border-radius:16px;padding:16px 18px;margin-top:4px} .pd-short b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ind);margin-bottom:6px} .pd-short p{margin:0;color:var(--ink-2);font-size:.98rem} .pd-desc b{display:block;font-size:.95rem;margin-bottom:8px} .pd-buy{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap} .pd-price{font-size:1.8rem;font-weight:900;color:var(--ink)} /* locked (permanent) field — e.g. username in Profile */ .input-prefix.is-locked{background:#F8FAFC;border-color:var(--line);opacity:.85} .input-prefix.is-locked input{color:var(--mut);cursor:not-allowed} .input-prefix.is-locked input[disabled]{background:transparent} /* --- site footer: link columns + CS block -------------------------------- */ .foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;flex:1;min-width:260px} .foot-col{display:flex;flex-direction:column;gap:8px} .foot-col b{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)} .foot-col a{color:var(--mut);font-size:.9rem} .foot-col a:hover{color:var(--ind)} .foot-cs{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:.86rem} .foot-cs b{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ind)} .foot-cs a{color:var(--ink-2);display:inline-flex;align-items:center;gap:7px} .foot-cs a:hover{color:var(--ind)} .foot-cs .ic{width:15px;height:15px} .foot-cs-h{color:var(--mut-2);font-size:.8rem} @media(max-width:640px){.foot-in{flex-direction:column;gap:20px}.foot-cols{width:100%}} /* price clarity helper */ .price-note{font-size:.76rem;color:var(--mut-2)} /* --- QRIS native payment (status order) ---------------------------------- */ .qris-wrap{display:flex;justify-content:center;margin:14px 0 6px} /* QRIS Laboon (v1.41): nominal akhir yang harus dibayar persis */ .lb-amount{margin:10px auto 4px;padding:10px 14px;border-radius:14px;background:var(--ed-acc-soft,var(--ulik-sky-tint));border:1px solid var(--ed-acc-line,rgba(14,165,233,.2));max-width:340px} /* Bantuan "sudah bayar, produk belum terkirim" (v1.41.2) */ .paid-help{margin-top:16px;background:var(--ed-surface-2,#F8FAFC);border:1px solid var(--ed-line,var(--line));border-radius:14px;padding:14px 16px;text-align:left} .paid-help summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:.92rem} .paid-help summary::-webkit-details-marker{display:none} .paid-help .ph-chev{transition:transform .2s;color:var(--mut-2);flex:none} .paid-help[open] .ph-chev{transform:rotate(180deg)} .paid-help .ph-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem} .paid-help .ph-dot{width:28px;height:28px;border-radius:9px;background:var(--ulik-sky-tint,#E0F2FE);color:#0284C7;display:flex;align-items:center;justify-content:center;flex:none;font-weight:800} .paid-help ol{margin:12px 0 4px;padding-left:20px;font-size:.86rem;line-height:1.6} .paid-help ol li{margin-bottom:4px} .paid-help .ph-text{margin:8px 0 0;font-size:.86rem;line-height:1.6} .paid-help .ph-ref{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--ed-line,var(--line));border-radius:10px;padding:8px 10px;margin:10px 0;font-size:.82rem} .paid-help .ph-ref .mono{font-weight:700;overflow-wrap:anywhere} .paid-help .ph-copy{font-size:.75rem;font-weight:700;color:#0284C7;background:none;border:0;cursor:pointer;flex:none;padding:4px} .paid-help .ph-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px} .paid-help .btnlink{padding:10px 12px} .paid-help .btnlink .bl-ic{width:36px;height:36px;border-radius:11px} .paid-help .btnlink svg{width:19px;height:19px} .paid-help .ph-foot{font-size:.76rem;color:var(--mut);margin:10px 0 0} .paid-help.is-strong{background:#FFF7ED;border-color:#FED7AA} .paid-help.is-strong .ph-dot{background:#FFEDD5;color:#EA580C} .paid-help.is-quiet{background:none;border:0;padding:0} .paid-help.is-quiet summary{justify-content:center;font-weight:600;font-size:.84rem;color:var(--mut)} .paid-help.is-quiet .ph-body{margin-top:10px} .qris-img{width:min(320px,78vw);height:auto;background:#fff;border:1px solid var(--line);border-radius:18px; padding:12px;box-shadow:0 12px 30px -14px rgba(14,165,233,.35)} .pay-countdown{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:#FEF3C7;border:1px dashed #F59E0B; color:#92400E;border-radius:999px;padding:7px 16px;font-size:.86rem;font-weight:600} .pay-countdown b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;letter-spacing:.04em} .pay-countdown.expired{background:#FEE2E2;border-color:#DC2626;color:#991B1B} /* --- inline confirm bar (menggantikan window.confirm yang diblokir di HP) -- */ /* Bottom-sheet: selalu terjangkau & tidak pernah terjepit di form yang sempit */ .confirm-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:9999; display:flex;align-items:center; gap:8px;flex-wrap:wrap;padding:12px 14px;background:#FEF2F2;border:1px solid #FECACA;border-radius:14px; box-shadow:0 18px 44px -12px rgba(15,23,42,.45);max-width:560px;margin:0 auto;animation:cfmIn .16s ease} @keyframes cfmIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} .confirm-msg{flex:1;min-width:150px;font-size:.86rem;color:#991B1B;font-weight:600} .confirm-bar .btn{flex:none;white-space:nowrap} /* --- galeri produk admin (maks 4) ---------------------------------------- */ .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px} .gal-item{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--ulik-sky-tint)} .gal-item img{width:100%;height:88px;object-fit:cover;display:block} .gal-item.is-primary{border-color:var(--ind);box-shadow:0 0 0 2px rgba(14,165,233,.2)} .gal-tag{position:absolute;left:6px;top:6px;background:var(--grad-soft);color:#fff;font-size:.66rem;font-weight:800; border-radius:999px;padding:2px 8px} .gal-del{position:absolute;right:5px;top:5px;width:30px;height:30px;padding:0;display:flex;align-items:center; justify-content:center;background:rgba(255,255,255,.95);border-radius:10px;color:#B91C1C; box-shadow:0 2px 8px rgba(15,23,42,.28);z-index:3} .gal-del svg,.gal-del .ic{width:15px;height:15px} .gal-del:hover{background:#FEE2E2;color:#7F1D1D} /* --- carousel gambar di halaman produk publik ---------------------------- */ .product-detail .pd-gallery{position:relative;margin:calc(-1 * clamp(20px,4vw,36px));margin-bottom:14px} .product-detail .pd-gallery .pd-viewport{border-radius:var(--radius-lg) var(--radius-lg) 0 0} .pd-gallery{position:relative;margin:14px 0 6px} .pd-viewport{overflow:hidden;border-radius:18px;background:var(--ulik-sky-tint);touch-action:pan-y; cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} .pd-viewport.is-drag{cursor:grabbing} .pd-viewport:focus-visible{outline:2px solid var(--ind);outline-offset:2px} .pd-track{display:flex;will-change:transform} .pd-slide{flex:0 0 100%;margin:0;display:flex;align-items:center;justify-content:center; background:#fff;min-height:200px} .pd-slide img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block; pointer-events:none;-webkit-user-drag:none;background:#fff} .pd-nav{position:absolute;top:42%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0; background:rgba(15,23,42,.5);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex; align-items:center;justify-content:center;backdrop-filter:blur(6px);z-index:2} .pd-nav.prev{left:10px}.pd-nav.next{right:10px} .pd-nav:hover{background:rgba(15,23,42,.75)} .pd-dots{display:flex;gap:7px;justify-content:center;padding:10px 0 2px} .pd-count{position:absolute;right:12px;top:12px;background:rgba(15,23,42,.55);color:#fff;font-size:.72rem; font-weight:700;border-radius:999px;padding:3px 10px;backdrop-filter:blur(6px);z-index:2} .pd-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(15,23,42,.22);cursor:pointer;padding:0} .pd-dot.active{background:var(--ind);width:22px;border-radius:999px} @media(max-width:560px){.pd-nav{width:36px;height:36px;font-size:1.3rem}} /* editor: atur urutan gambar (drag) */ .gal-sort{margin-top:12px;border:1px dashed rgba(14,165,233,.35);border-radius:14px;padding:10px 14px;background:rgba(255,255,255,.6)} .gal-sort summary{cursor:pointer;font-weight:800;color:var(--ind);font-size:.86rem;list-style:none} .gal-sort summary::-webkit-details-marker{display:none} .gal-sort-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .gal-sort-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line); border-radius:12px;padding:8px 10px;cursor:grab} .gal-sort-item.is-drag{opacity:.5;border-style:dashed;cursor:grabbing} .gal-handle{color:var(--mut-2);font-size:1rem;letter-spacing:-2px;cursor:grab} .gal-sort-item img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;pointer-events:none} .gal-sort-item .mini-note{flex:1} /* tombol ★ jadikan utama + hapus gambar (editor) */ .gal-star{position:absolute;left:5px;bottom:5px;width:30px;height:30px;border:0;border-radius:10px;cursor:pointer; background:rgba(255,255,255,.95);color:#D97706;font-size:15px;line-height:1;display:flex;align-items:center; justify-content:center;box-shadow:0 2px 8px rgba(15,23,42,.28);z-index:3} .gal-star:hover{background:#FEF3C7;color:#92400E} .gal-item.is-primary .gal-star{display:none} /* hint rasio gambar produk */ .gal-hint{display:flex;gap:8px;align-items:flex-start;margin:8px 0 10px;padding:9px 12px; background:var(--ulik-sky-tint);border:1px dashed rgba(14,165,233,.4);border-radius:12px;font-size:.8rem;color:var(--ink-2);line-height:1.5} .gal-hint .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--ind)} /* pesan "urutan belum disimpan" di editor gambar */ .gal-unsaved{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;padding:9px 12px; background:#FEF3C7;border:1px solid #FCD34D;border-radius:12px;font-size:.82rem;color:#92400E;font-weight:600} .gal-unsaved .ic{width:15px;height:15px;flex:none;margin-top:2px} /* ========================================================================== FORM PRODUK SATU HALAMAN (editor produk) Semua komponen produk (informasi, harga, deskripsi, gambar, file, link) ada di SATU form; panel Aksi/Publikasikan berada di kolom kanan DI LUAR form (nested form = HTML tidak valid, browser memecah DOM-nya). ========================================================================== */ .prod-edit{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start} .prod-form{min-width:0} .prod-side{min-width:0;display:flex;flex-direction:column;gap:20px} .prod-side .panel{margin-bottom:0} .pf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap; padding-bottom:14px;border-bottom:1px solid var(--line)} .pf-sec{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--line)} .pf-sec>b{font-size:.98rem} .pf-sec:first-of-type{border-top:0;padding-top:0} /* --- galeri gambar di dalam form --- */ .pf-gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px} .pf-gal-empty{margin:0} .pf-gal-item{position:relative;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ulik-sky-tint); transition:border-color .15s,box-shadow .15s} .pf-gal-item.is-primary{border-color:var(--ind);box-shadow:0 0 0 3px rgba(14,165,233,.16)} .pf-gal-item.is-staged{border-style:dashed;border-color:#F59E0B} .pf-gal-item img{width:100%;height:110px;object-fit:cover;display:block;pointer-events:none} .pf-gal-handle{position:absolute;left:6px;bottom:6px;background:rgba(15,23,42,.72);color:#fff;border-radius:8px; padding:2px 6px;font-size:.7rem;letter-spacing:-2px;cursor:grab;z-index:2} .pf-gal-tag{position:absolute;right:6px;bottom:6px;background:var(--grad-soft);color:#fff;font-size:.66rem; font-weight:800;padding:3px 8px;border-radius:999px;z-index:2} .pf-gal-x{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;border-radius:9px;cursor:pointer; background:rgba(255,255,255,.95);color:#7F1D1D;font-size:14px;font-weight:800;line-height:1;z-index:3; display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(15,23,42,.28)} .pf-gal-x:hover{background:#FEE2E2} .pf-gal-ctl{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:#fff;border-top:1px solid var(--line)} .pf-gal-ctl label{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--ink-2);cursor:pointer} .pf-gal-ctl input{margin:0;flex:none} .pf-gal-ctl .is-del{color:#B91C1C;font-weight:600} .pf-gal-item.is-drag{opacity:.45} .pf-pick{display:block;border:1.5px dashed rgba(14,165,233,.4);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.6)} .pf-pick>input[type=file]{margin-top:8px} .pf-pick small{display:block;margin-top:6px;color:var(--mut);font-size:.76rem;font-weight:500} .pf-progress{margin:0;color:var(--ind);font-weight:600} /* --- file produk di dalam form --- */ .pf-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .pf-file{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px} .pf-file.is-staged{border-style:dashed;border-color:#F59E0B;background:#FFFBEB} .pf-file .dl-name{display:block;font-weight:600;font-size:.93rem;word-break:break-all} .pf-file .dl-size{color:var(--mut);font-size:.78rem} .pf-file-del{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:#B91C1C;white-space:nowrap} .pf-file-del input{margin:0} .pf-file-x{min-width:34px;min-height:34px;justify-content:center} /* --- baris simpan --- */ .pf-submit{padding-top:18px;border-top:1px solid var(--line)} @media(max-width:980px){ .prod-edit{grid-template-columns:1fr} .prod-side{order:-1} /* aksi/publikasikan tetap terlihat lebih dulu di HP */ } @media(max-width:560px){ .pf-gal{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))} .pf-gal-item img{height:92px} } /* ========================================================================== PAGE BUILDER (My Page) — daftar blok + preview HP ========================================================================== */ .builder{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start} .builder-left{min-width:0} /* --- daftar blok --- */ .block-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .block-empty{color:var(--mut);text-align:center;padding:22px 12px;background:rgba(255,255,255,.6);border:1px dashed var(--line);border-radius:14px} /* flex-wrap dipakai supaya panel menu blok (⋯) bisa turun ke barisnya sendiri DI DALAM kartu. Popup position:absolute TIDAK bisa dipakai di sini: panel pembungkusnya (.panel) memakai overflow:hidden sehingga popup terpotong dan tombolnya tidak terjangkau — terutama di HP. */ /* Baris blok = satu baris kontrol: [⋮⋮ geser] [ikon kotak] [judul + subjudul + status] [toggle ON/OFF] [⋯ menu] `flex-wrap` TETAP dipakai supaya panel menu (⋯) bisa turun ke barisnya sendiri DI DALAM kartu — popup position:absolute tidak bisa dipakai di sini karena `.panel` memakai overflow:hidden sehingga popup terpotong (terutama di HP). */ .block-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#fff;border:1px solid var(--line); border-radius:16px;padding:10px 12px;cursor:grab;transition:box-shadow .14s,border-color .14s} .block-item:hover{border-color:rgba(14,165,233,.45);box-shadow:0 8px 20px -14px rgba(14,165,233,.5)} .block-item.is-drag{opacity:.55;border-style:dashed} /* STATUS NONAKTIF harus langsung terbaca: kartu diredam + garis putus + kolom status khusus, bukan hanya badge kecil. Toggle-nya sendiri juga ikut tampil "mati". */ .block-item.is-off{background:#F7FAFC;border-style:dashed;border-color:rgba(100,116,139,.35)} .block-item.is-off:hover{border-color:rgba(100,116,139,.6);box-shadow:none} .block-item.is-off .block-ic{filter:grayscale(1) brightness(.92)} .block-item.is-off .block-body b{color:var(--mut)} .block-handle{color:var(--mut-2);letter-spacing:-2px;cursor:grab;flex:none;font-size:1.05rem;line-height:1} /* ikon blok: kotak berwarna yang jelas (bukan ikon polos) */ .block-ic{width:40px;height:40px;border-radius:12px;color:#fff;flex:none;display:inline-flex;align-items:center; justify-content:center;box-shadow:0 6px 14px -8px rgba(15,23,42,.5)} .block-ic .ic{width:18px;height:18px} .block-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .block-body b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .block-sub{font-size:.78rem;color:var(--mut-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .block-flags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px} .block-flags:empty{display:none} .block-flags .badge{padding:2px 9px;font-size:.68rem} .block-actions{flex:none;display:flex;align-items:center;gap:8px} /* --- toggle ON/OFF langsung di baris ------------------------------------- Ini hanyalah