/* Rakan Tunas /rakan/ (6 Okt 2026, ikut mockup/rakan-v1 yang diluluskan). Gaya v4: kertas krim, Baloo 2 + Lexend, butang batu sungai.
   Satu lajur (maks 520px) untuk telefon dan desktop. */
:root {
  --kertas: #FFF7EA; --kertas-2: #F6EBD6; --kertas-3: #EADBC0; --dakwat: #1E3A2C; --dakwat-2: #56695D; --dakwat-3: #8C9A90;
  --tunas: #2EBD59; --tunas-gelap: #1E9A47; --tunas-muda: #DDF5E3; --kunyit: #FFB627; --kunyit-gelap: #DB8D06; --kunyit-muda: #FFF0CC;
  --biru: #2B9CF2; --biru-gelap: #1C78C4; --merah: #D9534F; --merah-muda: #FBE3E2;
  --tajuk: "Baloo 2", "Lexend", system-ui, sans-serif; --font: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body.rk { margin: 0; min-height: 100vh; background: var(--kertas); color: var(--dakwat); font: 500 16px/1.5 var(--font); }
.rk [hidden] { display: none !important; }
.rk h1, .rk h2, .rk h3 { font-family: var(--tajuk); font-weight: 800; margin: 0; line-height: 1.1; }
.rk a { color: var(--tunas-gelap); font-weight: 700; }
.rk svg { width: 20px; height: 20px; }
.rk button { font-family: inherit; }
.rk :focus-visible { outline: 3px solid var(--biru); outline-offset: 2px; }

.rk-nav { display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 18px 10px; }
.rk-nav .brand { display: flex; align-items: center; gap: 8px; font: 800 19px var(--tajuk); color: var(--dakwat); text-decoration: none; margin-right: auto; }
.rk-nav .brand i { width: 28px; height: 28px; border-radius: 9px; background: var(--tunas); display: grid; place-items: center; }
.rk-nav .brand svg { width: 18px; height: 18px; color: #fff; }
.rk-w { max-width: 520px; margin: 0 auto; padding: 0 18px max(40px, env(safe-area-inset-bottom)); }
.rk-muat { text-align: center; color: var(--dakwat-3); padding: 60px 0; }

.pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font: 700 12px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.pil.hijau { background: var(--tunas-muda); color: var(--tunas-gelap); }
.pil.kunyit { background: var(--kunyit-muda); color: #8A5A00; }

/* Butang batu sungai */
/* 14 Okt 2026 (mockup/kontras-butang-v1, pilihan B): butang hijau bertulisan putih guna hijau gelap #1E9A47 (3.64:1; dulu #2EBD59 2.46:1). Hijau terang kekal untuk ilustrasi, bar & aksen. */
.b4 { --c: var(--tunas-gelap); --cd: #157A36; --t: #fff; display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 22px;
  border: 0; border-radius: 999px; background: var(--c); color: var(--t); font: 800 18px/1 var(--tajuk); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 5px 0 var(--cd); transition: transform .12s, box-shadow .12s; }
.b4:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 1px 0 var(--cd); }
.b4:disabled { opacity: .6; cursor: default; transform: none; }
.b4.putih { --c: #fff; --cd: var(--kertas-3); --t: var(--tunas-gelap); }
.b4.biru { --c: var(--biru); --cd: var(--biru-gelap); }
.b4.sm { min-height: 44px; font-size: 15px; padding: 8px 16px; width: auto; }
.pautan { border: 0; background: none; padding: 6px; color: var(--dakwat-2); font: 700 14px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.kad { background: #fff; border-radius: 24px; box-shadow: 0 4px 0 var(--kertas-3); padding: 16px; }
.lbl { font: 700 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--dakwat-3); margin: 0 0 8px; }

/* Borang */
.medan { margin-bottom: 14px; }
.medan label { display: block; font: 700 14px var(--font); margin: 0 2px 6px; }
.medan input { width: 100%; height: 54px; border-radius: 16px; border: 2px solid var(--kertas-3); background: #fff; padding: 0 16px; font: 600 17px var(--font); color: var(--dakwat); outline: none; }
.medan input:focus { border-color: var(--tunas); box-shadow: 0 0 0 4px var(--tunas-muda); }
.medan input.salah { border-color: var(--merah); box-shadow: 0 0 0 4px var(--merah-muda); }
.medan input.kod { text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.pilih { width: 100%; height: 54px; border-radius: 16px; border: 2px solid var(--kertas-3); background: #fff; padding: 0 14px; font: 600 17px var(--font); color: var(--dakwat); outline: none; appearance: auto; }
.pilih:focus { border-color: var(--tunas); box-shadow: 0 0 0 4px var(--tunas-muda); }
.medan .pilih.salah { border-color: var(--merah); box-shadow: 0 0 0 4px var(--merah-muda); }
.akaun .ubah.bank { flex-wrap: wrap; }
.akaun .ubah.bank .pilih { height: 46px; font-size: 15px; border-radius: 14px; }
.akaun .ubah.bank input { flex: 1 1 140px; }
.akaun .ubah.bank small { width: 100%; font-size: 12px; color: var(--dakwat-2); }
.medan input.otp { font: 800 28px var(--tajuk); letter-spacing: .5em; text-align: center; padding-left: .5em; }
.medan small { display: block; margin: 6px 4px 0; font-size: 12.5px; color: var(--dakwat-2); line-height: 1.4; }
.medan .pratonton { font-weight: 700; color: var(--tunas-gelap); word-break: break-all; }
.medan .ralat { color: var(--merah); font-weight: 600; }
.semak { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; margin: 4px 2px 18px; cursor: pointer; }
.semak input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.semak i { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--kertas-3); background: #fff; flex: none; display: grid; place-items: center; transition: .15s; }
.semak i svg { width: 16px; height: 16px; color: #fff; opacity: 0; }
.semak input:checked + i { background: var(--tunas); border-color: var(--tunas); }
.semak input:checked + i svg { opacity: 1; }
.semak input:focus-visible + i { outline: 3px solid var(--biru); outline-offset: 2px; }
.ralat-umum { background: var(--merah-muda); color: #8E2B28; border-radius: 14px; padding: 10px 14px; font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.dev { background: var(--kunyit-muda); color: #6A4600; border-radius: 12px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }

/* 1. Masuk */
.hero { position: relative; border-radius: 30px; background: linear-gradient(170deg, #E9F9EE 0%, #C9F0D5 100%); padding: 20px 20px 22px; overflow: hidden; min-height: 300px; margin-top: 4px; }
.hero h1 { font-size: 40px; margin-top: 12px; position: relative; z-index: 1; }
.hero h1 em { font-style: normal; color: var(--tunas-gelap); }
.hero p { position: relative; z-index: 1; margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--dakwat-2); max-width: 205px; }
.hero img { position: absolute; right: -14px; bottom: -14px; width: 165px; height: auto; }
.hero .bukit { position: absolute; left: -20px; right: -20px; bottom: -60px; height: 110px; background: #A8E2B8; border-radius: 50%; }
.tiga { display: grid; gap: 8px; margin: 16px 0 18px; }
.tiga div { display: flex; gap: 12px; align-items: center; }
.tiga b { width: 34px; height: 34px; border-radius: 12px; background: var(--kunyit-muda); color: #8A5A00; display: grid; place-items: center; font: 800 18px var(--tajuk); flex: none; }
.tiga span { font-size: 14.5px; line-height: 1.35; }
.tajuk-borang { font-size: 32px; margin: 6px 0 4px; }
.sub { margin: 0 0 18px; color: var(--dakwat-2); font-size: 14.5px; line-height: 1.5; }

/* 3. Papan */
.tab { display: flex; gap: 4px; background: var(--kertas-2); border-radius: 18px; padding: 4px; margin: 0 0 14px; }
.tab button { flex: 1; border: 0; border-radius: 14px; padding: 10px 4px; font: 800 16px var(--tajuk); background: none; color: var(--dakwat-3); cursor: pointer; }
.tab button[aria-selected="true"] { background: #fff; color: var(--dakwat); box-shadow: 0 2px 0 rgba(30, 58, 44, .1); }
.salam { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.salam h1 { font-size: 28px; flex: 1; overflow-wrap: anywhere; }
.kodpil { font: 800 15px var(--tajuk); background: var(--dakwat); color: #fff; padding: 6px 12px; border-radius: 12px; letter-spacing: .06em; }
.amaran { background: var(--kunyit-muda); color: #6A4600; border-radius: 16px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin-bottom: 12px; }

.duit { position: relative; border-radius: 26px; padding: 18px 18px 16px; background: linear-gradient(160deg, #FFC94D 0%, #FFB627 60%, #F5A20F 100%); color: #3A2600; box-shadow: 0 5px 0 var(--kunyit-gelap); overflow: hidden; }
.duit .lbl { color: #7A5000; }
.duit .besar { font: 800 46px/1 var(--tajuk); letter-spacing: -.01em; }
.duit .besar small { font-size: 22px; margin-right: 2px; }
.duit .bila { margin-top: 6px; font-size: 13.5px; font-weight: 600; max-width: 215px; line-height: 1.4; }
.duit img { position: absolute; right: -6px; top: -4px; width: 112px; height: auto; }
.duit .kecil { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.duit .kecil div { background: rgba(255, 255, 255, .55); border-radius: 16px; padding: 10px 12px; }
.duit .kecil b { display: block; font: 800 20px var(--tajuk); }
.duit .kecil span { font-size: 11.5px; font-weight: 600; color: #6A4600; }

.link { margin-top: 16px; }
.baris-link { display: flex; align-items: center; gap: 8px; background: var(--kertas); border: 2px dashed var(--kertas-3); border-radius: 16px; padding: 8px 8px 8px 14px; }
.baris-link code { flex: 1; font: 700 15px var(--font); color: var(--dakwat); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris-link code b { color: var(--tunas-gelap); }
.ikon-b { width: 42px; height: 42px; border-radius: 12px; border: 0; background: #fff; box-shadow: 0 2px 0 var(--kertas-3); display: grid; place-items: center; cursor: pointer; color: var(--dakwat); flex: none; }
.link .b4 { margin-top: 12px; }
.cip { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cip button { border: 2px solid var(--kertas-3); background: #fff; border-radius: 99px; padding: 7px 12px; font: 700 12.5px var(--font); color: var(--dakwat-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cip button svg { width: 14px; height: 14px; }

.stat { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; padding: 6px 4px; }
.stat div { text-align: center; padding: 12px 2px; border-left: 2px solid var(--kertas-2); }
.stat div:first-child { border-left: 0; }
.stat b { display: block; font: 800 26px/1 var(--tajuk); }
.stat span { font-size: 11px; font-weight: 600; color: var(--dakwat-2); line-height: 1.2; display: block; margin-top: 4px; }

.sek { margin-top: 22px; }
.sek > h2 { font-size: 21px; margin-bottom: 10px; }
.seg { display: flex; gap: 4px; background: var(--kertas-2); border-radius: 14px; padding: 4px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.seg button { flex: 1 1 auto; border: 0; border-radius: 10px; padding: 8px 8px; font: 700 12.5px var(--font); white-space: nowrap; background: none; color: var(--dakwat-3); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--dakwat); box-shadow: 0 2px 0 rgba(30, 58, 44, .08); }
.senarai { background: #fff; border-radius: 20px; padding: 2px 14px; box-shadow: 0 3px 0 var(--kertas-3); }
.kom { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--kertas-2); }
.kom:first-child { border-top: 0; }
.kom .ik { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.kom .ik svg { width: 22px; height: 22px; }
.kom .tx { flex: 1; line-height: 1.25; min-width: 0; }
.kom .tx b { display: block; font: 700 14.5px var(--font); }
.kom .tx small { font-size: 12px; color: var(--dakwat-3); }
.kom .amt { text-align: right; flex: none; }
.kom .amt b { display: block; font: 800 19px var(--tajuk); color: var(--tunas-gelap); }
.kom .amt span { display: inline-block; margin-top: 3px; font: 700 10.5px var(--font); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.kom.menunggu .ik, .s-menunggu { background: var(--kertas-2); color: var(--dakwat-2); }
.kom.boleh .ik, .s-boleh { background: var(--kunyit-muda); color: #8A5A00; }
.kom.dibayar .ik, .s-dibayar { background: var(--tunas-muda); color: var(--tunas-gelap); }
.kom.batal .ik, .s-batal { background: var(--merah-muda); color: var(--merah); }
.kom.batal .amt b { color: var(--dakwat-3); text-decoration: line-through; }
.kosong { text-align: center; padding: 18px 10px 20px; }
.kosong img { width: 110px; height: auto; }
.kosong p { margin: 6px 0 0; color: var(--dakwat-2); font-size: 14px; }
.nota { margin: 12px 4px 0; font-size: 12.5px; color: var(--dakwat-2); line-height: 1.5; display: flex; gap: 8px; }
.nota svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--dakwat-3); }

/* Pengesahan pindahan (admin tanda dibayar → Rakan sahkan) */
.sahkan { margin-top: 14px; border-radius: 22px; padding: 14px 16px; background: #fff; border: 2px solid var(--tunas); box-shadow: 0 4px 0 var(--tunas-muda); }
.sahkan p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; }
.sahkan .dua { display: flex; gap: 10px; }
.sahkan .dua .b4 { flex: 1 1 0; padding: 8px 10px; font-size: 14px; }
.sahkan .b4 svg { width: 18px; height: 18px; }

/* 4. Kit & akaun */
.tele { display: flex; align-items: center; gap: 14px; border-radius: 24px; padding: 16px; background: linear-gradient(160deg, #2B9CF2, #1C78C4); color: #fff; box-shadow: 0 5px 0 #145A94; text-decoration: none; }
.rk a.tele { color: #fff; }
.tele .ik { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; flex: none; }
.tele .ik svg { width: 28px; height: 28px; }
.tele b { display: block; font: 800 20px var(--tajuk); }
.tele span { font-size: 13px; opacity: .9; line-height: 1.35; display: block; font-weight: 500; }
.ayat { background: #fff; border-radius: 20px; padding: 14px; box-shadow: 0 3px 0 var(--kertas-3); margin-bottom: 12px; }
.ayat .k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ayat .k b { font: 800 16px var(--tajuk); flex: 1; }
.ayat p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dakwat-2); background: var(--kertas); border-radius: 14px; padding: 10px 12px; white-space: pre-line; overflow-wrap: anywhere; }
.ayat p mark { background: var(--tunas-muda); color: var(--tunas-gelap); font-weight: 700; padding: 0 3px; border-radius: 4px; }
.salin { border: 0; background: var(--tunas-muda); color: var(--tunas-gelap); font: 800 13px var(--tajuk); letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; border-radius: 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.salin svg { width: 15px; height: 15px; }
.petunjuk { margin: -4px 2px 10px; font-size: 12.5px; color: var(--dakwat-2); }
.aturan { display: grid; gap: 10px; }
.aturan div { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.aturan i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.aturan i svg { width: 18px; height: 18px; }
.aturan .ya i { background: var(--tunas-muda); color: var(--tunas-gelap); }
.aturan .tak i { background: var(--merah-muda); color: var(--merah); }
.akaun .baris { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--kertas-2); font-size: 14px; flex-wrap: wrap; }
.akaun .baris:first-child { border-top: 0; }
.akaun .baris > span { flex: 1; color: var(--dakwat-2); }
.akaun .baris > b { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.akaun .ubah { width: 100%; display: flex; gap: 8px; }
.akaun .ubah input { flex: 1; min-width: 0; height: 46px; border-radius: 14px; border: 2px solid var(--kertas-3); padding: 0 12px; font: 600 16px var(--font); color: var(--dakwat); }
.akaun .ubah .b4 { min-height: 46px; }
.bawah { text-align: center; margin-top: 16px; }

.toast { position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translate(-50%, -20px); opacity: 0; background: var(--dakwat); color: #fff; font: 700 14px var(--font);
  padding: 10px 16px; border-radius: 99px; display: flex; gap: 8px; align-items: center; transition: .25s; z-index: 50; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--tunas); }
@media (prefers-reduced-motion: reduce) { .b4, .toast { transition: none; } }
@media (min-width: 700px) { .rk-w { padding-top: 8px; } .hero h1 { font-size: 46px; } .hero p { max-width: 260px; } .hero img { width: 190px; } }