/**
 * Perbaikan tampilan halaman publik.
 *
 * Dimuat SETELAH dist/css/main.css supaya berkas design lama tetap utuh
 * (tidak diubah-ubah) dan semua penyesuaian terkumpul di satu tempat ini.
 */

/* ------------------------------------------------------------------
 * 1. Foto dress code
 *    Penyebab asli scroll horizontal bukan CSS ini, tapi slick slider
 *    `.box-dresscode` yang belum diinisialisasi (lihat js/legacy.js).
 *    Tanpa slick, 12 foto tampil bertumpuk penuh dan `.box-dresscode img`
 *    (width:100% + margin:0 10px) melebar 10px keluar layar.
 *    Aturan di bawah hanya JARING PENGAMAN bila slick gagal dimuat;
 *    saat slick aktif, inline width dari slick yang menang.
 * ------------------------------------------------------------------ */
.box-dresscode img {
	width: calc(100% - 20px);
}

/* CATATAN: jangan pakai `html, body { overflow-x: hidden }`.
   Properti itu membuat <body> menjadi scroll container sendiri sehingga
   window.scrollTo() tidak lagi menggulir halaman. Perbaikan di atas
   (width gambar dresscode) sudah menghilangkan penyebab overflow-nya. */

/* ------------------------------------------------------------------
 * 3. Label pada field yang teksnya selalu tampil
 *    Label melayang hanya naik saat group punya class .focused/.filled.
 *    Untuk <select>, <input type=date>, dan <input type=file>, browser
 *    SELALU menampilkan teks (daftar pilihan / "dd/mm/yyyy" / tombol
 *    "Choose File"), jadi labelnya harus selalu naik — kalau tidak,
 *    label akan tertimpa teks bawaan itu. JS (legacy.js) menambahkan
 *    .filled; aturan ini jadi cadangan bila JS gagal (browser modern).
 * ------------------------------------------------------------------ */
.segment-register .mb-3.floating:has(> select) > label,
.segment-register .mb-3.floating:has(> input[type="date"]) > label,
.segment-register .mb-3.floating:has(> input[type="file"]) > label {
	top: 25px;
	transform: translateY(-100%);
}

/* ------------------------------------------------------------------
 * 4. Daftar pilihan <select>
 *    Popup option mewarisi warna tulisan putih dari .form-control,
 *    sedangkan latarnya default browser (putih) → tulisan tak terbaca.
 *    Latar disamakan dengan warna segmen register (#232323).
 * ------------------------------------------------------------------ */
select.form-control option {
	background-color: #232323;
	color: #fff;
}

/* ------------------------------------------------------------------
 * 2. Header navbar
 *    main.css: `.header-content.scrolled { background:#000 }` — class
 *    `scrolled` dipasang oleh js/legacy.js saat halaman digulir.
 *    Saat di posisi paling atas header sengaja transparan karena
 *    banner di belakangnya memang hitam (perilaku design lama).
 * ------------------------------------------------------------------ */
.header-content {
	transition: background-color 0.3s ease;
}

/* ------------------------------------------------------------------
 * 5. SweetAlert2 mengikuti tema situs (gelap + merah TikTok)
 *    Tema bawaan (Bootstrap 4) berlatar putih dengan tombol biru/hijau
 *    sehingga terlihat asing di halaman bertema hitam. Warna tombol juga
 *    diatur di js/legacy.js pada fungsi popup().
 * ------------------------------------------------------------------ */
.swal2-popup {
	background: #101018 !important;
	border: 1px solid #26262f;
	border-radius: 16px !important;
	color: #eef0f6 !important;
}

.swal2-title {
	color: #fff !important;
	font-weight: 700;
}

.swal2-html-container {
	color: #b9b9c6 !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
	border-radius: 10px;
	padding: 10px 22px;
	font-weight: 600;
	box-shadow: none;
}

.swal2-styled.swal2-confirm {
	background-color: #fe2c55 !important;
	color: #fff !important;
}

.swal2-styled.swal2-confirm:hover {
	filter: brightness(1.08);
}

.swal2-styled.swal2-cancel {
	background-color: #2a2a35 !important;
	color: #d7d7e2 !important;
}

.swal2-container.swal2-backdrop-show {
	background: rgba(4, 4, 8, .72);
}

.swal2-loader {
	border-color: #fe2c55 transparent #fe2c55 transparent;
}

/* ------------------------------------------------------------------
 * 5b. Modal informasi setelah registrasi berhasil
 *     (js/legacy.js: popupRegisterSuccess)
 *     Sedikit lebih lebar dari popup biasa karena memuat dua paragraf:
 *     status menunggu approval panitia + email tujuan pemberitahuan.
 * ------------------------------------------------------------------ */
.swal-register-popup {
	width: 420px !important;
}

.swal-register p {
	margin: 0 0 12px;
	line-height: 1.6;
}

.swal-register p:last-child {
	margin-bottom: 0;
}

.swal-register b {
	color: #fff;
	font-weight: 600;
	word-break: break-word;
}

/* ==========================================================
   Modal "Daftar Sebagai" (partials/register-modal.php)
   ========================================================== */
.regis-modal .modal-content {
        background: #16161c;
        border: 0;
        border-radius: 16px;
        color: #fff;
}

.regis-modal .modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        padding: 18px 22px;
}

.regis-modal .modal-title {
        font-family: 'TikTok Sans Bold';
        font-size: 18px;
        color: #fff;
}

.regis-modal .close {
        color: #fff;
        opacity: .65;
        text-shadow: none;
}

.regis-modal .close:hover {
        opacity: 1;
}

.regis-modal .modal-body {
        padding: 20px 22px 24px;
}

.regis-question {
        font-size: 15px;
        color: #d9d9e0;
        margin-bottom: 14px;
}

.regis-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
}

.regis-option {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 13px 16px;
        background: #22222b;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 12px;
        color: #fff;
        font-family: 'TikTok Sans Medium';
        font-size: 15px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease;
}

.regis-option:hover,
.regis-option:focus {
        background: #2d2d38;
        border-color: rgba(234, 6, 65, .55);
        color: #fff;
        text-decoration: none;
        outline: none;
}

.regis-option__icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(234, 6, 65, .16);
        color: #ea0641;
        font-size: 14px;
}

/* Varian ikon untuk pilihan negara: bendera kecil, bukan bulatan merah */
.regis-option__icon--flag {
        background: none;
        border-radius: 0;
        box-shadow: none;
}

.regis-option__icon--flag img {
        display: block;
        width: 26px;
        height: 18px;
        object-fit: cover;
        border-radius: 3px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.regis-option__label {
        flex: 1 1 auto;
}

.regis-option__note {
        display: block;
        margin-top: 2px;
        font-family: 'TikTok Sans Light';
        font-size: 12px;
        color: #9a9aa8;
}

.regis-option__go {
        flex: 0 0 auto;
        color: #7c7c8a;
        font-size: 13px;
}

.regis-back {
        margin-top: 16px;
        padding: 4px 0;
        background: none;
        border: 0;
        color: #9a9aa8;
        font-size: 13px;
        cursor: pointer;
}

.regis-back:hover {
        color: #fff;
}

@media (max-width: 575px) {
        .regis-modal .modal-dialog {
                margin: 12px;
        }
}

/* ==========================================================
   Efek "spark" pada banner halaman depan
   Tema acara: "The Ones Who Spark It" — kilau menyapu + bintang kecil
   yang berkedip di atas gambar banner. Murni dekorasi CSS (tanpa gambar
   tambahan) dan tidak menghalangi klik.
   ========================================================== */

.banner-wrap {
        position: relative;
        display: block;
        width: 100%;
        overflow: hidden;
        line-height: 0;
}

/* Pembungkus <picture> banner: dibuat "display: contents" supaya elemen
   tambahan ini tidak ikut menentukan layout (banner bisa pilih file desktop
   atau mobile tanpa mengubah tata letak). */
.banner-wrap picture {
        display: contents;
}

.banner-wrap .banner-img {
        display: block;
        width: 100%;
        height: auto;
}

/* Kilau yang menyapu banner secara berkala */
.banner-shine {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        mix-blend-mode: screen;
        background-image: linear-gradient(105deg,
                rgba(255, 255, 255, 0) 43%,
                rgba(255, 255, 255, .11) 50%,
                rgba(255, 255, 255, 0) 57%);
        background-size: 260% 100%;
        background-position: 135% 0;
        background-repeat: no-repeat;
        animation: bannerShine 11s ease-in-out infinite;
}

@keyframes bannerShine {
        0% {
                background-position: 135% 0;
        }
        22% {
                background-position: -35% 0;
        }
        100% {
                background-position: -35% 0;
        }
}

/* Bintang kilau */
.banner-spark {
        position: absolute;
        width: 32px;
        height: 32px;
        pointer-events: none;
        opacity: 0;
        transform: scale(.35);
        background: radial-gradient(circle at 50% 50%,
                #ffffff 0%,
                rgba(255, 255, 255, .85) 22%,
                rgba(255, 255, 255, 0) 70%);
        clip-path: polygon(50% 0%, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0% 50%, 43% 43%);
        animation: bannerSpark 3.6s ease-in-out infinite;
}

.banner-spark--pink {
        background: radial-gradient(circle at 50% 50%,
                #ffe3ea 0%,
                #fe2c55 30%,
                rgba(254, 44, 85, 0) 72%);
}

.banner-spark--cyan {
        background: radial-gradient(circle at 50% 50%,
                #e8fffd 0%,
                #25f4ee 30%,
                rgba(37, 244, 238, 0) 72%);
}

@keyframes bannerSpark {
        0%, 66%, 100% {
                opacity: 0;
                transform: scale(.35) rotate(0deg);
        }
        74% {
                opacity: 1;
                transform: scale(1) rotate(10deg);
        }
        84% {
                opacity: .2;
                transform: scale(.7) rotate(18deg);
        }
        92% {
                opacity: .95;
                transform: scale(1.08) rotate(26deg);
        }
}

/*
   Sebaran kilau: HANYA di area gelap kiri-atas banner (di atas logo TikTok
   dan tulisan AWARDS), jadi tidak menutupi gambar KV. Posisi dalam persen
   supaya proporsinya tetap sama di semua ukuran layar.
*/
.banner-spark--1  { left: 5%;  top: 4%;  width: 38px; height: 38px; animation-delay: 0s; }
.banner-spark--2  { left: 14%; top: 15%; width: 28px; height: 28px; animation-delay: .7s; }
.banner-spark--3  { left: 23%; top: 5%;  width: 34px; height: 34px; animation-delay: 1.4s; }
.banner-spark--4  { left: 31%; top: 17%; width: 46px; height: 46px; animation-delay: 2.1s; }
.banner-spark--5  { left: 39%; top: 6%;  width: 30px; height: 30px; animation-delay: 2.8s; }
.banner-spark--6  { left: 46%; top: 15%; width: 36px; height: 36px; animation-delay: 3.5s; }
.banner-spark--7  { left: 9%;  top: 22%; width: 24px; height: 24px; animation-delay: 4.2s; }
.banner-spark--8  { left: 35%; top: 10%; width: 26px; height: 26px; animation-delay: 4.9s; }
.banner-spark--9  { left: 19%; top: 8%;  width: 32px; height: 32px; animation-delay: 5.6s; }
.banner-spark--10 { display: none; }

/* Aksen warna TikTok di beberapa titik */
.banner-spark--2,
.banner-spark--6,
.banner-spark--7 {
        background: radial-gradient(circle at 50% 50%, #ffe3ea 0%, #fe2c55 30%, rgba(254, 44, 85, 0) 72%);
}

.banner-spark--4,
.banner-spark--8 {
        background: radial-gradient(circle at 50% 50%, #e8fffd 0%, #25f4ee 30%, rgba(37, 244, 238, 0) 72%);
}

@media (max-width: 767px) {
        /*
           Banner mobile (banner-mobile.jpg, portrait 1000x1778) susunannya
           berbeda dari versi desktop: artwork ring besar di bagian ATAS,
           lalu blok tulisan (TikTok AWARDS, "The Ones Who Spark It",
           "Southeast Asia 2026") di bagian BAWAH.

           Karena itu kilau dipindahkan ke area BAWAH (sekitar tulisan, di
           sisi kiri/kanan yang masih gelap) supaya tidak menutupi artwork.
           Posisi desktop TIDAK diubah sama sekali.
        */
        .banner-spark {
                transform-origin: 50% 50%;
                scale: .7;
        }

        /* Di ponsel cukup 6 kilau. */
        .banner-spark--4,
        .banner-spark--5,
        .banner-spark--9 {
                display: none;
        }

        /* Area bawah: pita kosong di atas tulisan + sisi kiri/kanan tulisan. */
        .banner-spark--1 { left: 12%; top: 63%; }
        .banner-spark--3 { left: 26%; top: 67%; }
        .banner-spark--2 { left: 78%; top: 64%; }
        .banner-spark--6 { left: 70%; top: 71%; }
        .banner-spark--7 { left: 10%; top: 80%; }
        .banner-spark--8 { left: 86%; top: 85%; }
}

/* ------------------------------------------------------------------
 * 6. Jarak form registrasi ke banner
 *    Sejak blok info halaman (countdown, jadwal, map, media, dresscode)
 *    disembunyikan sementara, `.segment-register` jadi elemen PERTAMA di
 *    dalam `.main-bg` sehingga langsung menempel ke banner — jaraknya 0px
 *    karena `padding-top` pada `.body` di-nol-kan di breakpoint lebar
 *    (lihat media query di dist/css/main.css). Jarak diatur di sini agar
 *    design lama (dist/css/main.css) tetap utuh.
 *    clamp(): 28px di layar sempit → 64px di layar lebar.
 * ------------------------------------------------------------------ */
.segment-register {
	margin-top: clamp(28px, 4.5vw, 64px);
}

/* ------------------------------------------------------------------
 * 7. Form registrasi memakai lebar penuh + data diri dua kolom
 *    (2026-09-17, permintaan pemilik acara)
 *
 *    Blok `.register-left` ("Konfirmasi kehadiran" + 2 paragraf) dimatikan
 *    di app/Views/home/index.php, padahal design lama (assets/dist/css/
 *    main.css) mengatur `.register-left` 40-45% berdampingan dengan
 *    `.register-right` 55-60% di SETIAP breakpoint. Karena elemen kiri
 *    sudah tidak dirender, kolom kanan dipaksa 100% supaya form tidak
 *    menyisakan ruang kosong di sebelah kiri.
 * ------------------------------------------------------------------ */
.segment-register .register-right {
	width: 100% !important;
}

/* Data diri (Nama, Akun TikTok, Nomor Telepon, Email, Nama Perusahaan)
   disusun dua kolom supaya form tidak memanjang ke bawah.
   - Field yang disembunyikan lewat `display:none` (Akun TikTok / Nama
     Perusahaan) otomatis tidak memakai kolom, jadi baris tetap rapat.
   - flex-wrap + flex-grow membuat field sisa yang ganjil melebar sendiri,
     sehingga tidak pernah ada lubang kosong di sisi kanan. */
.segment-register .sv-field-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 32px;
}

.segment-register .sv-field-grid > .sv-question {
	flex: 1 1 calc(50% - 16px);
	min-width: 0;
}

/* Garis pemisah antar pertanyaan (`.sv-question + .sv-question`) tidak
   dipakai di dalam grid karena akan muncul di tengah baris; jarak antar
   field diatur lewat `gap` pada grid di atas. */
.segment-register .sv-field-grid > .sv-question + .sv-question {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Catatan survei di atas kartu form: lebarnya dibatasi supaya panjang
   baris tetap nyaman dibaca setelah form memakai lebar penuh. */
.segment-register #survey-note {
	max-width: 1000px;
}

/* Di layar sempit kembali satu kolom. */
@media (max-width: 700px) {
	.segment-register .sv-field-grid > .sv-question {
		flex-basis: 100%;
	}
}

/* Hormati preferensi pengunjung yang tidak ingin animasi bergerak */
@media (prefers-reduced-motion: reduce) {
        .banner-shine,
        .banner-spark {
                animation: none;
                opacity: 0;
        }
}

/* ==========================================================================
   HALAMAN STATIS — /about, /contact, /privacy
   Dipakai App\Controllers\PageController (app/Views/pages/*.php).

   Halaman ini sengaja tidak ditautkan dari menu mana pun dan dibuat ringan
   serta mudah dibaca — dipakai juga saat verifikasi/peninjauan situs.
   ========================================================================== */
.ta-page {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	padding: 40px 18px 72px;
	color: #fff;
	font-family: 'TikTok Sans Regular';
	font-size: 15px;
	line-height: 1.7;
}

	.ta-page__eyebrow {
		margin: 0 0 6px;
		color: #ff4d7d;
		font-family: 'TikTok Sans Bold';
		font-size: 12px;
		letter-spacing: .14em;
		text-transform: uppercase;
	}

	.ta-page__title {
		margin: 0 0 14px;
		font-family: 'TikTok Sans Black';
		font-size: clamp(26px, 4.6vw, 40px);
		line-height: 1.15;
	}

	.ta-page__lead {
		margin: 0 0 26px;
		color: rgba(255, 255, 255, .82);
		font-size: 16px;
	}

	.ta-page a {
		color: #ff6f97;
		text-decoration: underline;
	}

	.ta-page a:hover {
		color: #ff9ab6;
	}

	.ta-card {
		margin-bottom: 18px;
		padding: 20px 22px;
		background-color: rgba(255, 255, 255, .05);
		border: 1px solid rgba(255, 255, 255, .12);
		border-radius: 14px;
	}

		.ta-card > *:last-child {
			margin-bottom: 0;
		}

		.ta-card h2 {
			margin: 0 0 10px;
			font-family: 'TikTok Sans Bold';
			font-size: 17px;
		}

		.ta-card p {
			margin: 0 0 10px;
		}

	.ta-list {
		margin: 0;
		padding-left: 20px;
	}

		.ta-list li {
			margin-bottom: 6px;
		}

	/* Daftar pasangan label–nilai (keterangan acara, kontak). */
	.ta-facts {
		display: grid;
		grid-template-columns: 180px 1fr;
		gap: 6px 16px;
		margin: 0;
	}

		.ta-facts dt {
			color: rgba(255, 255, 255, .6);
			font-family: 'TikTok Sans Medium';
		}

		.ta-facts dd {
			margin: 0;
			word-break: break-word;
		}

	.ta-muted {
		color: rgba(255, 255, 255, .55);
		font-size: 13px;
	}

	.ta-note {
		margin-bottom: 18px;
		padding: 14px 16px;
		background-color: rgba(252, 7, 79, .12);
		border-left: 3px solid #fc074f;
		border-radius: 0 10px 10px 0;
	}

	.ta-meta {
		margin: 28px 0 0;
		color: rgba(255, 255, 255, .55);
		font-size: 13px;
	}

		.ta-meta a {
			color: rgba(255, 255, 255, .78);
		}

/* Di layar sempit: satu kolom, label di atas nilainya. */
@media (max-width: 600px) {
	.ta-page {
		padding: 28px 16px 56px;
	}

	.ta-facts {
		grid-template-columns: 1fr;
		gap: 0;
	}

		.ta-facts dt {
			margin-top: 10px;
		}
}