/* 1. RESET CSS: menghilangkan margin/padding default */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Variabel warna dengan palet dark & gold (bukan warna studio biasa) */
:root {
    --black-bg: #0a0a0a;      /* hitam pekat */
    --dark-gray: #1a1a1a;     /* abu gelap */
    --gold-accent: #c6a43f;   /* aksen emas (bukan coklat) */
    --white-smoke: #f0f0f0;
    --border-thick: 3px;
}

/* 3. Body dengan background hitam dan font kontras */
body {
    background-color: var(--black-bg);
    color: var(--white-smoke);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
}

/* 4. Container khusus untuk desain asimetris (bukan container biasa) */
.container-asym {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
}

.container-full {
    width: 100%;
    padding: 0;
}

/* 5. === SPLASH / HERO dengan efek glasier (kaca patri) === */
.splash {
    height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%),
                url('https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=1600&h=900&fit=crop');
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 6. Overlay unik: pola garis kisi (glasier effect) */
.glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.02) 0px,
        rgba(255,255,255,0.02) 2px,
        transparent 2px,
        transparent 8px
    );
    pointer-events: none;
}

/* 7. Konten splash di tengah */
.splash-content {
    position: relative;
    z-index: 2;
}

/* 8. Judul besar dengan Playfair Display (elegan) */
.splash-title {
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    text-transform: uppercase;
}

.title-line {
    display: block;
}

/* 9. Garis pembatas tebal (bukan underline tipis) */
.bold-divider {
    width: 80px;
    height: 4px;
    background: var(--gold-accent);
    margin: 20px auto;
}

/* 10. Subtitle dengan huruf kecil semua */
.splash-subtitle {
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: #ccc;
}

/* 11. Tombol editorial (border solid tebal) */
.btn-editorial {
    display: inline-block;
    padding: 14px 32px;
    border: 2px solid var(--gold-accent);
    color: var(--gold-accent);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 2px;
    transition: 0.3s;
    background: transparent;
}

.btn-editorial:hover {
    background: var(--gold-accent);
    color: black;
}

/* 12. Indikator scroll */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: 0.6;
}

/* 13. === SECTION TENTANG ASIMETRIS === */
.about-asym {
    padding: 100px 0;
    background: var(--black-bg);
    border-top: 1px solid #2a2a2a;
}

/* 14. Flex dengan gap besar */
.container-asym {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.about-block {
    flex: 1;
    min-width: 280px;
}

/* 15. Gaya kiri: ada garis samping */
.left-block {
    position: relative;
    padding-left: 30px;
}

.side-stroke {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 80px;
    background: var(--gold-accent);
}

.year-marker {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--gold-accent);
    display: block;
    margin-bottom: 20px;
}

.asym-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.asym-desc {
    color: #b0b0b0;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

/* 16. Statistik dengan gaya raw (tanpa background) */
.stats-raw {
    display: flex;
    gap: 40px;
}

.stat-raw {
    display: flex;
    flex-direction: column;
}

.stat-num-raw {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold-accent);
}

.stat-label-raw {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 17. Gambar dengan grid frame */
.image-grid-frame {
    border: 1px solid #333;
    padding: 10px;
}

.image-grid-frame img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%);
    transition: 0.5s;
}

.image-grid-frame img:hover {
    filter: grayscale(0%);
    transform: scale(1.01);
}

/* 18. === LAYANAN DENGAN BORDER TEBAL === */
.services-bold {
    padding: 80px 0;
    background: var(--dark-gray);
}

.section-header-bold {
    margin-bottom: 60px;
    text-align: left;
}

.section-header-bold h3 {
    font-size: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.thick-line {
    width: 70px;
    height: 4px;
    background: var(--gold-accent);
    margin-top: 12px;
}

.center {
    text-align: center;
}

.center .thick-line {
    margin: 12px auto 0;
}

/* 19. Grid layanan 2 kolom */
.services-grid-bold {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.service-card-bold {
    background: #111;
    padding: 40px 25px;
    border: 1px solid #2c2c2c;
    transition: 0.25s linear;
}

.service-card-bold:hover {
    border-color: var(--gold-accent);
    background: #000;
}

.service-card-bold i {
    font-size: 2.5rem;
    color: var(--gold-accent);
    margin-bottom: 20px;
}

.service-card-bold h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.service-card-bold p {
    font-size: 0.85rem;
    color: #aaa;
}

/* 20. === PORTOFOLIO DARK (grid besar) === */
.portfolio-dark {
    padding: 80px 0;
    background: var(--black-bg);
}

.gallery-dark {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2px;
    background: #1a1a1a;
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform 0.6s;
    filter: grayscale(40%);
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.gallery-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    padding: 5px 12px;
    font-size: 0.7rem;
    letter-spacing: 1px;
    font-weight: 300;
}

/* 21. === KONTAK BRUTALIST === */
.contact-brutal {
    padding: 100px 0;
    background: #050505;
    border-top: 1px solid #222;
}

.contact-brutal-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.form-brutal, .info-brutal {
    flex: 1;
}

.form-brutal h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 600;
}

.form-brutal input, .form-brutal textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #3a3a3a;
    padding: 12px 0;
    margin-bottom: 25px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    transition: 0.2s;
}

.form-brutal input:focus, .form-brutal textarea:focus {
    outline: none;
    border-bottom-color: var(--gold-accent);
}

/* 22. Tombol versi dark */
.btn-editorial.dark {
    border-color: white;
    color: white;
    margin-top: 10px;
}

.btn-editorial.dark:hover {
    background: white;
    color: black;
}

.info-brutal {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-block i {
    font-size: 1.6rem;
    color: var(--gold-accent);
    margin-bottom: 10px;
    display: block;
}

.info-block p {
    font-size: 0.9rem;
    line-height: 1.4;
}

.social-brutal {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.social-brutal a {
    color: white;
    border: 1px solid #444;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.2s;
}

.social-brutal a:hover {
    border-color: var(--gold-accent);
    color: var(--gold-accent);
}

/* 23. FOOTER */
.footer-brutal {
    text-align: center;
    padding: 30px;
    border-top: 1px solid #1f1f1f;
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #555;
}

/* 24. RESPONSIVE: menyesuaikan untuk mobile */
@media (max-width: 768px) {
    .splash-title {
        font-size: 2.8rem;
    }
    .asym-title {
        font-size: 2rem;
    }
    .container-asym {
        flex-direction: column;
    }
    .services-grid-bold {
        grid-template-columns: 1fr;
    }
    .gallery-dark {
        grid-template-columns: 1fr;
    }
    .contact-brutal-wrapper {
        flex-direction: column;
    }
}