/*==================================================
SI-PENA COMPONENT LIBRARY
Version : 1.0
==================================================*/


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

.btn-premium{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:56px;

    padding:0 32px;

    border:none;

    border-radius:18px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);

    text-decoration:none;

    position:relative;

    overflow:hidden;

}

.btn-premium i{

    transition:.3s;

}

.btn-premium:hover i{

    transform:translateX(5px);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    box-shadow:var(--shadow-md);

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

    box-shadow:var(--shadow-lg);

}

.btn-outline{

    background:#fff;

    color:var(--primary);

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

}

.btn-outline:hover{

    background:var(--primary-light);

}

.btn-ghost{

    background:transparent;

    color:var(--primary);

}

.btn-ghost:hover{

    background:rgba(37,99,235,.08);

}

.card-premium{

    background:#fff;

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

    border-radius:24px;

    padding:28px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.card-premium:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.feature-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:28px;

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

    transition:.35s;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:0;

    background:var(--primary);

    transition:.4s;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.feature-card:hover::before{

    height:100%;

}

.icon-box{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:26px;

    margin-bottom:20px;

    transition:.3s;

}

.feature-card:hover .icon-box{

    transform:scale(1.08);

}

.card-title{

    font-size:20px;

    font-weight:700;

    color:var(--dark);

}

.card-desc{

    color:var(--muted);

    margin-top:10px;

    line-height:1.7;

}

.stat-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    border-radius:20px;

    background:#fff;

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

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-number{

    font-size:26px;

    font-weight:800;

    color:var(--primary);

}

.stat-text{

    font-size:14px;

    color:var(--muted);

}

.input-premium{

    width:100%;

    height:56px;

    border-radius:16px;

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

    padding:0 20px;

    transition:.3s;

    background:#fff;

}

.input-premium:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.textarea-premium{

    width:100%;

    min-height:160px;

    padding:18px;

    border-radius:18px;

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

    resize:none;

}

.textarea-premium:focus{

    outline:none;

    border-color:var(--primary);

}

.label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:var(--dark);

}

.glass-card{

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

    backdrop-filter:blur(18px);

    border-radius:24px;

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

}

.floating{

    animation:floating 6s ease infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.btn-premium::after{

content:"";

position:absolute;

width:0;

height:0;

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

border-radius:50%;

transform:translate(-50%,-50%);

transition:.6s;

}

.btn-premium:active::after{

width:350px;

height:350px;

}

.skeleton{

background:

linear-gradient(

90deg,

#f1f5f9 25%,

#e2e8f0 50%,

#f1f5f9 75%

);

background-size:400% 100%;

animation:skeleton 1.4s infinite;

}

@keyframes skeleton{

0%{

background-position:100% 0;

}

100%{

background-position:-100% 0;

}

}