/* ========================================================= style.css Gaya keseluruhan sistem - Business Executive Style Responsive: PC / Tablet / Mobile (Android & iOS) Font: 12px (PC) / 10px (Mobile) Tema warna ditukar melalui atribut data-tema pada ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap'); /* --------------------------------------------------------- PEMBOLEH UBAH TEMA (CSS VARIABLES) --------------------------------------------------------- */ body[data-tema="red-blue"] { --warna-utama: #c0324a; --warna-utama-gelap: #9c2439; --warna-kedua: #1f4e8c; --warna-kedua-gelap: #15366a; --warna-terang: #fdf1f3; --warna-aksen: #f7c6d0; } body[data-tema="navy-red"] { --warna-utama: #16243f; --warna-utama-gelap: #0d1626; --warna-kedua: #b3253f; --warna-kedua-gelap: #841a2e; --warna-terang: #eef1f6; --warna-aksen: #c7d2e3; } body[data-tema="blue-mono"] { --warna-utama: #1a4d8f; --warna-utama-gelap: #123564; --warna-kedua: #3d7ac2; --warna-kedua-gelap: #2a5c99; --warna-terang: #eef4fc; --warna-aksen: #cfe0f5; } body[data-tema="red-mono"] { --warna-utama: #a3283f; --warna-utama-gelap: #7c1e30; --warna-kedua: #d65a70; --warna-kedua-gelap: #b34158; --warna-terang: #fdeef0; --warna-aksen: #f2c6ce; } body[data-tema="dark"] { --warna-utama: #7c2138; --warna-utama-gelap: #591627; --warna-kedua: #24437a; --warna-kedua-gelap: #182e56; --warna-terang: #1c1f2b; --warna-aksen: #2c3149; } /* --------------------------------------------------------- RESET & ASAS --------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', 'Poppins', Arial, sans-serif; font-size: 12px; color: #2b2b2b; background: #f4f5f7; line-height: 1.6; -webkit-font-smoothing: antialiased; } body[data-tema="dark"] { color: #eaeaf0; background: #12131c; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font-family: inherit; font-size: 12px; } .pembungkus { max-width: 1180px; margin: 0 auto; padding: 0 16px; } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ .header-atas { background: linear-gradient(120deg, var(--warna-utama) 0%, var(--warna-kedua) 100%); color: #fff; padding: 14px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.15); position: sticky; top: 0; z-index: 100; } .header-dalam { display: flex; align-items: center; justify-content: space-between; } .logo-organisasi { display: flex; align-items: center; gap: 10px; } .logo-organisasi img { height: 38px; width: 38px; object-fit: cover; border-radius: 8px; background: #fff; } .logo-organisasi h1 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0.5px; } .logo-organisasi span { display: block; font-size: 10px; font-weight: 400; opacity: 0.85; } .nav-utama { display: flex; align-items: center; gap: 6px; } .nav-utama a, .nav-utama button { color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.25s ease; } .nav-utama a:hover, .nav-utama button:hover { background: #fff; color: var(--warna-utama-gelap); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .penanda-troli { position: relative; } .penanda-troli .kiraan { position: absolute; top: -8px; right: -8px; background: #fff; color: var(--warna-utama-gelap); font-size: 9px; font-weight: 700; border-radius: 50%; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; } .suis-menu-mobile { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; } /* --------------------------------------------------------- SLAID FRONT PAGE --------------------------------------------------------- */ .bahagian-slaid { position: relative; width: 100%; height: 340px; overflow: hidden; background: #000; } .slaid-item { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slaid-item.aktif { opacity: 1; } .slaid-item img { width: 100%; height: 100%; object-fit: cover; } .slaid-keterangan { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); color: #fff; padding: 30px 24px 18px; font-size: 14px; font-weight: 500; } .slaid-titik { position: absolute; bottom: 10px; right: 20px; display: flex; gap: 6px; } .slaid-titik span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); display: inline-block; } .slaid-titik span.aktif { background: #fff; } /* --------------------------------------------------------- RUANG AI / VISUAL MODEN MINIMAL --------------------------------------------------------- */ .ruang-ai { background: linear-gradient(135deg, var(--warna-terang), #ffffff); border: 1px solid var(--warna-aksen); border-radius: 14px; padding: 22px; margin: 24px 0; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; } .ruang-ai::before { content: ''; position: absolute; width: 160px; height: 160px; background: radial-gradient(circle, var(--warna-kedua) 0%, transparent 70%); opacity: 0.15; top: -60px; right: -60px; border-radius: 50%; } .ruang-ai .ikon-ai { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--warna-utama), var(--warna-kedua)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0; animation: denyut 2.4s infinite ease-in-out; } @keyframes denyut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .ruang-ai h3 { font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--warna-utama-gelap); margin-bottom: 4px; } .ruang-ai p { font-size: 11.5px; color: #555; } /* --------------------------------------------------------- KAD & GRID --------------------------------------------------------- */ .tajuk-bahagian { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--warna-utama-gelap); margin: 26px 0 14px; padding-left: 12px; border-left: 4px solid var(--warna-kedua); } body[data-tema="dark"] .tajuk-bahagian { color: #fff; } .grid-modul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .kad-modul { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; border: 1px solid #ececec; } body[data-tema="dark"] .kad-modul { background: #1e2130; border-color: #2c3149; } .kad-modul:hover { transform: translateY(-5px); box-shadow: 0 10px 22px rgba(0,0,0,0.16); } .kad-modul .gambar-modul { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; background: #eee; } .kad-modul .isi-kad { padding: 12px 14px 14px; } .kad-modul h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--warna-utama-gelap); } body[data-tema="dark"] .kad-modul h4 { color: var(--warna-aksen); } .kad-modul p.keterangan-modul { font-size: 11px; color: #666; margin-bottom: 8px; min-height: 30px; } .harga-baris { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 10px; } .harga-baris span.label { color: #888; } .harga-baris span.nilai { font-weight: 700; color: var(--warna-kedua-gelap); } /* --------------------------------------------------------- BUTANG --------------------------------------------------------- */ .btn { display: inline-block; padding: 9px 16px; border-radius: 7px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; transition: all 0.22s ease; text-align: center; } .btn-utama { background: var(--warna-utama); color: #fff; } .btn-utama:hover { background: var(--warna-utama-gelap); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); } .btn-kedua { background: var(--warna-kedua); color: #fff; } .btn-kedua:hover { background: var(--warna-kedua-gelap); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.18); } .btn-luar { background: transparent; border: 1.5px solid var(--warna-utama); color: var(--warna-utama); } .btn-luar:hover { background: var(--warna-utama); color: #fff; } .btn-bahaya { background: #b02a2a; color: #fff; } .btn-bahaya:hover { background: #841f1f; transform: translateY(-2px); } .btn-kecil { padding: 6px 10px; font-size: 10.5px; } .btn-blok { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* --------------------------------------------------------- BORANG --------------------------------------------------------- */ .bekas-borang { max-width: 420px; margin: 40px auto; background: #fff; padding: 28px 26px; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.1); } body[data-tema="dark"] .bekas-borang { background: #1e2130; } .bekas-borang h2 { font-family: 'Poppins', sans-serif; color: var(--warna-utama-gelap); margin-bottom: 18px; font-size: 17px; text-align: center; } body[data-tema="dark"] .bekas-borang h2 { color: #fff; } .kump-input { margin-bottom: 14px; } .kump-input label { display: block; margin-bottom: 5px; font-weight: 500; color: #444; } body[data-tema="dark"] .kump-input label { color: #cfd2e0; } .kump-input input, .kump-input select, .kump-input textarea { width: 100%; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 7px; outline: none; transition: border-color 0.2s ease; background: #fff; color: #222; } body[data-tema="dark"] .kump-input input, body[data-tema="dark"] .kump-input select, body[data-tema="dark"] .kump-input textarea { background: #14161f; border-color: #333750; color: #eee; } .kump-input input:focus, .kump-input select:focus, .kump-input textarea:focus { border-color: var(--warna-kedua); } .pautan-bawah { text-align: center; margin-top: 14px; font-size: 11.5px; } .pautan-bawah a { color: var(--warna-kedua-gelap); font-weight: 600; } .pautan-bawah a:hover { text-decoration: underline; } /* --------------------------------------------------------- JADUAL --------------------------------------------------------- */ .bekas-jadual { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } body[data-tema="dark"] .bekas-jadual { background: #1e2130; } table.jadual-data { width: 100%; border-collapse: collapse; min-width: 560px; } table.jadual-data th, table.jadual-data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; font-size: 11.5px; } body[data-tema="dark"] table.jadual-data th, body[data-tema="dark"] table.jadual-data td { border-color: #2c3149; } table.jadual-data th { background: var(--warna-utama); color: #fff; font-weight: 600; position: sticky; top: 0; } table.jadual-data tr:hover { background: var(--warna-terang); } body[data-tema="dark"] table.jadual-data tr:hover { background: #262a3c; } .tag-status { padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; } .tag-tunai { background: #e2f4e6; color: #1e7c37; } .tag-lo { background: #fdeeda; color: #b5680b; } .tag-aktif { background: #e2f4e6; color: #1e7c37; } .tag-tidakaktif { background: #fbe3e3; color: #a32626; } .tag-menunggu { background: #fdf3d0; color: #92720b; } .tag-selesai { background: #e2f4e6; color: #1e7c37; } .tag-dibatal { background: #fbe3e3; color: #a32626; } /* --------------------------------------------------------- KAD RINGKASAN (DASHBOARD) --------------------------------------------------------- */ .grid-ringkasan { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; } .kad-ringkasan { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid var(--warna-kedua); } body[data-tema="dark"] .kad-ringkasan { background: #1e2130; } .kad-ringkasan .angka { font-size: 22px; font-weight: 700; color: var(--warna-utama-gelap); font-family: 'Poppins', sans-serif; } body[data-tema="dark"] .kad-ringkasan .angka { color: var(--warna-aksen); } .kad-ringkasan .label-ringkasan { font-size: 11px; color: #777; margin-top: 4px; } /* --------------------------------------------------------- NOTA ADMIN (papan info di dashboard user) --------------------------------------------------------- */ .kotak-nota { background: var(--warna-terang); border-left: 4px solid var(--warna-utama); padding: 14px 16px; border-radius: 8px; font-size: 11.5px; margin-bottom: 20px; color: #4a4a4a; } body[data-tema="dark"] .kotak-nota { background: #262a3c; color: #cfd2e0; } /* --------------------------------------------------------- MESEJ MAKLUMAN --------------------------------------------------------- */ .kotak-mesej { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 12px; font-weight: 500; } .mesej-berjaya { background: #e2f4e6; color: #1e7c37; border-left: 4px solid #1e7c37; } .mesej-ralat { background: #fbe3e3; color: #a32626; border-left: 4px solid #a32626; } /* --------------------------------------------------------- TROLI TEMPAHAN --------------------------------------------------------- */ .baris-troli { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 11.5px; } body[data-tema="dark"] .baris-troli { border-color: #2c3149; } .kawalan-kuantiti { display: flex; align-items: center; gap: 8px; } .kawalan-kuantiti button { width: 24px; height: 24px; border-radius: 5px; border: 1px solid #ccc; background: #fff; cursor: pointer; font-weight: 700; } .kawalan-kuantiti button:hover { background: var(--warna-kedua); color: #fff; } .kawalan-kuantiti input { width: 40px; text-align: center; padding: 4px; } /* --------------------------------------------------------- PAPAR GAMBAR UPLOAD & PROGRESS --------------------------------------------------------- */ .pratonton-gambar { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-top: 8px; display: none; border: 1px solid #ddd; } .pratonton-gambar.potret-modul { width: 160px; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; } .bar-kemajuan { width: 100%; height: 6px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 8px; display: none; } .bar-kemajuan-isi { height: 100%; width: 0%; background: var(--warna-kedua); transition: width 0.2s ease; } /* --------------------------------------------------------- NOTIFIKASI TERAPUNG (troli) --------------------------------------------------------- */ #notifikasiTerkini { position: fixed; top: 74px; right: 16px; z-index: 999; max-width: 280px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); } /* --------------------------------------------------------- FOOTER --------------------------------------------------------- */ .footer-bawah { background: var(--warna-utama-gelap); color: #fff; text-align: center; padding: 16px 0; margin-top: 40px; font-size: 11px; } /* --------------------------------------------------------- RESPONSIVE - TABLET & MOBILE --------------------------------------------------------- */ @media (max-width: 768px) { body { font-size: 10px; } .kump-input input, .kump-input select, .kump-input textarea, button, .btn { font-size: 10px; } .nav-utama { position: fixed; top: 62px; right: -100%; background: var(--warna-utama-gelap); flex-direction: column; width: 210px; padding: 14px; gap: 8px; transition: right 0.3s ease; box-shadow: -4px 0 14px rgba(0,0,0,0.25); max-height: calc(100vh - 62px); overflow-y: auto; } .nav-utama.buka { right: 0; } .nav-utama a, .nav-utama button { width: 100%; } .suis-menu-mobile { display: block; } .logo-organisasi h1 { font-size: 14px; } .bahagian-slaid { height: 200px; } .bekas-borang { margin: 20px 14px; padding: 20px 16px; } .grid-modul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @media (max-width: 420px) { .grid-modul { grid-template-columns: 1fr 1fr; } .ruang-ai { flex-direction: column; text-align: center; } }