@font-face {
    font-family: 'Clash'; 
    src: url('../fonts/Clash_Regular.otf') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* 1. Kontainer Utama Kartu */
._offerCardContainer_21cd1 {
    width: 330px; /* Lebar kartu standar seperti gambar */
    height: 350px; /* Tinggi kartu */
    background-color: #8be0d4; /* Warna hijau mint/cyan khas supercell */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    overflow: hidden;
    position: relative;
    font-family: "Clash", sans-serif;
    margin: 10px auto;
}

/* Hilangkan dekorasi pada link */
._ContainerLink_21cd1 {
    text-decoration: none;
    display: block;
    height: 100%;
}

/* Mengatur alur layout secara vertikal dari atas ke bawah */
._Container_657de, 
._Container_d4414 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Membuat jarak judul, item, & tombol seimbang */
    box-sizing: border-box;
}

/* 2. Bagian Judul (Teks Clash-A-Rama Queen) */
._RowContainer_2360f {
    text-align: center;
    padding-top: 25px; /* Jarak teks dari atas kartu */
    z-index: 2;
}

.bonusTrackItem_title__6MZ0G {
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 0.5px;
    /* Memberikan outline hitam tebal di semua sisi teks */
    text-shadow: 
        -1.5px -1.5px 0 #000,  
         1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
         1.5px  1.5px 0 #000,
         2px    3px 0px #000 !important; 
}

/* 3. Area Tengah (Tempat Karakter & Flare Berada) */
._Item_a2077 {
    flex: 1; /* Mengambil sisa ruang yang kosong di tengah */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

._SingleItemCard_b12f4 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flare/Cahaya Putih di Belakang Karakter */
._Flare_b12f4 {
    position: absolute;
    width: 280px; 
    height: 280px;
    z-index: 0;
    pointer-events: none;
}

._Flare_b12f4 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.75;
}

/* Wadah Gambar Karakter */
._ProductImage_b12f4 {
    position: relative;
    width: 160px; /* Membatasi lebar gambar karakter */
    height: 200px; /* Membatasi tinggi gambar karakter */
    z-index: 1;
}

/* 4. Bagian Bawah (Tombol Claim) */
._Footer_28ce3 {
    display: flex;
    justify-content: center;
    padding-bottom: 25px; /* Jarak tombol dari bawah kartu */
    z-index: 2;
}

._BuyButtonArea_28ce3 {
    display: flex;
    justify-content: center;
}

/* Modifikasi tombol Claim agar hitam pekat dan pas di tengah */
._Primary_f6c0b {
    background-color: #000000 !important; /* Tombol warna hitam */
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

._Primary_f6c0b span {
    font-size: 15px;
    font-weight: bold;
    /* Efek shadow tipis pada teks "Claim" */
    text-shadow: 1px 1px 0px #000 !important;
}

/* --- BUNDLE SECTION WRAPPER --- */
.special-bundle-section {
    padding: 40px 20px;
    border-radius: 16px;
    font-family: "Clash", "Impact", system-ui, sans-serif;
}
.bundle-header {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}
.bundle-title {
     font-family: "Clash", sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    -webkit-text-stroke: 1.5px #000;
    text-shadow: 0 1px 0 #000;
    margin: 0 0 10px 0;
    color: #fff;
}
.bundle-subtitle {
    font-family: "Clash", sans-serif;
    font-size: 16px;
    margin: 0;
    color:#fff;
}
.bundle-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

/* --- BASE CARD --- */
.coc-card {
     font-family: "Clash", sans-serif !important;
    width: 350px;
    max-width: 90%;
    background-color: #ede5da;
    border-radius: 12px;
    position: relative;
    padding-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    margin-bottom: 10px;
}
.card-link { text-decoration: none; display: block; color: inherit; }

/* --- TIMER BADGE --- */
.timer-wrapper {
    position: absolute;
    top: -26px;  
    left: -10px; 
    display: flex;
    align-items: center;
    z-index: 10;
}
.timer-icon-img {
    z-index: 2; width: 32px; height: 32px;
    user-select: none; -webkit-user-drag: none;
}
.timer-bg {
    display: flex; align-items: center;
    background-color: #000;
    padding: 0 16px 0 24px; margin-left: -20px; 
    height: 20px; min-width: 80px; z-index: 1;
    clip-path: polygon(0% 30%, 0% 30%, .061% 25.134%, .239% 20.518%, .523% 16.213%, .904% 12.282%, 1.373% 8.787%, 1.919% 5.788%, 2.533% 3.349%, 3.206% 1.529%, 3.927% .393%, 4.688% 0%, 89.353% 0%, 89.353% 0%, 89.882% .191%, 90.398% .754%, 90.897% 1.673%, 91.374% 2.93%, 91.825% 4.511%, 92.247% 6.398%, 92.635% 8.575%, 92.985% 11.027%, 93.292% 13.736%, 93.554% 16.687%, 100% 100%, 4.688% 100%, 4.688% 100%, 3.927% 99.607%, 3.206% 98.471%, 2.533% 96.651%, 1.919% 94.212%, 1.373% 91.213%, .904% 87.718%, .523% 83.787%, .239% 79.482%, .061% 74.866%, 0% 70%, 0% 30%);
}
.timer-text {
     font-family: "Clash", sans-serif;
    margin: 2px 0 0 0; font-size: 12px !important;
    font-weight: 500; line-height: 1.15; color: #fff;
    letter-spacing: -.03em; text-transform: uppercase;
    paint-order: stroke fill;
    -webkit-text-stroke-width: .1em; -webkit-text-stroke-color: #000;
    text-shadow: 0 .1em 0 #000, -.03em .1em 0 #000, .03em .1em 0 #000;
}

/* --- MAIN TITLE --- */
.coc-title {
     font-family: "Clash", sans-serif;
    font-weight: 700; color: #fff; text-transform: uppercase;
    text-align: center; margin: 0 auto 15px auto; padding-top: 35px;
    z-index: 1; font-size: 24px; letter-spacing: -0.06em; line-height: 1.14;
    -webkit-text-stroke-width: 0.03em; -webkit-text-stroke-color: #000;
    text-shadow: 0 0.075em 0 #000; max-width: 316px;
    display: -webkit-box; -webkit-box-orient: vertical !important;
    overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;
}

/* --- HERO IMAGE --- */
.hero-wrapper {
    margin: 0 15px; height: 170px; border-radius: 8px;
    overflow: hidden; position: relative; background: #000;
}
.hero-img { width: 100%; height: 100%; object-fit: cover; }

/* --- REWARD ITEMS GRID --- */
.items-grid {
    display: flex; justify-content: center; gap: 8px;
    margin: -50px 15px 0 15px; position: relative; z-index: 2;
}

/* Dynamic width: if 2 items they are wider, if 3 they scale down */
.reward-card {
    flex: 1; min-width: 90px; max-width: 145px;
    background-color: #d8cec0; border: 1px solid #bfac99;
    border-radius: 12px; height: 165px; display: flex;
    flex-direction: column; align-items: center; justify-content: space-between;
    padding: 10px 5px; position: relative; overflow: hidden;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2), inset 0 0 0 2px #e3dacd;
}
.reward-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 65%); z-index: 1;
}
.reward-name {
     font-family: "Clash", sans-serif;
    position: relative; z-index: 2; color: #fff;
    font-size: 14px; margin: 0; text-transform: uppercase; text-align: center;
    -webkit-text-stroke: 1px #000; text-shadow: 1px 2px 0px #000;
    line-height: 1.1;
}
.reward-img {
    position: relative; z-index: 2; height: 70px; max-width: 100%;
    object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
}
.reward-qty {
     font-family: "Clash", sans-serif;
    position: relative; z-index: 2; background-color: #e5dacd;
    color: #000; width: 90%; text-align: center; padding: 5px 0;
    border-radius: 8px; font-size: 14px; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.05);
}

/* --- FOOTER (TAGS & BUTTON) --- */
.coc-footer {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin: 20px 15px 0 15px;
}
.tags-container {
     font-family: "Clash", sans-serif;
    display: flex; flex-direction: column-reverse; z-index: 3; margin-left: 5px;
}
.tag-wrapper {
     font-family: "Clash", sans-serif;
    position: relative; display: flex; align-items: center;
    height: 21px; white-space: nowrap; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.1));
}
.tag-skew {top: -2px; }
.tag-start, .tag-end {
    background-repeat: no-repeat; background-size: contain; width: 8px; height: 100%;
}
.tag-middle {
    display: flex; align-items: center; height: 100%; margin: 0 -1px;
    width: auto; background-size: contain; background-repeat: repeat-x; position: relative;
}
.tag-light { background-image: url('../img/tag-2x-light-left-nostroke-VSZXZN3A.png'); }
.tag-middle-light { background-image: url('../img/tag-2x-light-middle-nostroke-E7TLBXDS.png'); }
.tag-light-end { background-image: url('../img/tag-2x-light-right-nostroke.png'); }
.tag-dark { background-image: url('../img/tag-2x-dark-left-nostroke-N7FPLSPX.png'); }
.tag-middle-dark { background-image: url('../img/tag-2x-dark-middle-nostroke-JIDAHCLZ.png'); }
.tag-dark-end { background-image: url('../img/tag-2x-dark-right-nostroke.png'); }

.font-light { color: #000; }
.font-dark { color: #fff; }
.points-label {
    margin: 0 7px 0 3px; font-family: "Clash", sans-serif;
    font-size: 12px; font-weight: bold; line-height: 1.5; z-index: 1;
}
.tag-icon {
    margin-left: 4px; width: 24px; height: 16px; background-size: contain;
    background-repeat: no-repeat; z-index: 1;
}
.icon-rewards { background-image: url('../img/idr-icon-U4TJUASC.svg'); background-position-y: 1px; }
.icon-points { background-image: url('../img/bonus-icon-EMUGI33S.svg'); }

.tag-glow {
    position: absolute; inset: 2.5px 36.5% 2.5px 0%; top: 0; bottom: 0;
    clip-path: polygon(75.862% 99.998%, 75.862% 99.998%, 67.54% 99.998%, 59.178% 99.998%, 50.899% 99.998%, 42.828% 99.999%, 35.088% 99.999%, 27.804% 99.999%, 21.1% 99.999%, 15.1% 100%, 9.928% 100%, 5.708% 100%, 5.708% 100%, 5.032% 99.687%, 4.427% 98.803%, 3.905% 97.433%, 3.475% 95.664%, 3.149% 93.579%, 2.935% 91.264%, 2.846% 88.803%, 2.89% 86.281%, 3.078% 83.785%, 3.421% 81.397%, 7.916% 56.959%, 7.916% 56.959%, 8.121% 55.678%, 8.28% 54.323%, 8.394% 52.913%, 8.462% 51.466%, 8.485% 50.001%, 8.462% 48.536%, 8.394% 47.089%, 8.28% 45.679%, 8.121% 44.324%, 7.916% 43.043%, 3.421% 18.604%, 3.421% 18.604%, 3.079% 16.217%, 2.891% 13.72%, 2.849% 11.199%, 2.941% 8.738%, 3.157% 6.423%, 3.486% 4.338%, 3.918% 2.568%, 4.442% 1.199%, 5.048% .315%, 5.725% .002%, 100% 0%, 75.862% 99.998%);
}
.glow-light { background: linear-gradient(90deg, transparent 9.77%, rgba(255, 255, 255, 0.5) 55.17%); }
.glow-dark { mix-blend-mode: overlay; background: linear-gradient(90deg, transparent 9.77%, rgba(255, 255, 255, 0.35) 55.17%); }

/* --- BUY BUTTON --- */
.btn-buy {
    background-color: #000; color: #fff; border: none; border-radius: 12px;
    height: 48px; padding: 0 15px; font-size: 16px; font-family: inherit;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: transform 0.1s; font-weight: bold;
}
.btn-buy:active { transform: scale(0.95); }

/* --- PASSES HEADER --- */
.passes-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}
.passes-header {
    text-align: center;
    margin-bottom: 30px;
}
.passes-icon {
    width: 60px;
    margin-bottom: 10px;
}
.passes-subtitle {
    color: #fff;
    font-family: "SupercellText", system-ui, sans-serif;
    font-size: 15px;
    margin: -10px 0 0 0;
}

/* --- WADAH KESELURUHAN PASS (Biar tali selaras) --- */
.pass-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px; /* Lebar sama dengan .coc-card */
}

/* --- HERO AREA KHUSUS GOLD PASS --- */
.pass-hero-wrapper {
    margin: 15px 15px 0 15px;
    height: 180px;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(135deg, #dfc776 0%, #a88133 100%);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    overflow: hidden;
}
.pass-glow {
    position: absolute;
    top: 30%; left: 50%; transform: translate(-50%, -50%);
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 60%);
    z-index: 1;
}
.pass-hero-img {
    position: absolute;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
}
.pass-title {
    position: relative;
    z-index: 3;
    font-family: "Clash", "Impact", sans-serif;
    font-size: 26px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    -webkit-text-stroke: 1.2px #000;
    text-shadow: 0 3px 0 #000;
}

/* --- EFEK TALI (ROPES) --- */
.hanging-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: -5px; /* Menyelip ke bawah kartu di atasnya */
}
.ropes {
    display: flex;
    justify-content: space-between;
    width: 60%; /* Jarak antar tali */
    height: 25px; /* Panjang tali */
    z-index: 1;
}
.rope {
    width: 5px;
    height: 100%;
    background-color: #6b4c3a; /* Warna coklat tali */
    border-left: 1px solid #4a3324;
    border-right: 1px solid #362316;
    box-shadow: 2px 0 3px rgba(0,0,0,0.4);
}

/* --- PAPAN GANTUNG (SIGN BOARD) --- */
.sign-board {
    width: 330px; /* Sedikit lebih kecil dari kartu utama */
    background-color: #ede5da;
    border: 2px solid #bba58e;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2), inset 0 0 0 2px #f4f0ea;
    z-index: 2;
}

/* Area Gambar di dalam Papan */
.sign-image-area {
    width: 70px;
    height: 50px;
    position: relative;
    flex-shrink: 0;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stamp-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.stamp-number {
    position: absolute;
    top: -5px; left: -5px;
    background: #000; color: #fff;
    font-family: "SupercellText-Bold", sans-serif;
    font-size: 10px; font-weight: bold;
    padding: 2px 6px; border-radius: 4px;
}
.streak-icon {
    width: 50px; height: 50px;
    background: url('img/shop_item_bg_flare.79c48672.webp') center/cover;
    border-radius: 8px;
}

/* Area Teks di dalam Papan */
.sign-text-area {
    display: flex;
    flex-direction: column;
}
.sign-title {
    font-family: "SupercellText-Bold", sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0 0 4px 0;
}
.sign-desc {
    font-family: "SupercellText", sans-serif;
    font-size: 11px;
    color: #333;
    margin: 0;
    line-height: 1.4;
}

/* --- AREA GAMBAR STAMP CARD --- */
/* Diperlebar agar kertas dan stempelnya terlihat jelas */
.stamp-card-area {
    width: 130px; /* Diperbesar dari sebelumnya 70px */
    height: 70px;
    position: relative;
    flex-shrink: 0;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background kertas gulungan */
.stamp-bg-paper {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* Badge hitam "#1" di pojok kiri atas */
.stamp-number-badge {
    position: absolute;
    top: 5px; 
    left: 0px;
    background: #000; 
    color: #fff;
    font-family: "SupercellText-Bold", sans-serif;
    font-size: 10px; 
    font-weight: bold;
    padding: 2px 6px; 
    border-radius: 4px;
    z-index: 3;
}

/* --- GRID STEMPEL (Menyusun 6 stempel) --- */
.stamps-grid {
    position: absolute;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolom */
    grid-template-rows: repeat(2, 1fr);    /* 2 baris */
    gap: 2px; /* Jarak antar stempel */
    
    /* Menggeser grid agar pas di area kanan kertas gulungan */
    width: 60%;
    height: 55%;
    right: 10px;
}

.stamp-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.stamp-icon {
    position: absolute;
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* Angka di tengah stempel perisai kosong (2, 3, 4, 5, 6) */
.stamp-digit {
    position: relative;
    z-index: 3;
    font-family: "Clash", "Impact", sans-serif;
    font-size: 12px;
    color: #fff;
    -webkit-text-stroke: 1px #000; /* Outline hitam khas Clash */
    text-shadow: 0 1px 0 #000;
}

.claim-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Jarak dirapatkan sedikit agar 3 gambar muat */
    position: relative;
    z-index: 2;
}

.RewardClaimModal_rewardClaim__image__8ZThf {
    max-width: auto; /* Dikecilkan dari 120px ke 90px agar 3 gambar muat sejajar */
    max-height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* --- 1. BACKDROP / OVERLAY HITAM --- */
#profile-verification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75); /* Backdrop hitam transparan */
    z-index: 9999; /* Pastikan melayang paling atas */
    
    /* Flexbox untuk menengahkan modal */
    display: flex; 
    justify-content: center;
    align-items: center;
}

#success-verification, #id-verification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75); /* Backdrop hitam transparan */
    z-index: 9999; /* Pastikan melayang paling atas */
    
    /* Flexbox untuk menengahkan modal */
    display: flex; 
    justify-content: center;
    align-items: center;
}

/* --- 2. KOTAK MODAL UTAMA --- */
.storefrontModal_ModalContent__GFahI {
    background-color: #ede5da; /* Warna latar krem/kertas khas CoC */
    width: 420px;
    max-width: 90%; /* Lebar maksimal modal */
    border-radius: 16px;
    padding: clamp(16px, 5vw, 28px);
    box-sizing: border-box;
    border: 2px solid #cdbfae;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-family: "Clash", "Arial", sans-serif;
    position: relative;
    display: block;
    margin: auto;
    
}

/* --- 3. HEADER / JUDUL (Enter Player Info) --- */
.CreatorCodeModalContent_Container__s6rAQ .Countdown_Container__6oe2L {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff !important;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 0px #d4b533; /* Efek shadow emas */
}
.CreatorCodeModalContent_Container__s6rAQ .Countdown_Countdown__CyU1m p {
    margin: 0 0 0 8px;
    font-family: "Clash", sans-serif !important;
    color: #fff !important;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- 4. GAMBAR PETUNJUK (id.webp) --- */
.CreatorCodeModalContent_Container__s6rAQ > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    border: 2px solid #333 !important; /* Border dipertegas */
    margin-bottom: 20px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

/* --- 5. INPUT FORM (Player ID, TH, Phone) --- */
.CreatorCodeInput_Container__rAcsZ {
    margin-bottom: 12px;
}
.CreatorCodeInput_CreatorBoostInput__Oxsxe {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid #bba58e;
    border-radius: 10px;
    background-color: #f4f0ea;
    color: #333;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}
.CreatorCodeInput_CreatorBoostInput__Oxsxe:focus {
    outline: none;
    border-color: #000;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.CreatorCodeInput_CreatorBoostInput__Oxsxe::placeholder {
    color: #999;
    font-weight: 500;
}

/* Hapus ikon panah (spinner) pada input type="number" */
.CreatorCodeInput_CreatorBoostInput__Oxsxe::-webkit-outer-spin-button,
.CreatorCodeInput_CreatorBoostInput__Oxsxe::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- 6. TOMBOL VERIFY --- */
/* --- TOMBOL VERIFY --- */
.Button_Primary__anIDa {
    width: 100%;
    background-color: #000 !important;
    color: #fff;
    font-family: "Impact", "Clash", sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
    
    /* FIX TEKS MENTOK KIRI: Paksa agar teks di tengah */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.Button_Primary__anIDa:active {
    transform: scale(0.97); 
}

/* --- 7. PESAN ERROR (Alert) --- */
.id-alert {
    text-align: center;
    margin: 12px 0 0 0;
    font-weight: bold;
    font-size: 14px;
    color: #d32f2f !important;
    background-color: #fde0e0;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #f8b4b4;
}

/* --- LOADING OVERLAY --- */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* Latar belakang hitam pekat */
    z-index: 10000; /* Harus lebih tinggi dari semua modal */
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Lingkaran Loading bergaya CoC (Emas) */
.coc-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #4a3324; /* Warna border dasar coklat gelap */
    border-top: 6px solid #dfc776; /* Sisi berputar warna emas */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Putaran tanpa henti */
    margin-bottom: 15px;
}

/* Teks loading dengan efek berkedip */
.loading-text {
    color: #fff;
    font-family: "Impact", "Clash", sans-serif;
    font-size: 22px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 4px 6px rgba(0,0,0,0.5);
    animation: pulse 1.5s infinite; /* Efek nyala-redup */
}

/* Keyframes untuk Animasi Berputar */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Keyframes untuk Animasi Kedip */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}