1<!DOCTYPE html><!--build_1768502622057--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/4cf2300e9c8272f7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/00b474d8ae8b8657.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/afe723a53e8891de.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-e53b849bd1950eab.js"/>
1<script src="/_next/static/chunks/4bd1b696-f785427dddbba9fb.js" async=""></script>
1<script src="/_next/static/chunks/1255-d05e311b0537c2dc.js" async=""></script>
1<script src="/_next/static/chunks/main-app-6ab7eaf3ad986b5a.js" async=""></script>
1<script src="/_next/static/chunks/2663-f6bab35dabadac30.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-b05fa6246a3f1f74.js" async=""></script>
1<script src="/_next/static/chunks/app/(public)/layout-bf9bad5cc5057b6f.js" async=""></script>
1<script src="/_next/static/chunks/2619-3c9e02e22d10480a.js" async=""></script>
1<script src="/_next/static/chunks/7050-69fe48aa8bf151d6.js" async=""></script>
1<script src="/_next/static/chunks/app/(public)/articles/page-f7513cdcc1de0da5.js" async=""></script>
1<link rel="preload" href="https://cdn.tailwindcss.com" as="script"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/><meta http-equiv="Pragma" content="no-cache"/><meta http-equiv="Expires" content="0"/><meta name="build-id" content="1768502660697"/><meta name="msapplication-TileColor" content="#066fd1"/><meta name="theme-color" content="#066fd1"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="mobile-web-app-capable" content="yes"/><meta name="HandheldFriendly" content="True"/><meta name="MobileOptimized" content="320"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><meta name="next-size-adjust" content=""/><title>Halal Digital</title><meta name="description" content="Marketplace Produk Digital & Kursus Online"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="82x58"/><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
1<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js" defer=""></script>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="__variable_188709 __variable_9a8899 layout-fluid"><div hidden=""><!--$--><!--/$--></div><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/><link rel="stylesheet" href="/halal.css"/>
1<script>(self.__next_s=self.__next_s||[]).push(["https://cdn.tailwindcss.com",{}])</script>
1<script>(self.__next_s=self.__next_s||[]).push([0,{"children":"\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: {\n 50: '#ecfdf5',\n 100: '#d1fae5',\n 200: '#a7f3d0',\n 300: '#6ee7b7',\n 400: '#34d399',\n 500: '#10b981',\n 600: '#059669',\n 700: '#047857',\n 800: '#065f46',\n 900: '#064e3b',\n },\n teal: {\n 50: '#f0fdfa',\n 100: '#ccfbf1',\n 200: '#99f6e4',\n 300: '#5eead4',\n 400: '#2dd4bf',\n 500: '#14b8a6',\n 600: '#0d9488',\n 700: '#0f766e',\n 800: '#115e59',\n 900: '#134e4a',\n }\n }\n }\n }\n }\n ","id":"tailwind-config"}])</script>
1<style> 2 /* CRITICAL: Reset Tabler layout-fluid margin */ 3 .layout-fluid { 4 margin: 0 !important; 5 padding: 0 !important; 6 } 7 8 /* Reset body and html margins */ 9 html, body { 10 margin: 0 !important; 11 padding: 0 !important; 12 } 13 14 /* Public wrapper reset */ 15 .public-wrapper { 16 font-family: 'Inter', sans-serif !important; 17 -webkit-font-smoothing: antialiased; 18 -moz-osx-font-smoothing: grayscale; 19 margin: 0 !important; 20 padding: 0 !important; 21 width: 100% !important; 22 } 23 24 /* Container styles */ 25 .public-wrapper .container { 26 max-width: 1280px !important; 27 margin-left: auto !important; 28 margin-right: auto !important; 29 padding-left: 1rem !important; 30 padding-right: 1rem !important; 31 width: 100% !important; 32 } 33 34 @media (min-width: 1024px) { 35 .public-wrapper .container { 36 padding-left: 2rem !important; 37 padding-right: 2rem !important; 38 } 39 } 40 41 /* Override Tabler grid - FORCE grid display */ 42 .public-wrapper .grid { 43 display: grid !important; 44 } 45 46 .public-wrapper .grid-cols-1 { 47 grid-template-columns: repeat(1, minmax(0, 1fr)) !important; 48 } 49 50 /* SM breakpoint (640px) */ 51 @media (min-width: 640px) { 52 .public-wrapper .sm\:grid-cols-2 { 53 grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 54 } 55 } 56 57 /* MD breakpoint (768px) - CRITICAL for footer and Why Halal section */ 58 @media (min-width: 768px) { 59 .public-wrapper .md\:grid-cols-2 { 60 grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 61 } 62 .public-wrapper .md\:grid-cols-3 { 63 grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 64 } 65 .public-wrapper .md\:grid-cols-4 { 66 grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 67 } 68 } 69 70 /* LG breakpoint (1024px) */ 71 @media (min-width: 1024px) { 72 .public-wrapper .lg\:grid-cols-2 { 73 grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 74 } 75 .public-wrapper .lg\:grid-cols-3 { 76 grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 77 } 78 .public-wrapper .lg\:grid-cols-4 { 79 grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 80 } 81 } 82 83 /* XL breakpoint (1280px) */ 84 @media (min-width: 1280px) { 85 .public-wrapper .xl\:grid-cols-3 { 86 grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 87 } 88 .public-wrapper .xl\:grid-cols-4 { 89 grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 90 } 91 } 92 93 /* Gap utilities */ 94 .public-wrapper .gap-6 { 95 gap: 1.5rem !important; 96 } 97 .public-wrapper .gap-8 { 98 gap: 2rem !important; 99 } 100 .public-wrapper .gap-12 { 101 gap: 3rem !important; 102 } 103 104 /* Margin bottom utilities */ 105 .public-wrapper .mb-6 { 106 margin-bottom: 1.5rem !important; 107 } 108 .public-wrapper .mb-8 { 109 margin-bottom: 2rem !important; 110 } 111 .public-wrapper .mb-12 { 112 margin-bottom: 3rem !important; 113 } 114 115 /* CRITICAL: Typography overrides for Tabler conflicts */ 116 /* Note: margin reset uses !important, but font-size/line-height don't, 117 allowing inline styles to set specific sizes */ 118 .public-wrapper h1 { 119 margin: 0 !important; 120 } 121 .public-wrapper h2 { 122 margin: 0 !important; 123 } 124 .public-wrapper h3 { 125 margin: 0 !important; 126 } 127 .public-wrapper h4 { 128 margin-top: 0 !important; 129 } 130 131 /* Font size utilities */ 132 .public-wrapper .text-xs { 133 font-size: 0.75rem !important; 134 line-height: 1rem !important; 135 } 136 .public-wrapper .text-sm { 137 font-size: 0.875rem !important; 138 line-height: 1.25rem !important; 139 } 140 .public-wrapper .text-base { 141 font-size: 1rem !important; 142 line-height: 1.5rem !important; 143 } 144 .public-wrapper .text-lg { 145 font-size: 1.125rem !important; 146 line-height: 1.75rem !important; 147 } 148 .public-wrapper .text-xl { 149 font-size: 1.25rem !important; 150 line-height: 1.75rem !important; 151 } 152 .public-wrapper .text-2xl { 153 font-size: 1.5rem !important; 154 line-height: 2rem !important; 155 } 156 .public-wrapper .text-3xl { 157 font-size: 1.875rem !important; 158 line-height: 2.25rem !important; 159 } 160 .public-wrapper .text-4xl { 161 font-size: 2.25rem !important; 162 line-height: 2.5rem !important; 163 } 164 165 /* Font weight utilities */ 166 .public-wrapper .font-medium { 167 font-weight: 500 !important; 168 } 169 .public-wrapper .font-semibold { 170 font-weight: 600 !important; 171 } 172 .public-wrapper .font-bold { 173 font-weight: 700 !important; 174 } 175 .public-wrapper .font-extrabold { 176 font-weight: 800 !important; 177 } 178 .public-wrapper .font-black { 179 font-weight: 900 !important; 180 } 181
182 /* CRITICAL: Background color overrides for buttons */ 183 .public-wrapper .bg-teal-500 { 184 background-color: #14b8a6 !important; 185 } 186 .public-wrapper .bg-teal-600 { 187 background-color: #0d9488 !important; 188 } 189 .public-wrapper .hover:bg-teal-600:hover { 190 background-color: #0d9488 !important; 191 } 192 .public-wrapper .bg-primary-500 { 193 background-color: #10b981 !important; 194 } 195 .public-wrapper .bg-primary-600 { 196 background-color: #059669 !important; 197 } 198 .public-wrapper .bg-primary-700 { 199 background-color: #047857 !important; 200 } 201 .public-wrapper .hover:bg-primary-600:hover { 202 background-color: #059669 !important; 203 } 204 .public-wrapper .hover:bg-primary-500:hover { 205 background-color: #10b981 !important; 206 } 207 .public-wrapper .hover:bg-primary-700:hover { 208 background-color: #047857 !important; 209 } 210 .public-wrapper .bg-slate-800 { 211 background-color: #1e293b !important; 212 } 213 .public-wrapper .bg-slate-900 { 214 background-color: #0f172a !important; 215 } 216 .public-wrapper .hover:bg-slate-800:hover { 217 background-color: #1e293b !important; 218 } 219 .public-wrapper .hover:bg-slate-700:hover { 220 background-color: #334155 !important; 221 } 222 .public-wrapper .bg-red-500 { 223 background-color: #ef4444 !important; 224 } 225 .public-wrapper .bg-yellow-400 { 226 background-color: #facc15 !important; 227 } 228 229 /* Text colors */ 230 .public-wrapper .text-white { 231 color: #ffffff !important; 232 } 233 .public-wrapper .text-gray-300 { 234 color: #d1d5db !important; 235 } 236 .public-wrapper .text-slate-300 { 237 color: #cbd5e1 !important; 238 } 239 .public-wrapper .text-slate-400 { 240 color: #94a3b8 !important; 241 } 242 .public-wrapper .text-slate-500 { 243 color: #64748b !important; 244 } 245 .public-wrapper .text-primary-500 { 246 color: #10b981 !important; 247 } 248 .public-wrapper .text-primary-300 { 249 color: #6ee7b7 !important; 250 } 251 .public-wrapper .hover:text-primary-500:hover { 252 color: #10b981 !important; 253 } 254 .public-wrapper .hover:text-white:hover { 255 color: #ffffff !important; 256 } 257 258 /* Input styling */ 259 .public-wrapper input { 260 background-color: inherit !important; 261 color: inherit !important; 262 border: none !important; 263 } 264 .public-wrapper input::placeholder { 265 color: #64748b !important; 266 } 267 .public-wrapper input:focus { 268 outline: none !important; 269 box-shadow: 0 0 0 2px #10b981 !important; 270 } 271 272 /* Rounded utilities */ 273 .public-wrapper .rounded-full { 274 border-radius: 9999px !important; 275 } 276 .public-wrapper .rounded-xl { 277 border-radius: 0.75rem !important; 278 } 279 .public-wrapper .rounded-lg { 280 border-radius: 0.5rem !important; 281 } 282 .public-wrapper .rounded-2xl { 283 border-radius: 1rem !important; 284 } 285 .public-wrapper .rounded-3xl { 286 border-radius: 1.5rem !important; 287 } 288 289 /* Override Tabler column classes */ 290 .public-wrapper [class*="col-"] { 291 flex: none !important; 292 width: auto !important; 293 max-width: none !important; 294 } 295 296 /* Reset row */ 297 .public-wrapper .row { 298 display: flex !important; 299 flex-wrap: wrap !important; 300 margin-left: 0 !important; 301 margin-right: 0 !important; 302 } 303 304 /* Full width sections */ 305 .public-wrapper section { 306 width: 100% !important; 307 margin-left: 0 !important; 308 margin-right: 0 !important; 309 } 310 311 /* Footer full width */ 312 .public-wrapper footer { 313 width: 100% !important; 314 margin-left: 0 !important; 315 margin-right: 0 !important; 316 } 317 318 /* Nav full width */ 319 .public-wrapper nav { 320 width: 100% !important; 321 left: 0 !important; 322 right: 0 !important; 323 } 324 325 /* Reset button styles */ 326 .public-wrapper button, 327 .public-wrapper a { 328 text-decoration: none; 329 } 330 331 /* CRITICAL: Flex direction overrides for responsive layouts */ 332 .public-wrapper .lg\:flex-row { 333 flex-direction: column; 334 } 335 @media (min-width: 1024px) { 336 .public-wrapper .lg\:flex-row { 337 flex-direction: row !important; 338 } 339 } 340 341 /* Hidden/Block responsive utilities */ 342 .public-wrapper .hidden { 343 display: none !important; 344 } 345 .public-wrapper .lg\:block { 346 display: none !important; 347 } 348 .public-wrapper .md\:flex { 349 display: none !important; 350 } 351 .public-wrapper .sm\:flex { 352 display: none !important; 353 } 354 .public-wrapper .lg\:hidden { 355 display: block !important; 356 } 357 @media (min-width: 640px) { 358 .public-wrapper .sm\:flex { 359 display: flex !important; 360 } 361 } 362 @media (min-width: 768px) { 363 .public-wrapper .md\:flex { 364 display: flex !important; 365 } 366 } 367 @media (min-width: 1024px) { 368 .public-wrapper .lg\:block { 369 display: block !important; 370 } 371 .public-wrapper .lg\:flex { 372 display: flex !important; 373 } 374 .public-wrapper .lg\:hidden { 375 display: none !important; 376 } 377 } 378 379 /* Responsive gap overrides */ 380 .public-wrapper .lg\:gap-16 { 381 gap: 48px; 382 } 383 @media (min-width: 1024px) { 384 .public-wrapper .lg\:gap-16 { 385 gap: 64px !important; 386 } 387 } 388 389 /* Responsive font sizes */ 390 .public-wrapper .lg\:text-6xl { 391 font-size: 3rem; 392 } 393 @media (min-width: 1024px) { 394 .public-wrapper .lg\:text-6xl { 395 font-size: 3.75rem !important; 396 line-height: 1 !important; 397 } 398 } 399 400 /* Product Detail Page Layout - CRITICAL */ 401 .public-wrapper .product-detail-layout { 402 display: flex !important; 403 flex-direction: column !important; 404 gap: 32px !important; 405 } 406 407 .public-wrapper .product-detail-content { 408 width: 100% !important; 409 } 410 411 .public-wrapper .product-detail-sidebar { 412 width: 100% !important; 413 } 414 415 .public-wrapper .product-detail-sidebar-sticky { 416 position: relative !important; 417 } 418 419 @media (min-width: 1024px) { 420 .public-wrapper .product-detail-layout { 421 flex-direction: row !important; 422 gap: 48px !important; 423 align-items: flex-start !important; 424 } 425 426 .public-wrapper .product-detail-content { 427 flex: 1 !important; 428 min-width: 0 !important; 429 } 430 431 .public-wrapper .product-detail-sidebar { 432 width: 340px !important; 433 flex-shrink: 0 !important; 434 order: 0 !important; 435 } 436 437 .public-wrapper .product-detail-sidebar-sticky { 438 position: sticky !important; 439 top: 100px !important; 440 } 441 } 442 </style><div class="public-wrapper bg-gray-50 text-slate-900"><style> 443 .articles-page h1.page-title { 444 font-size: 2.5rem !important; 445 font-weight: 900 !important; 446 color: #0f172a !important; 447 margin-bottom: 24px !important; 448 } 449 .articles-page h3.card-title { 450 font-size: 1.25rem !important; 451 font-weight: 700 !important; 452 color: #0f172a !important; 453 margin-bottom: 12px !important; 454 line-height: 1.3 !important; 455 } 456 @media (max-width: 768px) { 457 .articles-page h1.page-title { 458 font-size: 1.875rem !important; 459 } 460 } 461 </style><style> 462 .navbar-logo { 463 font-size: 1.5rem; 464 font-weight: 900; 465 letter-spacing: -0.05em; 466 color: #ffffff; 467 text-decoration: none; 468 white-space: nowrap; 469 } 470 @media (max-width: 480px) { 471 .navbar-logo { 472 font-size: 1.25rem; 473 } 474 .navbar-container { 475 padding: 0 12px !important; 476 } 477 .navbar-actions { 478 gap: 8px !important; 479 } 480 } 481 </style><nav style="position:fixed;top:0;left:0;right:0;z-index:50;background-color:#0f172a;padding:16px 0"><div class="navbar-container" style="max-width:1280px;margin:0 auto;padding:0 16px"><div style="display:flex;align-items:center;justify-content:space-between;gap:12px"><div style="display:flex;align-items:center;gap:32px;min-width:0"><a class="navbar-logo" href="/">HALAL<span style="color:#10b981">DIGITAL</span>.</a><div class="hidden lg:flex" style="align-items:center;gap:24px;font-weight:500;font-size:0.875rem;color:#d1d5db"><a style="color:#d1d5db;text-decoration:none" href="/products">Courses</a><a style="color:#d1d5db;text-decoration:none" href="/products">E-Books</a><a style="color:#d1d5db;text-decoration:none" href="/products">Assets</a><a style="color:#d1d5db;text-decoration:none" href="/articles">Blog</a></div></div><div class="hidden md:flex" style="flex:1;max-width:400px;margin:0 16px"><div style="position:relative;width:100%;border-radius:9999px;background-color:#1e293b"><div style="position:absolute;top:50%;left:12px;transform:translateY(-50%);color:#64748b;pointer-events:none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></div><input type="text" placeholder="Search..." style="width:100%;padding:10px 16px 10px 40px;border-radius:9999px;font-size:0.875rem;background-color:transparent;color:#ffffff;border:none;outline:none"/></div></div><div class="navbar-actions" style="display:flex;align-items:center;gap:12px;flex-shrink:0"><button style="position:relative;padding:8px;border-radius:9999px;background-color:transparent;border:none;color:#ffffff;cursor:pointer;flex-shrink:0"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg><span style="position:absolute;top:4px;right:4px;height:8px;width:8px;background-color:#ef4444;border-radius:9999px;border:2px solid #0f172a"></span></button><div class="hidden sm:flex" style="align-items:center;gap:12px"><a style="font-weight:500;font-size:0.875rem;padding:8px 16px;border-radius:8px;color:#d1d5db;text-decoration:none" href="/auth/login">Log in</a><a style="background-color:#10b981;color:#ffffff;font-size:0.875rem;font-weight:700;padding:10px 20px;border-radius:9999px;text-decoration:none;box-shadow:0 4px 14px rgba(16, 185, 129, 0.3)" href="/auth/register">Join for Free</a></div><button class="lg:hidden" style="padding:8px;color:#ffffff;background-color:transparent;border:none;cursor:pointer;flex-shrink:0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button></div></div></div><div style="display:none;position:absolute;top:100%;left:0;right:0;background-color:#ffffff;box-shadow:0 10px 40px rgba(0,0,0,0.1)"><div style="padding:16px;display:flex;flex-direction:column;gap:16px"><div style="position:relative"><div style="position:absolute;top:12px;left:12px;color:#94a3b8"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></div><input type="text" placeholder="Search..." style="width:100%;background-color:#f1f5f9;padding:10px 16px 10px 40px;border-radius:8px;font-size:0.875rem;border:none;outline:none"/></div><a style="font-weight:500;color:#334155;padding:8px 0;border-bottom:1px solid #f1f5f9;text-decoration:none" href="/products">Courses</a><a style="font-weight:500;color:#334155;padding:8px 0;border-bottom:1px solid #f1f5f9;text-decoration:none" href="/products">E-Books</a><a style="font-weight:500;color:#334155;padding:8px 0;border-bottom:1px solid #f1f5f9;text-decoration:none" href="/products">Digital Assets</a><a style="font-weight:500;color:#334155;padding:8px 0;border-bottom:1px solid #f1f5f9;text-decoration:none" href="/articles">Blog</a><div style="display:flex;flex-direction:column;gap:12px;margin-top:8px"><a style="width:100%;font-weight:700;color:#334155;border:1px solid #e2e8f0;padding:12px;border-radius:8px;text-decoration:none;text-align:center;display:block" href="/auth/login">Log in</a><a style="width:100%;background-color:#10b981;color:#ffffff;font-weight:700;padding:12px;border-radius:8px;text-decoration:none;text-align:center;display:block" href="/auth/login">Join for Free</a></div></div></div></nav><div class="articles-page" style="background-color:#f8fafc;min-height:100vh;padding-top:96px;padding-bottom:80px"><div style="max-width:1280px;margin:0 auto;padding:0 16px"><div style="display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:48px"><span style="color:#059669;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;font-size:0.875rem;margin-bottom:8px">Halal Digital Blog</span><h1 class="page-title">Wawasan & Inspirasi Digital</h1><p style="color:#64748b;max-width:672px;font-size:1.125rem;margin-bottom:32px">Artikel terbaru seputar desain, teknologi, bisnis, dan fiqih muamalah untu
481k menunjang karir profesional Anda.</p><div style="position:relative;width:100%;max-width:512px"><div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#94a3b8"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></div><input type="text" placeholder="Cari artikel..." style="width:100%;padding-left:48px;padding-right:24px;padding-top:14px;padding-bottom:14px;border-radius:9999px;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,0.05);outline:none;background-color:#ffffff"/></div></div><div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:32px"><div style="background-color:#ffffff;border-radius:16px;overflow:hidden" class="animate-pulse"><div style="aspect-ratio:16/9;background-color:#e2e8f0"></div><div style="padding:24px"><div style="height:16px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px;width:60%"></div><div style="height:24px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px"></div><div style="height:16px;background-color:#e2e8f0;border-radius:4px;width:80%"></div></div></div><div style="background-color:#ffffff;border-radius:16px;overflow:hidden" class="animate-pulse"><div style="aspect-ratio:16/9;background-color:#e2e8f0"></div><div style="padding:24px"><div style="height:16px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px;width:60%"></div><div style="height:24px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px"></div><div style="height:16px;background-color:#e2e8f0;border-radius:4px;width:80%"></div></div></div><div style="background-color:#ffffff;border-radius:16px;overflow:hidden" class="animate-pulse"><div style="aspect-ratio:16/9;background-color:#e2e8f0"></div><div style="padding:24px"><div style="height:16px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px;width:60%"></div><div style="height:24px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px"></div><div style="height:16px;background-color:#e2e8f0;border-radius:4px;width:80%"></div></div></div><div style="background-color:#ffffff;border-radius:16px;overflow:hidden" class="animate-pulse"><div style="aspect-ratio:16/9;background-color:#e2e8f0"></div><div style="padding:24px"><div style="height:16px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px;width:60%"></div><div style="height:24px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px"></div><div style="height:16px;background-color:#e2e8f0;border-radius:4px;width:80%"></div></div></div><div style="background-color:#ffffff;border-radius:16px;overflow:hidden" class="animate-pulse"><div style="aspect-ratio:16/9;background-color:#e2e8f0"></div><div style="padding:24px"><div style="height:16px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px;width:60%"></div><div style="height:24px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px"></div><div style="height:16px;background-color:#e2e8f0;border-radius:4px;width:80%"></div></div></div><div style="background-color:#ffffff;border-radius:16px;overflow:hidden" class="animate-pulse"><div style="aspect-ratio:16/9;background-color:#e2e8f0"></div><div style="padding:24px"><div style="height:16px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px;width:60%"></div><div style="height:24px;background-color:#e2e8f0;border-radius:4px;margin-bottom:12px"></div><div style="height:16px;background-color:#e2e8f0;border-radius:4px;width:80%"></div></div></div></div></div></div><footer style="background-color:#0f172a;color:#ffffff;padding-top:64px;padding-bottom:32px;border-top:1px solid #1e293b"><div style="max-width:1280px;margin:0 auto;padding:0 16px"><div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:48px;margin-bottom:48px"><div><a style="font-size:1.5rem;font-weight:900;letter-spacing:-0.05em;color:#ffffff;text-decoration:none;display:block;margin-bottom:24px" href="/">HALAL<span style="color:#10b981">DIGITAL</span>.</a><p style="color:#94a3b8;font-size:0.875rem;line-height:1.6">Marketplace pertama yang mengkurasi produk digital berkualitas dengan prinsip syariah.</p></div><div><h4 style="font-weight:700;font-size:1.125rem;color:#ffffff;margin-bottom:24px">Platform</h4><ul style="display:flex;flex-direction:column;gap:12px"><li><a style="color:#94a3b8;text-decoration:none;font-size:0.875rem" href="/products">Browse Courses</a></li><li><a style="color:#94a3b8;text-decoration:none;font-size:0.875rem" href="/products">Digital Assets</a></li></ul></div><div><h4 style="font-weight:700;font-size:1.125rem;color:#ffffff;margin-bottom:24px">Company</h4><ul style="display:flex;flex-direction:column;gap:12px"><li><a style="color:#94a3b8;text-decoration:none;font-size:0.875rem" href="#">About Us</a></li><li><a style="color:#94a3b8;text-decoration:none;font-size:0.875rem" href="/articles">Blog</a></li></ul></div><div><h4 style="font-weight:700;font-size:1.125rem;color:#ffffff;margin-bottom:24px">Subscribe</h4><div style="display:flex;flex-direction:column;gap:12px"><input type="email" placeholder="Email address" style="background-color:#1e293b;border:1px solid #334155;color:#ffffff;padding:12px 16px;border-radius:8px;font-size:0.875rem;outline:none"/><button style="background-color:#10b981;color:#ffffff;font-weight:700;padding:12px;border-radius:8px;border:none;cursor:pointer">Subscribe</button></div></div></div><div style="border-top:1px solid #1e293b;padding-top:32px;text-align:center"><p style="color:#64748b;font-size:0.75rem">© 2026 Halal Digital. All rights reserved.</p></div></div></footer><!--$--><!--/$--></div><div data-rht-toaster="" style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"></div>
481<script src="/_next/static/chunks/webpack-e53b849bd1950eab.js" id="_R_" async=""></script>
481<script>(self.__next_f=self.__next_f||[]).push([0])</script>
481<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[9766,[],\"\"]\n3:I[8924,[],\"\"]\n4:I[5606,[\"2663\",\"static/chunks/2663-f6bab35dabadac30.js\",\"7177\",\"static/chunks/app/layout-b05fa6246a3f1f74.js\"],\"default\"]\n5:I[9119,[\"2663\",\"static/chunks/2663-f6bab35dabadac30.js\",\"7177\",\"static/chunks/app/layout-b05fa6246a3f1f74.js\"],\"GlobalToastProvider\"]\n6:I[1402,[\"1816\",\"static/chunks/app/(public)/layout-bf9bad5cc5057b6f.js\"],\"\"]\nc:I[7150,[],\"\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/00b474d8ae8b8657.css\",\"style\"]\n:HL[\"/_next/static/css/afe723a53e8891de.css\",\"style\"]\n"])</script>
481<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"build-1768502622057\",\"p\":\"\",\"c\":[\"\",\"articles\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(public)\",{\"children\":[\"articles\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/00b474d8ae8b8657.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/afe723a53e8891de.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, viewport-fit=cover\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"X-UA-Compatible\",\"content\":\"ie=edge\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Cache-Control\",\"content\":\"no-cache, no-store, must-revalidate\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Pragma\",\"content\":\"no-cache\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Expires\",\"content\":\"0\"}],[\"$\",\"meta\",null,{\"name\":\"build-id\",\"content\":\"1768502660697\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#066fd1\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#066fd1\"}],[\"$\",\"meta\",null,{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black-translucent\"}],[\"$\",\"meta\",null,{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",null,{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",null,{\"name\":\"HandheldFriendly\",\"content\":\"True\"}],[\"$\",\"meta\",null,{\"name\":\"MobileOptimized\",\"content\":\"320\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"href\":\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\u0026display=swap\",\"rel\":\"stylesheet\"}],[\"$\",\"script\",null,{\"src\":\"https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js\",\"defer\":true}]]}],[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 layout-fluid\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{}]]}]]}]]}],{\"children\":[\"(public)\",[\"$\",\"$1\",\"c\",{\"children\":[null,[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.
481com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"href\":\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900\u0026display=swap\",\"rel\":\"stylesheet\"}],[\"$\",\"link\",null,{\"rel\":\"stylesheet\",\"href\":\"/halal.css\"}],[\"$\",\"$L6\",null,{\"src\":\"https://cdn.tailwindcss.com\",\"strategy\":\"beforeInteractive\"}],[\"$\",\"$L6\",null,{\"id\":\"tailwind-config\",\"strategy\":\"beforeInteractive\",\"children\":\"\\n tailwind.config = {\\n theme: {\\n extend: {\\n colors: {\\n primary: {\\n 50: '#ecfdf5',\\n 100: '#d1fae5',\\n 200: '#a7f3d0',\\n 300: '#6ee7b7',\\n 400: '#34d399',\\n 500: '#10b981',\\n 600: '#059669',\\n 700: '#047857',\\n 800: '#065f46',\\n 900: '#064e3b',\\n },\\n teal: {\\n 50: '#f0fdfa',\\n 100: '#ccfbf1',\\n 200: '#99f6e4',\\n 300: '#5eead4',\\n 400: '#2dd4bf',\\n 500: '#14b8a6',\\n 600: '#0d9488',\\n 700: '#0f766e',\\n 800: '#115e59',\\n 900: '#134e4a',\\n }\\n }\\n }\\n }\\n }\\n \"}],\"$L7\",\"$L8\"]]}],{\"children\":[\"articles\",\"$L9\",{\"children\":[\"__PAGE__\",\"$La\",{},null,false]},null,false]},null,false]},null,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"s\":false,\"S\":true}\n"])</script>
481<script>self.__next_f.push([1,"e:I[1959,[],\"ClientPageRoot\"]\nf:I[1443,[\"2619\",\"static/chunks/2619-3c9e02e22d10480a.js\",\"7050\",\"static/chunks/7050-69fe48aa8bf151d6.js\",\"3711\",\"static/chunks/app/(public)/articles/page-f7513cdcc1de0da5.js\"],\"default\"]\n12:I[4431,[],\"OutletBoundary\"]\n14:I[5278,[],\"AsyncMetadataOutlet\"]\n16:I[4431,[],\"ViewportBoundary\"]\n18:I[4431,[],\"MetadataBoundary\"]\n19:\"$Sreact.suspense\"\nd:T3451,"])</script>
481<script>self.__next_f.push([1,"\n /* CRITICAL: Reset Tabler layout-fluid margin */\n .layout-fluid {\n margin: 0 !important;\n padding: 0 !important;\n }\n \n /* Reset body and html margins */\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n }\n \n /* Public wrapper reset */\n .public-wrapper {\n font-family: 'Inter', sans-serif !important;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0 !important;\n padding: 0 !important;\n width: 100% !important;\n }\n \n /* Container styles */\n .public-wrapper .container {\n max-width: 1280px !important;\n margin-left: auto !important;\n margin-right: auto !important;\n padding-left: 1rem !important;\n padding-right: 1rem !important;\n width: 100% !important;\n }\n \n @media (min-width: 1024px) {\n .public-wrapper .container {\n padding-left: 2rem !important;\n padding-right: 2rem !important;\n }\n }\n \n /* Override Tabler grid - FORCE grid display */\n .public-wrapper .grid {\n display: grid !important;\n }\n \n .public-wrapper .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr)) !important;\n }\n \n /* SM breakpoint (640px) */\n @media (min-width: 640px) {\n .public-wrapper .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n }\n }\n \n /* MD breakpoint (768px) - CRITICAL for footer and Why Halal section */\n @media (min-width: 768px) {\n .public-wrapper .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n }\n .public-wrapper .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n .public-wrapper .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n }\n }\n \n /* LG breakpoint (1024px) */\n @media (min-width: 1024px) {\n .public-wrapper .lg\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n }\n .public-wrapper .lg\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n .public-wrapper .lg\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n }\n }\n \n /* XL breakpoint (1280px) */\n @media (min-width: 1280px) {\n .public-wrapper .xl\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n .public-wrapper .xl\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n }\n }\n \n /* Gap utilities */\n .public-wrapper .gap-6 {\n gap: 1.5rem !important;\n }\n .public-wrapper .gap-8 {\n gap: 2rem !important;\n }\n .public-wrapper .gap-12 {\n gap: 3rem !important;\n }\n \n /* Margin bottom utilities */\n .public-wrapper .mb-6 {\n margin-bottom: 1.5rem !important;\n }\n .public-wrapper .mb-8 {\n margin-bottom: 2rem !important;\n }\n .public-wrapper .mb-12 {\n margin-bottom: 3rem !important;\n }\n \n /* CRITICAL: Typography overrides for Tabler conflicts */\n /* Note: margin reset uses !important, but font-size/line-height don't,\n allowing inline styles to set specific sizes */\n .public-wrapper h1 {\n margin: 0 !important;\n }\n .public-wrapper h2 {\n margin: 0 !important;\n }\n .public-wrapper h3 {\n margin: 0 !important;\n }\n .public-wrapper h4 {\n margin-top: 0 !important;\n }\n \n /* Font size utilities */\n .public-wrapper .text-xs {\n font-size: 0.75rem !important;\n line-height: 1rem !important;\n }\n .public-wrapper .text-sm {\n font-size: 0.875rem !important;\n line-height: 1.25rem !important;\n }\n .public-wrapper .text-base {\n font-size: 1rem !important;\n line-height: 1.5rem !important;\n }\n .public-wrapper .text-lg {\n font-size: 1.125rem !important;\n line-height: 1.75rem !important;\n }\n .public-wrapper .text-xl {\n font-size: 1.25rem !important;\n line-height: 1.75rem !important;\n }\n .public-wrapper .text-2xl {\n font-size: 1.5rem !important;\n line-height: 2rem !important;\n }\n .public-wrapper .text-3xl {\n font-size: 1.875rem !important;\n line-height: 2.25rem !important;\n }\n .public-wrapper .text-4xl {\n font-size: 2.25rem !important;\n line-height: 2.5rem !important;\n }\n \n /* Font weight utilities */\n .public-wrapper .font-medium {\n font-weight: 500 !important;\n }\n .public-wrapper .font-semibold {\n font-weight: 600 !important;\n }\n .public-wrapper .font-bold {\n font-weight: 700 !important;\n }\n .public-wrapper .font-extrabold {\n font-weight: 800 !important;\n }\n .public-wrapper .font-black {\n font-weight: 900 !important;\n }
481\n \n /* CRITICAL: Background color overrides for buttons */\n .public-wrapper .bg-teal-500 {\n background-color: #14b8a6 !important;\n }\n .public-wrapper .bg-teal-600 {\n background-color: #0d9488 !important;\n }\n .public-wrapper .hover:bg-teal-600:hover {\n background-color: #0d9488 !important;\n }\n .public-wrapper .bg-primary-500 {\n background-color: #10b981 !important;\n }\n .public-wrapper .bg-primary-600 {\n background-color: #059669 !important;\n }\n .public-wrapper .bg-primary-700 {\n background-color: #047857 !important;\n }\n .public-wrapper .hover:bg-primary-600:hover {\n background-color: #059669 !important;\n }\n .public-wrapper .hover:bg-primary-500:hover {\n background-color: #10b981 !important;\n }\n .public-wrapper .hover:bg-primary-700:hover {\n background-color: #047857 !important;\n }\n .public-wrapper .bg-slate-800 {\n background-color: #1e293b !important;\n }\n .public-wrapper .bg-slate-900 {\n background-color: #0f172a !important;\n }\n .public-wrapper .hover:bg-slate-800:hover {\n background-color: #1e293b !important;\n }\n .public-wrapper .hover:bg-slate-700:hover {\n background-color: #334155 !important;\n }\n .public-wrapper .bg-red-500 {\n background-color: #ef4444 !important;\n }\n .public-wrapper .bg-yellow-400 {\n background-color: #facc15 !important;\n }\n \n /* Text colors */\n .public-wrapper .text-white {\n color: #ffffff !important;\n }\n .public-wrapper .text-gray-300 {\n color: #d1d5db !important;\n }\n .public-wrapper .text-slate-300 {\n color: #cbd5e1 !important;\n }\n .public-wrapper .text-slate-400 {\n color: #94a3b8 !important;\n }\n .public-wrapper .text-slate-500 {\n color: #64748b !important;\n }\n .public-wrapper .text-primary-500 {\n color: #10b981 !important;\n }\n .public-wrapper .text-primary-300 {\n color: #6ee7b7 !important;\n }\n .public-wrapper .hover:text-primary-500:hover {\n color: #10b981 !important;\n }\n .public-wrapper .hover:text-white:hover {\n color: #ffffff !important;\n }\n \n /* Input styling */\n .public-wrapper input {\n background-color: inherit !important;\n color: inherit !important;\n border: none !important;\n }\n .public-wrapper input::placeholder {\n color: #64748b !important;\n }\n .public-wrapper input:focus {\n outline: none !important;\n box-shadow: 0 0 0 2px #10b981 !important;\n }\n \n /* Rounded utilities */\n .public-wrapper .rounded-full {\n border-radius: 9999px !important;\n }\n .public-wrapper .rounded-xl {\n border-radius: 0.75rem !important;\n }\n .public-wrapper .rounded-lg {\n border-radius: 0.5rem !important;\n }\n .public-wrapper .rounded-2xl {\n border-radius: 1rem !important;\n }\n .public-wrapper .rounded-3xl {\n border-radius: 1.5rem !important;\n }\n \n /* Override Tabler column classes */\n .public-wrapper [class*=\"col-\"] {\n flex: none !important;\n width: auto !important;\n max-width: none !important;\n }\n \n /* Reset row */\n .public-wrapper .row {\n display: flex !important;\n flex-wrap: wrap !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n \n /* Full width sections */\n .public-wrapper section {\n width: 100% !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n \n /* Footer full width */\n .public-wrapper footer {\n width: 100% !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n \n /* Nav full width */\n .public-wrapper nav {\n width: 100% !important;\n left: 0 !important;\n right: 0 !important;\n }\n \n /* Reset button styles */\n .public-wrapper button,\n .public-wrapper a {\n text-decoration: none;\n }\n \n /* CRITICAL: Flex direction overrides for responsive layouts */\n .public-wrapper .lg\\:flex-row {\n flex-direction: column;\n }\n @media (min-width: 1024px) {\n .public-wrapper .lg\\:flex-row {\n flex-direction: row !important;\n }\n }\n \n /* Hidden/Block responsive utilities */\n .public-wrapper .hidden {\n display: none !important;\n }\n .public-wrapper .lg\\:block {\n display: none !important;\n }\n .public-wrapper .md\\:flex {\n display: none !important;\n }\n .public-wrapper .sm\\:flex {\n display: none !important;\n }\n .public-wrapper .lg\\:hidden {\n display: block !important;\n }\n @media (min-width: 640px) {\n .public-wrapper .sm\\:flex {\n display: flex !important;\n }\n }\n @media (min-width: 768px) {\n .public-wrapper .md\\:flex {\n display: flex !important;\n }\n }\n @media (min-width: 1024px) {\n .public-wrapper .lg\\:block {\n display: block !important;\n }\n .public-wrapper .lg\\:flex {\n display: flex !important;\n }\n .public-wrapper .lg\\:hidden {\n display: none !important;\n }\n }\n \n /* Responsive gap overrides */\n .public-wrapper .lg\\:gap-16 {\n gap: 48px;\n }\n @media (min-width: 1024px) {\n .public-wrapper .lg\\:gap-16 {\n gap: 64px !important;\n }\n }\n \n /* Responsive font sizes */\n .public-wrapper .lg\\:text-6xl {\n font-size: 3rem;\n }\n @media (min-width: 1024px) {\n .public-wrapper .lg\\:text-6xl {\n font-size: 3.75rem !important;\n line-height: 1 !important;\n }\n }\n \n /* Product Detail Page Layout - CRITICAL */\n .public-wrapper .product-detail-layout {\n display: flex !important;\n flex-direction: column !important;\n gap: 32px !important;\n }\n \n .public-wrapper .product-detail-content {\n width: 100% !important;\n }\n \n .public-wrapper .product-detail-sidebar {\n width: 100% !important;\n }\n \n .public-wrapper .product-detail-sidebar-sticky {\n position: relative !important;\n }\n \n @media (min-width: 1024px) {\n .public-wrapper .product-detail-layout {\n flex-direction: row !important;\n gap: 48px !important;\n align-items: flex-start !important;\n }\n \n .public-wrapper .product-detail-content {\n flex: 1 !important;\n min-width: 0 !important;\n }\n \n .public-wrapper .product-detail-sidebar {\n width: 340px !important;\n flex-shrink: 0 !important;\n order: 0 !important;\n }\n \n .public-wrapper .product-detail-sidebar-sticky {\n position: sticky !important;\n top: 100px !important;\n }\n }\n "])</script>
481<script>self.__next_f.push([1,"7:[\"$\",\"style\",null,{\"children\":\"$d\"}]\n"])</script>
481<script>self.__next_f.push([1,"8:[\"$\",\"div\",null,{\"className\":\"public-wrapper bg-gray-50 text-slate-900\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\n"])</script>
481<script>self.__next_f.push([1,"9:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\na:[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$Le\",null,{\"Component\":\"$f\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@10\",\"$@11\"]}],null,[\"$\",\"$L12\",null,{\"children\":[\"$L13\",[\"$\",\"$L14\",null,{\"promise\":\"$@15\"}]]}]]}]\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L16\",null,{\"children\":\"$L17\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L18\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$19\",null,{\"fallback\":null,\"children\":\"$L1a\"}]}]}]]}]\n"])</script>
481<script>self.__next_f.push([1,"10:{}\n11:\"$a:props:children:0:props:params\"\n"])</script>
481<script>self.__next_f.push([1,"17:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n13:null\n"])</script>
481<script>self.__next_f.push([1,"1b:I[622,[],\"IconMark\"]\n15:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Halal Digital\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Marketplace Produk Digital \u0026 Kursus Online\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"82x58\"}],[\"$\",\"$L1b\",\"3\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
481<script>self.__next_f.push([1,"1a:\"$15:metadata\"\n"])</script>
481<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"a259d99c11394bdb88c09429c1816b3a","r":1,"spa":2}' crossorigin="anonymous"></script>
481 482</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.