/* Karya — penyesuaian kecil di luar utility Tailwind */

:root {
	color-scheme: dark;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: #0050b6;
	color: #ffffff;
}

img {
	max-width: 100%;
	height: auto;
}

/* Animasi masuk sederhana; dimatikan bila pengguna memilih reduced motion */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Beranda: hero satu layar penuh dikurangi header sticky (5rem + 1px garis bawah) */
.hero-screen {
	min-height: calc(100vh - 5rem - 1px);
	min-height: calc(100svh - 5rem - 1px);
}

/* Target sentuh minimal 44px di ponsel; tombol kecil kembali ringkas di layar
   lebih lebar (nilai asli .btn-sm). */
@media (min-width: 640px) {
	.btn-sm {
		min-height: 36px;
	}
}

@media (max-width: 359px) {
	.hero-screen .hero-meta {
		display: none;
	}
}

/* Baris kategori di beranda: di ponsel digeser mendatar tanpa scrollbar,
   di layar lebar kembali membungkus. */
.chip-scroll {
	scrollbar-width: none;
	contain: layout;
}

.chip-scroll::-webkit-scrollbar {
	display: none;
}

/* Kartu proyek di beranda: di ponsel dua kartu tampil berdampingan dan sisanya
   digeser (snap) tanpa scrollbar; di layar lebar kembali menjadi grid. */
.project-scroll {
	scrollbar-width: none;
	contain: layout;
	overscroll-behavior-x: contain;
}

.project-scroll::-webkit-scrollbar {
	display: none;
}

/* Teks hero duduk langsung di atas foto. Bayangan lembut per huruf menjaga
   keterbacaan tanpa menambahkan lapisan atau gradien di atas gambar. */
.hero-copy-shadow {
	text-shadow: 0 1px 2px rgba(8, 8, 8, 0.9), 0 4px 24px rgba(8, 8, 8, 0.7);
}

/* Scrim hero hanya dipakai di ponsel/tablet; desktop tetap tanpa lapisan. */
.hero-scrim {
	display: none;
}

/* Di ponsel dan tablet (≤1023px) foto mengisi seluruh hero tanpa kotak solid.
   Teks duduk langsung di atas foto; gradien gelap lembut dari bawah menjaga
   kontras, dan titik fokus foto digeser sedikit ke atas untuk layar tegak. */
@media (max-width: 1023px) {
	.hero-media img {
		object-position: 50% 38%;
	}

	.hero-screen .hero-copy {
		padding-top: 1.25rem;
	}

	.hero-scrim {
		display: block;
		position: absolute;
		inset: auto 0 0;
		height: 72%;
		pointer-events: none;
		background-image: linear-gradient(
			to top,
			rgba(8, 8, 8, 0.95) 0%,
			rgba(8, 8, 8, 0.9) 22%,
			rgba(8, 8, 8, 0.78) 42%,
			rgba(8, 8, 8, 0.58) 60%,
			rgba(8, 8, 8, 0.32) 77%,
			rgba(8, 8, 8, 0.1) 90%,
			rgba(8, 8, 8, 0) 100%
		);
	}
}

/* Di ponsel landscape sangat pendek teks menutupi hampir seluruh foto, jadi
   scrim dinaikkan sampai atas (tetap gradien, bukan blok solid). */
@media (max-width: 1023px) and (max-height: 380px) {
	.hero-scrim {
		height: 100%;
	}
}

/* Di ponsel ruang lebih sempit: teks dirapatkan supaya foto tetap dapat porsi
   besar. Gradien hero dipilih lembut, jadi bayangan huruf sedikit diperkuat. */
@media (max-width: 639px) {
	.hero-screen .hero-copy {
		padding-top: 1rem;
		padding-bottom: 1.5rem;
	}

	.hero-screen .hero-actions {
		margin-top: 1.25rem;
	}

	.hero-screen .hero-meta {
		margin-top: 1rem;
	}

	.hero-copy-shadow {
		text-shadow: 0 1px 3px rgba(8, 8, 8, 0.95), 0 6px 28px rgba(8, 8, 8, 0.8);
	}
}

/* Hero butuh ruang vertikal. Di layar pendek jarak dirapatkan dan paragraf bio
   disembunyikan supaya blok teks tidak menutupi wajah di foto. */
@media (max-height: 760px) {
	.hero-screen .hero-copy {
		padding-bottom: 1.5rem;
	}
}

@media (max-width: 1023px) and (max-height: 760px), (max-height: 620px) {
	.hero-screen .hero-bio {
		display: none;
	}

	.hero-screen .hero-actions {
		margin-top: 1.5rem;
	}

	.hero-screen .hero-meta {
		margin-top: 1.25rem;
	}
}

/* Di layar pendek teks bisa berada di bagian foto yang lebih terang, jadi
   bayangannya diperkuat (tetap tanpa lapisan gelap di atas gambar). */
@media (max-height: 620px) {
	.hero-copy-shadow {
		text-shadow: 0 1px 3px rgba(8, 8, 8, 0.95), 0 6px 32px rgba(8, 8, 8, 0.85);
	}
}

@media (max-height: 480px) {
	.hero-screen .hero-copy {
		padding-bottom: 1rem;
	}

	.hero-screen h1 {
		font-size: clamp(1.5rem, 5.5vw, 2.25rem);
	}
}

/* Teks panjang dari textarea */
.prose-karya p {
	margin-bottom: 1rem;
	line-height: 1.8;
}

.prose-karya p:last-child {
	margin-bottom: 0;
}

:focus-visible {
	outline: 2px solid #4d94ff;
	outline-offset: 3px;
}

/* Grid editorial: garis tipis sebagai pemisah section */
.section-rule {
	border-top: 1px solid #303030;
}

@media print {
	header,
	footer,
	.btn {
		display: none !important;
	}
}