Perbaikan minor

public/css/member/member.css

@@ -1,3 +1,260 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+body{
+    background: linear-gradient(135deg,#0f172a,#1e293b);
+    min-height:100vh;
+}
+
+/* BRAND */
+.brand-logo{
+    position:absolute;
+    left:40px;
+    top:40px;
+
+    display:flex;
+    align-items:center;
+    gap:12px;
+
+    opacity:0.9;
+}
+
+/* logo icon */
+.brand-logo img{
+    height:48px;
+    width:auto;
+}
+
+/* text */
+.brand-text{
+    font-size:28px;
+    font-weight:600;
+    letter-spacing:1px;
+    color:#9bd9e6;
+}
+
+/* highlight Q */
+.brand-q{
+    color:#19c2c8;
+}
+
+/* mobile */
+@media(max-width:768px){
+
+    .brand-logo{
+        position:relative;
+        left:auto;
+        top:auto;
+        justify-content:center;
+        margin-bottom:20px;
+    }
+
+}
+
+/* container center */
+.entry-container{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    height:100vh;
+}
+
+/* card */
+.entry-card{
+    background:rgba(255,255,255,0.08);
+    backdrop-filter: blur(20px);
+    border:1px solid rgba(255,255,255,0.15);
+    border-radius:20px;
+    padding:50px;
+    text-align:center;
+    box-shadow:0 20px 60px rgba(0,0,0,0.4);
+}
+
+/* title */
+.entry-label{
+    color:white;
+    margin-bottom:30px;
+}
+
+/* input */
+.nopol-input{
+    width:320px;
+    font-size:32px;
+    padding:20px;
+    border-radius:12px;
+    border:1px solid rgba(255,255,255,0.2);
+    background:rgba(255,255,255,0.1);
+    color:white;
+    text-align:center;
+    letter-spacing:4px;
+}
+
+/* focus */
+.nopol-input:focus{
+    outline:none;
+    border-color:#06b6d4;
+    box-shadow:0 0 0 3px rgba(6,182,212,0.3);
+}
+
+/* submit */
+.btn-submit{
+    display:block;
+    width:100%;
+    margin-top:25px;
+    padding:18px;
+    font-size:20px;
+    border:none;
+    border-radius:12px;
+    background:linear-gradient(135deg,#06b6d4,#0891b2);
+    color:white;
+    font-weight:bold;
+}
+
+/* hover */
+.btn-submit:hover{
+    background:linear-gradient(135deg,#0891b2,#0e7490);
+}
+
+/* mobile */
+@media (max-width:576px){
+
+    #form-input{
+        width:90%;
+        padding:30px;
+    }
+
+    #form-active{
+        width:90%;
+        padding:30px;
+    }
+
+    #form-expired{
+        width:90%;
+        padding:30px;
+    }
+
+    .nopol-input{
+        width:100%;
+        font-size:26px;
+    }
+
+}
+
+/* STATUS CARD */
+.status-card{
+    background: rgba(255,255,255,0.08);
+    backdrop-filter: blur(20px);
+    border-radius:18px;
+    padding:30px;
+    text-align:center;
+    border:1px solid rgba(255,255,255,0.15);
+    box-shadow:0 20px 50px rgba(0,0,0,0.35);
+}
+
+/* ACTICE CARD */
+.active-card{
+    border-left:6px solid #067411;
+}
+
+/* EXPIRED CARD */
+.expired-card{
+    border-left:6px solid #f87171;
+}
+
+/* HEADER */
+.status-header{
+    margin-bottom:20px;
+}
+
+/* BADGE */
+.status-badge{
+    display:inline-block;
+    background:#f87171;
+    color:white;
+    padding:6px 14px;
+    border-radius:20px;
+    font-size:12px;
+    margin-bottom:10px;
+}
+
+/* MEMBER INFO */
+.member-info{
+    margin:20px 0;
+}
+
+.info-row{
+    display:flex;
+    justify-content:space-between;
+    margin:8px 0;
+}
+
+.label{
+    opacity:0.7;
+    color:white;
+}
+
+.value{
+    font-weight:bold;
+    color:white;
+}
+
+/* WARNING TEXT */
+.active-warning{
+    background:rgba(113, 248, 158, 0.15);
+    border:1px solid rgba(113, 248, 118, 0.3);
+    padding:12px;
+    border-radius:10px;
+    margin-bottom:20px;
+    color:#a5fcc3;
+}
+
+.status-warning{
+    background:rgba(248,113,113,0.15);
+    border:1px solid rgba(248,113,113,0.3);
+    padding:12px;
+    border-radius:10px;
+    margin-bottom:20px;
+    color:#fca5a5;
+}
+
+.text-warning{
+    font-weight: bold;
+    color: white;
+}
+
+/* SELECT STYLE */
+.form-control.form-select{
+    background: rgba(255,255,255,0.08);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255,255,255,0.2);
+    color: #fff;
+    border-radius: 12px;
+    padding: 12px 16px;
+    font-size: 15px;
+    transition: all .2s ease;
+}
+
+/* hover */
+.form-control.form-select:hover{
+    border-color: rgba(255,255,255,0.35);
+}
+
+/* focus */
+.form-control.form-select:focus{
+    border-color: #06b6d4;
+    box-shadow: 0 0 0 3px rgba(6,182,212,0.25);
+    background: rgba(255,255,255,0.12);
+}
+
+/* dropdown arrow */
+.form-select{
+    background-position: right 12px center;
+}
+
+/* option dropdown */
+.form-select option{
+    color:#000;
+}
+
+/* BUTTON RENEW */
+.btn-renew{
+    background:linear-gradient(135deg,#f87171,#ef4444);
+}
+