/* ===================================
   TIEMPOOS UI SYSTEM
=================================== */

:root{

/* BASE */

--bg:#000000;
--bg-2:#0a0a0a;
--card:#111111;
--card-2:#171717;

--border:#1f1f1f;

--text:#ffffff;
--text-soft:#8b8b8b;

/* ACCENTS */

--green:#38d430;
--blue:#00b2e3;
--red:#ff3b3b;
--aqua:#00bbb4;
--navy:#001871;

/* RADIUS */

--radius:24px;
--radius-sm:16px;

/* SHADOW */

--shadow:
0 10px 40px rgba(0,0,0,.45);

}

/* ===================================
   RESET
=================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
font-family:
Inter,
Arial,
Helvetica,
sans-serif;

min-height:100vh;

-webkit-font-smoothing:antialiased;
}

/* ===================================
   LINKS
=================================== */

a{
text-decoration:none;
color:inherit;
}

/* ===================================
   MAIN
=================================== */

.main{
width:100%;
max-width:1500px;
margin:auto;
padding:30px;
}

/* ===================================
   TOP BAR
=================================== */

.top-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
gap:20px;
flex-wrap:wrap;
}

/* ===================================
   BRAND
=================================== */

.brand{
display:flex;
align-items:center;
gap:14px;
}

.brand img{
width:42px;
height:42px;
object-fit:contain;
}

.brand-name{
font-size:20px;
font-weight:700;
letter-spacing:.5px;
}

/* ===================================
   ADMIN BUTTON
=================================== */

.admin-btn{
height:46px;
padding:0 18px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

border-radius:14px;

display:flex;
align-items:center;
gap:8px;

color:#bdbdbd;

font-size:14px;
font-weight:600;

transition:.25s;
}

.admin-btn:hover{
border-color:var(--green);
color:var(--green);

transform:translateY(-2px);

box-shadow:
0 0 25px rgba(56,212,48,.12);
}

/* ===================================
   HERO
=================================== */

.hero{
padding:70px 0 50px;
text-align:center;
}

/* TITLE */

.hero-title{
font-size:72px;
font-weight:800;
line-height:1;
margin-bottom:18px;
letter-spacing:-3px;
}

/* SUBTITLE */

.hero-subtitle{
max-width:700px;
margin:auto;
color:var(--text-soft);
font-size:18px;
line-height:1.7;
margin-bottom:45px;
}

/* ===================================
   SEARCH
=================================== */

.search-wrap{
max-width:850px;
margin:auto;
position:relative;
}

.search-input{
width:100%;
height:82px;

background:var(--card);

border:1px solid var(--border);

border-radius:28px;

padding:0 30px;

color:white;

font-size:24px;
font-weight:600;

outline:none;

transition:.25s;
}

.search-input:focus{

border-color:var(--green);

box-shadow:
0 0 0 5px rgba(56,212,48,.08);

}

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

.grid{
display:grid;

grid-template-columns:
repeat(auto-fill,minmax(300px,1fr));

gap:28px;

margin-top:60px;
}

/* ===================================
   CARD
=================================== */

.card{

background:var(--card);

border:1px solid var(--border);

border-radius:30px;

overflow:hidden;

transition:.3s;

position:relative;

}

.card:hover{

transform:translateY(-6px);

border-color:#2b2b2b;

box-shadow:
0 20px 60px rgba(0,0,0,.45);

}

/* IMAGE */

.card-image{
position:relative;
overflow:hidden;
}

.card-image img{
width:100%;
height:420px;
object-fit:cover;

transition:.4s;
}

.card:hover .card-image img{
transform:scale(1.03);
}

/* INFO */

.card-info{
padding:22px;
}

/* MODEL */

.card-model{
font-size:28px;
font-weight:800;
margin-bottom:12px;
}

/* META */

.card-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
}

/* TAG */

.tag{
padding:8px 12px;

background:#0b0b0b;

border:1px solid #222;

border-radius:999px;

font-size:12px;
font-weight:600;

color:#d0d0d0;
}

/* BUTTONS */

.card-actions{
display:flex;
gap:12px;
}

/* BTN */

.btn{
flex:1;

height:50px;

border-radius:16px;

display:flex;
align-items:center;
justify-content:center;

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

transition:.25s;
}

/* BTN PRIMARY */

.btn-primary{
background:var(--green);
color:black;
}

.btn-primary:hover{
transform:translateY(-2px);
}

/* BTN SECONDARY */

.btn-secondary{
background:#0b0b0b;
border:1px solid #222;
color:white;
}

.btn-secondary:hover{
border-color:#333;
}

/* ===================================
   EMPTY
=================================== */

.empty{
padding:100px 20px;
text-align:center;
}

.empty-title{
font-size:32px;
font-weight:800;
margin-bottom:10px;
}

.empty-subtitle{
color:var(--text-soft);
}

/* ===================================
   PAGE PRODUCT
=================================== */

.product{
display:grid;
grid-template-columns:1fr 500px;
gap:50px;
align-items:start;
}

/* IMAGE */

.product-image{

background:var(--card);

border:1px solid var(--border);

border-radius:30px;

overflow:hidden;
}

.product-image img{
width:100%;
display:block;
}

/* DETAILS */

.product-details{
position:sticky;
top:30px;
}

.product-title{
font-size:64px;
font-weight:800;
line-height:1;
margin-bottom:20px;
}

.product-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:25px;
}

/* ACTIONS */

.product-actions{
display:flex;
flex-direction:column;
gap:14px;
margin-top:30px;
}

/* ===================================
   FORM
=================================== */

.form-card{

background:var(--card);

border:1px solid var(--border);

border-radius:30px;

padding:35px;
}

/* INPUT */

input,
select,
textarea{

width:100%;

background:#0a0a0a;

border:1px solid #1f1f1f;

border-radius:18px;

padding:18px;

color:white;

font-size:15px;

outline:none;

transition:.2s;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--green);

box-shadow:
0 0 0 4px rgba(56,212,48,.08);

}

/* ===================================
   MOBILE
=================================== */

@media(max-width:900px){

.hero-title{
font-size:52px;
}

.search-input{
height:70px;
font-size:20px;
}

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

.product-title{
font-size:44px;
}

}

@media(max-width:600px){

.main{
padding:20px;
}

.hero{
padding:40px 0;
}

.hero-title{
font-size:42px;
letter-spacing:-2px;
}

.hero-subtitle{
font-size:15px;
}

.search-input{
height:64px;
font-size:18px;
padding:0 22px;
border-radius:22px;
}

.card-image img{
height:320px;
}

.card-model{
font-size:24px;
}

}