:root {
    --primary-color: #0f766e;
    --secondary-color: #134e4a;
    --light-bg: #f4fbf9;
    --dark-text: #102a27;
    --muted-text: #6b7280;
    --white: #ffffff;
    --border-color: #e5e7eb;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark-text);
    background-color: #ffffff;
    margin: 0;
    padding-top: 0;
}

a {
    text-decoration: none;
}
/* TOP INFO BAR */

.top-info-bar {
    background-color: #175748;
    color: #ffffff;
    font-size: 12px;
}

.top-info-content {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-contact {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .top-contact span {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ffffff;
        font-weight: 600;
    }

    .top-contact i {
        color: #34d399;
        font-size: 14px;
    }

.top-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .top-social a {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        transition: 0.2s ease;
    }

        .top-social a:hover {
            background-color: #0f766e;
            color: #ffffff;
        }

/* NAVBAR */



/* ERVET LOGO */

.ervet-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0;
    margin: 0;
}

.ervet-logo-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ervet-logo-img {
    width: 78px;
    height: auto;
    object-fit: contain;
    display: block;
}

.ervet-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
}

    .ervet-logo-text strong {
        font-size: 20px;
        font-weight: 800;
        color: #111827;
        letter-spacing: 0.5px;
    }

    .ervet-logo-text small {
        font-size: 12px;
        font-weight: 700;
        color: #111827;
        margin-top: 4px;
    }

.brand-separator {
    width: 1px;
    height: 42px;
    background-color: #d1d5db;
}

.ervet-brand-description {
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 24px;
}

.nav-link {
    font-weight: 600;
    color: #334155 !important;
    margin: 0 6px;
}

    .nav-link:hover,
    .nav-link.active {
        color: var(--primary-color) !important;
    }

.login-btn {
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
}

    .login-btn:hover {
        background-color: var(--secondary-color);
        color: var(--white);
    }

/* BUTTONS */

.primary-btn {
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 700;
}

    .primary-btn:hover {
        background-color: var(--secondary-color);
        color: var(--white);
    }

.secondary-btn {
    background-color: var(--white);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 700;
}

    .secondary-btn:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }

/* HERO */

.hero-section {
    min-height: 560px;
    background: radial-gradient(circle at top right, #ccfbf1, transparent 35%), linear-gradient(180deg, #f0fdfa, #ffffff);
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.hero-badge {
    display: inline-block;
    background-color: #ccfbf1;
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
}

.hero-section h1 {
    font-size: 54px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
}

    .hero-section h1 span {
        color: var(--primary-color);
    }

.hero-section p {
    font-size: 18px;
    color: var(--muted-text);
    max-width: 560px;
    margin-bottom: 28px;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.hero-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

    .hero-stats div {
        background-color: var(--white);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 18px 22px;
        min-width: 130px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    }

    .hero-stats strong {
        display: block;
        color: var(--primary-color);
        font-size: 24px;
    }

    .hero-stats span {
        color: var(--muted-text);
        font-size: 14px;
    }

.hero-card {
    background-color: var(--white);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 30px 80px rgba(15, 118, 110, 0.18);
    border: 1px solid #d1fae5;
}

.hero-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

    .hero-card-header span {
        font-weight: 800;
        font-size: 20px;
    }

    .hero-card-header small {
        opacity: 0.85;
    }

.lab-preview-box {
    background-color: var(--light-bg);
    border-radius: 20px;
    padding: 20px;
}

.lab-row {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #dbeafe;
}

    .lab-row span {
        color: var(--muted-text);
    }

.success-text {
    color: var(--primary-color);
}

.panel-btn {
    width: 100%;
    background-color: var(--secondary-color);
    color: var(--white);
    border-radius: 12px;
    margin-top: 20px;
    padding: 12px;
    font-weight: 700;
}

    .panel-btn:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }

/* SECTIONS */

.category-section,
.laboratory-section,
.order-section {
    padding: 90px 0;
}

.section-title {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 50px;
}

    .section-title span,
    .lab-content span,
    .order-box span {
        color: var(--primary-color);
        font-weight: 800;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .section-title h2,
    .lab-content h2,
    .order-box h2 {
        font-size: 38px;
        font-weight: 800;
        margin: 12px 0;
    }

    .section-title p,
    .lab-content p,
    .order-box p {
        color: var(--muted-text);
    }

/* CATEGORY */

.category-card {
    height: 100%;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 30px;
    transition: 0.25s ease;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}
.category-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 18px;
    background: #f8fafc;
}
    .category-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 45px rgba(15, 118, 110, 0.12);
        border-color: #99f6e4;
    }

/*.category-icon {
    width: 62px;
    height: 62px;
    background-color: #ccfbf1;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 22px;
}*/

.category-card h5 {
    font-weight: 800;
    margin-bottom: 12px;
}

.category-card p {
    color: var(--muted-text);
    min-height: 72px;
}

.category-card a {
    color: var(--primary-color);
    font-weight: 800;
}

/* LABORATORY */

.laboratory-section {
    background-color: var(--light-bg);
}

.lab-content ul {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.lab-content li {
    background-color: var(--white);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    border: 1px solid #d1fae5;
    font-weight: 600;
}

.result-search-box {
    background-color: var(--white);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 20px 55px rgba(15, 118, 110, 0.12);
}

    .result-search-box h4 {
        font-weight: 800;
    }

.form-control {
    min-height: 48px;
    border-radius: 12px;
}

/* ORDER */

.order-box {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    border-radius: 30px;
    padding: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

    .order-box span,
    .order-box p {
        color: #ccfbf1;
    }

    .order-box h2 {
        color: var(--white);
    }

.order-btn {
    background-color: var(--white);
    color: var(--primary-color);
    border-radius: 14px;
    padding: 14px 28px;
    font-weight: 800;
    white-space: nowrap;
}

    .order-btn:hover {
        background-color: #ccfbf1;
        color: var(--secondary-color);
    }

/* FOOTER */

.footer-section {
    background-color: #082f2b;
    color: #d1fae5;
    padding: 70px 0 20px;
}

    .footer-section h5,
    .footer-section h6 {
        color: var(--white);
        font-weight: 800;
        margin-bottom: 18px;
    }

    .footer-section p {
        color: #a7f3d0;
    }

    .footer-section ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .footer-section li {
        margin-bottom: 10px;
        color: #a7f3d0;
    }

    .footer-section a {
        color: #a7f3d0;
    }

        .footer-section a:hover {
            color: var(--white);
        }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 40px;
    padding-top: 18px;
    text-align: center;
    color: #99f6e4;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .hero-section h1 {
        font-size: 40px;
    }

    .hero-section {
        padding: 60px 0;
    }

    .order-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    body {
        padding-top: 0px;
    }

    .hero-section h1 {
        font-size: 34px;
    }

    .section-title h2,
    .lab-content h2,
    .order-box h2 {
        font-size: 30px;
    }

    .hero-stats {
        flex-direction: column;
    }

        .hero-stats div {
            width: 100%;
        }
}
/* MAIN SLIDER */

.slider-section {
    width: 100%;
    background-color: #f0fdfa;
}

.slider-item {
    min-height: 520px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .slider-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(8, 47, 43, 0.88), rgba(15, 118, 110, 0.55), rgba(15, 118, 110, 0.18));
        z-index: 1;
    }


.slider-two {
    background: radial-gradient(circle at right, #a7f3d0, #134e4a);
}

.slider-three {
    background: radial-gradient(circle at right, #ccfbf1, #115e59);
}

.slider-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    color: #ffffff;
    padding: 70px 0;
}

    .slider-content span {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.28);
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .slider-content h1 {
        font-size: 52px;
        line-height: 1.12;
        font-weight: 800;
        margin-bottom: 22px;
    }

    .slider-content p {
        font-size: 18px;
        max-width: 560px;
        color: #d1fae5;
        margin-bottom: 30px;
    }

.slider-btn {
    background-color: #ffffff;
    color: #0f766e;
    border-radius: 14px;
    padding: 13px 28px;
    font-weight: 800;
}

    .slider-btn:hover {
        background-color: #ccfbf1;
        color: #134e4a;
    }

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
}

.carousel-control-prev,
.carousel-control-next {
    width: 6%;
}

/* SLIDER RESPONSIVE */

@media (max-width: 991px) {
    .slider-item {
        min-height: 460px;
    }

    .slider-content h1 {
        font-size: 40px;
    }
}

@media (max-width: 576px) {
    .slider-item {
        min-height: 430px;
    }

    .slider-content {
        padding: 50px 0;
    }

        .slider-content h1 {
            font-size: 32px;
        }

        .slider-content p {
            font-size: 16px;
        }
}
/* MAIN IMAGE SLIDER */

.slider-section {
    width: 100%;
    background-color: #f0fdfa;
}

.slider-item {
    min-height: 540px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .slider-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(240, 253, 250, 0.96) 0%, rgba(240, 253, 250, 0.82) 38%, rgba(240, 253, 250, 0.35) 68%, rgba(240, 253, 250, 0.05) 100% );
        z-index: 1;
    }

.slider-one {
    background-image: url('/images/ervet_images_01.png');
}

.slider-two {
    background-image: url('/images/ervet_images_02.png');
}

.slider-three {
    background-image: url('/images/ervet_images_03.png');
}

.slider-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 70px 0;
}

    .slider-content span {
        display: inline-block;
        background-color: #ccfbf1;
        color: #0f766e;
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    .slider-content h1 {
        font-size: 52px;
        line-height: 1.12;
        font-weight: 900;
        color: #102a27;
        margin-bottom: 22px;
    }

    .slider-content p {
        font-size: 18px;
        max-width: 560px;
        color: #475569;
        margin-bottom: 30px;
    }

.slider-btn {
    background-color: #0f766e;
    color: #ffffff;
    border-radius: 14px;
    padding: 13px 28px;
    font-weight: 800;
}

    .slider-btn:hover {
        background-color: #134e4a;
        color: #ffffff;
    }

.carousel-indicators {
    bottom: 22px;
}

    .carousel-indicators button {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50%;
        background-color: #0f766e !important;
    }

.carousel-control-prev,
.carousel-control-next {
    width: 6%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(15, 118, 110, 0.85);
    border-radius: 50%;
    padding: 22px;
    background-size: 55%;
}

/* SLIDER RESPONSIVE */

@media (max-width: 991px) {
    .slider-item {
        min-height: 460px;
    }

    .slider-content h1 {
        font-size: 40px;
    }

    .slider-content p {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .slider-item {
        min-height: 430px;
        background-position: center right;
    }

        .slider-item::before {
            background: linear-gradient( 90deg, rgba(240, 253, 250, 0.98) 0%, rgba(240, 253, 250, 0.9) 55%, rgba(240, 253, 250, 0.45) 100% );
        }

    .slider-content {
        padding: 50px 0;
    }

        .slider-content h1 {
            font-size: 32px;
        }
}
@media (max-width: 991px) {
    .ervet-brand {
        gap: 12px;
    }

    .ervet-logo-img {
        width: 50px;
    }

    .ervet-logo-text strong {
        font-size: 18px;
    }

    .ervet-logo-text small {
        font-size: 11px;
    }

    .brand-separator,
    .ervet-brand-description {
        display: none;
    }
}
@media (max-width: 768px) {
    .top-info-content {
        flex-direction: column;
        gap: 8px;
        padding: 8px 0;
    }

    .top-contact {
        flex-direction: column;
        gap: 4px;
    }

    .top-social {
        display: none;
    }
}
/* COMMON PAGE HERO */

.page-hero {
    background: linear-gradient(90deg, rgba(240, 253, 250, 0.98), rgba(240, 253, 250, 0.84)), radial-gradient(circle at top right, #99f6e4, transparent 34%);
    padding: 90px 0;
}

.page-hero-content {
    max-width: 760px;
}

    .page-hero-content span {
        display: inline-block;
        background-color: #ccfbf1;
        color: var(--primary-color);
        padding: 8px 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 18px;
    }

    .page-hero-content h1 {
        font-size: 48px;
        line-height: 1.15;
        font-weight: 900;
        color: var(--dark-text);
        margin-bottom: 20px;
    }

    .page-hero-content p {
        font-size: 18px;
        color: var(--muted-text);
        max-width: 660px;
    }

/* PRODUCT PAGE */

.product-category-page {
    padding: 90px 0;
    background-color: #ffffff;
}

.product-category-card {
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(15, 118, 110, 0.07);
    transition: 0.25s ease;
}

    .product-category-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 55px rgba(15, 118, 110, 0.13);
        border-color: #99f6e4;
    }

.product-category-image {
    height: 210px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .product-category-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.55), transparent 38%), linear-gradient(135deg, rgba(15, 118, 110, 0.88), rgba(19, 78, 74, 0.94));
    }

.product-category-body {
    padding: 26px 28px 28px;
}

    .product-category-body h4 {
        display: none;
    }

    .product-category-body p {
        color: var(--muted-text);
        min-height: 74px;
        margin-bottom: 18px;
    }

    .product-category-body ul {
        list-style: none;
        padding: 0;
        margin: 0 0 22px;
    }

    .product-category-body li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 8px;
        color: #475569;
        font-weight: 500;
    }

        .product-category-body li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: 900;
        }

.product-detail-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 900;
}

    .product-detail-link:hover {
        color: var(--secondary-color);
    }

    .product-detail-link::after {
        content: "→";
        margin-left: 8px;
    }

/* Different category header tones */



/* PRODUCT REQUEST */

.product-request-section {
    padding: 0 0 90px;
    background-color: #ffffff;
}

.product-request-box {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 30px;
    padding: 46px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

    .product-request-box span {
        color: #ccfbf1;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 13px;
    }

    .product-request-box h2 {
        font-size: 34px;
        font-weight: 900;
        margin: 10px 0;
    }

    .product-request-box p {
        color: #d1fae5;
        margin: 0;
        max-width: 680px;
    }

.product-request-btn {
    background-color: #ffffff;
    color: var(--primary-color);
    border-radius: 14px;
    padding: 14px 28px;
    font-weight: 900;
    white-space: nowrap;
}

    .product-request-btn:hover {
        background-color: #ccfbf1;
        color: var(--secondary-color);
    }

/* PRODUCT PAGE RESPONSIVE */

@media (max-width: 991px) {
    .page-hero {
        padding: 70px 0;
    }

    .page-hero-content h1 {
        font-size: 38px;
    }

    .product-request-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .page-hero {
        padding: 55px 0;
    }

    .page-hero-content h1 {
        font-size: 32px;
    }

    .page-hero-content p {
        font-size: 16px;
    }

    .product-category-page {
        padding: 65px 0;
    }

    .product-request-box {
        padding: 32px;
    }

        .product-request-box h2 {
            font-size: 28px;
        }
}
.product-category-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.30) 45%, rgba(0, 0, 0, 0.62) 100% );
}
.product-category-overlay {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    z-index: 2;
    color: #ffffff;
}

.product-category-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.product-category-overlay h5 {
    font-size: 26px;
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
}
.medicine-bg {
    background-image: url('/images/categories/category_ilac.jpg');
}

.vaccine-bg {
    background-image: url('/images/categories/category_asi.jpg');
}

.premix-bg {
    background-image: url('/images/categories/category_premix.jpg');
}

.feed-bg {
    background-image: url('/images/categories/category_yem.jpg');
}

.pet-bg {
    background-image: url('/images/categories/category_mama.jpg');
}

.lab-bg {
    background-image: url('/images/categories/category_lab.jpg');
}
.product-category-card {
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(15, 118, 110, 0.07);
    transition: 0.25s ease;
}

    .product-category-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 55px rgba(15, 118, 110, 0.13);
        border-color: #99f6e4;
    }

        .product-category-card:hover .product-category-image {
            background-size: 108%;
        }

/* PRODUCT CATEGORY IMAGE CARDS */

.product-category-image {
    height: 210px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.35s ease;
}

    .product-category-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 47, 43, 0.82) 100% );
        z-index: 1;
    }

.product-category-overlay {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 2;
    color: #ffffff;
}

.product-category-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.product-category-overlay h5 {
    font-size: 27px;
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
    color: #ffffff;
}

.product-category-card:hover .product-category-image {
    transform: scale(1.03);
}

.product-category-body {
    padding: 26px 28px 28px;
}

    .product-category-body h4 {
        display: none;
    }

/* Category Background Images */

.medicine-bg {
    background-image: url('/images/categories/category_ilac.jpg');
}

.vaccine-bg {
    background-image: url('/images/categories/category_asi.jpg');
}

.premix-bg {
    background-image: url('/images/categories/category_premix.jpg');
}

.feed-bg {
    background-image: url('/images/categories/category_yem.jpg');
}

.pet-bg {
    background-image: url('/images/categories/category_mama.jpg');
}

.lab-bg {
    background-image: url('/images/categories/category_lab.jpg');
}

/* Hide old icon box if old HTML/CSS remains somewhere */

.product-category-icon {
    display: none;
}
/* LABORATORY PAGE */

.lab-service-section {
    padding: 90px 0;
    background-color: #ffffff;
}

.lab-service-card {
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    padding: 32px;
    box-shadow: 0 16px 38px rgba(15, 118, 110, 0.07);
    transition: 0.25s ease;
}

    .lab-service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 55px rgba(15, 118, 110, 0.13);
        border-color: #99f6e4;
    }

.lab-service-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background-color: #ccfbf1;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 24px;
}

.lab-service-card h4 {
    font-size: 23px;
    font-weight: 900;
    color: var(--dark-text);
    margin-bottom: 14px;
}

.lab-service-card p {
    color: var(--muted-text);
    min-height: 96px;
}

.lab-service-card ul {
    padding: 0;
    margin: 22px 0 0;
    list-style: none;
}

.lab-service-card li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    color: #475569;
    font-weight: 500;
}

    .lab-service-card li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--primary-color);
        font-weight: 900;
    }

/* LAB RESULT AREA */

.lab-result-section {
    padding: 90px 0;
    background: radial-gradient(circle at top right, #ccfbf1, transparent 34%), linear-gradient(180deg, #f0fdfa, #ffffff);
}

.lab-result-content span {
    color: var(--primary-color);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

.lab-result-content h2 {
    font-size: 40px;
    line-height: 1.18;
    font-weight: 900;
    margin: 14px 0;
    color: var(--dark-text);
}

.lab-result-content p {
    color: var(--muted-text);
    font-size: 17px;
}

.lab-feature-list {
    margin: 30px 0;
}

.lab-feature-item {
    display: flex;
    gap: 18px;
    background-color: #ffffff;
    border: 1px solid #d1fae5;
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.06);
}

    .lab-feature-item strong {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background-color: var(--primary-color);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .lab-feature-item h5 {
        font-weight: 900;
        margin-bottom: 4px;
    }

    .lab-feature-item p {
        margin: 0;
        font-size: 15px;
    }

.lab-login-card {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 38px;
    box-shadow: 0 28px 70px rgba(15, 118, 110, 0.16);
    border: 1px solid #d1fae5;
}

    .lab-login-card h4 {
        font-size: 28px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .lab-login-card p {
        color: var(--muted-text);
        margin-bottom: 24px;
    }

.lab-login-help {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    font-size: 14px;
}

    .lab-login-help a {
        color: var(--primary-color);
        font-weight: 700;
    }

/* LAB PROCESS */

.lab-process-section {
    padding: 90px 0;
    background-color: #ffffff;
}

.process-card {
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 28px;
    text-align: center;
    transition: 0.25s ease;
}

    .process-card:hover {
        transform: translateY(-6px);
        border-color: #99f6e4;
        box-shadow: 0 18px 42px rgba(15, 118, 110, 0.10);
    }

    .process-card span {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background-color: #ccfbf1;
        color: var(--primary-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 20px;
        margin-bottom: 18px;
    }

    .process-card h5 {
        font-weight: 900;
        margin-bottom: 10px;
    }

    .process-card p {
        color: var(--muted-text);
        margin: 0;
    }

/* LAB RESPONSIVE */

@media (max-width: 991px) {
    .lab-result-content h2 {
        font-size: 34px;
    }
}

@media (max-width: 576px) {
    .lab-service-section,
    .lab-result-section,
    .lab-process-section {
        padding: 65px 0;
    }

    .lab-login-card {
        padding: 30px;
    }

    .lab-login-help {
        flex-direction: column;
    }

    .lab-result-content h2 {
        font-size: 30px;
    }
}
/* PRODUCT LIST PAGE */

.product-list-section {
    padding: 90px 0;
    background-color: #ffffff;
}

.product-list-card {
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(15, 118, 110, 0.07);
    transition: 0.25s ease;
}

    .product-list-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 55px rgba(15, 118, 110, 0.13);
        border-color: #99f6e4;
    }

.product-list-image {
    height: 230px;
    background-color: #f8fafc;
    overflow: hidden;
}

    .product-list-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.product-list-body {
    padding: 28px;
}

    .product-list-body span {
        display: inline-block;
        color: var(--primary-color);
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .product-list-body h4 {
        font-size: 22px;
        font-weight: 900;
        color: var(--dark-text);
        margin-bottom: 12px;
    }

    .product-list-body p {
        color: var(--muted-text);
        min-height: 52px;
    }

.product-price {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-color);
    margin: 18px 0;
}

.product-card-btn {
    width: 100%;
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 14px;
    padding: 12px;
    font-weight: 800;
}

    .product-card-btn:hover {
        background-color: var(--secondary-color);
        color: #ffffff;
    }

.empty-product-box {
    background-color: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 28px;
    padding: 50px;
    text-align: center;
}

    .empty-product-box h3 {
        font-weight: 900;
        margin-bottom: 12px;
    }

    .empty-product-box p {
        color: var(--muted-text);
        margin-bottom: 24px;
    }

/* PRODUCT DETAIL PAGE */

.product-detail-section {
    padding: 90px 0;
    background: radial-gradient(circle at top right, #ccfbf1, transparent 34%), linear-gradient(180deg, #f0fdfa, #ffffff);
}

.product-detail-image {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 24px;
    box-shadow: 0 22px 60px rgba(15, 118, 110, 0.13);
}

    .product-detail-image img {
        width: 100%;
        border-radius: 22px;
        object-fit: cover;
    }

.product-detail-content {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 22px 60px rgba(15, 118, 110, 0.13);
}

    .product-detail-content span {
        color: var(--primary-color);
        font-weight: 900;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .product-detail-content h1 {
        font-size: 42px;
        font-weight: 900;
        color: var(--dark-text);
        margin: 14px 0;
    }

.short-description {
    color: var(--muted-text);
    font-size: 18px;
}

.product-detail-price {
    font-size: 32px;
    font-weight: 900;
    color: var(--primary-color);
    margin: 24px 0 12px;
}

.stock-info {
    margin-bottom: 26px;
}

.stock-active,
.stock-passive {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
}

.stock-active {
    background-color: #dcfce7;
    color: #166534;
}

.stock-passive {
    background-color: #fef3c7;
    color: #92400e;
}

.product-detail-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.product-description-box {
    margin-top: 50px;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 18px 50px rgba(15, 118, 110, 0.10);
}

    .product-description-box h3 {
        font-weight: 900;
        margin-bottom: 16px;
    }

    .product-description-box p {
        color: var(--muted-text);
        font-size: 17px;
        line-height: 1.8;
    }

@media (max-width: 576px) {
    .product-list-section,
    .product-detail-section {
        padding: 65px 0;
    }

    .product-detail-content {
        padding: 30px;
    }

        .product-detail-content h1 {
            font-size: 32px;
        }

    .product-description-box {
        padding: 30px;
    }
}
/* ADMIN PANEL */

.admin-dashboard-section,
.admin-list-section,
.admin-form-section {
    padding: 90px 0;
    background: radial-gradient(circle at top right, #ccfbf1, transparent 34%), linear-gradient(180deg, #f0fdfa, #ffffff);
    min-height: 650px;
}

.admin-page-header,
.admin-list-header {
    margin-bottom: 40px;
}

.admin-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

    .admin-page-header span,
    .admin-list-header span {
        color: var(--primary-color);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 13px;
    }

    .admin-page-header h1,
    .admin-list-header h1 {
        font-size: 42px;
        font-weight: 900;
        color: var(--dark-text);
        margin: 10px 0;
    }

    .admin-page-header p,
    .admin-list-header p {
        color: var(--muted-text);
        margin: 0;
    }

.admin-dashboard-card {
    height: 100%;
    display: block;
    background-color: #ffffff;
    border: 1px solid #d1fae5;
    border-radius: 26px;
    padding: 32px;
    color: var(--dark-text);
    box-shadow: 0 16px 38px rgba(15, 118, 110, 0.08);
    transition: 0.25s ease;
}

    .admin-dashboard-card:hover {
        transform: translateY(-8px);
        border-color: #99f6e4;
        box-shadow: 0 26px 55px rgba(15, 118, 110, 0.14);
        color: var(--dark-text);
    }

.admin-card-icon {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background-color: #ccfbf1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 22px;
}

.admin-dashboard-card h4 {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 12px;
}

.admin-dashboard-card p {
    color: var(--muted-text);
    margin: 0;
}

.admin-primary-btn {
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 14px;
    padding: 12px 22px;
    font-weight: 900;
}

    .admin-primary-btn:hover {
        background-color: var(--secondary-color);
        color: #ffffff;
    }

.admin-secondary-btn {
    background-color: #ffffff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 14px;
    padding: 12px 22px;
    font-weight: 900;
}

    .admin-secondary-btn:hover {
        background-color: var(--primary-color);
        color: #ffffff;
    }

.admin-table-card,
.admin-form-card {
    background-color: #ffffff;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 20px 55px rgba(15, 118, 110, 0.12);
    border: 1px solid #d1fae5;
}

.admin-product-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .admin-product-cell img {
        width: 58px;
        height: 58px;
        border-radius: 14px;
        object-fit: cover;
        background-color: #f8fafc;
    }

    .admin-product-cell strong {
        display: block;
        font-weight: 900;
        color: var(--dark-text);
    }

    .admin-product-cell small {
        display: block;
        color: var(--muted-text);
        max-width: 300px;
    }

.admin-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

    .admin-status.active {
        background-color: #dcfce7;
        color: #166534;
    }

    .admin-status.passive {
        background-color: #fee2e2;
        color: #991b1b;
    }

    .admin-status.featured {
        background-color: #fef3c7;
        color: #92400e;
    }

.admin-check-group {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0 14px;
}

    .admin-check-group label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
    }

@media (max-width: 768px) {
    .admin-list-header {
        flex-direction: column;
        align-items: flex-start;
    }

        .admin-page-header h1,
        .admin-list-header h1 {
            font-size: 34px;
        }

    .admin-table-card,
    .admin-form-card {
        padding: 20px;
    }
}
/* ADMIN ACTION BUTTONS */

.admin-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-edit-btn,
.admin-passive-btn,
.admin-active-btn {
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
}

.admin-edit-btn {
    background-color: #e0f2fe;
    color: #075985;
}

    .admin-edit-btn:hover {
        background-color: #bae6fd;
        color: #075985;
    }

.admin-passive-btn {
    background-color: #fee2e2;
    color: #991b1b;
}

    .admin-passive-btn:hover {
        background-color: #fecaca;
        color: #991b1b;
    }

.admin-active-btn {
    background-color: #dcfce7;
    color: #166534;
}

    .admin-active-btn:hover {
        background-color: #bbf7d0;
        color: #166534;
    }
/* ADMIN IMAGE PREVIEW */

.admin-current-image {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
}

    .admin-current-image img {
        width: 92px;
        height: 92px;
        object-fit: cover;
        border-radius: 14px;
    }

    .admin-current-image span {
        color: var(--muted-text);
        font-size: 14px;
        word-break: break-all;
    }
/* ORDER REQUEST */

.order-form-section,
.order-success-section {
    padding: 90px 0;
    background: radial-gradient(circle at top right, #ccfbf1, transparent 34%), linear-gradient(180deg, #f0fdfa, #ffffff);
    min-height: 650px;
}

.order-form-card,
.order-success-card {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 22px 60px rgba(15, 118, 110, 0.13);
    border: 1px solid #d1fae5;
}

.order-selected-product {
    background-color: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 30px;
}

    .order-selected-product span {
        color: var(--primary-color);
        font-weight: 900;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .order-selected-product h3 {
        font-weight: 900;
        margin: 8px 0;
    }

    .order-selected-product p {
        color: var(--muted-text);
        margin: 0;
    }

.order-success-card {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.success-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background-color: #dcfce7;
    color: #166534;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 24px;
}

.order-success-card h1 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 16px;
}

.order-success-card p {
    color: var(--muted-text);
    font-size: 18px;
    margin-bottom: 28px;
}

.admin-status-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 240px;
}

@media (max-width: 576px) {
    .order-form-section,
    .order-success-section {
        padding: 65px 0;
    }

    .order-form-card,
    .order-success-card {
        padding: 30px;
    }

    .admin-status-form {
        flex-direction: column;
        align-items: stretch;
    }
}
/* ADMIN LOGIN */

.admin-login-section {
    padding: 90px 0;
    min-height: 650px;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at top right, #ccfbf1, transparent 34%), linear-gradient(180deg, #f0fdfa, #ffffff);
}

.admin-login-card {
    max-width: 460px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 22px 60px rgba(15, 118, 110, 0.13);
    border: 1px solid #d1fae5;
}

.admin-login-header {
    text-align: center;
    margin-bottom: 30px;
}

    .admin-login-header span {
        color: var(--primary-color);
        font-weight: 900;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .admin-login-header h1 {
        font-size: 36px;
        font-weight: 900;
        color: var(--dark-text);
        margin: 10px 0;
    }

    .admin-login-header p {
        color: var(--muted-text);
        margin: 0;
    }

.report-info-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    border: 1px solid #eef2f7;
}

.report-info-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 18px;
    height: 100%;
    border: 1px solid #e5e7eb;
}

    .report-info-item span {
        display: block;
        font-size: 13px;
        color: #64748b;
        margin-bottom: 6px;
    }

    .report-info-item strong {
        font-size: 16px;
        color: #0f172a;
    }

.result-table thead th {
    background: #f1f5f9;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.result-table tbody td {
    font-size: 14px;
    color: #334155;
    vertical-align: middle;
}

.result-badge {
    display: inline-block;
    min-width: 82px;
    text-align: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

    .result-badge.positive {
        background: #fee2e2;
        color: #b91c1c;
    }

    .result-badge.negative {
        background: #dcfce7;
        color: #166534;
    }

    .result-badge.suspicious {
        background: #fef3c7;
        color: #92400e;
    }

    .result-badge.neutral {
        background: #e5e7eb;
        color: #374151;
    }
.admin-form-section {
    padding: 50px 0;
    background: #f8fafc;
    min-height: 80vh;
}

.admin-form-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5e7eb;
}

.form-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 18px;
}

.calculation-info-box {
    background: #f1f5f9;
    border-left: 4px solid #2563eb;
    padding: 14px 16px;
    border-radius: 12px;
    color: #334155;
    font-size: 14px;
}

.test-fields {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 18px;
}

.result-badge {
    display: inline-block;
    min-width: 82px;
    text-align: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

    .result-badge.positive {
        background: #fee2e2;
        color: #b91c1c;
    }

    .result-badge.negative {
        background: #dcfce7;
        color: #166534;
    }

    .result-badge.neutral {
        background: #e5e7eb;
        color: #374151;
    }
.admin-filter-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5e7eb;
}

.test-checkbox-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.test-checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 9px 13px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    color: #334155;
}

    .test-checkbox-item input {
        width: 15px;
        height: 15px;
    }

    .test-checkbox-item:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

.report-header-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 22px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

    .report-header-card h2 {
        margin: 0;
        font-size: 26px;
        font-weight: 900;
        color: #0f172a;
    }

    .report-header-card p {
        margin: 6px 0 0;
        color: #64748b;
    }

.report-no-box {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px 24px;
    text-align: center;
    min-width: 160px;
}

    .report-no-box span {
        display: block;
        font-size: 13px;
        color: #64748b;
        margin-bottom: 4px;
    }

    .report-no-box strong {
        font-size: 24px;
        color: #0f172a;
    }

.report-footer-note {
    margin-top: 24px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

@media print {
    body {
        background: #ffffff !important;
    }

    .no-print,
    .navbar,
    .top-info-bar,
    footer,
    .footer {
        display: none !important;
    }

    .admin-list-section {
        padding: 0 !important;
        background: #ffffff !important;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .report-header-card,
    .report-info-card,
    .admin-table-card {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
    }

    .result-badge {
        border: 1px solid #d1d5db;
    }
}
/* ================================
   CUSTOMER PANEL DESIGN
================================ */

.customer-panel-body {
    margin: 0;
    background: #f4f7fb;
    font-family: Arial, Helvetica, sans-serif;
}

.customer-panel-wrapper {
    display: flex;
    min-height: 100vh;
}

.customer-sidebar {
    width: 280px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
}

.customer-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px;
    border-bottom: 1px solid #e5e7eb;
}

    .customer-sidebar-logo img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .customer-sidebar-logo strong {
        display: block;
        font-size: 20px;
        color: #0f172a;
    }

    .customer-sidebar-logo span {
        display: block;
        font-size: 13px;
        color: #64748b;
    }

.customer-sidebar-menu {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.customer-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 6px;
    border-radius: 14px;
    color: #334155;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: 0.2s;
}

    .customer-menu-link:hover {
        background: #f1f5f9;
        color: #1d4ed8;
    }

    .customer-menu-link.active {
        background: #e0edff;
        color: #1d4ed8;
    }

    .customer-menu-link span {
        width: 24px;
        text-align: center;
    }

.customer-sidebar-footer {
    padding: 16px;
    border-top: 1px solid #e5e7eb;
}

.customer-logout-link {
    display: block;
    text-align: center;
    padding: 12px;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
}

    .customer-logout-link:hover {
        background: #fecaca;
        color: #991b1b;
    }

.customer-main {
    margin-left: 280px;
    width: calc(100% - 280px);
    min-height: 100vh;
}

.customer-topbar {
    height: 86px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .customer-topbar span {
        color: #64748b;
        font-size: 13px;
    }

    .customer-topbar h2 {
        margin: 0;
        color: #0f172a;
        font-size: 22px;
        font-weight: 800;
    }

.customer-outline-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    text-decoration: none;
}

    .customer-outline-btn:hover {
        background: #f1f5f9;
        color: #1d4ed8;
    }

.customer-content {
    padding: 30px;
}

.customer-page-title {
    margin-bottom: 24px;
}

    .customer-page-title span {
        color: #2563eb;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .customer-page-title h1 {
        margin: 5px 0;
        font-size: 32px;
        font-weight: 900;
        color: #0f172a;
    }

    .customer-page-title p {
        color: #64748b;
        margin: 0;
    }

.customer-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.customer-stat-card,
.customer-module-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

    .customer-stat-card span {
        color: #2563eb;
        font-size: 13px;
        font-weight: 800;
    }

    .customer-stat-card h3 {
        margin: 8px 0;
        font-size: 22px;
        font-weight: 900;
        color: #0f172a;
    }

    .customer-stat-card p,
    .customer-module-card p {
        color: #64748b;
        font-size: 14px;
        min-height: 46px;
    }

    .customer-stat-card a,
    .customer-module-card a {
        display: inline-block;
        margin-top: 10px;
        color: #1d4ed8;
        font-weight: 800;
        text-decoration: none;
    }

        .customer-stat-card a:hover,
        .customer-module-card a:hover {
            color: #1e40af;
        }

.customer-module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.customer-module-card h4 {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
}

/* Mobil uyum */
.customer-mobile-menu-btn {
    display: none;
    border: none;
    background: #1d4ed8;
    color: #ffffff;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 800;
}

@media (max-width: 992px) {
    .customer-panel-wrapper {
        flex-direction: column;
    }

    .customer-sidebar {
        position: fixed;
        left: -290px;
        top: 0;
        bottom: 0;
        width: 280px;
        height: 100vh;
        transition: left 0.25s ease;
        z-index: 999;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    }

        .customer-sidebar.mobile-open {
            left: 0;
        }

    .customer-main {
        margin-left: 0;
        width: 100%;
    }

    .customer-mobile-menu-btn {
        display: inline-block;
    }

    .customer-dashboard-grid,
    .customer-module-grid {
        grid-template-columns: 1fr;
    }

    .customer-topbar {
        height: auto;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .customer-content {
        padding: 20px;
    }
}
/* ================================
   CUSTOMER RESULT MOBILE TABLE
================================ */

@media (max-width: 768px) {
    .customer-content .table-responsive {
        overflow-x: visible;
    }

    .customer-content table {
        border: 0;
    }

        .customer-content table thead {
            display: none;
        }

        .customer-content table tbody,
        .customer-content table tr,
        .customer-content table td {
            display: block;
            width: 100%;
        }

        .customer-content table tr {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            margin-bottom: 16px;
            padding: 14px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
        }

        .customer-content table td {
            border: none !important;
            padding: 10px 0 !important;
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: center;
            font-size: 14px;
        }

            .customer-content table td::before {
                content: attr(data-label);
                font-weight: 800;
                color: #64748b;
                min-width: 95px;
                text-align: left;
            }

            .customer-content table td[data-label="İşlem"] {
                display: block;
            }

                .customer-content table td[data-label="İşlem"]::before {
                    display: block;
                    margin-bottom: 10px;
                }

    .customer-mobile-action-buttons {
        flex-direction: column;
        width: 100%;
    }

        .customer-mobile-action-buttons .btn {
            width: 100%;
            text-align: center;
        }
}
/* Customer result detail mobile fixes */
@media (max-width: 768px) {
    .customer-content .report-info-card {
        padding: 18px;
        border-radius: 18px;
    }

    .customer-content .report-info-item {
        padding: 14px;
    }

    .customer-content .admin-table-card {
        padding: 16px;
        border-radius: 18px;
    }

    .customer-content .result-badge {
        min-width: auto;
        padding: 6px 10px;
        font-size: 12px;
    }

    .customer-content .d-flex.gap-2.no-print {
        flex-direction: column;
    }

        .customer-content .d-flex.gap-2.no-print .btn {
            width: 100%;
        }
}

.customer-coming-soon-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

    .customer-coming-soon-card h3 {
        font-size: 24px;
        font-weight: 900;
        color: #0f172a;
        margin-bottom: 10px;
    }

    .customer-coming-soon-card p {
        color: #64748b;
        font-size: 15px;
        margin: 0;
    }

.customer-empty-state {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px;
    text-align: center;
    border: 1px dashed #cbd5e1;
}

    .customer-empty-state h3 {
        font-size: 24px;
        font-weight: 900;
        color: #0f172a;
        margin-bottom: 10px;
    }

    .customer-empty-state p {
        color: #64748b;
        margin: 0;
    }

.product-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.cart-product-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .cart-product-info img {
        width: 58px;
        height: 58px;
        border-radius: 14px;
        object-fit: cover;
        border: 1px solid #e5e7eb;
    }

.cart-quantity-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .cart-quantity-actions form {
        display: inline-block;
    }

    .cart-quantity-actions button {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 10px;
        background: #e2e8f0;
        color: #0f172a;
        font-weight: 900;
    }

    .cart-quantity-actions span {
        min-width: 28px;
        text-align: center;
        font-weight: 900;
    }

.cart-summary-actions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .cart-summary-actions {
        flex-direction: column;
    }

        .cart-summary-actions .btn,
        .cart-summary-actions form,
        .cart-summary-actions button {
            width: 100%;
        }

    .cart-product-info {
        justify-content: flex-end;
        text-align: right;
    }
}

.cart-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cart-count-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.customer-order-detail-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 30px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.customer-order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

    .customer-order-detail-header span {
        color: #64748b;
        font-size: 14px;
        font-weight: 700;
    }

    .customer-order-detail-header h2 {
        margin: 4px 0 0;
        font-size: 32px;
        font-weight: 900;
        color: #0f172a;
    }

.customer-order-product-area {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px;
    background: #f8fafc;
    border-radius: 20px;
    margin-bottom: 24px;
}

    .customer-order-product-area img {
        width: 120px;
        height: 120px;
        border-radius: 18px;
        object-fit: cover;
        border: 1px solid #e5e7eb;
        background: #ffffff;
    }

    .customer-order-product-area span {
        color: #2563eb;
        font-size: 13px;
        font-weight: 900;
    }

    .customer-order-product-area h3 {
        margin: 6px 0;
        color: #0f172a;
        font-size: 24px;
        font-weight: 900;
    }

    .customer-order-product-area p {
        margin: 0;
        color: #64748b;
    }

.customer-order-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.customer-order-info-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #e5e7eb;
}

    .customer-order-info-item span {
        display: block;
        color: #64748b;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 6px;
    }

    .customer-order-info-item strong {
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
    }

.customer-order-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .customer-order-detail-card {
        padding: 20px;
        border-radius: 20px;
    }

    .customer-order-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-order-product-area {
        flex-direction: column;
        align-items: flex-start;
    }

        .customer-order-product-area img {
            width: 100%;
            height: 180px;
        }

    .customer-order-info-grid {
        grid-template-columns: 1fr;
    }

    .customer-order-detail-actions {
        flex-direction: column;
    }

        .customer-order-detail-actions .btn {
            width: 100%;
        }
}
.admin-small-text {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 600;
}



.member-name-link {
    font-weight: 900;
    color: #1d4ed8 !important;
}

.cart-icon {
    font-size: 21px;
    line-height: 1;
}

.navbar-search-item {
    display: flex;
    align-items: center;
}



.navbar-search-input {
    border: none;
    outline: none;
    background: transparent;
    padding: 7px 10px;
    width: 170px;
    font-size: 14px;
}

.navbar-search-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: #1d4ed8;
    color: #ffffff;
    font-weight: 900;
}

.register-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    max-width: 950px;
    margin: 0 auto;
}

.register-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.product-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.product-cart-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #16a34a;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: 900;
    transition: 0.2s ease;
}

    .product-cart-icon-btn:hover {
        background: #15803d;
        color: #ffffff;
        transform: translateY(-2px);
    }

.product-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-list-card {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

    .product-list-card img {
        width: 100%;
        height: 210px;
        object-fit: cover;
    }

.product-list-card-body {
    padding: 22px;
}

    .product-list-card-body span {
        color: #2563eb;
        font-size: 13px;
        font-weight: 900;
    }

    .product-list-card-body h3 {
        font-size: 22px;
        font-weight: 900;
        margin: 8px 0;
        color: #0f172a;
    }

    .product-list-card-body p {
        color: #64748b;
        min-height: 48px;
    }

@media (max-width: 992px) {
    .navbar-search-form {
        width: 100%;
        margin-top: 10px;
    }

    .navbar-search-input {
        width: 100%;
    }

    .product-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .register-card {
        padding: 22px;
    }

    .register-actions .btn {
        width: 100%;
    }
}
.about-page-card {
    background: #ffffff;
    border-radius: 26px;
    padding: 36px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 32px;
    align-items: start;
}

.about-page-content h2 {
    font-size: 32px;
    font-weight: 900;
    color: #0f172a;
    margin: 12px 0 18px;
}

.about-page-content p {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 14px;
}

.about-page-info {
    display: grid;
    gap: 16px;
}

.about-info-item {
    background: #f8fafc;
    border-radius: 18px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

    .about-info-item strong {
        display: block;
        color: #0c4b3c;
        font-size: 17px;
        font-weight: 900;
        margin-bottom: 6px;
    }

    .about-info-item span {
        color: #64748b;
        font-size: 14px;
        line-height: 1.5;
    }

@media (max-width: 768px) {
    .about-page-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .about-page-content h2 {
        font-size: 26px;
    }
}
/* =========================================
   ŞIK VE TEMİZ NAVBAR
========================================= */

.top-green-line {
    height: 1px;
    background: #3e4241;
}

.custom-navbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 0;
    min-height: 68px;
}

.custom-brand-logo {
    width: 64px;
    height: 54px;
    object-fit: contain;
    background: transparent;
}

.custom-brand-text strong {
    font-size: 18px;
    font-weight: 700; /* daha ince */
    color: #0f172a;
    letter-spacing: 0.2px;
}

.custom-brand-text span {
    font-size: 11px;
    font-weight: 500; /* daha ince */
    color: #64748b;
    white-space: nowrap;
}

.custom-navbar-menu .nav-link {
    color: #1e293b !important;
    font-size: 14px;
    font-weight: 500; /* kalınlığı azalttık */
    padding: 8px 8px !important;
    white-space: nowrap;
}

.custom-search-form {
    min-width: 190px;
    height: 40px;
}

.custom-search-input {
    font-size: 13px;
}

.custom-login-link {
    font-size: 14px;
    font-weight: 500;
}

.custom-register-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
}

.custom-search-form {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    padding: 4px;
    min-width: 200px;
    height: 44px;
}

.custom-search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 8px 12px 8px 14px;
    font-size: 14px;
    color: #0f172a;
}

    .custom-search-input::placeholder {
        color: #94a3b8;
    }

.custom-search-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #2b612d;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.custom-cart-link {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    text-decoration: none;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: 0.2s ease;
}

    .custom-cart-link:hover {
        color: #0d4f40;
        background: #f8fafc;
    }

.custom-cart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #10b981;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.custom-login-link {
    text-decoration: none;
    color: #0d4f40;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .custom-login-link:hover {
        color: #0a3d31;
    }

.custom-register-btn {
    text-decoration: none;
    background: #16a34a;
    color: #ffffff !important;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

    .custom-register-btn:hover {
        background: #15803d;
        color: #ffffff !important;
    }

/* Responsive */

@media (max-width: 1200px) {
    .custom-brand-text span {
        display: none;
    }

    .custom-search-form {
        min-width: 180px;
    }

    .custom-navbar-menu {
        gap: 4px;
    }

        .custom-navbar-menu .nav-link {
            font-size: 15px;
            padding: 8px 7px !important;
        }
}

@media (max-width: 991px) {
    .custom-navbar {
        padding: 10px 0;
    }

    .custom-brand-logo {
        width: 70px;
        height: 60px;
        object-fit: contain;
    }

    .custom-brand-text strong {
        font-size: 18px;
    }

    .custom-navbar-menu {
        margin-top: 14px;
        gap: 0;
    }

        .custom-navbar-menu .nav-link {
            padding: 10px 0 !important;
        }

    .custom-navbar-actions {
        margin-top: 14px;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .custom-search-form {
        width: 100%;
        min-width: unset;
    }

    .custom-cart-link,
    .custom-login-link,
    .custom-register-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* Mobil */
@media (max-width: 991px) {
    .ervet-top-header {
        height: auto;
        padding: 8px 0;
    }

    .ervet-top-header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .ervet-top-left {
        text-align: center;
    }

    .ervet-top-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .ervet-main-menu {
        min-height: auto;
        padding: 10px 0;
    }

    .ervet-main-menu-inner {
        min-height: auto;
    }

    .ervet-big-logo-area {
        position: static;
        width: 100px;
        height: 70px;
        margin-right: 0;
    }

        .ervet-big-logo-area img {
            width: 82px;
            height: 62px;
        }

    #ervetMainNavbar {
        justify-content: flex-start;
    }

    .ervet-main-links {
        margin-left: 0;
        gap: 0;
        padding-top: 10px;
        width: 100%;
    }

        .ervet-main-links .nav-link {
            padding: 10px 0 !important;
        }
}
/* =========================================
   CLEAN ERVET NAVBAR - FINAL
========================================= */

.clean-navbar {
    background: #ffffff;
    border-top: 4px solid #0d4f40;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 0;
    min-height: 78px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.clean-navbar-container {
    display: flex;
    align-items: center;
    gap: 24px;
}

.clean-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 12px;
}

.clean-brand-logo {
    width: 66px;
    height: 58px;
    object-fit: contain;
    background: transparent !important;
}

.clean-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

    .clean-brand-text strong {
        color: #0f172a;
        font-size: 21px;
        font-weight: 800;
        letter-spacing: 0.4px;
    }

    .clean-brand-text span {
        color: #475569;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }

.clean-navbar-collapse {
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.clean-navbar-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}

    .clean-navbar-menu .nav-link {
        color: #1f2937 !important;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 13px !important;
        border-radius: 12px;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

        .clean-navbar-menu .nav-link:hover {
            background: #eaf7f0;
            color: #0d4f40 !important;
        }

.clean-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.clean-search-form {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    height: 40px;
    padding: 3px;
    min-width: 210px;
}

.clean-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 7px 10px 7px 13px;
    font-size: 13px;
    color: #0f172a;
}

    .clean-search-input::placeholder {
        color: #94a3b8;
    }

.clean-search-btn {
    width: 33px;
    height: 33px;
    border: none;
    border-radius: 50%;
    background: #0d4f40;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: 0.2s ease;
}

    .clean-search-btn:hover {
        background: #0a3d31;
    }

.clean-cart-link {
    position: relative;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    color: #1f2937;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    transition: 0.2s ease;
}

    .clean-cart-link:hover {
        background: #eaf7f0;
        color: #0d4f40;
    }

.clean-cart-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.clean-login-link {
    color: #0d4f40;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 10px;
    transition: 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .clean-login-link:hover {
        background: #eaf7f0;
        color: #0a3d31;
    }

.clean-register-btn {
    background: #16a34a;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 10px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.2s ease;
}

    .clean-register-btn:hover {
        background: #15803d;
        color: #ffffff !important;
    }

/* Küçük laptop ekranları */
@media (max-width: 1200px) {
    .clean-brand-text span {
        display: none;
    }

    .clean-search-form {
        min-width: 170px;
    }

    .clean-navbar-menu .nav-link {
        font-size: 13px;
        padding: 9px 9px !important;
    }

    .clean-navbar-container {
        gap: 14px;
    }
}

/* Mobil */
@media (max-width: 991px) {
    .clean-navbar {
        min-height: auto;
        padding: 8px 0;
    }

    .clean-navbar-container {
        align-items: center;
    }

    .clean-brand-logo {
        width: 56px;
        height: 50px;
    }

    .clean-brand-text strong {
        font-size: 18px;
    }

    .clean-brand-text span {
        display: block;
        font-size: 11px;
    }

    .clean-navbar-collapse {
        margin-top: 12px;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    }

    .clean-navbar-menu {
        align-items: stretch;
        gap: 4px;
        margin: 0 0 12px 0;
    }

        .clean-navbar-menu .nav-link {
            width: 100%;
            padding: 10px 12px !important;
        }

    .clean-navbar-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .clean-search-form {
        width: 100%;
        min-width: unset;
    }

    .clean-cart-link,
    .clean-login-link,
    .clean-register-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}
/* Mobil hamburger butonu görünür olsun */
.clean-navbar .navbar-toggler {
    border: 1px solid #0d4f40;
    padding: 6px 9px;
    border-radius: 8px;
}

    .clean-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(13, 79, 64, 0.15);
    }

.clean-navbar .navbar-toggler-icon {
    background-image: none;
    width: 24px;
    height: 18px;
    position: relative;
    display: inline-block;
}

    .clean-navbar .navbar-toggler-icon::before,
    .clean-navbar .navbar-toggler-icon::after,
    .clean-navbar .navbar-toggler-icon span {
        content: "";
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        background: #0d4f40;
        border-radius: 999px;
    }

    .clean-navbar .navbar-toggler-icon::before {
        top: 0;
    }

    .clean-navbar .navbar-toggler-icon span {
        top: 8px;
    }

    .clean-navbar .navbar-toggler-icon::after {
        top: 16px;
    }
.site-top-contact {
  
    color: #ffffff;
    font-size: 12px;
    padding: 6px 0;
}

.site-top-contact-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
}

.site-top-phone,
.site-top-email {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}
/* Mobilde üst telefon/e-posta düzeni */
@media (max-width: 768px) {
    .top-info-bar .container,
    .top-bar .container,
    .header-top .container,
    .top-contact-bar .container {
        display: flex;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px;
    }

        .top-info-bar .container > *,
        .top-bar .container > *,
        .header-top .container > *,
        .top-contact-bar .container > * {
            width: auto !important;
            text-align: left !important;
        }
}

.site-top-contact {
   
    color: #ffffff;
    font-size: 13px;
    padding: 6px 0;
}

.site-top-contact-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
}

.site-top-phone,
.site-top-email {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .site-top-contact-inner {
        justify-content: space-between;
        gap: 8px;
    }

    .site-top-phone,
    .site-top-email {
        font-size: 12px;
        white-space: nowrap;
    }

    .site-top-email {
        justify-content: flex-end;
        text-align: right;
    }
}
.product-category-section {
    padding-top: 50px;
}

.product-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.product-category-card {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.product-category-image {
    height: 210px;
    background-size: cover;
    background-position: center;
}

.product-category-body {
    padding: 24px;
}

    .product-category-body h3 {
        font-size: 22px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 10px;
    }

    .product-category-body p {
        color: #64748b;
        font-size: 15px;
        line-height: 1.6;
    }

    .product-category-body ul {
        padding-left: 18px;
        margin: 14px 0;
        color: #475569;
    }

.product-detail-link {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    color: #0d4f40;
    font-weight: 800;
    text-decoration: none;
}

    .product-detail-link:hover {
        color: #16a34a;
    }

@media (max-width: 992px) {
    .product-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.home-category-section {
    padding-top: 50px;
    padding-bottom: 60px;
}

.category-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 22px;
    height: 100%;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    transition: 0.2s ease;
}

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.1);
    }

.category-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 18px;
    background: #f8fafc;
}

.category-card h5 {
    color: #0f172a;
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 10px;
}

.category-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    min-height: 68px;
}

.category-card a {
    color: #0d4f40;
    font-weight: 800;
    text-decoration: none;
}

    .category-card a:hover {
        color: #16a34a;
    }

/* ================================
   HOME LAB SECTION
================================ */

.home-lab-section {
    padding: 70px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #eaf7f0 100%);
}

.home-lab-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.home-lab-content h2 {
    font-size: 38px;
    font-weight: 900;
    color: #0f172a;
    margin: 14px 0 18px;
    line-height: 1.2;
}

.home-lab-content p {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
    max-width: 680px;
}

.home-lab-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 26px;
}

    .home-lab-features div {
        background: #ffffff;
        border-radius: 18px;
        padding: 18px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05);
    }

    .home-lab-features strong {
        display: block;
        color: #0d4f40;
        font-size: 15px;
        font-weight: 900;
        margin-bottom: 6px;
    }

    .home-lab-features span {
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

.home-lab-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.home-lab-visual {
    position: relative;
    min-height: 360px;
}

.home-lab-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    width: 230px;
    position: absolute;
}

    .home-lab-card.large {
        width: 280px;
        min-height: 180px;
        top: 30px;
        right: 40px;
        background: #0d4f40;
        color: #ffffff;
    }

    .home-lab-card:nth-child(2) {
        top: 205px;
        right: 190px;
    }

    .home-lab-card:nth-child(3) {
        top: 230px;
        right: 0;
    }

    .home-lab-card span {
        display: block;
        color: #16a34a;
        font-size: 13px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .home-lab-card.large span {
        color: #bbf7d0;
    }

    .home-lab-card strong {
        display: block;
        color: #0f172a;
        font-size: 28px;
        font-weight: 900;
    }

    .home-lab-card.large strong {
        color: #ffffff;
        font-size: 34px;
    }

    .home-lab-card small {
        display: block;
        color: #64748b;
        margin-top: 8px;
        font-weight: 600;
    }

    .home-lab-card.large small {
        color: #d1fae5;
    }

@media (max-width: 992px) {
    .home-lab-wrapper {
        grid-template-columns: 1fr;
    }

    .home-lab-features {
        grid-template-columns: 1fr;
    }

    .home-lab-visual {
        min-height: auto;
        display: grid;
        gap: 16px;
    }

    .home-lab-card,
    .home-lab-card.large,
    .home-lab-card:nth-child(2),
    .home-lab-card:nth-child(3) {
        position: static;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .home-lab-section {
        padding: 45px 0;
    }

    .home-lab-content h2 {
        font-size: 28px;
    }

    .home-lab-actions .btn {
        width: 100%;
    }
}
/* ================================
   WHY ERVET SECTION
================================ */

.why-ervet-section {
    padding: 75px 0;
    background: #ffffff;
}

.why-ervet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 38px;
}

.why-ervet-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 28px 22px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    transition: 0.2s ease;
    height: 100%;
}

    .why-ervet-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
        border-color: #bbf7d0;
    }

.why-ervet-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #eaf7f0;
    color: #0d4f40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
}

.why-ervet-card h4 {
    font-size: 19px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 12px;
}

.why-ervet-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}
, .why-ervet-title-area {
    max-width: 850px;
    margin: 0 auto;
}

.why-ervet-logo {
    width: 120px;
    height: auto;
    object-fit: contain;
    margin-bottom: 14px;
    background: transparent;
}

@media (max-width: 992px) {
    .why-ervet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .why-ervet-section {
        padding: 50px 0;
    }

    .why-ervet-grid {
        grid-template-columns: 1fr;
    }

    .why-ervet-card {
        padding: 24px;
    }
}
/* ================================
   CONTACT PAGE
================================ */

.contact-page-section {
    padding: 70px 0;
    background: #ffffff;
}

.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 40px;
    align-items: start;
}

.contact-info-area {
    background: linear-gradient(135deg, #f8fafc 0%, #eaf7f0 100%);
    border-radius: 28px;
    padding: 38px;
    border: 1px solid #e5e7eb;
    height: 100%;
}

    .contact-info-area h2 {
        font-size: 34px;
        font-weight: 900;
        color: #0f172a;
        margin: 14px 0 16px;
    }

    .contact-info-area p {
        color: #475569;
        font-size: 16px;
        line-height: 1.8;
    }

.contact-info-list {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    border: 1px solid #e5e7eb;
}

    .contact-info-item i {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: #eaf7f0;
        color: #0d4f40;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
    }

    .contact-info-item strong {
        display: block;
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
        margin-bottom: 3px;
    }

    .contact-info-item span {
        color: #64748b;
        font-size: 14px;
    }

.contact-form-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 34px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

    .contact-form-card h3 {
        font-size: 26px;
        font-weight: 900;
        color: #0f172a;
        margin-bottom: 20px;
    }

    .contact-form-card .form-label {
        color: #334155;
        font-size: 14px;
        font-weight: 800;
    }

    .contact-form-card .form-control {
        border-radius: 14px;
        border: 1px solid #dbe3ef;
        padding: 12px 14px;
        font-size: 14px;
    }

        .contact-form-card .form-control:focus {
            border-color: #0d4f40;
            box-shadow: 0 0 0 3px rgba(13, 79, 64, 0.12);
        }

.contact-map-section {
    padding: 0 0 75px;
    background: #ffffff;
}

.contact-map-card {
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

    .contact-map-card iframe {
        display: block;
        width: 100%;
    }

@media (max-width: 992px) {
    .contact-page-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-page-section {
        padding: 45px 0;
    }

    .contact-info-area,
    .contact-form-card {
        padding: 24px;
        border-radius: 22px;
    }

        .contact-info-area h2 {
            font-size: 26px;
        }

    .contact-map-section {
        padding-bottom: 45px;
    }

    .contact-map-card iframe {
        height: 330px;
    }
}
.unread-message-row {
    background: #f0fdf4;
}

.admin-message-detail-card {
    background: #ffffff;
    border-radius: 26px;
    padding: 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.admin-message-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

    .admin-message-detail-header span {
        color: #64748b;
        font-size: 14px;
        font-weight: 700;
    }

    .admin-message-detail-header h2 {
        margin: 4px 0 0;
        font-size: 32px;
        font-weight: 900;
        color: #0f172a;
    }

.admin-message-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 24px;
}

.admin-message-info-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #e5e7eb;
}

    .admin-message-info-item span {
        display: block;
        color: #64748b;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 6px;
    }

    .admin-message-info-item strong {
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
    }

.admin-message-content {
    background: #f8fafc;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #e5e7eb;
}

    .admin-message-content span {
        display: block;
        color: #64748b;
        font-size: 13px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .admin-message-content p {
        color: #334155;
        font-size: 16px;
        line-height: 1.8;
        margin: 0;
        white-space: pre-wrap;
    }

.admin-message-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .admin-message-detail-card {
        padding: 22px;
        border-radius: 20px;
    }

    .admin-message-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-message-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-message-actions {
        flex-direction: column;
    }

        .admin-message-actions .btn {
            width: 100%;
        }
}
/* ================================
   ADMIN MESSAGE DETAIL
================================ */

.unread-message-row {
    background: #f0fdf4;
}

.admin-message-detail-card {
    background: #ffffff;
    border-radius: 26px;
    padding: 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.admin-message-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

    .admin-message-detail-header span {
        color: #64748b;
        font-size: 14px;
        font-weight: 700;
    }

    .admin-message-detail-header h2 {
        margin: 4px 0 0;
        font-size: 32px;
        font-weight: 900;
        color: #0f172a;
    }

.admin-message-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 24px;
}

.admin-message-info-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #e5e7eb;
}

    .admin-message-info-item span {
        display: block;
        color: #64748b;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 6px;
    }

    .admin-message-info-item strong {
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
    }

.admin-message-content {
    background: #f8fafc;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #e5e7eb;
}

    .admin-message-content span {
        display: block;
        color: #64748b;
        font-size: 13px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .admin-message-content p {
        color: #334155;
        font-size: 16px;
        line-height: 1.8;
        margin: 0;
        white-space: pre-wrap;
    }

.admin-message-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .admin-message-detail-card {
        padding: 22px;
        border-radius: 20px;
    }

    .admin-message-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-message-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-message-actions {
        flex-direction: column;
    }

        .admin-message-actions .btn {
            width: 100%;
        }
}
/* ================================
   HOME FINAL CTA
================================ */

.home-final-cta-section {
    padding: 75px 0;
    background: #ffffff;
}

.home-final-cta-box {
    background: linear-gradient(135deg, #0d4f40 0%, #12805f 100%);
    border-radius: 32px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 35px;
    align-items: center;
    box-shadow: 0 26px 70px rgba(13, 79, 64, 0.24);
    overflow: hidden;
    position: relative;
}

    .home-final-cta-box::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        right: -80px;
        top: -90px;
    }

    .home-final-cta-box::after {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        left: -70px;
        bottom: -80px;
    }

.home-final-cta-content,
.home-final-cta-actions {
    position: relative;
    z-index: 2;
}

.light-badge {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.home-final-cta-content h2 {
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.25;
    margin: 16px 0;
}

.home-final-cta-content p {
    color: #d1fae5;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    max-width: 760px;
}

.home-final-cta-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.cta-white-btn {
    background: #ffffff;
    color: #0d4f40;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 900;
    border: 1px solid #ffffff;
}

    .cta-white-btn:hover {
        background: #f8fafc;
        color: #0d4f40;
    }

.cta-outline-btn {
    background: transparent;
    color: #ffffff;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.75);
}

    .cta-outline-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border-color: #ffffff;
    }

@media (max-width: 992px) {
    .home-final-cta-box {
        grid-template-columns: 1fr;
        padding: 36px;
    }

    .home-final-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .home-final-cta-section {
        padding: 50px 0;
    }

    .home-final-cta-box {
        padding: 28px;
        border-radius: 24px;
    }

    .home-final-cta-content h2 {
        font-size: 26px;
    }

    .home-final-cta-actions {
        flex-direction: column;
    }

        .home-final-cta-actions .btn {
            width: 100%;
        }
}
/* ================================
   ADMIN DASHBOARD
================================ */

.admin-dashboard-section {
    padding: 70px 0;
    background: #f8fafc;
    min-height: 70vh;
}

.admin-dashboard-header {
    margin-bottom: 34px;
}

    .admin-dashboard-header h1 {
        font-size: 38px;
        font-weight: 900;
        color: #0f172a;
        margin: 14px 0 12px;
    }

    .admin-dashboard-header p {
        color: #64748b;
        font-size: 16px;
        line-height: 1.7;
        max-width: 780px;
    }

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.admin-dashboard-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    transition: 0.2s ease;
    height: 100%;
    display: block;
}

    .admin-dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.11);
        border-color: #bbf7d0;
    }

.admin-dashboard-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: #eaf7f0;
    color: #0d4f40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 18px;
}

.admin-dashboard-card h3 {
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
}

.admin-dashboard-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1200px) {
    .admin-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-dashboard-section {
        padding: 45px 0;
    }

    .admin-dashboard-header h1 {
        font-size: 30px;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }
}
.admin-card-count {
    font-size: 34px;
    font-weight: 900;
    color: #0d4f40;
    line-height: 1;
    margin-bottom: 12px;
}

.admin-dashboard-card:hover .admin-card-count {
    color: #16a34a;
}
/* ================================
   ADMIN LOGOUT BUTTON
================================ */

.admin-dashboard-header-with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-logout-btn {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 999px;
    padding: 11px 20px;
    font-weight: 900;
    white-space: nowrap;
}

    .admin-logout-btn:hover {
        background: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
    }

@media (max-width: 768px) {
    .admin-dashboard-header-with-action {
        flex-direction: column;
    }

    .admin-logout-btn {
        width: 100%;
        text-align: center;
    }
}
/* ================================
   ABOUT PAGE
================================ */

.about-hero-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #eaf7f0 100%);
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 45px;
    align-items: center;
}

.about-hero-content h1 {
    color: #0f172a;
    font-size: 44px;
    font-weight: 900;
    line-height: 1.15;
    margin: 16px 0 20px;
}

.about-hero-content p {
    color: #475569;
    font-size: 16px;
    line-height: 1.85;
    max-width: 760px;
}

.about-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.about-hero-logo-card {
    background: #ffffff;
    border-radius: 32px;
    padding: 38px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1);
    text-align: center;
}

    .about-hero-logo-card img {
        width: 160px;
        height: auto;
        object-fit: contain;
        margin-bottom: 22px;
    }

    .about-hero-logo-card h3 {
        color: #0f172a;
        font-size: 24px;
        font-weight: 900;
        margin-bottom: 12px;
    }

    .about-hero-logo-card p {
        color: #64748b;
        font-size: 15px;
        line-height: 1.7;
        margin: 0;
    }

.about-mission-section {
    padding: 70px 0;
    background: #ffffff;
}

.about-mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.about-info-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    transition: 0.2s ease;
}

    .about-info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
        border-color: #bbf7d0;
    }

.about-info-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #eaf7f0;
    color: #0d4f40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
}

.about-info-card h3 {
    color: #0f172a;
    font-size: 21px;
    font-weight: 900;
    margin-bottom: 12px;
}

.about-info-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

.about-services-section {
    padding: 75px 0;
    background: #f8fafc;
}

.about-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 38px;
}

.about-service-item {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px 22px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    height: 100%;
}

    .about-service-item i {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        background: #eaf7f0;
        color: #0d4f40;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        margin-bottom: 18px;
    }

    .about-service-item h4 {
        color: #0f172a;
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 10px;
    }

    .about-service-item p {
        color: #64748b;
        font-size: 14px;
        line-height: 1.65;
        margin: 0;
    }

.about-team-section {
    padding: 75px 0;
    background: #ffffff;
}

.about-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 38px;
}

.team-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07);
    transition: 0.2s ease;
    height: 100%;
}

    .team-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
    }

.team-photo {
    width: 100%;
    height: 250px;
    border-radius: 22px;
    overflow: hidden;
    background: #eaf7f0;
    margin-bottom: 20px;
}

    .team-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.team-info h4 {
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 6px;
}

.team-title {
    display: inline-block;
    color: #0d4f40;
    background: #eaf7f0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 18px;
}

.team-detail-list {
    display: grid;
    gap: 12px;
}

.team-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 13px 14px;
}

    .team-detail-item i {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        background: #eaf7f0;
        color: #0d4f40;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        flex-shrink: 0;
    }

    .team-detail-item small {
        display: block;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 3px;
    }

    .team-detail-item strong {
        display: block;
        color: #0f172a;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.4;
        word-break: break-word;
    }

@media (max-width: 768px) {
    .team-photo {
        height: 230px;
    }
}
.about-final-cta-section {
    padding: 75px 0;
    background: #ffffff;
}

.about-final-cta-box {
    background: linear-gradient(135deg, #0d4f40 0%, #12805f 100%);
    border-radius: 32px;
    padding: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 26px 70px rgba(13, 79, 64, 0.24);
}

    .about-final-cta-box h2 {
        color: #ffffff;
        font-size: 32px;
        font-weight: 900;
        margin: 16px 0 12px;
        line-height: 1.25;
    }

    .about-final-cta-box p {
        color: #d1fae5;
        font-size: 16px;
        line-height: 1.7;
        margin: 0;
    }

@media (max-width: 992px) {
    .about-hero-grid,
    .about-mission-grid,
    .about-services-grid,
    .about-team-grid {
        grid-template-columns: 1fr;
    }

    .about-final-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .about-hero-section,
    .about-mission-section,
    .about-services-section,
    .about-team-section,
    .about-final-cta-section {
        padding: 50px 0;
    }

    .about-hero-content h1 {
        font-size: 32px;
    }

    .about-hero-logo-card {
        padding: 28px;
        border-radius: 24px;
    }

    .about-hero-actions .btn,
    .about-final-cta-box .btn {
        width: 100%;
    }

    .team-photo {
        height: 230px;
    }

    .about-final-cta-box {
        padding: 30px;
        border-radius: 24px;
    }

        .about-final-cta-box h2 {
            font-size: 25px;
        }
}
/* ================================
   ABOUT TEAM UNIT GROUPS
================================ */

.team-unit-group {
    margin-top: 42px;
}

    .team-unit-group:first-of-type {
        margin-top: 38px;
    }

.team-unit-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eaf7f0 100%);
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 22px 24px;
    margin-bottom: 24px;
}

.team-unit-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #0d4f40;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.team-unit-header h3 {
    color: #0f172a;
    font-size: 25px;
    font-weight: 900;
    margin: 0 0 5px;
}

.team-unit-header p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.team-unit-group .about-team-grid {
    margin-top: 0;
}

@media (max-width: 768px) {
    .team-unit-header {
        align-items: flex-start;
        padding: 20px;
        border-radius: 20px;
    }

    .team-unit-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

    .team-unit-header h3 {
        font-size: 21px;
    }
}
/* ================================
   HOME PEDIGREE SEARCH
================================ */

.home-pedigree-search-section {
    padding: 45px 0 25px;
    background: #ffffff;
}

.home-pedigree-search-box {
    background: linear-gradient(135deg, #0d4f40 0%, #12805f 100%);
    border-radius: 34px;
    padding: 42px;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 34px;
    align-items: center;
    box-shadow: 0 26px 75px rgba(13, 79, 64, 0.24);
    position: relative;
    overflow: hidden;
}

    .home-pedigree-search-box::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        right: -90px;
        top: -110px;
    }

    .home-pedigree-search-box::after {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        left: -70px;
        bottom: -80px;
    }

.home-pedigree-search-content,
.home-pedigree-search-form {
    position: relative;
    z-index: 2;
}

    .home-pedigree-search-content h2 {
        color: #ffffff;
        font-size: 34px;
        font-weight: 900;
        line-height: 1.25;
        margin: 16px 0 12px;
    }

    .home-pedigree-search-content p {
        color: #d1fae5;
        font-size: 15px;
        line-height: 1.8;
        margin: 0;
    }

.home-pedigree-search-form {
    background: #ffffff;
    border-radius: 999px;
    padding: 8px;
    display: flex;
    gap: 8px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

.home-pedigree-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 13px 18px;
    border-radius: 999px;
    font-size: 14px;
    color: #0f172a;
}

.home-pedigree-search-button {
    border: none;
    background: #0d4f40;
    color: #ffffff;
    border-radius: 999px;
    padding: 13px 26px;
    font-weight: 900;
    white-space: nowrap;
}

    .home-pedigree-search-button:hover {
        background: #16a34a;
    }

@media (max-width: 992px) {
    .home-pedigree-search-box {
        grid-template-columns: 1fr;
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .home-pedigree-search-section {
        padding: 30px 0 20px;
    }

    .home-pedigree-search-box {
        border-radius: 24px;
        padding: 26px;
    }

    .home-pedigree-search-content h2 {
        font-size: 25px;
    }

    .home-pedigree-search-form {
        border-radius: 22px;
        flex-direction: column;
        padding: 10px;
    }

    .home-pedigree-search-button {
        width: 100%;
    }
}
/* ================================
   PEDIGREE PAGES
================================ */

.pedigree-page-hero {
    padding: 90px 0;
    background: linear-gradient(135deg, #0d4f40 0%, #12805f 100%);
}

.pedigree-page-box {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

    .pedigree-page-box h1 {
        font-size: 44px;
        font-weight: 900;
        line-height: 1.15;
        margin: 18px 0;
    }

    .pedigree-page-box p {
        color: #d1fae5;
        font-size: 16px;
        line-height: 1.8;
        max-width: 760px;
        margin: 0 auto;
    }

.pedigree-main-search-form {
    margin: 34px auto 0;
    max-width: 760px;
    background: #ffffff;
    border-radius: 999px;
    padding: 8px;
    display: flex;
    gap: 8px;
    box-shadow: 0 24px 65px rgba(15, 23, 42, 0.22);
}

.pedigree-main-search-input {
    flex: 1;
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 14px 20px;
    font-size: 15px;
    color: #0f172a;
}

.pedigree-main-search-button {
    border: none;
    background: #0d4f40;
    color: #ffffff;
    border-radius: 999px;
    padding: 14px 30px;
    font-weight: 900;
}

    .pedigree-main-search-button:hover {
        background: #16a34a;
    }

.pedigree-result-section,
.pedigree-detail-section {
    padding: 75px 0;
    background: #f8fafc;
}

.pedigree-result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 35px;
}

.pedigree-result-card {
    background: #ffffff;
    border-radius: 28px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    display: grid;
    grid-template-columns: 230px 1fr;
    transition: 0.2s ease;
}

    .pedigree-result-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
    }

.pedigree-result-image {
    background: #eaf7f0;
    min-height: 260px;
}

    .pedigree-result-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pedigree-result-content {
    padding: 24px;
}

.pedigree-result-top span {
    display: inline-block;
    background: #eaf7f0;
    color: #0d4f40;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 12px;
}

.pedigree-result-content h3 {
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 16px;
}

.pedigree-result-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

    .pedigree-result-meta div {
        background: #f8fafc;
        border-radius: 14px;
        padding: 11px;
        border: 1px solid #e5e7eb;
    }

    .pedigree-result-meta small {
        display: block;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 4px;
    }

    .pedigree-result-meta strong {
        display: block;
        color: #0f172a;
        font-size: 13px;
        font-weight: 900;
    }

.pedigree-result-content p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.pedigree-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}

    .pedigree-detail-header h1 {
        color: #0f172a;
        font-size: 42px;
        font-weight: 900;
        margin: 14px 0 12px;
    }

    .pedigree-detail-header p {
        color: #64748b;
        font-size: 16px;
        line-height: 1.8;
        max-width: 820px;
        margin: 0;
    }

.pedigree-detail-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 28px;
    align-items: start;
}

.pedigree-detail-image-card,
.pedigree-detail-info-card,
.pedigree-section-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 26px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.07);
}

    .pedigree-detail-image-card img {
        width: 100%;
        min-height: 360px;
        max-height: 520px;
        object-fit: cover;
        border-radius: 22px;
        background: #eaf7f0;
    }

    .pedigree-detail-info-card h3,
    .pedigree-section-title h3 {
        color: #0f172a;
        font-size: 24px;
        font-weight: 900;
        margin-bottom: 18px;
    }

.pedigree-section-title p {
    color: #64748b;
    margin: -8px 0 20px;
    font-size: 14px;
}

.pedigree-info-grid,
.pedigree-performance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

    .pedigree-info-grid div,
    .pedigree-performance-grid div {
        background: #f8fafc;
        border-radius: 16px;
        padding: 16px;
        border: 1px solid #e5e7eb;
    }

    .pedigree-info-grid span,
    .pedigree-performance-grid span {
        display: block;
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
        margin-bottom: 6px;
    }

    .pedigree-info-grid strong,
    .pedigree-performance-grid strong {
        display: block;
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
        word-break: break-word;
    }

.pedigree-section-card {
    margin-top: 28px;
}

@media (max-width: 1200px) {
    .pedigree-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .pedigree-detail-grid {
        grid-template-columns: 1fr;
    }

    .pedigree-info-grid,
    .pedigree-performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pedigree-detail-header {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .pedigree-page-hero {
        padding: 60px 0;
    }

    .pedigree-page-box h1 {
        font-size: 31px;
    }

    .pedigree-main-search-form {
        border-radius: 22px;
        flex-direction: column;
        padding: 10px;
    }

    .pedigree-main-search-button {
        width: 100%;
    }

    .pedigree-result-section,
    .pedigree-detail-section {
        padding: 50px 0;
    }

    .pedigree-result-card {
        grid-template-columns: 1fr;
    }

    .pedigree-result-image {
        height: 240px;
    }

    .pedigree-result-meta,
    .pedigree-info-grid,
    .pedigree-performance-grid {
        grid-template-columns: 1fr;
    }

    .pedigree-detail-header h1 {
        font-size: 31px;
    }

    .pedigree-detail-image-card,
    .pedigree-detail-info-card,
    .pedigree-section-card {
        padding: 20px;
        border-radius: 22px;
    }

        .pedigree-detail-image-card img {
            min-height: 260px;
        }
}
/* ================================
   ADMIN PEDIGREE
================================ */

.admin-pedigree-thumb {
    width: 70px;
    height: 55px;
    object-fit: cover;
    border-radius: 12px;
    background: #eaf7f0;
    border: 1px solid #e5e7eb;
}
/* ================================
   ADMIN FORM
================================ */

.admin-form-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.admin-form-section-title {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

    .admin-form-section-title h3 {
        color: #0f172a;
        font-size: 20px;
        font-weight: 900;
        margin: 0;
    }

.admin-form-card .form-label {
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.admin-form-card .form-control {
    border-radius: 14px;
    border: 1px solid #dbe3ef;
    padding: 12px 14px;
    font-size: 14px;
}

    .admin-form-card .form-control:focus {
        border-color: #0d4f40;
        box-shadow: 0 0 0 3px rgba(13, 79, 64, 0.12);
    }

.admin-form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 28px;
}

@media (max-width: 768px) {
    .admin-form-card {
        padding: 22px;
        border-radius: 22px;
    }

    .admin-form-actions {
        flex-direction: column;
    }

        .admin-form-actions .btn {
            width: 100%;
        }
}

.admin-delete-btn {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 900;
    font-size: 14px;
}

    .admin-delete-btn:hover {
        background: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
    }

/* ================================
   PEDIGREE FILTERS
================================ */

.pedigree-filter-search-form {
    max-width: 950px;
}

.pedigree-main-search-select {
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 14px 16px;
    font-size: 14px;
    color: #0f172a;
    min-width: 190px;
    background: #f8fafc;
}

.pedigree-result-filter-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 16px;
    display: grid;
    grid-template-columns: 240px 1fr auto;
    gap: 12px;
    margin: 24px 0 8px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
}

.pedigree-result-filter-select,
.pedigree-result-filter-input {
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    padding: 13px 16px;
    font-size: 14px;
    outline: none;
}

    .pedigree-result-filter-select:focus,
    .pedigree-result-filter-input:focus {
        border-color: #0d4f40;
        box-shadow: 0 0 0 3px rgba(13, 79, 64, 0.12);
    }

.pedigree-result-filter-button {
    border: none;
    background: #0d4f40;
    color: #ffffff;
    border-radius: 999px;
    padding: 13px 24px;
    font-weight: 900;
}

    .pedigree-result-filter-button:hover {
        background: #16a34a;
    }

@media (max-width: 768px) {
    .pedigree-main-search-select {
        width: 100%;
        border-radius: 14px;
    }

    .pedigree-result-filter-form {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .pedigree-result-filter-select,
    .pedigree-result-filter-input,
    .pedigree-result-filter-button {
        width: 100%;
        border-radius: 14px;
    }
}