/* =====================================
   ROOT COLORS
===================================== */

:root {

    --coffee-dark: #2F1B12;
    --coffee-medium: #4E342E;
    --coffee-light: #6D4C41;

    --cream: #F7F4EF;
    --cream-light: #FCFAF7;

    --accent-green: #639922;
    --accent-green-soft: #DDE8CC;

    --accent-red: #BC4749;

    --text-dark: #2B2B2B;
    --text-medium: #6E6E6E;

    --shadow: rgba(20, 20, 20, 0.06);
}

/* =====================================
   RESET
===================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =====================================
   BODY
===================================== */

body {

    font-family: 'DM Sans', sans-serif;

    font-size: 17px;

    line-height: 1.5;

    background: var(--cream);

    color: var(--text-dark);

    overflow-x: hidden;

    position: relative;

    min-height: 100vh;
}

/* =====================================
   BACKGROUND TEXTURE
===================================== */

body::before {

    content: '';

    position: fixed;

    inset: 0;

    background:

        radial-gradient(
            circle at 20% 80%,
            rgba(109,76,65,0.05) 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 20%,
            rgba(88,129,87,0.04) 0%,
            transparent 35%
        );

    pointer-events: none;

    z-index: 0;
}
/* =====================================
   CONTAINER
===================================== */

.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 24px;

    position: relative;

    z-index: 1;
}

/* =====================================
   HEADER
===================================== */

header {

    padding: 18px 0;

    position: sticky;

    top: 0;

    background: rgba(252,250,247,0.92);

    backdrop-filter: blur(14px);

    z-index: 100;

    border-bottom:
        1px solid rgba(78,52,46,0.06);

    animation: slideDown .45s ease-out;
}

@keyframes slideDown {

    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =====================================
   HEADER CONTENT
===================================== */

.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 24px;
}

/* =====================================
   LOGO
===================================== */

.logo {

    display: flex;

    align-items: center;

    gap: 14px;
}

.logo-icon {

    width: 52px;
    height: 52px;

    background: #4E342E;

    border-radius: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    box-shadow:
        0 6px 16px rgba(20,20,20,0.08);

    flex-shrink: 0;
}

.logo-icon img {

    height: 90px;

    width: auto;

    background: white;

    padding: 8px;

    border-radius: 12px;
}

/* =====================================
   LOGO TEXT
===================================== */

.logo-text h1 {

    font-family: 'Fraunces', serif;

    font-size: 34px;

    font-weight: 800;

    color: var(--coffee-dark);

    line-height: 1;

    letter-spacing: -.02em;
}

.logo-text p {

    font-size: 12px;

    color: var(--text-medium);

    margin-top: 4px;

    letter-spacing: .08em;

    text-transform: uppercase;
}

/* =====================================
   NAVIGATION
===================================== */

nav {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

.nav-btn {

    padding: 11px 18px;

    border: none;

    background: transparent;

    color: var(--text-medium);

    font-family: 'DM Sans', sans-serif;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    border-radius: 12px;

    transition: all .22s ease;

    position: relative;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}

.nav-btn:hover {

    background: rgba(78,52,46,0.06);

    color: var(--coffee-dark);
}

.nav-btn.active {

    background: #4E342E;

    color: white;

    box-shadow:
        0 6px 16px rgba(20,20,20,0.10);
}

/* =====================================
   MAIN
===================================== */

main {
    display: block;
}

/* =====================================
   ANIMATION
===================================== */

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {

    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

/* =========================================
   HERO
========================================= */

.dashboard-hero {

    background: #4E342E;

    border-radius: 22px;

    padding: 36px;

    margin-bottom: 28px;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 10px 28px rgba(20,20,20,0.10);
}

.dashboard-hero::before {

    content: '';

    position: absolute;

    top: -45%;

    right: -15%;

    width: 520px;

    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.06) 0%,
            transparent 70%
        );

    border-radius: 50%;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h2 {

  font-family: 'Fraunces', serif;


    font-size: 46px;

    font-weight: 700;

    color: white;

    line-height: 1.15;

    margin-bottom: 16px;
}

.hero-content p {

    font-size: 18px;

    color: rgba(255,255,255,0.84);

    max-width: 620px;

    line-height: 1.6;
}

/* =========================================
   STATS
========================================= */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 20px;

    margin-bottom: 42px;
}

.stat-card {

    padding: 22px;

    background: var(--cream-light);

    border-radius: 22px;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(20,20,20,0.06);

    transition: all .25s ease;

    border: 1px solid rgba(78,52,46,0.05);
}

.stat-card::before {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background: var(--accent-green);
}

.stat-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 14px 36px rgba(20,20,20,0.10);
}

.stat-card .icon {

    width: 52px;
    height: 52px;

    border-radius: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 24px;

    margin-bottom: 18px;

    background: #EFE6DD;
}

.stat-card h3 {

    font-size: 15px;

    font-weight: 600;

    color: var(--text-medium);

    text-transform: uppercase;

    letter-spacing: .04em;

    margin-bottom: 10px;
}

.stat-card .value {

    font-family: 'DM Sans', sans-serif;


    font-size: 44px;

    font-weight: 700;

    color: var(--coffee-dark);

    line-height: 1;
}

/* =========================================
   FORM SECTION
========================================= */

.form-section {

    background: var(--cream-light);

    border-radius: 22px;

    padding: 38px;

    box-shadow:
        0 6px 24px rgba(20,20,20,0.06);

    margin-bottom: 28px;

    border: 1px solid rgba(78,52,46,0.05);
}

.form-section h3 {

    font-family: 'Fraunces', serif;

    font-size: 30px;

    color: var(--coffee-dark);

    margin-bottom: 10px;

    line-height: 1.2;
}

.form-section .subtitle {

    color: var(--text-medium);

    margin-bottom: 28px;

    font-size: 16px;

    line-height: 1.6;
}

.form-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 22px;
}

.form-group {
    position: relative;
}

.form-group label {

    display: block;

    font-weight: 600;

    color: #5A4336;

    margin-bottom: 9px;

    font-size: 15px;
}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 15px 18px;

    border:
        1px solid #D8C3A5;

    border-radius: 12px;

    font-size: 16px;

    font-family: 'DM Sans', sans-serif;

    background: #FFFDF9;

    color: var(--text-dark);

    transition: all .22s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    outline: none;

    border-color: var(--accent-green);

    background: white;

    box-shadow:
        0 0 0 4px rgba(88,129,87,0.12);
}

.form-group textarea {

    resize: vertical;

    min-height: 120px;

    line-height: 1.6;
}

/* =========================================
   BUTTON
========================================= */

.btn {

    padding: 14px 26px;

    border: none;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: all .22s ease;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;
}

.btn-primary {

    background: #3A5A40;

    color: white;

    box-shadow:
        0 6px 18px rgba(58,90,64,0.16);
}

.btn-primary:hover {

    background: #588157;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(58,90,64,0.22);
}

.btn-secondary {

    background: #EFE6DD;

    color: var(--coffee-dark);

    border: 1px solid #D8C3A5;
}

.btn-secondary:hover {

    background: white;
}

/* =========================================
   TABLE / MATRIX
========================================= */

.ahp-matrix {

    background: var(--cream-light);

    border-radius: 22px;

    padding: 38px;

    box-shadow:
        0 6px 24px rgba(20,20,20,0.06);

    margin-bottom: 28px;

    border: 1px solid rgba(78,52,46,0.05);
}

.ahp-matrix h3{
     font-family: 'Fraunces', serif;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.matrix-container {

    overflow-x: auto;

    margin-top: 22px;

    border-radius: 16px;
}

table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;
}

th,
td {

    padding: 15px 16px;

    text-align: center;

    border:
        1px solid rgba(107,68,35,0.08);

    font-size: 15px;
}

th {

    background: #EFE6DD;

    color: var(--coffee-dark);

    font-weight: 700;

    /* sebelumnya 1px = rusak */
    font-size: 15px;
}

td {

    background: white;

    color: var(--text-dark);
}

tbody tr:hover td {

    background: #F7F3EE;
}

/* =========================================
   RESULT
========================================= */

.results-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;

    align-items:start;
}

.result-card{
    background:#fff;
    padding:24px;
    border-radius:24px;

    height:auto;
}

.result-card h4 {

  font-family: 'Fraunces', serif;

    font-size: 32px;

    color: var(--coffee-dark);

    margin-bottom: 20px;

    line-height: 1.3;
}

.bobot-table{
    width:100%;
    border-collapse:collapse;
}

.bobot-table th{
    text-align:left;
    padding:12px;
    border-bottom:2px solid #e5e5e5;
}

.bobot-table td{
    padding:12px;
    border-bottom:1px solid #eeeeee;
}

.bobot-table td:last-child{
    text-align:right;
    font-weight:600;
}

/* =========================================
   RANKING
========================================= */

.ranking-item {

    display: flex;

    align-items: center;

    padding: 18px;

    background: white;

    border-radius: 14px;

    margin-bottom: 14px;

    transition: all .22s ease;

    position: relative;

    border: 1px solid rgba(78,52,46,0.05);

    box-shadow:
        0 4px 14px rgba(20,20,20,0.04);
}

.ranking-item::before {

    content: '';

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: var(--accent-green);

    border-radius: 4px 0 0 4px;
}

.ranking-item:hover {

    transform: translateX(3px);

    box-shadow:
        0 10px 24px rgba(20,20,20,0.08);
}

.rank-badge {

    width: 46px;
    height: 46px;

    border-radius: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family: 'DM Sans', sans-serif;

    font-size: 20px;

    font-weight: 700;

    margin-right: 18px;

    flex-shrink: 0;

    color: white;
}

.rank-1 {
    background: #588157;
}

.rank-2 {
    background: #7F5539;
}

.rank-3 {
    background: #A98467;
}

.rank-other {

    background: #EFE6DD;

    color: var(--coffee-dark);
}

.ranking-content {
    flex: 1;
}

.ranking-content h5 {

    font-size: 17px;

    font-weight: 700;

    color: var(--coffee-dark);

    margin-bottom: 5px;

    line-height: 1.4;
}

.ranking-content .score {

    font-size: 15px;

    color: var(--text-medium);

    line-height: 1.5;
}

.score-bar {

    width: 100%;

    height: 7px;

    background: rgba(107,68,35,0.08);

    border-radius: 999px;

    margin-top: 12px;

    overflow: hidden;
}

.score-fill {

    height: 100%;

    background: var(--accent-green);

    border-radius: 999px;
}


/* =====================================
   PROFILE
===================================== */

/* RESET */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* =====================================
   BODY
===================================== */

body{

  font-family:'DM Sans',sans-serif;

  background:#F3EEE8;

  min-height:100vh;

  color:#2F1B12;

  font-size:15px;

  line-height:1.6;
}

/* =====================================
   LAYOUT
===================================== */

.page-body{

    width:100%;

    max-width:1380px;

    margin:34px auto;

    padding:0 24px;

    display:grid;

    grid-template-columns:320px 1fr;

    gap:28px;

    align-items:start !important;
}

/* =====================================
   CARD BASE
===================================== */

.card{

  background:#FFFFFF;

  border:1px solid #E6D6C7;

  border-radius:18px;

  overflow:hidden;

  box-shadow:
    0 4px 18px rgba(47,27,18,0.05);
}

.profile-card-inner{

  padding:1.7rem;

  text-align:center;
}

/* =====================================
   PROFILE HEADER
===================================== */

.profile-header-bg{

  height:90px;

  background:#4E342E;
}

/* =====================================
   AVATAR
===================================== */

.avatar-wrap{

  width:88px;
  height:88px;

  border-radius:50%;

  background:#3A5A40;

  color:#F8F5F0;

  font-size:28px;
  font-weight:700;

  display:flex;

  align-items:center;
  justify-content:center;

  margin:-44px auto 1rem;

  position:relative;

  border:4px solid #FFFFFF;

  box-shadow:
    0 6px 18px rgba(47,27,18,0.08);
}

.avatar-online{

  width:15px;
  height:15px;

  background:#588157;

  border-radius:50%;

  position:absolute;

  right:4px;
  bottom:4px;

  border:2px solid #FFFFFF;
}

/* =====================================
   PROFILE TEXT
===================================== */

.profile-name{

  font-size:22px;

  font-weight:700;

  color:#2F1B12;

  margin-bottom:.6rem;

  line-height:1.3;
}

/* =====================================
   ROLE
===================================== */

.role-badge{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:7px 14px;

  border-radius:20px;

  background:#EEF3ED;

  color:#3A5A40;

  font-size:12px;

  font-weight:600;

  margin-bottom:1.1rem;
}

.role-badge svg{

  width:14px;
  height:14px;

  stroke:#3A5A40;
}

/* =====================================
   META
===================================== */

.profile-meta{

  display:flex;

  flex-direction:column;

  gap:.9rem;

  margin-top:1rem;
}

.meta-row{

  display:flex;

  align-items:center;

  gap:10px;

  font-size:14px;

  color:#6B5B53;

  text-align:left;

  line-height:1.5;
}

.meta-row svg{

  width:15px;
  height:15px;

  stroke:#8D6E63;

  flex-shrink:0;
}

/* =====================================
   SIDEBAR
===================================== */

.sidebar{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:0;
}

.sidebar .card{

    height:auto !important;

    min-height:auto !important;
}

/* =====================================
   SECTION CARD
===================================== */

.section-card{

  background:#FFFFFF;

  border:1px solid #E6D6C7;

  border-radius:18px;

  overflow:hidden;

  height:auto;

  box-shadow:
    0 4px 18px rgba(47,27,18,0.05);
}

.section-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:1.2rem 1.5rem;

  border-bottom:1px solid #EFE3D7;

  background:#FCFAF8;
}

/* =====================================
   TITLE
===================================== */

.section-title-wrap{

  display:flex;

  align-items:center;

  gap:11px;
}

.section-icon{

  width:40px;
  height:40px;

  background:#F3EEE8;

  border:1px solid #E6D6C7;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;
}

.section-icon svg{

  width:18px;
  height:18px;

  stroke:#4E342E;
}

.section-title{
font-family: 'Fraunces', serif;

  font-size:24px;

  font-weight:700;

  color:#2F1B12;

  line-height:1.2;
}

.section-sub{

  font-size:12px;

  color:#8D6E63;

  margin-top:2px;
}

/* =====================================
   FORM
===================================== */

.form-body{

  padding:1.5rem;

  height:auto;
}

.form-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:1rem;
}

.form-full{
  grid-column:1 / -1;
}

/* =====================================
   LABEL
===================================== */

.field-label{

  display:flex;

  align-items:center;

  gap:6px;

  font-size:12px;

  font-weight:600;

  color:#6B5B53;

  letter-spacing:.06em;

  text-transform:uppercase;

  margin-bottom:8px;
}

.field-label svg{

  width:13px;
  height:13px;

  stroke:#8D6E63;
}

/* =====================================
   INPUT
===================================== */

.input-wrap{
  position:relative;
}

.input-wrap svg.ic{

  position:absolute;

  left:12px;
  top:50%;

  transform:translateY(-50%);

  width:16px;
  height:16px;

  stroke:#A1887F;

  pointer-events:none;
}

input[type="text"],
input[type="email"],
input[type="password"]{

  width:100%;

  padding:13px 14px 13px 40px;

  background:#FFFCFA;

  border:1px solid #D8C3A5;

  border-radius:11px;

  font-size:14px;

  font-family:'DM Sans',sans-serif;

  color:#2F1B12;

  outline:none;

  transition:
    border-color .2s,
    background .2s,
    box-shadow .2s;
}

input:focus{

  border-color:#588157;

  background:#FFFFFF;

  box-shadow:
    0 0 0 4px rgba(88,129,87,0.10);
}

input::placeholder{
  color:#B7A69A;
}

/* =====================================
   BUTTONS
===================================== */

.btn-row{

  display:flex;

  justify-content:flex-end;

  gap:10px;

  padding:1rem 1.5rem;

  border-top:1px solid #EFE3D7;

  background:#FCFAF8;
}

/* CANCEL */

.btn-cancel{

  padding:10px 20px;

  background:transparent;

  border:1px solid #D8C3A5;

  border-radius:10px;

  font-size:14px;

  font-family:'DM Sans',sans-serif;

  color:#6B5B53;

  cursor:pointer;

  transition:.22s;
}

.btn-cancel:hover{
  background:#F3EEE8;
}

/* SAVE */

.btn-save{

  display:flex;

  align-items:center;

  gap:7px;

  padding:11px 22px;

  background:#3A5A40;

  border:none;

  border-radius:10px;

  font-size:14px;

  font-weight:600;

  font-family:'DM Sans',sans-serif;

  color:#FFFFFF;

  cursor:pointer;

  transition:
    background .22s,
    transform .15s,
    box-shadow .22s;
}

.btn-save:hover{

  background:#588157;

  box-shadow:
    0 8px 20px rgba(58,90,64,0.16);
}

.btn-save:active{
  transform:scale(.98);
}

.btn-save svg{

  width:15px;
  height:15px;

  stroke:#FFFFFF;
}

/* =====================================
   LOGOUT
===================================== */

.logout-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-top:14px;

    padding:12px;

    border-radius:12px;

    background:#2f5d3a;

    color:#FFFFFF;

    text-decoration:none;

    font-weight:600;

    transition:
      background .22s,
      transform .15s;
}

.logout-btn:hover{

    background:#2F1B12;

    transform:translateY(-1px);
}

.logout-btn svg{

    width:18px;
    height:18px;

    stroke:currentColor;
}

/* =====================================
   MAIN AREA
===================================== */

.main-area{

    display:flex;

    flex-direction:column;

    gap:22px;

    align-self:start;

    margin-top:0;

    padding-top:0;
}

.main-area .section-card{

    height:auto !important;

    min-height:auto !important;
}

.activity-card{
    height:auto !important;
}

/* =====================================
   SVG
===================================== */

svg{

    width:20px;

    height:20px;

    max-width:20px;

    max-height:20px;

    flex-shrink:0;
}

svg:not(.ic){
    display:inline-block;
}

/* =====================================
   PASSWORD EYE
===================================== */

.eye-btn2{

    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    padding:2px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;
}

.eye-btn2 svg{

    width:18px;

    height:18px;

    stroke:#8D6E63;

    transition:.2s;
}

.eye-btn2:hover svg{
    stroke:#4E342E;
}

/* =====================================
   ANIMATION
===================================== */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.animate{
  animation:fadeUp .45s ease both;
}

.d1{animation-delay:.05s;}
.d2{animation-delay:.10s;}
.d3{animation-delay:.15s;}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 992px){

  .page-body{

    grid-template-columns:1fr;

    gap:22px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){

  .topbar{

    padding:0 1rem;

    flex-wrap:wrap;

    height:auto;

    padding-top:.8rem;

    padding-bottom:.8rem;

    gap:.8rem;
  }

  .page-body{
    padding:1rem;
  }

  .section-head{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;
  }

  .btn-row{

    flex-direction:column;
  }

  .btn-save,
  .btn-cancel{

    width:100%;

    justify-content:center;
  }
}

/* =====================================
   CETAK LAPORAN
===================================== */

@page {
    size:A4 portrait;
    margin:15mm;
}


/* =====================================
   UPLOAD PROFILE
===================================== */

.profile-upload {

    position: relative;

    overflow: visible;
}

.upload-icon {

    position: absolute;

    bottom: 0;
    right: 0;

    width: 30px;
    height: 30px;

    background: #6F4E37;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    border: 3px solid white;

    box-shadow:
        0 4px 10px rgba(0,0,0,0.12);

    transition:
        transform .2s,
        background .2s;
}

.upload-icon:hover {

    transform: scale(1.08);

    background: #5C3D2E;
}

.avatar-profile {

    position: relative;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    overflow: visible;
}

.avatar-upload-btn {

    position: absolute;

    bottom: 0;
    right: 0;

    width: 28px;
    height: 28px;

    background: #ffffff;

    border: 2px solid #4CAF50;

    color: #4CAF50;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-weight: 700;

    font-size: 16px;

    z-index: 10;

    transition:
        background .2s,
        color .2s,
        transform .2s;
}

.avatar-upload-btn:hover {

    background: #4CAF50;

    color: white;

    transform: scale(1.08);
}

.avatar-img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;
}

/* =====================================
   SEARCH BAR
===================================== */

.search-form{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin:16px 0 20px;
}

.search-input{

    flex:1;

    min-width:250px;

    padding:13px 16px;

    border:1px solid #D6C4A7;

    border-radius:12px;

    outline:none;

    font-size:14px;

    background:#fff;

    transition:
        border-color .2s,
        box-shadow .2s;
}

.search-input:focus{

    border-color:#588157;

    box-shadow:
        0 0 0 4px rgba(88,129,87,0.10);
}

.search-btn,
.search-reset{

    padding:12px 18px;

    border:none;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:
        background .2s,
        transform .15s;
}

.search-btn{

    background:#6F4E37;

    color:white;
}

.search-btn:hover{

    background:#5C3D2E;
}

.search-reset{

    background:#EDE3D3;

    color:#6F4E37;

    display:flex;

    align-items:center;

    justify-content:center;
}

.search-reset:hover{

    background:#E2D4BF;
}

.search-result-info{

    margin-bottom:15px;

    color:#7A5E42;

    font-size:14px;
}

/* =====================================
   SAMPLE ACTION
===================================== */

.sample-action{

    display:flex;

    gap:8px;

    flex-wrap:wrap;
}

.sample-action a{

    padding:9px 14px;

    border-radius:10px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:
        transform .15s,
        opacity .2s;
}

.sample-action a:hover{
    transform: translateY(-1px);
}

.sample-action a:first-child{

    background:#EDE3D3;

    color:#6F4E37;
}

.sample-action a:last-child{

    background:#C94F4F;

    color:white;
}

/* =========================================
   PERSETUJUAN USER
========================================= */

.persetujuan-wrapper{
    padding:32px;
}

/* TOPBAR */

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    margin-bottom:28px;

    flex-wrap:wrap;
}

/* JUDUL */

.judul{
    font-size:30px;
    font-weight:700;

    color:#2F1B12;

    margin-bottom:6px;
}

.subjudul{
    color:#6B705C;
    font-size:16px;
}

/* TABLE CONTAINER */

.table-container{
    background:#FFFFFF;

    border-radius:20px;

    padding:24px;

    box-shadow:
        0 10px 24px rgba(47,27,18,0.08);

    overflow-x:auto;
}

/* TABLE */

.tabel-user{
    width:100%;
    border-collapse:collapse;
}

/* HEADER */

.tabel-user th{
    background:#4E342E;

    color:white;

    padding:15px 16px;

    font-size:15px;
    font-weight:600;

    text-align:center;
}

.tabel-user th:first-child{
    border-top-left-radius:12px;
}

.tabel-user th:last-child{
    border-top-right-radius:12px;
}

/* BODY */

.tabel-user td{
    padding:15px 16px;

    border-bottom:1px solid #EEE5DC;

    text-align:center;

    font-size:15px;

    color:#5C4A42;
}

.tabel-user tr:hover td{
    background:#F8F5F0;
}

/* BUTTON */

.btn-setuju,
.btn-tolak{
    display:inline-block;

    padding:11px 16px;

    border-radius:12px;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:0.25s ease;

    margin:0 4px;
}

/* SETUJU */

.btn-setuju{
    background:#588157;
    color:white;
}

.btn-setuju:hover{
    background:#4A6F4A;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(88,129,87,0.2);
}

/* TOLAK */

.btn-tolak{
    background:#BC4749;
    color:white;
}

.btn-tolak:hover{
    background:#A63D3F;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(188,71,73,0.2);
}

/* EMPTY */

.kosong{
    background:white;

    padding:48px 28px;

    border-radius:20px;

    text-align:center;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.06);
}

.kosong-icon{
    width:76px;
    height:76px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#EEF4EA;

    color:#588157;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;
    font-weight:bold;
}

.kosong h3{
    font-size:26px;

    color:#2F1B12;

    margin-bottom:10px;
}

.kosong p{
    color:#6B705C;

    margin-bottom:24px;

    font-size:15px;
}

/* BUTTON LOGOUT */

.btn-logout{
    display:inline-block;

    background:#3A5A40;

    color:#F8F5F0;

    padding:13px 20px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:0.25s;

    box-shadow:
        0 8px 18px rgba(88,129,87,0.18);
}

.btn-logout:hover{
    background:#588157;

    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(58,90,64,0.22);
}

/* ERROR */

.error-msg{
    background:#FDECEC;

    color:#B42318;

    padding:15px;

    border-radius:12px;

    margin-bottom:20px;

    border-left:5px solid #D92D20;

    font-size:14px;
}

/* SEARCH */

.search-form{
    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin:15px 0 20px;
}

.search-input{
    flex:1;

    min-width:250px;

    padding:12px 16px;

    border:1px solid #D6CFC7;

    border-radius:12px;

    outline:none;

    font-size:15px;

    background:#F8F5F0;

    transition:0.25s;
}

.search-input:focus{
    border-color:#4E342E;

    background:white;
}

.search-btn,
.search-reset{
    padding:12px 18px;

    border:none;

    border-radius:12px;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    cursor:pointer;

    transition:0.25s;
}

.search-btn{
    background:#4E342E;
    color:white;
}

.search-btn:hover{
    background:#6D4C41;
}

.search-reset{
    background:#EFE6DD;

    color:#4E342E;

    display:flex;
    align-items:center;
    justify-content:center;
}

.search-reset:hover{
    background:#E4D8CC;
}

/* RESPONSIVE */

@media (max-width:768px){

    .persetujuan-wrapper{
        padding:20px;
    }

    .topbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .judul{
        font-size:26px;
    }

    .table-container{
        padding:18px;
    }

    .tabel-user th,
    .tabel-user td{
        padding:13px;
        font-size:13px;
    }

    .btn-setuju,
    .btn-tolak{
        display:block;

        margin:5px 0;
    }
}

/* =====================================
   KRITERIA CARD
===================================== */

.kriteria-card{
    padding:20px;
}

.progress-bar-wrap{
    height:5px;
    border-radius:999px;
    overflow:hidden;
}

/* =====================================
   OPTION CARD
===================================== */

.option-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(120px,1fr));

    gap:14px;

    margin-top:16px;
}

.option-item{

    border:1.5px solid #E7E0D7;

    border-radius:18px;

    background:#FFFFFF;

    padding:14px 10px;

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    min-height:96px;
}

.option-item:hover{

    border-color:#639922;

    transform:translateY(-3px);

    background:#FAFDF6;

    box-shadow:
        0 10px 22px rgba(99,153,34,0.10);
}

.option-item.selected{

    background:#639922;

    border-color:#639922;

    color:#FFFFFF;

    box-shadow:
        0 10px 24px rgba(99,153,34,0.18);
}

.option-number{

    font-size:22px;

    font-weight:700;

    line-height:1;

    margin-bottom:8px;
}

.option-label{

    font-size:13px;

    line-height:1.45;

    font-weight:500;
}

/*input data paling atas*/
.info-ahp{
    display: flex;
    align-items: flex-start;
    gap: 12px;

    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);

    padding: 14px 16px;
    border-radius: 14px;

    color: #2e5b3b;
    margin-bottom: 24px;
}

.info-ahp .icon{
    font-size: 18px;
}

.alert-warning{
    display:flex;
    align-items:center;
    gap:12px;

    background:#fff4e5;
    color:#9c6500;

    padding:18px;
    border-radius:14px;
    margin-bottom:20px;

    border:1px solid #ffd59e;
}

.alert-error{

    background: rgba(188, 71, 73, 0.25) !important;

    border: 1px solid rgba(188, 71, 73, 0.4);

    color: #8B1E22;

    border-radius: 14px !important;

    padding: 16px;
}

/*berat setoran*/
.input-error{
    border: 2px solid #dc3545 !important;
    background: #fff5f5;
}

.input-success{
    border: 2px solid #28a745 !important;
    background: #f4fff6;
}

#pesan-error-berat{
    color: #dc3545;
    font-size: 14px;
    margin-top: 6px;
    display: block;
    font-family: 'DM Sans', sans-serif;
}

/* ====================================
   FORGOT PASSWORD 
==================================== */

.forgot-wrapper{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

    background:
        linear-gradient(rgba(34, 24, 18, 0.75),
        rgba(34, 24, 18, 0.75)),
        url('assets/image/jemurkopi.jpg');

    background-size: cover;
    background-position: center;
}

.forgot-card{
    width: 100%;
    max-width: 430px;

    background: rgba(255,255,255,0.96);

    backdrop-filter: blur(10px);

    border-radius: 28px;

    padding: 45px 35px;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.18);

    animation: fadeIn 0.5s ease;
}

.forgot-header{
    text-align: center;
    margin-bottom: 30px;
}

.forgot-icon{
    width: 80px;
    height: 80px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: linear-gradient(135deg,
    #6f4e37 0%,
    #c4a484 100%);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 34px;

    color: white;

    box-shadow:
        0 8px 20px rgba(111,78,55,0.25);
}

.forgot-header h2{
    font-size: 30px;
    color: #4e342e;
    margin-bottom: 10px;
}

.forgot-header p{
    color: #777;
    font-size: 14px;
    line-height: 1.6;
}

.input-group{
    margin-bottom: 22px;
}

.input-group label{
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #5d4037;
}

.input-group input{
    width: 100%;
    padding: 15px 18px;

    border: 1px solid #ddd;

    border-radius: 14px;

    font-size: 14px;

    transition: 0.3s;

    background: #fafafa;
}

.input-group input:focus{
    border-color: #8d6e63;

    background: white;

    box-shadow:
        0 0 0 4px rgba(141,110,99,0.15);

    outline: none;
}

.btn-reset{
    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 14px;

    background: linear-gradient(90deg,
    #2f5d3a 100%);

    color: white;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;
}

.btn-reset:hover{
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(111,78,55,0.25);
}

.back-link{
    display: block;

    text-align: center;

    margin-top: 22px;

    text-decoration: none;

    color: #6f4e37;

    font-weight: 500;

    transition: 0.3s;
}

.back-link:hover{
    color: #3e2723;
}

@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateY(20px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
} 

/* ====================================
   REGISTER PAGE
==================================== */

.register-page{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;

    background:
    radial-gradient(circle at top left,
    rgba(111,78,55,0.5),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(44,85,48,0.5),
    transparent 40%),

    #2d1b16;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow-x: hidden;
}

.register-container{
    width: 100%;
    max-width: 1200px;

    min-height: 680px;

    display: flex;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    border-radius: 30px;

    overflow: hidden;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.3);
}
.password-box{
    position:relative;
    width:100%;
}

.password-box input{
    width:100%;
    padding:14px 45px 14px 14px;
    box-sizing:border-box;
}

.toggle-password{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    
    cursor:pointer;
    font-size:18px;
    color:#666;
}

/* =========================
   LEFT SIDE
========================= */

.left-side{
    width: 50%;

    position: relative;

    background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),

    url('assets/image/jemurkopi.jpg');

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding: 60px;

    color: white;
}

.brand-content{
    position: relative;
    z-index: 2;
}

.brand-content h2{
    font-size: 18px;
    letter-spacing: 4px;
    margin-bottom: 20px;
    color: #d7b899;
}

.brand-content h1{
    font-size: 54px;
    line-height: 1.15;
    margin-bottom: 25px;
    font-weight: 700;
}

.brand-content p{
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,0.9);
}

/* =========================
   RIGHT SIDE
========================= */

.right-side{
    width: 50%;

    background: #f9f6f2;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px;

    position: relative;
}

.form-box{
    width: 100%;
    max-width: 420px;
}

.form-box h1{
    font-size: 42px;
    color: #3e2723;
    margin-bottom: 10px;
}

.subtitle{
    color: #777;
    margin-bottom: 30px;
    font-size: 15px;
}

/* =========================
   INPUT
========================= */

.input-group{
    margin-bottom: 22px;
}

.input-group label{
    display: block;
    margin-bottom: 8px;

    font-weight: 600;

    color: #4e342e;
}

.input-group input{
    width: 100%;

    padding: 15px 18px;

    border: 1px solid #d8c3b3;

    border-radius: 14px;

    background: white;

    font-size: 14px;

    transition: 0.3s;
}

.input-group input:focus{
    outline: none;

    border-color: #8d6e63;

    box-shadow:
    0 0 0 4px rgba(141,110,99,0.15);
}

/* =========================
   BUTTON
========================= */

.btn-register{
    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 14px;

    background:
    linear-gradient(90deg,
    #2f5d3a 100%);

    color: white;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

    margin-top: 10px;
}

.btn-register:hover{
    transform: translateY(-2px);

    box-shadow:
    0 8px 20px rgba(0,0,0,0.2);
}

/* =========================
   LOGIN LINK
========================= */

.login-link{
    text-align: center;
    margin-top: 22px;

    color: #666;
}

.login-link a{
    color: #6f4e37;
    text-decoration: none;
    font-weight: 600;
}

.login-link a:hover{
    text-decoration: underline;
}

/* =========================
   ALERT
========================= */

.success-msg{
    background: #d4edda;
    color: #155724;

    padding: 14px;

    border-radius: 10px;

    margin-bottom: 20px;
}

.error-msg{
    background: #f8d7da;
    color: #721c24;

    padding: 14px;

    border-radius: 10px;

    margin-bottom: 20px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 900px){

    .register-container{
        flex-direction: column;
    }

    .left-side,
    .right-side{
        width: 100%;
    }

    .left-side{
        min-height: 300px;
    }

    .brand-content h1{
        font-size: 36px;
    }
}