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

    :root {
      --forest-deep:   #0d1710;
      --forest-dark:   #111f14;
      --forest-mid:    #1a2e1d;
      --forest-accent: #2d4a30;
      --sage:          #7a9e7e;
      --sage-light:    #a8c5a0;
      --gold:          #c9a84c;
      --gold-light:    #e2c97e;
      --cream:         #f4ede0;
      --glass:         rgba(255,255,255,0.04);
      --glass-border:  rgba(255,255,255,0.08);
      --radius:        14px;
      --radius-lg:     22px;
      --error:         #e07070;
      --red:           #e05050;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--forest-deep);
      color: var(--cream);
      overflow-x: hidden;
      min-height: 100vh;
      cursor: none;
    }

    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 1; opacity: .5;
    }

    /* ── Cursor ── */
    #cursor { width:10px;height:10px;background:var(--gold);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;mix-blend-mode:difference; }
    #cursor-ring { width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998;opacity:.5;transition:width .3s,height .3s; }

    /* ── BG DECO ── */
    .bg-deco { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
    .bg-deco::before { content:'';position:absolute;top:-100px;right:-150px;width:600px;height:600px;background:radial-gradient(circle,rgba(45,74,48,.3) 0%,transparent 65%);border-radius:50%; }
    .bg-deco::after  { content:'';position:absolute;bottom:-150px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(26,46,29,.35) 0%,transparent 65%);border-radius:50%; }

    /* ── NAV ── */
    nav {
      position: fixed; top:0;left:0;right:0; z-index:100;
      display:flex; align-items:center; justify-content:space-between;
      padding: 18px 60px;
      background: rgba(13,23,16,.95);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--glass-border);
    }
    .nav-logo { font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--cream);text-decoration:none;letter-spacing:.04em; }
    .nav-logo span { color:var(--gold); }
    .nav-links { display:flex;gap:32px;list-style:none; }
    .nav-links a { font-size:.82rem;font-weight:400;color:var(--sage-light);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;transition:color .25s; }
    .nav-links a:hover, .nav-links a.active { color:var(--gold-light); }
    .nav-cta { background:transparent;border:1px solid var(--gold);color:var(--gold);padding:9px 22px;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s;text-decoration:none; }
    .nav-cta:hover { background:var(--gold);color:var(--forest-deep); }

    /* ── PAGE WRAP ── */
    .page-wrap { position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:100px 40px 80px; }

    /* ── PAGE HEADER ── */
    .page-header { margin-bottom:48px;animation:fade-up .8s cubic-bezier(.22,1,.36,1) both; }
    @keyframes fade-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

    .breadcrumb { display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--sage);margin-bottom:20px;letter-spacing:.06em; }
    .breadcrumb a { color:var(--sage);text-decoration:none;transition:color .2s; }
    .breadcrumb a:hover { color:var(--cream); }
    .breadcrumb-sep { opacity:.4; }

    .page-title { font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--cream);line-height:1.1;margin-bottom:8px; }
    .page-title em { color:var(--gold-light);font-style:italic; }
    .page-sub { font-size:.9rem;color:var(--sage-light);font-weight:300; }

    /* ── TOOLBAR ── */
    .toolbar {
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
      margin-bottom:32px;
      animation: fade-up .8s .1s cubic-bezier(.22,1,.36,1) both;
    }

    /* Search */
    .search-wrap { position:relative;flex:1;min-width:220px;max-width:360px; }
    .search-wrap svg { position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--sage);pointer-events:none; }
    .search-input {
      width:100%;background:var(--glass);border:1px solid var(--glass-border);
      border-radius:50px;padding:11px 18px 11px 42px;
      color:var(--cream);font-family:'DM Sans',sans-serif;font-size:.85rem;
      outline:none;transition:border-color .25s;
    }
    .search-input::placeholder { color:rgba(168,197,160,.45); }
    .search-input:focus { border-color:var(--sage); }

    /* Sort */
    .sort-select {
      background:var(--glass);border:1px solid var(--glass-border);
      border-radius:50px;padding:11px 20px;
      color:var(--sage-light);font-family:'DM Sans',sans-serif;font-size:.82rem;
      outline:none;cursor:pointer;transition:border-color .25s;
    }
    .sort-select option { background:var(--forest-dark);color:var(--cream); }
    .sort-select:focus { border-color:var(--sage); }

    /* Result count */
    .result-count { font-size:.8rem;color:var(--sage);margin-left:auto; }
    .result-count strong { color:var(--gold); }

    /* ── FILTER TABS ── */
    .filter-wrap {
      display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px;
      animation: fade-up .8s .15s cubic-bezier(.22,1,.36,1) both;
    }
    .filter-btn {
      padding:8px 20px;border-radius:50px;
      border:1px solid var(--glass-border);background:transparent;
      color:var(--sage-light);font-family:'DM Sans',sans-serif;
      font-size:.78rem;letter-spacing:.06em;cursor:pointer;
      transition:all .25s;display:flex;align-items:center;gap:6px;
    }
    .filter-btn .count-badge {
      background:rgba(122,158,126,.15);
      color:var(--sage);
      font-size:.65rem;padding:1px 6px;border-radius:50px;
    }
    .filter-btn.active, .filter-btn:hover {
      background:var(--forest-accent);border-color:var(--sage);color:var(--cream);
    }
    .filter-btn.active .count-badge { background:rgba(201,168,76,.15);color:var(--gold); }

    /* ── CATALOG GRID ── */
    .catalog-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
      animation: fade-up .8s .2s cubic-bezier(.22,1,.36,1) both;
    }

    /* ── CATALOG CARD ── */
    .catalog-card {
      border-radius:var(--radius-lg);overflow:hidden;
      background:var(--forest-mid);
      border:1px solid var(--glass-border);
      cursor:pointer;
      transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .3s;
      position:relative;
      display:flex;flex-direction:column;
    }
    .catalog-card:hover { transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5);border-color:rgba(122,158,126,.25); }
    .catalog-card.featured { grid-column:span 2; }

    /* Thumb */
    .card-thumb { position:relative;overflow:hidden; }
    .catalog-card:not(.featured) .card-thumb { aspect-ratio:4/3; }
    .catalog-card.featured .card-thumb { aspect-ratio:16/7; }

    .card-thumb img {
      width:100%;height:100%;object-fit:cover;
      transition:transform .5s cubic-bezier(.22,1,.36,1);
      display:block;
    }
    .catalog-card:hover .card-thumb img { transform:scale(1.04); }

    /* Mock fallback */
    .card-mock {
      width:100%;height:100%;
      display:flex;align-items:center;justify-content:center;
      font-family:'Cormorant Garamond',serif;
    }
    .mock-pernikahan { background:linear-gradient(135deg,#1c1412,#2e1f15); }
    .mock-ultah      { background:linear-gradient(135deg,#0d1520,#152030); }
    .mock-aqiqah     { background:linear-gradient(135deg,#0f1a0f,#162516); }
    .mock-syukuran   { background:linear-gradient(135deg,#1a0f0a,#2a1a0e); }
    .mock-wisuda     { background:linear-gradient(135deg,#100a1a,#1c1028); }
    .mock-khitanan   { background:linear-gradient(135deg,#0a151a,#0f2028); }

    .mock-inner { position:relative;z-index:1;text-align:center;padding:20px; }
    .mock-icon  { font-size:2.2rem;margin-bottom:8px; }
    .mock-title { font-size:1.1rem;font-style:italic;color:var(--cream);opacity:.8; }
    .mock-line  { width:36px;height:1px;background:var(--gold);opacity:.5;margin:8px auto; }
    .mock-date  { font-size:.68rem;color:var(--sage-light);letter-spacing:.12em;text-transform:uppercase; }

    /* Overlay */
    .card-overlay {
      position:absolute;inset:0;
      background:rgba(13,23,16,.82);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
      opacity:0;transition:opacity .3s;
    }
    .catalog-card:hover .card-overlay { opacity:1; }
    .overlay-btn {
      background:var(--gold);color:var(--forest-deep);
      padding:11px 26px;border-radius:50px;
      font-weight:500;font-size:.82rem;letter-spacing:.04em;
      border:none;cursor:pointer;text-decoration:none;
      transform:translateY(8px);transition:transform .3s;
    }
    .catalog-card:hover .overlay-btn { transform:translateY(0); }
    .overlay-order {
      background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--cream);
      padding:9px 22px;border-radius:50px;
      font-size:.78rem;cursor:pointer;text-decoration:none;
      transform:translateY(8px);transition:transform .3s .05s, border-color .25s;
    }
    .catalog-card:hover .overlay-order { transform:translateY(0); }
    .overlay-order:hover { border-color:var(--sage); }

    /* Badges */
    .card-badges { position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2; }
    .badge {
      font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
      padding:3px 10px;border-radius:50px;font-weight:500;
    }
    .badge-gold   { background:rgba(201,168,76,.9);color:var(--forest-deep); }
    .badge-new    { background:rgba(122,158,126,.9);color:var(--forest-deep); }
    .badge-hot    { background:rgba(224,112,112,.85);color:#fff; }
    .badge-promo  { background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);color:var(--gold-light); }

    /* Card info */
    .card-info { padding:18px 20px 20px;flex:1;display:flex;flex-direction:column; }
    .card-info-top { display:flex;justify-content:space-between;align-items:start;margin-bottom:4px;gap:8px; }
    .card-name { font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:var(--cream);line-height:1.2; }
    .card-code { font-size:.68rem;color:var(--sage);letter-spacing:.08em;margin-bottom:6px; }
    .card-meta { font-size:.75rem;color:var(--sage);margin-bottom:12px; }

    /* Price */
    .card-price { margin-top:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px; }
    .price-left { display:flex;flex-direction:column;gap:2px; }
    .price-original { font-size:.75rem;color:var(--sage);text-decoration:line-through;opacity:.7; }
    .price-final { font-size:1.1rem;font-weight:500;color:var(--gold); }
    .price-discount {
      font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
      background:rgba(224,80,80,.15);border:1px solid rgba(224,80,80,.3);
      color:#e07878;padding:2px 8px;border-radius:50px;align-self:start;
    }
    .price-order-btn {
      background:var(--forest-accent);border:1px solid rgba(122,158,126,.3);
      color:var(--sage-light);padding:7px 16px;border-radius:50px;
      font-size:.75rem;cursor:pointer;text-decoration:none;
      transition:background .25s,color .25s,border-color .25s;
      white-space:nowrap;
    }
    .price-order-btn:hover { background:var(--gold);color:var(--forest-deep);border-color:var(--gold); }

    /* ── EMPTY STATE ── */
    .empty-state {
      grid-column:1/-1;
      text-align:center;padding:80px 20px;
      display:none;
    }
    .empty-icon { font-size:3rem;margin-bottom:16px;opacity:.4; }
    .empty-title { font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--cream);margin-bottom:8px; }
    .empty-sub { font-size:.85rem;color:var(--sage); }

    /* ── LOAD MORE ── */
    .load-more-wrap { text-align:center;margin-top:48px; }
    .btn-load {
      background:transparent;border:1px solid var(--glass-border);color:var(--sage-light);
      padding:14px 36px;border-radius:50px;
      font-family:'DM Sans',sans-serif;font-size:.85rem;cursor:pointer;
      transition:border-color .25s,color .25s,background .25s;
    }
    .btn-load:hover { border-color:var(--sage);color:var(--cream);background:var(--glass); }

    /* ── FOOTER ── */
    footer {
      position:relative;z-index:2;
      padding:36px 60px;
      border-top:1px solid var(--glass-border);
      display:flex;justify-content:space-between;align-items:center;
      flex-wrap:wrap;gap:16px;margin-top:0;
    }
    .footer-logo { font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--cream); }
    .footer-logo span { color:var(--gold); }
    .footer-copy { font-size:.75rem;color:var(--sage); }
    .footer-links { display:flex;gap:24px; }
    .footer-links a { font-size:.75rem;color:var(--sage);text-decoration:none;transition:color .2s; }
    .footer-links a:hover { color:var(--cream); }

    /* ── REVEAL ── */
    .reveal { opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); }
    .reveal.visible { opacity:1;transform:translateY(0); }

    /* ── MOBILE ── */
    @media(max-width:900px){
      nav { padding:16px 20px; }
      .nav-links { display:none; }
      .page-wrap { padding:80px 16px 60px; }
      .catalog-grid { grid-template-columns:1fr 1fr; }
      .catalog-card.featured { grid-column:span 2; }
      footer { padding:28px 20px;flex-direction:column;text-align:center; }
    }
    @media(max-width:560px){
      .catalog-grid { grid-template-columns:1fr; }
      .catalog-card.featured { grid-column:span 1; }
      .toolbar { flex-direction:column;align-items:stretch; }
      .search-wrap { max-width:100%; }
    }