body{
font-family:tahoma;
margin:0;
background:
radial-gradient(circle at 20% 20%,#eef2ff 0,#f8faff 40%,#f5f7fb 100%);
color:#222;
min-height:100vh;}
/* header */
.header{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 25px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0,0,0,0.05);
position:sticky;
top:0;
z-index:10;}

/* logo */

.logo{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:#444;
font-size:22px;
font-weight:bold;
transition:.2s;
}
.logo:hover{
transform:scale(1.03);
}
.logo img{
width:42px;
height:42px;
border-radius:10px;
animation:float 4s ease-in-out infinite;
box-shadow:0 8px 18px rgba(76,124,255,.25);}
@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-4px)}
100%{transform:translateY(0)}
}

/* header right */

.header-right{
display:flex;
align-items:center;
gap:10px;
}

.login-btn,.register-btn{
padding:7px 14px;
border-radius:20px;
text-decoration:none;
font-size:14px;
transition:.2s;
}

.login-btn{
background:#eef1f7;
color:#333;
}

.login-btn:hover{
background:#e4e8f2;
}

.register-btn{
background:linear-gradient(135deg,#5b6cff,#7a8cff);
color:white;
}

.register-btn:hover{
transform:translateY(-1px);
box-shadow:0 4px 10px rgba(0,0,0,.1);
}

.user-box{
font-size:14px;
}

.user-box a{
margin-right:8px;
color:#c33;
text-decoration:none;
}

/* hero */
.main-container{
text-align:center;
margin-top:90px;}
.hero-title{
font-size:48px;
font-weight:700;
background:linear-gradient(90deg,#4c7cff,#7a8cff,#9aa8ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:25px;}
/* search */
.searchBox.big{
margin:auto;
margin-top:40px;
max-width:650px;
display:flex;
align-items:center;
padding:10px 18px;
border-radius:50px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(10px);
border:1px solid rgba(0,0,0,0.05);
box-shadow:0 10px 30px rgba(0,0,0,.08),
inset 0 1px 1px rgba(255,255,255,.6);
transition:.3s;}
.searchBox.big{
margin:auto;
margin-top:35px;
position:relative;
box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.searchBox.big:hover{
transform:translateY(-2px);
box-shadow:0 20px 50px rgba(0,0,0,.15);}
.searchBox input{
flex:1;
border:none;
outline:none;
font-size:17px;
background:transparent;
padding:14px;}
.searchBox button{border:none;
width:48px;
height:48px;
border-radius:50%;
background:linear-gradient(135deg,#4c7cff,#6f88ff);
color:white;
font-size:18px;
cursor:pointer;
box-shadow:0 6px 16px rgba(76,124,255,.35);
transition:.25s;}

.searchBox button:hover{transform:scale(1.08) rotate(6deg);
box-shadow:0 10px 25px rgba(76,124,255,.5);}

/* clear button */

.clear-btn{
position:absolute;
left:65px;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
border-radius:50%;
border:none;
background:#f1f3f8;
cursor:pointer;
display:none;
font-size:14px;
color:#555;
transition:.2s;
}

.clear-btn:hover{
background:#e5e7ef;
}

/* suggestions */

.suggestion-box{
max-width:650px;
margin:auto;
background:white;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,.1);
overflow:hidden;}

.suggestion-box button{
width:100%;
border:none;
background:none;
padding:12px 18px;
text-align:right;
cursor:pointer;
font-size:14px;
transition:.15s;
}

.suggestion-box button:hover{
background:#f4f6ff;
}

/* trending */

.trending-box{
margin-top:25px;
text-align:center;
}

.trending-box span{
margin-left:10px;
color:#777;
}

.trending-box button{
margin:6px;
padding:8px 16px;
border-radius:30px;
border:none;
background:linear-gradient(120deg,#f0f3ff,#e7ecff);
font-size:13px;
cursor:pointer;
box-shadow:0 3px 10px rgba(0,0,0,.05);
transition:.25s;}

.trending-box button:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(0,0,0,.12);}

/* greeting */

.greeting{
margin-top:20px;
color:#666;
font-size:14px;
text-align:center;
}

/* results */

.container{
max-width:900px;
margin:auto;
padding:20px;
}
.result-card{
background:white;
padding:18px 20px;
border-radius:14px;
box-shadow:0 6px 22px rgba(0,0,0,.06);
margin-bottom:18px;
transition:.25s;}
.result-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.result-title{
font-size:20px;
color:#1a0dab;
text-decoration:none;
}

.result-title:hover{
text-decoration:underline;
}

.result-desc{
font-size:14px;
color:#555;
margin-top:6px;
line-height:1.6;
}

.breadcrumb{
font-size:13px;
color:#0a7d2c;
}

.favicon{
width:16px;
vertical-align:middle;
margin-left:5px;
}

/* footer */

.footer{
text-align:center;
padding:28px;
color:#777;
font-size:14px;
}

/* auth */

.auth-card{
max-width:380px;
background:#fff;
border-radius:16px;
box-shadow:0 10px 32px rgb(44 62 80 / 12%);
padding:2.5rem 2.2rem 1.6rem 2.2rem;
margin:4rem auto;
direction:rtl;
}

.auth-card .form-title{
text-align:center;
font-size:1.34rem;
color:#1976d2;
margin-bottom:1.3rem;
}

.input-group{
margin-bottom:1.2rem;
}

.input-group input{
width:100%;
background:#f3f6fb;
padding:0.78rem 1rem;
border:1.5px solid #cfd8dc;
border-radius:8px;
font-size:1rem;
transition:border .2s;
}

.input-group input:focus{
border-color:#1976d2;
background:#e8f0fe;
outline:none;
}

.btn.btn-primary{
width:100%;
background:linear-gradient(90deg,#1976d2 70%,#64b5f6);
color:#fff;
border-radius:8px;
padding:0.85rem 0;
font-size:1.05rem;
font-weight:600;
border:none;
cursor:pointer;
}

.btn.btn-primary:hover{
box-shadow:0 4px 18px rgba(0,0,0,.15);
}

/* AI box */

.ai-summary{
background:#fff;
border:1px solid #e4e7f0;
border-radius:10px;
padding:15px 20px;
margin:15px 0;
font-size:0.95rem;
line-height:1.5;
box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.ai-summary h3{
margin-top:0;
margin-bottom:10px;
font-size:1.05rem;
color:#4c7cff;
}

.asli{
color:red;
}

/* dark mode */

body.dark{
background:#121212;
color:#ddd;
}

body.dark .header{
background:#1b1b1b;
border-color:#333;
}

body.dark .searchBox{
background:#222;
border-color:#333;
}

body.dark .result-title{
color:#8ab4f8;
}

body.dark .result-desc{
color:#bbb;
}

/* mobile */

@media (max-width:600px){
.hero-title{font-size:32px;}

.header{
padding:12px 15px;
}

.logo{
font-size:18px;}
.searchBox.big{
max-width:92%;}
.searchBox input{
font-size:15px;
}

.trending-box button{
font-size:12px;
padding:6px 10px;
}

.container{
padding:15px;
}

.result-title{
font-size:18px;
}

}

@media (max-width:480px){

.main-container{
margin-top:70px;
}

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

.searchBox{
border-radius:30px;
}

.searchBox button{width:44px;
height:44px;}
.auth-card{
padding:2rem 0.7rem;
}

.header-right{
gap:6px;
}
.login-btn,.register-btn{
font-size:12px;
padding:6px 10px;}}