/* Galeri template: maks 6 kartu di grid, sisanya di carousel 3D (coverflow) */
.tpl-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:8px;border-radius:999px;background:rgba(15,27,51,.08);font-size:11.5px;font-weight:700;line-height:1;transition:background .2s,color .2s}
.template-filter button.active .tpl-count{background:rgba(255,255,255,.22);color:#fff}
.template-grid .template-card{animation:tplIn .7s cubic-bezier(.16,1,.3,1) both}
.template-grid .template-card:nth-child(2){animation-delay:.05s}.template-grid .template-card:nth-child(3){animation-delay:.1s}
.template-grid .template-card:nth-child(4){animation-delay:.15s}.template-grid .template-card:nth-child(5){animation-delay:.2s}.template-grid .template-card:nth-child(6){animation-delay:.25s}
@keyframes tplIn{from{opacity:0;transform:translateY(24px) scale(.98)}}
.tpl-pool{display:none}

.tpl-more{margin-top:72px}
.tpl-more[hidden]{display:none}
.tpl-more-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:10px;flex-wrap:wrap}
.tpl-more-head h3{font-size:clamp(22px,2.4vw,30px);font-weight:750;letter-spacing:-.02em;color:var(--ink,#0f1b33)}
.tpl-more-head p{color:var(--ink-soft,#51607a);font-size:14.5px;margin-top:6px}
.tpl-more-nav{display:flex;gap:10px}
.tpl-more-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line,#e3e6ee);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink,#0f1b33);transition:background .25s,color .25s,border-color .25s,transform .25s}
.tpl-more-nav button:hover{background:var(--ink,#0f1b33);color:#fff;border-color:var(--ink,#0f1b33);transform:translateY(-2px)}
.tpl-more-nav svg{width:18px;height:18px}

.cf{position:relative;height:var(--cf-h,520px);margin-top:10px;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.cf:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:8px;border-radius:24px}
.cf-stage{position:absolute;inset:0}
.cf .template-card{transition-delay:0s!important;position:absolute;left:50%;top:24px;width:var(--cf-w,400px);margin-left:calc(var(--cf-w,400px) / -2);transform-origin:50% 50%;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s,filter .6s,box-shadow .6s;will-change:transform;backface-visibility:hidden;animation:none}
.cf .template-card.reveal{opacity:1}
.cf .template-card:hover{box-shadow:var(--shadow-lift,0 30px 60px -30px rgba(15,27,51,.45))}
.cf .template-card:not(.cf-active){cursor:pointer}
.cf .template-card:not(.cf-active) .template-info .btn{opacity:0}
.cf .template-card.cf-active{box-shadow:0 40px 80px -36px rgba(15,27,51,.55)}
.cf .template-card .template-thumb img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.cf .template-card.cf-active .template-thumb img{transform:scale(1.04)}
.cf-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 60%);transform:translateX(-120%);z-index:2}
.cf .template-card.cf-active .cf-shine{animation:cfShine 1.4s .35s cubic-bezier(.16,1,.3,1)}
@keyframes cfShine{to{transform:translateX(120%)}}
.cf-floor{position:absolute;left:10%;right:10%;bottom:18px;height:40px;background:radial-gradient(ellipse at center,rgba(15,27,51,.18),transparent 70%);filter:blur(8px);pointer-events:none}

.cf-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.cf-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(15,27,51,.18);cursor:pointer;transition:width .5s cubic-bezier(.16,1,.3,1),background .3s}
.cf-dots button.on{width:34px;background:var(--ink,#0f1b33);position:relative;overflow:hidden}
.cf-dots button.on::after{content:"";position:absolute;inset:0;background:var(--accent,#2563eb);transform-origin:left;transform:scaleX(0);animation:cfProg var(--cf-t,4.5s) linear forwards}
.cf.paused ~ .cf-dots button.on::after{animation-play-state:paused}
@keyframes cfProg{to{transform:scaleX(1)}}

@media (max-width:960px){.cf{--cf-w:340px;--cf-h:470px}}
@media (max-width:640px){.tpl-more{margin-top:56px}.cf{--cf-w:min(300px,78vw);--cf-h:450px}.tpl-more-nav button{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.cf .template-card,.template-grid .template-card{transition:none;animation:none}.cf-dots button.on::after{animation:none;transform:scaleX(1)}}