*,
*::before,
*::after{

box-sizing:border-box;

}

html{

font-family:Arial, sans-serif;
background:#0f1c2e;
color:white;

margin:0;
padding:0;

overflow-x:hidden;

}

body{

font-family:Arial, sans-serif;
background:#0f1c2e;
color:white;

margin:0;
padding:0;

}

.container{

max-width:1100px;
margin:auto;
padding:40px 20px;

}

.title{

font-size:32px;
margin-bottom:10px;

}

.desc{

opacity:.8;
margin-bottom:30px;

}

.tool-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;

}

/* Arab: grid tetap rata lebar kolom (hindari kartu menyempit tidak konsisten) */
body.lang-ar .tool-grid {
  justify-items: stretch;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  width: 100%;
}

body.lang-ar .tool-grid .tool-card {
  width: 100%;
  max-width: none;
  text-align: center;
  box-sizing: border-box;
}

body.lang-ar .tool-card h3,
body.lang-ar .tool-card p {
  text-align: center;
}

body.lang-ar .tool-card-head {
  justify-content: center;
}

.tool-card{

background:linear-gradient(145deg,#1c2f45,#243a55);

padding:25px;

border-radius:14px;

text-decoration:none;

color:white;

transition:.3s;

box-shadow:0 6px 20px rgba(0,0,0,.4);

max-width:100%;

}

.tool-card:hover{

transform:translateY(-6px);

box-shadow:0 10px 30px rgba(0,0,0,.6);

}

.tool-card h3{

color:#4fc3f7;
margin-bottom:10px;

}

.tool-card-head{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.tool-card-head .icon{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:22px;
line-height:1;
flex-shrink:0;
}

.tool-card-head h3{
margin:0;
}

@media (max-width: 600px){

  .container{

    padding:24px 16px;

  }

  .title{

    font-size:24px;

  }

  .desc{

    font-size:14px;

  }

  .tool-grid{

    grid-template-columns:1fr;

  }

  .tool-card{

    padding:18px;

  }
}

/* PRE FOOTER */

.pre-footer{

margin-top:80px;

padding:60px 20px;

text-align:center;

background:linear-gradient(
180deg,
rgba(20,40,80,0.4),
rgba(10,20,40,0.8)
);

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

}

/* title */

.pre-footer h2{

font-size:28px;

font-weight:600;

color:white;

margin-bottom:10px;

}

/* text */

.pre-footer p{

max-width:650px;

margin:auto;

font-size:16px;

line-height:1.6;

color:rgba(255,255,255,0.75);

margin-bottom:30px;

}

/* buttons */

.pre-footer-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

/* button */

.pre-footer-buttons a{

padding:10px 22px;

border-radius:10px;

text-decoration:none;

font-size:14px;

font-weight:500;

color:white;

background:linear-gradient(135deg,#3aa0ff,#6dd5ff);

box-shadow:0 4px 15px rgba(80,160,255,0.3);

transition:0.25s;

}

/* hover */

.pre-footer-buttons a:hover{

transform:translateY(-2px);

box-shadow:0 8px 25px rgba(80,160,255,0.5);

}

.footer{

padding:15px 20px;

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

display:flex;
justify-content:center;
align-items:center;
gap:20px;

flex-wrap:wrap;

font-size:14px;
opacity:0.8;

}

.footer-links{

display:flex;

gap:20px;

flex-wrap:wrap;

justify-content:center;

}

.footer-links a{

color:white;

text-decoration:none;

font-size:14px;

opacity:0.85;

transition:0.2s;

}

.footer-links a:hover{

opacity:1;

color:#7fd3ff;

}

.footer-bottom{

display:flex;
flex-direction:column;

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

gap:8px;

padding:15px 10px;

text-align:center;

}

/* NAVBAR */

.navbar{

position:-webkit-sticky;
position:sticky;
top:0;

background:rgba(10,20,40,0.8);
backdrop-filter:blur(10px);

border-bottom:1px solid rgba(255,255,255,0.08);

z-index:1000;

}

/* container */

.nav-container{

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

flex-wrap:wrap;

gap:16px;

padding:12px 20px;

}

/* logo */

.logo{

font-weight:600;

font-size:18px;

text-decoration:none;

color:white;

}

.nav-brand{
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.nav-brand-glass{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 30px rgba(0,0,0,0.22);
  box-sizing:border-box;
}

.nav-brand-icon{
  width:22px;
  height:22px;
  border-radius:8px;
}

.nav-brand-text{
  font-weight:800;
  letter-spacing:0.01em;
  white-space:nowrap;
}

/* menu */

.nav-menu{

list-style:none;

display:flex;

gap:12px;

margin:0;
padding:0;

padding:6px 8px;
border-radius:18px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(12px);
box-sizing:border-box;

flex-wrap:nowrap;

}

/* link */

.nav-menu a{

text-decoration:none;

color:white;

font-size:12px;

font-weight:500;

opacity:0.85;

transition:0.2s;

white-space:nowrap;

}

/* hover */

.nav-menu a:hover{

opacity:1;

color:#6dd5ff;

}

/* active page */

.nav-menu a.active{

color:#6dd5ff;

font-weight:600;

}

@media (max-width:768px){

.navbar{
padding:10px 12px;
position:static;
top:auto;
}

.logo{
font-size:16px;
}

.nav-container{

flex-direction:column;

align-items:center;

gap:10px;

}

.nav-brand{
  width:100%;
  justify-content:center;
}

.nav-brand-glass{
  width:100%;
  justify-content:center;
  padding:9px 12px;
}

.nav-menu{

display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
overflow:hidden;
padding:10px 10px;
margin:0;
border-radius:18px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(12px);
box-sizing:border-box;
min-width:0;

}

.nav-menu li{
list-style:none;
}

.nav-menu a{

font-size:13px;

white-space:normal;

padding:10px 8px;
border-radius:14px;
background: rgba(255,255,255,0.04);
display:flex;
justify-content:center;
width:100%;
min-width:0;
box-sizing:border-box;

}

}

 .scroll-to-top{
   position: fixed;

   left: 18px;
   bottom: 26px;

   width: 42px;
   height: 36px;

   border: none;
   border-radius: 10px;

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

   cursor: pointer;

   background: linear-gradient(135deg,#ef4444,#dc2626);

   color: white;

   box-shadow:
     0 6px 16px rgba(0,0,0,0.25),
     0 3px 8px rgba(239,68,68,0.35);

   opacity: 0;
   visibility: hidden;

   transform: translateY(14px);
   transition: all 0.28s ease;

   z-index: 999;
   pointer-events: none;
 }

 .scroll-to-top svg{
   width: 16px;
   height: 16px;
 }

 .scroll-to-top.show{
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   pointer-events: auto;
 }

 .scroll-to-top:hover{
   transform: translateY(-2px);
   box-shadow:
     0 10px 22px rgba(0,0,0,0.3),
     0 6px 14px rgba(239,68,68,0.45);
 }

 .scroll-to-top:active{
   transform: scale(0.95);
 }