/* ============================================
Erdoğal — Erzurum Doğal Gıda Pazarı
Custom override (main.css üzerine)
============================================ */
:root{
--erd-primary: #4A5D3A; /* daha mat, zeytin yeşili */
--erd-primary-dark: #2F3D26;
--erd-primary-2: #7C8C5D;
--erd-accent: #B8651E; /* terra-cotta — kuru tarçın */
--erd-cream: #F5EFE0; /* dergi sayfası kremi */
--erd-paper: #FAF6EB; /* daha açık krem (anasayfa zemini) */
--erd-bg: #FAF6EB;
--erd-bg-alt: #EFE8D6;
--erd-dark: #1F2418; /* mürekkep siyahı, sıcak ton */
--erd-text: #2B2E22;
--erd-muted: #6F6852;
--erd-border: #D9CFB8;
--erd-rule: #1F2418;
--erd-radius: 0px; /* editorial: keskin köşeler */
--erd-radius-sm: 0px;
--erd-shadow: 0 4px 16px rgba(31,36,24,.05);
--erd-shadow-hover: 0 12px 36px rgba(31,36,24,.08);
--erd-font-display: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
--erd-font-body: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
--erd-font: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
}
/* Onest'i tüm şablon elementlerine de uygula (main.css'in font-family'lerini override et) */
body, .vl-hero3-area, .hero3-title, .hero3-meta-text h2, .pera_text, .title-text,
.vl-btn8, .vl-btn7, .header-location a, .header-time, .header-phn-mail,
.vl-main-menu nav ul li a, .vl-offcanvas-info span a, .vl-offcanvas-sm-title{
font-family: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif !important;
}
/* ---------- Reset / base ---------- */
.erd-body{
font-family: var(--erd-font-body);
color: var(--erd-text);
background: var(--erd-bg);
margin: 0;
font-size: 15.5px;
line-height: 1.65;
font-feature-settings: "ss01", "cv01";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.erd-body h1, .erd-body h2, .erd-body h3, .erd-body h4, .erd-body h5{
color: var(--erd-dark);
font-family: var(--erd-font-display);
font-weight: 400;
letter-spacing: -.012em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
/* Italik kaldırma — sadece em ve fa- class'ı OLMAYAN i etiketleri */
.erd-body em,
.erd-body i:not([class*="fa-"]):not([class*="fab"]):not([class*="far"]):not([class*="fas"]){
font-style: normal;
font-family: inherit;
}
.erd-body a{ color: var(--erd-primary); text-decoration: none; }
.erd-body a:hover{ color: var(--erd-primary-dark); }
/* Tüm sayfalarda her yerde — alt çizgisiz, KESIN override */
html body a,
html body a:hover,
html body a:focus,
html body a:visited,
html body a:active,
html body button,
html body label,
html body span,
html body p,
html body li{
text-decoration: none !important;
}
html body a u, html body u{ text-decoration: none !important; }
/* erd-doc body içindeki linkler — underline yerine altın renk */
.erd-doc-body a, .erd-doc-side-info a, .erd-doc-foot a{
color: #B7831A !important;
text-decoration: none !important;
font-weight: 600;
border-bottom: 1px dotted rgba(183,131,26,.4);
padding-bottom: 1px;
}
.erd-doc-body a:hover{ border-bottom-color: #B7831A; }
/* Footer ve nav linkleri — alt çizgisiz, kalıcı.
ÖNEMLİ: border-bottom: 0 sadece TEXT linkleri için (a, .link).
Buton ve kart elementleri kendi border'larını kullanır, dolayısıyla onların border'ına dokunma. */
.erd-footer a,
.erd-footer-col a,
.erd-footer-col ul a,
.erd-footer-links a,
.erd-footer-bottom a,
.erd-footer-social a,
.erd-mm-foot a,
.erd-mm-nav a,
.erd-mm-section a,
.erd-mm-cat,
.erd-contact-social a,
.erd-bn a,
.erd-bn-side a,
.erd-social a,
.erd-bottom-nav a,
.erd-h-nav a,
.erd-h-mega a,
.erd-h-actions a,
.erd-cart-link,
.erd-product-card a,
.erd-product-name a,
.erd-cat-section-all,
.erd-link,
a:has(> i.fa-brands:only-child),
a:has(> i.fa-solid:only-child),
a:has(> svg:only-child){
text-decoration: none !important;
}
/* Çerçeveli buton/kart elementlerinde sadece text-decoration kaldırılsın — border'a dokunma */
.erd-h-actions button,
.erd-bn-item,
.erd-trust-card,
.erd-cat-strip-item,
.erd-cat-board-card,
.erd-cat-board-arrow,
.erd-pd-cat-pill,
.erd-product-image,
.erd-fav-btn,
.erd-pd-fav,
.erd-pd-secondary{
text-decoration: none !important;
}
.erd-body img{ max-width: 100%; height: auto; }
.erd-body ::selection{ background: var(--erd-dark); color: var(--erd-paper); }
/* ---------- Buttons ---------- */
.erd-btn{
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .75rem 1.4rem;
border-radius: 999px;
font-weight: 600; font-size: .95rem;
border: 2px solid transparent;
transition: all .2s ease;
cursor: pointer;
white-space: nowrap;
}
.erd-btn:disabled{ opacity:.5; cursor:not-allowed; }
.erd-btn-sm{ padding:.55rem 1rem; font-size:.875rem; }
.erd-btn-primary{ background: var(--erd-primary); color:#fff; }
.erd-btn-primary:hover{ background: var(--erd-primary-dark); color:#fff; }
.erd-btn-ghost{ background: transparent; color: var(--erd-dark); border-color: var(--erd-border); }
.erd-btn-ghost:hover{ background: var(--erd-cream); color: var(--erd-dark); }
.erd-btn-accent{ background: var(--erd-accent); color: #fff; }
.erd-btn-accent:hover{ background: #DA8E0E; color:#fff; }
.erd-link{
color: var(--erd-primary); font-weight: 600; font-size: .9rem;
display: inline-flex; align-items: center; gap: .35rem;
}
.erd-link:hover{ color: var(--erd-primary-dark); }
/* ============================================
HEADER — Editorial / dergi başlık
============================================ */
.erd-header{
position: sticky; top: 0; z-index: 100;
background: var(--erd-paper);
font-family: var(--erd-font-body);
}
.erd-rule{ height: 1px; background: var(--erd-rule); opacity: .85; }
.erd-rule + .erd-rule{ margin-top: 3px; }
.erd-topbar{
padding: .55rem 0;
font-size: .72rem;
color: var(--erd-text);
}
.erd-topbar .container{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
}
.erd-meta-left, .erd-meta-mid, .erd-meta-right{
text-transform: uppercase;
letter-spacing: .18em;
font-weight: 500;
}
.erd-meta-left{ text-align: left; }
.erd-meta-mid{
text-align: center;
font-family: var(--erd-font-display);
font-style: italic;
font-weight: 400;
font-size: .8rem;
letter-spacing: .04em;
text-transform: none;
color: var(--erd-muted);
}
.erd-meta-right{ text-align: right; }
.erd-meta-right a{ color: var(--erd-text); }
.erd-meta-right a:hover{ color: var(--erd-primary); }
.erd-mainbar{ padding: 1.6rem 0; }
.erd-mainbar .container{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
}
.erd-logo{ justify-self: center; }
.erd-logo img{ height: 64px; width: auto; display: block; }
.erd-utility{
justify-self: end;
display: flex; align-items: center; gap: 1.25rem;
}
.erd-icon-btn{
background: transparent; border: 0; padding: 0;
color: var(--erd-text); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.erd-icon-btn:hover{ color: var(--erd-primary); }
.erd-cart-link{
font-family: var(--erd-font-body);
font-size: .78rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--erd-text);
display: inline-flex; gap: .35rem; align-items: baseline;
padding-bottom: 2px;
border-bottom: 1px solid var(--erd-rule);
}
.erd-cart-link:hover{ color: var(--erd-primary); border-color: var(--erd-primary); }
.erd-cart-count-text{ font-family: var(--erd-font-display); font-style: italic; font-weight: 400; letter-spacing: 0; }
.erd-menu-toggle{
background: transparent; border: 0; padding: 8px;
display: inline-flex; flex-direction: column; gap: 4px;
width: 32px; cursor: pointer; justify-self: start;
}
.erd-menu-toggle span{ display: block; width: 22px; height: 1.5px; background: var(--erd-dark); }
/* Nav row */
.erd-nav-row{ padding: .85rem 0; }
.erd-nav-row ul{
list-style: none; padding: 0; margin: 0;
display: flex; justify-content: center; gap: 3rem;
}
.erd-nav-row a{
font-family: var(--erd-font-body);
font-size: .76rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--erd-text);
padding: 4px 0;
position: relative;
transition: color .2s ease;
}
.erd-nav-row a:hover{ color: var(--erd-primary); }
.erd-nav-row a.active{ color: var(--erd-dark); }
.erd-nav-row a.active::after{
content: ""; position: absolute;
left: 50%; bottom: -6px; transform: translateX(-50%);
width: 6px; height: 6px;
background: var(--erd-accent); border-radius: 50%;
}
/* Search açılır kutu */
.erd-search-bar{
display: none;
background: var(--erd-cream);
border-bottom: 1px solid var(--erd-rule);
}
.erd-search-bar.open{ display: block; }
.erd-search-bar input{
flex: 1; border: 0; background: transparent; outline: 0;
padding: .6rem .25rem;
font-family: var(--erd-font-display);
font-style: italic;
font-size: 1.4rem;
color: var(--erd-dark);
border-bottom: 1px solid var(--erd-rule);
}
.erd-search-bar input::placeholder{ color: var(--erd-muted); font-style: italic; }
.erd-search-bar button[type=submit]{
background: var(--erd-dark); color: var(--erd-paper);
border: 0; padding: .55rem 1.4rem;
font-size: .76rem; font-weight: 600;
letter-spacing: .2em; text-transform: uppercase;
cursor: pointer;
}
.erd-search-bar button[type=submit]:hover{ background: var(--erd-primary); }
.erd-search-close{
background: transparent; border: 0;
font-size: 1.6rem; color: var(--erd-muted); cursor: pointer;
width: 32px; height: 32px; line-height: 1;
}
.erd-search-close:hover{ color: var(--erd-dark); }
/* Mobile nav (offcanvas içeriği) */
.erd-mobile-nav{ display: flex; flex-direction: column; gap: 0; }
.erd-mobile-nav a{
font-family: var(--erd-font-body);
font-size: .82rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--erd-dark);
padding: 1rem 0;
border-bottom: 1px solid var(--erd-border);
}
.erd-mobile-nav a:hover{ color: var(--erd-primary); }
/* ============================================
LOGO — inline SVG
============================================ */
.erd-logo-svg svg{ width: 100%; height: auto; display: block; }
.erd-logo-svg .erd-text{
font-family: "Fredoka", "Quicksand", "Nunito", "Poppins", sans-serif;
font-weight: 700;
letter-spacing: -2px;
}
/* ============================================
HERO — Kompakt banner (Köyden Gelsin tarzı)
============================================ */
.erd-hero-banner{
position: relative;
height: 560px;
overflow: hidden;
background: #1F2418;
display: flex; align-items: center;
font-family: "Onest", sans-serif;
}
.erd-hero-banner-bg{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; z-index: 0;
filter: contrast(1.02) saturate(.95);
}
.erd-hero-banner-overlay{
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(31,36,24,.55) 0%, rgba(31,36,24,.65) 100%);
}
.erd-hero-banner-content{
position: relative; z-index: 2;
color: #FEF8E0;
max-width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.erd-hero-banner-content p{
margin-left: auto;
margin-right: auto;
max-width: 600px;
}
.erd-hero-banner-content h1{
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: clamp(1.6rem, 3.4vw, 2.6rem);
line-height: 1.15;
letter-spacing: -.02em;
color: #FEF8E0;
margin: 0 0 .6rem;
}
.erd-hero-banner-content p{
font-size: .98rem;
color: rgba(254,248,224,.85);
margin: 0 auto 1.4rem;
}
.erd-hero-search{
display: flex; gap: 0;
background: #fff;
border-radius: 999px;
padding: 5px;
width: 100%;
max-width: 460px;
margin: 0 auto;
box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.erd-hero-search input{
flex: 1;
border: 0; background: transparent; outline: 0;
padding: .55rem 1rem;
font-size: .88rem; color: #2B2E22;
font-family: "Onest", sans-serif;
min-width: 0;
}
.erd-hero-search button{
border: 0;
background: #DCA62B;
color: #433014;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: .85rem;
padding: .45rem 1.1rem;
border-radius: 999px;
cursor: pointer;
display: inline-flex; align-items: center; gap: .4rem;
transition: background .2s ease;
white-space: nowrap;
}
.erd-hero-search button:hover{ background: #C68F1B; }
@media (max-width: 991.98px){
.erd-hero-banner{ height: 460px; }
.erd-hero-banner-content{ max-width: 100%; }
}
@media (max-width: 767.98px){
.erd-hero-banner{ height: 420px; text-align: center; }
.erd-hero-banner-overlay{
background: linear-gradient(180deg, rgba(31,36,24,.50) 0%, rgba(31,36,24,.88) 100%);
}
.erd-hero-banner-content{
max-width: 100%;
padding: 0 .5rem;
}
.erd-hero-banner-content h1{
font-size: 1.65rem;
line-height: 1.2;
margin-bottom: .55rem;
}
.erd-hero-banner-content p{
font-size: .92rem;
line-height: 1.45;
margin-bottom: 1.2rem;
max-width: 92%;
margin-left: auto; margin-right: auto;
}
.erd-hero-search{
margin-left: auto; margin-right: auto;
}
}
@media (max-width: 575.98px){
.erd-hero-banner{ height: 440px; }
.erd-hero-banner-content h1{
font-size: 1.45rem;
}
.erd-hero-banner-content p{
font-size: .85rem;
}
.erd-hero-search{
flex-direction: column;
border-radius: 14px;
padding: 6px;
gap: 6px;
width: 100%;
}
.erd-hero-search input{
padding: .75rem 1rem;
font-size: .9rem;
text-align: center;
}
.erd-hero-search input::placeholder{
font-size: .8rem;
}
.erd-hero-search button{
width: 100%;
justify-content: center;
padding: .7rem;
font-size: .92rem;
}
}
/* ============================================
KATEGORİ HIZLI GEÇİŞ ŞERİDİ
============================================ */
.erd-cat-strip{
background: #FAF6EB;
border-bottom: 1px solid #E5DDC7;
padding: 1.5rem 0;
}
.erd-cat-strip-grid{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: .5rem;
}
.erd-cat-strip-item{ min-width: 0; }
.erd-cat-strip-item{
display: flex; flex-direction: column; align-items: center; gap: .55rem;
padding: .75rem .5rem;
text-align: center;
border: 1px solid transparent;
border-radius: 12px;
transition: all .15s ease;
background: #fff;
font-family: "Onest", sans-serif;
}
.erd-cat-strip-item:hover{
border-color: #DCA62B;
background: #FFF8E2;
transform: translateY(-2px);
}
.erd-cat-strip-icon{
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
color: #433014;
}
.erd-cat-strip-icon svg{ width: 32px; height: 32px; }
.erd-cat-strip-item:hover .erd-cat-strip-icon{ color: #DCA62B; }
.erd-cat-strip-name{
font-size: .78rem;
font-weight: 600;
color: #2B2E22;
line-height: 1.2;
}
@media (max-width: 991.98px){
.erd-cat-strip{ padding: 1rem 0; }
.erd-cat-strip-grid{ grid-template-columns: repeat(3, 1fr); gap: .4rem; }
/* 10 kategori 3 sütunda 4. satıra tek başına bir kategori atıyor → Çarşı'yı mobile'da gizle */
.erd-cat-strip-grid .erd-cat-strip-item[href*="cat=carsi"]{ display: none; }
}
@media (max-width: 575.98px){
.erd-cat-strip-grid{ grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.erd-cat-strip-item{ padding: .5rem .25rem; }
.erd-cat-strip-icon{ width: 36px; height: 36px; }
.erd-cat-strip-icon svg{ width: 26px; height: 26px; }
.erd-cat-strip-name{ font-size: .7rem; }
}
/* ============================================
KATEGORİ ÜRÜN ŞERİTLERİ
============================================ */
.erd-cat-section{
padding: 2.5rem 0 1rem;
background: #fff;
}
.erd-cat-section:nth-child(even of .erd-cat-section){ background: #FAF6EB; }
.erd-cat-section-head{
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 1.4rem;
padding-bottom: .85rem;
border-bottom: 1px solid #E5DDC7;
}
.erd-cat-section-head h2{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -.015em;
color: #1F2418;
margin: 0;
display: inline-flex; align-items: center; gap: .65rem;
}
.erd-cat-section-icon{
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: #FFF3D6;
color: #DCA62B;
border-radius: 10px;
}
.erd-cat-section-icon svg{ width: 24px; height: 24px; }
.erd-cat-section-all{
font-family: "Onest", sans-serif;
font-size: .88rem;
font-weight: 600;
color: #433014;
display: inline-flex; align-items: center; gap: .4rem;
letter-spacing: .01em;
}
.erd-cat-section-all:hover{ color: #DCA62B; }
.erd-cat-section-all i{ transition: transform .2s ease; }
.erd-cat-section-all:hover i{ transform: translateX(4px); }
.erd-product-grid-4{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
@media (max-width: 991.98px){
.erd-product-grid-4{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px){
.erd-product-grid-4{ grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
@media (max-width: 575.98px){
.erd-cat-section{ padding: 1.5rem 0 .5rem; }
.erd-cat-section-head h2{ font-size: 1.15rem; }
.erd-cat-section-icon{ width: 32px; height: 32px; }
.erd-cat-section-icon svg{ width: 20px; height: 20px; }
}
/* Eski editorial hero CSS'leri (artık kullanılmıyor ama silmedik) */
.erd-hero-fullvideo{
position: relative;
min-height: 92vh;
display: flex; align-items: center;
overflow: hidden;
background: #1F2418;
color: #FEF8E0;
font-family: "Onest", sans-serif;
}
.erd-hero-fullvideo-bg{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
filter: contrast(1.02) saturate(.92);
}
.erd-hero-fullvideo-overlay{
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(31,36,24,.55) 0%, rgba(31,36,24,.55) 60%, rgba(31,36,24,.85) 100%);
}
.erd-hero-fullvideo-content{
position: relative; z-index: 2;
padding: 9rem 0 7rem;
width: 100%;
}
.erd-hero-kicker{
display: inline-block;
font-family: "Onest", sans-serif;
font-size: .76rem;
font-weight: 500;
letter-spacing: .32em;
text-transform: uppercase;
color: #DCA62B;
margin-bottom: 2rem;
padding-left: 60px;
position: relative;
}
.erd-hero-kicker::before{
content: ""; position: absolute;
left: 0; top: 50%;
width: 44px; height: 1px;
background: #DCA62B;
}
.erd-hero-fv-title{
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: clamp(2.6rem, 7vw, 6rem);
line-height: 1;
letter-spacing: -.035em;
color: #FEF8E0;
margin: 0 0 2rem;
max-width: 18ch;
}
.erd-hero-fv-title-2{
display: inline-block;
position: relative;
font-weight: 700;
color: #DCA62B;
font-style: italic;
}
.erd-hero-fv-text{
font-family: "Onest", sans-serif;
font-weight: 400;
font-size: clamp(1.05rem, 1.4vw, 1.18rem);
line-height: 1.6;
color: rgba(254,248,224,.86);
max-width: 540px;
margin: 0 0 2.5rem;
}
.erd-hero-fv-cta{
display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
}
.erd-hero-fv-link{
font-family: "Onest", sans-serif;
font-weight: 500;
font-size: 1rem;
color: #FEF8E0;
letter-spacing: .04em;
position: relative;
padding-bottom: 4px;
}
.erd-hero-fv-link::after{
content: ""; position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px; background: rgba(254,248,224,.4);
}
.erd-hero-fv-link:hover{ color: #DCA62B; }
.erd-hero-fv-link:hover::after{ background: #DCA62B; }
/* Editorial scroll cue, sağ alt köşede dikey */
.erd-hero-scroll{
position: absolute;
right: 4vw; bottom: 3rem;
z-index: 3;
writing-mode: vertical-rl;
display: flex; align-items: center; gap: 1rem;
font-family: "Onest", sans-serif;
font-size: .7rem;
font-weight: 500;
letter-spacing: .32em;
text-transform: uppercase;
color: rgba(254,248,224,.7);
}
.erd-hero-scroll-line{
display: inline-block;
width: 1px; height: 70px;
background: linear-gradient(to bottom, transparent, #DCA62B 50%, transparent);
animation: erdScroll 2.4s ease-in-out infinite;
}
@keyframes erdScroll{
0%{ transform: translateY(-12px); opacity: .3; }
50%{ transform: translateY(0); opacity: 1; }
100%{ transform: translateY(12px); opacity: .3; }
}
.erd-hero-scroll:hover{ color: #DCA62B; }
/* Şablonun vl-btn8 stilini hero overlay üzerinde de net göstermek için */
.erd-hero-fullvideo .vl-btn8{
position: relative; z-index: 3;
}
@media (max-width: 991.98px){
.erd-hero-fullvideo{ min-height: 78vh; }
.erd-hero-fullvideo-content{ padding: 6rem 0 4rem; }
.erd-hero-scroll{ display: none; }
}
@media (max-width: 575.98px){
.erd-hero-fullvideo{ min-height: 80vh; }
.erd-hero-fullvideo-content{ padding: 4rem 0 3rem; }
.erd-hero-fv-cta{ flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.erd-hero-kicker{ padding-left: 0; margin-bottom: 1.4rem; font-size: .7rem; }
.erd-hero-kicker::before{ display: none; }
}
/* ============================================
HERO — Editorial / dergi açılış sayfası (eski)
============================================ */
.erd-hero{
background: var(--erd-paper);
padding: 3.5rem 0 4rem;
border-bottom: 1px solid var(--erd-rule);
font-family: var(--erd-font-body);
}
.erd-hero-issue{
font-size: .72rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--erd-muted);
margin: 0 0 2rem;
display: flex; align-items: center; gap: 1rem;
}
.erd-hero-issue::before, .erd-hero-issue::after{
content: ""; flex: 0 0 auto; width: 32px; height: 1px; background: var(--erd-rule); opacity: .5;
}
.erd-hero-issue::after{ flex: 1; }
.erd-hero-title{
font-family: var(--erd-font-display);
font-variation-settings: "opsz" 144, "SOFT" 30;
font-weight: 350;
font-size: clamp(2.6rem, 7vw, 6rem);
line-height: .98;
letter-spacing: -.025em;
color: var(--erd-dark);
margin: 0 0 2.5rem;
max-width: 14ch;
}
.erd-hero-title em{
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 90;
font-weight: 380;
color: var(--erd-primary);
padding: 0 .04em;
}
.erd-hero-title-row{ display: block; }
.erd-hero-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
align-items: end;
padding-top: 1rem;
border-top: 1px solid var(--erd-rule);
}
.erd-hero-lead p{
font-family: var(--erd-font-display);
font-variation-settings: "opsz" 80, "SOFT" 60;
font-weight: 380;
font-size: 1.18rem;
line-height: 1.55;
color: var(--erd-text);
max-width: 38ch;
margin: 0 0 2rem;
}
.erd-hero-lead p em{
font-style: italic;
font-weight: 500;
color: var(--erd-dark);
}
.erd-hero-actions{
display: flex; align-items: center; gap: 2.5rem;
margin-top: 1.5rem;
}
.erd-link-cta{
display: inline-flex; align-items: center; gap: 1rem;
font-family: var(--erd-font-body);
font-size: .78rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--erd-dark);
padding: 4px 0;
}
.erd-link-cta svg{ transition: transform .25s ease; }
.erd-link-cta:hover{ color: var(--erd-primary); }
.erd-link-cta:hover svg{ transform: translateX(6px); color: var(--erd-primary); }
.erd-link-quiet{
font-family: var(--erd-font-display);
font-style: italic;
font-size: 1rem;
color: var(--erd-muted);
border-bottom: 1px solid var(--erd-muted);
padding-bottom: 2px;
}
.erd-link-quiet:hover{ color: var(--erd-dark); border-color: var(--erd-dark); }
.erd-hero-figure{
margin: 0;
position: relative;
}
.erd-hero-figure video{
width: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
display: block;
filter: contrast(.96) saturate(.88);
border: 1px solid var(--erd-rule);
}
.erd-hero-figure figcaption{
display: flex; gap: 1rem; align-items: baseline;
padding-top: .85rem;
font-family: var(--erd-font-display);
font-style: italic;
font-size: .9rem;
color: var(--erd-muted);
border-top: 1px dotted var(--erd-border);
margin-top: .65rem;
}
.erd-hero-figcap-num{
font-family: var(--erd-font-body);
font-style: normal;
font-size: .68rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--erd-dark);
border: 1px solid var(--erd-rule);
padding: 2px 8px;
}
.erd-hero-foot{
margin-top: 3.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--erd-rule);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--erd-rule);
}
.erd-hero-foot > div{
background: var(--erd-paper);
padding: 1rem 1.2rem 0;
display: flex; flex-direction: column; gap: .15rem;
}
.erd-hero-foot span{
font-size: .7rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--erd-muted);
}
.erd-hero-foot b{
font-family: var(--erd-font-display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 50;
font-weight: 400;
font-size: 2rem;
color: var(--erd-dark);
line-height: 1;
}
@media (max-width: 991.98px){
.erd-hero{ padding: 2rem 0 3rem; }
.erd-hero-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
.erd-hero-figure video{ aspect-ratio: 4 / 3; }
.erd-hero-foot{ grid-template-columns: 1fr 1fr; }
.erd-hero-foot b{ font-size: 1.6rem; }
}
@media (max-width: 575.98px){
.erd-hero-title{ font-size: 2.4rem; }
.erd-hero-actions{ flex-direction: column; align-items: flex-start; gap: 1rem; }
}
/* ---------- Strip / promo bar ---------- */
.erd-strip{
background: var(--erd-cream); border-bottom: 1px solid var(--erd-border);
padding: .9rem 0;
}
.erd-strip-row{
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem; align-items: center;
}
.erd-strip-row > div{
display: flex; align-items: center; gap: .55rem;
font-size: .87rem; color: var(--erd-dark);
}
.erd-strip-row i{ color: var(--erd-primary); font-size: 1rem; }
.erd-strip-row b{ color: var(--erd-primary); }
/* ---------- Eyebrow ---------- */
.erd-eyebrow{
display: inline-block; font-size: .78rem; font-weight: 700;
color: var(--erd-primary); text-transform: uppercase; letter-spacing: .08em;
margin-bottom: .35rem;
}
.erd-eyebrow-accent{ color: var(--erd-accent); }
.erd-eyebrow-light{ color: rgba(255,255,255,.85); }
/* ---------- Sections ---------- */
.erd-section{ padding: 3rem 0; }
.erd-section-alt{ background: var(--erd-bg-alt); }
.erd-section-head{
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 1.5rem;
}
.erd-section-head h2{
margin: 0; font-size: 1.6rem;
}
/* ---------- Categories grid ---------- */
.erd-cat-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
}
.erd-cat-card{
background: #fff;
border: 1px solid var(--erd-border);
border-radius: var(--erd-radius);
padding: 1.4rem 1rem;
text-align: center;
transition: all .2s ease;
display: block;
}
.erd-cat-card:hover{
border-color: var(--erd-primary);
box-shadow: var(--erd-shadow-hover);
transform: translateY(-3px);
}
.erd-cat-icon{
font-size: 2.4rem;
line-height: 1;
margin-bottom: .6rem;
}
.erd-cat-name{
display: block;
font-weight: 600;
color: var(--erd-dark);
font-size: .95rem;
}
/* ---------- Product grid / card ---------- */
.erd-product-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.2rem;
}
.erd-product-card{
background: #fff;
border: 1px solid var(--erd-border);
border-radius: var(--erd-radius);
overflow: hidden;
display: flex; flex-direction: column;
transition: all .2s ease;
}
.erd-product-card:hover{
border-color: var(--erd-primary-2);
box-shadow: var(--erd-shadow-hover);
}
.erd-product-image{
position: relative;
aspect-ratio: 1 / 1;
background: var(--erd-bg-alt);
display: block;
overflow: hidden;
}
.erd-product-image img{
width: 100%; height: 100%; object-fit: cover;
transition: transform .35s ease;
}
.erd-product-card:hover .erd-product-image img{ transform: scale(1.04); }
.erd-product-badge{
position: absolute; top: 12px; left: 12px;
background: var(--erd-accent); color: #fff;
font-size: .72rem; font-weight: 700;
padding: .25rem .6rem; border-radius: 999px;
letter-spacing: .02em;
}
.erd-product-body{
padding: 1rem;
display: flex; flex-direction: column; gap: .55rem;
flex: 1;
}
.erd-product-name{
font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.3;
}
.erd-product-name a{ color: var(--erd-dark); }
.erd-product-name a:hover{ color: var(--erd-primary); }
.erd-product-desc{
margin: 0; color: var(--erd-muted); font-size: .82rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.erd-product-price{
display: flex; align-items: baseline; gap: .55rem;
}
.erd-price-now{
color: var(--erd-primary); font-weight: 700; font-size: 1.1rem;
}
.erd-price-old{
color: var(--erd-muted); text-decoration: line-through; font-size: .85rem;
}
.erd-product-form{
margin-top: auto;
display: flex; flex-direction: column; gap: .5rem;
}
.erd-variant-select{
width: 100%; padding: .5rem .75rem;
border: 1px solid var(--erd-border); border-radius: var(--erd-radius-sm);
background: #fff; font-size: .85rem; color: var(--erd-text);
cursor: pointer;
}
.erd-variant-select:focus{
outline: 0; border-color: var(--erd-primary);
}
.erd-variant-fixed{
display: inline-block;
background: var(--erd-bg-alt); color: var(--erd-muted);
padding: .4rem .75rem; border-radius: var(--erd-radius-sm);
font-size: .82rem;
}
/* Ürün kartı: gramaj seçim pill'leri */
.erd-card-variants{
display: flex; flex-wrap: wrap; gap: 5px;
margin-bottom: .25rem;
}
.erd-card-variant{
position: relative;
display: inline-flex; align-items: center; justify-content: center;
padding: .35rem .65rem;
border: 1px solid #D9CFB8;
border-radius: 999px;
font-family: "Onest", sans-serif;
font-size: .78rem;
font-weight: 500;
color: #2B2E22;
background: #fff;
cursor: pointer;
transition: all .15s ease;
white-space: nowrap;
user-select: none;
}
.erd-card-variant input{
position: absolute; inset: 0;
opacity: 0; cursor: pointer;
}
.erd-card-variant:hover{
border-color: #DCA62B;
color: #433014;
}
.erd-card-variant.is-active{
background: #433014;
border-color: #433014;
color: #FEF8E0;
font-weight: 600;
}
.erd-card-variant.is-oos{
opacity: .45;
cursor: not-allowed;
text-decoration: line-through;
}
.erd-card-variant-single{
background: #F5EFE0;
border-color: #D9CFB8;
color: #6F6852;
cursor: default;
pointer-events: none;
}
/* Ürün kartı: adet + sepete ekle (alt alta) */
.erd-card-actions{
display: flex; flex-direction: column; gap: .4rem;
}
.erd-qty-input-sm{
display: flex; align-items: center; justify-content: space-between;
width: 100%;
border: 1px solid #E5DDC7;
background: #fff;
border-radius: 999px;
overflow: hidden;
}
.erd-qty-input-sm .erd-qty-btn{
width: 38px; height: 36px;
font-size: 1.05rem;
flex: 0 0 auto;
}
.erd-qty-input-sm .erd-qty-field{
flex: 1;
height: 36px;
font-size: .9rem;
font-weight: 600;
text-align: center;
min-width: 0;
}
.erd-card-add{
width: 100%;
white-space: nowrap;
justify-content: center;
}
/* ---------- Features ---------- */
.erd-feature{
background: #fff;
border: 1px solid var(--erd-border);
border-radius: var(--erd-radius);
padding: 1.4rem 1.2rem;
text-align: center;
height: 100%;
}
.erd-feature i{
font-size: 2rem; color: var(--erd-primary);
margin-bottom: .8rem; display: block;
}
.erd-feature h5{ margin: 0 0 .4rem; font-size: 1.05rem; }
.erd-feature p{ margin: 0; color: var(--erd-muted); font-size: .88rem; }
/* ============================================
TRUST — güven kuşağı (kart stili)
============================================ */
.erd-trust{
background: linear-gradient(180deg, #FAF6EB 0%, #F4ECCD 100%);
border-top: 1px solid #E5DDC7;
padding: 2.5rem 0;
font-family: "Onest", sans-serif;
}
.erd-trust-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.erd-trust-card{
display: flex; align-items: center; gap: 1rem;
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
transition: all .2s ease;
position: relative;
overflow: hidden;
}
.erd-trust-card::before{
content: ""; position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #DCA62B 0%, transparent 100%);
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.erd-trust-card:hover{
border-color: #DCA62B;
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(67,48,20,.10);
}
.erd-trust-card:hover::before{ transform: scaleX(1); }
.erd-trust-ico{
flex-shrink: 0;
width: 56px; height: 56px;
background: #FFF3D6;
color: #B7831A;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid #ECD58E;
transition: all .2s ease;
}
.erd-trust-card:hover .erd-trust-ico{
background: #DCA62B;
border-color: #DCA62B;
color: #1F2418;
transform: rotate(-6deg);
}
.erd-trust-card b{
display: block;
color: #1F2418;
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
margin-bottom: 3px;
}
.erd-trust-card span{
color: #6F6852;
font-size: .82rem;
line-height: 1.3;
}
@media (max-width: 991.98px){
.erd-trust{ padding: 2rem 0; }
.erd-trust-grid{ grid-template-columns: repeat(2, 1fr); gap: .8rem; }
}
@media (max-width: 575.98px){
.erd-trust{ padding: 1.5rem 0; }
.erd-trust-card{ padding: .85rem 1rem; gap: .8rem; }
.erd-trust-ico{ width: 44px; height: 44px; }
.erd-trust-ico svg{ width: 22px; height: 22px; }
.erd-trust-card b{ font-size: .88rem; }
.erd-trust-card span{ font-size: .72rem; }
}
/* ============================================
NEWSLETTER BAND
============================================ */
.erd-newsletter-band{
background: linear-gradient(135deg, #DCA62B 0%, #C68F1B 100%);
padding: 2.5rem 0;
font-family: "Onest", sans-serif;
}
.erd-newsletter-row{
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
}
.erd-newsletter-text h3{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.4rem;
color: #1F2418;
margin: 0 0 .25rem;
letter-spacing: -.01em;
}
.erd-newsletter-text p{
margin: 0;
color: rgba(31,36,24,.78);
font-size: .93rem;
}
.erd-newsletter-form-band{
display: flex;
background: #fff;
border-radius: 999px;
padding: 6px;
min-width: 380px;
box-shadow: 0 8px 24px rgba(67,48,20,.18);
}
.erd-newsletter-form-band input{
flex: 1;
border: 0; background: transparent; outline: 0;
padding: .65rem 1.2rem;
font-family: "Onest", sans-serif;
font-size: .93rem;
color: #2B2E22;
min-width: 0;
}
.erd-newsletter-form-band button{
border: 0;
background: #1F2418;
color: #FEF8E0;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: .9rem;
padding: .55rem 1.4rem;
border-radius: 999px;
cursor: pointer;
display: inline-flex; align-items: center; gap: .45rem;
white-space: nowrap;
transition: background .2s ease;
}
.erd-newsletter-form-band button:hover{ background: #2F3D26; }
@media (max-width: 991.98px){
.erd-newsletter-row{ grid-template-columns: 1fr; gap: 1.2rem; }
.erd-newsletter-form-band{ min-width: 0; width: 100%; }
}
@media (max-width: 575.98px){
.erd-newsletter-band{ padding: 1.8rem 0; }
.erd-newsletter-text h3{ font-size: 1.15rem; }
.erd-newsletter-form-band{ flex-direction: column; border-radius: 14px; gap: 6px; }
.erd-newsletter-form-band input{ text-align: center; }
.erd-newsletter-form-band button{ width: 100%; justify-content: center; padding: .7rem; }
}
/* ============================================
FOOTER
============================================ */
.erd-footer{
background: #1F2418;
color: #C8C0A6;
padding: 3rem 0 1.5rem;
font-family: "Onest", sans-serif;
position: relative;
}
.erd-footer::before{
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, #DCA62B 50%, transparent);
}
.erd-footer-grid{
display: grid;
grid-template-columns: 1.5fr 1fr 1.1fr 1.1fr;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.erd-footer-brand .erd-footer-logo{
max-height: 60px; width: auto;
margin-bottom: 1rem;
}
.erd-footer-desc{
color: rgba(254,248,224,.65);
font-size: .88rem;
line-height: 1.65;
margin: 0 0 1.4rem;
max-width: 360px;
}
.erd-footer-social{
display: flex; gap: .5rem;
}
.erd-footer-social a{
width: 36px; height: 36px; border-radius: 50%;
background: rgba(254,248,224,.06);
border: 1px solid rgba(254,248,224,.12);
color: #FEF8E0;
display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem;
transition: all .2s ease;
}
.erd-footer-social a:hover{
background: #DCA62B;
border-color: #DCA62B;
color: #1F2418;
transform: translateY(-2px);
}
.erd-footer-col h3, .erd-footer-col h4, .erd-footer-col h5{
color: #FEF8E0;
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 1.2rem;
position: relative;
padding-bottom: .6rem;
}
.erd-footer-col h3::after, .erd-footer-col h4::after, .erd-footer-col h5::after{
content: "";
position: absolute;
left: 0; bottom: 0;
width: 24px; height: 2px;
background: #DCA62B;
}
.erd-footer-col ul{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .55rem;
}
.erd-footer-col ul a{
color: rgba(254,248,224,.72);
font-size: .88rem;
transition: color .2s ease, padding-left .2s ease;
display: inline-block;
}
.erd-footer-col ul a:hover{
color: #DCA62B;
padding-left: 4px;
}
.erd-footer-contact li{
display: grid;
grid-template-columns: 22px 1fr;
gap: .65rem;
align-items: flex-start;
font-size: .88rem;
color: rgba(254,248,224,.72);
}
.erd-footer-contact i{
color: #DCA62B;
margin-top: 5px;
font-size: .9rem;
}
.erd-footer-contact a{
color: rgba(254,248,224,.72);
}
.erd-footer-contact a:hover{ color: #DCA62B; }
/* Alt çizgi: copyright + ödeme + atazen */
.erd-footer-bottom{
padding-top: 1.5rem;
border-top: 1px solid rgba(254,248,224,.10);
font-size: .82rem;
}
.erd-footer-bottom-row{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.erd-footer-atazen{
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(254,248,224,.06);
color: rgba(254,248,224,.55);
font-size: .72rem;
letter-spacing: .04em;
text-decoration: none;
transition: color .2s ease, opacity .2s ease;
}
.erd-footer-atazen small{
font-style: italic;
font-size: .72rem;
font-weight: 400;
}
.erd-footer-atazen-logo{
height: 32px !important;
width: auto !important;
max-width: 140px;
opacity: .8;
transition: opacity .2s ease;
}
.erd-footer-atazen:hover{
color: rgba(254,248,224,.85);
}
.erd-footer-atazen:hover .erd-footer-atazen-logo{
opacity: 1;
}
.erd-footer-copy{
color: rgba(254,248,224,.55);
}
.erd-footer-copy b{ color: #FEF8E0; font-weight: 700; }
.erd-footer-copy a{ color: rgba(254,248,224,.72); margin-left: .35rem; }
.erd-footer-copy a:hover{ color: #DCA62B; }
.erd-footer-pay{
display: flex; align-items: center; gap: .5rem;
flex-wrap: wrap;
}
.erd-pay-label{
color: rgba(254,248,224,.55);
font-size: .75rem;
letter-spacing: .08em;
text-transform: uppercase;
margin-right: .25rem;
}
.erd-pay-banks{
height: 22px !important;
width: auto !important;
max-width: 240px;
display: block;
opacity: .85;
}
.erd-pay-icon{
display: inline-flex; align-items: center; justify-content: center;
height: 28px;
padding: 0 10px;
background: rgba(254,248,224,.10);
border: 1px solid rgba(254,248,224,.18);
border-radius: 6px;
color: rgba(254,248,224,.85);
transition: all .2s ease;
}
.erd-pay-icon:hover{
color: #DCA62B;
border-color: rgba(220,166,43,.5);
background: rgba(220,166,43,.1);
}
.erd-pay-text{
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.erd-ssl-badge{
display: inline-flex; align-items: center; gap: .35rem;
padding: .25rem .6rem;
border: 1px solid rgba(220,166,43,.5);
background: rgba(220,166,43,.1);
color: #DCA62B;
border-radius: 999px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
margin-left: .35rem;
}
@media (max-width: 991.98px){
.erd-footer{ padding: 2.5rem 0 1.5rem; }
.erd-footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem; }
.erd-footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 575.98px){
.erd-footer-grid{ grid-template-columns: 1fr; gap: 1.8rem; margin-bottom: 2rem; }
.erd-footer-bottom{ flex-direction: column; align-items: flex-start; text-align: left; }
.erd-footer-pay{ flex-wrap: wrap; }
}
/* ============================================
HEADER (yeni)
============================================ */
.erd-header{
background: #FAF6EB;
font-family: "Onest", sans-serif;
position: sticky;
top: 0;
z-index: 90;
box-shadow: 0 2px 0 rgba(31,36,24,.04);
transition: box-shadow .2s ease;
}
/* Sayfa scroll edilince hafif gölge belirir */
.erd-header.is-scrolled{
box-shadow: 0 6px 20px rgba(31,36,24,.08);
}
/* Topbar */
.erd-h-topbar{
background: #1F2418;
color: rgba(254,248,224,.88);
font-size: .78rem;
border-bottom: 1px solid #2A3221;
}
.erd-h-topbar .container{
display: flex; justify-content: space-between; align-items: center;
gap: 1.5rem;
min-height: 38px;
padding-top: .35rem; padding-bottom: .35rem;
}
.erd-h-topbar-info{
list-style: none; margin: 0; padding: 0;
display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.erd-h-topbar-info li{
display: inline-flex; align-items: center; gap: .45rem;
letter-spacing: .01em;
}
.erd-h-topbar-info i{ color: #DCA62B; font-size: .85rem; }
.erd-h-topbar-right{
display: flex; align-items: center; gap: .85rem;
}
.erd-h-topbar-right a{
color: rgba(254,248,224,.88);
text-decoration: none;
display: inline-flex; align-items: center; gap: .4rem;
transition: color .15s ease;
}
.erd-h-topbar-right a:hover{ color: #DCA62B; }
.erd-h-topbar-right i{ color: #DCA62B; }
.erd-h-topbar-sep{
width: 1px; height: 14px;
background: rgba(254,248,224,.18);
}
@media (max-width: 991.98px){
.erd-h-topbar{ display: none; }
}
/* Ana bar */
.erd-h-main{
background: #FAF6EB;
}
.erd-h-main .container{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center; gap: 1.5rem;
padding-top: 1rem; padding-bottom: 1rem;
}
.erd-h-main .container > .erd-h-logo{ justify-self: start; }
.erd-h-main .container > .erd-h-search{
justify-self: stretch;
width: 100%;
max-width: 100%;
}
.erd-h-main .container > .erd-h-actions{ justify-self: end; }
.erd-h-burger{
background: transparent;
border: 1px solid #E5DDC7;
border-radius: 10px;
width: 42px; height: 42px;
padding: 0;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
cursor: pointer;
-webkit-appearance: none; appearance: none;
flex-shrink: 0;
transition: all .15s ease;
}
.erd-h-burger:hover{ background: #1F2418; border-color: #1F2418; }
.erd-h-burger span{ display: block; width: 18px; height: 1.8px; background: #1F2418; border-radius: 2px; transition: background .15s ease; }
.erd-h-burger:hover span{ background: #DCA62B; }
.erd-h-logo{
flex-shrink: 0;
display: inline-flex; align-items: center;
text-decoration: none;
}
.erd-h-logo img{
height: 56px; width: auto; display: block;
}
.erd-h-search{
flex: 1;
display: flex; align-items: center; gap: .5rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 999px;
padding: 5px 5px 5px 18px;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
transition: all .15s ease;
}
.erd-h-search:focus-within{
border-color: #DCA62B;
box-shadow: 0 0 0 4px rgba(220,166,43,.14);
}
.erd-h-search > svg{ color: #98906F; flex-shrink: 0; }
.erd-h-search input{
flex: 1;
border: 0; background: transparent; outline: 0;
padding: .55rem .25rem;
font-family: "Onest", sans-serif;
font-size: .9rem;
color: #1F2418;
min-width: 0;
}
.erd-h-search input::placeholder{ color: #98906F; }
.erd-h-search button{
background: #1F2418;
color: #FEF8E0;
border: 0;
font-family: "Onest", sans-serif;
font-weight: 600; font-size: .85rem;
padding: .5rem 1.4rem;
border-radius: 999px;
cursor: pointer;
-webkit-appearance: none; appearance: none;
letter-spacing: .02em;
transition: background .15s ease;
}
.erd-h-search button:hover{ background: #DCA62B; color: #1F2418; }
.erd-h-actions{
display: flex; align-items: center; gap: .55rem;
margin-left: auto;
flex-shrink: 0;
}
.erd-h-account{
display: inline-flex; align-items: center; gap: .55rem;
padding: .35rem .85rem .35rem .5rem;
border: 1px solid #E5DDC7;
border-radius: 999px;
color: #1F2418;
text-decoration: none;
transition: all .15s ease;
}
.erd-h-account:hover{ border-color: #DCA62B; background: #FFF8E2; color: #1F2418; }
.erd-h-account-avatar{
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #DCA62B, #C68F1B);
color: #1F2418;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .82rem;
}
.erd-h-account-text{ display: flex; flex-direction: column; line-height: 1.1; }
.erd-h-account-text small{ font-size: .68rem; color: #98906F; }
.erd-h-account-text b{ font-size: .82rem; color: #1F2418; font-weight: 600; }
.erd-h-account-guest{ padding: .4rem .85rem; }
.erd-h-account-guest svg{ color: #6F6852; }
.erd-h-icon{
position: relative;
width: 44px; height: 44px;
background: transparent;
border: 1px solid #E5DDC7;
border-radius: 50%;
color: #1F2418;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
box-sizing: border-box;
-webkit-appearance: none; appearance: none;
padding: 0;
outline: 0;
transition: all .15s ease;
}
.erd-h-icon:hover{
background: #FFF3D6;
border-color: #DCA62B;
color: #DCA62B;
}
.erd-h-icon:focus-visible{ outline: 2px solid #DCA62B; outline-offset: 2px; }
.erd-h-icon-cart:hover{ color: #C73E2B; border-color: #C73E2B; background: #FEE; }
.erd-h-badge{
position: absolute;
top: -4px; right: -4px;
background: #DCA62B;
color: #1F2418;
font-size: .68rem;
font-weight: 700;
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: 999px;
border: 2px solid #FAF6EB;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
.erd-h-badge[hidden]{ display: none; }
.erd-h-badge-cart{ background: #C73E2B; color: #fff; }
/* Mobile arama (mainbar altında ayrı satır) */
.erd-h-search-mobile{
background: #FAF6EB;
padding-bottom: .8rem;
}
.erd-h-search-mobile .erd-h-search{
max-width: 100%;
padding: 4px 4px 4px 14px;
}
.erd-h-search-mobile .erd-h-search button{
padding: .45rem 1.1rem;
font-size: .82rem;
}
/* Kategori navı (PC) */
.erd-h-nav{
background: #1F2418;
border-top: 1px solid #2A3221;
}
.erd-h-nav ul{
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; gap: .15rem;
}
.erd-h-nav li{ position: relative; }
.erd-h-nav li.ms-auto{ margin-left: auto; }
.erd-h-nav a{
display: inline-flex; align-items: center; gap: .5rem;
padding: .85rem 1.1rem;
color: rgba(254,248,224,.85);
font-family: "Onest", sans-serif;
font-size: .87rem;
font-weight: 500;
letter-spacing: .02em;
text-decoration: none;
transition: color .15s ease, background .15s ease;
}
.erd-h-nav a:hover, .erd-h-nav a.active{
color: #DCA62B;
background: rgba(220,166,43,.06);
}
.erd-h-nav a i{ font-size: .85rem; opacity: .8; }
.erd-h-nav-mega > a svg{ transition: transform .2s ease; }
.erd-h-nav-mega:hover > a svg{ transform: rotate(180deg); }
/* Mega dropdown — kategoriler */
.erd-h-mega{
position: absolute;
top: 100%; left: 0;
background: #fff;
border: 1px solid #E5DDC7;
border-top: 3px solid #DCA62B;
border-radius: 0 0 12px 12px;
padding: 1rem;
min-width: 520px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .25rem;
box-shadow: 0 16px 40px rgba(31,36,24,.12);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all .2s ease;
z-index: 60;
}
.erd-h-nav-mega:hover .erd-h-mega,
.erd-h-nav-mega:focus-within .erd-h-mega{
opacity: 1; visibility: visible; transform: translateY(0);
}
.erd-h-mega a{
display: flex; align-items: center; gap: .75rem;
padding: .65rem .85rem;
color: #1F2418 !important;
font-size: .88rem;
font-weight: 600;
background: transparent;
border-radius: 8px;
transition: all .15s ease;
}
.erd-h-mega a:hover{
background: #FFF3D6 !important;
color: #433014 !important;
}
.erd-h-mega-ico{
width: 36px; height: 36px;
background: #FAF6EB;
color: #DCA62B;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.erd-h-mega-ico svg{ width: 22px; height: 22px; }
/* Mobile düzenlemeler — logo ortada, search altta tam genişlik */
@media (max-width: 991.98px){
.erd-h-main{ padding: 0; }
.erd-h-main .container{
padding-top: .55rem; padding-bottom: .35rem;
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: .5rem;
}
.erd-h-burger{ justify-self: start; }
.erd-h-logo{ justify-self: start; margin-left: .15rem; transform: translateY(-7px); }
.erd-h-logo img{ height: 42px; display: block; }
.erd-h-search{ display: none !important; }
.erd-h-actions{ justify-self: end; gap: .3rem; margin-left: 0; grid-column: 4; }
.erd-h-icon{ width: 38px; height: 38px; }
/* Mobil arama bar — TAM EKRAN genişlik, dolgun */
.erd-h-search-mobile{
background: #FAF6EB;
padding: 8px 12px 12px;
width: 100%;
box-sizing: border-box;
}
.erd-mobile-search{
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1.5px solid #E5DDC7;
border-radius: 999px;
padding: 0 6px 0 18px;
gap: .65rem;
height: 52px;
}
.erd-mobile-search:focus-within{
border-color: #DCA62B;
box-shadow: 0 0 0 4px rgba(220,166,43,.15);
}
.erd-mobile-search > svg{
flex-shrink: 0;
color: #6F6852;
width: 20px; height: 20px;
}
.erd-mobile-search input{
flex: 1 1 0;
width: 0;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font-family: "Onest", sans-serif;
font-size: 16px;
color: #1F2418;
padding: 0;
margin: 0;
-webkit-appearance: none;
height: 100%;
line-height: 52px;
}
.erd-mobile-search input::placeholder{
color: #98906F;
font-size: .95rem;
opacity: 1;
}
.erd-mobile-search button{
flex-shrink: 0;
height: 40px;
padding: 0 1.2rem;
background: #1F2418;
color: #FEF8E0;
border: 0;
border-radius: 999px;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
-webkit-appearance: none;
}
.erd-mobile-search button:hover{ background: #DCA62B; color: #1F2418; }
}
@media (max-width: 575.98px){
.erd-h-logo img{ height: 38px; }
.erd-h-burger{ width: 38px; height: 38px; }
.erd-h-icon{ width: 38px; height: 38px; }
}
/* Sticky aktif olunca dropdown z-index'i yükseltsin */
.header-sticky .erd-h-mega{ z-index: 60; }
/* ============================================
ÜRÜN KARTI — favori kalp butonu
============================================ */
.erd-product-image{ position: relative; }
.erd-fav-btn{
position: absolute;
top: 10px; right: 10px;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.94);
border: 1px solid rgba(229,221,199,.7);
color: #6F6852;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 3;
transition: color .2s ease, background .2s ease, border-color .2s ease;
-webkit-appearance: none; appearance: none;
padding: 0;
outline: 0;
backdrop-filter: blur(4px);
}
.erd-fav-btn svg{ overflow: visible; }
.erd-fav-btn svg path{
fill: transparent;
stroke: currentColor;
transition: fill .2s ease, stroke .2s ease;
}
.erd-fav-btn:hover{ color: #C73E2B; background: #fff; border-color: #C73E2B; }
.erd-fav-btn.is-active{
color: #C73E2B;
background: #fff;
}
.erd-fav-btn.is-active svg path{
fill: #C73E2B;
stroke: #C73E2B;
}
.erd-fav-btn-pop{ animation: erdHeartPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes erdHeartPop{
0% { transform: scale(1); }
40% { transform: scale(1.35); }
70% { transform: scale(.92); }
100% { transform: scale(1); }
}
/* ============================================
FAVORİ DRAWER
============================================ */
.erd-fav-drawer{
position: fixed; inset: 0;
height: 100dvh;
z-index: 9999;
visibility: hidden; pointer-events: none;
}
.erd-fav-drawer-panel{ height: 100dvh; max-height: 100dvh; }
.erd-fav-drawer.is-open{ visibility: visible; pointer-events: auto; }
.erd-fav-drawer-overlay{
position: absolute; inset: 0;
background: rgba(31,36,24,.55);
backdrop-filter: blur(2px);
border: 0; cursor: pointer; opacity: 0;
transition: opacity .25s ease;
}
.erd-fav-drawer.is-open .erd-fav-drawer-overlay{ opacity: 1; }
.erd-fav-drawer-panel{
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 92vw);
background: #FAF6EB;
display: flex; flex-direction: column;
font-family: "Onest", sans-serif;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.2,.9,.32,1.1);
box-shadow: -20px 0 40px rgba(31,36,24,.18);
}
.erd-fav-drawer.is-open .erd-fav-drawer-panel{ transform: translateX(0); }
.erd-fd-head{
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem 1.2rem;
background: #1F2418;
color: #FEF8E0;
border-bottom: 1px solid #E5DDC7;
}
.erd-fd-head h3{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.1rem;
margin: 0;
display: inline-flex; align-items: center; gap: .55rem;
color: #FEF8E0;
}
.erd-fd-count{
font-size: .72rem; font-weight: 500;
background: #C73E2B; color: #FEF8E0;
padding: 2px 8px; border-radius: 999px;
letter-spacing: .03em;
}
.erd-fd-close{
width: 36px; height: 36px;
background: transparent;
border: 1px solid rgba(254,248,224,.2);
color: #FEF8E0;
border-radius: 999px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s ease;
}
.erd-fd-close:hover{ background: #FEF8E0; color: #1F2418; }
.erd-fd-body{ flex: 1; overflow-y: auto; padding: .8rem 1.2rem; }
.erd-fd-loading, .erd-fd-empty{
text-align: center; color: #6F6852;
padding: 3rem 1rem; font-size: .9rem;
}
.erd-fd-empty svg{ color: #C8C0A6; margin-bottom: 1rem; }
.erd-fd-line{
display: grid;
grid-template-columns: 60px 1fr auto;
gap: .75rem;
align-items: center;
padding: .75rem 0;
border-bottom: 1px dashed #E5DDC7;
}
.erd-fd-line:last-child{ border-bottom: 0; }
.erd-fd-thumb{
width: 60px; height: 60px;
border-radius: 8px;
overflow: hidden;
background: #fff;
border: 1px solid #E5DDC7;
}
.erd-fd-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.erd-fd-info h4{
font-size: .92rem; font-weight: 600;
margin: 0 0 2px;
color: #1F2418;
}
.erd-fd-info h4 a{ color: inherit; text-decoration: none; }
.erd-fd-info h4 a:hover{ color: #DCA62B; }
.erd-fd-info small{ color: #6F6852; font-size: .76rem; display: block; }
.erd-fd-info .erd-fd-price{ color: #433014; font-weight: 700; font-size: .9rem; margin-top: 4px; display: inline-block; }
.erd-fd-actions{ display: flex; flex-direction: column; gap: .35rem; }
.erd-fd-btn{
background: transparent; border: 1px solid #E5DDC7;
color: #2B2E22; padding: .35rem .65rem;
font-size: .72rem; font-weight: 600;
border-radius: 999px;
cursor: pointer;
display: inline-flex; align-items: center; gap: .3rem;
white-space: nowrap;
transition: all .15s ease;
font-family: "Onest", sans-serif;
}
.erd-fd-btn-cart{ background: #DCA62B; border-color: #DCA62B; color: #1F2418; }
.erd-fd-btn-cart:hover{ background: #C68F1B; border-color: #C68F1B; }
.erd-fd-btn-rm{ color: #C73E2B; }
.erd-fd-btn-rm:hover{ background: #FEE; border-color: #C73E2B; }
.erd-fd-foot{ border-top: 1px solid #E5DDC7; padding: 1rem 1.2rem; background: #fff; }
/* Açıkken header gizle, bottom nav gizle */
body.erd-fav-open .erd-bn{ display: none !important; }
body.erd-fav-open .vl-header-area,
body.erd-fav-open header.homepage3-body,
body.erd-fav-open #vl-header-sticky{
visibility: hidden !important;
pointer-events: none !important;
}
/* ============================================
SEPET DRAWER (AJAX)
============================================ */
.erd-cart-drawer{
position: fixed; inset: 0;
height: 100dvh;
z-index: 9999;
visibility: hidden;
pointer-events: none;
}
.erd-cart-drawer-panel{ height: 100dvh; max-height: 100dvh; }
body.erd-cart-open, body.erd-fav-open, body.erd-mm-open{
padding-bottom: 0 !important;
overflow: hidden !important;
}
.erd-cart-drawer.is-open{ visibility: visible; pointer-events: auto; }
.erd-cart-drawer-overlay{
position: absolute; inset: 0;
background: rgba(31,36,24,.55);
backdrop-filter: blur(2px);
border: 0; cursor: pointer;
opacity: 0; transition: opacity .25s ease;
}
.erd-cart-drawer.is-open .erd-cart-drawer-overlay{ opacity: 1; }
.erd-cart-drawer-panel{
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(420px, 92vw);
background: #FAF6EB;
display: flex; flex-direction: column;
font-family: "Onest", sans-serif;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.2,.9,.32,1.1);
box-shadow: -20px 0 40px rgba(31,36,24,.18);
}
.erd-cart-drawer.is-open .erd-cart-drawer-panel{ transform: translateX(0); }
.erd-cd-head{
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem 1.2rem;
border-bottom: 1px solid #E5DDC7;
background: #1F2418;
color: #FEF8E0;
}
.erd-cd-head h3{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.1rem;
margin: 0;
display: inline-flex; align-items: center; gap: .55rem;
color: #FEF8E0;
}
.erd-cd-count{
font-size: .72rem;
font-weight: 500;
background: #DCA62B;
color: #1F2418;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: .03em;
}
.erd-cd-close{
width: 36px; height: 36px;
background: transparent;
border: 1px solid rgba(254,248,224,.2);
color: #FEF8E0;
border-radius: 999px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s ease;
}
.erd-cd-close:hover{ background: #FEF8E0; color: #1F2418; }
.erd-cd-body{
flex: 1;
overflow-y: auto;
padding: .8rem 1.2rem;
}
.erd-cd-loading, .erd-cd-empty{
text-align: center; color: #6F6852;
padding: 3rem 1rem;
font-size: .9rem;
}
.erd-cd-empty svg{ color: #C8C0A6; margin-bottom: 1rem; }
.erd-cd-line{
display: grid;
grid-template-columns: 60px 1fr auto;
gap: .75rem;
align-items: center;
padding: .75rem 0;
border-bottom: 1px dashed #E5DDC7;
}
.erd-cd-line:last-child{ border-bottom: 0; }
.erd-cd-thumb{
width: 60px; height: 60px;
border-radius: 8px;
overflow: hidden;
background: #fff;
border: 1px solid #E5DDC7;
}
.erd-cd-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.erd-cd-info{
min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.erd-cd-info h4{
font-size: .92rem; font-weight: 600;
margin: 0;
color: #1F2418;
font-family: "Onest", sans-serif;
line-height: 1.25;
/* uzun ürün adlarını 2 satırla sınırla */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.erd-cd-info h4 a{ color: inherit; text-decoration: none; }
.erd-cd-info h4 a:hover{ color: #DCA62B; }
/* Variant + stepper aynı satırda */
.erd-cd-meta{
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-top: 4px;
}
.erd-cd-variant{
display: inline-block;
color: #433014;
background: #FFF3D6;
border: 1px solid #ECD58E;
padding: 1px 8px;
border-radius: 999px;
font-size: .74rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
/* QTY stepper — drawer içinde */
.erd-cd-stepper{
display: inline-flex;
align-items: center;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 999px;
padding: 2px;
height: 28px;
user-select: none;
flex-shrink: 0;
}
.erd-cd-step{
width: 22px; height: 22px;
background: #FAF6EB;
border: 0;
border-radius: 50%;
font-family: "Onest", sans-serif;
font-size: .9rem; font-weight: 700;
line-height: 1; color: #1F2418;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, color .15s ease;
padding: 0;
}
.erd-cd-step:hover{
background: #DCA62B;
border-color: #DCA62B;
color: #fff;
}
.erd-cd-step:disabled{
opacity: .4; cursor: not-allowed;
}
.erd-cd-step-val{
min-width: 24px;
text-align: center;
font-weight: 700;
font-size: .82rem;
color: #1F2418;
font-variant-numeric: tabular-nums;
}
.erd-cd-right{
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.erd-cd-price{
text-align: right;
font-weight: 700;
color: #1F2418;
font-size: .92rem;
}
.erd-cd-remove{
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
background: transparent; border: 0;
color: #8A8268;
cursor: pointer;
padding: 0;
border-radius: 50%;
transition: color .15s ease, background .15s ease;
}
.erd-cd-remove:hover{ color: #C73E2B; background: #FEE; }
.erd-cd-remove svg{ flex-shrink: 0; }
.erd-cd-foot{
border-top: 1px solid #E5DDC7;
padding: 1rem 1.2rem;
background: #fff;
}
/* Drawer içi ücretsiz kargo progress */
.erd-cd-progress{
background: linear-gradient(180deg, #FFF8E2 0%, #FCEDC0 100%);
border: 1px solid #ECD58E;
border-radius: 12px;
padding: .65rem .85rem;
margin-bottom: .85rem;
}
.erd-cd-progress[hidden]{ display: none; }
.erd-cd-progress.is-done{
background: linear-gradient(180deg, #ECF5DA 0%, #D4E5B0 100%);
border-color: #B5D082;
}
.erd-cd-progress-text{
display: flex; align-items: center; gap: .4rem;
font-size: .82rem; color: #433014;
margin-bottom: .45rem;
flex-wrap: wrap;
}
.erd-cd-progress-text svg{ color: #DCA62B; flex-shrink: 0; }
.erd-cd-progress-text strong{ color: #1F2418; font-weight: 700; }
.erd-cd-progress-text span{ color: #B7831A; font-weight: 600; }
.erd-cd-progress.is-done .erd-cd-progress-text svg{ color: #4A5D3A; }
.erd-cd-progress-bar{
background: rgba(67,48,20,.12);
height: 5px; border-radius: 999px; overflow: hidden;
}
.erd-cd-progress-bar > div{
background: linear-gradient(90deg, #DCA62B, #C68F1B);
height: 100%;
transition: width .4s ease;
}
.erd-cd-progress.is-done .erd-cd-progress-bar > div{
background: linear-gradient(90deg, #7C9A2E, #4A5D3A);
}
.erd-cd-totals{ margin-bottom: .85rem; }
.erd-cd-row{
display: flex; justify-content: space-between;
padding: 4px 0;
font-size: .9rem;
color: #2B2E22;
}
.erd-cd-row b{ color: #1F2418; font-weight: 700; }
.erd-cd-row-total{
margin-top: .35rem; padding-top: .55rem;
border-top: 1px solid #E5DDC7;
font-size: 1rem;
}
.erd-cd-row-total b{ color: #DCA62B; font-size: 1.1rem; }
.erd-cd-hint{
font-size: .78rem; color: #B7831A;
background: #FFF3D6;
padding: .5rem .8rem;
border-radius: 8px;
margin-bottom: .75rem;
text-align: center;
}
.erd-cd-btn{
display: block;
width: 100%;
text-align: center;
padding: .8rem 1rem;
border-radius: 999px;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: .92rem;
text-decoration: none;
transition: all .15s ease;
border: 0;
margin-bottom: .5rem;
}
.erd-cd-btn:last-child{ margin-bottom: 0; }
.erd-cd-btn-primary,
.erd-cd-btn.erd-cd-btn-primary{
background: #1F2418 !important;
color: #DCA62B !important;
}
.erd-cd-btn-primary:hover{ background: #433014 !important; color: #FFD15D !important; }
.erd-cd-btn-accent{
background: #DCA62B;
color: #1F2418;
}
.erd-cd-btn-accent:hover{ background: #C68F1B; color: #1F2418; }
/* ============================================
MOBİL OFFCANVAS MENÜ
============================================ */
.erd-mobile-menu{
position: fixed;
inset: 0;
height: 100dvh;
z-index: 9999;
pointer-events: none;
visibility: hidden;
}
.erd-mobile-menu-panel{ height: 100dvh; max-height: 100dvh; }
.erd-mobile-menu.is-open{
pointer-events: auto;
visibility: visible;
}
.erd-mobile-menu-overlay{
position: absolute; inset: 0;
background: rgba(31,36,24,.55);
backdrop-filter: blur(2px);
border: 0;
opacity: 0;
transition: opacity .25s ease;
cursor: pointer;
}
.erd-mobile-menu.is-open .erd-mobile-menu-overlay{ opacity: 1; }
.erd-mobile-menu-panel{
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(380px, 88vw);
background: #FAF6EB;
display: flex; flex-direction: column;
font-family: "Onest", sans-serif;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.2,.9,.32,1.1);
box-shadow: -20px 0 40px rgba(31,36,24,.18);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.erd-mobile-menu.is-open .erd-mobile-menu-panel{ transform: translateX(0); }
.erd-mm-head{
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem 1.2rem;
border-bottom: 1px solid #E5DDC7;
}
.erd-mm-logo img{ max-height: 40px; width: auto; display: block; }
.erd-mm-close{
width: 38px; height: 38px;
background: transparent;
border: 1px solid #E5DDC7;
border-radius: 999px;
color: #1F2418;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .15s ease;
}
.erd-mm-close:hover{ background: #1F2418; color: #FEF8E0; border-color: #1F2418; }
.erd-mm-search{
margin: 1rem 1.2rem;
display: flex; align-items: center; gap: .6rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 999px;
padding: .55rem 1rem;
color: #6F6852;
}
.erd-mm-search input{
flex: 1;
border: 0; background: transparent; outline: 0;
font-family: inherit;
font-size: .9rem;
color: #2B2E22;
}
.erd-mm-search:focus-within{
border-color: #DCA62B;
box-shadow: 0 0 0 3px rgba(220,166,43,.12);
}
.erd-mm-nav{
display: flex; flex-direction: column;
padding: 0 .5rem;
margin-bottom: 1rem;
}
.erd-mm-nav a{
display: flex; align-items: center; justify-content: space-between;
padding: .85rem .85rem;
margin: 1px 0;
color: #1F2418;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border-radius: 12px;
transition: all .15s ease;
}
.erd-mm-nav a:hover{ background: #F1E8D0; color: #433014; }
.erd-mm-nav a.active{ background: #1F2418; color: #FEF8E0; }
.erd-mm-nav a.active svg{ color: #DCA62B; }
.erd-mm-nav a svg{ color: #C8C0A6; transition: transform .15s ease; }
.erd-mm-nav a:hover svg{ transform: translateX(3px); color: #DCA62B; }
.erd-mm-section{
padding: 1.2rem 1.2rem .4rem;
border-top: 1px dashed #E5DDC7;
margin-top: .25rem;
}
.erd-mm-section h6{
font-family: "Onest", sans-serif;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .18em;
color: #6F6852;
margin: 0 0 .85rem;
}
.erd-mm-cats{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .55rem;
}
.erd-mm-cat{
display: flex; align-items: center; gap: .65rem;
padding: .65rem .75rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 12px;
color: #1F2418;
text-decoration: none;
transition: all .15s ease;
}
.erd-mm-cat:hover, .erd-mm-cat:active{
border-color: #DCA62B;
background: #FFF8E2;
color: #433014;
transform: translateY(-1px);
}
.erd-mm-cat-ico{
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
color: #DCA62B;
background: #FFF3D6;
border-radius: 8px;
flex-shrink: 0;
}
.erd-mm-cat-ico svg{ width: 20px; height: 20px; }
.erd-mm-cat-name{
font-size: .78rem;
font-weight: 600;
line-height: 1.2;
}
.erd-mm-contact a, .erd-mm-contact span{
display: flex; align-items: center; gap: .65rem;
padding: .55rem 0;
font-size: .88rem;
color: #2B2E22;
text-decoration: none;
}
.erd-mm-contact i{
color: #DCA62B;
font-size: .9rem;
width: 18px;
}
.erd-mm-contact a:hover{ color: #433014; }
.erd-mm-foot{
margin-top: auto;
padding: 1.2rem;
border-top: 1px solid #E5DDC7;
background: #F1E8D0;
display: flex; gap: .55rem; justify-content: center;
}
.erd-mm-foot a{
width: 38px; height: 38px;
border-radius: 50%;
background: #fff;
color: #433014;
display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem;
border: 1px solid #E5DDC7;
transition: all .15s ease;
}
.erd-mm-foot a:hover{
background: #DCA62B;
color: #1F2418;
border-color: #DCA62B;
transform: translateY(-2px);
}
/* ============================================
MOBİL BOTTOM NAV — yüzen pill + center FAB
============================================ */
.erd-bn{ display: none; }
/* Hamburger ya da sepet drawer açıkken bottom nav gizlenir */
body.erd-mm-open .erd-bn,
body.erd-cart-open .erd-bn{ display: none !important; }
/* Drawer/menu açıkken şablonun sticky header'ı tamamen gizlenir */
body.erd-mm-open .vl-header-area,
body.erd-mm-open header.homepage3-body,
body.erd-cart-open .vl-header-area,
body.erd-cart-open header.homepage3-body{
z-index: 0 !important;
visibility: hidden !important;
}
body.erd-mm-open #vl-header-sticky,
body.erd-cart-open #vl-header-sticky{
visibility: hidden !important;
pointer-events: none !important;
}
@media (max-width: 991.98px){
/* Body padding-bottom düşürüldü; footer-bottom kendi içinde bottom-nav'a yer açıyor */
body{ padding-bottom: 0; }
.erd-footer{ padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.erd-bn{
display: block;
position: fixed;
left: 0; right: 0;
bottom: max(14px, env(safe-area-inset-bottom));
z-index: 90;
pointer-events: none;
padding: 0 14px;
}
.erd-bn-pill{
pointer-events: auto;
position: relative;
background: linear-gradient(180deg, #2A2418 0%, #1A1610 100%);
border-radius: 999px;
height: 64px;
max-width: 480px;
margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 18px;
box-shadow:
0 14px 30px rgba(31,36,24,.30),
0 6px 12px rgba(31,36,24,.18),
inset 0 1px 0 rgba(254,248,224,.07);
font-family: "Onest", sans-serif;
}
.erd-bn-pill::before{
content: "";
position: absolute;
inset: 1px;
border-radius: 999px;
border: 1px solid rgba(220,166,43,.18);
pointer-events: none;
}
.erd-bn-side{
flex: 1;
display: flex; align-items: center; justify-content: space-around;
}
.erd-bn-item{
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
color: #FFFFFF;
text-decoration: none;
border-radius: 999px;
transition: color .2s ease, transform .2s ease, background .2s ease;
position: relative;
}
.erd-bn-item svg{
stroke-width: 2;
filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.erd-bn-item:active{ transform: scale(.92); }
.erd-bn-item:hover, .erd-bn-item.active{ color: #DCA62B; }
.erd-bn-item.active::after{
content: "";
position: absolute;
bottom: 6px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px;
background: #DCA62B;
border-radius: 50%;
}
.erd-bn-glyph{ display: inline-flex; }
/* Center FAB — sepet (button reset) */
.erd-bn-fab{
position: relative;
flex: 0 0 auto;
width: 76px; height: 76px;
margin: 0 8px;
transform: translateY(-22px);
display: flex; align-items: center; justify-content: center;
text-decoration: none;
background: transparent !important;
border: 0 !important;
outline: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.erd-bn-fab:focus, .erd-bn-fab:focus-visible{ outline: 0; box-shadow: none; }
.erd-bn-fab-ring{ display: none; }
.erd-bn-fab-circle{
position: relative; z-index: 1;
width: 60px; height: 60px;
border-radius: 50%;
background: #DCA62B;
color: #1F2418;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 18px rgba(220,166,43,.40);
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.erd-bn-fab:active .erd-bn-fab-circle{ transform: scale(.92); }
.erd-bn-fab:hover .erd-bn-fab-circle{ transform: rotate(-6deg) scale(1.04); }
.erd-bn-fab-count{
position: absolute;
top: -2px; right: -4px;
background: #C73E2B;
color: #FFFFFF;
font-size: .68rem;
font-weight: 700;
min-width: 20px; height: 20px;
padding: 0 5px;
border-radius: 999px;
border: 2px solid #1F2418;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
/* WhatsApp ikonu yan tarafta yeşil */
.erd-bn-wa{ color: #25D366; }
.erd-bn-wa svg{
filter: drop-shadow(0 0 8px rgba(37,211,102,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.6));
stroke-width: 0;
}
.erd-bn-wa:hover{ color: #34E075; }
}
@media (max-width: 575.98px){
.erd-bn{ padding: 0 8px; bottom: max(10px, env(safe-area-inset-bottom)); }
.erd-bn-pill{ height: 60px; padding: 0 12px; }
.erd-bn-item{ width: 40px; height: 40px; }
.erd-bn-fab{ width: 70px; height: 70px; transform: translateY(-20px); margin: 0 4px; }
.erd-bn-fab-circle{ width: 56px; height: 56px; }
}
/* ---------- Page head / breadcrumb ---------- */
.erd-page-head{
background: var(--erd-cream);
padding: 2rem 0 1.6rem;
border-bottom: 1px solid var(--erd-border);
}
.erd-page-head h1{ font-size: 1.8rem; margin: .25rem 0 .5rem; }
.erd-page-sub{ margin: 0; color: var(--erd-muted); }
.erd-breadcrumb{
display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
font-size: .85rem; color: var(--erd-muted); margin-bottom: .35rem;
}
.erd-breadcrumb a{ color: var(--erd-muted); }
.erd-breadcrumb a:hover{ color: var(--erd-primary); }
.erd-breadcrumb span{ color: var(--erd-muted); }
/* ---------- Listing layout ---------- */
.erd-listing{
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
align-items: start;
margin-top: 2rem;
}
.erd-sidebar{ position: sticky; top: 110px; }
.erd-side-block{
background: #fff; border: 1px solid var(--erd-border);
border-radius: var(--erd-radius); padding: 1rem 1.2rem;
}
.erd-side-block h6{
margin: 0 0 .8rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--erd-muted);
}
.erd-side-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.erd-side-list a{
display: block; padding: .45rem .6rem; border-radius: 8px;
color: var(--erd-text); font-size: .9rem;
}
.erd-side-list a:hover{ background: var(--erd-bg-alt); color: var(--erd-primary); }
.erd-side-list a.active{ background: var(--erd-primary); color: #fff; font-weight: 600; }
.erd-listing-toolbar{
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.erd-listing-count{ color: var(--erd-muted); font-size: .9rem; }
.erd-sort{ display: flex; align-items: center; gap: .5rem; }
.erd-sort label{ color: var(--erd-muted); font-size: .85rem; margin: 0; }
.erd-sort select{
border: 1px solid var(--erd-border); border-radius: 8px;
padding: .4rem .6rem; background: #fff; font-size: .9rem;
}
.erd-empty{
background: #fff; border: 1px dashed var(--erd-border);
border-radius: var(--erd-radius); padding: 2.5rem 1.5rem; text-align: center;
}
.erd-empty h3{ margin-bottom: .5rem; }
.erd-empty p{ color: var(--erd-muted); margin-bottom: 1.2rem; }
/* ---------- Cat grid (large) ---------- */
.erd-cat-grid-lg{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 1.5rem; }
.erd-cat-card-lg{ padding: 1.8rem 1.2rem; }
.erd-cat-card-lg .erd-cat-icon svg{ width: 48px; height: 48px; }
.erd-cat-count{
display: inline-block; margin: .35rem 0 .8rem;
background: var(--erd-bg-alt); color: var(--erd-muted);
padding: .15rem .6rem; border-radius: 999px; font-size: .78rem;
}
.erd-cat-desc{ color: var(--erd-muted); font-size: .85rem; margin: 0; }
/* ---------- Product detail ---------- */
.erd-detail-image{
position: relative; aspect-ratio: 1/1;
background: var(--erd-bg-alt); border-radius: var(--erd-radius); overflow: hidden;
}
.erd-detail-image img{ width: 100%; height: 100%; object-fit: cover; }
.erd-detail-title{ font-size: 2rem; margin: 0 0 .5rem; }
.erd-detail-short{ color: var(--erd-muted); font-size: 1.05rem; margin-bottom: 1rem; }
.erd-detail-price{ display: flex; gap: .8rem; align-items: baseline; margin-bottom: 1.5rem; }
.erd-detail-price .erd-price-now{ font-size: 1.6rem; }
.erd-detail-form{ margin-bottom: 1.5rem; }
.erd-detail-label{ display: block; font-weight: 600; margin-bottom: .5rem; color: var(--erd-dark); }
.erd-variant-pills{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: .55rem;
margin-bottom: 1.2rem;
}
.erd-variant-pill{
position: relative; cursor: pointer;
border: 1.5px solid #E5DDC7;
border-radius: 12px;
padding: .65rem .85rem;
background: #fff;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
display: flex; flex-direction: column; gap: 4px;
min-height: 64px;
}
.erd-variant-pill input{
position: absolute; inset: 0;
opacity: 0; cursor: pointer;
margin: 0; padding: 0;
}
.erd-variant-pill::after{
content: "";
position: absolute; top: 8px; right: 8px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
border: 1.5px solid #C7BFA8;
transition: all .15s ease;
}
.erd-variant-pill:hover{
border-color: #DCA62B;
background: #FFFCF2;
}
.erd-variant-pill.active{
border-color: #DCA62B;
background: linear-gradient(180deg, #FFF8E2 0%, #FFFCF2 100%);
box-shadow: 0 4px 14px rgba(220,166,43,.18);
}
.erd-variant-pill.active::after{
background: #DCA62B;
border-color: #DCA62B;
box-shadow: inset 0 0 0 3px #fff;
}
.erd-variant-pill.oos{
opacity: .55; cursor: not-allowed;
background: repeating-linear-gradient(135deg, #fff 0 8px, #FAF6EB 8px 16px);
}
.erd-variant-pill.oos::after{ display: none; }
.erd-variant-pill.oos .erd-variant-pill-name{ text-decoration: line-through; }
.erd-variant-pill-name{
font-weight: 600; font-size: .9rem; color: #1F2418;
font-family: "Onest", sans-serif;
padding-right: 24px; /* checkmark için yer */
line-height: 1.2;
}
.erd-variant-pill-price{
font-size: .85rem;
color: #6F5418;
font-weight: 700;
font-variant-numeric: tabular-nums;
font-family: "Onest", sans-serif;
}
.erd-variant-pill.active .erd-variant-pill-price{ color: #B7831A; }
.erd-variant-pill input:focus-visible ~ .erd-variant-pill-name{
outline: 2px solid #DCA62B; outline-offset: 4px;
border-radius: 4px;
}
@media (max-width: 575.98px){
.erd-variant-pills{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; }
.erd-variant-pill{ padding: .55rem .7rem; min-height: 60px; }
}
.erd-detail-actions{ display: flex; gap: .8rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; }
.erd-qty-input{
display: inline-flex; align-items: center;
border: 1px solid var(--erd-border); border-radius: 999px; overflow: hidden;
background: #fff;
}
.erd-qty-btn{
border: 0; background: transparent; width: 36px; height: 40px;
font-size: 1.2rem; color: var(--erd-text); cursor: pointer;
}
.erd-qty-btn:hover{ background: var(--erd-bg-alt); color: var(--erd-primary); }
.erd-qty-field{
border: 0; background: transparent; width: 50px; text-align: center;
font-weight: 600; font-size: 1rem; outline: 0;
}
.erd-detail-stock{ font-size: .9rem; margin: 0; }
.erd-stock-ok{ color: var(--erd-primary); font-weight: 600; }
.erd-stock-oos{ color: #C62828; font-weight: 600; }
.erd-detail-features{ list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.erd-detail-features li{
display: flex; gap: .6rem; align-items: center;
font-size: .92rem; color: var(--erd-text);
}
.erd-detail-features li svg{ color: var(--erd-primary); flex-shrink: 0; }
.erd-detail-features li i{ color: var(--erd-primary); }
.erd-detail-tabs h3{ margin-bottom: 1rem; }
.erd-detail-tabs p{ color: var(--erd-text); line-height: 1.7; }
/* ============================================
GİRİŞ / ÜYE OL / HESABIM
============================================ */
.erd-auth{
max-width: 460px;
margin: 1.5rem auto;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 16px;
padding: 2.2rem 2rem;
font-family: "Onest", sans-serif;
}
.erd-auth-head{ text-align: center; margin-bottom: 1.5rem; }
.erd-auth-head h1{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.6rem;
color: #1F2418; margin: 0 0 .35rem;
}
.erd-auth-head p{ color: #6F6852; margin: 0; font-size: .92rem; }
.erd-auth-form{ display: flex; flex-direction: column; gap: .85rem; }
.erd-auth-form label{
display: flex; flex-direction: column; gap: .35rem;
font-size: .82rem; font-weight: 600; color: #1F2418;
}
.erd-auth-form label small{ color: #98906F; font-weight: 400; }
.erd-auth-form input{
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: .7rem 1rem;
border: 1.5px solid #E5DDC7;
border-radius: 10px;
background: #FAF6EB;
font-family: "Onest", sans-serif;
font-size: .95rem; color: #1F2418;
outline: 0;
}
.erd-auth-form .erd-form-row > label{ min-width: 0; }
.erd-auth-form input:focus{ border-color: #DCA62B; background: #fff; }
.erd-auth-form .erd-cart-btn{ width: 100%; margin-top: .5rem; }
.erd-auth-footer{
margin-top: 1.5rem; padding-top: 1.2rem;
border-top: 1px dashed #E5DDC7;
text-align: center;
font-size: .9rem; color: #6F6852;
}
.erd-auth-footer a{ color: #B7831A; font-weight: 600; }
/* Hesabım layout */
.erd-account-layout{
display: grid;
grid-template-columns: 280px 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
font-family: "Onest", sans-serif;
}
.erd-account-side{
position: sticky; top: 1.5rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.2rem;
}
.erd-account-user{
display: flex; align-items: center; gap: .85rem;
padding-bottom: 1rem;
border-bottom: 1px solid #F1E8D0;
margin-bottom: 1rem;
}
.erd-account-avatar{
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #DCA62B 0%, #C68F1B 100%);
color: #1F2418;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.05rem;
letter-spacing: .03em;
}
.erd-account-user b{
display: block; color: #1F2418; font-size: .92rem;
margin-bottom: 2px;
}
.erd-account-user small{ color: #98906F; font-size: .76rem; }
.erd-account-nav{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 1px;
}
.erd-account-nav a{
display: flex; align-items: center; gap: .55rem;
padding: .65rem .75rem;
border-radius: 10px;
color: #2B2E22;
font-size: .92rem; font-weight: 500;
transition: all .15s ease;
}
.erd-account-nav a:hover{ background: #FAF6EB; color: #433014; }
.erd-account-nav a.is-active{
background: #1F2418; color: #FEF8E0; font-weight: 600;
}
.erd-account-nav i{ width: 18px; color: #DCA62B; }
.erd-account-nav a.is-active i{ color: #DCA62B; }
.erd-account-badge{
margin-left: auto;
background: #FFF3D6; color: #B7831A;
font-size: .7rem; font-weight: 700;
padding: 1px 8px; border-radius: 999px;
}
.erd-account-nav a.is-active .erd-account-badge{ background: #DCA62B; color: #1F2418; }
.erd-account-logout{ color: #C73E2B !important; }
.erd-account-nav hr{ border: 0; border-top: 1px solid #E5DDC7; margin: .5rem 0; }
.erd-account-card{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.5rem 1.6rem;
}
.erd-account-card h3{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.15rem;
color: #1F2418;
margin: 0 0 1rem;
padding-bottom: .65rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-account-form{ display: flex; flex-direction: column; gap: .85rem; }
.erd-account-form label{
display: flex; flex-direction: column; gap: .35rem;
font-size: .82rem; font-weight: 600; color: #1F2418;
}
.erd-account-form label small{ color: #98906F; font-weight: 400; }
.erd-account-form input,
.erd-account-form textarea,
.erd-account-form select{
padding: .65rem .9rem;
border: 1.5px solid #E5DDC7;
border-radius: 10px;
background: #FAF6EB;
font-family: "Onest", sans-serif;
font-size: .92rem; color: #1F2418;
outline: 0;
}
.erd-account-form input:focus,
.erd-account-form textarea:focus{ border-color: #DCA62B; background: #fff; }
.erd-account-form input:disabled{ background: #F1E8D0; color: #98906F; }
.erd-checkbox{ flex-direction: row; align-items: center; gap: .5rem !important; cursor: pointer; }
.erd-checkbox input{ accent-color: #DCA62B; width: 16px; height: 16px; }
.erd-account-table{
width: 100%;
border-collapse: collapse;
font-size: .9rem;
}
.erd-account-table th, .erd-account-table td{
padding: .65rem .85rem;
border-bottom: 1px solid #F1E8D0;
text-align: left;
}
.erd-account-table th{
font-weight: 600; color: #6F6852;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
background: #FAF6EB;
}
.erd-status{
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: .72rem;
font-weight: 600;
}
.erd-status-pending { background: #FFF3CD; color: #856404; }
.erd-status-confirmed{ background: #CCE5FF; color: #004085; }
.erd-status-shipped { background: #D4EDDA; color: #155724; }
.erd-status-delivered{ background: #D1E7DD; color: #0F5132; }
.erd-status-cancelled{ background: #F8D7DA; color: #721C24; }
.erd-link-tiny{
font-size: .82rem; color: #B7831A;
display: inline-flex; align-items: center; gap: .35rem;
}
.erd-address-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: .85rem;
}
.erd-address-card{
background: #FAF6EB;
border: 1px solid #E5DDC7;
border-radius: 12px;
padding: 1rem 1.2rem;
display: flex; flex-direction: column; gap: .5rem;
position: relative;
}
.erd-address-card.is-default{
border-color: #DCA62B;
background: #FFF8E2;
}
.erd-address-card header{
display: flex; justify-content: space-between; align-items: center;
}
.erd-address-card h4{
font-size: .92rem; color: #1F2418; margin: 0;
font-weight: 700;
}
.erd-address-default{
font-size: .68rem; font-weight: 700;
color: #B7831A; background: #fff;
padding: 2px 8px; border-radius: 999px;
border: 1px solid #ECD58E;
}
.erd-address-card p{
margin: 0; font-size: .85rem;
color: #2B2E22; line-height: 1.55;
}
.erd-address-actions{ margin-top: auto; }
.erd-address-actions button{
background: transparent; border: 0;
color: #C73E2B; font-size: .8rem; font-weight: 600;
cursor: pointer;
}
@media (max-width: 991.98px){
.erd-account-layout{ grid-template-columns: 1fr; gap: 1rem; }
.erd-account-side{ position: static; }
}
/* ============================================
SÖZLEŞME / DOC SAYFASI
============================================ */
.erd-doc-layout{
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
align-items: start;
margin-top: 1.5rem;
font-family: "Onest", sans-serif;
}
.erd-doc-side{
position: sticky; top: 1.5rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.2rem;
}
.erd-doc-side h6{
font-size: .76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: #6F6852;
margin: 0 0 .85rem;
}
.erd-doc-nav{
list-style: none; padding: 0;
margin: 0 0 1.5rem;
display: flex; flex-direction: column; gap: 1px;
}
.erd-doc-nav a{
display: block;
padding: .55rem .75rem;
border-radius: 8px;
font-size: .88rem;
color: #2B2E22;
transition: all .15s ease;
}
.erd-doc-nav a:hover{ background: #FAF6EB; color: #433014; }
.erd-doc-nav a.is-active{
background: #1F2418; color: #FEF8E0; font-weight: 600;
}
.erd-doc-side-info{
padding-top: 1.2rem;
border-top: 1px dashed #E5DDC7;
font-size: .85rem;
color: #6F6852;
line-height: 1.55;
}
.erd-doc-side-info a{ color: #B7831A; }
.erd-doc-body{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 2rem 2.4rem;
font-family: "Onest", sans-serif;
color: #2B2E22;
line-height: 1.7;
}
.erd-doc-body h2{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.2rem;
color: #1F2418;
margin: 1.6rem 0 .65rem;
letter-spacing: -.01em;
padding-bottom: .55rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-doc-body h2:first-child{ margin-top: 0; }
.erd-doc-body p{ margin: 0 0 .9rem; }
.erd-doc-body ul{ margin: 0 0 .9rem; padding-left: 1.4rem; }
.erd-doc-body li{ margin-bottom: .35rem; }
.erd-doc-body strong{ color: #1F2418; font-weight: 700; }
.erd-doc-body em{ color: #6F6852; font-style: italic; }
.erd-doc-body code{
background: #FAF6EB;
border: 1px solid #E5DDC7;
padding: 1px 8px;
border-radius: 6px;
font-size: .88rem;
color: #B7831A;
font-family: ui-monospace, "SF Mono", monospace;
}
.erd-doc-body a{ color: #B7831A; }
.erd-doc-table{
width: 100%;
border-collapse: collapse;
margin-bottom: 1.2rem;
font-size: .9rem;
}
.erd-doc-table th, .erd-doc-table td{
padding: .6rem .85rem;
border-bottom: 1px solid #F1E8D0;
text-align: left;
}
.erd-doc-table th{
font-weight: 600;
color: #6F6852;
width: 30%;
background: #FAF6EB;
}
.erd-doc-table td{ color: #1F2418; }
.erd-doc-table tr:last-child th, .erd-doc-table tr:last-child td{ border-bottom: 0; }
.erd-doc-carriers{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .85rem;
margin: 1rem 0 1.4rem;
}
.erd-doc-carrier{
display: flex; align-items: center; gap: .85rem;
padding: .85rem 1rem;
background: #FAF6EB;
border: 1px solid #E5DDC7;
border-radius: 12px;
}
.erd-doc-carrier img{
height: 32px;
width: auto;
flex-shrink: 0;
}
.erd-doc-carrier b{
display: block; color: #1F2418; font-size: .92rem;
font-weight: 700; line-height: 1.2;
}
.erd-doc-carrier span{
color: #6F6852; font-size: .8rem;
}
.erd-doc-foot{
margin-top: 2rem;
padding-top: 1.2rem;
border-top: 1px dashed #E5DDC7;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 1rem;
}
.erd-doc-foot p{
margin: 0;
font-size: .82rem;
color: #98906F;
display: flex; align-items: center; gap: .5rem;
}
.erd-doc-foot i{ color: #DCA62B; }
@media (max-width: 991.98px){
.erd-doc-layout{ grid-template-columns: 1fr; gap: 1rem; }
.erd-doc-side{ position: static; }
.erd-doc-body{ padding: 1.4rem 1.4rem; }
}
/* ============================================
KARGO TAKİP SAYFASI
============================================ */
.erd-track{
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
font-family: "Onest", sans-serif;
}
.erd-track-card{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.5rem;
}
.erd-track-tabs{
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin-bottom: 1.2rem;
}
.erd-track-tab{
background: #FAF6EB;
border: 1.5px solid #E5DDC7;
border-radius: 12px;
padding: 1rem;
font-family: "Onest", sans-serif;
display: flex; align-items: center; gap: .85rem;
cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: all .15s ease;
}
.erd-track-tab:hover{ border-color: #DCA62B; }
.erd-track-tab.is-active{
border-color: #1F2418;
background: #1F2418;
color: #FEF8E0;
}
.erd-track-tab-logo{
display: inline-flex; align-items: center; justify-content: center;
height: 36px;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 6px;
padding: 4px 10px;
flex-shrink: 0;
}
.erd-track-tab-logo img{
height: 24px;
width: auto;
display: block;
object-fit: contain;
}
.erd-track-tab.is-active .erd-track-tab-logo{
background: #fff;
border-color: #DCA62B;
}
.erd-track-tab span:last-child{
font-weight: 600; font-size: .92rem;
}
.erd-track-form{
display: grid;
grid-template-columns: 1fr auto;
gap: .65rem;
align-items: end;
margin-bottom: 1.2rem;
}
.erd-track-form .cf-turnstile{
grid-column: 1 / -1;
margin: 0 !important;
width: 100%;
min-height: 65px;
}
.erd-track-form .cf-turnstile iframe{
width: 100% !important;
max-width: 100% !important;
}
.erd-track-form button[type="submit"]{
grid-column: 1 / -1;
width: 100%;
}
.erd-track-form label{
grid-column: 1 / -1;
display: flex; flex-direction: column; gap: .35rem;
font-size: .82rem; font-weight: 700; color: #1F2418;
}
.erd-track-form input{
padding: .8rem 1rem;
border: 1.5px solid #E5DDC7;
border-radius: 10px;
font-family: "Onest", sans-serif;
font-size: 1rem;
color: #1F2418;
background: #FAF6EB;
outline: 0;
letter-spacing: .03em;
}
.erd-track-form input:focus{
border-color: #DCA62B;
background: #fff;
}
.erd-track-form .erd-cart-btn{
width: auto; padding: .8rem 1.6rem; height: auto;
}
.erd-track-supports{
display: flex; align-items: center; gap: .9rem;
padding: .65rem 0 .2rem;
font-size: .8rem; color: #8A8268;
flex-wrap: nowrap;
white-space: nowrap;
}
.erd-track-supports > span:first-child{
font-weight: 600;
flex-shrink: 0;
}
.erd-track-supports .erd-track-support{
flex-shrink: 0;
}
@media (max-width: 575.98px){
.erd-track-supports{
gap: .55rem;
font-size: .72rem;
}
.erd-track-supports > span:first-child{
font-size: .7rem;
}
.erd-track-support{
height: 24px;
padding: 2px 8px;
}
.erd-track-support img{
height: 16px;
}
}
.erd-track-support{
display: inline-flex; align-items: center;
height: 26px;
padding: 3px 10px;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 6px;
}
.erd-track-support img{
height: 18px;
width: auto;
display: block;
}
.erd-track-result{ margin: .4rem 0 1.2rem; }
.erd-track-result-card{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(31,36,24,.05);
}
.erd-track-result-empty,
.erd-track-result-loading{
padding: 1rem 1.2rem;
display: flex; align-items: center; gap: .8rem;
color: #6F6852; font-size: .9rem;
}
.erd-track-result-empty i{ color: #C0392B; font-size: 1.4rem; }
.erd-track-result-empty b{ display: block; color: #1F2418; font-size: .95rem; margin-bottom: 2px; }
.erd-track-result-empty span{ color: #6F6852; font-size: .85rem; }
.erd-track-result-loading i{ color: #DCA62B; font-size: 1.2rem; }
.erd-track-result-head{
display: flex; align-items: center; justify-content: space-between;
padding: .9rem 1.2rem;
background: #FAF6EB;
border-bottom: 1px solid #E5DDC7;
gap: .75rem; flex-wrap: wrap;
}
.erd-track-result-carrier{
display: flex; align-items: center; gap: .65rem;
color: #1F2418; font-weight: 700;
}
.erd-track-result-carrier img{ height: 24px; width: auto; }
.erd-track-status{
display: inline-flex; align-items: center; gap: .45rem;
padding: .35rem .8rem;
border-radius: 999px;
font-size: .82rem; font-weight: 600;
background: #F2EBD9; color: #6F5418;
}
.erd-track-status-ok{ background: #DBEFD8; color: #2F6E2A; }
.erd-track-status-go{ background: #FFF1CD; color: #8A6311; }
.erd-track-result-body{ padding: 1.1rem 1.2rem; }
.erd-track-meta{
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .65rem 1.2rem;
}
.erd-track-meta > div{ display: flex; flex-direction: column; gap: 2px; }
.erd-track-meta dt{ color: #8A8268; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.erd-track-meta dd{ margin: 0; color: #1F2418; font-size: .92rem; }
.erd-track-meta dd em{ color: #6F6852; font-style: normal; font-size: .82rem; }
.erd-track-meta code{
font-family: ui-monospace, "SF Mono", Menlo, monospace;
background: #FAF6EB;
padding: 2px 8px;
border-radius: 6px;
border: 1px solid #E5DDC7;
font-size: .85rem;
}
.erd-track-tl-title{
margin: 1.4rem 0 .8rem;
font-size: .9rem; color: #1F2418;
display: flex; align-items: center; gap: .5rem;
}
.erd-track-tl-title i{ color: #DCA62B; }
.erd-track-tl{
list-style: none; margin: 0; padding: 0;
position: relative;
border-left: 2px solid #E5DDC7;
padding-left: 1.2rem;
}
.erd-track-tl li{
position: relative;
padding: 0 0 1rem;
}
.erd-track-tl li:last-child{ padding-bottom: 0; }
.erd-track-tl-dot{
position: absolute;
left: -1.69rem; top: 4px;
width: 12px; height: 12px;
border-radius: 50%;
background: #fff;
border: 2px solid #C7BFA8;
}
.erd-track-tl li.is-current .erd-track-tl-dot{
background: #DCA62B;
border-color: #DCA62B;
box-shadow: 0 0 0 4px rgba(220,166,43,.18);
}
.erd-track-tl-text b{
display: block;
color: #1F2418;
font-size: .92rem;
font-weight: 600;
line-height: 1.35;
}
.erd-track-tl-text span{
display: block;
color: #6F6852;
font-size: .82rem;
margin-top: 2px;
}
.erd-track-tl-text time{
display: block;
color: #8A8268;
font-size: .76rem;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.erd-track-tl-detail{
color: #8A8268 !important;
font-style: italic;
font-size: .78rem !important;
}
.erd-track-note{
color: #6F6852; font-size: .88rem; line-height: 1.5;
margin: .8rem 0 1rem;
}
.erd-track-tip{
margin-top: 1.5rem;
padding-top: 1.2rem;
border-top: 1px dashed #E5DDC7;
}
.erd-track-tip h5{
font-size: .9rem; color: #1F2418;
margin: 0 0 .55rem;
}
.erd-track-tip ul{
margin: 0; padding-left: 1.2rem;
color: #6F6852;
font-size: .85rem;
line-height: 1.7;
}
.erd-track-tip a{ color: #B7831A; }
.erd-track-side{ display: flex; flex-direction: column; gap: 1rem; }
.erd-track-info{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 12px;
padding: 1.1rem 1.2rem;
}
.erd-track-info h5{
font-size: .92rem; color: #1F2418;
margin: 0 0 .35rem;
display: flex; align-items: center; gap: .5rem;
}
.erd-track-info h5 i{ color: #DCA62B; }
.erd-track-info p{
margin: 0; color: #6F6852; font-size: .85rem;
line-height: 1.55;
}
.erd-track-info strong{ color: #1F2418; }
.erd-track-info a{ color: #B7831A; }
@media (max-width: 991.98px){
.erd-track{ grid-template-columns: 1fr; }
.erd-track-form{ grid-template-columns: 1fr; }
}
/* Kart formu — odeme.php */
.erd-card-form{
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px dashed #E5DDC7;
display: flex; flex-direction: column; gap: .85rem;
font-family: "Onest", sans-serif;
}
.erd-card-form-head{
background: #ECF5DA;
border: 1px solid #B5D082;
color: #2F4318;
padding: .65rem 1rem;
border-radius: 8px;
font-size: .85rem;
display: flex; align-items: center; gap: .55rem;
}
.erd-card-form-head i{ color: #4A5D3A; }
.erd-card-form label{
display: flex; flex-direction: column; gap: .35rem;
font-size: .82rem; font-weight: 600; color: #1F2418;
}
.erd-card-form input,
.erd-card-form select{
padding: .7rem .9rem;
border: 1.5px solid #E5DDC7;
border-radius: 10px;
font-family: "Onest", sans-serif;
font-size: .95rem;
color: #1F2418;
background: #FAF6EB;
outline: 0;
letter-spacing: .03em;
}
.erd-card-form input:focus,
.erd-card-form select:focus{
border-color: #DCA62B; background: #fff;
}
.erd-card-note{
font-size: .8rem; color: #6F6852;
background: #FAF6EB;
border: 1px solid #E5DDC7;
padding: .55rem .85rem;
border-radius: 8px;
margin: 0;
display: flex; align-items: center; gap: .5rem;
}
.erd-card-note i{ color: #DCA62B; }
/* PayTR 3D yapıştırma */
.erd-paytr-3d{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.5rem;
}
.erd-paytr-3d form{ width: 100%; }
/* ============================================
ÖDEME / CHECKOUT — Yeni responsive düzen
============================================ */
.erd-co-page{
padding: 1.5rem 0 4rem;
font-family: "Onest", sans-serif;
}
.erd-co-header{
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E5DDC7;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1rem;
}
.erd-co-back{
font-size: .85rem;
color: #6F6852;
display: inline-flex; align-items: center; gap: .35rem;
}
.erd-co-back:hover{ color: #1F2418; }
.erd-co-header h1{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.5rem;
color: #1F2418;
margin: 0;
text-align: center;
letter-spacing: -.015em;
}
.erd-co-steps{
list-style: none; padding: 0; margin: 0;
display: flex; gap: .35rem;
font-size: .8rem;
flex-wrap: wrap; justify-content: flex-end;
}
.erd-co-steps li{
display: inline-flex; align-items: center; gap: .35rem;
color: #98906F;
font-weight: 500;
}
.erd-co-steps li span{
width: 22px; height: 22px;
border-radius: 50%;
background: #F1E8D0;
color: #98906F;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .72rem;
}
.erd-co-steps li.is-done span{ background: #4A5D3A; color: #fff; }
.erd-co-steps li.is-active{ color: #1F2418; }
.erd-co-steps li.is-active span{ background: #DCA62B; color: #1F2418; }
.erd-co-grid{
display: grid;
grid-template-columns: 1fr 380px;
gap: 1.5rem;
align-items: start;
}
.erd-co-main{ display: flex; flex-direction: column; gap: 1rem; }
.erd-co-side{ position: sticky; top: 1.5rem; }
.erd-co-block{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
overflow: hidden;
}
.erd-co-block-head{
display: flex; align-items: center; gap: 1rem;
padding: 1.1rem 1.3rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-co-num{
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: #DCA62B;
color: #1F2418;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .92rem;
}
.erd-co-block-head h3{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.05rem;
color: #1F2418; margin: 0;
}
.erd-co-block-head p{
margin: 0; font-size: .82rem; color: #6F6852;
}
.erd-co-fields{
display: flex; flex-direction: column; gap: .85rem;
padding: 1.2rem 1.3rem 1.4rem;
}
.erd-co-row-2{ display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.erd-co-row-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .65rem; }
.erd-co-fields label,
.erd-co-form label,
.erd-pay-card-body label{
display: flex; flex-direction: column; gap: .35rem;
font-size: .82rem; font-weight: 600; color: #1F2418;
}
.erd-co-fields input,
.erd-co-fields select,
.erd-co-fields textarea,
.erd-pay-card-body input,
.erd-pay-card-body select{
padding: .7rem .9rem;
border: 1.5px solid #E5DDC7;
border-radius: 10px;
background: #FAF6EB;
font-family: "Onest", sans-serif;
font-size: .95rem;
color: #1F2418;
outline: 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
-webkit-appearance: none;
}
.erd-body input,
.erd-body select,
.erd-body textarea{
box-sizing: border-box;
max-width: 100%;
}
.erd-co-fields input:focus,
.erd-co-fields select:focus,
.erd-co-fields textarea:focus,
.erd-pay-card-body input:focus,
.erd-pay-card-body select:focus{
border-color: #DCA62B; background: #fff;
box-shadow: 0 0 0 3px rgba(220,166,43,.14);
}
/* Ödeme yöntemi kartları */
.erd-pay-list{
display: flex; flex-direction: column; gap: .65rem;
padding: 1.2rem 1.3rem;
}
.erd-pay-card{
background: #FAF6EB;
border: 2px solid #E5DDC7;
border-radius: 12px;
cursor: pointer;
transition: all .15s ease;
overflow: hidden;
position: relative;
}
.erd-pay-card input[type=radio]{
position: absolute;
opacity: 0; pointer-events: none;
}
.erd-pay-card:hover{ border-color: #DCA62B; }
.erd-pay-card.is-active{
border-color: #DCA62B;
background: #fff;
}
.erd-pay-card-head{
display: grid;
grid-template-columns: 44px 1fr auto;
gap: .85rem;
align-items: center;
padding: 1rem 1.2rem 1rem 1rem;
position: relative;
}
.erd-pay-card-head::before{
content: ""; position: absolute;
top: 50%; right: 1rem; transform: translateY(-50%);
width: 18px; height: 18px;
border: 2px solid #E5DDC7;
border-radius: 50%; background: #fff;
}
.erd-pay-card.is-active .erd-pay-card-head::before{
border-color: #DCA62B;
background: radial-gradient(circle, #DCA62B 50%, #fff 55%);
}
.erd-pay-card-icon{
width: 44px; height: 44px;
border-radius: 12px;
background: #FFF3D6;
color: #B7831A;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
border: 1px solid #ECD58E;
}
.erd-pay-card.is-active .erd-pay-card-icon{
background: #DCA62B; color: #1F2418;
}
.erd-pay-card-text{ min-width: 0; }
.erd-pay-card-text b{
display: block;
color: #1F2418;
font-weight: 700;
font-size: .98rem;
line-height: 1.2;
margin-bottom: 2px;
}
.erd-pay-card-text small{ color: #6F6852; font-size: .8rem; line-height: 1.35; }
.erd-pay-card-brands{
display: inline-flex; gap: .35rem;
font-size: 1.6rem;
color: #6F6852;
margin-right: 32px;
}
.erd-pay-card-body{
display: none;
padding: 0 1.2rem 1.2rem;
border-top: 1px dashed #E5DDC7;
margin-top: -1px;
flex-direction: column; gap: .85rem;
}
.erd-pay-card.is-active .erd-pay-card-body{
display: flex;
padding-top: 1rem;
}
.erd-card-num-wrap{ position: relative; }
.erd-card-num-wrap input{
width: 100%;
letter-spacing: .12em;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.erd-card-brand-mark{
position: absolute;
top: 50%; right: 12px; transform: translateY(-50%);
width: 36px; height: 24px;
border-radius: 4px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: none;
}
.erd-card-brand-mark.is-visa,
.erd-card-brand-mark.is-mastercard,
.erd-card-brand-mark.is-amex,
.erd-card-brand-mark.is-troy{ display: block; }
.erd-card-brand-mark.is-visa{ background-color: #fff; background-image: url("data:image/svg+xml;utf8,"); }
.erd-card-brand-mark.is-mastercard{ background: linear-gradient(90deg, #EB001B 50%, #F79E1B 50%); border-radius: 50%; width: 24px; height: 24px; }
.erd-card-brand-mark.is-amex{ background: #2E77BB; }
.erd-card-brand-mark.is-troy{ background: #00A;color:#fff; }
.erd-co-info{
font-size: .82rem;
color: #6F5418;
background: #FFF3D6;
border: 1px solid #ECD58E;
padding: .65rem .9rem;
border-radius: 8px;
margin: 0;
display: flex;
align-items: flex-start;
gap: .55rem;
line-height: 1.45;
flex-wrap: wrap;
}
.erd-co-info i{ color: #B7831A; flex-shrink: 0; margin-top: 2px; }
.erd-co-info strong{ color: #433014; }
/* Havale / EFT — banka bilgisi */
.erd-pay-disc{
display: inline-block;
background: #4A5D3A;
color: #FEF8E0;
font-size: .65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
margin-left: .35rem;
letter-spacing: .04em;
}
.erd-bank-info{
background: #FAF6EB;
border: 1px solid #E5DDC7;
border-radius: 10px;
padding: .85rem 1rem;
}
.erd-bank-info h6{
font-size: .76rem;
font-weight: 700;
color: #6F6852;
text-transform: uppercase;
letter-spacing: .12em;
margin: 0 0 .55rem;
}
.erd-bank-info ul{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .4rem;
}
.erd-bank-info li{
display: grid;
grid-template-columns: 80px 1fr auto;
gap: .5rem;
align-items: center;
font-size: .85rem;
padding: .35rem 0;
border-bottom: 1px dashed #E5DDC7;
}
.erd-bank-info li:last-child{ border-bottom: 0; }
.erd-bank-info span{ color: #6F6852; font-size: .76rem; }
.erd-bank-info b{
color: #1F2418;
font-weight: 700;
word-break: break-all;
font-family: ui-monospace, monospace;
}
.erd-bank-copy{
background: #fff;
border: 1px solid #E5DDC7;
color: #1F2418;
width: 32px; height: 32px;
border-radius: 8px;
cursor: pointer;
-webkit-appearance: none; appearance: none;
display: inline-flex; align-items: center; justify-content: center;
}
.erd-bank-copy:hover{ background: #DCA62B; border-color: #DCA62B; color: #1F2418; }
/* İndirim satırı */
.erd-co-discount{
color: #4A5D3A !important;
font-weight: 600;
}
.erd-co-discount b{ color: #4A5D3A !important; }
.erd-co-agree{
padding: 1rem 1.3rem 1.3rem;
border-top: 1px dashed #E5DDC7;
}
.erd-co-agree label{
display: flex; align-items: flex-start; gap: .55rem;
font-size: .85rem; color: #2B2E22;
cursor: pointer;
}
.erd-co-agree input{ margin-top: 4px; accent-color: #DCA62B; }
.erd-co-agree a{ color: #B7831A; }
/* Sağ özet */
.erd-co-summary{
background: #fff;
max-width: 100%;
overflow: hidden;
}
.erd-co-items{
list-style: none; padding: 0;
margin: 0;
max-height: 280px;
overflow-y: auto;
overflow-x: hidden;
border-bottom: 1px dashed #E5DDC7;
}
.erd-co-items li{
display: grid;
grid-template-columns: 44px minmax(0,1fr) auto;
gap: .65rem;
align-items: center;
padding: .65rem 1.3rem;
border-bottom: 1px solid #F1E8D0;
max-width: 100%;
}
.erd-co-items li:last-child{ border-bottom: 0; }
.erd-co-thumb{
width: 44px; height: 44px;
background: #FAF6EB;
border-radius: 8px;
overflow: hidden;
border: 1px solid #E5DDC7;
flex-shrink: 0;
}
.erd-co-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.erd-co-iteminfo{ min-width: 0; }
.erd-co-iteminfo b{
display: block;
font-size: .85rem;
color: #1F2418;
font-weight: 600;
line-height: 1.2;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.erd-co-iteminfo small{
color: #6F6852;
font-size: .76rem;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.erd-co-itemprice{
font-weight: 700;
color: #1F2418;
font-size: .9rem;
white-space: nowrap;
}
.erd-co-totals{
padding: 1rem 1.3rem;
display: flex; flex-direction: column; gap: .35rem;
border-bottom: 1px dashed #E5DDC7;
}
.erd-co-totals > div{
display: flex; justify-content: space-between; align-items: center;
font-size: .92rem;
color: #2B2E22;
}
.erd-co-totals b{ color: #1F2418; font-weight: 700; }
.erd-co-totals > div.erd-co-hint,
.erd-co-hint{
font-size: .85rem !important;
line-height: 1.35 !important;
color: #F5E6BF !important;
background: linear-gradient(135deg, #2A2118 0%, #3D2F20 100%);
padding: .65rem .8rem !important;
border-radius: 10px;
border: 1px solid #5A4528;
margin: .5rem 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: .35rem .55rem !important;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
text-align: left;
word-break: break-word;
overflow-wrap: anywhere;
}
.erd-co-hint i{ color: #E9B939; font-size: 1rem; flex-shrink: 0; }
.erd-co-hint strong{ color: #FFD56B !important; font-weight: 800; font-size: 1em; white-space: nowrap; }
/* Ürün yorumları */
.erd-reviews-list{ display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1rem; }
.erd-review-card{
background: #FAF6EB; border: 1px solid #ECD58E;
padding: 1rem 1.2rem; border-radius: 12px;
}
.erd-review-card header{ display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; flex-wrap: wrap; }
.erd-review-stars{ color: #DCA62B; font-size: .92rem; letter-spacing: 1px; }
.erd-review-card header b{ color: #1F2418; font-size: .95rem; }
.erd-review-card header small{ color: #98906F; font-size: .8rem; margin-left: auto; }
.erd-review-card p{ margin: 0; color: #433014; font-size: .92rem; line-height: 1.6; }
.erd-review-form-wrap{ background: #fff; border: 1px solid #E5DDC7; border-radius: 12px; padding: 1.3rem 1.5rem; margin-top: 1rem; }
.erd-review-form{ display: flex; flex-direction: column; gap: .85rem; }
.erd-review-form label{ display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: #4A4A4A; font-weight: 600; }
.erd-review-form input[type="text"], .erd-review-form input[type="email"], .erd-review-form textarea{
width: 100%; box-sizing: border-box;
padding: .65rem .9rem; border: 1.5px solid #E5DDC7; border-radius: 8px;
background: #FAF6EB; font-family: inherit; font-size: .95rem; color: #1F2418;
outline: 0;
}
.erd-review-form input:focus, .erd-review-form textarea:focus{ border-color: #DCA62B; background: #fff; }
.erd-review-form textarea{ resize: vertical; min-height: 90px; }
.erd-review-rating-row{ display: flex !important; flex-direction: row !important; align-items: center; gap: .8rem; }
.erd-review-stars-input{ display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.erd-review-stars-input input{ display: none; }
.erd-review-stars-input label{
font-size: 1.6rem; color: #D6CEB4; cursor: pointer;
transition: color .15s; padding: 0; margin: 0;
}
.erd-review-stars-input label:hover,
.erd-review-stars-input label:hover ~ label,
.erd-review-stars-input input:checked ~ label{ color: #DCA62B; }
/* Hesap oluştur — kompakt satır + custom checkbox */
.erd-co-mini-acc{
margin-top: .35rem;
padding-top: .65rem;
border-top: 1px dashed #E5DDC7;
display: flex; flex-direction: column; gap: .55rem;
}
.erd-co-mini-acc-row{
display: flex !important; align-items: center; gap: .6rem;
font-size: .87rem; color: #4A4A4A; cursor: pointer;
margin: 0 !important;
user-select: none;
}
.erd-co-mini-acc-row input[type="checkbox"]{
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important; height: 20px !important;
margin: 0 !important; padding: 0 !important;
flex-shrink: 0;
border: 2px solid #C8B884 !important;
border-radius: 5px !important;
background: #fff !important;
cursor: pointer;
position: relative;
transition: all .18s ease;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.erd-co-mini-acc-row input[type="checkbox"]:hover{ border-color: #DCA62B !important; }
.erd-co-mini-acc-row input[type="checkbox"]:checked{
background: linear-gradient(135deg, #DCA62B, #B7831A) !important;
border-color: #B7831A !important;
}
.erd-co-mini-acc-row input[type="checkbox"]:checked::after{
content: '';
position: absolute;
left: 5px; top: 1px;
width: 6px; height: 11px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.erd-co-mini-acc-row input[type="checkbox"]:focus-visible{
outline: 2px solid #DCA62B; outline-offset: 2px;
}
.erd-co-mini-acc-row span{ font-weight: 600; color: #1F2418; }
.erd-co-mini-acc-row small{ color: #98906F; font-weight: 400; margin-left: .15rem; }
.erd-co-mini-acc-fields{
margin-left: 1.95rem;
display: flex; flex-direction: column; gap: .45rem;
}
.erd-co-mini-acc-fields input[type="password"]{
padding: .6rem .9rem !important;
border: 1.5px solid #E5DDC7 !important;
border-radius: 8px !important;
background: #FAF6EB !important;
font-size: .9rem !important;
box-sizing: border-box;
width: 100%;
}
.erd-co-mini-acc-fields input[type="password"]:focus{
border-color: #DCA62B !important;
background: #fff !important;
outline: 0;
}
.erd-co-mini-acc-msg{
font-size: .8rem; min-height: 1.1em; padding: 0 .25rem;
color: transparent;
}
.erd-co-mini-acc-msg.is-ok { color: #4A5D3A; font-weight: 600; }
.erd-co-mini-acc-msg.is-err { color: #B7430E; font-weight: 600; }
@media (max-width: 575px){
.erd-co-mini-acc-fields{ margin-left: 0; }
.erd-co-mini-acc-row small{ display: none; }
}
/* Misafir → giriş yap stripi */
.erd-co-auth-strip{
display: flex; align-items: center; justify-content: space-between;
gap: .8rem; flex-wrap: wrap;
background: linear-gradient(135deg, #FAF6EB 0%, #F5EDD7 100%);
border: 1px solid #ECD58E;
padding: .85rem 1.1rem;
border-radius: 12px;
margin-bottom: 1.1rem;
}
.erd-co-auth-strip-text{ display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; font-size: .93rem; color: #433014; }
.erd-co-auth-strip-text i{ color: #B7831A; font-size: 1.15rem; }
.erd-co-auth-strip-text b{ color: #1F2418; }
.erd-co-auth-link{
display: inline-flex; align-items: center; gap: .4rem;
background: #1F2418; color: #FFD56B !important;
padding: .55rem 1rem; border-radius: 8px;
font-weight: 700; font-size: .88rem;
text-decoration: none !important;
white-space: nowrap;
transition: all .2s;
}
.erd-co-auth-link:hover{ background: #2A2118; transform: translateY(-1px); }
.erd-co-total{
margin-top: .35rem;
padding-top: .55rem;
border-top: 1px solid #E5DDC7;
font-size: 1.1rem !important;
}
.erd-co-total b{ color: #DCA62B !important; font-size: 1.3rem; font-weight: 800; }
.erd-co-submit{
display: flex; align-items: center; justify-content: center;
gap: .55rem;
width: calc(100% - 2.6rem);
margin: 1rem 1.3rem 0;
padding: .95rem 1rem;
background: #1F2418;
color: #FEF8E0;
border: 0;
border-radius: 12px;
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all .15s ease;
box-shadow: 0 6px 16px rgba(31,36,24,.18);
}
.erd-co-submit:hover{
background: #DCA62B;
color: #1F2418;
transform: translateY(-2px);
}
.erd-co-trust{
list-style: none; padding: 1rem 1.3rem 1.3rem; margin: 0;
display: flex; flex-direction: column; gap: .35rem;
border-top: 1px dashed #E5DDC7;
margin-top: 1rem;
}
.erd-co-trust li{
font-size: .8rem;
color: #6F6852;
display: flex; align-items: center; gap: .55rem;
}
.erd-co-trust i{ color: #4A5D3A; width: 16px; }
/* Mobil sticky alt bar */
.erd-co-mobilebar{ display: none; }
@media (max-width: 991.98px){
.erd-co-header{
grid-template-columns: 1fr;
text-align: center;
gap: .5rem;
}
.erd-co-header h1{ text-align: center; }
.erd-co-steps{ justify-content: center; }
.erd-co-grid{ grid-template-columns: 1fr; gap: 1rem; }
.erd-co-side{ position: static; }
.erd-co-summary{ order: 99; }
/* Mobil — taşmaları engelle */
.erd-co-row-2,
.erd-co-row-3{ grid-template-columns: 1fr !important; gap: .65rem; }
.erd-co-block{ padding: 1rem !important; }
.erd-co-block input:not([type="checkbox"]):not([type="radio"]),
.erd-co-block select,
.erd-co-block textarea{
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: 16px; /* iOS auto-zoom önleme */
}
/* KVKK onay checkbox — yatay kalsın, taşmasın */
.erd-co-agree label{
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
gap: .5rem;
flex-wrap: nowrap;
}
.erd-co-agree input[type="checkbox"]{
flex-shrink: 0;
width: 18px !important;
height: 18px !important;
margin-top: 3px;
}
.erd-co-agree span{
flex: 1;
min-width: 0;
font-size: .82rem;
line-height: 1.45;
}
.erd-co-coupon-row{ flex-wrap: wrap; }
.erd-co-coupon-row input{ flex: 1 1 100%; min-width: 0; }
.erd-co-coupon-row button{ flex: 1 1 100%; }
.erd-pay-card-body{ padding: 1rem !important; }
/* Kart numarası input — mobilede sığsın */
.erd-pay-card-body input[name="card_number"]{ font-size: 16px; letter-spacing: 1px; }
/* Konteyner — daraltma */
html, body{ overflow-x: hidden; }
.erd-co-page{ max-width: 100vw; overflow-x: hidden; }
.erd-co-page .container{ padding-left: 8px !important; padding-right: 8px !important; max-width: 100%; }
/* Block iç padding küçült */
.erd-co-block{ padding: .9rem !important; }
.erd-co-summary{ padding: .9rem !important; }
/* Form elementleri — kesin tam genişlik */
.erd-co-block input[type="text"],
.erd-co-block input[type="email"],
.erd-co-block input[type="tel"],
.erd-co-block input[type="number"],
.erd-co-block input[type="password"],
.erd-co-block textarea,
.erd-co-block select{
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: 16px;
}
.erd-co-block label{ display: block; max-width: 100%; }
/* Pay-card-body input/select */
.erd-pay-card-body input,
.erd-pay-card-body select{
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: 16px;
}
.erd-co-page img,
.erd-co-page iframe,
.erd-co-page video{ max-width: 100%; height: auto; }
/* Kart/havale seçim — dikey tek kolon */
.erd-pay-list{ display: flex; flex-direction: column; gap: .55rem; }
.erd-pay-card{ width: 100%; max-width: 100%; box-sizing: border-box; }
/* Cloudflare widget viewport'a sığsın */
.cf-turnstile{ max-width: 100% !important; overflow: hidden; }
.cf-turnstile iframe{ max-width: 100% !important; }
/* Sipariş özeti — tablo gibi alanlar */
.erd-co-totals > div{ flex-wrap: wrap; gap: .35rem; }
/* Mobil sticky alt bar */
.erd-co-mobilebar{
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
position: fixed;
bottom: 0; left: 0; right: 0;
background: #fff;
border-top: 1px solid #E5DDC7;
padding: .65rem 1rem;
z-index: 80;
box-shadow: 0 -8px 24px rgba(31,36,24,.10);
}
.erd-co-mobilebar div small{
display: block; font-size: .68rem;
color: #98906F;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
}
.erd-co-mobilebar div b{
display: block; font-size: 1.1rem;
color: #DCA62B; font-weight: 800;
}
.erd-co-mobilebar-btn{
flex: 1;
background: #DCA62B;
color: #1F2418;
border: 0;
padding: .8rem 1rem;
border-radius: 10px;
font-family: "Onest", sans-serif;
font-weight: 700; font-size: .92rem;
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
cursor: pointer;
max-width: 200px;
}
/* Sayfa altında bottom bar yer açsın */
.erd-co-page{ padding-bottom: 90px; }
body:has(.erd-co-mobilebar) .erd-bn{ display: none !important; }
}
@media (max-width: 991.98px){
/* ============================================
ÖDEME SAYFASI — MOBİL OVERFLOW GUARD
Viewport'tan büyük olan her elementi sınırla
============================================ */
html{ overflow-x: hidden !important; }
body{ overflow-x: hidden !important; max-width: 100vw; }
.erd-co-page,
.erd-co-page * {
max-width: 100vw;
box-sizing: border-box;
}
.erd-co-page .container,
.erd-co-page .container-fluid{
max-width: 100vw !important;
width: 100% !important;
padding-left: 8px !important;
padding-right: 8px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.erd-co-page .erd-co-grid,
.erd-co-page .erd-co-main,
.erd-co-page .erd-co-side,
.erd-co-page .erd-co-form,
.erd-co-page .erd-co-block,
.erd-co-page .erd-co-fields,
.erd-co-page .erd-co-summary,
.erd-co-page .erd-co-totals,
.erd-co-page .erd-co-items{
max-width: 100% !important;
min-width: 0;
width: 100% !important;
}
}
@media (max-width: 575.98px){
.erd-co-row-2{ grid-template-columns: 1fr !important; gap: .65rem; }
.erd-co-row-3{ grid-template-columns: 1fr 1fr 1fr !important; gap: .45rem; }
.erd-pay-card-brands{ display: none; }
.erd-pay-card-head{ grid-template-columns: 40px 1fr; padding: .65rem .85rem; padding-right: 2.4rem; gap: .55rem; }
.erd-pay-card-head b{ font-size: .92rem; }
.erd-pay-card-text{ font-size: .75rem; }
.erd-co-block-head{ padding: .85rem 1rem !important; gap: .55rem; }
.erd-co-block-head h3{ font-size: 1.05rem; }
.erd-co-block-head .erd-co-num{ width: 28px; height: 28px; font-size: .9rem; }
.erd-co-fields, .erd-co-agree, .erd-co-totals, .erd-co-trust, .erd-co-coupon{
padding-left: .85rem !important;
padding-right: .85rem !important;
}
.erd-co-submit{
margin: .85rem;
width: calc(100% - 1.7rem);
padding: .9rem 1rem;
font-size: .92rem;
}
.erd-pay-list{ padding: .85rem; }
.erd-co-page .container{ padding-left: 6px !important; padding-right: 6px !important; }
}
/* ============================================
ESKİ ÖDEME / CHECKOUT (eski stiller — kullanım dışı)
============================================ */
.erd-checkout{ font-family: "Onest", sans-serif; }
.erd-checkout-grid{
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 1.5rem;
align-items: start;
margin-top: 1.5rem;
}
.erd-checkout-side{ position: sticky; top: 1.5rem; }
.erd-checkout-secure{
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #E5DDC7;
font-size: .82rem;
color: #6F6852;
display: flex; align-items: center; gap: .5rem;
}
.erd-checkout-secure i{ color: #4A5D3A; }
.erd-checkout-agree label{
display: flex; align-items: flex-start; gap: .55rem;
font-size: .88rem;
color: #2B2E22;
cursor: pointer;
}
.erd-checkout-agree input{
margin-top: 4px;
accent-color: #DCA62B;
}
.erd-checkout-agree a{ color: #B7831A; text-decoration: underline; }
/* Pay methods */
.erd-pay-methods{ display: flex; flex-direction: column; gap: .55rem; }
.erd-pay-method{
display: grid;
grid-template-columns: 48px 1fr auto;
gap: 1rem;
align-items: center;
padding: 1rem 1.2rem;
background: #fff;
border: 1.5px solid #E5DDC7;
border-radius: 12px;
cursor: pointer;
transition: all .15s ease;
position: relative;
}
.erd-pay-method:hover{ border-color: #DCA62B; }
.erd-pay-method.is-active,
.erd-pay-method:has(input:checked){
border-color: #DCA62B;
background: #FFF8E2;
}
.erd-pay-method input[type=radio]{
position: absolute;
opacity: 0;
pointer-events: none;
}
.erd-pay-method::before{
content: "";
position: absolute;
top: 50%; right: 1rem; transform: translateY(-50%);
width: 18px; height: 18px;
border: 2px solid #E5DDC7;
border-radius: 50%;
background: #fff;
}
.erd-pay-method.is-active::before,
.erd-pay-method:has(input:checked)::before{
border-color: #DCA62B;
background: radial-gradient(circle, #DCA62B 50%, #fff 55%);
}
.erd-pay-icon{
width: 48px; height: 48px;
background: #FFF3D6;
color: #B7831A;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.2rem;
border: 1px solid #ECD58E;
}
.erd-pay-info b{
display: block;
color: #1F2418;
font-size: .98rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 2px;
}
.erd-pay-info small{
color: #6F6852;
font-size: .8rem;
}
.erd-pay-brands{
display: inline-flex; gap: .35rem;
margin-right: 32px;
color: #6F6852;
}
.erd-pay-brands i{ font-size: 1.6rem; }
@media (max-width: 991.98px){
.erd-checkout-grid{ grid-template-columns: 1fr; }
.erd-checkout-side{ position: static; }
.erd-pay-method{ grid-template-columns: 40px 1fr; }
.erd-pay-brands{ display: none; }
}
/* PayTR iframe wrapper */
.erd-paytr-wrap{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.erd-paytr-info{
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-paytr-info h3{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.15rem;
color: #1F2418;
margin: 0 0 .35rem;
display: flex; align-items: center; gap: .55rem;
}
.erd-paytr-info i{ color: #4A5D3A; }
.erd-paytr-info p{
color: #6F6852; font-size: .9rem;
margin: 0;
}
/* ============================================
ÜRÜN DETAY SAYFASI
============================================ */
.erd-product-detail-page{
padding: 1.5rem 0 3rem;
margin-top: 1rem;
font-family: "Onest", sans-serif;
}
.erd-pd-grid{
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
margin: 1.5rem 0 2.5rem;
align-items: start;
}
.erd-pd-gallery{ position: sticky; top: 1.5rem; }
.erd-pd-image{
position: relative;
background: #FAF6EB;
border: 1px solid #E5DDC7;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.erd-pd-image img{ transition: opacity .12s ease; }
/* Galeri arrow'ları */
.erd-pd-arrow{
position: absolute;
top: 50%; transform: translateY(-50%);
width: 42px; height: 42px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(229,221,199,.7);
border-radius: 50%;
color: #1F2418;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 4;
backdrop-filter: blur(6px);
box-shadow: 0 4px 12px rgba(31,36,24,.12);
transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
opacity: .85;
}
.erd-pd-image:hover .erd-pd-arrow{ opacity: 1; }
.erd-pd-arrow:hover{
background: #DCA62B;
border-color: #DCA62B;
color: #1F2418;
opacity: 1;
}
.erd-pd-arrow:active{ transform: translateY(-50%) scale(.95); }
.erd-pd-arrow-prev{ left: 14px; }
.erd-pd-arrow-next{ right: 14px; }
.erd-pd-counter{
position: absolute;
bottom: 14px; left: 50%; transform: translateX(-50%);
background: rgba(31,36,24,.7);
color: #FEF8E0;
font-size: .75rem; font-weight: 600;
padding: 4px 12px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
backdrop-filter: blur(4px);
z-index: 3;
pointer-events: none;
}
@media (max-width: 575.98px){
.erd-pd-arrow{ width: 36px; height: 36px; }
.erd-pd-arrow-prev{ left: 10px; }
.erd-pd-arrow-next{ right: 10px; }
}
/* Galeri thumbs — yatay kaydırılabilir şerit (sahibinden tarzı) */
.erd-pd-thumbs{
display: flex;
gap: .5rem;
margin-top: .65rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: #DCA62B #FAF6EB;
padding-bottom: 4px; /* scrollbar için yer */
-webkit-overflow-scrolling: touch;
}
.erd-pd-thumbs::-webkit-scrollbar{ height: 6px; }
.erd-pd-thumbs::-webkit-scrollbar-track{ background: #FAF6EB; border-radius: 3px; }
.erd-pd-thumbs::-webkit-scrollbar-thumb{ background: #DCA62B; border-radius: 3px; }
.erd-pd-thumb{
flex: 0 0 78px;
width: 78px; height: 78px;
background: #FAF6EB;
border: 1.5px solid #E5DDC7;
border-radius: 6px;
cursor: pointer;
overflow: hidden;
padding: 0;
-webkit-appearance: none; appearance: none;
transition: border-color .15s ease, transform .15s ease;
scroll-snap-align: start;
position: relative;
}
.erd-pd-thumb:hover{ border-color: #DCA62B; transform: translateY(-2px); }
.erd-pd-thumb.is-active{
border-color: #DCA62B;
border-width: 2px;
box-shadow: 0 4px 10px rgba(220,166,43,.25);
}
.erd-pd-thumb img{
width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 575.98px){
.erd-pd-thumb{ flex-basis: 64px; width: 64px; height: 64px; }
}
.erd-pd-image img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.erd-pd-badge{
position: absolute;
top: 16px; left: 16px;
background: #DCA62B;
color: #1F2418;
font-size: .76rem; font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
letter-spacing: .04em;
text-transform: uppercase;
}
.erd-pd-fav{
position: absolute;
top: 16px; right: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid #E5DDC7;
color: #98906F;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .2s ease;
-webkit-appearance: none; appearance: none;
padding: 0; outline: 0;
box-shadow: 0 4px 12px rgba(31,36,24,.10);
}
.erd-pd-fav svg path{ fill: transparent; stroke: currentColor; transition: fill .2s ease; }
.erd-pd-fav:hover{ color: #C73E2B; transform: scale(1.06); }
.erd-pd-fav.is-active{ color: #C73E2B; border-color: #C73E2B; }
.erd-pd-fav.is-active svg path{ fill: #C73E2B; stroke: #C73E2B; }
/* Sağ kolon — meta satırı */
.erd-pd-meta{
display: flex; align-items: center; gap: .55rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.erd-pd-cat-pill{
display: inline-flex; align-items: center; gap: .4rem;
background: #FFF3D6;
color: #B7831A;
border: 1px solid #ECD58E;
padding: .3rem .8rem;
border-radius: 999px;
font-size: .76rem;
font-weight: 600;
text-decoration: none;
transition: all .15s ease;
}
.erd-pd-cat-pill:hover{ background: #DCA62B; color: #1F2418; border-color: #DCA62B; }
.erd-pd-cat-pill svg{ width: 16px; height: 16px; }
.erd-pd-meta-badge{
display: inline-block;
background: #1F2418;
color: #DCA62B;
padding: .3rem .8rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.erd-pd-sku{
margin-left: auto;
color: #98906F;
font-size: .76rem;
font-family: "Onest", sans-serif;
letter-spacing: .04em;
}
.erd-pd-title{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 2.2rem;
color: #1F2418;
letter-spacing: -.02em;
margin: 0 0 .65rem;
line-height: 1.15;
}
.erd-pd-short{
font-size: 1rem;
color: #6F6852;
line-height: 1.6;
margin: 0 0 1.5rem;
}
/* Fiyat kartı — modern */
.erd-pd-price-card{
position: relative;
background: #FAF6EB;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.2rem 1.4rem;
margin-bottom: 1.5rem;
overflow: hidden;
}
.erd-pd-price-card::before{
content: "";
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: #DCA62B;
}
.erd-pd-discount-tag{
position: absolute;
top: 14px; right: 14px;
background: #C73E2B;
color: #fff;
padding: .25rem .65rem;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .03em;
}
.erd-pd-price-row{
display: flex; align-items: baseline; gap: .65rem;
margin-bottom: .55rem;
}
.erd-pd-price-vat{
font-size: .72rem;
color: #98906F;
letter-spacing: .04em;
text-transform: uppercase;
margin-left: auto;
}
.erd-pd-meta-row{
display: flex; align-items: center; gap: 1rem;
flex-wrap: wrap;
padding-top: .55rem;
border-top: 1px dashed #E5DDC7;
}
.erd-pd-meta-item{
display: inline-flex; align-items: center; gap: .35rem;
font-size: .8rem;
color: #6F6852;
}
.erd-pd-meta-item i{ color: #DCA62B; font-size: .9rem; }
.erd-pd-dot{
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #4A5D3A;
box-shadow: 0 0 0 3px rgba(124,154,46,.20);
animation: erdPulse 2s ease-in-out infinite;
}
.erd-pd-dot-red{ background: #C73E2B; box-shadow: 0 0 0 3px rgba(199,62,43,.18); }
@keyframes erdPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(124,154,46,.20); }
50% { box-shadow: 0 0 0 6px rgba(124,154,46,.05); }
}
.erd-pd-price-now{
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 2.4rem;
color: #1F2418;
letter-spacing: -.03em;
line-height: 1;
}
.erd-pd-price-old{
font-size: 1rem;
color: #98906F;
text-decoration: line-through;
font-weight: 500;
}
.erd-pd-stock-ok{ color: #4A5D3A; font-weight: 600; }
.erd-pd-stock-oos{ color: #C73E2B; font-weight: 600; }
.erd-pd-form{ margin-bottom: 1.2rem; }
.erd-pd-label{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: .7rem;
padding-bottom: .55rem;
border-bottom: 1px dashed #E5DDC7;
}
.erd-pd-label > span{
font-size: .82rem;
font-weight: 700;
color: #1F2418;
letter-spacing: .02em;
text-transform: uppercase;
}
.erd-pd-label > span::before{
content: "📦";
margin-right: 6px;
filter: grayscale(.3);
}
.erd-pd-label > small{
font-size: .75rem;
color: #98906F;
font-weight: 400;
font-style: italic;
}
.erd-pd-variant-block{ margin-bottom: 1.2rem; }
.erd-pd-variant-fixed{
display: inline-block;
padding: .5rem 1rem;
background: #FAF6EB;
border: 1px solid #E5DDC7;
border-radius: 999px;
font-size: .85rem;
color: #6F6852;
font-weight: 600;
}
.erd-pd-actions{
display: grid;
grid-template-columns: auto 1fr;
gap: .65rem;
margin-top: 1rem;
}
.erd-qty-input-pd{
border: 1px solid #E5DDC7;
background: #fff;
border-radius: 999px;
height: 52px;
display: inline-flex; align-items: center;
}
.erd-qty-input-pd .erd-qty-btn{
width: 44px; height: 52px;
font-size: 1.2rem;
}
.erd-qty-input-pd .erd-qty-field{
width: 44px; height: 52px;
font-size: 1rem;
}
.erd-pd-btn-add{
background: #1F2418;
color: #FEF8E0;
border: 0;
padding: 0 1.8rem;
height: 56px;
border-radius: 12px;
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
-webkit-appearance: none; appearance: none;
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
transition: all .15s ease;
letter-spacing: .01em;
flex: 1;
box-shadow: 0 4px 14px rgba(31,36,24,.18);
}
.erd-pd-btn-add:hover{
background: #DCA62B; color: #1F2418;
box-shadow: 0 8px 22px rgba(220,166,43,.30);
transform: translateY(-1px);
}
.erd-pd-btn-add i{ font-size: 1rem; }
/* İkincil aksiyon satırı — favori + WhatsApp */
.erd-pd-secondary-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: .55rem;
margin-top: .85rem;
}
.erd-pd-secondary{
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .7rem 1rem;
height: 46px;
background: transparent;
border: 1.5px solid #E5DDC7;
border-radius: 10px;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: .85rem;
color: #1F2418;
cursor: pointer;
text-decoration: none;
-webkit-appearance: none; appearance: none;
transition: all .15s ease;
}
.erd-pd-secondary:hover{
border-color: #1F2418;
background: #FAF6EB;
color: #1F2418;
}
.erd-pd-secondary svg path{ fill: transparent; stroke: currentColor; }
.erd-pd-secondary.is-active{
border-color: #C73E2B;
color: #C73E2B;
background: rgba(199,62,43,.06);
}
.erd-pd-secondary.is-active svg path{ fill: #C73E2B; stroke: #C73E2B; }
.erd-pd-secondary-wa{
border-color: rgba(37,211,102,.4);
color: #128C7E;
}
.erd-pd-secondary-wa:hover{
border-color: #25D366;
background: rgba(37,211,102,.08);
color: #128C7E;
}
.erd-pd-secondary-wa i{ font-size: 1.1rem; color: #25D366; }
/* Garanti — modern kart grid */
.erd-pd-perks{
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid #E5DDC7;
}
.erd-pd-perk{
display: flex; align-items: center; gap: .65rem;
padding: .65rem .85rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 10px;
transition: border-color .15s ease;
}
.erd-pd-perk:hover{ border-color: #DCA62B; }
.erd-pd-perk-ico{
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 8px;
background: #FFF3D6;
color: #B7831A;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid #ECD58E;
}
.erd-pd-perk-ico svg{ width: 18px; height: 18px; }
.erd-pd-perk b{
display: block;
color: #1F2418;
font-weight: 700;
font-size: .82rem;
line-height: 1.15;
}
.erd-pd-perk span{
color: #6F6852;
font-size: .72rem;
}
/* Sekmeli açıklama */
.erd-pd-tabs{
margin-top: 2.5rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 16px;
overflow: hidden;
}
.erd-pd-tabs-nav{
list-style: none; padding: 0; margin: 0;
display: flex;
border-bottom: 1px solid #E5DDC7;
background: #FAF6EB;
}
.erd-pd-tabs-nav li{ flex: 0 0 auto; }
.erd-pd-tabs-nav button{
background: transparent;
border: 0;
padding: 1rem 1.6rem;
font-family: "Onest", sans-serif;
font-size: .92rem;
font-weight: 600;
color: #6F6852;
cursor: pointer;
position: relative;
-webkit-appearance: none; appearance: none;
transition: color .15s ease;
}
.erd-pd-tabs-nav button:hover{ color: #DCA62B; }
.erd-pd-tabs-nav button.is-active{
color: #1F2418;
background: #fff;
}
.erd-pd-tabs-nav button.is-active::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: #DCA62B;
}
.erd-pd-tab-panel{ display: none; padding: 1.8rem 2rem; }
.erd-pd-tab-panel.is-active{ display: block; }
.erd-pd-tab-panel h3{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.15rem;
color: #1F2418;
margin: 0 0 1rem;
padding-bottom: .65rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-pd-tab-panel p{
color: #2B2E22;
font-size: .95rem;
line-height: 1.7;
margin: 0 0 .85rem;
}
.erd-pd-tab-panel strong{ color: #1F2418; font-weight: 700; }
.erd-pd-info-table{
width: 100%;
border-collapse: collapse;
font-size: .88rem;
}
.erd-pd-info-table th, .erd-pd-info-table td{
padding: .65rem 0;
border-bottom: 1px solid #F1E8D0;
text-align: left;
}
.erd-pd-info-table th{
font-weight: 600;
color: #6F6852;
width: 30%;
letter-spacing: .02em;
}
.erd-pd-info-table td{ color: #1F2418; }
.erd-pd-info-table tr:last-child th,
.erd-pd-info-table tr:last-child td{ border-bottom: 0; }
.erd-section-related{ background: #FAF6EB; padding: 2.5rem 0; }
@media (max-width: 991.98px){
.erd-pd-grid{ grid-template-columns: 1fr; gap: 2rem; }
.erd-pd-gallery{ position: static; }
.erd-pd-title{ font-size: 1.6rem; }
.erd-pd-price-now{ font-size: 1.5rem; }
.erd-pd-perks{ grid-template-columns: 1fr; }
.erd-pd-tab-panel{ padding: 1.2rem 1.4rem; }
.erd-pd-tabs-nav button{ padding: .85rem 1.2rem; font-size: .85rem; }
}
@media (max-width: 575.98px){
.erd-pd-actions{ grid-template-columns: 1fr; }
.erd-qty-input-pd{ width: 100%; justify-content: space-between; }
}
/* ============================================
FAVORİLER SAYFASI
============================================ */
.erd-listing-icon-fav{
background: rgba(199,62,43,.10);
color: #C73E2B;
border-color: rgba(199,62,43,.3);
}
.erd-fav-toolbar{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 12px;
padding: .75rem 1.2rem;
margin: 1.5rem 0 1.2rem;
display: flex; justify-content: space-between; align-items: center;
gap: 1rem; flex-wrap: wrap;
font-family: "Onest", sans-serif;
}
.erd-fav-toolbar-info{
font-size: .92rem;
color: #6F6852;
}
.erd-fav-toolbar-info strong{ color: #1F2418; font-weight: 700; }
.erd-fav-toolbar-actions{ display: flex; gap: .5rem; flex-wrap: wrap; }
.erd-fav-clear-btn{
background: transparent;
border: 1px solid #E5DDC7;
color: #6F6852;
padding: .55rem 1.2rem;
border-radius: 999px;
font-family: "Onest", sans-serif;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; gap: .35rem;
-webkit-appearance: none; appearance: none;
transition: all .15s ease;
}
.erd-fav-clear-btn:hover{
background: #FEE; border-color: #C73E2B; color: #C73E2B;
}
.erd-fav-page-empty{
background: #fff;
border: 1px dashed #E5DDC7;
border-radius: 16px;
padding: 4rem 1.5rem;
text-align: center;
font-family: "Onest", sans-serif;
}
.erd-fav-page-empty svg{ color: #C8C0A6; margin-bottom: 1rem; }
.erd-fav-page-empty h3{ color: #1F2418; font-weight: 700; margin: .5rem 0; }
.erd-fav-page-empty p{ color: #6F6852; max-width: 480px; margin: 0 auto; line-height: 1.6; }
.erd-fav-page-tip{
margin-top: 1.5rem;
background: #FFF8E2;
border: 1px solid #ECD58E;
color: #6F5418;
padding: .8rem 1.2rem;
border-radius: 12px;
font-size: .88rem;
font-family: "Onest", sans-serif;
display: flex; align-items: center; gap: .65rem;
}
.erd-fav-page-tip i{ color: #DCA62B; }
.erd-fav-page-tip strong{ color: #433014; font-weight: 700; }
/* ============================================
HAKKIMIZDA SAYFASI
============================================ */
.erd-about-intro{
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 1.5rem;
font-family: "Onest", sans-serif;
}
.erd-about-intro-text h2{
font-family: "Onest", sans-serif;
font-weight: 700; color: #1F2418;
font-size: 2rem; letter-spacing: -.02em;
margin: .35rem 0 1rem;
}
.erd-about-intro-text p{
font-size: 1rem; color: #2B2E22;
line-height: 1.7;
margin: 0 0 1rem;
}
.erd-about-bullets{
list-style: none; padding: 0; margin: 1.5rem 0 0;
display: flex; flex-direction: column; gap: .75rem;
}
.erd-about-bullets li{
display: flex; align-items: center; gap: .85rem;
font-size: .95rem;
color: #2B2E22;
font-weight: 500;
}
.erd-about-bullet-ico{
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 10px;
background: #FFF3D6;
color: #DCA62B;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid #ECD58E;
}
.erd-about-bullet-ico svg{ width: 20px; height: 20px; }
.erd-about-intro-stats{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .85rem;
}
.erd-about-stat{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.4rem 1.2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.erd-about-stat::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #DCA62B 0%, transparent 100%);
}
.erd-about-stat b{
display: block;
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 2.2rem;
color: #1F2418;
line-height: 1;
letter-spacing: -.03em;
}
.erd-about-stat b small{ font-size: 1.2rem; color: #DCA62B; }
.erd-about-stat span{
display: block;
margin-top: .35rem;
font-size: .82rem;
color: #6F6852;
font-weight: 500;
}
.erd-about-stat-gold{
background: linear-gradient(135deg, #DCA62B 0%, #C68F1B 100%);
border-color: #DCA62B;
}
.erd-about-stat-gold::before{ background: rgba(255,255,255,.4); }
.erd-about-stat-gold b{ color: #1F2418; }
.erd-about-stat-gold span{ color: rgba(31,36,24,.7); }
@media (max-width: 991.98px){
.erd-about-intro{ grid-template-columns: 1fr; gap: 2rem; }
.erd-about-intro-text h2{ font-size: 1.6rem; }
.erd-about-stat b{ font-size: 1.8rem; }
}
/* Değerlerimiz band */
.erd-about-band{
background: linear-gradient(180deg, #FAF6EB 0%, #F4ECCD 100%);
padding: 3.5rem 0;
margin: 3rem 0;
font-family: "Onest", sans-serif;
}
.erd-about-band-head{
text-align: center;
margin-bottom: 2rem;
}
.erd-about-band-head h2{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.8rem;
color: #1F2418; margin: .35rem 0 0;
letter-spacing: -.015em;
}
.erd-eyebrow-gold{ color: #B7831A; }
.erd-about-values{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.erd-about-value{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
transition: all .25s ease;
}
.erd-about-value:hover{
border-color: #DCA62B;
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(67,48,20,.10);
}
.erd-about-value-ico{
width: 64px; height: 64px;
margin: 0 auto 1rem;
background: #FFF3D6;
color: #B7831A;
border-radius: 50%;
border: 1px solid #ECD58E;
display: flex; align-items: center; justify-content: center;
transition: all .2s ease;
}
.erd-about-value-ico svg{ width: 32px; height: 32px; }
.erd-about-value:hover .erd-about-value-ico{
background: #DCA62B;
color: #1F2418;
border-color: #DCA62B;
transform: rotate(-6deg);
}
.erd-about-value h3{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.15rem;
color: #1F2418;
margin: 0 0 .55rem;
}
.erd-about-value p{
font-size: .9rem;
color: #6F6852;
line-height: 1.55;
margin: 0;
}
@media (max-width: 991.98px){ .erd-about-values{ grid-template-columns: 1fr; gap: .85rem; } }
/* Süreç adımları */
.erd-about-process-head{
text-align: center;
max-width: 580px;
margin: 0 auto 2.5rem;
}
.erd-about-process-head h2{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.8rem;
color: #1F2418; margin: .35rem 0;
letter-spacing: -.015em;
}
.erd-about-process-head p{ color: #6F6852; font-size: .95rem; margin: 0; }
.erd-about-steps{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
position: relative;
}
.erd-about-step{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.6rem 1.4rem;
position: relative;
transition: all .2s ease;
}
.erd-about-step:hover{
border-color: #DCA62B;
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(67,48,20,.10);
}
.erd-about-step-num{
display: inline-block;
font-family: "Onest", sans-serif;
font-weight: 800;
font-size: 2rem;
color: #DCA62B;
letter-spacing: -.04em;
margin-bottom: .5rem;
line-height: 1;
}
.erd-about-step h4{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1rem;
color: #1F2418;
margin: 0 0 .55rem;
}
.erd-about-step p{
font-size: .85rem;
color: #6F6852;
line-height: 1.5;
margin: 0;
}
@media (max-width: 991.98px){ .erd-about-steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px){ .erd-about-steps{ grid-template-columns: 1fr; } }
/* ============================================
İLETİŞİM SAYFASI
============================================ */
.erd-contact-quick{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1.5rem;
font-family: "Onest", sans-serif;
}
.erd-contact-quick-card{
display: flex; align-items: center; gap: .9rem;
padding: 1rem 1.2rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: all .2s ease;
}
.erd-contact-quick-card:hover{
border-color: #DCA62B;
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(67,48,20,.08);
}
.erd-contact-quick-ico{
width: 48px; height: 48px;
background: #FFF3D6;
color: #B7831A;
border: 1px solid #ECD58E;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.erd-contact-quick-card:hover .erd-contact-quick-ico{
background: #DCA62B;
color: #1F2418;
border-color: #DCA62B;
}
.erd-contact-quick-card small{
display: block; font-size: .7rem;
color: #6F6852;
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 600;
margin-bottom: 2px;
}
.erd-contact-quick-card b{
display: block;
font-size: .92rem;
font-weight: 700;
color: #1F2418;
line-height: 1.2;
}
.erd-contact-quick-card span{
font-size: .76rem;
color: #98906F;
margin-top: 2px;
display: block;
}
.erd-contact-quick-wa .erd-contact-quick-ico{
background: rgba(37,211,102,.15);
color: #128C7E;
border-color: rgba(37,211,102,.4);
}
.erd-contact-quick-wa:hover .erd-contact-quick-ico{
background: #25D366;
color: #fff;
border-color: #25D366;
}
@media (max-width: 991.98px){ .erd-contact-quick{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .erd-contact-quick{ grid-template-columns: 1fr; } }
/* Form + sağ bilgi grid */
.erd-contact-grid{
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 2rem;
margin-top: 2rem;
align-items: start;
}
.erd-contact-form-wrap{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 16px;
padding: 2rem;
}
.erd-contact-form-head{
margin-bottom: 1.5rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-contact-form-head h2{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.5rem;
color: #1F2418; margin: .35rem 0 .5rem;
letter-spacing: -.015em;
}
.erd-contact-form-head p{
color: #6F6852; font-size: .92rem; margin: 0;
}
.erd-form-alert{
padding: .85rem 1rem;
border-radius: 12px;
margin-bottom: 1.2rem;
font-size: .9rem;
display: flex; align-items: flex-start; gap: .65rem;
}
.erd-form-alert-ok{
background: #ECF5DA;
border: 1px solid #B5D082;
color: #2F4318;
}
.erd-form-alert-err{
background: #FBE5E2;
border: 1px solid #F0B5AD;
color: #7C2912;
}
.erd-form-alert ul{ margin: 0; padding-left: 1.2rem; }
.erd-contact-form{
display: flex; flex-direction: column; gap: 1rem;
}
.erd-form-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.erd-contact-form label{
display: flex; flex-direction: column; gap: .35rem;
font-family: "Onest", sans-serif;
font-size: .82rem;
font-weight: 600;
color: #1F2418;
}
.erd-contact-form label > span{
letter-spacing: .02em;
}
.erd-contact-form input[type=text],
.erd-contact-form input[type=email],
.erd-contact-form input[type=tel],
.erd-contact-form select,
.erd-contact-form textarea{
border: 1px solid #E5DDC7;
border-radius: 10px;
padding: .65rem .85rem;
font-family: "Onest", sans-serif;
font-size: .92rem;
color: #1F2418;
background: #FAF6EB;
outline: 0;
font-weight: 400;
transition: all .15s ease;
}
.erd-contact-form select{ cursor: pointer; }
.erd-contact-form textarea{ resize: vertical; min-height: 120px; line-height: 1.55; }
.erd-contact-form input:focus,
.erd-contact-form select:focus,
.erd-contact-form textarea:focus{
border-color: #DCA62B;
background: #fff;
box-shadow: 0 0 0 3px rgba(220,166,43,.14);
}
.erd-form-actions{
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
margin-top: .35rem;
}
.erd-form-actions small{
font-size: .76rem; color: #98906F;
}
@media (max-width: 575.98px){
.erd-contact-form-wrap{ padding: 1.4rem; }
.erd-form-row{ grid-template-columns: 1fr; }
}
/* Sağ bilgi kartı */
.erd-contact-info{
background: linear-gradient(180deg, #1F2418 0%, #2F3D26 100%);
border-radius: 16px;
padding: 2rem;
color: #FEF8E0;
position: sticky;
top: 1.5rem;
font-family: "Onest", sans-serif;
}
.erd-contact-info-head h3{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.3rem;
color: #FEF8E0; margin: 0 0 .35rem;
}
.erd-contact-info-head p{
font-size: .88rem; color: rgba(254,248,224,.65);
margin: 0 0 1.5rem;
}
.erd-contact-list{
list-style: none; padding: 0; margin: 0 0 1.5rem;
display: flex; flex-direction: column; gap: 1rem;
}
.erd-contact-list li{
display: flex; gap: .85rem; align-items: flex-start;
padding: .85rem 1rem;
background: rgba(254,248,224,.04);
border: 1px solid rgba(254,248,224,.08);
border-radius: 10px;
}
.erd-contact-list-ico{
flex-shrink: 0;
width: 38px; height: 38px;
background: rgba(220,166,43,.18);
color: #DCA62B;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(220,166,43,.3);
}
.erd-contact-list small{
display: block; font-size: .68rem;
color: rgba(254,248,224,.55);
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 600;
margin-bottom: 3px;
}
.erd-contact-list b{
display: block;
font-size: .9rem;
font-weight: 600;
color: #FEF8E0;
line-height: 1.35;
}
.erd-contact-social{
padding-top: 1.2rem;
border-top: 1px solid rgba(254,248,224,.1);
display: flex; align-items: center; gap: .55rem;
}
.erd-contact-social span{
font-size: .78rem;
color: rgba(254,248,224,.5);
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 600;
margin-right: auto;
}
.erd-contact-social a{
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(254,248,224,.06);
border: 1px solid rgba(254,248,224,.12);
color: #FEF8E0;
display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem;
transition: all .2s ease;
}
.erd-contact-social a:hover{
background: #DCA62B;
color: #1F2418;
border-color: #DCA62B;
transform: translateY(-2px);
}
@media (max-width: 991.98px){
.erd-contact-grid{ grid-template-columns: 1fr; }
.erd-contact-info{ position: static; }
}
/* Harita */
.erd-contact-map{
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #E5DDC7;
}
.erd-contact-map-head{
margin-bottom: 1.2rem;
}
.erd-contact-map-head h2{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.6rem;
color: #1F2418; margin: .35rem 0 .35rem;
letter-spacing: -.015em;
}
.erd-contact-map-head p{
font-size: .92rem; color: #6F6852; margin: 0;
}
.erd-contact-map-head strong{ color: #B7831A; }
.erd-contact-map-frame{
position: relative;
border: 1px solid #E5DDC7;
border-radius: 16px;
overflow: hidden;
background: #F1E8D0;
height: 400px;
}
.erd-contact-map-frame iframe{
width: 100%; height: 100%;
border: 0;
display: block;
filter: contrast(.96) saturate(.92);
}
.erd-contact-map-open{
position: absolute;
bottom: 16px; right: 16px;
display: inline-flex; align-items: center; gap: .45rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 999px;
padding: .55rem 1rem;
font-family: "Onest", sans-serif;
font-size: .82rem;
font-weight: 600;
color: #1F2418;
text-decoration: none;
box-shadow: 0 6px 16px rgba(31,36,24,.12);
transition: all .15s ease;
}
.erd-contact-map-open:hover{
background: #DCA62B;
border-color: #DCA62B;
color: #1F2418;
transform: translateY(-2px);
}
@media (max-width: 575.98px){
.erd-contact-map-frame{ height: 300px; }
.erd-contact-map-open{ bottom: 10px; right: 10px; padding: .45rem .8rem; font-size: .76rem; }
}
/* SSS şeridi */
.erd-contact-faq{
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #E5DDC7;
}
.erd-contact-faq h2{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1.6rem;
color: #1F2418;
margin: .35rem 0 1.5rem;
letter-spacing: -.015em;
}
.erd-contact-faq .erd-faq{ max-width: 800px; }
/* ============================================
LISTING — Ürünler & Kategori sayfası
============================================ */
.erd-listing-head{
background: #FAF6EB;
border-bottom: 1px solid #E5DDC7;
padding: 2rem 0 1.5rem;
margin-top: 1rem;
font-family: "Onest", sans-serif;
}
.erd-listing-head-row{
display: flex; justify-content: space-between; align-items: flex-end;
gap: 1rem; flex-wrap: wrap;
}
.erd-listing-head h1{
font-family: "Onest", sans-serif;
font-weight: 700; color: #1F2418;
font-size: 1.8rem; letter-spacing: -.015em;
margin: .35rem 0 .25rem;
display: inline-flex; align-items: center; gap: .65rem;
}
.erd-listing-head p{
color: #6F6852; font-size: .92rem; max-width: 640px; margin: 0;
}
.erd-listing-icon{
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: #FFF3D6; color: #DCA62B;
border: 1px solid #ECD58E;
border-radius: 12px;
}
.erd-listing-icon svg{ width: 26px; height: 26px; }
.erd-listing-head-meta{
font-size: .82rem; color: #6F6852;
background: #fff; padding: 6px 14px;
border-radius: 999px; border: 1px solid #E5DDC7;
}
@media (max-width: 991.98px){ .erd-listing-head{ margin-top: 1.5rem; padding: 1.5rem 0 1.2rem; } }
@media (max-width: 575.98px){ .erd-listing-head h1{ font-size: 1.4rem; } }
/* Listing layout (sol filtre + sağ ürün) */
.erd-listing{
display: grid;
grid-template-columns: 260px 1fr;
gap: 2rem;
align-items: start;
margin-top: 1.5rem;
font-family: "Onest", sans-serif;
}
/* Sol filtreler */
.erd-filters{
position: sticky; top: 1.5rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
overflow: hidden;
}
.erd-filters-head{
padding: 1rem 1.2rem;
display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid #E5DDC7;
background: #1F2418;
color: #FEF8E0;
}
.erd-filters-head h4{
margin: 0; font-size: 1rem; font-weight: 700;
}
.erd-filters-head button{
background: transparent; border: 0; color: #FEF8E0; cursor: pointer;
}
.erd-filter-block{
padding: 1rem 1.2rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-filter-block:last-child{ border-bottom: 0; }
.erd-filter-block h5{
font-family: "Onest", sans-serif;
font-size: .76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: #6F6852;
margin: 0 0 .85rem;
}
.erd-filter-clear{
display: inline-flex; align-items: center; gap: .35rem;
font-size: .8rem; font-weight: 600;
color: #C73E2B;
text-decoration: none;
padding: 4px 10px;
border: 1px solid #C73E2B;
border-radius: 999px;
transition: all .15s ease;
}
.erd-filter-clear:hover{ background: #C73E2B; color: #fff; }
.erd-filter-list{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 1px;
}
.erd-filter-list a{
display: flex; align-items: center; justify-content: space-between;
gap: .55rem;
padding: .5rem .65rem;
border-radius: 8px;
color: #2B2E22;
font-size: .88rem;
text-decoration: none;
transition: all .15s ease;
}
.erd-filter-list a:hover{
background: #FAF6EB;
color: #433014;
}
.erd-filter-list a.is-active{
background: #1F2418;
color: #FEF8E0;
font-weight: 600;
}
.erd-filter-list a.is-active .erd-filter-num{
background: #DCA62B; color: #1F2418;
}
.erd-filter-num{
font-size: .7rem;
background: #F1E8D0;
color: #6F6852;
padding: 1px 8px;
border-radius: 999px;
font-weight: 600;
flex-shrink: 0;
}
.erd-filter-icoline{
display: inline-flex; align-items: center; gap: .55rem;
flex: 1; min-width: 0;
}
.erd-filter-icoline svg{ width: 18px; height: 18px; flex-shrink: 0; color: #DCA62B; }
/* Fiyat filtre formu */
.erd-filter-price{
display: flex; gap: .5rem; margin-bottom: .75rem;
}
.erd-filter-price label{
flex: 1;
display: flex; flex-direction: column; gap: 4px;
}
.erd-filter-price span{
font-size: .7rem; font-weight: 600;
color: #6F6852;
text-transform: uppercase;
letter-spacing: .08em;
}
.erd-filter-price input{
width: 100%;
border: 1px solid #E5DDC7;
border-radius: 8px;
padding: .45rem .6rem;
font-family: "Onest", sans-serif;
font-size: .85rem;
color: #1F2418;
outline: 0;
background: #FAF6EB;
-moz-appearance: textfield;
}
.erd-filter-price input::-webkit-outer-spin-button,
.erd-filter-price input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.erd-filter-price input:focus{
border-color: #DCA62B;
background: #fff;
}
.erd-filter-apply{
width: 100%;
background: #1F2418;
color: #FEF8E0;
border: 0;
padding: .55rem 1rem;
border-radius: 999px;
font-family: "Onest", sans-serif;
font-weight: 600; font-size: .82rem;
cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: background .15s ease;
}
.erd-filter-apply:hover{ background: #DCA62B; color: #1F2418; }
/* Mobil filtre butonu */
.erd-filter-mobile-btn{
display: none;
background: #1F2418;
color: #FEF8E0;
border: 0;
padding: .65rem 1.2rem;
border-radius: 999px;
font-family: "Onest", sans-serif;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
margin-top: 1rem;
align-items: center;
gap: .5rem;
position: relative;
}
.erd-filter-mobile-btn .erd-filter-count{
background: #DCA62B; color: #1F2418;
font-size: .68rem; font-weight: 700;
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
}
/* Toolbar (sıralama + sayım) */
.erd-toolbar{
display: flex; justify-content: space-between; align-items: center;
gap: 1rem; flex-wrap: wrap;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 12px;
padding: .75rem 1.2rem;
margin-bottom: 1.2rem;
}
.erd-toolbar-count{
font-size: .9rem;
color: #6F6852;
}
.erd-toolbar-count strong{ color: #1F2418; font-weight: 700; }
.erd-toolbar-cat{ color: #DCA62B; font-weight: 600; }
.erd-toolbar-count em{ color: #433014; font-style: normal; font-weight: 600; }
.erd-toolbar-sort{
display: flex; align-items: center; gap: .55rem;
}
.erd-toolbar-sort label{
font-size: .82rem; color: #6F6852;
font-weight: 500;
}
.erd-toolbar-sort select{
border: 1px solid #E5DDC7;
border-radius: 999px;
padding: .4rem 2rem .4rem .85rem;
font-family: "Onest", sans-serif;
font-size: .85rem;
color: #1F2418;
background: #FAF6EB url("data:image/svg+xml;utf8,") no-repeat right .65rem center / 14px;
-webkit-appearance: none; appearance: none;
cursor: pointer;
outline: 0;
}
.erd-toolbar-sort select:focus{ border-color: #DCA62B; }
/* Listing grid (4 sütun, kategori şeritleriyle aynı) */
.erd-product-grid-listing{
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
}
@media (max-width: 1199.98px){ .erd-product-grid-listing{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px){ .erd-product-grid-listing{ grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
/* Liste boş durumu */
.erd-listing-empty{
background: #fff;
border: 1px dashed #E5DDC7;
border-radius: 14px;
padding: 3.5rem 1.5rem;
text-align: center;
}
.erd-listing-empty svg{ color: #C8C0A6; margin-bottom: 1rem; }
.erd-listing-empty h3{ font-family: "Onest", sans-serif; color: #1F2418; margin: .5rem 0 .35rem; }
.erd-listing-empty p{ color: #6F6852; margin-bottom: 1.5rem; }
/* Sayfalama */
.erd-pagination{
display: flex; justify-content: center; align-items: center;
gap: 6px;
margin-top: 2rem;
}
.erd-pagination a{
min-width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 10px;
color: #1F2418;
font-family: "Onest", sans-serif;
font-size: .88rem;
font-weight: 600;
text-decoration: none;
transition: all .15s ease;
padding: 0 12px;
}
.erd-pagination a:hover{
border-color: #DCA62B;
color: #DCA62B;
}
.erd-pagination a.is-active{
background: #1F2418;
border-color: #1F2418;
color: #FEF8E0;
}
@media (max-width: 991.98px){
.erd-listing{ grid-template-columns: 1fr; gap: 1rem; }
.erd-filter-mobile-btn{ display: inline-flex; }
/* Filtre paneli mobilde sağdan açılır */
.erd-filters{
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(360px, 92vw);
z-index: 200;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.2,.9,.32,1.1);
border-radius: 0;
overflow-y: auto;
box-shadow: -16px 0 32px rgba(31,36,24,.18);
}
.erd-filters.is-open{ transform: translateX(0); }
.erd-filters.is-open::before{
content: "";
position: fixed; inset: 0; right: min(360px, 92vw);
background: rgba(31,36,24,.55);
z-index: -1;
}
.erd-toolbar{ padding: .65rem 1rem; }
.erd-toolbar-count{ font-size: .82rem; }
}
/* ============================================
KATEGORİLER SAYFASI — board grid
============================================ */
.erd-cats-board{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
font-family: "Onest", sans-serif;
}
.erd-cat-board-card{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 16px;
padding: 1.4rem;
display: flex; align-items: flex-start; gap: 1rem;
text-decoration: none;
color: inherit;
transition: all .2s ease;
position: relative;
overflow: hidden;
}
.erd-cat-board-card::before{
content: "";
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: #DCA62B;
transform: scaleY(0); transform-origin: top;
transition: transform .3s ease;
}
.erd-cat-board-card:hover{
border-color: #DCA62B;
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(67,48,20,.10);
}
.erd-cat-board-card:hover::before{ transform: scaleY(1); }
.erd-cat-board-icon{
flex-shrink: 0;
width: 60px; height: 60px;
background: #FFF3D6;
color: #B7831A;
border: 1px solid #ECD58E;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
transition: all .2s ease;
}
.erd-cat-board-icon svg{ width: 32px; height: 32px; }
.erd-cat-board-card:hover .erd-cat-board-icon{
background: #DCA62B;
color: #1F2418;
transform: rotate(-6deg);
}
.erd-cat-board-body{ flex: 1; min-width: 0; }
.erd-cat-board-body h3{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: #1F2418;
margin: 0 0 .35rem;
letter-spacing: -.01em;
}
.erd-cat-board-body p{
font-size: .85rem;
color: #6F6852;
line-height: 1.45;
margin: 0 0 .85rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.erd-cat-board-foot{
display: flex; justify-content: space-between; align-items: center;
padding-top: .65rem;
border-top: 1px dashed #E5DDC7;
}
.erd-cat-board-count{
font-size: .75rem; font-weight: 700;
color: #433014;
background: #F1E8D0;
padding: 3px 10px;
border-radius: 999px;
letter-spacing: .04em;
}
.erd-cat-board-arrow{
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: #FAF6EB;
color: #6F6852;
transition: all .2s ease;
}
.erd-cat-board-card:hover .erd-cat-board-arrow{
background: #1F2418;
color: #DCA62B;
}
/* CTA section bottom */
.erd-section-cta{ background: #FAF6EB; }
.erd-cats-cta{
background: linear-gradient(135deg, #1F2418 0%, #2F3D26 100%);
border-radius: 16px;
padding: 2rem 2.4rem;
display: flex; justify-content: space-between; align-items: center;
gap: 2rem;
flex-wrap: wrap;
color: #FEF8E0;
position: relative;
overflow: hidden;
}
.erd-cats-cta::before{
content: "";
position: absolute;
right: -40px; top: -40px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(220,166,43,.18) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.erd-cats-cta h2{
font-family: "Onest", sans-serif;
font-weight: 700; color: #FEF8E0;
font-size: 1.5rem; margin: 0 0 .35rem;
letter-spacing: -.01em;
}
.erd-cats-cta p{
color: rgba(254,248,224,.75);
margin: 0; font-size: .92rem;
max-width: 480px;
}
.erd-cats-cta-btns{
display: flex; gap: .55rem; flex-wrap: wrap;
}
@media (max-width: 575.98px){
.erd-cats-cta{ padding: 1.5rem; }
.erd-cats-cta h2{ font-size: 1.2rem; }
.erd-cats-cta-btns{ width: 100%; }
.erd-cats-cta-btns a{ flex: 1; }
}
/* ============================================
SEPET SAYFASI — index-3 brownish + altın
============================================ */
.erd-page-head-cart{
background: #FAF6EB;
padding: 2.5rem 0 1.5rem;
border-bottom: 1px solid #E5DDC7;
margin-top: 1rem;
}
@media (max-width: 991.98px){
.erd-page-head-cart{ margin-top: 1.5rem; padding-top: 1.5rem; }
}
.erd-page-head-cart .erd-page-head-row{
display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.erd-page-head-cart h1{
font-family: "Onest", sans-serif;
font-weight: 700; color: #1F2418;
margin: .35rem 0 0; font-size: 1.7rem; letter-spacing: -.015em;
display: flex; align-items: baseline; gap: .65rem;
}
.erd-page-head-cart h1 small{
font-size: .82rem; font-weight: 500; color: #6F6852;
background: #fff; padding: 3px 12px; border-radius: 999px; border: 1px solid #E5DDC7;
}
.erd-page-clear button{
background: transparent; border: 0; color: #6F6852;
font-family: "Onest", sans-serif; font-size: .85rem; font-weight: 500;
cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
padding: 6px 0;
}
.erd-page-clear button:hover{ color: #C73E2B; }
.erd-cart-grid{
display: grid;
grid-template-columns: 1fr 380px;
gap: 2rem;
align-items: start;
font-family: "Onest", sans-serif;
}
/* Boş sepet */
.erd-cart-empty{
text-align: center;
padding: 4rem 1rem;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 16px;
}
.erd-cart-empty svg{ color: #C8C0A6; margin-bottom: 1rem; }
.erd-cart-empty h3{ font-family: "Onest", sans-serif; color: #1F2418; margin: .5rem 0; }
.erd-cart-empty p{ color: #6F6852; margin-bottom: 1.5rem; }
/* Kargo progress kuşağı */
.erd-cart-progress{
background: linear-gradient(135deg, #2A2118 0%, #3D2F20 100%);
border: 1px solid #5A4528;
border-radius: 14px;
padding: 1rem 1.2rem;
margin-bottom: 1.2rem;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.erd-cart-progress-text{
font-size: 1rem; color: #F5E6BF;
display: flex; align-items: center; gap: .6rem;
margin-bottom: .65rem;
font-weight: 500;
}
.erd-cart-progress-text i{ color: #E9B939; font-size: 1.2rem; }
.erd-cart-progress-text strong{ color: #FFD56B; font-weight: 800; font-size: 1.05em; }
.erd-cart-progress-text span{ color: #FFD56B; font-weight: 700; }
.erd-cart-progress-bar{
background: rgba(255,213,107,.15);
height: 7px; border-radius: 999px; overflow: hidden;
border: 1px solid rgba(255,213,107,.18);
}
.erd-cart-progress-bar > div{
background: linear-gradient(90deg, #E9B939, #FFD56B);
height: 100%;
transition: width .4s ease;
box-shadow: 0 0 8px rgba(255,213,107,.5);
}
.erd-cart-progress-done{
background: linear-gradient(135deg, #2D3E1F 0%, #4A5D3A 100%);
border-color: #7C9A2E;
}
.erd-cart-progress-done .erd-cart-progress-text{ color: #E8F3CC; }
.erd-cart-progress-done .erd-cart-progress-text i{ color: #C8E07A; }
.erd-cart-progress-done .erd-cart-progress-text strong{ color: #FFFFFF; }
.erd-cart-progress-done .erd-cart-progress-bar > div{ background: linear-gradient(90deg, #B5D67A, #7C9A2E); box-shadow: 0 0 8px rgba(181,214,122,.5); }
@media (max-width: 575px){
.erd-cart-progress{ padding: .85rem 1rem; }
.erd-cart-progress-text{ font-size: .95rem; }
}
/* Sepet listesi */
.erd-cart-list{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
overflow: hidden;
}
.erd-cart-row{
display: grid;
grid-template-columns: 84px 1fr auto auto 36px;
gap: 1.1rem;
align-items: center;
padding: 1.1rem 1.2rem;
border-bottom: 1px solid #F1E8D0;
transition: background .15s ease;
}
.erd-cart-row:last-child{ border-bottom: 0; }
.erd-cart-row.is-removing{ opacity: .35; pointer-events: none; }
.erd-cart-thumb{
width: 84px; height: 84px;
border-radius: 10px;
overflow: hidden;
background: #FAF6EB;
border: 1px solid #E5DDC7;
display: block;
}
.erd-cart-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.erd-cart-info h4{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1rem;
margin: 0 0 .25rem;
line-height: 1.25;
}
.erd-cart-info h4 a{ color: #1F2418; text-decoration: none; }
.erd-cart-info h4 a:hover{ color: #DCA62B; }
.erd-cart-vrnt{
display: inline-block;
font-size: .76rem;
color: #433014;
background: #FFF3D6;
padding: 2px 9px;
border-radius: 999px;
font-weight: 600;
margin-bottom: 4px;
}
.erd-cart-unit{
display: block;
font-size: .82rem;
color: #6F6852;
font-weight: 500;
}
.erd-cart-unit em{ font-style: normal; color: #98906F; font-weight: 400; }
/* Qty stepper */
.erd-cart-qty-wrap{
display: inline-flex; align-items: center;
border: 1px solid #E5DDC7;
border-radius: 999px;
background: #fff;
overflow: hidden;
height: 38px;
}
.erd-cart-qty-btn{
width: 32px; height: 38px;
background: transparent; border: 0;
font-size: 1.1rem; color: #2B2E22;
cursor: pointer;
-webkit-appearance: none; appearance: none;
padding: 0;
}
.erd-cart-qty-btn:hover{ background: #FFF3D6; color: #DCA62B; }
.erd-cart-qty{
width: 40px; height: 38px;
border: 0; background: transparent;
text-align: center;
font-family: "Onest", sans-serif;
font-size: .92rem; font-weight: 600;
color: #1F2418;
outline: 0;
-moz-appearance: textfield;
}
.erd-cart-qty::-webkit-outer-spin-button,
.erd-cart-qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
/* Satır toplamı */
.erd-cart-line-total{
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: #1F2418;
text-align: right;
white-space: nowrap;
min-width: 100px;
}
/* Çıkar butonu */
.erd-cart-remove{
display: flex; justify-content: center;
}
.erd-cart-remove button{
border: 1px solid transparent;
background: transparent;
color: #98906F;
cursor: pointer;
width: 36px; height: 36px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
transition: all .15s ease;
-webkit-appearance: none; appearance: none;
padding: 0;
}
.erd-cart-remove button:hover{
background: #FEE;
border-color: #C73E2B;
color: #C73E2B;
}
/* Devam et linki */
.erd-cart-continue{
display: inline-flex; align-items: center; gap: .45rem;
margin-top: 1rem;
font-family: "Onest", sans-serif;
font-size: .9rem;
font-weight: 600;
color: #433014;
text-decoration: none;
}
.erd-cart-continue:hover{ color: #DCA62B; }
/* Sağ özet kart */
.erd-cart-side{ position: sticky; top: 24px; }
.erd-cart-summary{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1.4rem 1.4rem 1.6rem;
}
.erd-cart-summary h4{
font-family: "Onest", sans-serif;
font-weight: 700; font-size: 1rem;
color: #1F2418;
margin: 0 0 1rem;
padding-bottom: .85rem;
border-bottom: 1px solid #F1E8D0;
}
.erd-summary-row{
display: flex; justify-content: space-between;
align-items: baseline;
padding: .35rem 0;
font-size: .92rem;
color: #2B2E22;
font-family: "Onest", sans-serif;
}
.erd-summary-row b{ color: #1F2418; font-weight: 700; }
.erd-summary-divider{
height: 1px; background: #E5DDC7; margin: .65rem 0;
}
.erd-summary-total{
font-size: 1.05rem;
padding-top: .35rem;
}
.erd-summary-total span{ font-weight: 600; }
.erd-summary-total b{ font-size: 1.3rem; color: #DCA62B; font-weight: 800; }
/* Sepet butonları */
.erd-cart-btn{
display: flex; align-items: center; justify-content: center;
gap: .5rem;
width: 100%;
padding: .85rem 1rem;
font-family: "Onest", sans-serif;
font-weight: 700; font-size: .95rem;
border-radius: 999px;
text-decoration: none;
border: 0;
cursor: pointer;
transition: all .15s ease;
letter-spacing: .01em;
}
.erd-cart-btn-gold{
background: #DCA62B;
color: #1F2418;
box-shadow: 0 6px 16px rgba(220,166,43,.32);
}
.erd-cart-btn-gold:hover{ background: #C68F1B; color: #1F2418; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(220,166,43,.42); }
.erd-cart-btn-dark,
a.erd-cart-btn-dark,
button.erd-cart-btn-dark{
background: #1F2418 !important;
color: #DCA62B !important;
}
.erd-cart-btn-dark *{ color: inherit !important; }
.erd-cart-btn-dark:hover{ background: #433014 !important; color: #FFD15D !important; }
.erd-cart-btn-dark:hover *{ color: inherit !important; }
/* Trust altı */
.erd-cart-trust{
margin-top: 1.2rem; padding-top: 1rem;
border-top: 1px dashed #E5DDC7;
display: flex; flex-direction: column; gap: .45rem;
}
.erd-cart-trust span{
font-size: .82rem; color: #6F6852;
display: flex; align-items: center; gap: .55rem;
font-family: "Onest", sans-serif;
}
.erd-cart-trust i{ color: #DCA62B; width: 18px; }
/* Kupon */
.erd-cart-coupon{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
padding: 1rem 1.2rem;
margin-top: 1rem;
}
.erd-cart-coupon label{
display: block;
font-family: "Onest", sans-serif;
font-size: .82rem;
font-weight: 700;
color: #1F2418;
margin-bottom: .55rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.erd-cart-coupon > div{
display: flex; gap: .35rem;
}
.erd-cart-coupon input{
flex: 1;
border: 1px solid #E5DDC7;
border-radius: 999px;
padding: .55rem 1rem;
font-family: "Onest", sans-serif;
font-size: .85rem;
outline: 0;
background: #FAF6EB;
color: #6F6852;
}
.erd-cart-coupon button{
background: #1F2418;
color: #FEF8E0;
border: 0;
padding: 0 1.2rem;
border-radius: 999px;
font-family: "Onest", sans-serif;
font-size: .82rem;
font-weight: 600;
cursor: pointer;
opacity: .55;
}
.erd-cart-coupon small{
display: block; margin-top: .55rem;
font-size: .72rem; color: #98906F; font-style: italic;
}
@media (max-width: 991.98px){
.erd-cart-grid{ grid-template-columns: 1fr; gap: 1.5rem; }
.erd-cart-side{ position: static; }
.erd-cart-row{
grid-template-columns: 70px 1fr 36px;
gap: .75rem;
grid-template-areas:
"thumb info remove"
"qty total total";
row-gap: .65rem;
padding: .9rem 1rem;
}
.erd-cart-thumb{ grid-area: thumb; width: 70px; height: 70px; }
.erd-cart-info{ grid-area: info; }
.erd-cart-qty-wrap{ grid-area: qty; }
.erd-cart-line-total{ grid-area: total; text-align: right; min-width: 0; }
.erd-cart-remove{ grid-area: remove; }
}
@media (max-width: 575.98px){
.erd-page-head-cart h1{ font-size: 1.4rem; }
.erd-cart-info h4{ font-size: .9rem; }
.erd-cart-line-total{ font-size: .95rem; }
}
.erd-checkout-items{ list-style: none; padding: 0; margin: 0 0 1rem; max-height: 240px; overflow-y: auto; }
.erd-checkout-items li{
display: grid; grid-template-columns: 32px 1fr auto; gap: .5rem;
padding: .4rem 0; font-size: .85rem;
border-bottom: 1px dashed var(--erd-border);
}
.erd-co-qty{ color: var(--erd-muted); font-weight: 600; }
.erd-co-name small{ color: var(--erd-muted); }
.erd-co-price{ font-weight: 600; color: var(--erd-dark); white-space: nowrap; }
/* ---------- Forms ---------- */
.erd-form-card{
background: #fff; border: 1px solid var(--erd-border); border-radius: var(--erd-radius);
padding: 1.5rem;
}
.erd-form-card h4{ margin: 0 0 1.2rem; font-size: 1.15rem; }
.erd-form-card label{
display: block; font-size: .82rem; font-weight: 600; color: var(--erd-dark); margin-bottom: .35rem;
}
.erd-form-card input[type=text],
.erd-form-card input[type=email],
.erd-form-card input[type=tel],
.erd-form-card input[type=number],
.erd-form-card textarea,
.erd-form-card select{
width: 100%; padding: .65rem .85rem;
border: 1px solid var(--erd-border); border-radius: var(--erd-radius-sm);
background: #fff; font-size: .92rem; color: var(--erd-text);
font-family: inherit;
}
.erd-form-card input:focus, .erd-form-card textarea:focus, .erd-form-card select:focus{
outline: 0; border-color: var(--erd-primary); box-shadow: 0 0 0 3px rgba(85,139,47,.12);
}
.erd-pay-method{
display: flex; gap: .75rem; align-items: flex-start;
border: 2px solid var(--erd-border); border-radius: var(--erd-radius-sm);
padding: .85rem 1rem; margin-bottom: .6rem; cursor: pointer;
transition: all .15s ease;
}
.erd-pay-method input{ margin-top: 4px; accent-color: var(--erd-primary); }
.erd-pay-method:has(input:checked){ border-color: var(--erd-primary); background: var(--erd-cream); }
.erd-pay-method:has(input:disabled){ opacity: .55; cursor: not-allowed; }
.erd-pay-method b{ display: block; font-size: .95rem; }
.erd-pay-method small{ color: var(--erd-muted); }
/* ---------- Success / 404 ---------- */
.erd-success{ max-width: 540px; margin: 2rem auto; text-align: center; }
.erd-success-icon{ color: var(--erd-primary); margin-bottom: 1rem; }
.erd-success h1{ font-size: 1.8rem; margin-bottom: .5rem; }
.erd-success-sub{ color: var(--erd-muted); margin-bottom: 1.5rem; }
.erd-success-card{
background: #fff; border: 1px solid var(--erd-border); border-radius: var(--erd-radius);
padding: 1.2rem; margin-bottom: 1.5rem; text-align: left;
}
.erd-success-card div{
display: flex; justify-content: space-between; padding: .5rem 0;
border-bottom: 1px dashed var(--erd-border); font-size: .92rem;
}
.erd-success-card div:last-child{ border-bottom: 0; }
.erd-success-card span{ color: var(--erd-muted); }
.erd-404{ padding: 3rem 0; }
.erd-404-num{
font-size: 7rem; font-weight: 900; color: var(--erd-primary);
line-height: 1; opacity: .35; letter-spacing: -.04em;
}
/* ---------- Banner CTA (anasayfa Erdoğal hakkında) ---------- */
.erd-banner-cta{
background: linear-gradient(135deg, var(--erd-primary-dark) 0%, var(--erd-primary) 100%);
color: #fff;
}
.erd-banner-cta h2{ color: #fff; max-width: 480px; }
.erd-banner-cta p{ color: rgba(255,255,255,.88); max-width: 520px; }
.erd-banner-grid{
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.erd-banner-cta .erd-eyebrow-light{ color: #FEE9C2; }
.erd-bullets{
list-style: none; padding: 0; margin: 1rem 0;
display: flex; flex-direction: column; gap: .55rem;
}
.erd-bullets li{
display: flex; align-items: center; gap: .55rem;
color: rgba(255,255,255,.95); font-size: .95rem;
}
.erd-bullets svg{ color: #F5A623; flex-shrink: 0; }
.erd-banner-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.erd-banner-cta .erd-stat{
background: rgba(255,255,255,.1); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.18);
}
.erd-banner-cta .erd-stat b{ color: #F5A623; }
.erd-banner-cta .erd-stat span{ color: rgba(255,255,255,.85); }
/* ---------- Producers ---------- */
.erd-producers{
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.2rem; margin-top: 2rem;
}
.erd-producer-card{
background: #fff; border: 1px solid var(--erd-border); border-radius: var(--erd-radius);
padding: 1.5rem 1.2rem; text-align: center;
}
.erd-producer-avatar{
width: 80px; height: 80px; margin: 0 auto 1rem;
background: var(--erd-cream); color: var(--erd-primary);
border-radius: 50%; border: 2px solid var(--erd-border);
display: flex; align-items: center; justify-content: center;
}
.erd-producer-avatar svg{ width: 38px; height: 38px; }
.erd-producer-card h4{ margin: 0 0 .15rem; font-size: 1rem; }
.erd-producer-card small{ font-size: .78rem; }
.erd-producer-card p{ font-size: .85rem; color: var(--erd-muted); margin: .8rem 0 0; }
/* ---------- FAQ ---------- */
.erd-faq .accordion-item{
background: #fff; border: 1px solid var(--erd-border) !important;
border-radius: var(--erd-radius) !important; margin-bottom: .6rem;
overflow: hidden;
}
.erd-faq .accordion-button{
font-weight: 600; color: var(--erd-dark); background: #fff;
padding: 1rem 1.2rem;
}
.erd-faq .accordion-button:not(.collapsed){
background: var(--erd-cream); color: var(--erd-primary);
box-shadow: none;
}
.erd-faq .accordion-button:focus{ box-shadow: 0 0 0 3px rgba(85,139,47,.12); }
.erd-faq .accordion-body{ color: var(--erd-text); padding: 0 1.2rem 1.2rem; font-size: .93rem; line-height: 1.65; }
/* ---------- Newsletter ---------- */
.erd-newsletter{
background: var(--erd-dark); padding: 3rem 0 2rem;
background-image:
radial-gradient(circle at 20% 30%, rgba(245,166,35,.15) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(85,139,47,.20) 0%, transparent 40%);
}
.erd-newsletter-box{
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
.erd-newsletter h3{ color: #fff; font-size: 1.5rem; margin: .25rem 0 .35rem; }
.erd-newsletter p{ color: rgba(255,255,255,.78); margin: 0; font-size: .92rem; }
.erd-newsletter-form{
display: flex; gap: .55rem; background: rgba(255,255,255,.08);
padding: .35rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15);
}
.erd-newsletter-form input{
flex: 1; border: 0; background: transparent; outline: 0;
color: #fff; padding: .65rem 1rem; font-size: .92rem;
}
.erd-newsletter-form input::placeholder{ color: rgba(255,255,255,.55); }
/* ---------- About stats ---------- */
.erd-about-stats{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.erd-stat{
background: var(--erd-cream); border-radius: var(--erd-radius);
padding: 1.4rem 1.2rem; text-align: center;
}
.erd-stat b{ display: block; font-size: 2rem; color: var(--erd-primary); font-weight: 800; line-height: 1.1; }
.erd-stat span{ display: block; color: var(--erd-muted); font-size: .85rem; margin-top: .3rem; }
/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
.erd-hero{ padding: 2.5rem 0 2rem; }
.erd-hero-video{ padding: 4rem 0 3rem; min-height: 480px; }
.erd-section{ padding: 2.5rem 0; }
.erd-listing{ grid-template-columns: 1fr; }
.erd-sidebar{ position: static; }
.erd-cart-item{ grid-template-columns: 64px 1fr 80px 32px; }
.erd-cart-line-total{ grid-column: 2 / 4; text-align: left; padding-top: .25rem; }
.erd-banner-grid{ grid-template-columns: 1fr; gap: 2rem; }
.erd-newsletter-box{ grid-template-columns: 1fr; }
}
@media (max-width: 575.98px){
.erd-mainbar .container{ flex-wrap: wrap; }
.erd-search{ display: none !important; }
.erd-product-grid{ grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.erd-cat-grid{ grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.erd-product-body{ padding: .75rem; }
.erd-product-name{ font-size: .9rem; }
.erd-section-head h2{ font-size: 1.3rem; }
}
/* ============= ÇEREZ BANNER ============= */
.erd-cookie-banner{
position: fixed;
bottom: 14px; left: 14px; right: 14px;
z-index: 1000;
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(31,36,24,.18);
animation: erdCookieIn .3s ease;
}
@keyframes erdCookieIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.erd-cookie-banner-inner{
display: flex; align-items: center;
gap: 1rem;
padding: 1rem 1.2rem;
}
.erd-cookie-text{ flex: 1; min-width: 0; }
.erd-cookie-text b{ font-family: "Onest", sans-serif; font-size: .95rem; color: #1F2418; display: block; margin-bottom: 2px; }
.erd-cookie-text p{ margin: 0; color: #6F6852; font-size: .82rem; line-height: 1.45; }
.erd-cookie-text a{ color: #B7831A; }
.erd-cookie-btn{
background: #1F2418; color: #DCA62B;
border: 0;
padding: .65rem 1.2rem;
border-radius: 999px;
font-family: "Onest", sans-serif; font-weight: 700; font-size: .85rem;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s ease;
}
.erd-cookie-btn:hover{ background: #433014; color: #FFD15D; }
@media (max-width: 575.98px){
.erd-cookie-banner{ left: 8px; right: 8px; bottom: calc(78px + env(safe-area-inset-bottom)); }
.erd-cookie-banner-inner{ flex-direction: column; align-items: stretch; padding: .85rem 1rem; }
.erd-cookie-btn{ width: 100%; padding: .7rem; }
}
/* ============= AUTH KART (sifremi-unuttum / sifre-yenile) ============= */
.erd-auth-card{
background: #fff;
border: 1px solid #E5DDC7;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 6px 24px rgba(31,36,24,.06);
}
/* Newsletter footer formu — modernize edilmiş */
.erd-newsletter-form{
margin-top: 1.4rem;
padding: 1.1rem 1.2rem;
background: linear-gradient(135deg, rgba(220,166,43,.10) 0%, rgba(220,166,43,.04) 100%);
border: 1px solid rgba(220,166,43,.22);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.erd-newsletter-form::before{
content: "";
position: absolute;
top: -30px; right: -30px;
width: 100px; height: 100px;
background: radial-gradient(circle, rgba(220,166,43,.14), transparent 60%);
pointer-events: none;
}
.erd-newsletter-label{
display: flex; align-items: center; gap: .5rem;
font-size: .92rem;
color: #FEF8E0;
font-weight: 700;
margin-bottom: .35rem;
font-family: "Onest", sans-serif;
letter-spacing: -.01em;
position: relative;
}
.erd-newsletter-label i{
color: #DCA62B;
background: rgba(220,166,43,.15);
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: .82rem;
}
.erd-newsletter-form .erd-newsletter-sub{
display: block;
font-size: .78rem;
color: rgba(254,248,224,.7);
font-weight: 400;
margin: 0 0 .85rem 0;
line-height: 1.5;
}
.erd-newsletter-form .erd-newsletter-row{
display: flex !important;
flex-direction: column !important;
gap: .5rem;
position: relative;
width: 100%;
}
.erd-newsletter-row input{
width: 100%;
background: rgba(31,36,24,.4);
border: 1px solid rgba(254,248,224,.18);
outline: 0;
color: #FEF8E0;
font-family: "Onest", sans-serif;
font-size: .9rem;
padding: .65rem 1rem;
border-radius: 10px;
min-width: 0;
transition: border-color .15s ease, background .15s ease;
box-sizing: border-box;
}
.erd-newsletter-row input::placeholder{ color: rgba(254,248,224,.4); }
.erd-newsletter-row input:focus{
border-color: #DCA62B;
background: rgba(31,36,24,.6);
box-shadow: 0 0 0 3px rgba(220,166,43,.18);
}
.erd-newsletter-row button{
background: #DCA62B;
color: #1F2418;
border: 0;
height: 40px;
border-radius: 10px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem;
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: .85rem;
letter-spacing: .02em;
transition: background .15s ease, transform .1s ease;
width: 100%;
}
.erd-newsletter-row button:hover{ background: #FFD15D; }
.erd-newsletter-row button:active{ transform: scale(.98); }
.erd-newsletter-msg{
display: block;
margin-top: .55rem;
font-size: .76rem;
min-height: 1em;
line-height: 1.4;
}
/* Mobilde alt alta zorla, sadece geniş ekranda yan yana */
@media (min-width: 992px){
.erd-newsletter-form .erd-newsletter-row{ flex-direction: row !important; }
.erd-newsletter-form .erd-newsletter-row input{ flex: 1; width: auto; }
.erd-newsletter-form .erd-newsletter-row button{ width: auto !important; padding: 0 1.2rem; flex-shrink: 0; }
}
/* ============= NEWSLETTER ŞERİDİ — footer üstü ============= */
.erd-newsletter-strip{
background: linear-gradient(135deg, #1F2418 0%, #2A2418 60%, #433014 100%);
position: relative;
overflow: hidden;
padding: 2.5rem 0;
}
.erd-newsletter-strip::before{
content: "";
position: absolute;
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(220,166,43,.18), transparent 65%);
pointer-events: none;
}
.erd-newsletter-strip::after{
content: "";
position: absolute;
bottom: -60px; left: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(220,166,43,.10), transparent 65%);
pointer-events: none;
}
.erd-newsletter-strip-inner{
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
align-items: center;
position: relative;
}
.erd-newsletter-strip-text h2,
.erd-newsletter-strip-text h3{
margin: 0 0 .35rem;
font-family: "Onest", sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -.01em;
display: flex; align-items: center; gap: .65rem;
}
.erd-newsletter-strip-text h2 i,
.erd-newsletter-strip-text h3 i{
color: #DCA62B;
font-size: 1.25rem;
background: rgba(220,166,43,.18);
width: 38px; height: 38px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.erd-newsletter-strip-text p{
margin: 0;
color: rgba(254,248,224,.78);
font-size: .92rem;
line-height: 1.55;
max-width: 460px;
}
.erd-newsletter-strip-form{ width: 100%; }
.erd-newsletter-strip-row{
display: flex;
background: rgba(254,248,224,.95);
border-radius: 12px;
padding: 5px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.erd-newsletter-strip-row input{
flex: 1; min-width: 0;
border: 0; outline: 0;
background: transparent;
font-family: "Onest", sans-serif;
font-size: .95rem;
color: #1F2418;
padding: .75rem 1rem;
}
.erd-newsletter-strip-row input::placeholder{ color: #98906F; }
.erd-newsletter-strip-row button{
background: #1F2418;
color: #DCA62B;
border: 0;
padding: 0 1.4rem;
border-radius: 8px;
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: .9rem;
cursor: pointer;
display: inline-flex; align-items: center; gap: .5rem;
transition: background .15s ease, color .15s ease;
white-space: nowrap;
flex-shrink: 0;
}
.erd-newsletter-strip-row button:hover{
background: #DCA62B; color: #1F2418;
}
.erd-newsletter-strip-form .erd-newsletter-msg{
display: block;
margin-top: .65rem;
font-size: .82rem;
min-height: 1em;
color: rgba(254,248,224,.85);
}
@media (max-width: 991.98px){
.erd-newsletter-strip{ padding: 1.8rem 0; }
.erd-newsletter-strip-inner{ grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
.erd-newsletter-strip-text h2,
.erd-newsletter-strip-text h3{ justify-content: center; font-size: 1.25rem; }
.erd-newsletter-strip-text p{ margin: 0 auto; }
}
@media (max-width: 575.98px){
.erd-newsletter-strip-row{ flex-direction: column; gap: 6px; padding: 6px; }
.erd-newsletter-strip-row input{ width: 100%; padding: .8rem 1rem; }
.erd-newsletter-strip-row button{ width: 100%; height: 44px; padding: 0; justify-content: center; border-radius: 8px; }
}
/* Ürün başlıkları daha belirgin */
.erd-product-name a,
.erd-product-name{
font-family: "Onest", sans-serif !important;
font-weight: 700 !important;
font-size: .98rem !important;
color: #1F2418 !important;
letter-spacing: -.01em;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.erd-product-name a:hover{ color: #DCA62B !important; }
/* Ürün detay lightbox */
.erd-pd-image{ cursor: zoom-in; }
.erd-lightbox{
position: fixed; inset: 0;
background: rgba(15,18,11,.95);
z-index: 9999;
display: none; align-items: center; justify-content: center;
padding: 2rem;
cursor: zoom-out;
animation: erdLbIn .2s ease;
}
@keyframes erdLbIn { from { opacity: 0; } to { opacity: 1; } }
.erd-lightbox.is-open{ display: flex; }
.erd-lightbox-img{
max-width: 95vw; max-height: 90vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.erd-lightbox-close{
position: absolute; top: 20px; right: 20px;
width: 44px; height: 44px;
background: rgba(255,255,255,.15);
border: 0;
border-radius: 50%;
color: #FEF8E0;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
transition: background .15s ease;
}
.erd-lightbox-close:hover{ background: rgba(255,255,255,.25); }
.erd-lightbox-arrow{
position: absolute;
top: 50%; transform: translateY(-50%);
width: 50px; height: 50px;
background: rgba(255,255,255,.15);
border: 0;
border-radius: 50%;
color: #FEF8E0;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.4rem;
transition: background .15s ease;
}
.erd-lightbox-arrow:hover{ background: rgba(255,255,255,.25); }
.erd-lightbox-prev{ left: 20px; }
.erd-lightbox-next{ right: 20px; }
.erd-lightbox-counter{
position: absolute;
bottom: 24px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,.5);
color: #FEF8E0;
padding: 6px 14px;
border-radius: 999px;
font-size: .82rem;
font-variant-numeric: tabular-nums;
}
/* Ürün detay HTML açıklama */
.erd-pd-desc-html p{ margin: 0 0 .85rem; line-height: 1.7; color: #2B2E22; }
.erd-pd-desc-html p:last-child{ margin-bottom: 0; }
.erd-pd-desc-html b{ color: #1F2418; }
/* ============= AÇILIŞ POPUP ============= */
.erd-popup{
position: fixed; inset: 0;
z-index: 9998;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
animation: erdPopupIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes erdPopupIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.erd-popup-overlay{
position: absolute; inset: 0;
background: rgba(31,36,24,.78);
backdrop-filter: blur(4px);
}
.erd-popup-card{
position: relative;
background: #fff;
border-radius: 16px;
max-width: 460px;
width: 100%;
box-shadow: 0 30px 80px rgba(0,0,0,.4);
overflow: hidden;
z-index: 1;
}
.erd-popup-close{
position: absolute;
top: 12px; right: 12px;
width: 36px; height: 36px;
background: rgba(255,255,255,.9);
color: #1F2418;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 1.4rem;
font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
z-index: 3;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
transition: background .15s ease;
}
.erd-popup-close:hover{ background: #fff; }
.erd-popup-img{
width: 100%;
display: block;
max-height: 280px;
object-fit: cover;
}
.erd-popup-body{
padding: 1.6rem 1.8rem;
text-align: center;
}
.erd-popup-body h3{
font-family: "Onest", sans-serif;
font-size: 1.4rem;
font-weight: 800;
color: #1F2418;
margin: 0 0 .65rem;
letter-spacing: -.01em;
}
.erd-popup-body p{
color: #6F6852;
font-size: .95rem;
line-height: 1.55;
margin: 0 0 1.2rem;
}
.erd-popup-btn{
display: inline-flex; align-items: center; justify-content: center;
background: #DCA62B;
color: #1F2418;
text-decoration: none;
padding: .85rem 1.8rem;
border-radius: 999px;
font-weight: 700;
font-family: "Onest", sans-serif;
font-size: .95rem;
transition: background .15s ease, transform .15s ease;
box-shadow: 0 6px 16px rgba(220,166,43,.32);
}
.erd-popup-btn:hover{ background: #C68F1B; transform: translateY(-1px); }
/* ============= ÖDEME — kupon kutusu ============= */
.erd-co-coupon{
background: #FFF8E2;
border: 1px dashed #ECD58E;
border-radius: 10px;
padding: .85rem 1rem;
margin: .85rem 0;
}
.erd-co-coupon-label{
display: block;
font-size: .82rem;
font-weight: 600;
color: #6F5418;
margin-bottom: .5rem;
}
.erd-co-coupon-label i{ color: #DCA62B; margin-right: .3rem; }
.erd-co-coupon-row{
display: flex; gap: .4rem;
}
.erd-co-coupon-row input{
flex: 1; min-width: 0;
border: 1px solid #ECD58E;
background: #fff;
border-radius: 8px;
padding: .55rem .85rem;
font-family: "Onest", monospace;
font-size: .9rem;
font-weight: 700;
color: #1F2418;
letter-spacing: .04em;
outline: 0;
}
.erd-co-coupon-row input:focus{ border-color: #DCA62B; box-shadow: 0 0 0 3px rgba(220,166,43,.18); }
.erd-co-coupon-row button{
background: #1F2418;
color: #DCA62B;
border: 0;
padding: 0 1.1rem;
border-radius: 8px;
font-family: "Onest", sans-serif;
font-weight: 700;
font-size: .85rem;
cursor: pointer;
white-space: nowrap;
transition: background .15s ease;
}
.erd-co-coupon-row button:hover{ background: #DCA62B; color: #1F2418; }
.erd-co-coupon-err{
display: block;
margin-top: .5rem;
color: #C73E2B;
font-size: .78rem;
}
.erd-co-coupon-err i{ margin-right: .25rem; }
.erd-co-coupon-applied{
display: flex; align-items: center; justify-content: space-between;
gap: .65rem;
}
.erd-co-coupon-applied > div{ display: flex; align-items: center; gap: .55rem; flex: 1; }
.erd-co-coupon-applied i.fa-circle-check{ color: #2F6E2A; font-size: 1.2rem; }
.erd-co-coupon-applied b{ color: #1F2418; font-family: monospace; font-size: 1rem; }
.erd-co-coupon-applied small{ color: #6F5418; display: block; font-size: .75rem; }
.erd-co-coupon-remove{
background: rgba(199,62,43,.12);
color: #C73E2B;
border: 0;
width: 30px; height: 30px;
border-radius: 50%;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .15s ease;
}
.erd-co-coupon-remove:hover{ background: rgba(199,62,43,.22); }
/* ============= Kanal seçim kartları (radio) ============= */
.erd-channel-label{
display: block;
font-size: .82rem;
font-weight: 700;
color: #1F2418;
margin: .85rem 0 .55rem;
}
.erd-channel-cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .55rem;
margin-bottom: 1.2rem;
}
.erd-channel-card{
position: relative;
display: flex; flex-direction: column; align-items: center;
gap: 4px;
padding: .9rem .55rem;
background: #fff;
border: 1.5px solid #E5DDC7;
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.erd-channel-card input{
position: absolute; inset: 0;
opacity: 0;
cursor: pointer;
margin: 0;
}
.erd-channel-card:hover{
border-color: #DCA62B;
background: #FFFCF2;
}
.erd-channel-card:has(input:checked){
border-color: #DCA62B;
background: linear-gradient(180deg, #FFF8E2 0%, #FFFCF2 100%);
box-shadow: 0 4px 14px rgba(220,166,43,.18);
}
.erd-channel-ico{
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: #FAF6EB;
color: #6F6852;
margin-bottom: 4px;
transition: all .15s ease;
}
.erd-channel-card:has(input:checked) .erd-channel-ico{
background: #DCA62B;
color: #1F2418;
}
.erd-channel-card b{
font-size: .88rem;
font-weight: 700;
color: #1F2418;
font-family: "Onest", sans-serif;
}
.erd-channel-card small{
font-size: .68rem;
color: #6F6852;
line-height: 1.3;
}
@media (max-width: 480px){
.erd-channel-cards{ gap: .4rem; }
.erd-channel-card{ padding: .7rem .35rem; }
.erd-channel-card small{ font-size: .62rem; }
}
/* Sepet kuponu — uygulanmış hali */
.erd-cart-coupon-applied{
display: flex; align-items: center; justify-content: space-between;
gap: .65rem;
background: #FFF8E2;
border: 1.5px dashed #ECD58E;
border-radius: 10px;
padding: .75rem 1rem;
margin: 0;
}
.erd-cart-coupon-applied > div{ display: flex; align-items: center; gap: .5rem; flex: 1; }
.erd-cart-coupon-applied b{ color: #1F2418; font-family: monospace; font-size: 1rem; }
.erd-cart-coupon-applied small{ display: block; color: #6F5418; font-size: .72rem; }
.erd-cart-coupon-applied button{
background: rgba(199,62,43,.12);
color: #C73E2B;
border: 0;
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .15s ease;
}
.erd-cart-coupon-applied button:hover{ background: rgba(199,62,43,.22); }
/* ============= SEPETE EKLENDİ TOAST (SweetAlert tarzı) ============= */
.erd-cart-toast{
position: fixed;
top: 24px; right: 24px;
z-index: 10000;
display: flex; align-items: center;
gap: .85rem;
padding: .85rem 1rem .85rem .85rem;
background: #fff;
border: 1px solid #E5DDC7;
border-left: 4px solid #2F6E2A;
border-radius: 14px;
min-width: 320px; max-width: 400px;
box-shadow: 0 12px 40px rgba(31,36,24,.18);
font-family: "Onest", sans-serif;
transform: translateX(120%);
opacity: 0;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.erd-cart-toast.is-visible{ transform: translateX(0); opacity: 1; }
.erd-cart-toast-icon{
width: 36px; height: 36px;
background: #DBEFD8;
color: #2F6E2A;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.erd-cart-toast-body{
flex: 1; min-width: 0;
}
.erd-cart-toast-body b{
display: block;
color: #1F2418; font-size: .95rem; font-weight: 700;
letter-spacing: -.01em;
}
.erd-cart-toast-body span{
display: block;
color: #6F6852;
font-size: .8rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 220px;
margin-top: 2px;
}
.erd-cart-toast-img{
width: 44px; height: 44px;
border-radius: 8px;
object-fit: cover;
background: #FAF6EB;
border: 1px solid #E5DDC7;
flex-shrink: 0;
}
.erd-cart-toast-actions{ flex-shrink: 0; }
.erd-cart-toast-btn{
background: #DCA62B;
color: #1F2418 !important;
text-decoration: none !important;
padding: .55rem 1rem;
border-radius: 8px;
font-size: .82rem;
font-weight: 700;
white-space: nowrap;
transition: background .15s ease, transform .12s ease;
border: 0;
}
.erd-cart-toast-btn:hover{ background: #FFD15D; color: #1F2418 !important; transform: translateY(-1px); }
.erd-cart-toast-close{
position: absolute;
top: 6px; right: 8px;
background: transparent; border: 0;
color: #98906F;
font-size: 1.1rem;
cursor: pointer;
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
}
.erd-cart-toast-close:hover{ background: #FAF6EB; color: #1F2418; }
@media (max-width: 575.98px){
.erd-cart-toast{
top: auto;
bottom: calc(78px + env(safe-area-inset-bottom));
left: 12px; right: 12px;
min-width: 0;
max-width: 100%;
transform: translateY(120%);
}
.erd-cart-toast.is-visible{ transform: translateY(0); }
.erd-cart-toast-img{ width: 38px; height: 38px; }
.erd-cart-toast-body span{ max-width: 140px; }
}