body {
          font-family: 'Nunito', sans-serif;
          background: linear-gradient(to bottom right, #fff, #fff);
          /* min-height: 100vh;
          margin-bottom: 90px; buat space di bawah seluruh halaman */
        }

        h1, h2, h3, .menu-box {
          font-family: 'Baloo 2', cursive;
          letter-spacing: 0.5px;
        }

        .menu-box {
          font-size: 1.1rem;
          font-weight: 600;
          padding: 20px;
          border-radius: 20px;
          text-align: center;
          box-shadow: 0 4px 8px rgba(0,0,0,0.08);
          transition: all 0.25s ease;
          color: #333;
        }

        .imagesbg {

      border-bottom-left-radius: 25px;
      border-bottom-right-radius: 25px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      }

    /* HEADER */
    .header {
      background: linear-gradient(90deg, #5fa8d3, #89c2d9);
      color: #fff;
      text-align: center;
      padding: 20px;
      border-bottom-left-radius: 25px;
      border-bottom-right-radius: 25px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

    /* GRID MENU */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      padding: 35px 20px 20px; /* naikkan sedikit jarak dari header */
    }

    .menu-item {
      border-radius: 18px;
      padding: 18px 10px;
      text-align: center;
      font-weight: 600;
      color: #333;
      border: 3px solid rgba(0,0,0,0.05);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: all 0.25s ease;
    }

    .menu-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    }

    .menu-item i {
      font-size: 30px;
      margin-bottom: 10px;
      display: block;
    }

    /* WARNA PASTEL CERIA */
        .menu-blue   { background-color: #b7ddf8; }   /* Biru lebih hidup */
        .menu-green  { background-color: #b8e8c1; }   /* Hijau pastel lebih segar */
        .menu-yellow { background-color: #ffe785; }   /* Kuning cerah lembut */
        .menu-pink   { background-color: #ffc1d6; }   /* Pink manis tapi kuat */
        .menu-orange { background-color: #ffcba4; }   /* Oranye pastel hangat */
        .menu-purple { background-color: #d6c9f3; }   /* Ungu lembut tapi jelas */
        .menu-gray { background-color: #C0C0C0; }   /* Ungu lembut tapi jelas */
    /* ===== Kotak Menu Umum ===== */
        .menu-box {
          padding: 20px;
          border-radius: 20px;
          text-align: center;
          box-shadow: 0 4px 8px rgba(0,0,0,0.08);
          transition: all 0.25s ease;
          font-weight: 600;
          color: #333;
        }

        .menu-box:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 12px rgba(0,0,0,0.12);
        }

    /* FOOTER NAVIGATION */
    .footer-nav {
      position: fixed;
      padding-top: 10px;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-around;
      background: #ffffff;
      box-shadow: 0 -3px 10px rgba(0,0,0,0.08);
      padding: 10px 0;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top: 1px solid #ddd;
      padding: 10px 0;
      z-index: 999;
    }


     .badge{
       font-size: 16px;
      font-weight: 600;
      color: #fff;
     }

    .footer-btn {
      flex: 1;
      text-align: center;
      border-radius: 20px;
      margin: 0 5px;
      padding: 8px 0;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
    }

    .footer-btn i {
      display: block;
      font-size: 20px;
    }

/* Footer pastel strong */
        .btn-green { background-color: #6fcf97; }   /* hijau lembut tapi jelas */
        .btn-blue  { background-color: #56ccf2; }   /* biru pastel cerah */
        .btn-red   { background-color: #eb5757; }   /* merah lembut tapi kontras */
        .btn-orange  { background-color: #FFA54A; }   /* merah lembut tapi kontras */

        .footer-btn:hover {
          opacity: 0.9;
          transform: scale(1.03);
          transition: all 0.2s ease;
        }

        .footer-btn {
          color: #fff !important;
          text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        /* Warna ceria pastel tapi tetap kuat


     .btn-prev { background-color: #ffa94d; }
     .btn-next { background-color: #4ec9a2; }
     .btn-submit { background-color: #f28b82; }
      */
     
     /* ?? Hilangkan area kosong bawah tabel DataTables */
        .dataTables_wrapper .dataTables_scroll {
          margin-bottom: -10px !important;
        }

        /* ?? Pastikan tabel memenuhi lebar kontainer */
        .dataTables_wrapper .dataTables_scrollBody {
          width: 100% !important;
          overflow-x: auto !important;
        }

        /* ?? Agar tabel terlihat proporsional di mobile */
        table.dataTable {
          width: 100% !important;
          border-collapse: collapse !important;
        }

        /* ?? Rapikan tombol */
        .btn-sm {
          padding: 4px 8px;
          font-size: 0.85rem;
        }
        
        /* Hapus warna biru & underline */
        a {
          color: inherit;               /* Warna mengikuti elemen induknya */
          text-decoration: none;        /* Hilangkan garis bawah */
          transition: color 0.2s ease;  /* Animasi lembut kalau berubah warna */
        }

        /* Saat hover, kasih efek halus */
        a:hover {
          color: #333;                  /* Warna sedikit lebih gelap */
          text-decoration: none;        /* Tetap tanpa garis bawah */
          opacity: 0.85;                /* Efek sedikit transparan pas hover */
        }

        /* Opsional: jika di dalam tombol */
        button a, .btn a {
          color: inherit;
          text-decoration: none;
          display: inline-block;
        }
        
         .cardtugas {
            border: none;
            border-radius: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            background: #fff;

           }

          .card {
            border: none;
            border-radius: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            background: #D7FFFF;

           }

          .card-headerblue {
            background: linear-gradient(135deg, #69c9ff, #5ac8fa);
            color: white;
            font-weight: 600;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            font-size: 18px;
          }
          
          .card-header {
  background: linear-gradient(135deg, #ff9800, #ffb74d);
  color: #fff;
  font-weight: 600;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}


          .soal-text {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 20px;
          }

          /* Tombol jawaban */
          .option-btn {
            background-color: #fff;
            border: 2px solid #ffcba4;
            border-radius: 15px;
            padding: 10px;
            width: 100%;
            text-align: left;
            font-size: 16px;
            transition: all 0.2s ease;
          }

          .option-btn:hover {
            background-color: #d7ecfa;
            border-color: #69c9ff;
          }

          .option-btn.selected {
            background-color: #69c9ff;
            color: white;
            border-color: #69c9ff;
          }
           /* Footer untuk tombol navigasi */
         .footer-soal {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background: #f8f9fa;
          display: flex;
          justify: space-around;
          padding: 10px;
          box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
          z-index: 999;
        }

        /* Tombol */
        .footer-soal button {
          display: flex;
          align-items: center;
          gap: 6px; /* jarak antara icon dan teks */
          border: none;
          border-radius: 12px;
          padding: 10px 14px;
          font-size: 15px;
          color: #fff;
          font-weight: 600;
          transition: transform 0.2s, opacity 0.2s;
        }

        .footer-soal button:hover {
          transform: scale(1.05);
          opacity: 0.9;
        }

        /* Warna ceria pastel tapi tetap kuat */


      .btn-prev { background-color: #ffa94d; }
      .btn-next { background-color: #4ec9a2; }
      .btn-submit { background-color: #f28b82; }
      
      
      /* Gaya kolom TOPIK / MAPEL */
        .topik-mapel {
          display: flex;
          flex-direction: column;
          line-height: 1.3;
        }

        .topik-mapel .topik {
          font-weight: 600;
          color: #222;
        }

        .topik-mapel .mapel {
          font-size: 13px;
          color: #007bff; /* Warna biru lembut */
          font-style: italic;
        }

        /* Tambahan styling tabel */
        .table td, .table th {
          vertical-align: middle !important;
          font-size: 14px;
        }
        .table tbody tr {
          border-bottom: 1px solid #dee2e6;
        }
        .table-striped tbody tr:nth-of-type(odd) {
          background-color: #f9fcff;
        }

        /* Tombol aksi */
        .btn-warning {
          background-color: #ffd966;
          border: none;
          color: #000;
        }
        .btn-danger {
          background-color: #ff6961;
          border: none;
          color: #fff;
        }
        .btn-warning:hover {
          background-color: #fdd835;
        }
        .btn-danger:hover {
          background-color: #f44336;
        }


        table.dataTable td,
      table.dataTable th {
      vertical-align: middle;
      }
      

/* Warna border oranye
  border: 1px solid #FFA500 !important;
  border-radius: 8px;
  box-shadow: none;
}

/* Saat fokus (klik input di HP)
.form-control:focus {
  border-color: #FF8C00 !important;
  box-shadow: 0 0 6px rgba(255, 140, 0, 0.5);
}
*/


.form-pilgan .form-control {
  border: 1px solid #FFA500 !important;
  border-radius: 8px;
}

.form-pilgan .form-control:focus {
  border-color: #FF8C00 !important;
  box-shadow: 0 0 6px rgba(255, 140, 0, 0.4);
}

    /* Hapus display:flex dari .opsi supaya label bisa full width */
.opsi {
  margin-bottom: 10px;
  position: relative;
}

/* Radio disembunyikan */
.opsi input[type="radio"] {
  display: none;
}

/* Label = tombol besar full lebar */
.opsi label {
  display: block;
  width: 100%;
  border: 2px solid #ffa500;
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
  font-size: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Hover effect biar interaktif */
.opsi label:hover {
  background: #fff6e0;
  transform: scale(1.01);
}

/* Saat dipilih */
.opsi input[type="radio"]:checked + label {
  background: #ffedd5;
  border-color: #007bff;
  font-weight: 600;
  color: #000;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
}


 
    .soal-card { margin-bottom: 20px; border-radius: 12px; overflow: hidden; }
    .opsiview {
      border: 2px solid #ccc;
      border-radius: 10px;
      padding: 8px 12px;
      margin-bottom: 8px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .benar { background: #d4edda !important; border-color: #28a745 !important; color: #155724; font-weight: bold; }
    .salah { background: #f8d7da !important; border-color: #dc3545 !important; color: #721c24; }
    .kunci { background: #d1ecf1 !important; border-color: #0dcaf0 !important; color: #055160; font-weight: bold; }
    .icon-check { color: #28a745; font-size: 1.2em; }
    .icon-x { color: #dc3545; font-size: 1.2em; }
    .icon-kunci { color: #0dcaf0; font-size: 1.2em; }