:root{
--bg:#f0fdfa;
--card:#ffffff;
--text:#0f172a;
--primary:#0891b2;
--secondary:#06b6d4;
--shadow:0 15px 40px rgba(8,145,178,.12);
}

.dark{
--bg:#0f172a;
--card:#1e293b;
--text:#f8fafc;

--primary:#22d3ee;
--secondary:#0891b2;

--shadow:0 15px 40px rgba(0,0,0,.35);
}

.dark .hero{
background:
linear-gradient(
135deg,
#020617 0%,
#0f172a 50%,
#1e293b 100%
);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
transition:.3s;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

header{
position:fixed;
top:0;
width:100%;
z-index:999;
backdrop-filter:blur(20px);
background:rgba(255,255,255,.85);
border-bottom:1px solid rgba(255,255,255,.15);
}

.dark header{
background:rgba(15,23,42,.85);
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
}

.logo{
font-size:28px;
font-weight:800;
background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

nav{
display:flex;
align-items:center;
gap:20px;
}

nav a{
text-decoration:none;
color:var(--text);
font-weight:600;
}

.theme-btn{
cursor:pointer;
border:none;
padding:10px 15px;
border-radius:10px;
background:var(--card);
color:var(--text);
}

.hero{
position:relative;
overflow:hidden;
min-height:65vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 20px 80px;
background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);
color:white;
}

.code-bg{
position:absolute;
right:80px;
bottom:50px;

font-size:180px;
font-weight:900;

color:rgba(255,255,255,.10);

pointer-events:none;
user-select:none;
}

.hero-content{
max-width:900px;
}

.hero h1{
font-size:60px;
margin-bottom:20px;
}

.mobile-break {
  display: none;
}

.hero p{
font-size:19px;
opacity:.9;
margin-bottom:30px;
}

.search{
width:100%;
max-width:600px;
margin:auto;
}

.search input{
width:100%;
padding:18px 25px;
border:none;
border-radius:50px;
font-size:16px;
}

.section-title {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 50px;
}

.section-tagline {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: 8px;
}

.section-title h2 {
  font-size: 38px;
  font-weight: 800;
  color: var(--text);
}

.apps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding-bottom:60px;
}

.card{
background:var(--card);
border-radius:25px;
overflow:hidden;
box-shadow:var(--shadow);
transition:.3s;
}

.card:hover{
transform:translateY(-10px);
}

.card img{
width:100%;
height:220px;
object-fit:cover;
}

.card-body{
padding:25px;
}

.badge{
display:inline-block;
padding:6px 12px;
background:#dbeafe;
color:#2563eb;
border-radius:20px;
font-size:12px;
margin-bottom:15px;
}

.card h3{
margin-bottom:10px;
}

.card p{
opacity:.8;
margin-bottom:20px;
line-height:1.6;
}

.actions{
display:flex;
gap:10px;
}

.btn{
flex:1;
padding:14px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:600;
}

.btn-detail{
background:#e2e8f0;
}

.btn-download{
background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);
color:white;
text-decoration:none;
text-align:center;
}

footer{
position:relative;
overflow:hidden;

background:#020617;
color:white;
padding:60px 20px;
text-align:center;
}

.footer-code{
position:absolute;
right:50px;
bottom:20px;

font-size:140px;
font-weight:900;

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

pointer-events:none;
user-select:none;
}

footer h3{
margin-bottom:15px;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  justify-content: center;
  align-items: center;
  padding: 40px 20px; /* Ditambah padding atas-bawah agar ada jarak aman dengan tepi layar desktop */
  z-index: 9999;
}

.modal-content {
  background: var(--card);
  max-width: 600px;
  width: 100%;
  padding: 30px;
  border-radius: 20px;
  position: relative;
  
  /* TAMBAHKAN DUA BARIS INI */
  max-height: 90vh;      /* Membatasi tinggi maksimal modal 90% dari tinggi layar desktop */
  overflow-y: auto;     /* Otomatis memunculkan scroll vertikal jika konten melebihi max-height */
}

.close{
position:absolute;
right:20px;
top:15px;
font-size:28px;
cursor:pointer;
}

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin:40px 0 60px;
}

.pagination button{
padding:12px 20px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:600;
background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);
color:white;
}

.pagination button:disabled{
opacity:.4;
cursor:not-allowed;
}

/* Style untuk informasi System Requirements di dalam Modal */
.modal-requirements {
  margin-top: 25px;
  padding: 20px;
  background: rgba(8, 145, 178, 0.06); /* Warna tint biru tipis */
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  text-align: left; /* Memastikan teks rata kiri */
}

/* Penyesuaian saat mode gelap aktif */
.dark .modal-requirements {
  background: rgba(34, 211, 238, 0.05);
  border-left-color: var(--primary);
}

.modal-requirements h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.modal-requirements ul {
  list-style: none; /* Menghilangkan bullet poin bawaan agar lebih clean */
  padding: 0;
  margin: 0;
}

.modal-requirements li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--text);
  opacity: 0.85;
}

.modal-requirements li:last-child {
  margin-bottom: 0;
}

.modal-requirements strong {
  color: var(--primary);
}

@media(max-width:768px){

.footer-code{
right:10px;
bottom:10px;
font-size:70px;
color:rgba(255,255,255,.04);
}

.code-bg{
right:10px;
bottom:10px;

font-size:80px;

color:rgba(255,255,255,.08);
}

.section-title {
    margin-top: 50px;
    margin-bottom: 35px;
  }

  .section-title h2 {
    font-size: 28px; /* Ukuran pas untuk mobile */
  }

.nav{
padding:15px;
}

.logo{
font-size:22px;
}

nav{
gap:10px;
}

nav a{
font-size:14px;
}

.theme-btn{
padding:8px 10px;
}

.hero{
min-height:50vh;
padding:90px 20px 50px;
}

.hero h1{
font-size:31px;
line-height:1.2;
}

.hero p{
font-size:17px;
max-width:500px;
margin:0 auto 25px;
}

.search input{
padding:14px 18px;
font-size:15px;
}

.mobile-break {
    display: inline;
  }
  
  .hero h1 {
    font-size: 33px;
    line-height: 1.3; /* Sedikit dinaikkan agar jarak antar baris lebih pas */
  }

.apps{
grid-template-columns:1fr;
gap:35px;
padding-bottom:40px;
}

.card img{
height:180px;
}

.card-body{
padding:20px;
}

.actions{
flex-direction:column;
}

.btn{
width:100%;
}

.modal-content {
    padding: 20px;
    padding-top: 40px; /* Memberi ruang agar tombol 'x' close tidak menutupi judul aplikasi */
    max-height: 85vh;  /* Membatasi tinggi modal di HP agar tidak mentok ke layar atas/bawah */
    overflow-y: auto;  /* Memastikan konten di dalam modal HP bisa di-scroll */
  }

}