/* 1. FULL WIDTH BREAKOUT */
#al-galeri-wrapper-outer {
    --al-primary: #d87f13;
    --al-dark: #1a1a1a;
    --al-white: #ffffff;
    --al-bg: #fdfdfd;

    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: var(--al-bg);
    overflow-x: hidden;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* 2. HERO HEADER */
.al-galeri-hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), 
                url('https://awninglipat.com/wp-content/uploads/2026/03/awnn.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 100px 20px;
    text-align: center;
    color: white;
}

.al-hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.al-hero-content h1 span { color: var(--al-primary); }
.al-hero-content p { font-size: 1.1rem; opacity: 0.9; max-width: 700px; margin: 0 auto; }

/* 3. FILTER BAR */
.al-filter-container {
    background: #fff;
    padding: 30px 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
}

.al-filter-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.al-filter-btn {
    background: transparent;
    border: 2px solid #eee;
    color: #444;
    padding: 12px 25px;
    cursor: pointer;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.al-filter-btn.active, .al-filter-btn:hover {
    background: var(--al-primary);
    border-color: var(--al-primary);
    color: #fff;
    box-shadow: 0 10px 20px rgba(216, 127, 19, 0.2);
    transform: translateY(-2px);
}

/* 4. GRID SYSTEM */
.al-grid-system {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 0; /* Gap 0 untuk tampilan seamless modern */
}

.al-grid-item {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: #000;
}

.al-item-inner { width: 100%; height: 100%; }

.al-item-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.7s ease-in-out;
    opacity: 0.9;
}

.al-grid-item:hover img {
    transform: scale(1.1) rotate(1deg);
    opacity: 1;
}

/* 5. OVERLAY */
.al-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 40px;
    opacity: 0;
    transition: 0.4s ease;
    transform: translateY(20px);
}

.al-grid-item:hover .al-overlay {
    opacity: 1;
    transform: translateY(0);
}

.al-meta h3 { color: #fff; font-size: 1.8rem; margin: 0 0 10px; font-weight: 800; }
.al-meta p { color: #ccc; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.4; }

.al-tag {
    background: var(--al-primary);
    color: #fff;
    padding: 5px 15px;
    font-size: 11px;
    font-weight: 900;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
}

.al-wa-link {
    color: var(--al-primary);
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--al-primary);
    padding-bottom: 5px;
    transition: 0.3s;
}

.al-wa-link:hover { color: #fff; border-color: #fff; }

/* 6. SEO FOOTER */
.al-seo-footer { padding: 50px 20px; text-align: center; color: #999; font-size: 13px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .al-grid-system { grid-template-columns: 1fr; }
    .al-grid-item { height: 350px; }
    .al-overlay { opacity: 1; transform: translateY(0); padding: 25px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 70%); }
    .al-meta h3 { font-size: 1.4rem; }
}