@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap");:root{--color-primary:#8B6F4E;--color-primary-light:#C4A882;--color-primary-dark:#6B5236;--color-primary-rgb:139,111,78;--color-secondary:#2D3436;--color-secondary-light:#636E72;--color-background:#FDFCFB;--color-surface:#F8F5F1;--color-surface-hover:#F2EDE6;--color-accent:#D4A574;--color-accent-light:#E8C9A8;--color-success:#6BAF7B;--color-success-light:#E8F5EB;--color-warning:#E8A838;--color-warning-light:#FFF3E0;--color-error:#D55E5E;--color-error-light:#FDECEC;--color-bg:var(--color-background);--color-primary-lightest:#F5F0EA;--color-text-primary:#2D3436;--color-text-secondary:#636E72;--color-text-tertiary:#969FA3;--color-text-inverse:#FDFCFB;--color-border:#E8E2DA;--color-border-light:#F0EBE4;--color-overlay:rgba(45,52,54,0.5);--font-heading:"Playfair Display",Georgia,serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.75;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;--shadow-sm:0 1px 3px rgba(139,111,78,0.06),0 1px 2px rgba(139,111,78,0.04);--shadow-md:0 4px 12px rgba(139,111,78,0.08),0 2px 4px rgba(139,111,78,0.04);--shadow-lg:0 12px 32px rgba(139,111,78,0.1),0 4px 8px rgba(139,111,78,0.05);--shadow-xl:0 20px 48px rgba(139,111,78,0.12),0 8px 16px rgba(139,111,78,0.06);--shadow-glow:0 0 20px rgba(139,111,78,0.15);--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:250ms cubic-bezier(0.4,0,0.2,1);--transition-slow:400ms cubic-bezier(0.4,0,0.2,1);--transition-spring:500ms cubic-bezier(0.175,0.885,0.32,1.275);--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal-backdrop:400;--z-modal:500;--z-popover:600;--z-tooltip:700;--z-floating:800;--container-max:1280px;--container-padding:var(--space-4);--navbar-height:72px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-weight:var(--font-weight-normal);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-background);min-height:100dvh;overflow-x:hidden}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit;color:inherit}a{color:inherit;text-decoration:none}ol,ul{list-style:none}button{cursor:pointer;border:none;background:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{line-height:var(--line-height-relaxed);color:var(--color-text-secondary)}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding)}.section{padding-block:var(--space-16)}.section-header{text-align:center;margin-bottom:var(--space-10)}.section-header h2{margin-bottom:var(--space-3)}.section-header p{max-width:600px;margin-inline:auto}.section-subtitle{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.12em;color:var(--color-primary);margin-bottom:var(--space-2)}.grid{display:grid;gap:var(--space-6)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6)}.glass{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.4)}.glass,.glass-dark{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.glass-dark{background:rgba(45,52,54,.7);border:1px solid rgba(255,255,255,.1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);line-height:1;border-radius:var(--radius-lg);transition:all var(--transition-base);white-space:nowrap;cursor:pointer;border:none;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 50%);opacity:0;transition:opacity var(--transition-fast)}.btn:hover:after{opacity:1}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-dark) 100%);color:var(--color-text-inverse);box-shadow:var(--shadow-md),0 2px 8px rgba(var(--color-primary-rgb),.3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 4px 16px rgba(var(--color-primary-rgb),.4)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--color-surface);color:var(--color-primary-dark);border:1.5px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-hover);border-color:var(--color-primary-light);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-wa{background:linear-gradient(135deg,#25D366,#128C7E);color:white;box-shadow:var(--shadow-md),0 2px 8px rgba(37,211,102,.3)}.btn-wa:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 4px 16px rgba(37,211,102,.4)}.btn-wa-outline{background:rgba(255,255,255,.15);color:white;border:1.5px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-wa-outline:hover{background:#25D366;border-color:#25D366;color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,211,102,.3)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-surface);color:var(--color-text-primary)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);border-radius:var(--radius-md)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);border-radius:var(--radius-xl)}.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--radius-full)}.card{background:var(--color-background);border-radius:var(--radius-xl);border:1px solid var(--color-border-light);overflow:hidden;transition:all var(--transition-base)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-primary-light)}.card-glass{background:rgba(255,255,255,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-base)}.card-glass:hover{background:rgba(255,255,255,.8);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);letter-spacing:.02em;text-transform:uppercase}.badge-new{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-accent) 100%);color:white}.badge-promo{background:linear-gradient(135deg,var(--color-warning) 0,#F0B429 100%);color:white}.badge-habis{background:var(--color-error-light);color:var(--color-error)}.badge-tersedia{background:var(--color-success-light);color:var(--color-success)}.input-group{display:flex;flex-direction:column;gap:var(--space-2)}.input-label{font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-base);outline:none}.input:focus{border-color:var(--color-primary);background:var(--color-background);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.1)}.input::placeholder{color:var(--color-text-tertiary)}.input-search{padding-left:var(--space-10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23969FA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:var(--space-3) center;background-size:20px}.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--font-weight-medium);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.chip:hover{background:var(--color-surface-hover);border-color:var(--color-primary-light);color:var(--color-primary-dark)}.chip-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.chip-active:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-inverse)}.navbar{position:sticky;top:0;z-index:var(--z-sticky);height:var(--navbar-height);background:rgba(253,252,251,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border-light);transition:all var(--transition-base)}.navbar-scrolled{box-shadow:var(--shadow-sm)}.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding)}.navbar-logo{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-weight-bold);color:var(--color-primary-dark);letter-spacing:.02em}.navbar-logo span{color:var(--color-primary)}.navbar-links{display:flex;align-items:center;gap:var(--space-1)}.navbar-link{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative}.navbar-link:hover{color:var(--color-primary);background:var(--color-surface)}.navbar-link-active{color:var(--color-primary-dark);font-weight:var(--font-weight-semibold)}.navbar-link-active:after{content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--color-primary);border-radius:var(--radius-full)}.navbar-actions{display:flex;align-items:center;gap:var(--space-2)}.navbar-mobile-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:background var(--transition-fast)}.navbar-mobile-toggle:hover{background:var(--color-surface)}.hamburger{width:22px;height:16px;display:flex;flex-direction:column;justify-content:space-between}.hamburger span{display:block;width:100%;height:2px;background:var(--color-text-primary);border-radius:var(--radius-full);transition:all var(--transition-base);transform-origin:center}.hamburger-open span:first-child{transform:translateY(7px) rotate(45deg)}.hamburger-open span:nth-child(2){opacity:0}.hamburger-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-menu{display:none;position:fixed;inset:var(--navbar-height) 0 0 0;background:var(--color-background);z-index:var(--z-fixed);padding:var(--space-6);flex-direction:column;gap:var(--space-2);animation:slideDown var(--transition-base) forwards}.mobile-menu-open{display:flex}.mobile-menu-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);font-size:var(--text-lg);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.mobile-menu-link:hover{background:var(--color-surface);color:var(--color-primary)}.hero{position:relative;min-height:85vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,rgba(253,252,251,.95),rgba(253,252,251,.82) 45%,rgba(139,111,78,.65)),url(/foto-toko.jpg) 50%/cover no-repeat}.hero-bg-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(var(--color-primary-rgb),.05) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(212,165,116,.06) 0,transparent 40%),radial-gradient(circle at 60% 80%,rgba(var(--color-primary-rgb),.03) 0,transparent 40%);pointer-events:none}.hero-content{position:relative;z-index:1;max-width:680px;padding:var(--space-8) 0}.hero h1{font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));margin-bottom:var(--space-6);line-height:1.15}.hero h1 .text-gradient{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-accent) 50%,var(--color-primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:var(--text-lg);margin-bottom:var(--space-8);max-width:520px}.hero-actions{display:flex;gap:var(--space-4);flex-wrap:wrap}.hero-decoration{position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(var(--color-primary-rgb),.08) 0,transparent 70%);pointer-events:none}.brands-section{padding-block:var(--space-12);background:var(--color-surface);border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light)}.brands-scroll{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.product-card{position:relative;background:var(--color-background);border-radius:var(--radius-xl);border:1px solid var(--color-border-light);overflow:hidden;transition:all var(--transition-base)}.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:transparent}.product-card-image{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--color-surface)}.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.product-card:hover .product-card-image img{transform:scale(1.06)}.product-card-badges{left:var(--space-3);flex-direction:column;gap:var(--space-1)}.product-card-badges,.product-card-wishlist{position:absolute;top:var(--space-3);display:flex;z-index:2}.product-card-wishlist{right:var(--space-3);width:38px;height:38px;align-items:center;justify-content:center;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-full);border:none;cursor:pointer;transition:all var(--transition-base);color:var(--color-text-tertiary)}.product-card-wishlist:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.product-card-wishlist-active,.product-card-wishlist:hover{background:white;color:var(--color-error)}.product-card-info{padding:var(--space-4)}.product-card-brand{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);margin-bottom:var(--space-1)}.product-card-brand,.product-card-name{font-weight:var(--font-weight-semibold)}.product-card-name{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-primary);margin-bottom:var(--space-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-card-price{display:flex;align-items:center;gap:var(--space-2)}.product-card-price-current{font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--color-primary-dark)}.product-card-price-original{font-size:var(--text-sm);color:var(--color-text-tertiary);text-decoration:line-through}.product-card-actions{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border-light)}.product-card-actions .btn{flex:1 1;font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}@media (max-width:640px){.product-card-actions{padding:var(--space-2);gap:var(--space-1)}.product-card-actions .btn{padding:var(--space-2) var(--space-1);font-size:10px}}.brand-card-hover:hover{background:var(--color-surface-hover)!important;border-color:var(--color-primary-light)!important;color:var(--color-primary-dark)!important;transform:translateY(-2px);box-shadow:var(--shadow-sm)}.footer{background:var(--color-secondary);color:var(--color-text-inverse);padding-block:var(--space-16) var(--space-8)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-12)}.footer-brand h3{font-family:var(--font-heading);font-size:var(--text-2xl);color:var(--color-text-inverse);margin-bottom:var(--space-4)}.footer-brand h3 span{color:var(--color-primary-light)}.footer-brand p{color:rgba(255,255,255,.6);font-size:var(--text-sm);line-height:var(--line-height-relaxed);max-width:320px}.footer-heading{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary-light);margin-bottom:var(--space-5)}.footer-links{display:flex;flex-direction:column;gap:var(--space-3)}.footer-link{font-size:var(--text-sm);color:rgba(255,255,255,.6);transition:color var(--transition-fast)}.footer-link:hover{color:var(--color-text-inverse)}.footer-bottom{padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4)}.footer-copyright{font-size:var(--text-sm);color:rgba(255,255,255,.4)}.floating-wa{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:var(--z-floating);width:60px;height:60px;background:linear-gradient(135deg,#25D366,#128C7E);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.4);transition:all var(--transition-base);cursor:pointer;border:none;color:white}.floating-wa:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 6px 24px rgba(37,211,102,.5)}.floating-wa:before{content:"";position:absolute;inset:-4px;border-radius:var(--radius-full);background:linear-gradient(135deg,#25D366,#128C7E);opacity:.3;animation:waPulse 2s infinite}.floating-wa svg{width:28px;height:28px;position:relative;z-index:1}.loader{display:flex;align-items:center;justify-content:center;padding:var(--space-8)}.loader-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite}.loader-sm .loader-spinner{width:24px;height:24px;border-width:2px}.modal-overlay{position:fixed;inset:0;background:var(--color-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn var(--transition-base) forwards}.modal{background:var(--color-background);border-radius:var(--radius-2xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:modalSlideUp var(--transition-slow) forwards}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);border-bottom:1px solid var(--color-border-light)}.modal-header h3{font-size:var(--text-xl)}.modal-body{padding:var(--space-6)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border-light)}.skeleton{background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-surface-hover) 50%,var(--color-surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.scroll-top{position:fixed;bottom:var(--space-6);left:var(--space-6);z-index:var(--z-floating);width:44px;height:44px;background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-base);opacity:0;transform:translateY(16px);pointer-events:none;color:var(--color-text-secondary)}.scroll-top-visible{opacity:1;transform:translateY(0);pointer-events:auto}.scroll-top:hover{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary);transform:translateY(-2px)}.empty-state{text-align:center;padding:var(--space-16) var(--space-8)}.empty-state-icon{width:80px;height:80px;margin:0 auto var(--space-6);display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:var(--radius-full);color:var(--color-text-tertiary)}.empty-state h3{margin-bottom:var(--space-3)}.empty-state p{max-width:400px;margin-inline:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(32px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes waPulse{0%{transform:scale(1);opacity:.3}50%{transform:scale(1.15);opacity:0}to{transform:scale(1);opacity:0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-fadeInUp{animation:fadeInUp .6s ease-out forwards}.animate-delay-1{animation-delay:.1s}.animate-delay-2{animation-delay:.2s}.animate-delay-3{animation-delay:.3s}.animate-delay-4{animation-delay:.4s}.price{font-weight:var(--font-weight-bold);color:var(--color-primary-dark)}.price-original{font-weight:var(--font-weight-normal);color:var(--color-text-tertiary);text-decoration:line-through}@media (max-width:1024px){.grid-4{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){:root{--navbar-height:64px;--container-padding:var(--space-5)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}.section{padding-block:var(--space-10)}.grid-2,.grid-3,.grid-4,.grid-products{grid-template-columns:repeat(2,1fr)}.grid-products{gap:var(--space-3)}.navbar-links{display:none}.navbar-mobile-toggle{display:flex}.hero{min-height:70vh}.hero-decoration{display:none}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.footer-grid{grid-template-columns:1fr;gap:var(--space-8)}.product-detail-grid{gap:var(--space-6)!important}.product-detail-grid,.tentang-grid{grid-template-columns:1fr!important}.steps-grid{grid-template-columns:repeat(2,1fr)!important}}@media (max-width:480px){.grid-products{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.product-card-info{padding:var(--space-3)}.product-card-name{font-size:var(--text-sm)}.product-card-price-current{font-size:var(--text-base)}.btn-lg{padding:var(--space-3) var(--space-6)}.floating-wa{width:52px;height:52px;bottom:var(--space-4);right:var(--space-4)}.steps-grid{grid-template-columns:1fr!important}}@media print{.floating-wa,.mobile-menu,.navbar,.scroll-top{display:none!important}}.door-container{display:flex;width:100%;height:100vh;overflow:hidden;position:relative;background-color:var(--color-background)}.door-panel{flex:1 1;height:100%;transition:transform 1.2s cubic-bezier(.8,0,.2,1);will-change:transform}.door-left{position:relative;z-index:2;box-shadow:10px 0 30px rgba(0,0,0,.2)}.door-right{position:relative;z-index:1;background:var(--color-surface)}.door-open .door-left{transform:translateX(-100%)}.door-open .door-right{transform:translateX(100%)}@media (max-width:768px){.door-container{flex-direction:column}.door-left{box-shadow:0 10px 30px rgba(0,0,0,.2)}.door-open .door-left{transform:translateY(-100%)}.door-open .door-right{transform:translateY(100%)}}.dashboard-bg{background-color:var(--color-background);background-image:radial-gradient(circle at 100% 0,rgba(196,168,130,.15) 0,transparent 60%),radial-gradient(circle at 0 100%,rgba(139,111,78,.1) 0,transparent 60%),url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C4A882' fill-opacity='0.12' fill-rule='evenodd'%3E%3Ccircle cx='4' cy='4' r='1.5'/%3E%3Ccircle cx='16' cy='16' r='1.5'/%3E%3C/g%3E%3C/svg%3E")}.akun-header-row{justify-content:space-between;flex-wrap:wrap}.akun-header-row,.akun-user{display:flex;align-items:center;gap:var(--space-4)}.akun-user{min-width:0}.akun-avatar{width:64px;height:64px;flex-shrink:0;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary) 0,var(--color-accent) 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:var(--font-weight-bold);box-shadow:var(--shadow-md)}.akun-name{font-size:var(--text-2xl);margin-bottom:var(--space-1);line-height:var(--line-height-tight)}.akun-email{color:var(--color-text-secondary);font-size:var(--text-sm);display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);min-width:0}.akun-email-text{overflow:hidden;text-overflow:ellipsis}.akun-tabs{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-2);margin-bottom:var(--space-8);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);overflow-x:auto;white-space:nowrap;display:flex;gap:var(--space-2)}.tab-label-short{display:none}.akun-desktop-only{display:flex}.akun-mobile-only{display:none}.akun-card{padding:var(--space-8)}.akun-brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-4);margin-bottom:var(--space-8)}@media (max-width:768px){.akun-header-row,.akun-user{gap:var(--space-3)}.akun-avatar{width:38px;height:38px;font-size:14px}.akun-name{font-size:var(--text-lg);line-height:1.25}.akun-email{font-size:var(--text-xs)}.akun-email-text{max-width:100%;word-break:break-word}.akun-logout-text{display:none}.btn-logout{padding:var(--space-2)!important}.btn-logout svg{width:20px;height:20px}.akun-tabs{display:grid;grid-template-columns:repeat(2,1fr);overflow-x:visible;white-space:normal;gap:var(--space-3);padding:0;background:transparent;border:none;box-shadow:none}.akun-tabs .tab-item{flex-direction:column;align-items:center!important;justify-content:center!important;text-align:center;gap:8px!important;padding:var(--space-4) var(--space-2)!important;border-radius:var(--radius-xl)!important;border:1px solid var(--color-border-light)!important;background:white!important;box-shadow:0 1px 3px rgba(0,0,0,.06);color:var(--color-text-secondary)!important}.akun-tabs .tab-item.tab-active{border-color:var(--color-primary)!important;background:var(--color-primary-lightest)!important;color:var(--color-primary-dark)!important}.akun-tabs .tab-item .tab-icon svg{width:20px;height:20px}.tab-label-full{display:none}.tab-label-short{display:inline;font-size:var(--text-xs)!important;font-weight:var(--font-weight-semibold)}.akun-card{padding:var(--space-5)}.akun-brand-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-bottom:var(--space-6)}}@media (max-width:380px){.akun-brand-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.order-card{flex-wrap:wrap;gap:var(--space-3)!important;padding:var(--space-4)!important;align-items:flex-start!important}.order-card .order-pricing{width:100%;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;text-align:left!important;padding-top:var(--space-3);border-top:1px solid var(--color-border-light)}}