@tailwind base;
@tailwind components;
@tailwind utilities;

.keanggotaan-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;min-width:0}.keanggotaan-main{min-width:0}.keanggotaan-drawer{display:flex;min-height:0;flex-direction:column;overflow:hidden;border:1px solid rgb(255 255 255/.1);border-radius:.75rem;background:#111827;box-shadow:0 16px 32px rgb(0 0 0/.25);transition:transform 200ms ease-out,opacity 200ms ease-out}.keanggotaan-drawer-header,.keanggotaan-drawer-footer{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1.25rem}.keanggotaan-drawer-header{border-bottom:1px solid rgb(255 255 255/.1)}.keanggotaan-drawer-footer{border-top:1px solid rgb(255 255 255/.1)}.keanggotaan-drawer-body{min-height:0;flex:1;overflow-y:auto;padding:1.25rem}.keanggotaan-row-selected{background:rgb(30 58 138/.2);box-shadow:inset 3px 0 0 rgb(59 130 246)}.keanggotaan-timeline{position:relative;margin:.75rem 0 0 .45rem;border-left:1px solid rgb(255 255 255/.15);padding-left:1.5rem}.keanggotaan-timeline li{position:relative;padding-bottom:1rem}.keanggotaan-timeline li::before{position:absolute;top:.1rem;left:-1.95rem;display:grid;width:.9rem;height:.9rem;place-items:center;border:2px solid #9ca3af;border-radius:9999px;background:#111827;color:white;content:'';font-size:.6rem}.keanggotaan-timeline li.selesai::before{border-color:#22c55e;background:#22c55e;content:'✓'}.keanggotaan-timeline li.sekarang::before{border-color:#3b82f6;background:#3b82f6}.keanggotaan-timeline span{display:block;margin-top:.15rem;color:#9ca3af;font-size:.875rem}.keanggotaan-drawer-backdrop{display:none}@media (min-width:1024px){.keanggotaan-layout{transition:grid-template-columns 200ms ease-out}.keanggotaan-layout.is-drawer-open{grid-template-columns:minmax(0,1fr) clamp(350px,28vw,420px)}.keanggotaan-drawer{position:sticky;top:1.5rem;height:calc(100dvh - 7rem)}}@media (max-width:1023px){.keanggotaan-drawer{position:fixed;top:4rem;right:0;bottom:0;z-index:50;width:min(60vw,520px);border-radius:.75rem 0 0 0;transform:translateX(100%);opacity:0}.keanggotaan-drawer.is-visible{transform:translateX(0);opacity:1}.keanggotaan-drawer-backdrop{position:fixed;inset:4rem 0 0;z-index:40;display:block;border:0;background:rgb(0 0 0/.25)}}@media (max-width:767px){.keanggotaan-drawer{top:0;width:100%;border-radius:0}.keanggotaan-drawer-backdrop{inset:0}}

.keanggotaan-drawer,
.keanggotaan-timeline li::before { background: #18181b !important; }