/* Usage Areas Section (Bento Grid) */
.usage-areas-section {
    padding: 60px 0;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #fff;
    letter-spacing: -1px;
}

.bento-grid {
    display: grid;
    /* 3 Columns: Grid template adjusted for better aspect ratios with text */
    grid-template-columns: 1.5fr 1fr 1fr;
    /* Rows auto to fit content */
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
}

.bento-card {
    position: relative;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 450px;
    /* Increased height for text */
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.bento-card.large-card {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    min-height: 920px;
    /* Spans 2 rows + gap */
}

/* Specific Card Positions based on grid order in HTML:
   A (Large) -> Row 1-2, Col 1
   B (Yacht) -> Row 1, Col 2
   C (RV)    -> Row 1, Col 3
   D (Pro)   -> Row 2, Col 2-3 (Span 2) OR 
   Wait, plan was:
   Row 1: Large (1), Yacht (2), RV (3) -> This makes 3 cols.
   Row 2: Large (continues), Pro (2), Outdoor (3) -> Logic check.
   
   Grid template: 2fr 1fr 1fr.
   Item 1 (Large): grid-row 1 / span 2.
   Item 2 (Yacht): auto placement -> Row 1, Col 2.
   Item 3 (RV): auto placement -> Row 1, Col 3.
   Item 4 (Pro): auto placement -> Row 2, Col 2.
   Item 5 (Outdoor): auto placement -> Row 2, Col 3.
*/
.bento-card.pro {
    grid-column: 2 / 4;
    /* Make pro wide like in reference image? 
                             Reference image: Large Left, 4 small/med on right.
                             Ref image: Left large. Right top 2 small. Right bottom 2 small.
                             Correct logic:
                             Col 1: Large
                             Col 2: Yacht (top left), Pro (bottom left)
                             Col 3: RV (top right), Outdoor (bottom right)
                             
                             Correction: 
                             Grid Comlumns: 2fr 1fr 1fr.
                             Rows: 1fr 1fr.
                             
                             Large: Col 1 / span 1, Row 1 / span 2.
                             Yacht: Col 2, Row 1.
                             RV: Col 3, Row 1.
                             Pro: Col 2 / span 2 (Wide bottom)? Or just Col 2 Row 2?
                             Ref image shows:
                             Row 1 Right: Yacht, RV (2 items side by side)
                             Row 2 Right: Pro (Wide), Outdoor (Wide)? No.
                             Ref image:
                             Left: Housing (Tall)
                             Right:
                               Top: Yacht | RV
                               Middle: Pro (Wide)
                               Bottom: Outdoor (Wide)
                             
                             Okay, so right side has 3 rows or specific height.
                             Let's assume standard Bento 3-col grid is easier:
                             Large Left (span 2 rows).
                             Right Top 1, Right Top 2.
                             Right Bottom 1, Right Bottom 2.
                             
                             Current CSS (2fr 1fr 1fr) is good for:
                             Large (Col 1, Row 1-2)
                             Yacht (Col 2, Row 1)
                             RV (Col 3, Row 1)
                             Pro (Col 2, Row 2) -> If I want Pro wide, I need to adjust.
                             Outdoor (Col 3, Row 2).
                             
                             Let's stick to standard 2x2 on the right for clean symmetry unless User specifically wants "Pro" wide.
                             The provided text has A, B, C, D, E.
                             Ref image has 5 items.
                             Let's stick to the 2fr 1fr 1fr plan. It works perfectly for 5 items.
                             */
}

/* Overlay Gradient - Make it darker for readability */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to bottom */
}

.card-header {
    margin-bottom: 15px;
}

.card-cat {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-text-dim);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.card-content {
    margin-top: auto;
}

.card-desc {
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Limit lines if too long */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide footer icons/text as requested "remove English terms" and focus on text */
.card-footer {
    display: none;
}

.card-footer i {
    font-size: 1.1rem;
}

/* Advantage Box (Only for Large Card usually, or all if needed) */
.advantage-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-top: 15px;
}

.adv-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.advantage-box p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* Specific sizing overrides if needed */
.bento-card.pro {
    /* Ensure Pro fits well */
}

/* If Pro is wide, Outdoor needs a place. Row 3? 
   No, let's stick to 2x2 on right side.
   D and E on bottom.
*/
.bento-card.pro {
    grid-column: auto;
}

/* Responsive */
@media (max-width: 1200px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bento-card.large-card {
        grid-column: 1 / 3;
        /* Top full width */
        grid-row: 1;
        min-height: 500px;
    }

    .bento-card {
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-card.large-card {
        grid-column: 1;
        min-height: 500px;
    }
}
/* ==========================================
    PORCELAIN SECTION - DESKTOP FIXED / MOBILE SCROLL
   ========================================== */
.porcelain-section {
    padding: 60px 20px;
    width: 100%;
    overflow-x: hidden;
}

.porcelain-container {
    display: grid;
    grid-template-columns: repeat(6, 200px); 
    gap: 20px;
    justify-content: center;
    margin: 0 auto;
}

.porcelain-item {
    width: 100%;
    height: 640px; 
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
}

.porcelain-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* --- MOBİL UYUM --- */
@media (max-width: 600px) {
    .porcelain-section {
        padding: 30px 0;
        overflow-x: auto !important;
        display: block;
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
    }

    .porcelain-section::-webkit-scrollbar {
        display: block;
        height: 4px;
    }
    
    .porcelain-section::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .porcelain-section::-webkit-scrollbar-thumb {
        background: #FD431B;
        border-radius: 10px;
    }

    .porcelain-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 15px;
        padding: 0 20px;
        width: max-content;
    }

    .porcelain-item {
        flex: 0 0 220px !important; 
        height: 500px;
        scroll-snap-align: center;
    }
}






/* ==========================================
    MODAL STYLES (ZOOM EFEKTİ EKLENDİ)
   ========================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
}

.modal-content {
    display: block;
    margin: auto;
    width: auto;
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* ZOOM ANIMASYONU BURADA */
    animation: zoomIn 0.4s ease-out forwards;
}

/* ZOOM KEYFRAMES */
@keyframes zoomIn {
    from {
        transform: scale(0.5); /* %50 küçüklükten başlar */
        opacity: 0;            /* Şeffaf başlar */
    }
    to {
        transform: scale(1);   /* Tam boyuta gelir */
        opacity: 1;            /* Tam görünür olur */
    }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 45px;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover {
    color: #FD431B;
    transform: scale(1.1);
}

/* ==========================================
    PORCELAIN ITEM HOVER / TOUCH EFFECT - YUMUŞAK
   ========================================== */
.porcelain-item {
    transition: transform 0.6s ease-out, box-shadow 0.6s ease-out; /* Daha yumuşak geçiş */
}

.porcelain-item img {
    transition: transform 0.6s ease-out;
}

.porcelain-item:hover,
.porcelain-item:active {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

.porcelain-item:hover img,
.porcelain-item:active img {
    transform: scale(1.05);
}

/* MOBİLDE daha soft ve yumuşak geçiş */
@media (max-width: 600px) {
    .porcelain-item {
        transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
    }

    .porcelain-item img {
        transition: transform 0.5s ease-out;
    }

    .porcelain-item:hover,
    .porcelain-item:active {
        transform: scale(1.03);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    }

    .porcelain-item:hover img,
    .porcelain-item:active img {
        transform: scale(1.03);
    }
}