/* ═══════════════════════════════════════════
   DONAT.CSS — Design Token & Component Library
   Versi 2.0: tabs.css digabungkan di sini
   Prinsip: satu deklarasi per aturan, reuse via cascade
   ═══════════════════════════════════════════ */

/* ─── TOKEN ─────────────────────────────── */
:root {


  --pColor:       #d6ce93;
  --pLightColor:  #efebce;
  --pDarkColor:   #a3a380;

  --pColor:       #df8c43;
  --pLightColor:  #eab485;
  --pDarkColor:   #b7661f;



    --pTextColor:   #000000;
    --pButtonColor: #fff;
    --pPage:        #f2f2f2;
    --gInput:       #fff;

    --radius-sm:  5px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --shadow:     0 4px 20px rgba(0,0,0,.10), 0 6px 20px rgba(0,0,0,.01);
    --transition: 0.3s ease;
}

/* ─── RESET ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
                 Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

ul { margin: 0; padding: 0; list-style: none; }
li { padding: 0; }

/* ─── UTILITY ────────────────────────────── */
.show      { display: block; }
.hide      { display: none; }
.show-flex { display: flex !important; }
.kanan     { float: right; margin-left: auto; }
.img       { width: 100%; height: auto; }
.artikel   { word-wrap: break-word; padding: 16px; }

.shadow {
    box-shadow:       var(--shadow);
    border-radius:    var(--radius-md);
    border:           1px solid #ddd;
    padding:          10px;
    margin-bottom:    5px;
    background-color: #fff;
}

/* ─── GRID ───────────────────────────────── */
.row        { width: 100%; display: table; table-layout: fixed; }
.row::after { content: ""; clear: both; display: table; }

[class*='col-'] {
    float:          left;
    word-wrap:      break-word;
    display:        flex;
    flex-direction: column;
    position:       relative;
    overflow:       hidden;
}

.col-1-1 { width: 100%;   }
.col-1-2 { width: 50%;    }
.col-1-3 { width: 33.33%; }
.col-1-4 { width: 25%;    }
.col-1-5 { width: 20%;    }
.col-2-3 { width: 66.66%; }
.col-3-4 { width: 75%;    }
.col-4-5 { width: 80%;    }

@media (max-width: 700px) { [class*='col-'] { width: 50%;  } }
@media (max-width: 450px) { [class*='col-'] { width: 100%; } }

/* ─── TOAST ──────────────────────────────── */
.toast {
    min-width:        250px;
    position:         fixed;
    bottom:           30px;
    left:             50%;
    transform:        translateX(-50%);
    text-align:       center;
    padding:          16px;
    z-index:          3000;
    color:            var(--pButtonColor);
    background-color: var(--pColor);
}

/* ─── MODAL ──────────────────────────────── */
.depan {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.4);
    overflow:   hidden;
    z-index:    2000;
}

.modal {
    background:    #fefefe;
    width:         80%;
    margin:        70px auto;
    position:      relative;
    z-index:       2001;
    border-radius: var(--radius-md);
}

.modal .info { text-align: center; width: 100%; padding: 10px; }

.modalbar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 20px;
    background:      var(--pColor);
    color:           white;
}

.modalbar button {
    background:      red;
    width:           30px;
    height:          30px;
    border:          none;
    color:           white;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-left:     auto;
}

@media (max-width: 450px) { .modal { width: 100%; } }

/* ─── CARD ───────────────────────────────── */
.card-container { display: flex; flex-wrap: wrap; }

.card {
    display:        flex;
    flex:           1;
    flex-direction: column;
    margin:         5px;
    border-radius:  var(--radius-lg);
    overflow:       hidden;
    transition:     transform var(--transition);
    padding:        0;
}

.card:hover {
    animation: pulse-effect 1s infinite;
    z-index:    10;
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

.card img,
.card svg { width: 100%; display: block; margin: 0; object-fit: cover; }

.card strong { padding: 16px; }
.card span   { padding: 0 16px; }

.card .artikel {
    position:       relative;
    z-index:        2;
    display:        flex;
    flex-direction: column;
    flex-grow:      1;
    gap:            8px;
}

.card .artikel button {
    margin-top:  auto;
    align-self:  flex-start;
    display:     flex;
    align-items: center;
    gap:         5px;
}

.card .artikel svg { height: 24px; width: 24px; flex-shrink: 0; }

.card .svg svg {
    width:     120px;
    position:  absolute;
    bottom:    -30px;
    right:     -30px;
    z-index:   1;
    stroke:    var(--pDarkColor);
    transform: rotate(-15deg) !important;
    opacity:   0.2 !important;
}

.card button { margin-top: auto; }

@keyframes pulse-effect {
    0%, 100% { transform: scale(1);    }
    50%       { transform: scale(1.05); }
}

@media (max-width: 450px) { .card-container [class*='col-'] { width: 100%; } }

/* ─── PROGRESS BAR ───────────────────────── */
.progress-bar {
    background:    #ddd;
    height:        15px;
    margin-bottom: 15px;
    width:         100%;
    border-radius: var(--radius-sm);
}

.progress-bar > div {
    height:        100%;
    border-radius: var(--radius-sm);
    background:    var(--pColor);
}

/* ─── PIE CHART ──────────────────────────── */
.pie {
    display:         flex;
    justify-content: center;
    margin:          auto;
    stroke:          none;
    fill:            black;
}
.pie.img { max-width: 250px; }

.chart-text   { fill: #000; transform: translateY(.25em); }
.chart-number {
    font-size:   .5em;
    line-height: 1;
    text-anchor: middle;
    transform:   translateY(-.25em);
}
.chart-label {
    font-size:      .2em;
    text-transform: uppercase;
    text-anchor:    middle;
    transform:      translateY(.7em);
}

/* ─── AVATAR ─────────────────────────────── */
.user-avatar { display: flex; justify-content: center; margin: auto; }
.user-avatar .img {
    width: 130px; height: 130px;
    object-fit: cover; border-radius: 50%; padding: 10px;
}

/* ─── SIDE PANEL ─────────────────────────── */
.panel-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    1000;
    display:    none;
}

.side-panel {
    position:       fixed;
    top:            0;
    right:          -100%;
    width:          100%;
    max-width:      450px;
    height:         100%;
    background:     #fff;
    z-index:        1001;
    box-shadow:     -5px 0 15px rgba(0,0,0,.1);
    transition:     transform var(--transition);
    display:        flex;
    flex-direction: column;
}

.side-panel.active { transform: translateX(-100%); }

.panel-header {
    padding:         15px 20px;
    border-bottom:   1px solid #eee;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.panel-body {
    padding:    20px;
    overflow-y: auto;
    flex-grow:  1;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 700px) {
    .side-panel        { right: -450px; width: 450px; }
    .side-panel.active { transform: translateX(-450px); }
}

/* ─── TABLE ──────────────────────────────── */
.table { border-collapse: collapse; border-spacing: 0; width: 100%; color: #000; margin-top: 10px; }
.table td  { empty-cells: show; }
.table tr  { background: #f8f8f8; }
.table tr:nth-child(even) { background: #fff; }
.table th  { height: 37px; }
.table th,
.table td  { border: none; text-align: left; padding: .5em; }
.table caption { margin-bottom: 1em; font-weight: bold; text-align: center; }

.table thead { position: absolute; clip: rect(1px,1px,1px,1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }
.table tbody,
.table tr,
.table th,
.table td  { display: block; padding: 0; text-align: left; white-space: normal; }
.table th,
.table td  { padding: .5em; }
.table tbody tr { margin-bottom: 1em; border: 1px solid var(--pLightColor); border-radius: var(--radius-md); }
.table tbody tr:last-of-type { margin-bottom: 0; }
.table tbody th[scope="row"] { background: #1d96b2; color: white; }
.table tbody td { text-align: right; }
.table tbody td[data-title]::before { content: attr(data-title); float: left; }

@media (min-width: 700px) {
    .table thead { position: relative; clip: auto; height: auto; width: auto; overflow: auto; }
    .table tr,
    .table tbody { display: table-row-group; }
    .table tr    { display: table-row; border: 0; margin-bottom: 0; }
    .table th,
    .table td    { display: table-cell; }
    .table tbody tr:nth-of-type(even) { background: rgba(94,93,82,.1); }
    .table tbody th[scope="row"]      { background: transparent; text-align: left; }
    .table tbody td                   { text-align: left; }
    .table tbody td[data-title]::before { content: none; }
}

/* ─── FORM & INPUT ───────────────────────── */
.form { margin-bottom: 10px; }

.gInput { position: relative; padding: 10px 5px; margin-bottom: 10px; }

.gInput .label {
    position:       absolute;
    background:     #fff;
    pointer-events: none;
    left:           15px;
    top:            22px;
    padding:        0 5px;
    color:          #888;
    font-size:      14px;
    transition:     .2s ease all;
}

.input {
    background:    white;
    width:         100%;
    padding:       12px;
    border:        1px solid #ccc;
    border-radius: var(--radius-md);
    font-size:     14px;
    outline:       none;
    transition:    border-color var(--transition);
}

.input:focus { border-color: var(--pDarkColor); box-shadow: 0 0 0 2px rgba(163,163,128,.1); }

.input:focus ~ .label,
.input:not(:placeholder-shown) ~ .label {
    top: -1px; left: 12px; font-size: 12px; font-weight: bold; color: var(--pDarkColor);
}

input[type=range],
input[type=file],
input[type=submit] {
    color: white; background: var(--pColor); padding: 8px; margin-left: 5px;
    margin-bottom: 5px; border: 1px solid transparent;
    border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center;
}

/* ─── BUTTON ─────────────────────────────── */
button,
.button {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    margin-right:     10px;
    padding:          8px 15px;
    border-radius:    var(--radius-sm);
    cursor:           pointer;
    border:           1px solid #ddd;
    font-size:        16px;
    background-color: #fff;
}

button:hover path,
a:hover path {
    stroke-dasharray:  200;
    stroke-dashoffset: 200;
    animation:         animateDash 3s linear infinite;
}

@keyframes animateDash { to { stroke-dashoffset: 0; } }

.gButton { display: flex; flex-wrap: wrap; flex-direction: row; position: relative; margin: 5px; }

/* ─── PAGINATION ─────────────────────────── */
.gPaging { display: table; }
.gPaging span { display: inline-flex; align-items: center; height: 38px; background: #fff; padding: 8px; vertical-align: middle; }

/* ─── SEARCH ─────────────────────────────── */
.search { display: flex; align-items: stretch; }
.search select { flex-shrink: 0; min-width: 100px; margin-right: 5px; }
.search input  { flex-grow: 1; }
.search button { border: none; background: transparent; }
.search .input,
.search select,
.search button { height: 42px; padding: 8px 12px; display: inline-flex; align-items: center; }

/* ─── KEBAB MENU ─────────────────────────── */
.kebab-container { position: relative; }
.kebab-menu {
    display: none; position: absolute; top: 100%; right: 0;
    min-width: 150px; background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    border-radius: var(--radius-sm); z-index: 100;
}
.kebab-menu.active { display: block; }
.menu-item { display: block; padding: 10px 15px; text-decoration: none; color: #333; }
.menu-item:hover { background-color: #f1f1f1; }
.delete-action   { color: red; }

/* ─── RESPONSIVE ─────────────────────────── */
@media (max-width: 450px) {
    .button { width: 100%; margin: 0 0 5px; }
    .footer { margin-bottom: 30px; }
}


/* ═══════════════════════════════════════════
   TABS — digabung dari tabs.css
   ═══════════════════════════════════════════ */

.tabs {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    position: relative;
    border-bottom: 1px solid #ccc;
    display: flex;
}

.tabs li {
    display:    inline-block;
    cursor:     pointer;
    color:      #3a5ea7;
    padding:    10px 20px;
    transition: all var(--transition);
}

.tabs li:first-child { margin-left: 10px; }

.tabs li.active-tab {
    border-top:    1px solid #ccc;
    border-left:   1px solid #ccc;
    border-right:  1px solid #ccc;
    border-bottom: 1px solid white;
    background:    white;
    position:      relative;
    color:         black;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: -1px;   /* menutupi border-bottom .tabs */
    z-index:       2;
}

.tabs-content {
    margin:        0;
    padding:       20px;
    list-style:    none;
    background:    white;
    border:        1px solid #ccc;
    border-top:    none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    min-height:    200px;
}

.tabs-content li { display: none; animation: fadeIn 0.3s ease; }
.tabs-content li.active-content { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ─── COMPONENT: Button Icon ────────────────*/
.btn-icon { width: 16px; vertical-align: middle; margin-right: 5px; }

/* ─── COMPONENT: Video ──────────────────────*/
.video-wrapper    { width: 100%; }
.video-container  {
    position: relative; width: 100%; padding-top: 56.25%;
    background: #000; border-radius: var(--radius-md); overflow: hidden;
}
.video-container video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── COMPONENT: PDF Viewer ─────────────────*/
.pdf-wrapper { width: 100%; }
.pdf-viewer  { width: 100%; height: 600px; border: 1px solid #ddd; border-radius: var(--radius-md); overflow: hidden; }

/* ─── COMPONENT: Pagination ─────────────────*/
.gPaging-inner { display: flex; justify-content: space-between; align-items: center; }
.gPaging-info  { padding: 10px; }
.gPaging-nav   { padding: 10px; display: flex; gap: 5px; }

/* ─── COMPONENT: Filter Multi ───────────────*/
.filter-multi  { display: flex; flex-wrap: wrap; gap: 20px; padding: 10px 0; }
.filter-group  { flex: 1; min-width: 150px; }
.filter-group strong { display: block; border-bottom: 1px solid #ddd; margin-bottom: 10px; text-transform: capitalize; font-size: 14px; }
.filter-label  { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; cursor: pointer; font-size: 14px; }

/* ─── COMPONENT: Cert ───────────────────────*/
.cert-verifier { text-align: center; padding: 24px; background: #f9fafb; border-radius: var(--radius-md); border: 2px dashed #d1d5db; }
.cert-verifier h3 { margin-bottom: 16px; }
.cert-input-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.cert-input-row .input { max-width: 300px; }
.cert-result  { display: flex; justify-content: center; }
.cert-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; border-top: 1px solid #e5e7eb; padding-top: 16px; }

.cert-display {
    position: relative; width: 100%; max-width: 600px; aspect-ratio: 1.41/1;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    padding: 40px; color: #333; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.1); border: 1px solid #eee;
}
.cert-badge   { font-size: .7rem; color: #666; letter-spacing: 2px; margin-bottom: 10px; }
.cert-kursus  { font-size: 1.1rem; font-weight: bold; color: #1a365d; margin-bottom: 15px; }
.cert-label   { font-size: .8rem; margin-bottom: 5px; }
.cert-peserta { font-size: 1.8rem; font-weight: 900; color: #2c3e50; margin-bottom: 15px; font-family: serif; }
.cert-tanggal { font-size: .8rem; }
.cert-id      { position: absolute; bottom: 20px; left: 0; width: 100%; font-size: .7rem; font-family: monospace; color: #777; }

/* ─── COMPONENT: Quiz ───────────────────────*/
.quiz-container  { padding: 24px; }
.quiz-question   { margin-bottom: 32px; padding: 16px; border-left: 4px solid var(--pColor); background: #f9fafb; }
.quiz-options    { display: flex; flex-direction: column; gap: 8px; }
.quiz-option     { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition); }
.quiz-option:hover { background: var(--pLightColor); }
.quiz-score      { padding: 16px; background: #1e3a5f; color: white; border-radius: var(--radius-md); text-align: center; }
.quiz-score-number { font-size: 3rem; font-weight: 900; margin: 8px 0; }

/* ─── COMPONENT: Loading / Error ────────────*/
.loading { text-align: center; padding: 40px; }
.error   { padding: 16px; color: #dc2626; }