METAL UP YOUR FASHION<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Roboto:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- RESET & VARIABLES --- *\/\r\n :root {\r\n --bg-color: #0a0a0a;\r\n --card-bg: #141414;\r\n --text-main: #ffffff;\r\n --text-muted: #888888;\r\n --accent-red: #b30000; \/* Darah *\/\r\n --accent-gold: #d4af37; \/* Emas *\/\r\n --font-head: 'Bebas Neue', sans-serif;\r\n --font-body: 'Roboto', sans-serif;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-color);\r\n color: var(--text-main);\r\n font-family: var(--font-body);\r\n overflow-x: hidden;\r\n }\r\n\r\n a { text-decoration: none; color: inherit; transition: 0.3s; }\r\n ul { list-style: none; }\r\n\r\n \/* --- NAVIGATION --- *\/\r\n nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px 5%;\r\n position: fixed;\r\n width: 100%;\r\n top: 0;\r\n z-index: 1000;\r\n background: rgba(10, 10, 10, 0.9);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 1px solid #222;\r\n }\r\n\r\n .logo {\r\n font-family: var(--font-head);\r\n font-size: 2rem;\r\n letter-spacing: 2px;\r\n color: var(--text-main);\r\n }\r\n \r\n .logo span { color: var(--accent-red); }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 30px;\r\n }\r\n\r\n .nav-links a {\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 700;\r\n }\r\n\r\n .nav-links a:hover { color: var(--accent-red); }\r\n\r\n .nav-icons i {\r\n margin-left: 20px;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n }\r\n\r\n \/* --- HERO SECTION --- *\/\r\n .hero {\r\n height: 100vh;\r\n background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('https:\/\/images.unsplash.com\/photo-1470225620780-dba8ba36b745?q=80&w=2070&auto=format&fit=crop');\r\n background-size: cover;\r\n background-position: center;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n padding: 0 20px;\r\n }\r\n\r\n .hero h1 {\r\n font-family: var(--font-head);\r\n font-size: 6rem;\r\n line-height: 0.9;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n text-shadow: 0 0 20px rgba(0,0,0,0.8);\r\n }\r\n\r\n .hero p {\r\n font-size: 1.2rem;\r\n color: #ccc;\r\n margin-bottom: 40px;\r\n max-width: 600px;\r\n }\r\n\r\n .btn-main {\r\n padding: 15px 40px;\r\n background-color: var(--accent-red);\r\n color: white;\r\n font-family: var(--font-head);\r\n font-size: 1.5rem;\r\n letter-spacing: 2px;\r\n border: none;\r\n cursor: pointer;\r\n clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);\r\n transition: 0.3s;\r\n }\r\n\r\n .btn-main:hover {\r\n background-color: white;\r\n color: black;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* --- SECTIONS GENERAL --- *\/\r\n section {\r\n padding: 80px 5%;\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-head);\r\n font-size: 3rem;\r\n text-align: center;\r\n margin-bottom: 60px;\r\n text-transform: uppercase;\r\n border-bottom: 2px solid var(--accent-red);\r\n display: inline-block;\r\n padding-bottom: 10px;\r\n position: relative;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n\r\n \/* --- CATEGORIES --- *\/\r\n .categories {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .cat-card {\r\n height: 300px;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n\r\n .cat-card img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: 0.5s;\r\n filter: grayscale(100%);\r\n }\r\n\r\n .cat-card:hover img {\r\n transform: scale(1.1);\r\n filter: grayscale(0%);\r\n }\r\n\r\n .cat-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 20px;\r\n background: linear-gradient(transparent, black);\r\n }\r\n\r\n .cat-overlay h3 {\r\n font-family: var(--font-head);\r\n font-size: 2rem;\r\n }\r\n\r\n \/* --- PRODUCT GRID --- *\/\r\n .product-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n .product-card {\r\n background-color: var(--card-bg);\r\n border: 1px solid #222;\r\n transition: 0.3s;\r\n }\r\n\r\n .product-card:hover {\r\n border-color: var(--accent-red);\r\n }\r\n\r\n .product-img {\r\n width: 100%;\r\n height: 300px;\r\n background-color: #1a1a1a;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .product-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n mix-blend-mode: luminosity; \/* Efek metalik *\/\r\n }\r\n\r\n .product-info {\r\n padding: 20px;\r\n }\r\n\r\n .product-cat {\r\n color: var(--accent-red);\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n font-weight: bold;\r\n }\r\n\r\n .product-title {\r\n font-family: var(--font-head);\r\n font-size: 1.5rem;\r\n margin: 5px 0;\r\n }\r\n\r\n .product-price {\r\n font-size: 1.1rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .add-btn {\r\n width: 100%;\r\n padding: 10px;\r\n margin-top: 15px;\r\n background: transparent;\r\n border: 1px solid white;\r\n color: white;\r\n cursor: pointer;\r\n text-transform: uppercase;\r\n font-weight: bold;\r\n transition: 0.3s;\r\n }\r\n\r\n .add-btn:hover {\r\n background: white;\r\n color: black;\r\n }\r\n\r\n \/* --- VINYL SECTION --- *\/\r\n .vinyl-section {\r\n background-color: #0f0f0f;\r\n border-top: 1px solid #222;\r\n border-bottom: 1px solid #222;\r\n }\r\n\r\n .vinyl-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 50px;\r\n }\r\n\r\n .vinyl-item {\r\n text-align: center;\r\n width: 300px;\r\n }\r\n\r\n .vinyl-cover {\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n background: #000;\r\n border: 5px solid #111;\r\n margin: 0 auto 20px;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 0 30px rgba(0,0,0,0.8);\r\n animation: spin 10s linear infinite;\r\n animation-play-state: paused;\r\n }\r\n\r\n .vinyl-item:hover .vinyl-cover {\r\n animation-play-state: running;\r\n }\r\n\r\n .vinyl-cover img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .vinyl-label {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 80px;\r\n height: 80px;\r\n background: var(--accent-red);\r\n border-radius: 50%;\r\n z-index: 2;\r\n }\r\n\r\n @keyframes spin {\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* --- FOOTER --- *\/\r\n footer {\r\n padding: 50px 5%;\r\n background-color: black;\r\n text-align: center;\r\n border-top: 3px solid var(--accent-red);\r\n }\r\n\r\n .footer-logo {\r\n font-family: var(--font-head);\r\n font-size: 3rem;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .socials a {\r\n margin: 0 10px;\r\n font-size: 1.5rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .socials a:hover { color: white; }\r\n\r\n .copyright {\r\n margin-top: 30px;\r\n color: #444;\r\n font-size: 0.8rem;\r\n }\r\n\r\n \/* --- MOBILE RESPONSIVE --- *\/\r\n @media (max-width: 768px) {\r\n .hero h1 { font-size: 3.5rem; }\r\n .nav-links { display: none; } \/* Simplified for demo *\/\r\n .categories { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <nav>\r\n <div class=\"logo\">METAL UP <span>YOUR FASHION<\/span><\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#apparel\">APPAREL<\/a><\/li>\r\n <li><a href=\"#vinyls\">VINYLS<\/a><\/li>\r\n <li><a href=\"#accessories\">ACCESSORIES<\/a><\/li>\r\n <li><a href=\"#about\">THE STORY<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-icons\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <section class=\"hero\">\r\n <h1>WEAR THE <br> <span style=\"color:var(--accent-red)\">NOISE<\/span><\/h1>\r\n <p>Streetwear premium terinspirasi oleh legendaris Metallica, Megadeth, dan Slayer. Kualitas audio-visual untuk generasi metal.<\/p>\r\n <button class=\"btn-main\">SHOP NEW ARRIVAL<\/button>\r\n <\/section>\r\n\r\n \r\n <section id=\"apparel\">\r\n <h2 class=\"section-title\">THE COLLECTION<\/h2>\r\n <div class=\"categories\">\r\n <div class=\"cat-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1529374255404-311a2a4f1fd9?q=80&w=1000&auto=format&fit=crop\" alt=\"T-Shirt\">\r\n <div class=\"cat-overlay\">\r\n <h3>BAND TEES<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556905055-8f358a7a47b2?q=80&w=1000&auto=format&fit=crop\" alt=\"Hoodie\">\r\n <div class=\"cat-overlay\">\r\n <h3>HEAVY HOODIES<\/h3>\r\n <\/div>\r\n <\/div\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>METAL UP YOUR FASHION METAL UP YOUR FASHION APPAREL VINYLS ACCESSORIES THE STORY WEAR THE NOISE Streetwear premium terinspirasi oleh legendaris Metallica, Megadeth, dan Slayer. Kualitas audio-visual untuk generasi metal. SHOP NEW ARRIVAL THE COLLECTION BAND TEES HEAVY HOODIES<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45"}],"version-history":[{"count":4,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages\/45\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n METAL UP YOUR FASHION<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Roboto:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* --- RESET & VARIABLES --- *\/\r\n :root {\r\n --bg-color: #0a0a0a;\r\n --card-bg: #141414;\r\n --text-main: #ffffff;\r\n --text-muted: #888888;\r\n --accent-red: #b30000; \/* Darah *\/\r\n --accent-gold: #d4af37; \/* Emas *\/\r\n --font-head: 'Bebas Neue', sans-serif;\r\n --font-body: 'Roboto', sans-serif;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-color);\r\n color: var(--text-main);\r\n font-family: var(--font-body);\r\n overflow-x: hidden;\r\n }\r\n\r\n a { text-decoration: none; color: inherit; transition: 0.3s; }\r\n ul { list-style: none; }\r\n\r\n \/* --- NAVIGATION --- *\/\r\n nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px 5%;\r\n position: fixed;\r\n width: 100%;\r\n top: 0;\r\n z-index: 1000;\r\n background: rgba(10, 10, 10, 0.9);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 1px solid #222;\r\n }\r\n\r\n .logo {\r\n font-family: var(--font-head);\r\n font-size: 2rem;\r\n letter-spacing: 2px;\r\n color: var(--text-main);\r\n }\r\n \r\n .logo span { color: var(--accent-red); }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 30px;\r\n }\r\n\r\n .nav-links a {\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 700;\r\n }\r\n\r\n .nav-links a:hover { color: var(--accent-red); }\r\n\r\n .nav-icons i {\r\n margin-left: 20px;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n }\r\n\r\n \/* --- HERO SECTION --- *\/\r\n .hero {\r\n height: 100vh;\r\n background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('https:\/\/images.unsplash.com\/photo-1470225620780-dba8ba36b745?q=80&w=2070&auto=format&fit=crop');\r\n background-size: cover;\r\n background-position: center;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n padding: 0 20px;\r\n }\r\n\r\n .hero h1 {\r\n font-family: var(--font-head);\r\n font-size: 6rem;\r\n line-height: 0.9;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n text-shadow: 0 0 20px rgba(0,0,0,0.8);\r\n }\r\n\r\n .hero p {\r\n font-size: 1.2rem;\r\n color: #ccc;\r\n margin-bottom: 40px;\r\n max-width: 600px;\r\n }\r\n\r\n .btn-main {\r\n padding: 15px 40px;\r\n background-color: var(--accent-red);\r\n color: white;\r\n font-family: var(--font-head);\r\n font-size: 1.5rem;\r\n letter-spacing: 2px;\r\n border: none;\r\n cursor: pointer;\r\n clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);\r\n transition: 0.3s;\r\n }\r\n\r\n .btn-main:hover {\r\n background-color: white;\r\n color: black;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* --- SECTIONS GENERAL --- *\/\r\n section {\r\n padding: 80px 5%;\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-head);\r\n font-size: 3rem;\r\n text-align: center;\r\n margin-bottom: 60px;\r\n text-transform: uppercase;\r\n border-bottom: 2px solid var(--accent-red);\r\n display: inline-block;\r\n padding-bottom: 10px;\r\n position: relative;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n\r\n \/* --- CATEGORIES --- *\/\r\n .categories {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .cat-card {\r\n height: 300px;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n\r\n .cat-card img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: 0.5s;\r\n filter: grayscale(100%);\r\n }\r\n\r\n .cat-card:hover img {\r\n transform: scale(1.1);\r\n filter: grayscale(0%);\r\n }\r\n\r\n .cat-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 20px;\r\n background: linear-gradient(transparent, black);\r\n }\r\n\r\n .cat-overlay h3 {\r\n font-family: var(--font-head);\r\n font-size: 2rem;\r\n }\r\n\r\n \/* --- PRODUCT GRID --- *\/\r\n .product-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n .product-card {\r\n background-color: var(--card-bg);\r\n border: 1px solid #222;\r\n transition: 0.3s;\r\n }\r\n\r\n .product-card:hover {\r\n border-color: var(--accent-red);\r\n }\r\n\r\n .product-img {\r\n width: 100%;\r\n height: 300px;\r\n background-color: #1a1a1a;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .product-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n mix-blend-mode: luminosity; \/* Efek metalik *\/\r\n }\r\n\r\n .product-info {\r\n padding: 20px;\r\n }\r\n\r\n .product-cat {\r\n color: var(--accent-red);\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n font-weight: bold;\r\n }\r\n\r\n .product-title {\r\n font-family: var(--font-head);\r\n font-size: 1.5rem;\r\n margin: 5px 0;\r\n }\r\n\r\n .product-price {\r\n font-size: 1.1rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .add-btn {\r\n width: 100%;\r\n padding: 10px;\r\n margin-top: 15px;\r\n background: transparent;\r\n border: 1px solid white;\r\n color: white;\r\n cursor: pointer;\r\n text-transform: uppercase;\r\n font-weight: bold;\r\n transition: 0.3s;\r\n }\r\n\r\n .add-btn:hover {\r\n background: white;\r\n color: black;\r\n }\r\n\r\n \/* --- VINYL SECTION --- *\/\r\n .vinyl-section {\r\n background-color: #0f0f0f;\r\n border-top: 1px solid #222;\r\n border-bottom: 1px solid #222;\r\n }\r\n\r\n .vinyl-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 50px;\r\n }\r\n\r\n .vinyl-item {\r\n text-align: center;\r\n width: 300px;\r\n }\r\n\r\n .vinyl-cover {\r\n width: 300px;\r\n height: 300px;\r\n border-radius: 50%;\r\n background: #000;\r\n border: 5px solid #111;\r\n margin: 0 auto 20px;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 0 30px rgba(0,0,0,0.8);\r\n animation: spin 10s linear infinite;\r\n animation-play-state: paused;\r\n }\r\n\r\n .vinyl-item:hover .vinyl-cover {\r\n animation-play-state: running;\r\n }\r\n\r\n .vinyl-cover img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .vinyl-label {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 80px;\r\n height: 80px;\r\n background: var(--accent-red);\r\n border-radius: 50%;\r\n z-index: 2;\r\n }\r\n\r\n @keyframes spin {\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* --- FOOTER --- *\/\r\n footer {\r\n padding: 50px 5%;\r\n background-color: black;\r\n text-align: center;\r\n border-top: 3px solid var(--accent-red);\r\n }\r\n\r\n .footer-logo {\r\n font-family: var(--font-head);\r\n font-size: 3rem;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .socials a {\r\n margin: 0 10px;\r\n font-size: 1.5rem;\r\n color: var(--text-muted);\r\n }\r\n\r\n .socials a:hover { color: white; }\r\n\r\n .copyright {\r\n margin-top: 30px;\r\n color: #444;\r\n font-size: 0.8rem;\r\n }\r\n\r\n \/* --- MOBILE RESPONSIVE --- *\/\r\n @media (max-width: 768px) {\r\n .hero h1 { font-size: 3.5rem; }\r\n .nav-links { display: none; } \/* Simplified for demo *\/\r\n .categories { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <nav>\r\n <div class=\"logo\">METAL UP <span>YOUR FASHION<\/span><\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#apparel\">APPAREL<\/a><\/li>\r\n <li><a href=\"#vinyls\">VINYLS<\/a><\/li>\r\n <li><a href=\"#accessories\">ACCESSORIES<\/a><\/li>\r\n <li><a href=\"#about\">THE STORY<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-icons\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <section class=\"hero\">\r\n <h1>WEAR THE <br> <span style=\"color:var(--accent-red)\">NOISE<\/span><\/h1>\r\n <p>Streetwear premium terinspirasi oleh legendaris Metallica, Megadeth, dan Slayer. Kualitas audio-visual untuk generasi metal.<\/p>\r\n <button class=\"btn-main\">SHOP NEW ARRIVAL<\/button>\r\n <\/section>\r\n\r\n \r\n <section id=\"apparel\">\r\n <h2 class=\"section-title\">THE COLLECTION<\/h2>\r\n <div class=\"categories\">\r\n <div class=\"cat-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1529374255404-311a2a4f1fd9?q=80&w=1000&auto=format&fit=crop\" alt=\"T-Shirt\">\r\n <div class=\"cat-overlay\">\r\n <h3>BAND TEES<\/h3>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1556905055-8f358a7a47b2?q=80&w=1000&auto=format&fit=crop\" alt=\"Hoodie\">\r\n <div class=\"cat-overlay\">\r\n <h3>HEAVY HOODIES<\/h3>\r\n <\/div>\r\n <\/div\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>METAL UP YOUR FASHION METAL UP YOUR FASHION APPAREL VINYLS ACCESSORIES THE STORY WEAR THE NOISE Streetwear premium terinspirasi oleh legendaris Metallica, Megadeth, dan Slayer. Kualitas audio-visual untuk generasi metal. SHOP NEW ARRIVAL THE COLLECTION BAND TEES HEAVY HOODIES<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45"}],"version-history":[{"count":4,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=\/wp\/v2\/pages\/45\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/marchel.tekajesatu2023-smkmerdekabdg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}