/* =============================================================
   Design system — mengikuti SOP UI/UX Mudahin (app-shell, card,
   tombol 48–56px, micro-animation, bottom sheet, toast),
   dengan palet: PUTIH DOMINAN + AKSEN BIRU.
   ============================================================= */
:root{
  /* brand */
  --biru:#2563EB;          /* primary  (blue-600) */
  --biru-terang:#3B82F6;   /* icon/glow (blue-500) */
  --biru-lembut:#EFF6FF;   /* soft fill (blue-50)  */
  --biru-garis:#BFDBFE;    /* blue-200 */

  /* permukaan */
  --putih:#FFFFFF;
  --latar:#F0F2F5;
  --garis:#E5E7EB;
  --pembatas:#F3F4F6;

  /* teks */
  --teks:#111827;
  --teks-2:#6B7280;
  --teks-3:#9CA3AF;

  /* semantik */
  --sukses:#10B981;
  --peringatan:#F59E0B;
  --bahaya:#EF4444;

  /* bentuk */
  --r-l:16px;   /* rounded-2xl */
  --r-m:12px;   /* rounded-xl  */
  --r-s:10px;
  --bayang-s:0 1px 2px rgba(17,24,39,.06);
  --bayang-m:0 4px 12px rgba(17,24,39,.08);
  --bayang-l:0 10px 24px rgba(17,24,39,.12);
  --cepat:150ms cubic-bezier(.2,.8,.3,1);
}

[data-tema="gelap"]{
  --putih:#1B2027;
  --latar:#111418;
  --garis:#2B3138;
  --pembatas:#242A31;
  --teks:#E9ECF1;
  --teks-2:#9AA4B2;
  --teks-3:#6B7684;
  --biru-lembut:#152238;
  --biru-garis:#1E3A67;
  --bayang-s:0 1px 2px rgba(0,0,0,.4);
  --bayang-m:0 4px 12px rgba(0,0,0,.45);
  --bayang-l:0 10px 24px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--latar);color:var(--teks);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.mono{font-family:Inconsolata,ui-monospace,"Cascadia Mono",monospace;font-variant-numeric:tabular-nums}

/* ---------- APP SHELL ---------- */
.cangkang{
  max-width:448px;margin:0 auto;min-height:100%;
  background:var(--latar);
  display:flex;flex-direction:column;
  box-shadow:0 0 0 1px var(--garis);
}
@media(min-width:449px){ body{padding:0} .cangkang{min-height:100vh} }

/* ---------- HEADER (sticky) ---------- */
.kepala{
  position:sticky;top:0;z-index:30;background:var(--putih);
  padding:14px 16px 0;border-bottom:1px solid var(--garis);
}
.kepala-baris{display:flex;align-items:center;gap:12px}
.merek{
  width:40px;height:40px;border-radius:var(--r-m);flex:none;
  background:var(--biru-lembut);color:var(--biru);
  display:flex;align-items:center;justify-content:center;
}
.kepala h1{
  margin:0;font-size:14.5px;font-weight:700;letter-spacing:.01em;
  text-transform:uppercase;white-space:nowrap;
}
@media(max-width:380px){ .kepala h1{font-size:13px} }
.kepala .sub{margin:1px 0 0;font-size:12px;color:var(--teks-2)}
.aksi-kepala{margin-inline-start:auto;display:flex;gap:6px}
.garis-aksen{
  height:3px;margin-top:12px;border-radius:99px;
  background:linear-gradient(90deg,var(--biru-terang),var(--biru),var(--biru-terang));
  box-shadow:0 0 10px rgba(59,130,246,.45);
}

/* ---------- TOMBOL ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-m);border:1px solid transparent;
  font-weight:600;transition:all var(--cepat);
  min-height:48px;padding:0 16px;font-size:14px;
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--putih),0 0 0 4px var(--biru-terang)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-utama{
  background:var(--biru);color:#fff;box-shadow:var(--bayang-m);min-height:56px;font-size:15px;font-weight:700;
}
.btn-utama:hover{background:#1D4ED8;box-shadow:var(--bayang-l)}
.btn-kedua{background:var(--putih);color:var(--teks);border-color:var(--garis)}
.btn-kedua:hover{background:var(--latar);border-color:var(--teks-3)}
.btn-penuh{width:100%}
.btn-kecil{min-height:38px;padding:0 12px;font-size:13px;border-radius:var(--r-s)}
.btn-bahaya{color:var(--bahaya);border-color:var(--garis);background:var(--putih)}
.btn-bahaya:hover{background:#FEF2F2;border-color:#FCA5A5}

/* tombol ikon bulat di header */
.btn-ikon{
  width:40px;height:40px;min-height:40px;padding:0;border-radius:var(--r-m);
  background:var(--putih);border:1px solid var(--garis);color:var(--teks-2);
  display:inline-flex;align-items:center;justify-content:center;transition:all var(--cepat);
}
.btn-ikon:hover{color:var(--biru);border-color:var(--biru-garis);background:var(--biru-lembut)}
.btn-ikon:active{transform:scale(.94)}
.btn-ikon.nyala{background:var(--biru-lembut);color:var(--biru);border-color:var(--biru-garis)}

/* ---------- KONTEN & KARTU ---------- */
main{flex:1;padding-bottom:96px}
.tab{display:none;padding:16px}
.tab.aktif{display:block}
.kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  box-shadow:var(--bayang-s);padding:16px;margin-bottom:16px;
}
.kartu h3{
  margin:0 0 14px;font-size:15px;font-weight:700;
  display:flex;align-items:center;gap:8px;color:var(--teks);
}
.kartu h3 svg{color:var(--biru-terang)}
.kartu p{margin:0 0 12px;font-size:13px;color:var(--teks-2)}
.label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teks-2);margin-bottom:6px;
}
.baris{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kosong{text-align:center;color:var(--teks-3);padding:28px 12px;font-size:13px}

/* ---------- INPUT ---------- */
input[type=number],input[type=text],select{
  width:100%;min-height:48px;padding:0 14px;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-m);
  transition:all var(--cepat);
}
select{padding-inline-end:10px}
input:focus,select:focus{
  outline:none;border-color:transparent;box-shadow:0 0 0 2px var(--biru);
}
input[type=range]{width:130px;accent-color:var(--biru)}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--biru)}
.set{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--pembatas);font-size:13px;font-weight:500;
}
.set:last-child{border-bottom:0}
.set select,.set input[type=number]{width:auto;max-width:210px;min-height:44px}

/* ---------- BAR NAVIGASI MUSHAF ---------- */
.bar-mushaf{
  position:sticky;top:var(--tinggi-kepala,78px);z-index:20;
  display:flex;gap:6px;align-items:center;
  padding:10px 16px;background:var(--putih);border-bottom:1px solid var(--garis);
  overflow-x:auto;scrollbar-width:none;
}
.bar-mushaf::-webkit-scrollbar{display:none}
.bar-mushaf select{width:auto;min-height:40px;font-size:13px;border-radius:var(--r-s);flex:none;max-width:132px}
.bar-mushaf .nomor{width:64px;min-height:40px;text-align:center;border-radius:var(--r-s);flex:none}
.bar-mushaf .btn-ikon{width:40px;height:40px;flex:none}

/* ---------- HALAMAN MUSHAF ---------- */
.halaman{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  box-shadow:var(--bayang-s);padding:18px 16px 14px;margin:16px;
}
.kepala-hal{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
.pil{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;
  background:var(--biru-lembut);color:var(--biru);border:1px solid var(--biru-garis);
}
.pil.netral{background:var(--latar);color:var(--teks-2);border-color:var(--garis)}
.teks-arab{
  direction:rtl;text-align:justify;text-align-last:center;
  font-family:"Amiri Quran","Scheherazade New","Traditional Arabic",serif;
  font-size:var(--ukuran-arab,30px);line-height:var(--tinggi-arab,2.15);
  color:var(--teks);
}
.ayat{cursor:pointer;border-radius:6px;padding:0 2px;transition:background var(--cepat)}
.ayat:hover{background:var(--biru-lembut)}
.ayat.pilih{background:var(--biru-lembut);box-shadow:inset 0 0 0 1.5px var(--biru)}
.ayat.main{background:rgba(37,99,235,.12)}
.ayat.diulang{outline:2px dashed var(--biru-garis);outline-offset:3px}
.ayat.bertanda{
  background:linear-gradient(transparent 62%,rgba(37,99,235,.22) 62%);
}
.no-ayat{
  font-family:Inconsolata,monospace;font-size:.4em;color:var(--biru);
  border:1.5px solid var(--biru-garis);border-radius:50%;
  padding:.2em .45em;margin:0 .28em;vertical-align:.3em;white-space:nowrap;
}
.hitung{
  font-family:Inter,sans-serif;font-size:.34em;font-weight:700;vertical-align:.6em;
  background:var(--biru);color:#fff;border-radius:99px;padding:.2em .55em;margin-inline-start:.15em;
}
.penanda{font-size:.4em;vertical-align:.55em;margin-inline-start:.1em}
.penanda svg{width:1em;height:1em;color:var(--biru)}
.kepala-surah{
  text-align:center;margin:16px 0 10px;padding:10px 8px;border-radius:var(--r-m);
  background:var(--biru-lembut);border:1px solid var(--biru-garis);
}
.kepala-surah .nm{font-family:"Amiri Quran",serif;font-size:23px;direction:rtl;color:var(--teks)}
.kepala-surah .sub{font-size:11px;color:var(--teks-2);margin-top:2px}
.basmalah{
  direction:rtl;text-align:center;font-family:"Amiri Quran","Scheherazade New",serif;
  font-size:calc(var(--ukuran-arab,30px) * .74);margin:6px 0 10px;
}
.terjemah{
  direction:ltr;text-align:left;font-size:13px;color:var(--teks-2);
  border-inline-start:3px solid var(--biru-garis);padding:2px 0 2px 10px;margin:6px 0 14px;
}
.terjemah b{color:var(--biru);font-weight:700}
.kaki-hal{
  display:flex;justify-content:space-between;align-items:center;
  color:var(--teks-3);font-size:11px;font-family:Inconsolata,monospace;
  border-top:1px solid var(--pembatas);margin-top:14px;padding-top:10px;
}

/* kendali "dibaca sampai ayat" */
.kendali-hal{
  margin-top:12px;padding:12px;border-radius:var(--r-m);
  background:var(--latar);border:1px solid var(--garis);
}
.kendali-hal .isian{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.kendali-hal select.tanda-surah{min-height:44px;flex:1;font-size:13px}
.kendali-hal input.tanda-ayat{min-height:44px;width:92px;text-align:center;font-family:Inconsolata,monospace}
.kendali-hal .ket{font-size:12px;color:var(--teks-2);display:flex;align-items:center;gap:6px}
.kendali-hal .ket b{color:var(--biru);font-family:Inconsolata,monospace}

/* ---------- PEMUTAR (thumb zone) ---------- */
.pemutar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:72px;width:min(448px,100%);
  background:var(--putih);border-top:1px solid var(--garis);
  padding:10px 16px;display:none;gap:10px;align-items:center;
  box-shadow:0 -6px 18px rgba(17,24,39,.06);z-index:25;
}
.pemutar.tampil{display:flex}
.pemutar .info{font-size:12px;color:var(--teks-2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pemutar .info b{color:var(--teks);font-family:Inconsolata,monospace}

/* ---------- NAV BAWAH (thumb zone) ---------- */
nav.bawah{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:min(448px,100%);display:flex;background:var(--putih);
  border-top:1px solid var(--garis);z-index:26;
  padding-bottom:env(safe-area-inset-bottom);
}
nav.bawah button{
  flex:1;background:none;border:0;padding:8px 4px 7px;color:var(--teks-3);
  font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;
  border-top:2px solid transparent;transition:color var(--cepat);min-height:56px;
}
nav.bawah button.aktif{color:var(--biru);border-top-color:var(--biru)}
nav.bawah button:active{transform:scale(.95)}

/* ---------- BOTTOM SHEET ---------- */
.tirai{
  position:fixed;inset:0;background:rgba(17,24,39,.45);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--cepat);z-index:40;
}
.tirai.tampil{opacity:1;pointer-events:auto}
.lembar{
  position:fixed;bottom:0;left:50%;transform:translate(-50%,100%);
  width:min(448px,100%);max-height:88vh;overflow:auto;z-index:41;
  background:var(--putih);border-radius:var(--r-l) var(--r-l) 0 0;
  box-shadow:var(--bayang-l);transition:transform 220ms cubic-bezier(.2,.8,.3,1);
  padding:8px 16px calc(16px + env(safe-area-inset-bottom));
}
.lembar.tampil{transform:translate(-50%,0)}
.pegangan{width:40px;height:4px;border-radius:99px;background:var(--garis);margin:6px auto 12px}
.lembar h3{margin:0 0 4px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.lembar h3 svg{color:var(--biru-terang)}
.lembar .ket-atas{font-size:12px;color:var(--teks-2);margin:0 0 14px}
.medan{margin-bottom:12px}

/* ---------- MODAL TENGAH ---------- */
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.96);
  width:min(360px,calc(100% - 32px));z-index:42;
  background:var(--putih);border-radius:var(--r-l);box-shadow:var(--bayang-l);
  padding:20px;opacity:0;pointer-events:none;transition:all var(--cepat);
}
.modal.tampil{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal h3{margin:0 0 8px;font-size:16px;font-weight:700}
.modal p{font-size:13px;color:var(--teks-2);margin:0 0 18px}

/* ---------- TOAST ---------- */
.toast-area{
  position:fixed;bottom:140px;left:50%;transform:translateX(-50%);
  width:min(416px,calc(100% - 32px));z-index:50;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-radius:var(--r-m);background:var(--teks);color:#fff;
  font-size:13px;font-weight:600;box-shadow:var(--bayang-l);
  animation:masuk 220ms cubic-bezier(.2,.8,.3,1);
}
.toast.sukses{background:var(--sukses)}
.toast.info{background:var(--biru)}
.toast.bahaya{background:var(--bahaya)}
.toast svg{flex:none}
@keyframes masuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- BILAH KEMAJUAN ---------- */
.bar-kemajuan{height:8px;border-radius:99px;background:var(--pembatas);overflow:hidden;margin:12px 0 8px}
.bar-kemajuan i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--biru-terang),var(--biru));transition:width .25s ease-out}
.angka-besar{font-family:Inconsolata,monospace;font-size:22px;font-weight:700;color:var(--biru)}

/* ---------- DAFTAR PENANDA ---------- */
.item{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--pembatas);
}
.item:last-child{border-bottom:0}
.item .bulat{
  width:40px;height:40px;border-radius:var(--r-m);flex:none;
  background:var(--biru-lembut);color:var(--biru);
  display:flex;align-items:center;justify-content:center;
}
.item .isi{flex:1;min-width:0}
.item .isi b{font-size:14px;font-family:Inconsolata,monospace}
.item .isi span{display:block;font-size:12px;color:var(--teks-2)}

/* ---------- MUAT ---------- */
.rangka{
  height:14px;border-radius:8px;margin:10px 0;
  background:linear-gradient(90deg,var(--pembatas) 25%,var(--garis) 37%,var(--pembatas) 63%);
  background-size:400% 100%;animation:kilau 1.2s ease infinite;
}
@keyframes kilau{0%{background-position:100% 50%}100%{background-position:0 50%}}
.putar{animation:puter .9s linear infinite}
@keyframes puter{to{transform:rotate(360deg)}}

/* ---------- kartu "Pasang & cara pakai" ---------- */
.status-pasang{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:12px;
  border-radius:var(--r-m);background:var(--biru-lembut);border:1px solid var(--biru-garis);
  color:var(--biru);font-size:13px;font-weight:600;
}
.status-pasang.netral{background:var(--latar);border-color:var(--garis);color:var(--teks-2)}
.status-pasang.sukses{background:#ECFDF5;border-color:#A7F3D0;color:#047857}
[data-tema="gelap"] .status-pasang.sukses{background:#0C2C22;border-color:#155E48;color:#6EE7B7}

.alamat{
  display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:8px;
  border:1px solid var(--garis);border-radius:var(--r-m);background:var(--putih);
}
.alamat code{
  font-family:Inconsolata,monospace;font-size:13px;font-weight:700;color:var(--teks);
  flex:1;overflow:hidden;text-overflow:ellipsis;
}
.alamat .btn{min-height:36px;padding:0 10px;font-size:12px}

.lipat{
  border:1px solid var(--garis);border-radius:var(--r-m);margin-top:8px;background:var(--putih);
  overflow:hidden;
}
.lipat summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:13px 14px;font-size:13px;font-weight:600;transition:background var(--cepat);
}
.lipat summary::-webkit-details-marker{display:none}
.lipat summary::after{
  content:'';margin-inline-start:auto;width:8px;height:8px;flex:none;
  border-right:2px solid var(--teks-3);border-bottom:2px solid var(--teks-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--cepat);
}
.lipat[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.lipat summary:hover{background:var(--biru-lembut)}
.lipat summary svg{color:var(--biru-terang)}
.langkah{margin:0;padding:0 16px 14px 32px;font-size:13px;color:var(--teks-2);line-height:1.6}
.langkah li{margin-bottom:8px}
.langkah li::marker{color:var(--biru);font-weight:700}
.langkah b{color:var(--teks)}
.tik{
  font-family:Inconsolata,monospace;font-size:12px;font-weight:700;
  background:var(--latar);border:1px solid var(--garis);border-radius:6px;padding:1px 6px;color:var(--teks);
}

/* ---------- bar sesi pengulangan ---------- */
.bar-sesi{
  display:none;align-items:center;gap:10px;
  position:sticky;top:calc(var(--tinggi-kepala,78px) + 60px);z-index:19;
  margin:12px 16px 0;padding:10px 12px;border-radius:var(--r-m);
  background:var(--biru);color:#fff;box-shadow:var(--bayang-m);
}
.bar-sesi.tampil{display:flex}
.bar-sesi svg{flex:none}
.bar-sesi .isi-sesi{flex:1;min-width:0;line-height:1.3}
.bar-sesi .isi-sesi b{display:block;font-size:13px;font-family:Inconsolata,monospace}
.bar-sesi .isi-sesi span{font-size:11px;opacity:.85}
.bar-sesi .btn{min-height:34px;padding:0 10px;font-size:12px;background:rgba(255,255,255,.16);
  color:#fff;border-color:rgba(255,255,255,.35)}
.bar-sesi .btn:hover{background:rgba(255,255,255,.28)}

/* pratinjau halaman di tab Ulang */
.halaman.pratinjau{margin:0;box-shadow:none;border-style:dashed}
#kartuPratinjau .kartu{padding:0}

/* ---------- bar pemilihan ayat untuk pengulangan ---------- */
.bar-pilih{
  display:none;align-items:center;gap:10px;
  position:sticky;top:calc(var(--tinggi-kepala,78px) + 60px);z-index:19;
  margin:12px 16px 0;padding:10px 12px;border-radius:var(--r-m);
  background:var(--biru-lembut);color:var(--biru);
  border:1px solid var(--biru-garis);box-shadow:var(--bayang-s);
}
.bar-pilih.tampil{display:flex}
.bar-pilih .isi-sesi{flex:1;min-width:0;line-height:1.3}
.bar-pilih .isi-sesi b{display:block;font-size:13px}
.bar-pilih .isi-sesi span{font-size:11px;opacity:.85;font-family:Inconsolata,monospace}
.bar-pilih .btn{min-height:34px;padding:0 10px;font-size:12px}

/* ayat saat mode pilih */
.mode-pilih .ayat{cursor:crosshair}
.ayat.batas-pilih{
  background:var(--biru-lembut);border-radius:6px;
  box-shadow:inset 0 0 0 2px var(--biru);
}
.ayat.batas-pilih .no-ayat{background:var(--biru);color:#fff;border-color:var(--biru)}
.ayat.dalam-pilih{background:rgba(37,99,235,.10);border-radius:4px}

/* ---------- kolom rentang ayat yang bisa diketuk ---------- */
.medan-ayat{
  width:100%;display:flex;align-items:center;gap:10px;
  min-height:56px;padding:0 14px;margin-bottom:8px;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-m);
  transition:all var(--cepat);text-align:left;
}
.medan-ayat:hover{border-color:var(--biru-garis);background:var(--biru-lembut)}
.medan-ayat:active{transform:scale(.98)}
.medan-ayat .ket{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teks-2);flex:none}
.medan-ayat b{
  flex:1;text-align:right;font-family:Inconsolata,monospace;font-size:17px;font-weight:700;color:var(--teks);
}
.medan-ayat svg{color:var(--biru);flex:none}
.petunjuk-pilih{font-size:12px;color:var(--teks-2);margin:2px 0 10px}

/* ---------- dua kartu "cara mengulang" ---------- */
.pilih-cara{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.kartu-pilih{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:12px;min-height:96px;text-align:left;
  background:var(--putih);border:2px solid var(--garis);border-radius:var(--r-m);
  transition:all var(--cepat);
}
.kartu-pilih:hover{border-color:var(--biru-garis)}
.kartu-pilih:active{transform:scale(.97)}
.kartu-pilih svg{color:var(--teks-3)}
.kartu-pilih b{font-size:14px;font-weight:700}
.kartu-pilih span{font-size:11px;line-height:1.35;color:var(--teks-2);font-family:Inconsolata,monospace}
.kartu-pilih.aktif{
  border-color:var(--biru);background:var(--biru-lembut);box-shadow:var(--bayang-s);
}
.kartu-pilih.aktif svg{color:var(--biru)}
.kartu-pilih.aktif b{color:var(--biru)}