:root{
            --green:#173f12;
            --green2:#24581c;
            --cream:#f7f3e8;
            --cream2:#fffdf7;
            --text:#26382b;
            --border:#ded8c9;
        }

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

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Arial,
                sans-serif;

            background:var(--cream);
            color:var(--text);
        }

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

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

        /* ==============================
           ÜST KAYAN DUYURU
        ============================== */

        .announcement-bar{
            width:100%;
            height:42px;
            overflow:hidden;
            background:
                linear-gradient(
                    90deg,
                    #12360e,
                    #24581c,
                    #12360e
                );

            color:#fff;
            display:flex;
            align-items:center;
            border-bottom:1px solid rgba(255,255,255,.12);
        }

        .announcement-track{
            width:100%;
            overflow:hidden;
            white-space:nowrap;
        }

        .announcement-text{
            display:inline-block;
            padding-left:100%;
            font-size:14px;
            font-weight:700;
            letter-spacing:.2px;

            animation:
                announcementMove
                55s
                linear
                infinite;
        }

        @keyframes announcementMove{
            from{
                transform:translateX(0);
            }

            to{
                transform:translateX(-100%);
            }
        }

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

        .site-header{
            background:var(--cream2);
            border-bottom:1px solid var(--border);
        }

        .header-inner{
            max-width:1200px;
            margin:0 auto;

            min-height:220px;

            padding:22px 24px;

            display:grid;
            grid-template-columns:
                minmax(190px,280px)
                minmax(0,1fr);

            align-items:center;
            gap:45px;
        }

        /* ==============================
           LOGO
        ============================== */

        .logo-wrap{
            display:flex;
            align-items:center;
            justify-content:flex-start;
        }

        .logo-wrap img{
            width:100%;
            max-width:260px;
            height:auto;
        }

        /* Logo resmi henüz yoksa */
        .logo-fallback{
            display:none;
            font-weight:900;
            color:var(--green);
            font-size:42px;
            line-height:1;
        }

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

        .header-banner{
            display:flex;
            justify-content:flex-end;
            align-items:center;
        }

        .header-banner-inner{
            width:100%;
            max-width:760px;

            border-radius:18px;
            overflow:hidden;

            border:1px solid #dfd8c7;

            background:#eee9dc;

            box-shadow:
                0 8px 28px
                rgba(32,58,27,.08);
        }

        .header-banner img{
            width:100%;
            height:auto;
            aspect-ratio:728 / 240;
            object-fit:cover;
        }

        /* ==============================
           MENÜ
        ============================== */

        .main-menu-wrap{
            background:#fff;
            border-top:1px solid #eee8db;
            border-bottom:4px solid var(--green);
        }

        .main-menu{
            max-width:1200px;
            min-height:54px;

            margin:0 auto;
            padding:0 24px;

            display:flex;
            align-items:center;
            justify-content:center;
            gap:42px;
        }

        .main-menu a{
            position:relative;
            padding:16px 2px 14px;

            color:#355036;

            font-size:15px;
            font-weight:800;

            transition:
                color .2s ease;
        }

        .main-menu a::after{
            content:"";

            position:absolute;
            left:50%;
            bottom:7px;

            width:0;
            height:2px;

            background:var(--green2);

            transform:translateX(-50%);

            transition:
                width .2s ease;
        }

        .main-menu a:hover{
            color:var(--green);
        }

        .main-menu a:hover::after{
            width:100%;
        }

        .main-menu a.active{
            color:var(--green);
        }

        .main-menu a.active::after{
            width:100%;
        }

        .cart-link{
            display:flex;
            align-items:center;
            gap:7px;
        }

        .cart-count{
            min-width:23px;
            height:23px;

            padding:0 6px;

            display:inline-flex;
            align-items:center;
            justify-content:center;

            border-radius:999px;

            background:var(--green);
            color:#fff;

            font-size:12px;
            font-weight:900;
        }

        /* ==============================
           GEÇİCİ ALT ALAN
           Sonraki adımda ürünler gelecek
        ============================== */

        .page-placeholder{
            min-height:400px;

            display:flex;
            align-items:center;
            justify-content:center;

            padding:50px 20px;

            text-align:center;
        }

        .page-placeholder p{
            color:#7b8379;
            font-size:16px;
        }
        /* ==============================
           ARADIĞINIZ ÜRÜN POST-IT
        ============================== */

       .product-help-note{
    position:relative;

    width:205px;
    padding:20px 14px 14px;

    margin:30px 35px 18px auto;

    background:#fff2a8;
    color:#443d22;

    border:1px solid #e1d27a;
    border-radius:3px;

    box-shadow:0 8px 25px rgba(0,0,0,.18);

    transform:rotate(-1.5deg);

    z-index:1;
}

        .product-help-note::before{
            content:"";
            position:absolute;
            top:-9px;
            left:50%;
            width:74px;
            height:19px;

            transform:translateX(-50%) rotate(1deg);

            background:rgba(225,210,150,.75);
            box-shadow:0 1px 2px rgba(0,0,0,.08);
        }

    .product-help-note h3{
    margin:0 0 7px;

    color:#173f12;

    font-size:14px;
    line-height:1.3;
    font-weight:900;
    letter-spacing:-0.1px;
}

      .product-help-note p{
    margin:0 0 10px;

    color:#38422f;
    font-size:12px;
    line-height:1.45;
    font-weight:500;
}

        .product-help-note strong{
            color:#173f12;
        }

        .product-help-whatsapp{
            display:block;

            padding:8px 9px;

            background:#24581c;
            color:#fff;

            border-radius:7px;

            text-align:center;
            font-size:12px;
font-weight:900;

            transition:
                background .2s ease,
                transform .2s ease;
        }

        .product-help-whatsapp:hover{
            background:#173f12;
            transform:translateY(-1px);
        }


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

        .site-footer{
            background:#173f12;
            color:#f7f3e8;

            border-top:5px solid #24581c;

            padding:30px 24px;
        }

        .footer-inner{
            max-width:1200px;
            margin:0 auto;

            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:30px;
        }

        .footer-brand{
            line-height:1.6;
            font-size:14px;
        }

        .footer-brand strong{
            display:block;

            margin-bottom:2px;

            color:#fff;

            font-size:17px;
        }

        .footer-principle{
            font-size:14px;
            font-weight:800;
            text-align:center;
        }

        .footer-copy{
            white-space:nowrap;

            font-size:13px;
            color:#d8e1d4;
        }
.footer-center{
    text-align:center;
}

.footer-links{
    margin-top:8px;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:5px 14px;

    font-size:12px;
    font-weight:600;
}

.footer-links a{
    color:#d8e1d4;
}

.footer-links a:hover{
    color:#fff;
    text-decoration:underline;
}
/* ==============================
   ÜRÜN KARTLARI
============================== */

.products-area{
    max-width:1050px;
    margin:0 auto;
    padding:45px 20px 70px;
}

.products-head{
    margin-bottom:28px;
    text-align:center;
}

.products-head h1{
    margin:0 0 7px;
    color:var(--green);
    font-size:30px;
}

.products-head p{
    margin:0;
    color:#687469;
    font-size:14px;
}

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

.product-card{
    overflow:hidden;

    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;

    box-shadow:0 6px 22px rgba(32,58,27,.07);
}

.product-image{
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;

    background:#f5f2e8;
}
.product-image a{
    display:block;
    width:100%;
    height:100%;
}
.product-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
}

.product-image-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    color:#7a8378;
    font-size:13px;
    font-weight:700;
    text-align:center;
}

.product-info{
    padding:18px;
}

.product-type{
    display:inline-block;
    margin-bottom:8px;

    color:#56724c;

    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.product-info h2{
    margin:0 0 8px;

    color:var(--green);

    font-size:20px;
    line-height:1.25;
}

.product-desc{
    min-height:42px;
    margin:0 0 18px;

    color:#626b61;

    font-size:13px;
    line-height:1.55;
}

.product-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding-top:14px;

    border-top:1px solid #eee9dc;
}

.product-price{
    color:var(--green);
    font-size:15px;
}

.product-bottom button,
.product-bottom .product-button{
    padding:9px 12px;

    border:0;
    border-radius:7px;

    background:var(--green);
    color:#fff;

    font-family:inherit;
    font-size:12px;
    font-weight:800;

    cursor:pointer;
}

.product-bottom .product-button{
    display:inline-block;
    text-decoration:none;
}

/* TABLET ÜRÜNLER */

@media(max-width:900px){

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

}


/* MOBİL ÜRÜNLER */

@media(max-width:600px){

    .products-area{
        padding:30px 14px 50px;
    }

    .products-head h1{
        font-size:25px;
    }

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

    .product-card{
        max-width:360px;
        width:100%;
        margin:0 auto;
    }

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

        @media(max-width:900px){

            .header-inner{
                min-height:auto;

                grid-template-columns:
                    220px
                    minmax(0,1fr);

                gap:24px;

                padding:
                    20px;
            }

            .main-menu{
                gap:28px;
            }
        }

        /* ==============================
           MOBİL
        ============================== */

        @media(max-width:700px){

            .announcement-bar{
                height:38px;
            }

            .announcement-text{
                font-size:13px;
            }

            .header-inner{
                grid-template-columns:1fr;

                gap:20px;

                text-align:center;

                padding:
                    20px 14px;
            }
            .logo-wrap{
                justify-content:center;
            }

            .logo-wrap img{
                max-width:220px;
            }

            .header-banner{
                justify-content:center;
            }

            .header-banner-inner{
                max-width:100%;
                border-radius:14px;
            }

            .main-menu{
                min-height:auto;

                padding:
                    8px 12px;

                gap:
                    4px 22px;

                flex-wrap:wrap;
            }

            .main-menu a{
                padding:
                    9px 2px;

                font-size:14px;
            }

            .main-menu a::after{
                bottom:3px;
            }
           .product-help-note{
    width:205px;
    margin:25px auto 18px;
}

            .product-help-note p{
                font-size:12px;
            }

            .product-help-whatsapp{
                padding:8px 9px;
                font-size:12px;
            }

            .footer-inner{
                flex-direction:column;
                gap:14px;

                text-align:center;
            }
.footer-links{
    gap:7px 12px;
    line-height:1.5;
}

            .footer-copy{
                white-space:normal;
            }
        }

        @media(max-width:430px){

            .main-menu{
                justify-content:space-around;
                gap:4px 10px;
            }

            .main-menu a{
                font-size:13px;
            }
        }


/* ==============================
   HESABIM
============================== */
.account-area{
    max-width:1050px;
    margin:0 auto;
    padding:45px 20px 70px;
}
.account-head{
    margin-bottom:28px;
    text-align:center;
}
.account-head h1{
    margin:0 0 7px;
    color:var(--green);
    font-size:30px;
}
.account-head p{
    margin:0;
    color:#687469;
    font-size:14px;
}
.account-alert{
    max-width:760px;
    margin:0 auto 22px;
    padding:12px 14px;
    border:1px solid #d7cfba;
    border-radius:10px;
    background:#fffdf7;
    font-size:14px;
    line-height:1.5;
}
.account-alert.success{
    border-color:#b9d3b2;
    background:#f3faf1;
    color:#24581c;
}
.account-alert.error{
    border-color:#e0b9b4;
    background:#fff6f4;
    color:#8a3329;
}
.account-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.account-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:22px;
    box-shadow:0 6px 22px rgba(32,58,27,.07);
}
.account-card.full{
    grid-column:1 / -1;
}
.account-card h2{
    margin:0 0 18px;
    color:var(--green);
    font-size:20px;
}
.account-card .muted{
    margin:-9px 0 16px;
    color:#748074;
    font-size:12px;
}
.account-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.account-field.full{
    grid-column:1 / -1;
}
.account-field label{
    display:block;
    margin-bottom:6px;
    color:#3c543e;
    font-size:12px;
    font-weight:800;
}
.account-field input,
.account-field textarea{
    width:100%;
    border:1px solid #d9d3c5;
    border-radius:8px;
    background:#fffdf9;
    color:#26382b;
    font:inherit;
    font-size:14px;
    padding:10px 11px;
    outline:none;
}
.account-field textarea{
    min-height:92px;
    resize:vertical;
}
.account-field input:focus,
.account-field textarea:focus{
    border-color:#6f9468;
    box-shadow:0 0 0 3px rgba(36,88,28,.08);
}
.account-email{
    padding:10px 11px;
    border:1px solid #e3ded2;
    border-radius:8px;
    background:#f7f4ec;
    font-size:14px;
    word-break:break-word;
}
.account-check{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:14px;
    font-size:13px;
    line-height:1.45;
}
.account-check input{
    margin-top:3px;
}
.account-actions{
    margin-top:16px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.account-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:9px 14px;
    border:0;
    border-radius:8px;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}
.account-button:hover{
    background:var(--green2);
}
.account-button.secondary{
    background:#f1eee4;
    color:#355036;
    border:1px solid #dcd5c5;
}
.account-orders-empty{
    padding:20px;
    border:1px dashed #d8d1c2;
    border-radius:10px;
    text-align:center;
    color:#748074;
    font-size:14px;
}
.account-orders{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.account-orders th,
.account-orders td{
    padding:11px 9px;
    border-bottom:1px solid #eee9dc;
    text-align:left;
    vertical-align:top;
}
.account-orders th{
    color:#49614b;
    font-size:12px;
}
@media(max-width:700px){
    .account-area{padding:30px 14px 50px;}
    .account-head h1{font-size:25px;}
    .account-grid{grid-template-columns:1fr;}
    .account-card.full{grid-column:auto;}
    .account-form-grid{grid-template-columns:1fr;}
    .account-field.full{grid-column:auto;}
    .account-orders{display:block;overflow-x:auto;white-space:nowrap;}
}


/* ==============================
   HIZLI GİRİŞ / ŞİFRE
============================== */
.auth-area{
    min-height:430px;
    padding:48px 20px 70px;
}
.auth-box{
    max-width:500px;
    margin:0 auto;
    padding:28px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 6px 22px rgba(32,58,27,.07);
}
.auth-box h1{
    margin:0 0 8px;
    color:var(--green);
    font-size:28px;
}
.auth-muted{
    margin:0 0 20px;
    color:#687469;
    font-size:14px;
    line-height:1.55;
}
.auth-field{
    margin:16px 0 12px;
}
.auth-field label{
    display:block;
    margin-bottom:6px;
    color:#3c543e;
    font-size:13px;
    font-weight:800;
}
.auth-field input{
    width:100%;
    box-sizing:border-box;
    padding:11px 12px;
    border:1px solid #d9d3c5;
    border-radius:8px;
    background:#fffdf9;
    color:#26382b;
    font:inherit;
    font-size:14px;
    outline:none;
}
.auth-field input:focus{
    border-color:#6f9468;
    box-shadow:0 0 0 3px rgba(36,88,28,.08);
}
.auth-field input:disabled{
    background:#f7f4ec;
    color:#687469;
}
.auth-btn{
    width:100%;
    min-height:42px;
    margin-top:8px;
    padding:10px 14px;
    border:0;
    border-radius:8px;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}
.auth-btn:hover{
    background:var(--green2);
}
.auth-btn-secondary{
    background:#6b665c;
}
.auth-resend{
    margin-top:10px;
}
.auth-msg{
    margin:15px 0;
    padding:11px 13px;
    border-radius:8px;
    font-size:13px;
    line-height:1.45;
}
.auth-ok{
    background:#f3faf1;
    border:1px solid #b9d3b2;
    color:#24581c;
}
.auth-error{
    background:#fff6f4;
    border:1px solid #e0b9b4;
    color:#8a3329;
}
.auth-link,
.auth-back{
    display:block;
    margin-top:15px;
    text-align:center;
    color:#49614b;
    font-size:13px;
    font-weight:700;
}
.auth-link:hover,
.auth-back:hover{
    color:var(--green);
    text-decoration:underline;
}
.auth-small{
    margin-top:10px;
    color:#777064;
    font-size:12px;
    line-height:1.45;
}
.auth-check{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:18px 0;
    color:#3c543e;
    font-size:13px;
    line-height:1.45;
}
.auth-check input{
    margin-top:3px;
}
@media(max-width:600px){
    .auth-area{
        padding:30px 14px 50px;
    }
    .auth-box{
        padding:22px 18px;
    }
    .auth-box h1{
        font-size:25px;
    }
}