* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f7f3ea;
    color: #303329;
    line-height: 1.6;
}


body.no-scroll {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea {
    font: inherit;
}


button {
    border: none;
}


img {
    display: block;
    max-width: 100%;
}


.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}


/* HEADER */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        rgba(255, 253, 247, 0.96);

    backdrop-filter: blur(12px);

    border-bottom:
        1px solid #e5dfd3;

    box-shadow:
        0 5px 25px
        rgba(55, 50, 40, 0.05);
}


.navbar {
    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.logo img {
    width: 125px;
    height: 85px;
    object-fit: contain;
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 27px;
}


.nav-links a {
    font-size: 15px;
    font-weight: 600;
    color: #55594e;
    transition: 0.25s;
}


.nav-links a:hover {
    color: #647b43;
}



/* SEPET */

.cart-button {
    padding: 12px 18px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 30px;

    background: #506239;

    color: white;

    font-weight: bold;

    cursor: pointer;

    transition: 0.25s;
}


.cart-button:hover {
    background: #3e4d2c;
    transform: translateY(-2px);
}


.cart-button span {
    min-width: 24px;
    height: 24px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: white;

    color: #506239;

    font-size: 12px;
}



/* HERO */

.hero {
    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            #e2ddc4 0,
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #fbf8f0,
            #efe5d4
        );
}


.hero-content {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items: center;

    gap: 70px;

    padding: 80px 0;
}


.hero-badge {
    display: inline-block;

    padding: 8px 15px;

    margin-bottom: 22px;

    border-radius: 30px;

    background: #e3e9d6;

    color: #53633f;

    font-size: 13px;

    font-weight: bold;
}


.hero-text h1 {
    margin-bottom: 24px;

    font-size: 62px;

    line-height: 1.05;

    letter-spacing: -2px;

    color: #30372a;
}


.hero-text h1 span {
    display: block;
    color: #71864c;
}


.hero-text > p {
    max-width: 600px;

    margin-bottom: 30px;

    color: #6d6c64;

    font-size: 18px;
}


.hero-buttons {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin-bottom: 42px;
}


.primary-button,
.secondary-button {
    min-height: 51px;

    padding: 0 24px;

    border-radius: 30px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    transition: 0.25s;
}


.primary-button {
    background: #506239;
    color: white;
}


.primary-button:hover {
    background: #3e4d2c;
    transform: translateY(-2px);
}


.secondary-button {
    border: 1px solid #bcb6a9;

    background:
        rgba(255, 255, 255, 0.5);
}


.secondary-button:hover {
    background: white;
}


.hero-features {
    display: flex;
    gap: 45px;
}


.hero-features div {
    display: flex;
    flex-direction: column;
}


.hero-features strong {
    color: #485637;
    font-size: 19px;
}


.hero-features span {
    color: #85837b;
    font-size: 13px;
}


.hero-image {
    position: relative;
    height: 520px;
}


.hero-image > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius:
        35px 35px 110px 35px;

    box-shadow:
        0 30px 70px
        rgba(66, 60, 46, 0.18);
}


.hero-card {
    position: absolute;

    left: -35px;

    bottom: 30px;

    background: white;

    padding: 18px 22px;

    border-radius: 20px;

    box-shadow:
        0 16px 50px
        rgba(0, 0, 0, 0.15);
}


.hero-card div {
    display: flex;
    flex-direction: column;
}


.hero-card small {
    color: #85837b;
}



/* BÖLÜM BAŞLIKLARI */

.section-title {
    max-width: 680px;

    margin:
        0 auto 55px;

    text-align: center;
}


.section-title > span,
.section-label {
    font-size: 12px;

    letter-spacing: 2px;

    font-weight: bold;

    color: #768a50;
}


.section-title h2,
.about-text h2,
.contact-box h2 {
    margin:
        12px 0 17px;

    font-size: 42px;

    line-height: 1.15;

    color: #343a2f;
}


.section-title p {
    font-size: 17px;
    color: #79776f;
}



/* ÜRÜNLER */

.products-section {
    padding: 105px 0;

    background: #fffdf8;
}


.product-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 30px;
}


.product-card {
    overflow: hidden;

    border-radius: 26px;

    background: white;

    border:
        1px solid #ebe4d9;

    box-shadow:
        0 10px 35px
        rgba(60, 55, 45, 0.08);

    transition: 0.3s;
}


.product-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px
        rgba(60, 55, 45, 0.14);
}


.product-image {
    position: relative;

    height: 340px;

    overflow: hidden;
}


.product-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.4s;
}


.product-card:hover
.product-image img {
    transform: scale(1.04);
}


.product-badge {
    position: absolute;

    top: 17px;

    left: 17px;

    background:
        rgba(255, 255, 255, 0.93);

    padding: 7px 12px;

    border-radius: 20px;

    color: #53633d;

    font-size: 11px;

    font-weight: bold;
}


.product-info {
    padding: 25px;
}


.product-category {
    color: #788d50;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.product-info h3 {
    margin: 6px 0 8px;

    font-size: 23px;

    color: #3c4236;
}


.product-info > p {
    min-height: 50px;

    color: #7e7c74;

    font-size: 14px;
}


.product-bottom {
    margin-top: 20px;

    padding-top: 18px;

    border-top:
        1px solid #ece7dd;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;
}


.product-weight {
    display: block;

    color: #88857d;

    font-size: 13px;
}


.product-price {
    display: block;

    color: #6e8349;

    font-size: 23px;
}


.product-button {
    background: #506239;

    color: white;

    padding: 12px 18px;

    border-radius: 24px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.25s;
}


.product-button:hover {
    background: #3e4d2c;
}



/* =====================================
   VİDEOLAR
===================================== */

.video-section {
    padding: 105px 0;

    background: #f7f3ea;
}


.video-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 26px;
}


.video-card {
    overflow: hidden;

    border-radius: 26px;

    background: white;

    border:
        1px solid #e9e2d6;

    box-shadow:
        0 12px 35px
        rgba(60, 55, 45, 0.08);

    transition: 0.3s;
}


.video-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px
        rgba(60, 55, 45, 0.14);
}


.video-card video {
    width: 100%;

    height: 430px;

    display: block;

    object-fit: cover;

    background: #292d27;
}


.video-info {
    padding: 22px;
}


.video-info > span {
    display: inline-block;

    margin-bottom: 6px;

    color: #788d50;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1.5px;
}


.video-info h3 {
    margin-bottom: 8px;

    color: #3c4236;

    font-size: 21px;
}


.video-info p {
    color: #7c7a72;

    font-size: 14px;
}



/* HAKKIMIZDA */

.about-section {
    padding: 110px 0;

    background: #f2ede3;
}


.about-content {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


.about-image {
    height: 520px;
}


.about-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius:
        35px 110px 35px 35px;

    box-shadow:
        0 25px 55px
        rgba(75, 65, 48, 0.15);
}


.about-text > p {
    margin-bottom: 18px;

    color: #6e6d65;
}


.about-points {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

    margin-top: 28px;
}


.about-points div {
    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;
}


.about-points span {
    width: 29px;

    height: 29px;

    border-radius: 50%;

    background: #dfe6d2;

    color: #5e733f;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}



/* İLETİŞİM */

.contact-section {
    padding: 90px 0;

    background: #fffdf8;
}


.contact-box {
    padding: 55px 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

    border-radius: 30px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #465539,
            #33422b
        );
}


.contact-box h2 {
    color: white;
}


.contact-box p {
    color: #e2e7dc;
}


.contact-box .section-label {
    color: #dce7bf;
}


.whatsapp-button {
    flex-shrink: 0;

    padding: 15px 24px;

    background: white;

    color: #455637;

    border-radius: 30px;

    font-weight: bold;
}



/* FOOTER */

.footer {
    padding: 35px 0;

    background: #282f24;

    color: white;
}


.footer-content {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;
}


.footer-logo {
    display: flex;

    align-items: center;

    gap: 15px;
}


.footer-logo img {
    width: 90px;

    height: 70px;

    object-fit: contain;
}


.footer-logo p,
.footer-content > p {
    color: #bfc2ba;

    font-size: 12px;
}



/* MODALLAR */

.product-modal,
.checkout-modal {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 3000;
}


.product-modal.active,
.checkout-modal.active {
    display: block;
}


.modal-background {
    position: absolute;

    inset: 0;

    background:
        rgba(20, 24, 18, 0.67);

    backdrop-filter: blur(5px);
}


.modal-box,
.checkout-box {
    position: absolute;

    left: 50%;

    top: 50%;

    width: 90%;

    max-height: 90vh;

    overflow: auto;

    transform:
        translate(-50%, -50%);

    background: #fffdf8;

    border-radius: 28px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.3);
}


.modal-box {
    max-width: 900px;
}


.checkout-box {
    max-width: 720px;

    padding: 42px;
}


.modal-close {
    position: absolute;

    right: 17px;

    top: 17px;

    z-index: 5;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: white;

    font-size: 28px;

    cursor: pointer;

    box-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.12);
}


.modal-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;
}


.modal-image {
    min-height: 550px;
}


.modal-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
}


.modal-info {
    padding: 55px 45px;
}


.modal-category {
    color: #788d50;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.modal-info h2 {
    margin: 10px 0 17px;

    font-size: 36px;

    line-height: 1.15;
}


.modal-info p {
    margin-bottom: 18px;

    color: #747269;
}


.modal-weight {
    display: block;

    color: #88857c;
}


.modal-price {
    display: block;

    margin: 4px 0 28px;

    color: #6e8349;

    font-size: 30px;
}


.quantity-title {
    margin-bottom: 9px;

    font-weight: bold;
}


.quantity-selector {
    width: fit-content;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid #ddd6ca;

    border-radius: 25px;

    margin-bottom: 25px;
}


.quantity-selector button {
    width: 45px;

    height: 42px;

    background: #f0ece4;

    font-size: 22px;

    cursor: pointer;
}


.quantity-selector span {
    min-width: 52px;

    text-align: center;

    font-weight: bold;
}


.add-cart-button {
    width: 100%;

    padding: 16px;

    border-radius: 28px;

    background: #506239;

    color: white;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;
}



/* SEPET DRAWER */

.cart-panel {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 4000;
}


.cart-panel.active {
    display: block;
}


.cart-background {
    position: absolute;

    inset: 0;

    background:
        rgba(20, 24, 18, 0.6);

    backdrop-filter: blur(4px);
}


.cart-drawer {
    position: absolute;

    top: 0;

    right: 0;

    width: 430px;

    max-width: 92%;

    height: 100%;

    background: #fffdf8;

    display: flex;

    flex-direction: column;

    box-shadow:
        -15px 0 50px
        rgba(0, 0, 0, 0.25);
}


.cart-header {
    padding: 24px;

    border-bottom:
        1px solid #e8e2d7;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.cart-header small {
    color: #788d50;

    font-weight: bold;
}


.cart-header h2 {
    font-size: 28px;
}


.cart-header button {
    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #ebe7de;

    font-size: 26px;

    cursor: pointer;
}


.cart-items {
    flex: 1;

    overflow-y: auto;

    padding: 20px;
}


.empty-cart {
    min-height: 300px;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #807e75;
}


.empty-cart h3 {
    color: #44493d;
}


.cart-item {
    position: relative;

    display: grid;

    grid-template-columns:
        90px 1fr;

    gap: 14px;

    padding-bottom: 17px;

    margin-bottom: 17px;

    border-bottom:
        1px solid #ebe5da;
}


.cart-item > img {
    width: 90px;

    height: 90px;

    object-fit: cover;

    border-radius: 14px;
}


.cart-item-info h4 {
    padding-right: 25px;

    color: #3d4337;
}


.cart-item-info > span {
    font-size: 12px;

    color: #89867d;
}


.cart-item-controls {
    margin-top: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.mini-quantity {
    display: flex;

    align-items: center;

    gap: 9px;
}


.mini-quantity button {
    width: 29px;

    height: 29px;

    border-radius: 50%;

    background: #ece8df;

    cursor: pointer;
}


.delete-item {
    position: absolute;

    right: 0;

    top: -3px;

    background: transparent;

    font-size: 22px;

    color: #98968f;

    cursor: pointer;
}


.cart-footer {
    padding: 22px;

    background: white;

    border-top:
        1px solid #e8e2d7;
}


.cart-total {
    display: flex;

    justify-content: space-between;

    margin-bottom: 17px;

    font-size: 19px;
}


.cart-total strong {
    color: #647b43;
}


.checkout-button {
    width: 100%;

    padding: 16px;

    border-radius: 28px;

    background: #506239;

    color: white;

    font-weight: bold;

    cursor: pointer;
}


.checkout-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}



/* CHECKOUT */

.checkout-heading {
    padding-right: 45px;

    margin-bottom: 28px;
}


.checkout-heading h2 {
    margin: 8px 0;

    font-size: 34px;

    color: #343a2f;
}


.checkout-heading p {
    color: #77756d;
}


.form-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;
}


.checkout-box label {
    display: block;

    margin-bottom: 16px;
}


.checkout-box label > span {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: bold;

    color: #4e5347;
}


.checkout-box input,
.checkout-box textarea {
    width: 100%;

    border:
        1px solid #ddd6ca;

    border-radius: 14px;

    padding: 13px 14px;

    background: white;

    color: #303329;

    outline: none;

    resize: vertical;
}


.checkout-box input:focus,
.checkout-box textarea:focus {
    border-color: #788d50;

    box-shadow:
        0 0 0 3px
        rgba(120, 141, 80, 0.12);
}



/* TESLİMAT - ÖDEME */

.checkout-section {
    margin: 8px 0 24px;
}


.checkout-section-title {
    display: block;

    margin-bottom: 10px;

    font-size: 13px;

    font-weight: bold;

    color: #4e5347;
}


.option-card {
    position: relative;

    display: flex !important;

    align-items: center;

    gap: 12px;

    margin-bottom:
        10px !important;

    padding: 14px 15px;

    border:
        1px solid #ddd6ca;

    border-radius: 16px;

    background: white;
}


.option-card input {
    width: auto !important;

    margin: 0;

    accent-color: #506239;
}


.option-card > div {
    display: flex;

    flex-direction: column;

    flex: 1;
}


.option-card strong {
    color: #3d4337;
}


.option-card small {
    color: #85827a;
}


.active-option {
    border-color: #98a77e;

    background: #f7faf2;
}


.disabled-option {
    opacity: 0.65;

    cursor: not-allowed;
}


.status-badge {
    flex-shrink: 0;

    padding: 5px 9px;

    border-radius: 20px;

    background: #ece8df;

    color: #77736c;

    font-size: 11px;

    font-weight: bold;
}


.status-badge.active {
    background: #e1ead4;

    color: #506239;
}



/* BANKA */

.bank-box {
    margin: 12px 0 16px;

    padding: 18px;

    border-radius: 18px;

    background: #f2eee5;

    border:
        1px solid #dfd8ca;
}


.bank-box > div {
    display: flex;

    flex-direction: column;

    margin-bottom: 12px;
}


.bank-box span {
    font-size: 12px;

    color: #7c7971;
}


.bank-box strong {
    color: #3d4337;

    word-break: break-word;
}


.copy-iban-button {
    padding: 11px 15px;

    border-radius: 22px;

    background: #506239;

    color: white;

    font-weight: bold;

    cursor: pointer;

    margin-bottom: 8px;
}


.bank-note {
    display: block;

    color: #7b786f;
}



/* CHECKOUT TOPLAM */

.checkout-summary {
    display: block;

    padding: 18px 0;

    margin-top: 4px;

    border-top:
        1px solid #e9e3d8;
}


.checkout-summary > div {
    display: flex;

    justify-content: space-between;

    align-items: center;
}


.checkout-summary strong {
    color: #647b43;

    font-size: 22px;
}


.checkout-summary > small {
    display: block;

    margin-top: 6px;

    color: #85827a;
}


.whatsapp-submit-button {
    width: 100%;

    padding: 16px;

    border-radius: 28px;

    background: #506239;

    color: white;

    font-weight: bold;

    cursor: pointer;

    transition: 0.25s;
}


.whatsapp-submit-button:hover {
    background: #3e4d2c;
}



/* TABLET */

@media (max-width: 950px) {

    .nav-links {
        display: none;
    }


    .hero-content,
    .about-content {
        grid-template-columns: 1fr;
    }


    .hero-text h1 {
        font-size: 52px;
    }


    .hero-image {
        max-width: 650px;

        width: 100%;

        margin: auto;
    }


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

}



/* TELEFON */

@media (max-width: 700px) {

    .container {
        width: 92%;
    }


    .navbar {
        min-height: 80px;
    }


    .logo img {
        width: 95px;

        height: 65px;
    }


    .cart-button {
        padding: 10px 13px;

        font-size: 12px;
    }


    .hero {
        min-height: auto;
    }


    .hero-content {
        padding: 55px 0;

        gap: 45px;
    }


    .hero-text h1 {
        font-size: 41px;

        letter-spacing: -1px;
    }


    .hero-features {
        gap: 25px;

        flex-wrap: wrap;
    }


    .hero-image {
        height: 400px;
    }


    .hero-card {
        left: 15px;

        right: 15px;
    }


    .product-grid {
        grid-template-columns: 1fr;
    }


    .products-section,
    .video-section,
    .about-section {
        padding: 75px 0;
    }


    .video-grid {
        grid-template-columns: 1fr;
    }


    .video-card video {
        height: 520px;
    }


    .section-title h2,
    .about-text h2,
    .contact-box h2 {
        font-size: 32px;
    }


    .about-image {
        height: 400px;
    }


    .about-points {
        grid-template-columns: 1fr;
    }


    .contact-box {
        padding: 38px 25px;

        flex-direction: column;

        align-items: flex-start;
    }


    .footer-content {
        flex-direction: column;

        align-items: flex-start;
    }


    .modal-grid {
        grid-template-columns: 1fr;
    }


    .modal-image {
        min-height: auto;

        height: 310px;
    }


    .modal-info {
        padding: 32px 25px;
    }


    .modal-info h2 {
        font-size: 29px;
    }


    .checkout-box {
        padding: 32px 22px 24px;
    }


    .form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .checkout-heading h2 {
        font-size: 29px;
    }


    .option-card {
        align-items: flex-start;
    }

}
/* =====================================
   ÜRÜN DETAY - İÇİNDEKİLER
===================================== */

.modal-description {
    margin-bottom: 22px !important;
}


.product-detail-box {
    margin-bottom: 14px;

    padding: 15px 17px;

    border-radius: 16px;

    background: #f4f0e8;

    border:
        1px solid #e5ded1;
}


.detail-title {
    display: block;

    margin-bottom: 5px;

    color: #506239;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.product-detail-box p {
    margin: 0;

    color: #5e6058;

    font-size: 14px;

    line-height: 1.6;
}


.allergen-box {
    background: #faf4e8;

    border-color: #eadfc8;
}


.allergen-box .detail-title {
    color: #80652f;
}


.modal-product-meta {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin:
        20px 0 25px;
}


.modal-product-meta > div {
    padding: 12px 14px;

    border-radius: 14px;

    background: white;

    border:
        1px solid #e4ded3;
}


.modal-product-meta span {
    display: block;

    margin-bottom: 3px;

    color: #89867d;

    font-size: 11px;
}


.modal-product-meta strong {
    color: #465238;

    font-size: 17px;
}


.modal-product-meta .modal-price {
    display: block;

    margin: 0;

    font-size: 21px;

    color: #6e8349;
}


@media (max-width: 700px) {

    .modal-product-meta {
        grid-template-columns:
            1fr 1fr;
    }

}
/* =====================================================
   ÇINAR SOFRASI - MOBİL PROFESYONELLEŞTİRME
   BU KISMI STYLE.CSS DOSYASININ EN ALTINA EKLE
===================================================== */


/* =========================
   TABLET
========================= */

@media (max-width: 950px) {

    .container {
        width: 92%;
    }


    /* HEADER */

    .navbar {
        min-height: 85px;
        gap: 15px;
    }


    .logo img {
        width: 105px;
        height: 72px;
    }


    .nav-links {
        display: none;
    }


    .cart-button {
        padding: 11px 16px;
    }


    /* HERO */

    .hero {
        min-height: auto;
    }


    .hero-content {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 65px 0;
    }


    .hero-text {
        text-align: center;
    }


    .hero-text h1 {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        font-size: 52px;
    }


    .hero-text > p {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-buttons {
        justify-content: center;
    }


    .hero-features {
        justify-content: center;
    }


    .hero-image {
        width: 100%;
        max-width: 650px;
        height: 500px;
        margin: 0 auto;
    }


    .hero-card {
        left: 20px;
        bottom: 20px;
    }


    /* ÜRÜNLER */

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


    /* VİDEOLAR */

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


    /* HAKKIMIZDA */

    .about-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .about-image {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }


    /* İLETİŞİM */

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

}



/* =========================
   TELEFON
========================= */

@media (max-width: 700px) {

    body {
        overflow-x: hidden;
    }


    .container {
        width: 92%;
    }


    /* =====================
       HEADER
    ===================== */

    .header {
        position: sticky;
        top: 0;
    }


    .navbar {
        min-height: 74px;
        gap: 8px;
    }


    .logo img {
        width: 88px;
        height: 60px;
    }


    .cart-button {
        padding: 9px 12px;
        font-size: 12px;
        gap: 6px;
    }


    .cart-button span {
        min-width: 21px;
        height: 21px;
        font-size: 11px;
    }


    /* =====================
       HERO
    ===================== */

    .hero-content {
        padding: 42px 0 55px;
        gap: 35px;
    }


    .hero-text {
        text-align: left;
    }


    .hero-badge {
        padding: 7px 11px;
        font-size: 11px;
        margin-bottom: 18px;
    }


    .hero-text h1 {
        font-size: 39px;
        line-height: 1.07;
        letter-spacing: -1px;
        text-align: left;
    }


    .hero-text > p {
        font-size: 15px;
        line-height: 1.7;
    }


    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .primary-button,
    .secondary-button {
        width: 100%;
        min-height: 48px;
    }


    .hero-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }


    .hero-features div {
        padding: 12px 7px;
        text-align: center;
        border-radius: 14px;
        background: rgba(255,255,255,0.45);
    }


    .hero-features strong {
        font-size: 15px;
    }


    .hero-features span {
        font-size: 10px;
    }


    .hero-image {
        height: 390px;
    }


    .hero-image > img {
        border-radius: 24px 24px 65px 24px;
    }


    .hero-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 14px 16px;
        border-radius: 16px;
    }


    .hero-card strong {
        font-size: 14px;
    }


    .hero-card small {
        font-size: 11px;
    }


    /* =====================
       BÖLÜM BAŞLIKLARI
    ===================== */

    .section-title {
        margin-bottom: 35px;
    }


    .section-title h2,
    .about-text h2,
    .contact-box h2 {
        font-size: 30px;
        line-height: 1.18;
    }


    .section-title p {
        font-size: 14px;
    }


    /* =====================
       ÜRÜNLER
    ===================== */

    .products-section {
        padding: 70px 0;
    }


    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .product-card {
        border-radius: 22px;
    }


    .product-image {
        height: 310px;
    }


    .product-info {
        padding: 20px;
    }


    .product-info h3 {
        font-size: 21px;
    }


    .product-info > p {
        min-height: auto;
        font-size: 13px;
    }


    .product-bottom {
        align-items: center;
    }


    .product-price {
        font-size: 21px;
    }


    .product-button {
        padding: 11px 15px;
        font-size: 12px;
    }


    /* =====================
       VİDEOLAR
    ===================== */

    .video-section {
        padding: 70px 0;
    }


    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .video-card {
        border-radius: 22px;
    }


    .video-card video {
        width: 100%;
        height: auto;
        max-height: 580px;
        aspect-ratio: 9 / 16;
        object-fit: cover;
    }


    .video-info {
        padding: 18px;
    }


    .video-info h3 {
        font-size: 19px;
    }


    .video-info p {
        font-size: 13px;
    }


    /* =====================
       HAKKIMIZDA
    ===================== */

    .about-section {
        padding: 70px 0;
    }


    .about-content {
        gap: 35px;
    }


    .about-image {
        height: 380px;
    }


    .about-image img {
        border-radius: 24px 70px 24px 24px;
    }


    .about-text > p {
        font-size: 14px;
    }


    .about-points {
        grid-template-columns: 1fr;
    }


    /* =====================
       İLETİŞİM
    ===================== */

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


    .contact-box {
        padding: 32px 22px;
        border-radius: 24px;
        gap: 25px;
    }


    .contact-box p {
        font-size: 14px;
    }


    .whatsapp-button {
        width: 100%;
        text-align: center;
    }


    /* =====================
       ÜRÜN DETAY MODALI
    ===================== */

    .modal-box {
        width: 94%;
        max-height: 94vh;
        border-radius: 22px;
    }


    .modal-grid {
        grid-template-columns: 1fr;
    }


    .modal-image {
        min-height: 0;
        height: 280px;
    }


    .modal-image img {
        object-fit: cover;
    }


    .modal-info {
        padding: 27px 20px 25px;
    }


    .modal-info h2 {
        font-size: 27px;
        padding-right: 20px;
    }


    .modal-description {
        font-size: 14px;
    }


    .product-detail-box {
        padding: 13px 14px;
        border-radius: 14px;
    }


    .product-detail-box p {
        font-size: 13px;
    }


    .modal-product-meta {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }


    .modal-product-meta > div {
        padding: 11px;
    }


    .modal-product-meta strong {
        font-size: 15px;
    }


    .modal-product-meta .modal-price {
        font-size: 18px;
    }


    .quantity-selector {
        margin-bottom: 18px;
    }


    .add-cart-button {
        padding: 14px;
    }


    /* =====================
       SEPET
    ===================== */

    .cart-drawer {
        width: 100%;
        max-width: 100%;
    }


    .cart-header {
        padding: 19px;
    }


    .cart-header h2 {
        font-size: 24px;
    }


    .cart-items {
        padding: 15px;
    }


    .cart-item {
        grid-template-columns: 75px 1fr;
        gap: 11px;
    }


    .cart-item > img {
        width: 75px;
        height: 75px;
    }


    .cart-item-info h4 {
        font-size: 14px;
    }


    .cart-item-controls strong {
        font-size: 13px;
    }


    .cart-footer {
        padding: 17px;
    }


    /* =====================
       TESLİMAT & ÖDEME
    ===================== */

    .checkout-box {
        width: 94%;
        max-height: 94vh;
        padding: 29px 18px 22px;
        border-radius: 22px;
    }


    .checkout-heading {
        padding-right: 35px;
        margin-bottom: 22px;
    }


    .checkout-heading h2 {
        font-size: 27px;
    }


    .checkout-heading p {
        font-size: 13px;
    }


    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .checkout-box input,
    .checkout-box textarea {
        padding: 12px 13px;
        font-size: 16px;
    }


    .option-card {
        align-items: flex-start;
        padding: 13px;
    }


    .option-card strong {
        font-size: 14px;
    }


    .option-card small {
        font-size: 11px;
    }


    .status-badge {
        font-size: 9px;
    }


    .bank-box {
        padding: 15px;
    }


    .bank-box strong {
        font-size: 13px;
    }


    .copy-iban-button {
        width: 100%;
    }


    .checkout-summary > div {
        align-items: center;
    }


    .checkout-summary strong {
        font-size: 19px;
    }


    .whatsapp-submit-button {
        min-height: 51px;
    }


    /* =====================
       FOOTER
    ===================== */

    .footer {
        padding: 30px 0;
    }


    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }


    .footer-logo {
        flex-direction: column;
    }


    .footer-logo img {
        width: 100px;
        height: 75px;
    }

}



/* =========================
   ÇOK KÜÇÜK TELEFON
========================= */

@media (max-width: 380px) {

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


    .logo img {
        width: 76px;
    }


    .cart-button {
        padding: 8px 10px;
    }


    .product-image {
        height: 270px;
    }


    .hero-image {
        height: 340px;
    }

}