/*

File: page.css

Deskripsi: Styling khusus untuk struktur halaman standar (Pages) di luar single post.

Memberikan sentuhan profesional, elegan, dan layout 'card overlapping' yang modern.
*/

/* STREAMING_CHUNK:Styling the page header and abstract hero background... /
.page-hero-section {
position: relative;
background-color: #0f172a; / Slate 900 /
/ Menambahkan gradasi radial untuk efek cahaya elegan di latar belakang gelap */
background-image:
radial-gradient(circle at top right, rgba(14, 165, 233, 0.15), transparent 50%),
radial-gradient(circle at bottom left, rgba(2, 132, 199, 0.1), transparent 50%);
overflow: hidden;
}

.page-hero-overlay {
position: absolute;
inset: 0;
/* Gradasi dari atas transparan ke bawah lebih gelap agar teks terbaca jelas */
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.95) 100%);
z-index: 1;
}

/* STREAMING_CHUNK:Formatting page content containers with overlapping card effect... /
.page-content-wrapper {
background: #ffffff;
border-radius: 1.25rem; / Melengkung modern /
box-shadow: 0 15px 50px -10px rgba(0, 0, 0, 0.08); / Bayangan lembut /
border: 1px solid #f1f5f9; / Slate 100 - Border sangat tipis /
padding: 3.5rem;
position: relative;
z-index: 10;
/ Membuat konten naik sedikit menimpa area Hero untuk efek dimensi */
margin-top: -4rem;
margin-bottom: 2rem;
}

@media (max-width: 768px) {
.page-content-wrapper {
padding: 1.5rem;
margin-top: -2rem; /* Penyesuaian margin negatif di mobile */
border-radius: 1rem;
}
}

/* STREAMING_CHUNK:Styling lead paragraphs and elegant drop-cap intro... /
.page-lead-text {
font-size: 1.25rem;
line-height: 1.8;
color: #475569; / Slate 600 */
font-weight: 300;
margin-bottom: 2.5rem;
}

/* Huruf pertama membesar (Drop Cap) bergaya majalah profesional /
.page-lead-text::first-letter {
font-size: 3.5rem;
font-weight: 800;
color: #0ea5e9; / Sky 500 */
float: left;
line-height: 0.9;
padding-right: 0.75rem;
padding-top: 0.35rem;
font-family: 'Montserrat', sans-serif;
}

/* STREAMING_CHUNK:Configuring custom checkmark lists for service/about pages... */
.page-custom-list {
list-style: none;
padding-left: 0;
margin-bottom: 2.5rem;
}

.page-custom-list li {
position: relative;
padding-left: 2.5rem;
margin-bottom: 1.25rem;
color: #334155; /* Slate 700 */
line-height: 1.6;
font-size: 1.05rem;
}

/* Otomatis menambahkan ikon ceklis FontAwesome dari CSS /
.page-custom-list li::before {
content: '\f00c'; / Unicode FontAwesome untuk fa-check /
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 0;
top: 0.1rem;
color: #0ea5e9; / Sky 500 /
font-size: 1.1rem;
background-color: rgba(14, 165, 233, 0.1); / Background bulat tipis di belakang ikon */
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

/* STREAMING_CHUNK:Styling page internal dividers and image accents... /
.page-section-divider {
height: 1px;
/ Gradasi garis pemisah yang memudar di ujung kiri dan kanannya */
background: linear-gradient(to right, transparent, #cbd5e1, transparent);
margin: 3.5rem 0;
border: none;
}

/* Efek khusus untuk gambar di dalam halaman (misal foto tim / workshop) */
.page-accent-image {
border-radius: 1rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
position: relative;
display: block;
}

/* Border putus-putus sebagai ornamen di belakang gambar /
.page-accent-image::after {
content: '';
position: absolute;
inset: -15px; / Lebih besar dari gambar aslinya /
border: 2px dashed rgba(14, 165, 233, 0.3); / Biru transparan /
border-radius: 1.25rem;
z-index: -1;
pointer-events: none; / Agar tidak menghalangi klik pada gambar */
transition: all 0.3s ease;
}

/* Interaksi hover pada ornamen gambar /
.page-accent-image:hover::after {
border-color: #0ea5e9;
transform: rotate(1deg); / Rotasi sangat halus */
}