:root{
    --eco-bg:#0f1114;
    --eco-paper:#fffdfa;
    --eco-paper2:#faf6f0;
    --eco-text:#171717;
    --eco-muted:#737373;
    --eco-accent:#9b5a31;
    --eco-accent2:#7c3f23;
    --eco-line:#e8e1d8;
    --eco-green:#1e9e4a;
    --eco-shadow:0 24px 60px rgba(0,0,0,.35);
}

*{
    box-sizing:border-box;
}

/* SAYFA */
.eco-desktop-shell{
    min-height:100vh;
    background:radial-gradient(
        circle at center,
        #1b1f24 0,
        #111418 55%,
        #090b0e 100%
    );
    padding:0 16px;
    color:var(--eco-text);
}

.eco-page{
    width:min(100%,520px);
    margin:0 auto;
    background:var(--eco-paper);
    min-height:100vh;
    box-shadow:var(--eco-shadow);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,Arial,sans-serif;
}

.eco-page button,
.eco-page input{
    font:inherit;
}

/* HEADER */
.eco-topbar{
    position:sticky;
    top:0;
    z-index:30;
    height:64px;
    display:grid;
    grid-template-columns:44px 1fr 88px;
    align-items:center;
    padding:0 12px;
    background:rgba(255,253,250,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--eco-line);
}

.eco-logo{
    text-align:center;
    font-weight:850;
    font-size:28px;
    letter-spacing:-1px;
}

.eco-logo span{
    color:var(--eco-accent);
}

.eco-icon-btn{
    width:40px;
    height:40px;
    border:0;
    background:transparent;
    border-radius:12px;
    font-size:24px;
    cursor:pointer;
}

.eco-top-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    font-size:22px;
}

/* ANA GALERİ */
.eco-hero{
    overflow:hidden;
    background:#eee;
}

.eco-gallery-stage{
    overflow:hidden;
    position:relative;
    touch-action:pan-y pinch-zoom;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}

.eco-slides{
    display:flex;
    transition:transform .38s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.eco-slide{
    flex:0 0 100%;
}

.eco-slide img{
    width:100%;
    display:block;
    aspect-ratio:1.45 / 1;
    object-fit:cover;
    background:#eee;
}

.eco-gallery-dots{
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    display:flex;
    gap:5px;
}

.eco-gallery-dot{
    width:6px;
    height:6px;
    border-radius:99px;
    background:rgba(255,255,255,.55);
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}

.eco-gallery-dot.active{
    width:18px;
    background:#fff;
}

/* THUMBNAIL */
.eco-thumb-wrap{
    display:grid;
    grid-template-columns:34px 1fr 34px;
    gap:8px;
    align-items:center;
    padding:10px 12px 4px;
}

.eco-thumb-arrow{
    width:34px;
    height:34px;
    border:1px solid #d8c5b5;
    background:#fff8f1;
    border-radius:999px;
    cursor:pointer;
    font-size:20px;
    color:var(--eco-accent);
}

.eco-thumbs{
    display:flex;
    gap:8px;
    overflow:auto;
    scrollbar-width:none;
}

.eco-thumbs::-webkit-scrollbar{
    display:none;
}

.eco-thumb{
    flex:0 0 74px;
    border:2px solid transparent;
    background:#fff;
    border-radius:12px;
    padding:0;
    overflow:hidden;
    cursor:pointer;
}

.eco-thumb.active{
    border-color:var(--eco-accent);
}

.eco-thumb img{
    width:100%;
    height:64px;
    object-fit:cover;
    display:block;
}

/* ------------------------------------------------
   ÜRÜN BİLGİ KARTLARI
   6 adet = 3 sütun x 2 sıra
------------------------------------------------ */

.eco-feature-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:10px 14px 12px;
}

.eco-feature{
    min-width:0;
    min-height:88px;

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

    text-align:center;

    background:var(--eco-paper2);
    border:1px solid #eee6dc;
    border-radius:14px;

    padding:10px 5px;

    color:var(--eco-text);
}

.eco-feature svg{
    width:27px;
    height:27px;
    flex:0 0 27px;

    fill:none;
    stroke:#171717;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;

    margin-bottom:7px;
}

.eco-feature span{
    display:block;
    font-size:11px;
    line-height:1.2;
    font-weight:500;
}

/* Ana bilgi ilk satırı biraz belirgin olsun */
.eco-feature span:first-line{
    font-weight:600;
}

/* İÇERİK */
.eco-content{
    padding:0 14px 110px;
}
.eco-eyebrowblok{float:left;
    margin:15px;
}
.eco-eyebrow{
    margin-top:5px;
    color:var(--eco-accent);
    font-weight:800;
    letter-spacing:3px;
    font-size:12px;
}

.eco-title{
    font-size:32px;
    line-height:1.02;
    letter-spacing:-1.2px;
    margin:6px 0 5px;
}

.eco-title span{
    color:var(--eco-accent);
}

.eco-lead{
    font-size:16px;
    margin:0 0 4px;
}

.eco-desc{
    font-size:13px;
    line-height:1.45;
    color:var(--eco-muted);
    margin:0 0 12px;
}

/* ÖDEME */
.eco-payments{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.eco-select-card{
    min-height:102px;
 
    border-radius:12px;
}

.eco-pay-title{
    font-size:10px;
    line-height:1.15;
    font-weight:800;
}

.eco-price{
    font-size:16px;
    line-height:1;
    margin-top:4px;
}

.eco-pay-note{
    font-size:11px;
    line-height:1.1;
    margin-top:4px;
}

.eco-check{
    width:17px;
    height:17px;
    right:5px;
    top:5px;
}

.eco-payment-detail{
    font-size:10px;
    line-height:1.25;
    padding:6px 8px;
    margin:6px 0 8px;
}



.eco-select-card{
    position:relative;
    border:1.5px solid #d9d9d9;
    background:white;
    border-radius:14px;
 
    cursor:pointer;
    text-align:center;
    min-height:102px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.eco-select-card.active{
    border-color:var(--eco-accent);
    background:#fff8f2;
    box-shadow:0 0 0 1px rgba(155,90,49,.08);
}

.eco-check{
    position:absolute;
    right:8px;
    top:8px;
    width:21px;
    height:21px;
    border:1.5px solid #c8c8c8;
    border-radius:999px;
}

.eco-select-card.active .eco-check{
    background:var(--eco-accent);
    border-color:var(--eco-accent);
}

.eco-select-card.active .eco-check:after{
    content:"✓";
    color:#fff;
    font-size:13px;
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-weight:800;
}

.eco-pay-title{
    font-size:13px;
    font-weight:700;
}

.eco-price{
    font-size:23px;
    font-weight:900;
    margin-top:4px;
}

.eco-select-card.active .eco-price{
    color:var(--eco-accent2);
}

.eco-micro{
    font-size:10.5px;
    color:var(--eco-muted);
    text-align:center;
    margin:6px 0 10px;
}

.eco-trust{
    display:flex;
    justify-content:center;
    gap:14px;
    align-items:center;
    background:var(--eco-paper2);
    border-radius:12px;
    padding:10px;
    font-size:11px;
    margin-bottom:14px;
}

.eco-trust span+span{
    border-left:1px solid #ddd;
    padding-left:14px;
}

/* BÖLÜM BAŞLIKLARI */
.eco-section-title{
    font-weight:850;
    font-size:14px;
    margin:12px 0 7px;
}

.eco-section-title small{
    font-weight:500;
    color:var(--eco-muted);
}

/* RENKLER */
.eco-colors{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
}

.eco-color-card{
    position:relative;
    border:1.5px solid transparent;
    background:#faf8f5;
    border-radius:12px;
    padding:4px 3px 6px;
    text-align:center;
    cursor:pointer;
}

.eco-color-card.active{
    border-color:var(--eco-accent);
}

.eco-color-card img{
    width:100%;
    aspect-ratio:.78/1;
    object-fit:cover;
    border-radius:8px;
    display:block;
}

.eco-color-name{
    font-size:10.5px;
    margin-top:4px;
}

.eco-tick{
    display:none;
    position:absolute;
    right:-4px;
    top:-5px;
    width:20px;
    height:20px;
    background:var(--eco-accent);
    color:#fff;
    border-radius:999px;
    place-items:center;
    font-size:12px;
    border:2px solid var(--eco-paper);
}

.active>.eco-tick,
.active .eco-tick{
    display:grid;
}

/* MODELLER */
.eco-models{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.eco-model-card{
    position:relative;
    border:1.5px solid #e1e1e1;
    border-radius:13px;
    background:#fff;
    padding:8px;
    text-align:center;
    cursor:pointer;
}

.eco-model-card.active{
    border-color:var(--eco-accent);
    background:#fff9f4;
}

.eco-model-card img{
    height:66px;
    width:100%;
    object-fit:contain;
}

.eco-model-card strong{
    font-size:13px;
}

.eco-model-card .eco-tick{
    right:5px;
    top:5px;
    border-color:#fff;
}

/* KİŞİSELLEŞTİRME */
.eco-personalize label{
    display:block;
    font-size:12px;
    color:#555;
    margin-bottom:5px;
}

.eco-personalize input{
    width:100%;
    height:44px;
    border:1.5px solid #cfcfcf;
    border-radius:12px;
    padding:0 12px;
    font-size:15px;
    outline:none;
}

.eco-personalize input:focus{
    border-color:var(--eco-accent);
    box-shadow:0 0 0 3px rgba(155,90,49,.10);
}

.eco-counter{
    display:flex;
    justify-content:space-between;
    color:var(--eco-muted);
    font-size:10.5px;
    margin-top:5px;
}

/* KARGO */
.eco-shipping-note{
    display:flex;
    align-items:center;
    gap:8px;
    margin:10px 0;
    color:#555;
    font-size:11px;
}

.eco-shipping-note b{
    color:#222;
}

/* SEÇİLEN ÖDEME */
.eco-selected-summary{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-top:12px;
    padding:10px 12px;
    border-radius:12px;
    background:#fff7ef;
    border:1px solid #ead5c4;
    font-size:12px;
}

.eco-selected-summary strong{
    color:var(--eco-accent2);
    font-size:14px;
}

/* SİPARİŞ */
.eco-cta{
    width:100%;
    border:0;
    border-radius:13px;
    background:#171717;
    color:white;
    font-size:17px;
    font-weight:800;
    padding:15px;
    cursor:pointer;
    margin-top:9px;
}

.eco-cta:disabled{
    opacity:.55;
    cursor:wait;
}

.eco-bottom-trust{
    display:flex;
    justify-content:center;
    gap:18px;
    font-size:14px;
    color:#444;
    padding:12px 0 4px;
}

.eco-bottom-trust span+span{
    border-left:1px solid #d8d8d8;
    padding-left:18px;
}

.eco-message{
    margin-top:10px;
    font-size:12px;
    text-align:center;
    color:#9b2b23;
    min-height:18px;
}

/* WHATSAPP */
.eco-whatsapp{
    position:fixed;
    right:max(18px,calc((100vw - 520px)/2 - 74px));
    bottom:24px;

    width:58px;
    height:58px;

    border-radius:999px;
    background:var(--eco-green);
    color:white!important;

    display:grid;
    place-items:center;

    text-decoration:none!important;
    font-size:27px;

    box-shadow:0 10px 30px rgba(0,0,0,.28);
    border:3px solid white;

    z-index:40;
}

.eco-whatsapp small{
    position:absolute;
    top:58px;

    background:#fff;
    color:#111;

    border-radius:999px;
    padding:3px 7px;

    font-size:10px;
    white-space:nowrap;

    box-shadow:0 4px 15px rgba(0,0,0,.2);
}

/* HATA */
.eco-error{
    padding:20px;
    background:#fff0f0;
    border:1px solid #e6b8b8;
}

/* MOBİL */
@media(max-width:700px){

    .eco-desktop-shell{
        padding:0;
        background:var(--eco-paper);
    }

    .eco-page{
        width:100%;
        box-shadow:none;
    }

    .eco-whatsapp{
        right:18px;
        bottom:22px;
    }

    .eco-content{
        padding-bottom:120px;
    }

    .eco-colors{
        gap:5px;
    }

    .eco-color-name{
        font-size:9.5px;
    }

}

/* ÇOK KÜÇÜK TELEFONLAR */
@media(max-width:360px){

    .eco-feature-row{
        gap:6px;
        padding-left:10px;
        padding-right:10px;
    }

    .eco-feature{
        min-height:82px;
        padding:8px 3px;
    }

    .eco-feature svg{
        width:24px;
        height:24px;
        flex-basis:24px;
    }

    .eco-feature span{
        font-size:10px;
    }

}
/* 1) Renk kartlarını biraz daha rahat tıklanır ve premium yap */
.eco-color-card{
    padding:6px 4px 8px;
    border-radius:14px;
    transition:.2s ease;
}

.eco-color-card.active{
    border-color:var(--eco-accent);
    box-shadow:0 4px 14px rgba(155,90,49,.12);
    transform:translateY(-1px);
}

.eco-color-name{
    font-size:10.5px;
    font-weight:600;
}
/* 2) Bilgi kutularındaki yazıları biraz daha okunaklı yap */
.eco-feature{
    box-shadow:0 2px 8px rgba(0,0,0,.025);
}

.eco-feature span{
    font-size:11px;
    line-height:1.25;
    font-weight:600;
}

.eco-feature svg{
    stroke-width:1.8;
}
/* 3) Ürün başlığı çevresine biraz nefes ver */
.eco-eyebrow{
    margin-top:10px;
    margin-bottom:4px;
}

.eco-title{
    margin:4px 0 8px;
}

.eco-lead{
    margin-bottom:6px;
}
/* 4) Seçili ödeme kutusunu daha belirgin yap */
.eco-select-card{
    transition:.2s ease;
}

.eco-select-card.active{
    border-width:2px;
    box-shadow:0 6px 18px rgba(155,90,49,.10);
    transform:translateY(-1px);
}

.eco-select-card.active .eco-price{
    color:var(--eco-accent2);
}
/* 5) Sipariş butonunu daha güçlü CTA yap */
.eco-cta{
    min-height:54px;
    font-size:17px;
    letter-spacing:.1px;
    box-shadow:0 8px 22px rgba(0,0,0,.14);
    transition:.2s ease;
}

.eco-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.eco-cta:active{
    transform:translateY(0);
}
.eco-thumb-arrow{
    border-color:#cda98c;
    background:#fffaf5;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    font-weight:700;
}

/* CANLI KİŞİSELLEŞTİRME ÖNİZLEMESİ */
@font-face{
    font-family:'FinedayStyleTwo';
    src:url('fonts/Fineday-StyleTwo.ttf') format('truetype');
    font-display:swap;
}
.eco-live-preview{
    margin-top:12px;
    padding:10px;
    border:1px solid #eadfd5;
    border-radius:14px;
    background:#fffaf5;
}
.eco-preview-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
}
.eco-preview-head strong{font-size:12px;color:#222;}
.eco-preview-head span{font-size:10px;color:var(--eco-muted);}
.eco-preview-plaque{
    position:relative;
    width:100%;
    aspect-ratio:1128/402;
    overflow:hidden;
    background:#fff;
    border-radius:10px;
}
.eco-preview-plaque img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.eco-preview-name{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:block;
    width:auto;
    max-width:62%;
    text-align:center;
    white-space:nowrap;
    color:#171717;
    font-family:'FinedayStyleTwo',cursive;
    font-size:42px;
    line-height:1;
    font-weight:400;
    z-index:2;
    pointer-events:none;
}
.eco-preview-note{
    display:block;
    margin-top:7px;
    text-align:center;
    font-size:9.5px;
    line-height:1.3;
    color:var(--eco-muted);
}
@media(max-width:420px){
    .eco-preview-name{font-size:38px;}
}