@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f0f2f5;color:#1c1e21;font-family:Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}.container{width:min(1160px,92%);margin:auto}.nav{position:sticky;top:0;z-index:20;background:rgba(8,9,11,.86);backdrop-filter:blur(18px);border-bottom:1px solid #dfe3e8}.nav-in{height:76px;display:flex;align-items:center;gap:35px}.brand{font-size:19px;font-weight:700;display:flex;align-items:center;gap:10px;white-space:nowrap}.brand span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #3a3d44;border-radius:10px;background:#ffffff;font-size:12px;letter-spacing:-1px}.brand b{font-weight:800}.nav nav{display:flex;gap:25px;font-size:13px;color:#65676b}.nav nav a:hover{color:#fff}.nav-actions{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:13px}.user-pill{color:#65676b}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid #bcc1c9;border-radius:12px;background:#fff;color:#f0f2f5;font-weight:700}.btn-small{padding:9px 14px}.btn-primary{margin-top:14px}.hero{border-bottom:1px solid #dfe3e8;background:radial-gradient(circle at 70% 35%,#1c1e24 0,#ffffff 38%,#f0f2f5 70%)}.hero-grid{min-height:540px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px}.eyebrow{font-size:11px;letter-spacing:2.2px;color:#65676b;font-weight:800}.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.03;letter-spacing:-3.5px;margin:16px 0}.hero h1 em{font-style:normal;color:#1877f2}.hero p{max-width:590px;color:#65676b;line-height:1.8;font-size:16px}.hero-card{height:360px;border:1px solid #d8dde5;border-radius:28px;background:linear-gradient(145deg,#f7f9fc,#ffffff);position:relative;overflow:hidden;box-shadow:0 30px 80px #000}.orb{position:absolute;width:300px;height:300px;border-radius:50%;left:50%;top:45%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0,#777 3%,#272a31 20%,#ffffff 58%,transparent 70%);filter:blur(.2px)}.mini-stat{position:absolute;background:#ffffffcc;border:1px solid #ccd0d5;border-radius:15px;padding:14px 18px;display:flex;flex-direction:column;gap:4px}.mini-stat:first-of-type{left:22px;bottom:22px}.mini-stat:last-of-type{right:22px;top:22px}.mini-stat b{font-size:20px}.mini-stat span{font-size:10px;color:#888e99}.section{padding:80px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px}.section h2{font-size:34px;letter-spacing:-1.5px;margin:9px 0 0}.search{display:flex;background:#ffffff;border:1px solid #d8dde5;border-radius:12px;overflow:hidden}.search input{background:transparent;border:0;outline:0;color:#fff;padding:12px 15px;width:260px}.search button{background:#fff;border:0;width:45px}.chips{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0}.chips a{padding:9px 14px;border:1px solid #d9dde3;border-radius:99px;color:#65676b;font-size:12px}.chips a.active,.chips a:hover{background:#fff;color:#f0f2f5;border-color:#fff}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product{border:1px solid #dfe3e8;background:#ffffff;border-radius:18px;overflow:hidden;transition:.25s}.product:hover{transform:translateY(-4px);border-color:#444}.product-img{height:190px;display:grid;place-items:center;background:linear-gradient(135deg,#eef2f7,#ffffff);position:relative}.product-img span{font-size:52px;font-weight:800;letter-spacing:-5px;color:#292c33}.product-img small{position:absolute;left:12px;top:12px;background:#ffffffe8;border:1px solid #c5c9cf;border-radius:99px;padding:6px 9px;color:#4b4f56;font-size:10px}.product-body{padding:18px}.muted{font-size:10px;color:#65676b}.product h3{margin:8px 0;font-size:16px}.product p{color:#65676b;font-size:12px;line-height:1.6;min-height:38px}.product-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.product-foot strong{font-size:15px}.product-foot a{font-size:12px;color:#4b4f56}.empty,.flash{padding:20px;border:1px solid #d8dde5;border-radius:14px;color:#65676b}.flash{margin-bottom:20px;background:#ffffff}footer{border-top:1px solid #dfe3e8;padding-top:50px}.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:45px}.foot p,.foot a{color:#65676b;font-size:12px}.foot div{display:flex;flex-direction:column;gap:12px}.copyright{text-align:center;border-top:1px solid #e4e6eb;padding:20px;color:#8a8d91;font-size:11px}.form-wrap{max-width:520px;margin:80px auto}.form-wrap h1{font-size:34px}.form-card{border:1px solid #d8dde5;background:#ffffff;padding:28px;border-radius:20px}.field{margin:16px 0}.field label{display:block;font-size:12px;color:#999;margin-bottom:8px}.field input,.field textarea,.field select{width:100%;padding:13px;border:1px solid #ccd0d5;background:#ffffff;color:#fff;border-radius:10px;outline:none}.field textarea{min-height:120px;resize:vertical}.hint{font-size:11px;color:#65676b}.detail{padding:70px 0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.detail-img{min-height:430px;border:1px solid #d8dde5;border-radius:25px;display:grid;place-items:center;background:radial-gradient(circle,#252831,#eef2f7 65%);font-size:100px;font-weight:800;color:#333}.detail h1{font-size:46px;line-height:1.05;letter-spacing:-2px}.price{font-size:26px;margin:25px 0}.desc{color:#65676b;line-height:1.8;white-space:pre-line}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:20px;border:1px solid #d8dde5;border-radius:15px;background:#ffffff}.stat b{font-size:25px}.table-wrap{overflow:auto;margin-top:25px;border:1px solid #d8dde5;border-radius:16px}.table{width:100%;border-collapse:collapse;min-width:700px}.table th,.table td{text-align:left;padding:14px;border-bottom:1px solid #e4e6eb;font-size:12px}.table th{color:#65676b}.notice{padding:15px;border:1px solid #b8bdc5;border-radius:12px;background:#ffffff;color:#65676b;font-size:12px}@media(max-width:850px){.nav nav{display:none}.hero-grid,.detail-grid{grid-template-columns:1fr}.hero{padding:40px 0}.hero-card{height:280px}.products{grid-template-columns:1fr 1fr}.admin-grid{grid-template-columns:1fr 1fr}.foot{grid-template-columns:1fr 1fr}}@media(max-width:560px){.nav-in{gap:12px}.nav-actions .user-pill{display:none}.hero h1{font-size:43px;letter-spacing:-2px}.section{padding:55px 0}.section-head{align-items:stretch;flex-direction:column}.search input{width:100%}.products{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}.detail h1{font-size:35px}}

hr{border:0;border-top:1px solid #e4e6eb;margin:20px 0}select{background:#ffffff;color:#fff;border:1px solid #ccd0d5;border-radius:10px;padding:9px}button{cursor:pointer}.table a{color:#65676b}.table a:hover{color:#fff}input[type=file]{font-size:12px}.product-img img{width:100%;height:100%;object-fit:cover}.product-img:has(img){display:block}.product-img:has(img) img{display:block}

/* ===== FACEBOOK BLUE + MOBILE RESPONSIVE EDITION ===== */
:root{--fb:#1877f2;--fb-dark:#0d65d9;--bg:#f0f2f5;--card:#fff;--border:#dfe3e8;--text:#1c1e21;--muted:#65676b}
html,body{overflow-x:hidden}
body{background:var(--bg);color:var(--text)}
.nav{background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.brand span{background:var(--fb);color:#fff;border-color:var(--fb)}
.nav nav a:hover,.nav-actions a:hover{color:var(--fb)}
.btn{background:#fff;color:var(--text);border-color:#ccd0d5}
.btn-primary,.btn.btn-small{background:var(--fb);color:#fff;border-color:var(--fb)}
.btn-primary:hover,.btn.btn-small:hover{background:var(--fb-dark)}
.hero{background:linear-gradient(135deg,#fff,#eef5ff);border-bottom:1px solid var(--border)}
.hero h1 em{color:var(--fb)}
.hero p,.muted,.hint,.product p{color:var(--muted)}
.hero-card{background:linear-gradient(145deg,#fff,#eef5ff);border-color:#d8e4f3;box-shadow:0 20px 50px rgba(24,119,242,.10)}
.orb{background:radial-gradient(circle,#1877f2 0,#6daaf7 18%,#dcecff 50%,transparent 72%)}
.mini-stat,.search,.form-card,.product,.stat,.table-wrap,.notice,.empty{background:#fff;border-color:var(--border)}
.search input,.field input,.field textarea,.field select{background:#fff;color:var(--text);border-color:#ccd0d5}
.search button{background:var(--fb);color:#fff}
.chips a{background:#fff;border-color:#ccd0d5;color:var(--muted)}
.chips a.active,.chips a:hover{background:var(--fb);color:#fff;border-color:var(--fb)}
.product:hover{border-color:#a9cdf8;box-shadow:0 8px 25px rgba(24,119,242,.10)}
.product-foot a{color:var(--fb)}
.product-img,.detail-img{background:linear-gradient(135deg,#f7f9fc,#e8f2ff)}
.product-img span,.detail-img{color:var(--fb)}
.flash{background:#e8f3ff;border-color:#b7d2f7;color:var(--text)}
footer{background:#fff;border-top-color:var(--border)}
.foot p,.foot a{color:var(--muted)}
.copyright{border-top-color:#e4e6eb;color:#8a8d91}

/* Mobile */
@media(max-width:850px){
 .container{width:min(94%,720px)}
 .nav-in{height:64px}
 .nav nav{display:none}
 .nav-actions{gap:8px}
 .nav-actions .user-pill{display:none}
 .hero{padding:30px 0 20px}
 .hero-grid{grid-template-columns:1fr;gap:28px;min-height:0}
 .hero h1{font-size:clamp(36px,10vw,54px);letter-spacing:-2.4px}
 .hero p{font-size:14px;line-height:1.65}
 .hero-card{height:250px;border-radius:20px}
 .orb{width:220px;height:220px}
 .section{padding:48px 0}
 .section-head{gap:14px}
 .search{width:100%}
 .search input{width:100%;min-width:0}
 .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px;scrollbar-width:none}
 .chips::-webkit-scrollbar{display:none}
 .chips a{flex:0 0 auto}
 .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .product-img{height:150px}
 .product-body{padding:13px}
 .product h3{font-size:14px}
 .product p{font-size:11px}
 .detail-grid{grid-template-columns:1fr;gap:25px}
 .detail-img{min-height:280px}
 .form-wrap{max-width:100%;margin:45px auto}
 .admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .container{width:calc(100% - 24px)}
 .nav-in{height:60px}
 .brand{font-size:15px;gap:7px}
 .brand span{width:29px;height:29px}
 .nav-actions .btn{padding:8px 11px;font-size:11px}
 .hero{padding-top:25px}
 .hero h1{font-size:39px;line-height:1.05}
 .hero p{font-size:13px}
 .hero .btn{width:100%}
 .hero-card{height:205px}
 .orb{width:175px;height:175px}
 .mini-stat{padding:10px 12px}
 .section{padding:38px 0}
 .section h2{font-size:25px}
 .products{grid-template-columns:1fr 1fr;gap:9px}
 .product-img{height:120px}
 .product-img span{font-size:38px}
 .product-img small{left:7px;top:7px;padding:4px 7px;font-size:8px}
 .product-body{padding:10px}
 .product h3{font-size:12px}
 .product p{display:none}
 .product-foot{display:block;margin-top:10px}
 .product-foot strong{display:block;margin-bottom:8px;font-size:12px}
 .product-foot a{display:block;border:1px solid var(--fb);border-radius:8px;text-align:center;padding:7px}
 .detail{padding:40px 0}
 .detail h1{font-size:30px}
 .detail-img{min-height:230px}
 .btn{width:100%}
 .field input,.field textarea,.field select{font-size:14px;padding:12px}
 .admin-grid{grid-template-columns:1fr 1fr;gap:10px}
 .stat{padding:14px}
 .stat b{font-size:18px}
 .foot{grid-template-columns:1fr}
 .table-wrap{-webkit-overflow-scrolling:touch}
}

/* Jual Akunmu mobile responsive */
html{overflow-x:hidden}body{overflow-x:hidden}
@media(max-width:850px){
.nav nav{display:flex;overflow-x:auto;white-space:nowrap;gap:14px;scrollbar-width:none}.nav nav::-webkit-scrollbar{display:none}
.container{width:min(94%,720px)}
.nav-in{height:64px}.nav nav{display:none}.nav-actions{gap:8px}.nav-actions .user-pill{display:none}
.hero{padding:30px 0 20px}.hero-grid{grid-template-columns:1fr;gap:28px;min-height:0}
.hero h1{font-size:clamp(36px,10vw,54px);letter-spacing:-2.4px}.hero p{font-size:14px;line-height:1.65}
.hero-card{height:250px}.section{padding:48px 0}.section-head{gap:14px}
.search{width:100%}.search input{width:100%;min-width:0}
.chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chips a{flex:0 0 auto}
.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-img{height:150px}.product-body{padding:13px}
.detail-grid{grid-template-columns:1fr;gap:25px}.detail-img{min-height:280px}
.form-wrap{max-width:100%;margin:45px auto}.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.container{width:calc(100% - 24px)}.nav-in{height:60px}.brand{font-size:15px}.brand span{width:29px;height:29px}
.nav-actions .btn{padding:8px 11px;font-size:11px}.hero{padding-top:25px}.hero h1{font-size:39px}
.hero .btn{width:100%}.hero-card{height:205px}.section{padding:38px 0}.section h2{font-size:25px}
.products{grid-template-columns:1fr 1fr;gap:9px}.product-img{height:120px}.product-img span{font-size:38px}
.product h3{font-size:12px}.product p{display:none}.product-foot{display:block;margin-top:10px}
.product-foot strong{display:block;margin-bottom:8px;font-size:12px}.product-foot a{display:block;border:1px solid #1877f2;border-radius:8px;text-align:center;padding:7px}
.detail h1{font-size:30px}.detail-img{min-height:230px}.btn{width:100%}.admin-grid{grid-template-columns:1fr 1fr}
.foot{grid-template-columns:1fr}.table-wrap{-webkit-overflow-scrolling:touch}
}