/* Produk Detail Page Styles */
.produk-detail-page {
    min-height: 100vh;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
}

/* Container */
.produk-detail-wrapper {
    max-width: 80rem; /* max-w-7xl */
    margin: 0 auto;
    padding: 3rem 1rem; /* py-12 px-4 */
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
}

@media (min-width: 640px) {
    .produk-detail-wrapper { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 768px) {
    .produk-detail-wrapper { padding: 5rem 4rem; } /* md:py-20 md:px-16 */
}
@media (min-width: 1024px) {
    .produk-detail-wrapper { padding-left: 6rem; padding-right: 6rem; }
}

/* Main Card */
.produk-detail-card {
    background-color: white;
    border-radius: 2.5rem; /* rounded-[2.5rem] */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .produk-detail-card { flex-direction: row; }
}

/* Image Section */
.produk-image-section {
    position: relative;
    min-height: 400px;
    padding: 1.5rem; /* p-6 */
    background-color: #f9fafb; /* bg-gray-50 */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .produk-image-section {
        width: 50%;
        min-height: 600px;
        padding: 3rem; /* lg:p-12 */
    }
}

.produk-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* aspect-square */
    border-radius: 2rem; /* rounded-[2rem] */
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.produk-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.produk-price-tag {
    position: absolute;
    top: 2.5rem; /* top-10 */
    right: 2.5rem; /* right-10 */
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px); /* backdrop-blur-md */
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #104026;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

/* Content Section */
.produk-content-section {
    padding: 2rem; /* p-8 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {
    .produk-content-section { padding: 3rem; } /* md:p-12 */
}

@media (min-width: 1024px) {
    .produk-content-section {
        width: 50%;
        padding: 4rem; /* lg:p-16 */
    }
}

.produk-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280; /* text-gray-500 */
    text-decoration: none;
    margin-bottom: 2rem; /* mb-8 */
    transition: color 0.3s;
    width: fit-content;
}

.produk-back-link:hover {
    color: #104026;
}

.produk-back-link svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s;
}

.produk-back-link:hover svg {
    transform: translateX(-0.25rem); /* group-hover:-translate-x-1 */
}

.produk-detail-title {
    font-size: 1.875rem; /* text-3xl */
    font-family: serif;
    font-weight: 700;
    color: #104026;
    margin: 0 0 1.5rem 0; /* mb-6 */
    line-height: 1.25; /* leading-tight */
}

@media (min-width: 768px) {
    .produk-detail-title { font-size: 2.25rem; } /* md:text-4xl */
}
@media (min-width: 1024px) {
    .produk-detail-title { font-size: 3rem; } /* lg:text-5xl */
}

.produk-divider {
    height: 0.25rem; /* h-1 */
    width: 5rem; /* w-20 */
    background-color: rgba(16, 64, 38, 0.2); /* bg-[#104026]/20 */
    border-radius: 9999px;
    margin-bottom: 2rem; /* mb-8 */
}

.produk-description {
    font-size: 1.125rem; /* text-lg */
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 2.5rem; /* mb-10 */
    line-height: 1.625; /* leading-relaxed */
    text-align: justify;
}

.produk-description h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #104026;
    margin: 0 0 0.75rem 0; /* mb-3 */
}

.produk-description p {
    margin: 0 0 1rem 0; /* mb-4 */
}

.produk-description p:last-child {
    margin-top: 1rem; /* mt-4 */
}

.produk-action-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
}

.produk-wa-btn {
    width: 100%;
    background-color: #25D366;
    color: white;
    padding: 1.25rem 0; /* py-5 */
    border-radius: 1rem; /* rounded-2xl */
    font-weight: 700;
    font-size: 1.125rem; /* text-lg */
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* gap-3 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 0.3s;
    box-sizing: border-box;
}

.produk-wa-btn:hover {
    background-color: #20bd5a;
    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3); /* hover:shadow-green-500/30 */
    transform: translateY(-0.25rem); /* hover:-translate-y-1 */
}

.produk-wa-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Loading & Error specific to detail page */
.produk-detail-center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.produk-spinner {
    animation: spin 1s linear infinite;
    border-radius: 9999px;
    height: 3rem;
    width: 3rem;
    border-top: 2px solid #104026;
    border-bottom: 2px solid #104026;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.produk-error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #104026;
    margin-bottom: 1rem;
}

.produk-error-link {
    color: #104026;
    text-decoration: none;
}

.produk-error-link:hover {
    text-decoration: underline;
}