/* ===== Templates Grid ===== */

.templates-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:40px;

max-width:1200px;
margin:60px auto;
padding:0 20px;

}


/* ===== Template Card ===== */

.template-card{

position:relative;

background:linear-gradient(145deg,#020617,#0f172a);

border-radius:14px;

overflow:hidden;

border:1px solid rgba(255,255,255,0.08);

transition:0.35s;

box-shadow:
0 10px 30px rgba(0,0,0,0.4);

}


/* Glow hover */

.template-card:hover{

transform:translateY(-12px) scale(1.03);

border-color:#3b82f6;

box-shadow:
0 25px 60px rgba(0,0,0,0.7),
0 0 20px rgba(59,130,246,0.35),
0 0 40px rgba(59,130,246,0.15);

}


/* ===== Screenshot ===== */

.template-card img{

width:100%;
height:200px;

object-fit:cover;

display:block;

transition:0.35s;

}


/* Zoom effect */

.template-card:hover img{

transform:scale(1.06);

}


/* ===== Info section ===== */

.template-info{

padding:22px;

text-align:center;

background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.2));

}


/* ===== Title ===== */

.template-info h3{

font-size:20px;
margin-bottom:12px;

letter-spacing:0.3px;

}


/* ===== Buttons container ===== */

.template-buttons{

display:flex;

justify-content:center;

gap:12px;

margin-top:14px;

}


/* ===== Buttons ===== */

.preview-btn,
.download-btn{

padding:9px 18px;

border-radius:8px;

font-size:14px;

text-decoration:none;

color:white;

transition:0.25s;

}


/* Preview */

.preview-btn{

background:linear-gradient(135deg,#6366f1,#4f46e5);

box-shadow:0 0 10px rgba(99,102,241,0.5);

}

.preview-btn:hover{

transform:translateY(-2px);

box-shadow:0 0 18px rgba(99,102,241,0.9);

}


/* Download */

.download-btn{

background:linear-gradient(135deg,#3b82f6,#2563eb);

box-shadow:0 0 10px rgba(59,130,246,0.4);

}

.download-btn:hover{

transform:translateY(-2px);

box-shadow:0 0 18px rgba(59,130,246,0.9);

}


/* ===== Badge ===== */

.version-badge{

position:absolute;

top:14px;
left:14px;

padding:6px 14px;

border-radius:30px;

font-size:11px;
font-weight:700;

text-transform:uppercase;

letter-spacing:0.6px;

color:white;

backdrop-filter:blur(6px);

box-shadow:
0 4px 12px rgba(0,0,0,0.4);

}


/* Lite */

.lite{

background:linear-gradient(135deg,#22c55e,#16a34a);

}


/* Medium */

.medium{

background:linear-gradient(135deg,#f59e0b,#d97706);

}


/* Full */

.full{

background:linear-gradient(135deg,#ef4444,#dc2626);

}


/* ===== Section Title ===== */

.templates-title{

text-align:center;

font-size:40px;

margin-top:80px;

margin-bottom:30px;

background:linear-gradient(90deg,#60a5fa,#3b82f6);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


/* ===== Warning box ===== */

.template-warning{

max-width:800px;

margin:20px auto 60px auto;

padding:18px 22px;

border-radius:12px;

background:rgba(255,193,7,0.08);

border:1px solid rgba(255,193,7,0.35);

color:#facc15;

text-align:center;

box-shadow:
0 0 20px rgba(255,193,7,0.15);

}

/* ===== RESPONSIVE GRID ===== */

@media (max-width: 768px) {

    .templates-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 20px;
    }

    .template-card img {
        height: 180px;
    }

}

/* små mobil */
@media (max-width: 480px) {

    .templates-grid {
        grid-template-columns: 1fr;
    }

}