/* ===================================
   TikiFex Premium UI Final
=================================== */

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

html{scroll-behavior:smooth;}

body{
font-family:'Cairo',sans-serif;
min-height:100vh;
background:linear-gradient(135deg,#1b1b2f,#0f0c29,#302b63);
color:#fff;
overflow-x:hidden;
position:relative;
}

/* ===============================
   Glass Floating Navbar
================================ */
.navbar{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:1200px;
padding:15px 30px;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(255,255,255,0.06);
backdrop-filter:blur(25px);
border-radius:25px;
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 15px 50px rgba(0,0,0,0.5);
z-index:1000;
transition:0.3s;
}

.logo{
font-size:26px;
font-weight:900;
background:linear-gradient(90deg,#ff416c,#ff4b2b);
-webkit-background-clip:text;
color:transparent;
}

.navbar a{
color:#fff;
margin:0 15px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}

.navbar a:hover{
color:#ff416c;
}

/* ===============================
   Container
================================ */
.container{
max-width:1200px;
margin:auto;
padding:180px 20px 60px;
text-align:center;
}

/* ===============================
   Hero Section
================================ */
.hero h1{
font-size:50px;
font-weight:900;
line-height:1.2;
background:linear-gradient(90deg,#fff,#ff416c,#ff4b2b);
-webkit-background-clip:text;
color:transparent;
animation:fadeInUp 1s ease;
}

.hero p{
opacity:0.85;
margin-top:15px;
margin-bottom:40px;
font-size:18px;
animation:fadeInUp 1.2s ease;
}

/* ===============================
   Glass Download Box
================================ */
.download-box{
background:rgba(255,255,255,0.06);
padding:35px;
border-radius:30px;
backdrop-filter:blur(35px);
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 25px 80px rgba(0,0,0,0.5);
display:flex;
justify-content:center;
align-items:center;
gap:15px;
flex-wrap:wrap;
transition:0.4s;
}

.download-box:hover{
transform:translateY(-6px);
}

.download-box input{
width:420px;
padding:18px;
border-radius:20px;
border:none;
outline:none;
background:rgba(255,255,255,0.12);
color:#fff;
font-size:16px;
transition:0.3s;
}

.download-box input:focus{
background:rgba(255,255,255,0.2);
box-shadow:0 0 20px rgba(255,255,255,0.3);
}

/* ===============================
   Buttons
================================ */
button,.btn{
padding:18px 35px;
border-radius:25px;
border:none;
cursor:pointer;
font-weight:800;
font-size:15px;
transition:0.3s;
color:#fff;
position:relative;
overflow:hidden;
}

/* MP4 Button */
button{
background:linear-gradient(90deg,#ff416c,#ff4b2b);
box-shadow:0 0 20px rgba(255,65,108,0.6);
}

button:hover{
transform:scale(1.08);
box-shadow:0 0 45px rgba(255,65,108,1);
}

/* MP3 Button */
.btn{
background:linear-gradient(90deg,#1dd1a1,#10ac84);
box-shadow:0 0 20px rgba(29,209,161,0.7);
margin:10px;
}

.btn.mp3{
background:linear-gradient(90deg,#1e90ff,#00bfff);
box-shadow:0 0 20px rgba(30,144,255,0.7);
}

/* ===============================
   Result Card
================================ */
.result-box{
margin-top:50px;
padding:40px;
border-radius:30px;
background:rgba(255,255,255,0.06);
backdrop-filter:blur(35px);
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 25px 80px rgba(0,0,0,0.5);
animation:fadeInUp 0.8s ease;
}

video{
border-radius:25px;
box-shadow:0 20px 60px rgba(0,0,0,0.8);
}

/* ===============================
   Loader / Progress Bar
================================ */
.loader-wrapper{
margin-top:40px;
}

.progress-bar{
width:300px;
height:10px;
background:rgba(255,255,255,0.15);
border-radius:20px;
overflow:hidden;
margin:auto;
}

.progress{
height:100%;
width:0%;
background:linear-gradient(90deg,#ff416c,#ff4b2b);
animation:progressAnim 3s infinite;
}

@keyframes progressAnim{
0%{width:0%;}
50%{width:80%;}
100%{width:0%;}
}

/* ===============================
   Footer
================================ */
.site-footer{
margin-top:120px;
padding:60px 20px;
background:rgba(0,0,0,0.35);
backdrop-filter:blur(25px);
border-top:1px solid rgba(255,255,255,0.1);
text-align:center;
border-radius:20px;
color:#fff;
}

.site-footer a{
color:#fff;
opacity:0.85;
text-decoration:none;
transition:0.3s;
}

.site-footer a:hover{
color:#ff416c;
opacity:1;
}

/* ===============================
   Animations
================================ */
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(50px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ===============================
   Responsive
================================ */
@media(max-width:768px){
.hero h1{font-size:32px;}
.download-box input{width:100%;}
.navbar{width:95%;}
}
/* ===============================
   Static Pages Card Style
================================ */

.form-box{
background:rgba(255,255,255,0.06);
padding:50px;
border-radius:30px;
backdrop-filter:blur(35px);
border:1px solid rgba(255,255,255,0.15);
box-shadow:0 25px 80px rgba(0,0,0,0.5);
max-width:900px;
margin:auto;
text-align:right;
animation:fadeInUp 0.8s ease;
}

.form-box h2,
.form-box h3{
margin-bottom:20px;
}

.form-box p{
margin-bottom:20px;
opacity:0.9;
}

.form-box ul{
margin-bottom:20px;
padding-right:20px;
}

.form-box li{
margin-bottom:10px;
}
/* Navbar Glass */
.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(25px);
  border-radius: 25px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 15px 50px rgba(0,0,0,0.5);
  z-index: 10000;
}

.logo {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(90deg,#ff416c,#ff4b2b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  gap: 15px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  transition: 0.3s;
}

.nav-links a:hover {
  background: rgba(255,255,255,0.1);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  z-index: 10001;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: 0.3s;
}

/* تأثير الهامبورجر عند فتح القائمة */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Responsive - قائمة من تحت الهيدر */
@media(max-width: 768px) {
  .navbar {
    padding: 12px 20px;
  }

  .nav-links {
    position: absolute;
    top: 100%; /* تظهر مباشرة تحت الهيدر */
    left: 0;
    right: 0;
    width: 100%;
    max-height: 0; /* مخفية تماماً */
    overflow: hidden;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(25px);
    flex-direction: column;
    padding: 0 20px;
    gap: 0;
    transition: max-height 0.4s ease-in-out;
    z-index: 9999;
    border-radius: 0 0 25px 25px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
  }

  .nav-links.active {
    max-height: 400px; /* ارتفاع كافي لإظهار كل الروابط */
    padding: 20px;
  }

  .nav-links a {
    font-size: 18px;
    padding: 15px 20px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-links.active a {
    opacity: 1;
    transform: translateY(0);
  }

  /* تأخير ظهور كل رابط على حدة */
  .nav-links.active a:nth-child(1) { transition-delay: 0.1s; }
  .nav-links.active a:nth-child(2) { transition-delay: 0.15s; }
  .nav-links.active a:nth-child(3) { transition-delay: 0.2s; }
  .nav-links.active a:nth-child(4) { transition-delay: 0.25s; }
  .nav-links.active a:nth-child(5) { transition-delay: 0.3s; }
  .nav-links.active a:nth-child(6) { transition-delay: 0.35s; }

  .hamburger {
    display: flex;
  }
}

/* تعديل الـ padding-top للمحتوى */
.content-padding {
  padding-top: 90px;
}
/* ===============================
   Footer Enhanced - تحسين الفوتر
================================ */
/* ===============================
   Footer - النسخة المحسنة (على هيكل القديم)
================================ */
.site-footer {
  margin-top: 120px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(25px);
  border-top: 2px solid rgba(255, 65, 108, 0.3);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  padding: 60px 20px 20px;
}

/* تأثير توهج في أعلى الفوتر */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff416c, #ff4b2b, transparent);
  animation: footerGlow 3s infinite;
}

@keyframes footerGlow {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* تنسيق الفوتر توب - نفس الهيكل القديم */
.footer-top {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: right;
  margin-bottom: 50px;
}

/* تنسيق العلامة التجارية */
.footer-brand h3 {
  color: #ff416c;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  font-size: 15px;
  margin: 0;
}

/* تنسيق روابط الفوتر */
.footer-links h4,
.footer-contact h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.footer-links h4::after,
.footer-contact h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  border-radius: 3px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 15px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
  position: relative;
  padding-right: 0;
}

.footer-links a:hover {
  color: #ff416c;
  padding-right: 8px;
}

/* تنسيق معلومات الاتصال */
.footer-contact p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 15px;
}

.footer-contact p:last-child {
  margin-bottom: 0;
}

/* تنسيق الفوتر السفلي - نفس الهيكل القديم */
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.footer-bottom p {
  margin: 0;
}

/* تحسينات للشاشات الصغيرة */
@media(max-width: 992px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 768px) {
  .site-footer {
    margin-top: 80px;
    padding: 40px 15px 15px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .footer-links h4::after,
  .footer-contact h4::after {
    right: 50%;
    transform: translateX(50%);
  }

  .footer-links a:hover {
    padding-right: 0;
  }

  .footer-brand h3 {
    font-size: 24px;
  }
}
/* ===============================
   SEO Content Styling - تحسين مظهر المحتوى
================================ */
.seo-content {
  max-width: 1000px;
  margin: 80px auto 40px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-align: right;
  line-height: 1.8;
}

/* العناوين الرئيسية H2 */
.seo-content h2 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 30px;
  color: transparent;
  background: linear-gradient(135deg, #fff, #ff416c);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  padding-bottom: 20px;
  text-align: center;
}

.seo-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  border-radius: 4px;
}

/* العناوين الفرعية H3 */
.seo-content h3 {
  font-size: 28px;
  font-weight: 800;
  margin: 40px 0 20px;
  color: #ff416c;
  position: relative;
  padding-right: 20px;
}

.seo-content h3::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 30px;
  background: linear-gradient(180deg, #ff416c, #ff4b2b);
  border-radius: 4px;
}

/* العناوين الصغيرة H4 */
.seo-content h4 {
  font-size: 22px;
  font-weight: 700;
  margin: 30px 0 15px;
  color: #ff9f1c;
  position: relative;
  display: inline-block;
}

/* الفقرات */
.seo-content p {
  font-size: 17px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.9;
}

/* تنسيق القوائم المنقطة */
.seo-content ul {
  margin: 25px 0;
  padding-right: 30px;
  list-style: none;
}

.seo-content ul li {
  margin-bottom: 15px;
  position: relative;
  padding-right: 35px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
}

.seo-content ul li::before {
  content: '✓';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #ff416c;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
}

/* تنسيق القوائم المرقمة */
.seo-content ol {
  margin: 25px 0;
  padding-right: 30px;
  counter-reset: seo-counter;
  list-style: none;
}

.seo-content ol li {
  margin-bottom: 15px;
  position: relative;
  padding-right: 45px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
  counter-increment: seo-counter;
}

.seo-content ol li::before {
  content: counter(seo-counter);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4);
}

/* تنسيق الأسئلة الشائعة (H4 داخل الفقرات) */
.seo-content h4 + p,
.seo-content h4 + ul {
  margin-top: 10px;
}

/* تنسيق النقاط المهمة */
.seo-content strong {
  color: #ff416c;
  font-weight: 800;
}

/* تنسيق الروابط */
.seo-content a {
  color: #ff416c;
  text-decoration: none;
  position: relative;
  font-weight: 600;
  transition: 0.3s;
  border-bottom: 1px solid rgba(255, 65, 108, 0.3);
}

.seo-content a:hover {
  color: #ff9f1c;
  border-bottom-color: #ff9f1c;
}

/* تنسيق الكلمات المفتاحية في النهاية */
.seo-content p:last-of-type {
  background: rgba(255, 65, 108, 0.1);
  padding: 25px;
  border-radius: 20px;
  border: 1px solid rgba(255, 65, 108, 0.2);
  margin-top: 40px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.seo-content p:last-of-type strong {
  color: #ff416c;
  font-size: 16px;
}

/* فواصل بين الأقسام */
.seo-content hr {
  margin: 40px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 65, 108, 0.3), transparent);
}

/* تنسيق خاص للاقتباسات */
.seo-content blockquote {
  margin: 30px 0;
  padding: 20px 30px;
  background: rgba(255, 65, 108, 0.05);
  border-right: 5px solid #ff416c;
  border-radius: 15px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

/* تحسينات للشاشات الصغيرة */
@media(max-width: 768px) {
  .seo-content {
    margin: 40px 15px;
    padding: 25px 20px;
  }

  .seo-content h2 {
    font-size: 28px;
  }

  .seo-content h3 {
    font-size: 24px;
  }

  .seo-content h4 {
    font-size: 20px;
  }

  .seo-content p,
  .seo-content ul li,
  .seo-content ol li {
    font-size: 16px;
  }

  .seo-content ul li {
    padding-right: 30px;
  }

  .seo-content ol li {
    padding-right: 40px;
  }

  .seo-content ol li::before {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }

  .seo-content p:last-of-type {
    padding: 20px 15px;
  }
}

/* تنسيق للشاشات الصغيرة جداً */
@media(max-width: 480px) {
  .seo-content {
    padding: 20px 15px;
  }

  .seo-content h2 {
    font-size: 24px;
  }

  .seo-content h3 {
    font-size: 20px;
    padding-right: 15px;
  }

  .seo-content h3::before {
    width: 5px;
    height: 25px;
  }

  .seo-content ul {
    padding-right: 15px;
  }

  .seo-content ul li {
    padding-right: 25px;
  }

  .seo-content ol {
    padding-right: 15px;
  }

  .seo-content ol li {
    padding-right: 35px;
  }
}