/*====================================================
 SIPANDTALK V3
 PART 1 - RESET, ROOT & BASE
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--bg:#070816;
--card:#111322;
--card2:#171a2d;

--primary:#ff4fb8;
--secondary:#8b5cf6;

--text:#ffffff;
--muted:#b7bfd8;

--border:rgba(255,255,255,.08);

--radius:22px;

--shadow:0 18px 45px rgba(0,0,0,.35);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:
radial-gradient(circle at top right,#31104d 0%,transparent 35%),
radial-gradient(circle at bottom left,#1a1468 0%,transparent 35%),
var(--bg);

color:var(--text);

overflow-x:hidden;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:inherit;

cursor:pointer;

border:none;

outline:none;

}

input,
textarea,
select{

font-family:inherit;

outline:none;

}

img{

max-width:100%;

display:block;

}

.container{

width:94%;

max-width:1400px;

margin:auto;

}

/*====================================================
 BACKGROUND GLOW
====================================================*/

.background-glow{

position:fixed;

top:-200px;
right:-200px;

width:500px;
height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,79,184,.25),

transparent 70%);

pointer-events:none;

z-index:-1;

}

/*====================================================
 HEADER
====================================================*/

header{

position:sticky;

top:0;

z-index:999;

background:rgba(7,8,22,.92);

backdrop-filter:blur(18px);

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

}

.header{

height:82px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:32px;

font-weight:800;

}

.logo i{

font-size:34px;

color:var(--primary);

}

.logo span{

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

nav{

display:flex;

gap:35px;

}

nav a{

font-weight:600;

transition:.3s;

position:relative;

}

nav a:hover{

color:var(--primary);

}

nav a.active::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:100%;

height:3px;

border-radius:30px;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

}

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

main{

padding:40px 0;

display:flex;

flex-direction:column;

gap:30px;

}
/*====================================================
 SIPANDTALK V3
 PART 2 - HOME PAGE
====================================================*/

.hero{

display:grid;

grid-template-columns:1fr 420px;

gap:35px;

align-items:center;

}

.hero-left h1{

font-size:64px;

font-weight:800;

line-height:1.05;

margin:18px 0;

}

.hero-left h1 span{

background:linear-gradient(90deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-left p{

font-size:18px;

line-height:1.8;

color:var(--muted);

max-width:650px;

}

.badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

border-radius:50px;

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

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

font-weight:600;

}

.badge i{

color:var(--primary);

}

.submit-card{

background:rgba(17,19,34,.95);

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

border-radius:26px;

padding:28px;

box-shadow:var(--shadow);

backdrop-filter:blur(18px);

}

.submit-card h2{

font-size:28px;

margin-bottom:10px;

}

.submit-card p{

color:var(--muted);

margin-bottom:20px;

}

.submit-card textarea{

width:100%;

height:190px;

padding:18px;

background:#0d1020;

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

border-radius:18px;

color:#fff;

font-size:15px;

resize:none;

margin-bottom:18px;

}

.submit-card textarea::placeholder{

color:#8b94b5;

}

.upload-box{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:12px;

padding:28px;

border:2px dashed rgba(255,255,255,.15);

border-radius:18px;

cursor:pointer;

transition:.3s;

margin-bottom:20px;

}

.upload-box:hover{

border-color:var(--primary);

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

}

.upload-box input{

display:none;

}

.upload-box i{

font-size:38px;

color:var(--primary);

}

.submit-btn{

width:100%;

height:58px;

border-radius:18px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

font-size:17px;

font-weight:700;

color:#fff;

transition:.3s;

}

.submit-btn:hover{

transform:translateY(-3px);

box-shadow:0 18px 35px rgba(255,79,184,.30);

}

/*====================================================
 FEATURES
====================================================*/

.features{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:22px;

}

.feature-card{

background:rgba(17,19,34,.95);

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

border-radius:22px;

padding:28px;

text-align:center;

transition:.3s;

}

.feature-card:hover{

transform:translateY(-6px);

}

.feature-card i{

font-size:42px;

margin-bottom:18px;

color:var(--primary);

}

.feature-card h3{

margin-bottom:12px;

}

.feature-card p{

color:var(--muted);

line-height:1.7;

}
/*====================================================
 SIPANDTALK V3
 PART 3 - ADVERTISEMENT, LOGIN & DASHBOARD
====================================================*/

/* ==========================
ADVERTISEMENT
========================== */

.advert-page{

max-width:1100px;

margin:auto;

}

.advert-card{

background:rgba(17,19,34,.95);

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

border-radius:28px;

padding:35px;

box-shadow:var(--shadow);

backdrop-filter:blur(18px);

}

.advert-card h1{

font-size:42px;

margin:18px 0;

}

.advert-card p{

color:var(--muted);

line-height:1.8;

margin-bottom:25px;

}

.form-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

margin-bottom:20px;

}

.form-grid input,

.form-grid select,

textarea{

width:100%;

padding:16px;

background:#0d1020;

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

border-radius:16px;

color:#fff;

font-size:15px;

}

textarea{

min-height:170px;

resize:none;

margin-bottom:25px;

}

.section-title{

font-size:22px;

margin:30px 0 20px;

}

/* ==========================
PACKAGE CARDS
========================== */

.package-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:25px;

}

.package-card{

background:#15192c;

border:2px solid transparent;

border-radius:18px;

padding:22px;

cursor:pointer;

transition:.3s;

}

.package-card:hover{

transform:translateY(-5px);

border-color:var(--primary);

}

.package-card.active{

border-color:var(--primary);

box-shadow:0 0 25px rgba(255,79,184,.30);

}

.package-card h3{

margin-bottom:8px;

}

.package-card strong{

display:block;

margin-top:10px;

font-size:20px;

color:var(--primary);

}

/* ==========================
ADDONS
========================== */

.addons{

display:flex;

flex-direction:column;

gap:12px;

margin-bottom:25px;

}

.addons label{

display:flex;

align-items:center;

gap:12px;

background:#15192c;

padding:14px 18px;

border-radius:14px;

}

.total-box{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

background:#15192c;

border-radius:18px;

margin-bottom:25px;

}

.total-box h2{

font-size:34px;

color:var(--primary);

}

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

.upload-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

margin-bottom:25px;

}

/* ==========================
LOGIN
========================== */

.login-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px;

}

.login-card{

width:100%;

max-width:450px;

background:rgba(17,19,34,.96);

border-radius:28px;

padding:35px;

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

box-shadow:var(--shadow);

}

.login-logo{

text-align:center;

margin-bottom:30px;

}

.login-logo i{

font-size:55px;

color:var(--primary);

margin-bottom:12px;

}

.input-group{

margin-bottom:20px;

}

.input-group label{

display:block;

margin-bottom:8px;

font-weight:600;

}

.input-group input{

width:100%;

padding:16px;

background:#0d1020;

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

border-radius:16px;

color:#fff;

}

.login-footer{

margin-top:25px;

text-align:center;

}

.login-footer a{

color:var(--primary);

}

/* ==========================
DASHBOARD
========================== */

.dashboard-top{

margin-bottom:25px;

}

.dashboard-stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin-bottom:25px;

}

.dashboard-tabs{

display:flex;

gap:15px;

margin-bottom:25px;

overflow:auto;

}

.tab-btn{

background:#15192c;

padding:15px 22px;

border-radius:16px;

color:#fff;

white-space:nowrap;

}

.tab-btn.active{

background:linear-gradient(90deg,var(--primary),var(--secondary));

}

.dashboard-list{

display:flex;

flex-direction:column;

gap:20px;

}

.tea-card{

background:#15192c;

border-radius:22px;

padding:22px;

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

}

.tea-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.anonymous-user{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

}

.tea-status{

padding:8px 14px;

border-radius:30px;

font-size:13px;

background:#ffb100;

color:#111;

font-weight:700;

}

.tea-image,

.tea-video{

width:100%;

border-radius:18px;

margin-top:18px;

}

.tea-actions{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:12px;

margin-top:22px;

}

.approve-btn{

background:#16a34a;

}

.reject-btn{

background:#dc2626;

}

.card-btn{

background:#8b5cf6;

}

.delete-btn{

background:#374151;

}

.tea-actions button{

padding:14px;

border-radius:14px;

color:#fff;

font-weight:700;

}
/*====================================================
 SIPANDTALK V3
 PART 4 - FOOTER, MOBILE & PREMIUM EFFECTS
====================================================*/

/* ==========================
FOOTER
========================== */

footer{

margin-top:50px;

padding:35px 0;

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

background:#0b0d18;

}

.footer-content{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.footer-content h2{

font-size:28px;

margin-bottom:8px;

}

.footer-content p{

color:var(--muted);

}

.footer-links{

display:flex;

gap:20px;

}

.footer-links a{

color:var(--muted);

transition:.3s;

}

.footer-links a:hover{

color:var(--primary);

}

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

.logout-btn{

padding:12px 22px;

border-radius:14px;

background:linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

font-weight:700;

color:#fff;

transition:.3s;

}

.logout-btn:hover{

transform:translateY(-3px);

}

/* ==========================
BUTTONS
========================== */

.approve-btn,
.reject-btn,
.card-btn,
.delete-btn{

border:none;

cursor:pointer;

transition:.3s;

}

.approve-btn:hover,
.reject-btn:hover,
.card-btn:hover,
.delete-btn:hover{

transform:translateY(-3px);

opacity:.92;

}

/* ==========================
INPUT FOCUS
========================== */

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

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

box-shadow:

0 0 0 3px rgba(255,79,184,.15);

}

/* ==========================
SCROLLBAR
========================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#090b17;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

var(--primary),

var(--secondary)

);

border-radius:50px;

}

/* ==========================
ANIMATION
========================== */

.hero,
.submit-card,
.advert-card,
.login-card,
.tea-card,
.feature-card{

animation:fadeIn .6s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

}

.dashboard-stats{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.header{

flex-direction:column;

height:auto;

padding:18px 0;

gap:18px;

}

nav{

gap:20px;

}

.hero{

grid-template-columns:1fr;

}

.hero-left h1{

font-size:42px;

}

.form-grid{

grid-template-columns:1fr;

}

.package-grid{

grid-template-columns:1fr;

}

.upload-grid{

grid-template-columns:1fr;

}

.features{

grid-template-columns:1fr;

}

.dashboard-stats{

grid-template-columns:1fr;

}

.tea-actions{

grid-template-columns:1fr;

}

.footer-content{

flex-direction:column;

text-align:center;

}

}

@media(max-width:480px){

.container{

width:95%;

}

.hero-left h1{

font-size:36px;

}

.logo{

font-size:26px;

}

.logo i{

font-size:28px;

}

.submit-card{

padding:20px;

}

.advert-card{

padding:20px;

}

.login-card{

padding:25px;

}

}

/*==========================
 END OF STYLE.CSS
==========================*/