/* ==========================================================================
   CSS TEMA POPULER KUROPEDIA (MINIFIED & OPTIMIZED)
   ========================================================================== */

/* TEMA 1 */
.populer-card-tema1{display:block;position:relative;background:#18181b;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}.populer-card-tema1:hover{transform:translateY(-5px);filter:drop-shadow(0 0 8px rgba(124,58,237,.5));border-color:transparent}.populer-card-tema1::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(45deg,#f09,#3b82f6,#0ff);opacity:0;transition:opacity .3s ease}.populer-card-tema1:hover::before{opacity:1}.populer-card-tema1 .p1-inner{background:#09090b;height:100%;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);display:flex;flex-direction:column}.populer-card-tema1 .p1-img-box{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden}.populer-card-tema1 .p1-img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:all .5s ease}.populer-card-tema1:hover .p1-img{filter:grayscale(0);transform:scale(1.1)}.populer-card-tema1 .p1-tag{position:absolute;top:0;right:0;background:var(--warna_2);color:#fff;font-size:9px;font-weight:800;padding:4px 10px;border-bottom-left-radius:8px;z-index:20}.populer-card-tema1 .p1-info{padding:12px;position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top,#000 20%,rgba(0,0,0,.6) 80%,transparent);z-index:10;transform:translateY(100%);opacity:0;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.populer-card-tema1:hover .p1-info{transform:translateY(0);opacity:1}.populer-card-tema1 .p1-title{color:#fff;font-weight:800;font-size:1rem;text-transform:uppercase;font-style:italic;text-shadow:0 2px 4px #000;margin-bottom:2px}.populer-card-tema1 .p1-sub{color:#a1a1aa;font-size:.7rem;font-weight:600;letter-spacing:1px}

/* TEMA 2 */
.populer-card-tema2{position:relative;display:block;border-radius:16px;overflow:hidden;background:#0a0a0a;border:1px solid rgba(255,255,255,.04);transition:all .6s cubic-bezier(.23,1,.32,1)}.populer-card-tema2:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--warna_2) 40%,transparent);box-shadow:0 20px 40px rgba(0,0,0,.6),0 10px 20px color-mix(in srgb,var(--warna_2) 15%,transparent)}.populer-card-tema2::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-25deg);transition:all .7s ease;z-index:5;pointer-events:none}.populer-card-tema2:hover::after{left:150%}.populer-card-tema2 .p2-img-box{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden}.populer-card-tema2 .p2-img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease,filter .6s ease;filter:brightness(.85)}.populer-card-tema2:hover .p2-img{transform:scale(1.08);filter:brightness(1)}.populer-card-tema2 .p2-overlay{position:absolute;inset:0;background:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 40%,transparent 100%);z-index:1}.populer-card-tema2 .p2-info{position:absolute;bottom:0;left:0;width:100%;padding:20px 16px;z-index:2;display:flex;flex-direction:column;gap:4px;transform:translateY(8px);transition:transform .5s ease}.populer-card-tema2:hover .p2-info{transform:translateY(0)}.populer-card-tema2 .p2-title{color:#fff;font-weight:700;font-size:1.05rem;line-height:1.3;margin:0;letter-spacing:.5px;text-shadow:0 2px 10px rgba(0,0,0,.8)}.populer-card-tema2 .p2-sub{color:var(--warna_2);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px}.populer-card-tema2 .p2-badge{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--warna_2) 40%,transparent);color:#fff;font-size:9px;font-weight:700;padding:6px 12px;border-radius:30px;z-index:10;letter-spacing:2px;text-transform:uppercase;box-shadow:0 4px 10px rgba(0,0,0,.3);transition:all .3s ease}.populer-card-tema2:hover .p2-badge{background:var(--warna_2);color:#000;border-color:var(--warna_2)}

/* TEMA 3 */
.p3-card{display:flex;flex-direction:column;background:#0d0d0f;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.05);border-bottom:2px solid transparent;transition:all .3s ease;text-decoration:none}.p3-card:hover{transform:translateY(-4px);border-bottom-color:var(--warna_2);box-shadow:0 12px 20px -10px var(--warna_2)}.p3-img-box{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}.p3-img{width:100%;height:100%;object-fit:cover;transition:all .4s ease;filter:brightness(.65)}.p3-card:hover .p3-img{transform:scale(1.05);filter:brightness(1)}.p3-overlay{position:absolute;inset:0;background:linear-gradient(to top,#0d0d0f 0%,transparent 40%)}.p3-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:.65rem;font-weight:700;padding:4px 10px;border-radius:20px;z-index:5;display:flex;align-items:center;gap:4px}.p3-badge i{color:var(--warna_2)}.p3-content{padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:2;border-top:1px solid rgba(255,255,255,.03)}.p3-text{display:flex;flex-direction:column;min-width:0;flex:1}.p3-title{font-size:.95rem;font-weight:700;color:#fff;margin:0 0 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease}.p3-card:hover .p3-title{color:var(--warna_2)}.p3-sub{font-size:.7rem;color:#a1a1aa;margin:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.p3-icon{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.05);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;transition:all .3s ease}.p3-card:hover .p3-icon{background:var(--warna_2);color:#000;transform:translateX(3px)}

/* TEMA 4 */
.populer-card-tema4{display:block;position:relative;border-radius:6px;overflow:hidden;background:#141414;transition:transform .3s ease,box-shadow .3s ease;border:1px solid transparent}.populer-card-tema4:hover{transform:scale(1.05);z-index:10;box-shadow:0 15px 35px -5px var(--warna_2);border-color:var(--warna_2)}.populer-card-tema4 .p4-img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}.populer-card-tema4:hover .p4-img{opacity:.5}.populer-card-tema4 .p4-overlay{position:absolute;inset:0;background:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 40%,transparent 100%);opacity:.9}.populer-card-tema4 .p4-badge{position:absolute;top:8px;left:0;background:var(--warna_2);color:#fff;font-size:8px;font-weight:800;padding:2px 8px;border-top-right-radius:4px;border-bottom-right-radius:4px;box-shadow:2px 2px 5px rgba(0,0,0,.5);letter-spacing:1px}.populer-card-tema4 .p4-content{position:absolute;bottom:0;left:0;width:100%;padding:10px;text-align:center}.populer-card-tema4 .p4-title{color:#fff;font-size:.9rem;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.8)}.populer-card-tema4 .p4-sub{color:var(--warna_2);font-size:.65rem;font-weight:500;text-transform:uppercase;filter:brightness(1.2)}.populer-card-tema4 .p4-action{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);opacity:0;width:45px;height:45px;background:var(--warna_2);backdrop-filter:blur(4px);border-radius:50%;box-shadow:0 0 30px var(--warna_2);transition:all .4s cubic-bezier(.175,.885,.32,1.275);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}.populer-card-tema4:hover .p4-action{transform:translate(-50%,-50%) scale(1);opacity:1;background:var(--warna_2);color:#fff}

/* TEMA 5 */
.p5-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}@media(min-width:640px){.p5-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}@media(min-width:1024px){.p5-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}.p5-card{position:relative;display:flex;flex-direction:column;background:#09090b;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.05);border-bottom:2px solid transparent;transition:all .3s ease;text-decoration:none}.p5-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.08);border-bottom-color:var(--warna_2);box-shadow:0 6px 15px -4px var(--warna_2)}.p5-card::before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:skewX(-20deg);z-index:10;transition:.6s ease-in-out;pointer-events:none}.p5-card:hover::before{left:150%}.p5-img-box{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}.p5-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;filter:brightness(.8)}.p5-card:hover .p5-img{transform:scale(1.05);filter:brightness(1.05)}.p5-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,#09090b 0%,transparent 80%);pointer-events:none}.p5-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.08);color:#fff;padding:3px 8px;border-radius:20px;font-size:.6rem;font-weight:700;z-index:5;display:flex;align-items:center;gap:4px}.p5-badge i{color:var(--warna_2);font-size:.55rem}.p5-content{padding:10px 14px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:2}.p5-text{display:flex;flex-direction:column;min-width:0;flex:1}.p5-title{font-size:.9rem;font-weight:700;color:#fff;margin:0 0 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}.p5-card:hover .p5-title{color:var(--warna_2)}.p5-sub{font-size:.65rem;color:#a1a1aa;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.p5-icon{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:var(--warna_2);transition:all .3s;flex-shrink:0}.p5-icon i{font-size:.6rem}.p5-card:hover .p5-icon{background:var(--warna_2);color:#fff;box-shadow:0 0 8px var(--warna_2);border-color:var(--warna_2);transform:translateX(3px)}

/* TEMA 6 */
.populer-card-tema6{position:relative;display:flex;flex-direction:column;padding:10px;border-radius:28px;background:rgba(25,25,25,.4);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px);transition:all .5s cubic-bezier(.2,.8,.2,1);overflow:hidden;z-index:1;text-decoration:none}.populer-card-tema6::before{content:'';position:absolute;width:180px;height:180px;background:var(--warna_2);filter:blur(70px);top:-60px;right:-60px;opacity:0;transition:all .7s ease;z-index:-1;border-radius:50%;pointer-events:none}.populer-card-tema6:hover::before{opacity:.35;transform:scale(1.2) translate(-20px,20px)}.populer-card-tema6:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.2);box-shadow:0 20px 40px rgba(0,0,0,.5)}.populer-card-tema6 .p6-img-wrap{width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;position:relative;background:#111}.populer-card-tema6 .p6-img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .5s ease;filter:brightness(.9)}.populer-card-tema6:hover .p6-img{transform:scale(1.08);filter:brightness(1.1)}.populer-card-tema6 .p6-badge{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);padding:5px 14px;border-radius:20px;color:#fff;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.3)}.populer-card-tema6 .p6-info{padding:18px 8px 8px 8px;display:flex;flex-direction:column;gap:4px}.populer-card-tema6 .p6-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.populer-card-tema6 .p6-title{color:#fff;font-size:1.05rem;font-weight:700;margin:0;line-height:1.2;text-shadow:0 2px 4px rgba(0,0,0,.5)}.populer-card-tema6 .p6-sub{color:#a1a1aa;font-size:.75rem;font-weight:500;letter-spacing:.5px}.populer-card-tema6 .p6-action{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;transition:all .4s ease;transform:rotate(-45deg)}.populer-card-tema6:hover .p6-action{background:var(--warna_2);border-color:var(--warna_2);color:#000;transform:rotate(0deg);box-shadow:0 0 15px var(--warna_2)}.populer-card-tema6 .p6-action svg{width:14px;height:14px;transition:transform .4s ease}.populer-card-tema6:hover .p6-action svg{transform:translateX(2px)}

/* TEMA 7 */
.p7-card{position:relative;display:block;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:#09090b;text-decoration:none;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.p7-card:hover{transform:translateY(-8px)}.p7-img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}.p7-card:hover .p7-img{transform:scale(1.1);filter:brightness(1.05)}.p7-frame{position:absolute;inset:10px;border:1px solid rgba(255,255,255,.15);border-radius:14px;pointer-events:none;z-index:2;transition:all .5s cubic-bezier(.2,.8,.2,1)}.p7-card:hover .p7-frame{inset:15px;border-color:color-mix(in srgb,var(--warna_2) 60%,transparent)}.p7-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0,transparent 50%);z-index:1}.p7-content{position:absolute;bottom:20px;left:20px;right:20px;background:rgba(20,20,20,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;z-index:3;transition:all .4s ease;display:flex;flex-direction:column;justify-content:center}.p7-card:hover .p7-content{bottom:25px;background:rgba(10,10,10,.8);border-color:rgba(255,255,255,.2)}.p7-title{color:#fff;font-size:1rem;font-weight:800;margin:0 0 2px 0;letter-spacing:.5px}.p7-sub{color:var(--warna_2);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:0}

/* TEMA 8 */
.p8-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;transition:transform .3s ease}.p8-card:hover{transform:translateY(-6px)}.p8-img-wrap{width:100%;aspect-ratio:1/1;clip-path:polygon(32px 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%,0 32px);overflow:hidden;background:#111}.p8-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .5s ease;filter:brightness(.9)}.p8-card:hover .p8-img{transform:scale(1.1);filter:brightness(1.1)}.p8-info{text-align:center;width:100%;display:flex;flex-direction:column;gap:4px;padding:0 4px}.p8-title{color:#fff;font-size:15px;font-weight:800;text-transform:uppercase;margin:0;letter-spacing:.5px;transition:all .3s ease}.p8-card:hover .p8-title{color:var(--warna_2);text-shadow:0 0 12px color-mix(in srgb,var(--warna_2) 50%,transparent)}.p8-sub{color:#64748b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:0}
/* TEMA 9 */
.populer-card-tema9{position:relative;display:block;aspect-ratio:3/4;background:#09090b;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);text-decoration:none;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 30px rgba(0,0,0,.5)}.populer-card-tema9:hover{transform:translateY(-8px)}.populer-card-tema9::before{content:'';position:absolute;top:0;left:-150%;width:50%;height:100%;background:linear-gradient(to right,transparent 0,rgba(255,255,255,.25) 50%,transparent 100%);transform:skewX(-25deg);transition:all .7s cubic-bezier(.4,0,.2,1);z-index:5;pointer-events:none}.populer-card-tema9:hover::before{left:150%}.p9-border{position:absolute;inset:0;pointer-events:none;z-index:10;border:1px solid rgba(255,255,255,.1);transition:border-color .4s ease;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}.populer-card-tema9:hover .p9-border{border-color:var(--warna_2)}.p9-img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}.populer-card-tema9:hover .p9-img{transform:scale(1.1);filter:brightness(1.05)}.p9-info{position:absolute;bottom:0;left:0;right:0;padding:30px 16px 16px;background:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 60%,transparent 100%);display:flex;flex-direction:column;z-index:2;transition:all .4s ease}.populer-card-tema9:hover .p9-info{padding-bottom:20px}.p9-title{color:#fff;font-weight:800;font-size:1.05rem;text-transform:uppercase;margin:0 0 2px;text-shadow:0 2px 4px rgba(0,0,0,.8)}.p9-sub{color:var(--warna_2);font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0;filter:brightness(1.2)}

/* TEMA 10 */
.p10-card{position:relative;display:flex;align-items:center;border-radius:12px;overflow:hidden;text-decoration:none;background:#000;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease;border:1px solid rgba(255,255,255,.05);height:75px}.p10-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);box-shadow:0 8px 20px rgba(0,0,0,.5)}.p10-bg{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);object-fit:cover;filter:blur(4px) saturate(110%);opacity:.8;z-index:0;pointer-events:none;transition:transform .5s ease}.p10-card:hover .p10-bg{transform:scale(1.05)}.p10-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(15,20,30,.95) 0,rgba(15,20,30,.7) 100%);z-index:1;pointer-events:none;transition:background .3s ease}.p10-card:hover .p10-overlay{background:linear-gradient(to right,rgba(15,20,30,.85) 0,rgba(15,20,30,.5) 100%)}.p10-content{position:relative;z-index:2;display:flex;align-items:center;padding:10px 12px;gap:12px;width:100%;height:100%}.p10-thumb{width:55px;height:55px;border-radius:12px;object-fit:cover;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);transition:transform .3s ease}.p10-card:hover .p10-thumb{transform:scale(1.05)}.p10-text{display:flex;flex-direction:column;overflow:hidden;width:100%}.p10-title{color:#fff;font-size:13px;font-weight:800;margin:0 0 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 4px rgba(0,0,0,.8)}.p10-sub{color:#cbd5e1;font-size:10px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.p10-title{font-size:14px}.p10-sub{font-size:11px}}

/* TEMA DEFAULT / LAINNYA */
.bg-title-populer { background-color: var(--warna_2); color: rgb(255 255 255 / var(--tw-text-opacity)); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; }