/* Tracer Study self-service pieces (module 1.3.0): the period list of /tracer and the sign-in / registration pages.
   Shown inside every theme, so they take the theme's colour variables and fall back to neutral values. */
.tr-akses {
    --tr-akses-utama: var(--warna-utama, #1f4e8c);
    --tr-akses-di-atas: var(--warna-utama-di-atas, #fff);
    --tr-akses-teks: var(--warna-utama-teks, var(--tr-akses-utama));
    --tr-akses-garis: color-mix(in srgb, currentColor 18%, transparent);
    --tr-akses-redup: color-mix(in srgb, currentColor 68%, transparent);
    margin-top: 1.5rem;
    line-height: 1.5;
}
.tr-akses-kartu {
    max-width: 34rem;
    margin: 1.5rem auto;
    padding: 1.5rem;
    border: 1px solid var(--tr-akses-garis);
    border-radius: 12px;
    background: var(--warna-kartu, transparent);
}
.tr-akses-judul { margin: 0 0 .25rem; font-size: 1.1rem; }
.tr-akses-judul-besar { margin: 0 0 .25rem; font-size: 1.4rem; }
.tr-akses-redup { color: var(--tr-akses-redup); font-size: .925rem; margin: .25rem 0; }
.tr-akses-daftar { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.tr-akses-butir {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
    padding: .9rem 1rem; border: 1px solid var(--tr-akses-garis); border-radius: 10px;
}
.tr-akses-berakhir { opacity: .8; }
.tr-akses-nama { margin: 0; font-weight: 600; }
.tr-akses-info p { margin: 0; }
.tr-akses-tombol-baris { display: flex; flex-wrap: wrap; gap: .5rem; }
.tr-akses-tombol {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1rem;
    border: 1px solid var(--tr-akses-utama); border-radius: 8px; color: var(--tr-akses-teks);
    font: inherit; font-weight: 600; text-decoration: none; background: transparent; cursor: pointer;
}
.tr-akses-tombol-utama { background: var(--tr-akses-utama); color: var(--tr-akses-di-atas); }
.tr-akses-tombol:focus-visible { outline: 3px solid color-mix(in srgb, var(--tr-akses-utama) 45%, transparent); outline-offset: 2px; }
.tr-akses-form { display: grid; gap: 1rem; margin: 1rem 0; }
.tr-akses-medan { display: grid; gap: .3rem; }
.tr-akses-medan label { font-weight: 600; }
.tr-akses-medan input, .tr-akses-medan select {
    width: 100%; min-height: 44px; padding: .55rem .75rem; box-sizing: border-box;
    border: 1px solid var(--tr-akses-garis); border-radius: 8px; font: inherit; font-size: 16px; color: inherit; background: transparent;
}
.tr-akses-medan select option { color: #1a1a1a; }
.tr-akses-dua { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tr-akses-kotak { margin: 1rem 0; padding: .75rem 1rem; border-radius: 8px; border: 1px solid var(--tr-akses-garis); }
.tr-akses-kotak-galat { border-color: #c0392b; color: #c0392b; background: color-mix(in srgb, #c0392b 8%, transparent); }
@media (max-width: 480px) {
    .tr-akses-kartu { padding: 1rem; margin: 1rem 0; }
    .tr-akses-tombol-baris, .tr-akses-tombol-baris .tr-akses-tombol { width: 100%; }
}