/* =====================================================
   Arya Parti Süs — v3 mağaza tasarım sistemi
   Referans: Hepsiburada pazaryeri dili
   İlkeler: kompakt tipografi (13-14px UI), tek vurgu rengi,
   SVG ikonlar (emoji yok), beyaz kartlar, ince gri çizgiler.
   ===================================================== */

:root {
    --bg:        #F5F5F5;
    --beyaz:     #FFFFFF;
    --metin:     #253342;
    --metin-2:   #5A6572;
    --metin-3:   #8C97A2;
    --cizgi:     #E2E5E9;
    --cizgi-acik:#EEF0F2;
    --turuncu:   #FF6000;
    --turuncu-k: #E55600;
    --turuncu-a: #FFF3EB;
    --yesil:     #00A365;
    --yesil-a:   #E6F6EF;
    --kirmizi:   #DD1A31;
    --kirmizi-a: #FCE9EB;
    --navy:      #1B3A4B;
    --r:  8px;
    --r2: 12px;
    --golge:   0 1px 3px rgba(37,51,66,.08);
    --golge-2: 0 8px 24px rgba(37,51,66,.13);
    --gecis: .18s ease;
}

/* =========================================================
   ÜRÜN BULUCU SONUÇLARI — düzenli katalog kartları
   ========================================================= */
.sayfa-urun-bulucu .ub-oneriler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.sayfa-urun-bulucu .ub-urun {
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 10px 14px;
    min-width: 0;
    padding: 14px;
    border-color: var(--cizgi);
    border-radius: 15px;
    background: #fff;
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease;
}
.sayfa-urun-bulucu .ub-urun:hover {
    border-color: rgba(var(--marka-rgb), .45);
    transform: translateY(-2px);
}
.sayfa-urun-bulucu .ub-urun.en-uygun {
    border-color: rgba(var(--marka-rgb), .42);
    background: linear-gradient(145deg, var(--marka-a2) 0, #fff 58%);
}
.sayfa-urun-bulucu .ub-urun > em {
    left: 12px;
    top: -10px;
    min-height: 23px;
    padding: 4px 9px;
    border: 2px solid #fff;
    background: var(--aksiyon);
    font-size: 9px;
    letter-spacing: .01em;
}
.sayfa-urun-bulucu .ub-urun-gorsel {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 108px;
    height: 108px;
    border-radius: 12px;
    background: var(--marka-a2);
}
.sayfa-urun-bulucu .ub-urun-gorsel img {
    padding: 5px;
    object-fit: contain;
}
.sayfa-urun-bulucu .ub-urun-metin {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}
.sayfa-urun-bulucu .ub-urun-metin > a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--metin);
    font-size: 13px;
    line-height: 1.42;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.sayfa-urun-bulucu .ub-urun-metin > a:hover { color: var(--marka); }
.sayfa-urun-bulucu .ub-urun-metin small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.sayfa-urun-bulucu .ub-hesap {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-content: flex-start;
    gap: 18px;
    padding-top: 8px;
    border-top: 1px solid #EDF1F2;
}
.sayfa-urun-bulucu .ub-hesap span { min-width: 0; }
.sayfa-urun-bulucu .ub-hesap small { margin-bottom: 2px; font-size: 9px; }
.sayfa-urun-bulucu .ub-hesap b { color: var(--metin); font-size: 15px; }
.sayfa-urun-bulucu .ub-eksik-not {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    margin: 0;
    color: #A06508;
    font-size: 9.5px;
}
.sayfa-urun-bulucu .ub-eksik-not.stokta { color: #22815E; }
.sayfa-urun-bulucu .ub-urun > .btn {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    justify-content: space-between;
    min-width: 0;
    min-height: 43px;
    padding: 0 15px;
    border-radius: 10px;
}
@media (max-width: 1120px) {
    .sayfa-urun-bulucu .ub-oneriler { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (min-width: 651px) {
    .sayfa-urun-bulucu .ub-oneriler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .sayfa-urun-bulucu .ub-oneriler { grid-template-columns: 1fr; gap: 11px; }
    .sayfa-urun-bulucu .ub-urun {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px 11px;
        padding: 12px;
        border-radius: 13px;
    }
    .sayfa-urun-bulucu .ub-urun:hover { transform: none; }
    .sayfa-urun-bulucu .ub-urun-gorsel { width: 88px; height: 88px; }
    .sayfa-urun-bulucu .ub-urun-metin > a { font-size: 12px; -webkit-line-clamp: 3; }
    .sayfa-urun-bulucu .ub-urun-metin small { font-size: 9px; -webkit-line-clamp: 1; }
    .sayfa-urun-bulucu .ub-hesap { gap: 13px; padding-top: 6px; }
    .sayfa-urun-bulucu .ub-hesap b { font-size: 13px; }
    .sayfa-urun-bulucu .ub-eksik-not { min-height: 20px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font: 400 14px/1.55 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--metin);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; margin: 0; }
a { color: var(--turuncu); }
img { max-width: 100%; display: block; }
.ikn { flex: none; vertical-align: -3px; }

.kap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.bolum { padding: 2.2rem 1rem; }
.bolum.dar { max-width: 440px; }

.atla { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .5rem 1rem; z-index: 100; }
.atla:focus { left: 0; }
.ekran-okuyucu { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important; }

@keyframes yukari-gel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes zipla { 0% { transform: scale(1); } 45% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* =========================================================
   HEADER
   ========================================================= */
.tepe-cubuk { background: var(--beyaz); border-bottom: 1px solid var(--cizgi-acik); }
.tepe-ic { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: 1rem; font-size: 12px; }
.tepe-iletisim, .tepe-sag { display: flex; gap: 1.2rem; align-items: center; }
.tepe-cubuk a { display: inline-flex; align-items: center; gap: .3rem; color: var(--metin-2); text-decoration: none; font-weight: 500; }
.tepe-cubuk a:hover { color: var(--turuncu); }

.market-ust { background: var(--beyaz); position: sticky; top: 0; z-index: 50; box-shadow: var(--golge); }
.market-ic { display: flex; align-items: center; gap: 1.6rem; padding-top: .7rem; padding-bottom: .7rem; }

.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--metin); }
.logo-isaret {
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--turuncu); color: #fff;
}
.logo-metin { display: flex; flex-direction: column; line-height: 1.05; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.logo-metin small { font-weight: 500; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); margin-top: 2px; }

.arama {
    flex: 1; display: flex; align-items: stretch;
    max-width: 640px; height: 42px;
    border: 1px solid var(--cizgi); border-radius: var(--r);
    overflow: hidden; background: var(--bg);
    transition: border-color var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.arama:focus-within { border-color: var(--turuncu); background: #fff; box-shadow: 0 0 0 3px rgba(255,96,0,.12); }
.arama input { flex: 1; border: 0; margin: 0; padding: 0 1rem; font: 500 13.5px 'Figtree', sans-serif; background: transparent; color: var(--metin); }
.arama input:focus { outline: 0; box-shadow: none; }
.arama input::placeholder { color: var(--metin-3); }
.arama button { border: 0; background: var(--turuncu); color: #fff; padding: 0 1.1rem; cursor: pointer; display: grid; place-items: center; transition: background var(--gecis); }
.arama button:hover { background: var(--turuncu-k); }

.market-btnler { display: flex; gap: .6rem; }
.market-btn {
    display: flex; align-items: center; gap: .5rem;
    height: 42px; padding: 0 .9rem;
    border: 1px solid var(--cizgi); border-radius: var(--r);
    text-decoration: none; color: var(--metin);
    font-weight: 600; font-size: 12.5px; line-height: 1.15;
    background: var(--beyaz);
    transition: border-color var(--gecis), color var(--gecis);
    white-space: nowrap;
}
.market-btn:hover { border-color: var(--turuncu); color: var(--turuncu); }
.market-btn span { display: flex; flex-direction: column; }
.market-btn small { font-weight: 500; font-size: 10.5px; color: var(--metin-3); }
.sepet-btn { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
.sepet-btn small { color: rgba(255,255,255,.8); }
.sepet-btn:hover { background: var(--turuncu-k); border-color: var(--turuncu-k); color: #fff; }
.sepet-ikon { position: relative; display: grid; place-items: center; }
.sepet-sayac {
    position: absolute; top: -8px; right: -10px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--navy); color: #fff; border: 2px solid #fff;
    border-radius: 99px; font-size: 10px; font-weight: 700;
}
.sepet-sayac.bos { display: none; }
.sepet-sayac.zipla { animation: zipla .45s cubic-bezier(.36,1.6,.5,1); }

/* Kategori barı — HB gibi beyaz */
.kat-bar { background: var(--beyaz); border-top: 1px solid var(--cizgi-acik); }
.kat-ic { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.kat-ic::-webkit-scrollbar { display: none; }
.kat-ic a {
    padding: .62rem .85rem;
    color: var(--metin); text-decoration: none;
    font-weight: 600; font-size: 13px; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--gecis), border-color var(--gecis);
}
.kat-ic a:hover, .kat-ic a.aktif { color: var(--turuncu); border-bottom-color: var(--turuncu); }
.kat-vurgu { margin-left: auto; color: var(--turuncu) !important; }

/* =========================================================
   BUTONLAR
   ========================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .52rem 1.1rem;
    border: 1px solid var(--cizgi); border-radius: var(--r);
    background: var(--beyaz); color: var(--metin);
    font: 600 13px 'Figtree', sans-serif;
    text-decoration: none; cursor: pointer;
    transition: all var(--gecis);
}
.btn:hover { border-color: var(--turuncu); color: var(--turuncu); }
.btn:active { transform: scale(.98); }
.btn-amber { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
.btn-amber:hover { background: var(--turuncu-k); border-color: var(--turuncu-k); color: #fff; }
.btn-petrol { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-petrol:hover { background: #142d3b; border-color: #142d3b; color: #fff; }
.btn-cerceve { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn-cerceve:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-buyuk { padding: .72rem 1.6rem; font-size: 14px; }
.btn-tam { width: 100%; }

/* =========================================================
   BANNER + SLIDER + MİNİ
   ========================================================= */
.banner-alan { padding-top: 1rem; }
.banner-duzen { display: grid; gap: .9rem; grid-template-columns: minmax(0, 8.4fr) minmax(230px, 3.6fr); align-items: stretch; }
.banner-duzen.tek { grid-template-columns: 1fr; }

.slider { position: relative; overflow: hidden; height: clamp(210px, 27vw, 380px); border-radius: var(--r2); box-shadow: var(--golge); }
.slayt {
    position: absolute; inset: 0; display: flex; align-items: center;
    text-decoration: none; opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
    background: linear-gradient(140deg, var(--navy), #2C5468);
}
.slayt.aktif { opacity: 1; visibility: visible; z-index: 1; }
.slayt-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slayt-karart { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,32,42,.68) 0%, rgba(16,32,42,.3) 50%, rgba(16,32,42,0) 78%); }
.hero-doku {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(480px 260px at 88% -10%, rgba(255,96,0,.25), transparent 60%),
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
}
.slayt-yazi {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
    padding: 1.6rem clamp(1.2rem, 4vw, 3rem);
    max-width: 560px; color: #fff;
}
.slayt-yazi strong { font-size: clamp(20px, 2.9vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.slayt-yazi em { font-style: normal; font-size: clamp(12px, 1.35vw, 14.5px); color: rgba(255,255,255,.9); max-width: 430px; }
.slayt-cta { margin-top: .4rem; pointer-events: none; }

.slider-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 38px; height: 38px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.92); color: var(--metin);
    font-size: 20px; line-height: 1; cursor: pointer;
    box-shadow: var(--golge-2);
    transition: background var(--gecis), color var(--gecis);
}
.slider-ok:hover { background: var(--turuncu); color: #fff; }
.slider-ok.geri { left: 12px; }
.slider-ok.ileri { right: 12px; }
.slider-noktalar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: .4rem; z-index: 5; }
.nokta { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.5); transition: all var(--gecis); }
.nokta.aktif { background: #fff; width: 22px; }

.mini-bannerlar { display: grid; gap: .9rem; grid-template-rows: 1fr 1fr; }
.mini-banner {
    position: relative; display: flex; align-items: flex-end;
    border-radius: var(--r2); overflow: hidden; text-decoration: none;
    background: linear-gradient(140deg, var(--navy), #2C5468);
    box-shadow: var(--golge);
    transition: box-shadow var(--gecis);
}
.mini-banner:hover { box-shadow: var(--golge-2); }
.mini-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mini-banner:hover img { transform: scale(1.04); }
.mini-karart { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,32,42,0) 25%, rgba(16,32,42,.72) 100%); }
.mini-yazi { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .1rem; padding: .9rem 1.1rem; color: #fff; }
.mini-yazi strong { font-size: 15px; font-weight: 700; }
.mini-yazi em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.82); }
.mini-ok { margin-top: .3rem; font-size: 11.5px; font-weight: 700; color: #FFB380; transition: transform var(--gecis); }
.mini-banner:hover .mini-ok { transform: translateX(3px); }

/* =========================================================
   AVANTAJ ŞERİDİ
   ========================================================= */
.avantaj-serit { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-top: .9rem; }
.avantaj {
    display: flex; align-items: center; gap: .7rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik);
    border-radius: var(--r); padding: .7rem .9rem;
}
.avantaj-ikon {
    display: grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--turuncu-a); color: var(--turuncu);
}
.avantaj div { display: flex; flex-direction: column; min-width: 0; }
.avantaj strong { font-size: 12.5px; font-weight: 700; }
.avantaj span:not(.avantaj-ikon) { font-size: 11px; color: var(--metin-3); }

/* =========================================================
   BÖLÜM BAŞLIKLARI
   ========================================================= */
.bolum-ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.bolum-ust .bolum-baslik { margin: 0; }
.bolum-etiket { display: none; } /* pazar yeri dilinde etiket kullanılmaz */
.bolum-baslik { font-size: 19px; font-weight: 800; color: var(--metin); margin: 0 0 1rem; }
.bolum-ust .btn { font-size: 12.5px; padding: .4rem .9rem; }

/* =========================================================
   ÜRÜN KARTLARI (HB kompakt)
   ========================================================= */
.urun-izgara { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.urun-kart {
    display: flex; flex-direction: column;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-radius: var(--r);
    overflow: hidden;
    transition: box-shadow var(--gecis), border-color var(--gecis);
    animation: yukari-gel .45s backwards;
}
.urun-kart:hover { box-shadow: var(--golge-2); border-color: var(--cizgi); }

.urun-gorsel { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #fff; padding: 12px; }
.urun-gorsel img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.urun-kart:hover .urun-gorsel img { transform: scale(1.04); }
.gorsel-yok { font-size: 46px; line-height: 1; color: var(--turuncu); opacity: .18; user-select: none; }
.gorsel-yok.buyuk { font-size: 110px; }
.urun-gorsel .kart-gorsel-yok, .detay-gorsel .detay-gorsel-yok {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    width: 100%; height: 100%; opacity: 1; color: var(--marka);
    background: radial-gradient(circle at 50% 32%, rgba(20, 146, 159, .12), transparent 42%),
                linear-gradient(145deg, #F8FBFB, var(--marka-a2));
}
.urun-gorsel .kart-gorsel-yok > span, .detay-gorsel .detay-gorsel-yok > span {
    display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
    background: rgba(255,255,255,.78); border: 1px solid rgba(14,110,124,.12);
    box-shadow: 0 8px 24px rgba(8,65,73,.08);
}
.urun-gorsel .kart-gorsel-yok small, .detay-gorsel .detay-gorsel-yok small {
    font: 700 10.5px 'Figtree', sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: var(--metin-3);
}
.detay-gorsel .detay-gorsel-yok { min-height: 430px; }
.detay-gorsel .detay-gorsel-yok > span { width: 82px; height: 82px; border-radius: 24px; }
.detay-gorsel .detay-gorsel-yok small { font-size: 12px; }

.kart-rozetler { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; z-index: 2; }
.urun-rozet { padding: .18rem .5rem; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.rozet-turuncu { background: var(--turuncu); }
.rozet-petrol  { background: var(--navy); }
.rozet-kirmizi { background: var(--kirmizi); }
.kart-rozet { display: none; }
.indirim-rozet { display: none; } /* indirim yüzdesi artık fiyat satırında */

.urun-govde { display: flex; flex-direction: column; flex: 1; padding: .35rem .85rem .85rem; border-top: 1px solid var(--cizgi-acik); }
.urun-govde h3 { font-size: 13px; font-weight: 500; line-height: 1.4; margin: .35rem 0 .3rem; min-height: 36px; }
.urun-govde h3 a {
    color: var(--metin); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.urun-govde h3 a:hover { color: var(--turuncu); }
.urun-ozet { display: none; } /* kart üzerinde açıklama olmaz */

.urun-fiyat-blok { margin: 0 0 .6rem; }
.fiyatlar { display: flex; flex-direction: column; gap: 1px; }
.fiyat-ust { display: flex; align-items: center; gap: .45rem; }
.eski-fiyat { font-size: 12px; color: var(--metin-3); text-decoration: line-through; }
.indirim-pill { background: var(--kirmizi); color: #fff; font-size: 10.5px; font-weight: 800; padding: .1rem .38rem; border-radius: 4px; }
.urun-fiyat { font-size: 16.5px; font-weight: 800; color: var(--metin); letter-spacing: -.01em; }
.kargo-rozet { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: 11px; font-weight: 700; color: var(--yesil); }

.urun-kart .urun-kart-aksiyon {
    margin-top: auto;
    background: var(--beyaz); border-color: var(--turuncu); color: var(--turuncu);
    font-size: 12.5px; padding: .45rem;
}
.urun-kart .urun-kart-aksiyon:hover { background: var(--turuncu); color: #fff; }
.tukendi-btn { background: var(--bg); color: var(--metin-3); border-color: var(--cizgi-acik); cursor: not-allowed; margin-top: auto; font-size: 12.5px; padding: .45rem; }
.tukendi { color: var(--kirmizi); font-weight: 700; font-size: 12.5px; }
.tukendi.buyuk { font-size: 14px; }

/* Yatay şerit */
.serit-bolum { padding: 1.8rem 1rem 0; }
.serit-oklar { display: flex; gap: .45rem; }
.serit-ok {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--cizgi); background: #fff;
    font-size: 17px; line-height: 1; color: var(--metin);
    cursor: pointer; transition: all var(--gecis);
}
.serit-ok:hover { border-color: var(--turuncu); color: var(--turuncu); }
.urun-serit {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: clamp(180px, 19.5%, 218px);
    gap: .8rem; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 2px 2px 6px; scrollbar-width: none;
}
.urun-serit::-webkit-scrollbar { display: none; }
.urun-serit .urun-kart { scroll-snap-align: start; }

/* =========================================================
   İSTATİSTİK / NASIL / TANITIM / CTA
   ========================================================= */
.stat-band { background: var(--beyaz); border-block: 1px solid var(--cizgi-acik); margin-top: 2rem; }
.stat-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; padding: 1.6rem 1rem; }
.stat { display: flex; flex-direction: column; text-align: center; }
.stat-deger { font-size: 26px; font-weight: 800; color: var(--turuncu); letter-spacing: -.02em; }
.stat-etiket { font-size: 12px; color: var(--metin-2); font-weight: 600; }

.nasil { max-width: 1200px; }
.adim-izgara { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adim { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2); padding: 1.3rem 1.4rem; }
.adim-no {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--turuncu-a); color: var(--turuncu);
    font-size: 16px; font-weight: 800;
}
.adim h3 { font-size: 14.5px; font-weight: 700; margin: .8rem 0 .25rem; }
.adim p { margin: 0; color: var(--metin-2); font-size: 12.5px; }

.tanitim { background: var(--beyaz); border-block: 1px solid var(--cizgi-acik); }
.tanitim-ic { display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; padding: 2.6rem 1rem; }
.tanitim-gorsel {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 1.15; border-radius: var(--r2);
    background: radial-gradient(300px 300px at 72% 28%, rgba(255,96,0,.22), transparent 62%), linear-gradient(140deg, var(--navy), #2C5468);
}
.tanitim-molekul { font-size: 84px; color: rgba(255,255,255,.85); }
.tanitim-kart-mini {
    position: absolute; bottom: -14px; right: -10px;
    display: flex; flex-direction: column;
    background: var(--beyaz); border: 1px solid var(--cizgi);
    border-radius: 10px; padding: .6rem .9rem;
    box-shadow: var(--golge-2); font-size: 11.5px;
}
.tanitim-kart-mini strong { color: var(--metin); font-size: 12.5px; }
.tanitim-kart-mini span { color: var(--metin-3); }
.tanitim-metin p { color: var(--metin-2); font-size: 13.5px; }
.tanitim-liste { list-style: none; padding: 0; margin: 1rem 0 1.3rem; }
.tanitim-liste li { display: flex; align-items: center; gap: .55rem; padding: .28rem 0; font-weight: 600; font-size: 13px; }
.tanitim-liste .ikn { color: var(--yesil); }

.cta-band { background: var(--turuncu-a); border-block: 1px solid #FFE1CC; }
.cta-ic { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; padding: 1.8rem 1rem; }
.cta-ic h2 { font-size: 18px; font-weight: 800; margin-bottom: .2rem; }
.cta-ic p { margin: 0; color: var(--metin-2); font-size: 13px; }

/* =========================================================
   ÜRÜN DETAY (buy-box)
   ========================================================= */
.detay-sayfa { padding-top: 1rem; padding-bottom: 1.6rem; }
.kirinti { font-size: 12px; color: var(--metin-3); margin-bottom: .9rem; }
.kirinti a { color: var(--metin-2); text-decoration: none; }
.kirinti a:hover { color: var(--turuncu); }
.kirinti span { margin: 0 .35rem; }

.detay-hb {
    display: grid; gap: 1.4rem;
    grid-template-columns: minmax(0, 4.2fr) minmax(0, 4.6fr) minmax(250px, 3.2fr);
    align-items: start;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1.4rem;
}
.detay-gorsel {
    position: sticky; top: 120px;
    aspect-ratio: 1; border-radius: var(--r);
    background: #fff; border: 1px solid var(--cizgi-acik);
    display: grid; place-items: center; overflow: hidden; padding: 14px;
}
.detay-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.detay-bilgi h1 { font-size: clamp(17px, 2vw, 21px); font-weight: 700; margin-bottom: .3rem; }
.detay-ozet { font-size: 13.5px; color: var(--metin-2); margin: 0 0 .9rem; }
.detay-nitelikler {
    display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem;
    background: var(--bg); border-radius: var(--r);
    padding: .8rem 1rem; margin-bottom: 1rem;
    font-size: 12px; font-weight: 600; color: var(--metin-2);
}
.detay-nitelikler span { display: flex; align-items: center; gap: .4rem; }
.detay-nitelikler .ikn { color: var(--yesil); }
.detay-aciklama { margin-top: 1rem; border-top: 1px solid var(--cizgi-acik); padding-top: .9rem; }
.detay-aciklama h2 { font-size: 14.5px; font-weight: 700; margin-bottom: .4rem; }
.detay-aciklama p { font-size: 13px; color: var(--metin-2); }
.guvenlik-notu {
    display: flex; gap: .55rem; align-items: flex-start;
    margin-top: 1.1rem; padding: .8rem 1rem;
    background: var(--aksiyon-a); border: 1px solid #F2E2B6; border-radius: var(--r);
    font-size: 12.5px; color: #7A5C12;
}
.guvenlik-notu .ikn { color: #C9950C; margin-top: 1px; flex: none; }

.al-kutu {
    position: sticky; top: 120px;
    border: 1px solid var(--cizgi); border-radius: var(--r2);
    padding: 1.1rem 1.2rem; background: #fff;
    box-shadow: var(--golge);
}
.al-fiyat { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.al-fiyat .fiyat-ust { display: flex; align-items: center; gap: .5rem; }
.al-fiyat .eski-fiyat { font-size: 13px; }
.al-indirim { background: var(--kirmizi); color: #fff; font-size: 11px; font-weight: 800; padding: .12rem .45rem; border-radius: 4px; }
.al-fiyat strong { font-size: 26px; font-weight: 800; color: var(--metin); letter-spacing: -.02em; }
.stok-not { display: flex; align-items: center; gap: .35rem; color: var(--yesil); font-weight: 700; font-size: 12px; margin: .2rem 0 .6rem; }
.stok-not.az { color: var(--kirmizi); }
.al-satir { display: flex; gap: .6rem; margin: .5rem 0 .3rem; }
.al-cta { flex: 1; }
.al-teslimat {
    list-style: none; margin: .9rem 0 0; padding: .8rem 0 0;
    border-top: 1px dashed var(--cizgi);
    display: flex; flex-direction: column; gap: .5rem;
    font-size: 12px; color: var(--metin-2);
}
.al-teslimat li { display: flex; align-items: flex-start; gap: .5rem; }
.al-teslimat .ikn { color: var(--turuncu); margin-top: 1px; flex: none; }
.al-teslimat strong { color: var(--metin); }
.benzer-bolum { padding-left: 0; padding-right: 0; padding-bottom: 0; }

.adet-kutusu { display: inline-flex; align-items: stretch; height: 42px; border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; background: #fff; }
.adet-btn { width: 36px; border: 0; background: transparent; font-size: 17px; cursor: pointer; color: var(--metin-2); transition: background var(--gecis), color var(--gecis); }
.adet-btn:hover { background: var(--turuncu-a); color: var(--turuncu); }
.adet-kutusu input { width: 44px; border: 0; text-align: center; font: 600 13.5px 'Figtree', sans-serif; color: var(--metin); -moz-appearance: textfield; appearance: textfield; margin: 0; padding: 0; }
.adet-kutusu input::-webkit-outer-spin-button, .adet-kutusu input::-webkit-inner-spin-button { -webkit-appearance: none; }
.adet-kutusu input:focus { box-shadow: none; }
.adet-kutusu.kucuk { height: 34px; }
.adet-kutusu.kucuk .adet-btn { width: 28px; font-size: 14px; }
.adet-kutusu.kucuk input { width: 36px; font-size: 12.5px; }

/* =========================================================
   KATALOG / SEPET / ÖDEME
   ========================================================= */
.sayfa-serit { background: var(--beyaz); border-bottom: 1px solid var(--cizgi-acik); padding: 1.3rem 0; }
.sayfa-serit h1 { font-size: 20px; font-weight: 800; margin-bottom: .15rem; }
.kirinti-acik { font-size: 12px; color: var(--metin-3); }
.kirinti-acik a { color: var(--metin-2); text-decoration: none; }
.kirinti-acik a:hover { color: var(--turuncu); }
.kirinti-acik span { margin: 0 .35rem; }

.katalog-arac { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.arama-kutu { display: flex; gap: .5rem; flex: 1; max-width: 420px; }
.arama-kutu input { margin-top: 0; }
.sirala { display: flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--metin-2); }
.sirala select { width: auto; margin-top: 0; }
.arama-sonuc { color: var(--metin-2); font-size: 13px; margin: 0 0 1rem; }

.sepet-duzen { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 7.5fr) minmax(280px, 3.6fr); align-items: start; }
.sepet-liste { display: flex; flex-direction: column; gap: .6rem; }
.sepet-satir {
    display: grid; align-items: center; gap: .9rem;
    grid-template-columns: 68px minmax(0, 1fr) auto auto auto;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik);
    border-radius: var(--r); padding: .8rem 1rem;
    transition: opacity var(--gecis), transform var(--gecis);
}
.sepet-satir.siliniyor { opacity: 0; transform: translateX(12px); }
.sepet-mini { display: grid; place-items: center; width: 68px; height: 56px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--cizgi-acik); }
.sepet-mini img { width: 100%; height: 100%; object-fit: contain; }
.sepet-mini .gorsel-yok { font-size: 22px; }
.sepet-bilgi { display: flex; flex-direction: column; min-width: 0; }
.sepet-bilgi a { font-weight: 600; font-size: 13px; color: var(--metin); text-decoration: none; }
.sepet-bilgi a:hover { color: var(--turuncu); }
.sepet-birim { font-size: 11.5px; color: var(--metin-3); }
.sepet-tutar { font-weight: 800; font-size: 14px; color: var(--metin); white-space: nowrap; }
.sepet-sil { border: 0; background: transparent; cursor: pointer; color: var(--metin-3); font-size: 14px; padding: .35rem; border-radius: 6px; transition: all var(--gecis); }
.sepet-sil:hover { color: var(--kirmizi); background: var(--kirmizi-a); }

.sepet-ozet {
    background: var(--beyaz); border: 1px solid var(--cizgi);
    border-radius: var(--r2); padding: 1.2rem 1.3rem;
    position: sticky; top: 120px; box-shadow: var(--golge);
}
.sepet-ozet h2 { font-size: 15px; font-weight: 800; margin-bottom: .7rem; }
.ozet-satir { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; font-size: 13px; color: var(--metin-2); }
.ozet-satir.toplam { border-top: 1px solid var(--cizgi-acik); margin-top: .45rem; padding-top: .7rem; font-size: 15px; font-weight: 800; color: var(--metin); }
.kargo-tesvik { font-size: 12px; color: var(--turuncu-k); background: var(--turuncu-a); border-radius: 6px; padding: .45rem .7rem; }
.sepet-ozet .btn { margin-top: .8rem; }
.odeme-notu { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: 11.5px; color: var(--metin-3); margin: .7rem 0 0; }

.odeme-duzen { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 7.5fr) minmax(280px, 3.6fr); align-items: start; }
.odeme-form fieldset { border: 1px solid var(--cizgi-acik); border-radius: var(--r2); background: var(--beyaz); padding: 1.1rem 1.3rem .7rem; margin: 0 0 1rem; }
.odeme-form legend { font-size: 14px; font-weight: 800; padding: 0 .5rem; }
.kart-guvence, .test-notu { display: flex; align-items: flex-start; gap: .45rem; font-size: 12px; border-radius: var(--r); padding: .55rem .8rem; margin: 0 0 .9rem; }
.kart-guvence { background: var(--yesil-a); color: #086B45; }
.test-notu { background: var(--aksiyon-a); color: #7A5C12; margin: .3rem 0 .5rem; }

.hata-kutu { background: var(--kirmizi-a); border: 1px solid #F2C4CA; color: var(--kirmizi); border-radius: var(--r); padding: .7rem 1rem; margin-bottom: 1.1rem; }
.hata-kutu p { margin: .15rem 0; font-weight: 600; font-size: 12.5px; }

/* Sipariş tamamlandı v3 — durum, özet ve sonraki adım tek bakışta */
.st3-sayfa { max-width: 960px; padding-top: 1.6rem; padding-bottom: 3rem; }
.st3-basari {
    display: grid; grid-template-columns: 48px minmax(0,1fr) auto; grid-template-rows: auto auto auto;
    column-gap: 1rem; padding: 1.35rem 1.5rem 1.1rem; color: var(--metin);
    background: var(--beyaz); border: 1px solid var(--cizgi); border-top: 3px solid var(--yesil);
    border-radius: var(--r2); box-shadow: var(--golge);
}
.st3-onay-ikon {
    grid-column: 1; grid-row: 1/3; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; color: #fff; background: var(--yesil); animation: zipla .5s .1s backwards;
}
.st3-durum {
    grid-column: 3; grid-row: 1; align-self: center; display: inline-flex; align-items: center; gap: .32rem;
    padding: .35rem .6rem; border: 1px solid #CBE9DD; border-radius: 99px;
    color: #08784E; background: var(--yesil-a); font-size: 11px; font-weight: 750;
}
.st3-basari h1 { grid-column: 2; grid-row: 1; align-self: center; font-size: 21px; font-weight: 850; letter-spacing: -.02em; }
.st3-basari > p { grid-column: 2/4; grid-row: 2; max-width: 660px; margin: .25rem 0 0; color: var(--metin-2); font-size: 12.5px; }
.st3-basari > p b { color: var(--metin); }
.st3-kimlik {
    grid-column: 1/4; grid-row: 3; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center;
    gap: 1.25rem; margin-top: 1.05rem; padding: .85rem 0 0; border-top: 1px solid var(--cizgi-acik);
}
.st3-kimlik span { display: flex; flex-direction: column; gap: .06rem; }
.st3-kimlik small { color: var(--metin-3); font-size: 10px; }
.st3-kimlik strong { color: var(--metin); font-size: 15px; letter-spacing: .01em; }
.st3-kimlik .siparis-no { color: var(--turuncu-k); }
.st3-kimlik i { width: 1px; align-self: stretch; background: var(--cizgi-acik); }

.st3-izgara { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .78fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.st3-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r2); box-shadow: var(--golge); }
.st3-kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--cizgi-acik); }
.st3-kart-bas small, .st3-sonraki > div > small { display: block; color: var(--metin-3); font-size: 9.5px; font-weight: 800; letter-spacing: .11em; }
.st3-kart h2 { margin-top: .15rem; font-size: 16px; }
.st3-yontem { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .65rem; border-radius: 99px; background: #EDF7F8; color: #14606C; font-size: 11px; font-weight: 800; white-space: nowrap; }
.st3-urunler { padding: .25rem 1.25rem; }
.st3-urun { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--cizgi-acik); }
.st3-urun:last-child { border-bottom: 0; }
.st3-urun-ad { display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto auto; column-gap: .75rem; min-width: 0; }
.st3-urun-gorsel { position: relative; grid-row: 1/3; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--cizgi-acik); border-radius: 9px; overflow: visible; background: #fff; color: var(--metin-3); }
.st3-urun-gorsel img { width: 100%; height: 100%; padding: 2px; border-radius: 8px; object-fit: contain; }
.st3-urun-gorsel i { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid #fff; border-radius: 99px; background: var(--marka); color: #fff; font-style: normal; font-size: 9px; font-weight: 850; }
.st3-urun-ad b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.st3-urun-ad small { color: var(--metin-3); font-size: 10.5px; }
.st3-urun > strong { white-space: nowrap; font-size: 13px; }
.st3-tutarlar { padding: .8rem 1.25rem 1.1rem; background: #FAFBFB; border-radius: 0 0 var(--r2) var(--r2); }
.st3-tutarlar > span { display: flex; justify-content: space-between; gap: 1rem; padding: .28rem 0; }
.st3-tutarlar small { color: var(--metin-2); font-size: 11.5px; }
.st3-tutarlar b { font-size: 12px; }
.st3-tutarlar .indirim b { color: var(--yesil); }
.st3-tutarlar .toplam { align-items: center; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--cizgi); }
.st3-tutarlar .toplam small { color: var(--metin); font-size: 13px; font-weight: 800; }
.st3-tutarlar .toplam b { font-size: 18px; color: var(--metin); }
.st3-yan { display: grid; gap: 1.15rem; }
.st3-sonraki { position: relative; padding: 1.1rem; overflow: hidden; border-left: 3px solid #1B7784; }
.st3-sonraki.havale { border-color: var(--cizgi); border-left-color: #1B7784; background: #fff; }
.st3-sonraki-ikon { float: left; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 .7rem .45rem 0; border-radius: 9px; background: #EAF5F6; color: #126979; }
.st3-sonraki > div h2 { font-size: 15px; }
.st3-sonraki > p { clear: both; margin: .8rem 0; color: var(--metin-2); font-size: 12px; line-height: 1.65; }
.st3-eposta { display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--bg); color: #14606C; }
.st3-eposta span { display: flex; flex-direction: column; min-width: 0; }
.st3-eposta small { color: var(--metin-3); font-size: 9.5px; }
.st3-eposta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin); font-size: 11.5px; }
.st3-sonraki .st3-mail-not { display: flex; align-items: flex-start; gap: .35rem; margin: .65rem 0 0; padding: 0; color: var(--metin-3); font-size: 10.5px; }
.st3-yardim { padding: 1.1rem 1.2rem; }
.st3-yardim h2 { margin-bottom: .65rem; font-size: 14px; }
.st3-yardim .btn { justify-content: center; margin-top: .55rem; }
.st3-yardim p { margin: .8rem 0 0; text-align: center; color: var(--metin-3); font-size: 10.5px; }
.st3-yardim p a { font-weight: 700; }
.siparis-tamam-sayfasi .kars-tepsi { display: none !important; } /* onay sayfasında dikkati dağıtmasın */

@media (max-width: 780px) {
    .st3-sayfa { padding-top: 1rem; }
    .st3-basari { grid-template-columns: 44px minmax(0,1fr); grid-template-rows: auto auto auto auto; column-gap: .75rem; padding: 1.15rem; }
    .st3-onay-ikon { grid-column: 1; grid-row: 1/3; width: 40px; height: 40px; }
    .st3-basari h1 { grid-column: 2; grid-row: 1; font-size: 19px; }
    .st3-durum { grid-column: 2; grid-row: 2; justify-self: start; margin-top: .3rem; }
    .st3-basari > p { grid-column: 1/3; grid-row: 3; margin-top: .8rem; }
    .st3-kimlik { grid-column: 1/3; grid-row: 4; grid-template-columns: 1fr 1px 1fr; width: 100%; }
    .st3-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
    .st3-basari h1 { font-size: 18px; }
    .st3-kimlik { grid-template-columns: 1fr; gap: .55rem; }
    .st3-kimlik i { width: auto; height: 1px; }
    .st3-kart-bas { align-items: flex-start; }
    .st3-yontem { white-space: normal; text-align: right; }
}

.bos-durum { text-align: center; padding: 2.6rem 1rem; background: var(--beyaz); border: 1px dashed var(--cizgi); border-radius: var(--r2); color: var(--metin-2); font-size: 13.5px; }
.bos-ikon { font-size: 34px; display: block; margin-bottom: .5rem; }

/* =========================================================
   FORMLAR
   ========================================================= */
label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: .85rem; color: var(--metin); }
input:not([type=checkbox]), textarea, select {
    display: block; width: 100%; margin-top: .3rem;
    padding: .6rem .8rem;
    border: 1px solid var(--cizgi); border-radius: var(--r);
    background: var(--beyaz);
    font: 500 13.5px 'Figtree', sans-serif; color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--turuncu); box-shadow: 0 0 0 3px rgba(255,96,0,.12); }
.alan-cift { display: grid; gap: 0 .9rem; grid-template-columns: 1fr 1fr; }
.tek-form { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2); padding: 1.5rem; box-shadow: var(--golge); }
.form-alt { font-size: 12.5px; color: var(--metin-2); text-align: center; margin: .9rem 0 0; }

/* =========================================================
   TABLO / ROZET / FLASH / TOAST
   ========================================================= */
.tablo-sar { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; background: var(--beyaz); border-radius: var(--r); overflow: hidden; }
.tablo th, .tablo td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--cizgi-acik); font-size: 13px; }
.tablo th { background: var(--bg); color: var(--metin-2); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }

.rozet { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: 11px; font-weight: 700; }
.rozet-yeni         { background: var(--aksiyon-a2); color: var(--aksiyon-metin); }
.rozet-hazirlaniyor { background: #E2ECFB; color: #24518F; }
.rozet-kargoda      { background: #E9E2FA; color: #55389B; }
.rozet-teslim       { background: var(--yesil-a); color: var(--yesil); }
.rozet-iptal        { background: var(--kirmizi-a); color: var(--kirmizi); }

.flash { padding: .6rem 0; font-weight: 600; font-size: 12.5px; }
.flash-basari { background: var(--yesil-a); color: #086B45; }
.flash-uyari  { background: var(--aksiyon-a2); color: var(--aksiyon-metin); }
.flash-hata   { background: var(--kirmizi-a); color: var(--kirmizi); }
.kutu-flash { border-radius: var(--r); padding: .7rem 1rem; margin-bottom: 1rem; }

.toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 90;
    transform: translate(-50%, 16px);
    background: var(--metin); color: #fff;
    padding: .65rem 1.2rem; border-radius: var(--r);
    font-weight: 600; font-size: 13px;
    box-shadow: var(--golge-2);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    max-width: min(92vw, 400px); text-align: center;
}
.toast.goster { opacity: 1; transform: translate(-50%, 0); }
.toast.hata { background: var(--kirmizi); }

/* =========================================================
   İÇERİK SAYFALARI / SSS / İLETİŞİM
   ========================================================= */
.icerik-duzen { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 8fr) minmax(240px, 3.4fr); align-items: start; }
.icerik-govde { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2); padding: 1.7rem 2rem; }
.icerik-govde h2 { font-size: 15px; font-weight: 800; margin: 1.4rem 0 .45rem; padding-bottom: .3rem; border-bottom: 1px solid var(--cizgi-acik); }
.icerik-govde h2:first-child { margin-top: 0; }
.icerik-govde p { font-size: 13.5px; color: var(--metin-2); }
.icerik-not { background: var(--aksiyon-a); border-left: 3px solid #E5B92E; border-radius: 0 var(--r) var(--r) 0; padding: .7rem 1rem; font-size: 12.5px; font-style: italic; }
.icerik-guncel { font-size: 11.5px; color: var(--metin-3); margin-top: 1.6rem; }

.yan-kutu { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.yan-kutu h3 { font-size: 13.5px; font-weight: 800; margin-bottom: .6rem; }
.yan-kutu p { font-size: 12.5px; color: var(--metin-2); }
.yan-linkler { display: flex; flex-direction: column; }
.yan-linkler a {
    padding: .42rem .1rem; text-decoration: none;
    color: var(--metin-2); font-weight: 600; font-size: 12.5px;
    border-bottom: 1px solid var(--cizgi-acik);
    transition: color var(--gecis), padding-left var(--gecis);
}
.yan-linkler a:last-child { border-bottom: 0; }
.yan-linkler a:hover, .yan-linkler a.aktif { color: var(--turuncu); padding-left: .4rem; }
.yan-cta { background: var(--turuncu-a); border-color: #FFE1CC; }

.sss-liste { display: flex; flex-direction: column; gap: .55rem; }
.sss { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r); overflow: hidden; transition: box-shadow var(--gecis); }
.sss[open] { box-shadow: var(--golge); }
.sss summary { padding: .85rem 2.6rem .85rem 1.1rem; cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; position: relative; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 19px; font-weight: 400; color: var(--turuncu); }
.sss[open] summary::after { content: '−'; }
.sss p { margin: 0; padding: 0 1.1rem 1rem; color: var(--metin-2); font-size: 13px; }

.iletisim-duzen { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 7fr) minmax(250px, 4fr); align-items: start; }
.iletisim-form { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2); padding: 1.5rem 1.7rem; }
.iletisim-form h2 { font-size: 16px; font-weight: 800; margin-bottom: .2rem; }
.iletisim-alt { color: var(--metin-2); margin: 0 0 1.1rem; font-size: 13px; }
.bilgi-satirlar p { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 .9rem; font-size: 12.5px; color: var(--metin-2); }
.bilgi-satirlar strong { display: flex; align-items: center; gap: .4rem; color: var(--metin); font-size: 12.5px; }
.bilgi-satirlar .ikn { color: var(--turuncu); }

/* =========================================================
   FOOTER (beyaz, kompakt — HB dili)
   ========================================================= */
.alt { margin-top: 2.6rem; background: var(--beyaz); border-top: 1px solid var(--cizgi); color: var(--metin-2); }
.alt-izgara {
    display: grid; gap: 2rem;
    grid-template-columns: minmax(230px, 4fr) minmax(140px, 2fr) minmax(180px, 2.4fr) minmax(190px, 3fr);
    padding: 2.2rem 1rem 1.8rem;
}
.alt-sutun h3 { font-size: 12.5px; font-weight: 800; color: var(--metin); margin: 0 0 .8rem; }
.alt-logo { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 15px; color: var(--metin); }
.alt-logo .logo-isaret { width: 30px; height: 30px; border-radius: 7px; }
.alt-not { font-size: 12.5px; margin: .7rem 0 0; max-width: 300px; }
.alt-iletisim { display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; font-size: 12.5px; }
.alt-iletisim a, .alt-iletisim span { display: flex; align-items: flex-start; gap: .45rem; color: var(--metin-2); text-decoration: none; }
.alt-iletisim a:hover { color: var(--turuncu); }
.alt-iletisim .ikn { color: var(--turuncu); margin-top: 1px; flex: none; }
.alt-linkler { display: flex; flex-direction: column; gap: .45rem; }
.alt-linkler a { color: var(--metin-2); text-decoration: none; font-size: 12.5px; transition: color var(--gecis); }
.alt-linkler a:hover { color: var(--turuncu); }
.alt-guven { display: flex; flex-direction: column; gap: .5rem; font-size: 12.5px; }
.alt-guven span { display: flex; align-items: center; gap: .45rem; }
.alt-guven .ikn { color: var(--yesil); flex: none; }
.alt-odeme-rozet { display: flex; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
.alt-odeme-rozet span {
    border: 1px solid var(--cizgi); border-radius: 5px;
    padding: .22rem .55rem; font-size: 10px; font-weight: 800;
    color: var(--metin-2); letter-spacing: .04em; background: var(--bg);
}
.alt-imza { border-top: 1px solid var(--cizgi-acik); background: var(--bg); }
.alt-imza-ic { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1rem; font-size: 11.5px; color: var(--metin-3); }

/* =========================================================
   MOBİL
   ========================================================= */
@media (max-width: 1020px) {
    .detay-hb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .al-kutu { grid-column: 1 / -1; position: static; }
    .alt-izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .market-ic { flex-wrap: wrap; gap: .6rem .9rem; }
    .arama { order: 3; flex-basis: 100%; max-width: none; height: 40px; }
    .market-btnler { margin-left: auto; }
    .market-btn span small { display: none; }
    .market-btn:not(.sepet-btn) span { display: none; }
    .market-btn:not(.sepet-btn) { padding: 0 .7rem; }
    .banner-duzen { grid-template-columns: 1fr; }
    .mini-bannerlar { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .mini-banner { min-height: 116px; }
    .tepe-eposta { display: none; }
    .icerik-duzen, .iletisim-duzen, .tanitim-ic, .sepet-duzen, .odeme-duzen { grid-template-columns: 1fr; }
    .tanitim-gorsel { max-width: 340px; }
    .sepet-ozet, .detay-gorsel { position: static; }
    .slider-ok { display: none; }
}
@media (max-width: 680px) {
    .detay-hb { grid-template-columns: 1fr; padding: 1rem; }
    .urun-serit { grid-auto-columns: 46%; }
    .urun-izgara { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .6rem; }
    .sepet-satir { grid-template-columns: 58px minmax(0, 1fr) auto; }
    .sepet-satir .adet-kutusu { grid-column: 2; justify-self: start; }
    .sepet-tutar { grid-column: 3; }
    .alan-cift { grid-template-columns: 1fr; }
    .avantaj-serit { grid-template-columns: 1fr 1fr; }
    .avantaj span:not(.avantaj-ikon) { display: none; }
}
@media (max-width: 560px) {
    .sepet-btn span:not(.sepet-ikon) { display: none; }
    .sepet-btn { padding: 0 .75rem; }
    .alt-izgara { grid-template-columns: 1fr; gap: 1.5rem; }
    .icerik-govde { padding: 1.2rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* =========================================================
   HB ANASAYFA BİLEŞENLERİ (ekran görüntüsü referanslı)
   ========================================================= */

/* ---- Hikâye çemberleri ---- */
.hikaye-alan { padding-top: .8rem; }
.hikaye-serit {
    display: flex; gap: 1.1rem;
    overflow-x: auto; scrollbar-width: none;
    padding: 2px 2px 4px;
}
.hikaye-serit::-webkit-scrollbar { display: none; }
.hikaye {
    display: flex; flex-direction: column; align-items: center; gap: .32rem;
    text-decoration: none; flex: none; width: 68px;
}
.hikaye-cember {
    display: grid; place-items: center;
    width: 62px; height: 62px; border-radius: 18px;
    padding: 3px; overflow: hidden;
    border: 2px solid var(--turuncu);
    background: #fff;
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.hikaye:hover .hikaye-cember { transform: translateY(-2px); box-shadow: var(--golge-2); }
.hikaye-cember img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.hikaye-bos {
    display: grid; place-items: center; width: 100%; height: 100%;
    border-radius: 13px; color: #fff;
    background: linear-gradient(140deg, var(--turuncu), #FF8E42);
}
.hikaye:nth-child(2n) .hikaye-bos { background: linear-gradient(140deg, var(--navy), #2C5468); }
.hikaye:nth-child(3n) .hikaye-bos { background: linear-gradient(140deg, #7B2FBE, #A855F7); }
.hikaye:nth-child(4n) .hikaye-bos { background: linear-gradient(140deg, #00875A, #00A365); }
.hikaye-ad {
    font-size: 10.5px; font-weight: 600; color: var(--metin-2);
    text-align: center; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hikaye:hover .hikaye-ad { color: var(--turuncu); }

/* ---- Slider sayaç pili (5/16 gibi) ---- */
.slider-sayac {
    position: absolute; right: 12px; bottom: 12px; z-index: 5;
    background: rgba(16,32,42,.6); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: .2rem .55rem; border-radius: 99px;
    backdrop-filter: blur(3px);
}

/* ---- Ürün satırı konteyneri (HB beyaz kutu) ---- */
.satir-kutu {
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik);
    border-radius: var(--r2);
    padding: .9rem 1rem 1rem;
    margin-top: 1.1rem;
    box-shadow: var(--golge);
}
.satir-ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.satir-ust h2 { font-size: 16px; font-weight: 800; }
.satir-sag { display: flex; align-items: center; gap: .45rem; }
.tumu-link { font-size: 12.5px; font-weight: 700; color: var(--turuncu); text-decoration: none; margin-right: .4rem; }
.tumu-link:hover { text-decoration: underline; }
.satir-kutu .urun-serit { padding: 2px; }
.satir-kutu .urun-kart { border-color: var(--cizgi-acik); }

/* ---- Köşe "X TL İndirim" etiketi ---- */
.tl-indirim {
    display: flex; flex-direction: column; align-items: center; line-height: 1.05;
    background: var(--turuncu); color: #fff;
    font-size: 11px; font-weight: 800;
    padding: .3rem .5rem; border-radius: 6px 6px 6px 0;
}
.tl-indirim small { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* ---- Promo banner şeridi (4'lü) ---- */
.promo-serit { display: grid; gap: .8rem; grid-template-columns: repeat(4, 1fr); margin-top: 1.1rem; }
.promo-kart {
    position: relative; display: flex; align-items: center;
    min-height: 86px; border-radius: var(--r2); overflow: hidden;
    text-decoration: none; padding: .9rem 1.1rem;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.promo-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.promo-kart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-yazi { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .1rem; color: #fff; }
.promo-yazi strong { font-size: 14px; font-weight: 800; line-height: 1.2; }
.promo-yazi em { font-style: normal; font-size: 11px; opacity: .88; }
.promo-turuncu { background: linear-gradient(135deg, #FF6000, #FF8E42); }
.promo-yesil   { background: linear-gradient(135deg, #00875A, #00B87C); }
.promo-mor     { background: linear-gradient(135deg, #6B21A8, #A855F7); }
.promo-mavi    { background: linear-gradient(135deg, #1B3A4B, #2E6B8A); }

@media (max-width: 900px) {
    .promo-serit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .hikaye { width: 58px; }
    .hikaye-cember { width: 54px; height: 54px; border-radius: 16px; }
    .satir-kutu { padding: .7rem .7rem .8rem; }
}

/* =========================================================
   HB HEADER v2 (ekran görüntüsü birebir)
   ========================================================= */

/* Üst şerit: sağa yaslı linkler */
.tepe-ic { justify-content: flex-end; min-height: 34px; }
.tepe-linkler { display: flex; gap: 1.5rem; align-items: center; }
.tepe-linkler a { color: var(--metin); text-decoration: none; font-weight: 600; font-size: 12px; }
.tepe-linkler a:hover { color: var(--turuncu); }
.tepe-vurgu { color: var(--turuncu) !important; }

/* Logo: turuncu wordmark */
.market-ust .logo {
    font-size: 25px; font-weight: 800; letter-spacing: -.03em;
    color: var(--turuncu); white-space: nowrap;
}

/* Arama: hap, ikon solda içeride, ince koyu çerçeve */
.arama {
    height: 44px; max-width: 560px;
    background: #fff;
    border: 1px solid #6B7580; border-radius: 12px;
    align-items: center; overflow: hidden;
}
.arama:focus-within { border-color: var(--turuncu); box-shadow: 0 0 0 3px rgba(255,96,0,.12); background: #fff; }
.arama-ikon {
    border: 0; background: transparent; cursor: pointer;
    display: grid; place-items: center;
    padding: 0 .3rem 0 .9rem; color: var(--metin-2);
}
.arama-ikon:hover { color: var(--turuncu); }
.arama input { padding: 0 .9rem 0 .3rem; font-size: 14px; }

/* Destek chip'i (HB'nin Konum alanı gibi) */
.destek-chip {
    display: flex; align-items: center; gap: .5rem;
    height: 44px; padding: 0 .8rem;
    text-decoration: none; color: var(--metin);
    font-weight: 700; font-size: 13px; line-height: 1.15;
    white-space: nowrap;
}
.destek-chip .ikn { color: var(--turuncu); }
.destek-chip span { display: flex; flex-direction: column; }
.destek-chip small { font-weight: 500; font-size: 11px; color: var(--metin-2); }
.destek-chip:hover { color: var(--turuncu); }

/* Hesabım: çerçeveli kutu */
.market-btn { height: 44px; border-radius: 10px; border-color: #C9CED4; }
.market-btn b { font-weight: 700; font-size: 13.5px; }
.market-btn small { font-size: 10.5px; letter-spacing: .02em; }

/* Sepetim: boşken gri, doluyken turuncu */
.sepet-btn {
    height: 44px; border-radius: 10px;
    background: #8C97A2; border-color: #8C97A2; color: #fff;
    display: flex; align-items: center; gap: .55rem;
    padding: 0 1.05rem; text-decoration: none;
    font-size: 13.5px; transition: background var(--gecis), border-color var(--gecis);
}
.sepet-btn b { font-weight: 700; }
.sepet-btn:hover { background: #7A8590; border-color: #7A8590; color: #fff; }
.sepet-btn.dolu { background: var(--turuncu); border-color: var(--turuncu); }
.sepet-btn.dolu:hover { background: var(--turuncu-k); border-color: var(--turuncu-k); }
.sepet-btn .sepet-sayac {
    display: grid; background: var(--turuncu);
    border: 2px solid #fff; color: #fff;
    top: -9px; right: -11px;
}
.sepet-btn.dolu .sepet-sayac { background: var(--navy); }

/* Gökkuşağı şerit — HB imzası */
.gokkusagi {
    height: 4px;
    background: linear-gradient(90deg,
        #FF6000 0%, #FF6000 22%,
        #7B2FBE 22%, #7B2FBE 34%,
        #2E6BE6 34%, #2E6BE6 48%,
        #00B3C7 48%, #00B3C7 62%,
        #00A365 62%, #00A365 76%,
        #F5A623 76%, #F5A623 88%,
        #DD1A31 88%, #DD1A31 100%);
}

/* Kategori barı: gri zemin, ortalanmış, dikey ayraçlı, 2 satır destekli */
.kat-bar { background: var(--bg); border-top: 0; border-bottom: 1px solid var(--cizgi-acik); }
.kat-ic { justify-content: center; }
.kat-ic a {
    padding: .55rem 1.35rem;
    text-align: center; line-height: 1.25;
    font-weight: 600; font-size: 13px;
    border-bottom: 0;
    border-right: 1px solid var(--cizgi);
    transition: color var(--gecis);
}
.kat-ic a:last-child { border-right: 0; }
.kat-ic a:hover, .kat-ic a.aktif { color: var(--turuncu); border-bottom: 0; }
.kat-vurgu { margin-left: 0; }

@media (max-width: 900px) {
    .tepe-linkler { gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
    .tepe-linkler a:nth-child(n+4) { display: none; }
    .destek-chip { display: none; }
    .market-ust .logo { font-size: 21px; }
    .kat-ic { justify-content: flex-start; }
    .kat-ic a br { display: none; }
    .sepet-btn b { display: none; }
    .sepet-btn { padding: 0 .8rem; }
}

/* =========================================================
   MARKA KİMLİĞİ — "Parti & Kutlama"
   HB iskeleti korunur; renk dili bize özgü:
   petrol/cam yeşili (marka) + amber (satın alma aksiyonları)
   ========================================================= */

:root {
    /* TEMA TABANI — Admin → Ayarlar → Görünüm buradaki token değerlerini ezer
       (partials/header.php :root override basar). Petrol/amber tonu gereken yerde
       SABİT HEX KULLANMA — bu değişkenleri kullan ki tema her yerde işlesin. */
    --marka:    #0E6E7C;  /* ana marka: petrol */
    --marka-2:  #16A5B8;  /* açık camgöbeği (gradyan eşi) */
    --marka-buz:#7DD3E0;  /* buz vurgusu (koyu zeminde) */
    --marka-a:  #E7F3F5;  /* pastel zemin */
    --marka-a2: #F0F7F8;  /* daha soluk pastel */
    --marka-k:  #0A5661;  /* hover koyusu */
    --marka-k2: #0B5560;
    --marka-k3: #0E5563;
    --marka-d:  #0C3540;  /* koyu zemin tonları */
    --marka-d2: #12333B;
    --navy:     #123A44;
    --marka-rgb:       14, 110, 124;
    --marka-2-rgb:     22, 165, 184;
    --marka-buz-rgb:   125, 211, 224;
    --marka-golge-rgb: 10, 40, 46;
    --aksiyon:       #F59E0B;  /* aksiyon: amber — sepet/satın al */
    --aksiyon-2:     #E8930A;
    --aksiyon-k:     #D9880A;  /* hover koyusu */
    --aksiyon-k2:    #C7710A;
    --aksiyon-metin: #8A6100;  /* amber zeminde okunur metin */
    --aksiyon-acik:  #F8D48A;
    --aksiyon-acik2: #F8C15C;
    --aksiyon-a:  #FFF8E8;  /* pastel amber zeminler */
    --aksiyon-a2: #FFF3D6;
    --aksiyon-a3: #FFF7EC;
    --aksiyon-a4: #FEF3E0;
    --aksiyon-rgb:       245, 158, 11;
    --aksiyon-2-rgb:     232, 147, 10;
    --aksiyon-3-rgb:     240, 138, 0;
    --aksiyon-metin-rgb: 138, 97, 0;
    /* eski adlar — iskelet bu adları kullanıyor, token tabanına bağlandı */
    --turuncu:   var(--marka);
    --turuncu-k: var(--marka-k);
    --turuncu-a: var(--marka-a);
    --vurgu:     var(--aksiyon);
    --vurgu-k:   var(--aksiyon-k);
}

/* Logo: gradyan damla işareti + iki tonlu wordmark */
.market-ust .logo { display: flex; align-items: center; gap: .5rem; }
.logo-isaret {
    display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(140deg, var(--marka), var(--marka-2));
    color: #fff;
    box-shadow: 0 3px 10px rgba(var(--marka-rgb),.3);
}
.logo-yazi { font-size: 23px; font-weight: 800; letter-spacing: -.03em; color: var(--metin); }
.logo-yazi b { color: var(--marka); font-weight: 800; }
/* Yüklenen logo görseli (Admin → Ayarlar → Görünüm) — yazılı logonun yerine geçer */
.logo-img { display: block; height: 44px; max-width: 230px; object-fit: contain; }

/* Prizma şeridi: camdan geçen ışık tayfı (yumuşak, bize özgü) */
.gokkusagi {
    height: 3px;
    background: linear-gradient(90deg,
        var(--marka) 0%, var(--marka-2) 20%, var(--marka-buz) 38%,
        #C8EAD9 50%,
        var(--aksiyon-acik) 64%, var(--aksiyon) 82%, var(--marka) 100%);
}

/* CTA'lar amber: satın alma aksiyonları sıcak renkte ayrışır */
.btn-amber, .slayt-cta {
    background: var(--vurgu); border-color: var(--vurgu); color: #fff;
    box-shadow: 0 2px 8px rgba(var(--aksiyon-rgb),.3);
}
.btn-amber:hover { background: var(--vurgu-k); border-color: var(--vurgu-k); color: #fff; }

/* Ürün kartı "Sepete Ekle": amber çerçeve, hover'da dolar */
.urun-kart .urun-kart-aksiyon { border-color: var(--vurgu); color: var(--vurgu-k); background: #fff; box-shadow: none; }
.urun-kart .urun-kart-aksiyon:hover { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }

/* Sepetim: boşken beyaz/petrol çerçeve, doluyken amber */
.sepet-btn { background: #fff; border: 1px solid #C9CED4; color: var(--metin); }
.sepet-btn:hover { background: #fff; border-color: var(--turuncu); color: var(--turuncu); }
.sepet-btn .sepet-sayac { background: var(--vurgu); border-color: #fff; color: #fff; }
.sepet-btn.dolu { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.sepet-btn.dolu:hover { background: var(--vurgu-k); border-color: var(--vurgu-k); color: #fff; }
.sepet-btn.dolu .sepet-sayac { background: var(--navy); }

/* Köşe indirim etiketi amber, yüzde pili kırmızı kalır */
.tl-indirim { background: var(--vurgu); border-radius: 6px 6px 6px 0; }

/* Hikâye çemberleri: petrol halka, cam tonlu zeminler */
.hikaye-cember { border-color: var(--marka-2); }
.hikaye-bos { background: linear-gradient(140deg, var(--marka), var(--marka-2)); }
.hikaye:nth-child(2n) .hikaye-bos { background: linear-gradient(140deg, var(--navy), var(--marka)); }
.hikaye:nth-child(3n) .hikaye-bos { background: linear-gradient(140deg, var(--aksiyon), var(--aksiyon-acik2)); }
.hikaye:nth-child(4n) .hikaye-bos { background: linear-gradient(140deg, var(--marka-2), var(--marka-buz)); }

/* Slider/mini/promo zeminleri: cam degrade */
.slayt, .mini-banner { background: linear-gradient(140deg, var(--navy) 0%, var(--marka) 60%, var(--marka-2) 110%); }
.hero-doku {
    background-image:
        radial-gradient(480px 260px at 88% -10%, rgba(var(--aksiyon-rgb),.28), transparent 60%),
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
}
.mini-ok { color: var(--aksiyon-acik2); }
.promo-turuncu { background: linear-gradient(135deg, var(--marka), var(--marka-2)); }
.promo-yesil   { background: linear-gradient(135deg, #00875A, #00B87C); }
.promo-mor     { background: linear-gradient(135deg, var(--navy), #2E6B8A); }
.promo-mavi    { background: linear-gradient(135deg, var(--aksiyon-k), #F5B93C); }

/* Arama: nötr çerçeve, odakta marka rengi */
.arama { border-color: #B9C1C9; }
.arama:focus-within { border-color: var(--turuncu); box-shadow: 0 0 0 3px rgba(var(--marka-rgb),.14); }

/* Ödeme sayfası ana butonu da amber olsun (btn-amber zaten) — petrol buton ikincil kalır */
.btn-petrol { background: var(--turuncu); border-color: var(--turuncu); }
.btn-petrol:hover { background: var(--turuncu-k); border-color: var(--turuncu-k); }

/* =========================================================
   ARAMA KUTUSU DÜZELTME
   Global input/buton kuralları hap aramanın içine sızıyordu.
   ========================================================= */
.arama input,
.arama input:focus {
    border: 0;
    border-radius: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 .9rem 0 .35rem;
    height: 100%;
    width: auto;
}
.arama button.arama-ikon,
.arama button.arama-ikon:hover {
    background: transparent;
    border: 0;
    padding: 0 .25rem 0 .85rem;
    color: var(--metin-3);
}
.arama button.arama-ikon:hover { color: var(--turuncu); }

/* Kategori barı: tek/iki satırlı öğeler aynı yükseklikte dursun */
.kat-ic { align-items: stretch; }
.kat-ic a { display: flex; align-items: center; justify-content: center; min-height: 46px; }

/* =========================================================
   HİKÂYE ÇİPLERİ v2 — dolgulu kare + iki satır etiket (HB)
   ========================================================= */
.hikaye { width: 96px; gap: .1rem; }
.hikaye-kare {
    display: grid; place-items: center;
    width: 88px; height: 88px;
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(150deg, var(--vurgu) 0%, #F7B23B 100%);
    box-shadow: 0 2px 8px rgba(var(--aksiyon-rgb),.28);
    transition: transform var(--gecis), box-shadow var(--gecis);
    margin-bottom: .3rem;
}
.hikaye:hover .hikaye-kare { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--aksiyon-rgb),.35); }
/* Aralarda marka renkli kareler — tekdüzeliği kırar */
.hikaye:nth-child(3n) .hikaye-kare { background: linear-gradient(150deg, var(--marka), var(--marka-2)); box-shadow: 0 2px 8px rgba(var(--marka-rgb),.28); }
.hikaye:nth-child(3n):hover .hikaye-kare { box-shadow: 0 8px 18px rgba(var(--marka-rgb),.35); }

.hikaye-kare img { width: 100%; height: 100%; object-fit: cover; }
.hikaye-metin {
    padding: .4rem .5rem; text-align: center;
    color: #fff; font-size: 12px; font-weight: 800;
    line-height: 1.25; letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.hikaye-ust {
    font-size: 10px; font-weight: 500; color: var(--metin-3);
    text-align: center; line-height: 1.2; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 96px;
}
.hikaye-alt {
    font-size: 11px; font-weight: 700; color: var(--metin);
    text-align: center; line-height: 1.2; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 96px;
}
.hikaye:hover .hikaye-alt { color: var(--turuncu); }
/* eski halka stili devre dışı */
.hikaye-cember, .hikaye-bos, .hikaye-ad { all: unset; }

@media (max-width: 560px) {
    .hikaye { width: 78px; }
    .hikaye-kare { width: 72px; height: 72px; border-radius: 13px; }
    .hikaye-ust, .hikaye-alt { max-width: 78px; }
}

/* =========================================================
   ŞERİT + KATEGORİ BARI (ekran görüntüsü birebir)
   ========================================================= */

/* Keskin bloklu renk şeridi: uzun amber açılış + palet blokları */
.gokkusagi {
    height: 7px;
    background: linear-gradient(90deg,
        var(--aksiyon) 0%,   var(--aksiyon) 38%,
        var(--marka-2) 38%,  var(--marka-2) 52%,
        #7B2FBE 52%,  #7B2FBE 66%,
        #00A365 66%,  #00A365 80%,
        var(--marka) 80%,  var(--marka) 92%,
        var(--navy) 92%,  var(--navy) 100%);
}

/* Kategori barı: daha yüksek, ortalı, kısa dikey ayraçlar */
.kat-bar { background: #F5F5F5; border-bottom: 1px solid var(--cizgi-acik); }
.kat-ic a {
    position: relative;
    min-height: 56px;
    padding: .6rem 1.7rem;
    font-size: 13.5px; font-weight: 600; color: #3C4650;
    border-right: 0;
}
.kat-ic a::after {
    content: '';
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 55%;
    background: #D9DCE0;
}
.kat-ic a:last-child::after { display: none; }
.kat-ic a:hover, .kat-ic a.aktif { color: var(--turuncu); }

@media (max-width: 900px) {
    .kat-ic a { min-height: 44px; padding: .5rem 1rem; }
}

/* =========================================================
   HİKÂYE KARTLARI v3 — etiketler kartın İÇİNDE (HB birebir)
   ========================================================= */
.hikaye {
    width: 118px; flex: none;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: linear-gradient(160deg, var(--aksiyon) 0%, #F08A00 100%);
    border-radius: 16px;
    padding: 7px 7px 9px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(var(--aksiyon-3-rgb),.25);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.hikaye:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--aksiyon-3-rgb),.35); }

.hikaye-gorsel {
    display: grid; place-items: center;
    width: 104px; height: 78px;
    border-radius: 11px; overflow: hidden;
    margin-bottom: 5px;
}
.hikaye-gorsel img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; background: #fff; }
.hikaye-metin {
    text-align: center; color: #fff;
    font-size: 13px; font-weight: 800; line-height: 1.2;
    letter-spacing: .01em; padding: 0 .2rem;
    text-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.hikaye-ust {
    color: rgba(255,255,255,.92);
    font-size: 10px; font-weight: 500; line-height: 1.25;
    text-align: center; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 104px;
}
.hikaye-alt {
    color: #fff !important;
    font-size: 11.5px; font-weight: 800; line-height: 1.25;
    text-align: center; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 104px;
}
.hikaye:hover .hikaye-alt { color: #fff !important; }
.hikaye-serit { gap: .8rem; }
/* önceki sürümlerin kare stilleri devre dışı */
.hikaye-kare { all: unset; }
.hikaye:nth-child(3n) .hikaye-kare { all: unset; }

@media (max-width: 560px) {
    .hikaye { width: 98px; padding: 6px 6px 8px; border-radius: 13px; }
    .hikaye-gorsel { width: 86px; height: 64px; }
    .hikaye-ust, .hikaye-alt { max-width: 86px; }
}

/* =========================================================
   BANNER ALANI PRO — cam kompozisyonu (görselsiz de dolu durur)
   ========================================================= */

/* Slider zemin: ızgara dokusu yerine katmanlı cam ışığı */
.slayt { background: linear-gradient(125deg, #0C2E38 0%, var(--marka-k3) 52%, #0F7B8C 100%); }
.hero-doku {
    background-image:
        radial-gradient(560px 340px at 84% 14%, rgba(var(--marka-2-rgb),.45), transparent 62%),
        radial-gradient(430px 300px at 8% 112%, rgba(var(--aksiyon-rgb),.20), transparent 60%),
        linear-gradient(105deg, transparent 44%, rgba(255,255,255,.045) 48%, rgba(255,255,255,.09) 51%, rgba(255,255,255,.045) 54%, transparent 58%);
    background-size: auto;
}

/* Sağ tarafta filigran ikon + halkalar — boşluğu tasarıma çevirir */
.slayt-dekor {
    position: absolute; right: 6%; top: 50%;
    width: 250px; height: 250px;
    transform: translateY(-50%);
    display: grid; place-items: center;
    color: rgba(255,255,255,.14);
    pointer-events: none;
}
.slayt-dekor::before, .slayt-dekor::after {
    content: ''; position: absolute; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.13);
}
.slayt-dekor::before { inset: 0; }
.slayt-dekor::after { inset: -38px; border-color: rgba(255,255,255,.06); }

/* Slayt tipografisi: daha güçlü hiyerarşi */
.slayt-yazi { gap: .65rem; max-width: 600px; }
.slayt-yazi strong { font-size: clamp(22px, 3.1vw, 38px); }
.slayt-yazi em { font-size: clamp(12.5px, 1.4vw, 15px); line-height: 1.55; color: rgba(255,255,255,.85); }
.slayt-cta { padding: .62rem 1.5rem; font-size: 13.5px; border-radius: 10px; margin-top: .55rem; }

/* Mini bannerlar: içerik yerleşimi + dekor ikonu + pill buton */
.mini-banner {
    background: linear-gradient(145deg, var(--marka-d) 0%, var(--marka) 60%, #11919F 115%);
    align-items: stretch;
}
.mini-banner:nth-child(2) {
    background: linear-gradient(145deg, var(--navy) 0%, #0E5C6B 55%, #0E8FA0 115%);
}
.mini-yazi { margin-top: auto; padding: 1.05rem 1.15rem 1.1rem; gap: .2rem; max-width: 78%; }
.mini-yazi strong { font-size: 15.5px; letter-spacing: -.01em; }
.mini-yazi em { font-size: 11.5px; line-height: 1.45; }
.mini-ok {
    display: inline-flex; align-items: center;
    width: max-content;
    margin-top: .55rem; padding: .3rem .75rem;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 99px;
    color: #fff; font-size: 11px; font-weight: 700;
    transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.mini-banner:hover .mini-ok {
    background: var(--vurgu); border-color: var(--vurgu);
    transform: translateX(3px);
}
.mini-dekor {
    position: absolute; right: -6px; top: 14px;
    color: rgba(255,255,255,.11);
    transform: rotate(-10deg);
    transition: transform .35s ease;
    pointer-events: none;
}
.mini-dekor::before {
    content: ''; position: absolute;
    inset: -26px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.10);
}
.mini-banner:hover .mini-dekor { transform: rotate(-2deg) scale(1.05); }

/* Avantaj kartları: hover + marka tonlu ikon */
.avantaj { transition: box-shadow var(--gecis), transform var(--gecis); }
.avantaj:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.avantaj-ikon { background: var(--turuncu-a); color: var(--turuncu); border-radius: 10px; }

/* =========================================================
   SLIDER / ŞERİT OKLARI PRO
   ========================================================= */
.slider-ok {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: #fff; color: var(--metin);
    border: 0; border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    font-size: 0; /* eski metin karakteri kalıntısına karşı */
    opacity: 0; pointer-events: none;
    transition: opacity var(--gecis), transform var(--gecis), color var(--gecis), box-shadow var(--gecis);
}
.slider:hover .slider-ok, .slider:focus-within .slider-ok {
    opacity: 1; pointer-events: auto;
}
.slider-ok:hover {
    background: #fff; color: var(--turuncu);
    transform: translateY(-50%) scale(1.09);
    box-shadow: 0 6px 22px rgba(0,0,0,.24);
}
.slider-ok:active { transform: translateY(-50%) scale(.96); }
.slider-ok.geri { left: 16px; }
.slider-ok.ileri { right: 16px; }

/* Dokunmatik cihazlarda hover yok — oklar hep görünür (900px altında zaten gizli) */
@media (hover: none) {
    .slider-ok { opacity: 1; pointer-events: auto; }
}

/* Ürün şeridi okları: SVG hizalı, hover'da dolgu */
.serit-ok {
    display: grid; place-items: center;
    font-size: 0;
    color: var(--metin-2);
    transition: all var(--gecis);
}
.serit-ok:hover {
    background: var(--turuncu); border-color: var(--turuncu); color: #fff;
}
.serit-ok:active { transform: scale(.94); }

/* =========================================================
   HEADER KİMLİK AYRIŞMASI — Arya Parti Süs mağaza kimliği
   ========================================================= */

/* Keskin renk blokları yerine tek akışkan prizma çizgisi (cam teması) */
.gokkusagi {
    height: 3px;
    background: linear-gradient(90deg,
        var(--marka) 0%, var(--marka-2) 30%, var(--marka-buz) 48%,
        var(--aksiyon-acik) 62%, var(--aksiyon) 78%, var(--marka) 100%);
}

/* Kategori barı: koyu petrol — bize özgü, HB'de asla koyu bar yok */
.kat-bar { background: linear-gradient(180deg, var(--marka-k3), #0C4753); border-bottom: 0; }
.kat-ic { justify-content: flex-start; }
.kat-ic a {
    min-height: 44px;
    padding: .45rem 1.15rem;
    color: rgba(255,255,255,.88);
    font-size: 13px; font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.kat-ic a br { display: none; } /* tek satır */
.kat-ic a::after { display: none; } /* ayraç çizgileri kalksın */
.kat-ic a:hover { color: #fff; background: rgba(255,255,255,.07); border-bottom-color: var(--aksiyon); }
.kat-ic a.aktif { color: #fff; border-bottom-color: var(--aksiyon); }
.kat-ic a:last-child { color: var(--aksiyon-acik2); } /* İndirimli Ürünler vurgusu */
.kat-ic a:last-child:hover { color: #FFD98A; }

/* Arama: tam yuvarlak hap — HB'nin köşeli kutusundan ayrışır */
.arama { border-radius: 999px; border-color: #C5CCD3; }
.arama:focus-within { border-color: var(--turuncu); }
.arama-ikon { padding-left: 1.05rem; }

/* Hesap butonu da hapla uyumlu yumuşak köşe */
.market-btn, .sepet-btn { border-radius: 999px; padding-left: 1.05rem; padding-right: 1.15rem; }

/* Sepetim: amber yerine marka petrol degradesi (HB turuncusundan ayrış) */
.sepet-btn.dolu { background: linear-gradient(140deg, var(--marka), var(--marka-2)); border-color: var(--marka); }
.sepet-btn.dolu:hover { background: linear-gradient(140deg, var(--marka-k), #12909F); border-color: var(--marka-k); }
.sepet-btn .sepet-sayac { background: var(--vurgu); }
.sepet-btn.dolu .sepet-sayac { background: var(--vurgu); border-color: #fff; }

/* Kategori barı: linkler ortalı */
.kat-ic { justify-content: center; }
@media (max-width: 900px) {
    .kat-ic { justify-content: flex-start; } /* mobilde kaydırma için sola */
}

/* =========================================================
   FOOTER v2 — Arya Parti Süs kimliği
   ========================================================= */
.ft {
    margin-top: 2.8rem;
    background: var(--marka-a2); /* açık cam tonu — HB'nin kremi gibi sıcak ama bize özgü */
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--marka), var(--marka-2) 35%, var(--aksiyon-acik) 60%, var(--aksiyon) 85%, var(--marka)) 1;
    color: var(--metin-2);
}
.ft-izgara {
    display: grid; gap: 2.2rem;
    grid-template-columns: 2fr 2fr 2fr 2.6fr;
    padding: 2.6rem 1rem 2rem;
}
.ft-sutun h3 { font-size: 14px; font-weight: 800; color: var(--marka); margin: 0 0 1rem; }

.ft-linkler { display: flex; flex-direction: column; gap: .6rem; }
.ft-linkler a { color: var(--metin-2); text-decoration: none; font-size: 13px; transition: color var(--gecis), padding-left var(--gecis); }
.ft-linkler a:hover { color: var(--marka); padding-left: .3rem; }

/* Sosyal medya: koyu yuvarlak ikonlar + etiket (HB düzeni) */
.ft-sosyal { display: flex; flex-direction: column; gap: .7rem; }
.ft-sosyal a {
    display: flex; align-items: center; gap: .65rem;
    color: var(--metin-2); text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: color var(--gecis);
}
.ft-sosyal a:hover { color: var(--marka); }
.ft-sosyal-yuvarlak {
    display: grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--navy); color: #fff;
    transition: background var(--gecis), transform var(--gecis);
}
.ft-sosyal a:hover .ft-sosyal-yuvarlak { background: var(--marka); transform: scale(1.07); }

/* Soru sütunu */
.ft-soru-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; max-width: 280px;
    padding: .7rem 1.2rem;
    border: 1.5px solid #B8CDD2; border-radius: 10px;
    background: #fff; color: var(--metin);
    font-size: 13.5px; font-weight: 700; text-decoration: none;
    transition: border-color var(--gecis), color var(--gecis), box-shadow var(--gecis);
}
.ft-soru-btn:hover { border-color: var(--marka); color: var(--marka); box-shadow: var(--golge); }

.ft-veya {
    display: flex; align-items: center; gap: .8rem;
    max-width: 280px; margin: .9rem 0;
    color: var(--metin-3); font-size: 12px;
}
.ft-veya::before, .ft-veya::after { content: ''; flex: 1; height: 1px; background: #CFDEE2; }

.ft-cagri-etiket { margin: 0 0 .2rem; font-size: 13px; }
.ft-telefon {
    font-size: 26px; font-weight: 800; letter-spacing: -.01em;
    color: var(--metin); text-decoration: none;
}
.ft-telefon:hover { color: var(--marka); }
.ft-wa { display: inline-flex; align-items: center; gap: .45rem; color: #00875A; font-weight: 700; font-size: 13px; text-decoration: none; }
.ft-wa:hover { text-decoration: underline; }

/* Ödeme/güven rozetleri: ortalı şerit */
.ft-rozetler {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
    padding-top: .6rem; padding-bottom: 1.8rem;
    border-top: 1px solid #DFEBEC; margin-top: .4rem; padding-top: 1.6rem;
}
.ft-rozet {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .32rem .7rem;
    background: #fff; border: 1px solid #D8E4E6; border-radius: 7px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
    color: var(--metin-2);
}
.ft-rozet.yesil { color: #00875A; border-color: #BFE3D3; }

/* Alt imza şeridi */
.ft-imza { background: var(--navy); color: rgba(239,246,245,.75); }
.ft-imza-ic {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .9rem 1rem; font-size: 12px;
}
.ft-imza-marka { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; }
.ft-imza .logo-isaret { width: 24px; height: 24px; border-radius: 6px; }

@media (max-width: 980px) { .ft-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft-izgara { grid-template-columns: 1fr; gap: 1.8rem; } }

/* Banka/kart logoları şeridi */
.ft-rozetler { align-items: center; gap: .4rem 1.3rem; }
.ft-banka {
    height: 22px; width: auto; max-width: 92px;
    object-fit: contain; display: inline-block;
    opacity: .85; transition: opacity var(--gecis), transform var(--gecis);
}
.ft-banka:hover { opacity: 1; transform: scale(1.06); }
@media (max-width: 680px) {
    .ft-banka { height: 18px; max-width: 72px; }
}

/* =========================================================
   FOOTER DESTEK KARTI — üç kanal tek zarif kutuda
   ========================================================= */
.destek-kart {
    background: #fff;
    border: 1px solid #D8E4E6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--golge);
    max-width: 320px;
}
.destek-satir {
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem 1rem;
    text-decoration: none; color: var(--metin);
    border-bottom: 1px solid var(--cizgi-acik);
    transition: background var(--gecis);
}
.destek-satir:last-child { border-bottom: 0; }
.destek-satir:hover { background: #F4FAFB; }

.destek-ikon {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    transition: transform var(--gecis);
}
.destek-satir:hover .destek-ikon { transform: scale(1.08); }
.destek-ikon.petrol { background: var(--marka-a); color: var(--marka); }
.destek-ikon.amber  { background: var(--aksiyon-a4); color: var(--aksiyon-k); }
.destek-ikon.yesil  { background: #E6F6EF; color: #00875A; }

.destek-metin { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.destek-metin b { font-size: 13.5px; font-weight: 700; }
.destek-metin small { font-size: 11px; color: var(--metin-3); line-height: 1.35; }
.destek-tel { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }

.destek-ok {
    color: var(--metin-3); flex: none;
    transition: transform var(--gecis), color var(--gecis);
}
.destek-satir:hover .destek-ok { transform: translateX(3px); color: var(--marka); }

/* eski soru sütunu stilleri artık kullanılmıyor */
.ft-soru-btn, .ft-veya, .ft-cagri-etiket, .ft-telefon, .ft-wa { all: unset; }

/* =========================================================
   FOOTER SORU SÜTUNU — HB düzeni: ortalı, veya ayraçlı
   (önceki all:unset sonrası yeniden tanım)
   ========================================================= */
.ft-soru { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-soru h3 { align-self: center; }

.ft-soru-btn {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    width: 100%; max-width: 270px;
    padding: .68rem 1.2rem;
    border: 1.5px solid #9DB4BA; border-radius: 10px;
    background: #fff; color: var(--metin);
    font-size: 13.5px; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: border-color var(--gecis), color var(--gecis), box-shadow var(--gecis);
}
.ft-soru-btn:hover { border-color: var(--marka); color: var(--marka); box-shadow: none; }

.ft-veya {
    display: flex; align-items: center; gap: .8rem;
    width: 100%; max-width: 270px;
    margin: 1rem 0;
    color: var(--metin-3); font-size: 12px;
}
.ft-veya span { flex: none; }
.ft-veya::before, .ft-veya::after { content: ''; flex: 1; height: 1px; background: #CBDCE0; }

.ft-cagri-etiket { display: block; margin: 0 0 .25rem; font-size: 13.5px; color: var(--metin-2); }

.ft-telefon {
    display: inline-block;
    font-size: 27px; font-weight: 800; letter-spacing: .01em;
    color: var(--metin); text-decoration: none; cursor: pointer;
    transition: color var(--gecis);
}
.ft-telefon:hover { color: var(--marka); }

.ft-wa {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--metin); font-size: 13.5px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: color var(--gecis);
}
.ft-wa .ikn { color: #00875A; }
.ft-wa:hover { color: #00875A; }

/* destek kartı stilleri artık kullanılmıyor */
.destek-kart, .destek-satir, .destek-ikon, .destek-metin, .destek-ok { all: unset; }

/* Footer alt imza: koyu şerit yerine aynı zeminde sade ortalı satır */
.ft-imza { background: transparent; border-top: 1px solid #DFEBEC; }
.ft-imza-ic {
    justify-content: center; text-align: center;
    padding: 1.05rem 1rem;
    font-size: 12px; color: var(--metin-3);
    gap: .6rem;
}
.ft-imza-nokta { color: #B9CDD1; }
.ft-yasal-linkler { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem .7rem; }
.ft-yasal-linkler a { color: var(--metin-2); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.ft-yasal-linkler a:hover { color: var(--marka); text-decoration: underline; }
@media (max-width: 680px) {
    .ft-imza-nokta { display: none; }
    .ft-imza-ic { flex-direction: column; gap: .25rem; }
    .ft-yasal-linkler { margin-top: .35rem; }
}

/* =========================================================
   PROMO ŞERİDİ v2 — cam dili: doku + filigran + pill
   ========================================================= */
.promo-kart {
    min-height: 118px;
    padding: 1rem 1.15rem;
    align-items: flex-end;
}
/* çapraz ışık huzmesi — slider ile aynı dil */
.promo-kart::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(220px 130px at 85% -20%, rgba(255,255,255,.16), transparent 65%),
        linear-gradient(105deg, transparent 45%, rgba(255,255,255,.06) 50%, transparent 56%);
    pointer-events: none;
}
.promo-yazi { gap: .15rem; }
.promo-yazi strong { font-size: 14.5px; }
.promo-yazi em { font-size: 11px; }
.promo-yazi .mini-ok { margin-top: .45rem; padding: .24rem .65rem; font-size: 10.5px; }
.promo-kart:hover .mini-ok { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.5); transform: translateX(3px); }

.promo-dekor {
    position: absolute; right: -4px; top: 8px;
    color: rgba(255,255,255,.14);
    transform: rotate(-10deg);
    transition: transform .35s ease;
    pointer-events: none;
}
.promo-dekor::before {
    content: ''; position: absolute;
    inset: -20px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.11);
}
.promo-kart:hover .promo-dekor { transform: rotate(-2deg) scale(1.06); }

/* Palet: marka ailesi — rastgele renkler yerine tutarlı seri */
.promo-turuncu { background: linear-gradient(145deg, var(--marka-d) 0%, var(--marka) 65%, #12919F 115%); }
.promo-yesil   { background: linear-gradient(145deg, var(--marka-k3) 0%, #128F9E 70%, var(--marka-2) 115%); }
.promo-mor     { background: linear-gradient(145deg, var(--navy) 0%, #1B5566 70%, #26707F 115%); }
.promo-mavi    { background: linear-gradient(145deg, #C97F06 0%, var(--aksiyon) 70%, #F8B93C 115%); } /* tek sıcak vurgu */

/* Promo alanı: 3'lü fotoğraf banner düzeni (HB oranı ~3:1) */
.promo-serit { grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.promo-kart { aspect-ratio: 3 / 1.05; min-height: 0; }
.promo-kart.gorselli { padding: 0; }
.promo-kart.gorselli::before { display: none; }
.promo-kart.gorselli img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.promo-kart.gorselli:hover img { transform: scale(1.03); }
@media (max-width: 900px) {
    .promo-serit { grid-template-columns: 1fr; }
    .promo-kart { aspect-ratio: 3 / 1; }
}

/* Kampanya alanı boş yuvası — yalnızca admin görür */
.promo-kart.promo-bos {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .25rem; padding: 1rem;
    background: #fff;
    border: 2px dashed #C5CCD3;
    box-shadow: none;
    color: var(--metin-3); text-align: center;
    transition: border-color var(--gecis), color var(--gecis);
}
.promo-bos b { font-size: 13px; font-weight: 700; color: var(--metin-2); }
.promo-bos small { font-size: 11px; }
.promo-bos:hover { border-color: var(--turuncu); color: var(--turuncu); transform: none; }
.promo-bos:hover b { color: var(--turuncu); }

/* =========================================================
   KATEGORİ BARI v3 — ikonlu hap linkler, camsı derinlik
   ========================================================= */
.kat-bar {
    position: relative;
    background:
        radial-gradient(600px 90px at 50% -40px, rgba(var(--marka-2-rgb),.35), transparent 70%),
        linear-gradient(180deg, #0F5966, #0B4450);
    border-bottom: 0;
}
/* alt kenarda incecik cam parıltısı */
.kat-bar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--marka-buz-rgb),.45), transparent);
}
.kat-ic { padding-top: .4rem; padding-bottom: .4rem; }
.kat-ic a {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 0;
    margin: 0 .12rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    border-bottom: 0;
    color: rgba(255,255,255,.86);
    font-size: 13px; font-weight: 600;
    transition: background var(--gecis), color var(--gecis);
}
.kat-ic a .ikn { opacity: .72; transition: opacity var(--gecis), transform var(--gecis); }
.kat-ic a:hover, .kat-ic a.aktif {
    background: rgba(255,255,255,.12);
    color: #fff; border-bottom: 0;
}
.kat-ic a:hover .ikn { opacity: 1; transform: scale(1.1); }

/* İndirimli Ürünler: amber hap — barın odak noktası */
.kat-ic a.kat-firsat {
    background: linear-gradient(140deg, var(--aksiyon), #F7B23B);
    color: var(--navy); font-weight: 800;
    box-shadow: 0 2px 10px rgba(var(--aksiyon-rgb),.35);
    margin-left: .5rem;
}
.kat-ic a.kat-firsat .ikn { opacity: 1; }
.kat-ic a.kat-firsat:hover {
    background: linear-gradient(140deg, var(--aksiyon-2), #F5A825);
    color: #0C2E38;
    box-shadow: 0 4px 14px rgba(var(--aksiyon-rgb),.45);
}
/* eski son-eleman rengi kuralını etkisizleştir */
.kat-ic a:last-child { color: var(--navy); }
.kat-ic a:last-child:hover { color: #0C2E38; }

/* =========================================================
   KATEGORİ BARI v4 — rafine & büyük tipografi
   İkon yok, hap yok: tam yükseklik linkler,
   hover'da ortadan açılan amber çizgi.
   ========================================================= */
.kat-bar {
    background: linear-gradient(180deg, #10515E, #0C4450);
}
.kat-bar::after { background: linear-gradient(90deg, transparent, rgba(var(--marka-buz-rgb),.3), transparent); }
.kat-ic { padding-top: 0; padding-bottom: 0; }
.kat-ic a {
    position: relative;
    display: inline-flex; align-items: center;
    min-height: 54px;
    margin: 0;
    padding: 0 1.6rem;
    border-radius: 0;
    background: none;
    color: rgba(255,255,255,.92);
    font-size: 14.5px; font-weight: 600; letter-spacing: .015em;
    transition: color var(--gecis), background var(--gecis);
}
.kat-ic a:hover, .kat-ic a.aktif { background: rgba(255,255,255,.05); color: #fff; }

/* ortadan açılan amber çizgi */
.kat-ic a::before {
    content: ''; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--aksiyon);
    transform: scaleX(0);
    transition: transform .22s ease;
}
.kat-ic a:hover::before, .kat-ic a.aktif::before { transform: scaleX(1); }

/* İndirimli Ürünler: altın metin, sade ve şık */
.kat-ic a.kat-firsat,
.kat-ic a:last-child { color: var(--aksiyon-acik2); font-weight: 700; box-shadow: none; margin-left: 0; background: none; }
.kat-ic a.kat-firsat:hover,
.kat-ic a:last-child:hover { color: #FFD98A; background: rgba(var(--aksiyon-rgb),.08); }

@media (max-width: 900px) {
    .kat-ic a { min-height: 46px; padding: 0 1.1rem; font-size: 13.5px; }
    .kat-ic a::before { left: 1.1rem; right: 1.1rem; }
}

/* =========================================================
   KATEGORİ MENÜSÜ v5 — beyaz, header'la bütünleşik
   Koyu levha kalktı; menü header'ın doğal devamı.
   ========================================================= */
.kat-bar {
    background: #FFFFFF;
    border-top: 1px solid var(--cizgi-acik);
}
.kat-bar::after { display: none; }
.kat-ic { justify-content: center; }
.kat-ic a {
    position: relative;
    display: inline-flex; align-items: center;
    min-height: 50px;
    padding: 0 1.5rem;
    background: none; border-radius: 0;
    color: #3C4650;
    font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
    transition: color var(--gecis);
}
.kat-ic a:hover, .kat-ic a.aktif { background: none; color: var(--marka); }

/* ortadan açılan petrol çizgi */
.kat-ic a::before {
    content: ''; position: absolute; left: 1.5rem; right: 1.5rem; bottom: -1px;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--marka);
    transform: scaleX(0);
    transition: transform .22s ease;
}
.kat-ic a:hover::before, .kat-ic a.aktif::before { transform: scaleX(1); }

/* İndirimli Ürünler: sıcak vurgu, çizgisi de amber */
.kat-ic a.kat-firsat,
.kat-ic a:last-child { color: var(--aksiyon-2); font-weight: 700; }
.kat-ic a.kat-firsat:hover,
.kat-ic a:last-child:hover { color: var(--aksiyon-k); background: none; }
.kat-ic a.kat-firsat::before { background: var(--aksiyon); }

/* prizma çizgisi header'ın bitişinde — biraz daha belirgin */
.gokkusagi { height: 3px; }

@media (max-width: 900px) {
    .kat-ic { justify-content: flex-start; }
    .kat-ic a { min-height: 44px; padding: 0 1rem; font-size: 13.5px; }
    .kat-ic a::before { left: 1rem; right: 1rem; }
}

/* =========================================================
   KATEGORİ MENÜSÜ v6 — "Tüm Kategoriler" butonu + linkler
   ========================================================= */
.kat-ic { justify-content: flex-start; align-items: center; gap: .4rem; padding: .55rem 1rem; overflow: visible; }

.kat-acilir { position: relative; margin-right: .9rem; }
.kat-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    height: 42px; padding: 0 1.15rem;
    border: 0; border-radius: 10px;
    background: linear-gradient(140deg, var(--marka), #10829A);
    color: #fff; font: 700 14px 'Figtree', sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(var(--marka-rgb),.28);
    transition: box-shadow var(--gecis), filter var(--gecis);
}
.kat-btn:hover { filter: brightness(1.07); box-shadow: 0 4px 14px rgba(var(--marka-rgb),.38); }
.kat-btn .ikn:last-child { transition: transform .2s ease; }
.kat-btn[aria-expanded="true"] .ikn:last-child { transform: rotate(180deg); }

.kat-menu {
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
    min-width: 265px;
    background: #fff;
    border: 1px solid var(--cizgi-acik);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(37,51,66,.16);
    padding: .45rem;
    animation: menu-acil .18s ease;
}
@keyframes menu-acil { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kat-menu a {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .7rem;
    border-radius: 8px;
    color: var(--metin); text-decoration: none;
    font-size: 13.5px; font-weight: 600;
    transition: background var(--gecis), color var(--gecis);
}
.kat-menu a:hover { background: #EDF6F7; color: var(--marka); }
.kat-menu-ikon {
    display: grid; place-items: center; flex: none;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--marka-a); color: var(--marka);
}
.kat-menu a:hover .kat-menu-ikon { background: var(--marka); color: #fff; }
.kat-menu-firsat { color: var(--aksiyon-k) !important; }
.kat-menu-firsat .kat-menu-ikon { background: var(--aksiyon-a4); color: var(--aksiyon-k); }
.kat-menu-firsat:hover { background: var(--aksiyon-a4) !important; }
.kat-menu-firsat:hover .kat-menu-ikon { background: var(--aksiyon) !important; color: #fff !important; }

/* Sağdaki düz linkler */
.kat-ic > a {
    position: relative;
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 42px; padding: 0 1.05rem;
    color: #3C4650; font-size: 14px; font-weight: 600;
    border-radius: 9px; background: none;
    transition: background var(--gecis), color var(--gecis);
}
.kat-ic > a::before { display: none; }
.kat-ic > a:hover { background: #F1F5F6; color: var(--marka); }
.kat-ic > a.kat-firsat { color: var(--aksiyon-2); font-weight: 700; }
.kat-ic > a.kat-firsat:hover { background: var(--aksiyon-a4); color: var(--aksiyon-k); }
.kat-ic > a.kat-firsat .ikn { opacity: 1; }

@media (max-width: 900px) {
    .kat-ic { overflow-x: auto; }
    .kat-acilir { position: static; }
    .kat-menu { left: 1rem; right: 1rem; min-width: 0; }
    .kat-btn { height: 38px; padding: 0 .9rem; font-size: 13px; white-space: nowrap; }
    .kat-ic > a { white-space: nowrap; }
}

/* =========================================================
   KATEGORİ PANELİ DÜZELTME
   Eski bar kuralları (justify-center, min-height) panel
   satırlarına sızıyordu — kesin seçicilerle sıfırlanıyor.
   ========================================================= */
.kat-acilir .kat-menu a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: .55rem .7rem;
    font-size: 13.5px;
    border-radius: 8px;
}
.kat-acilir .kat-menu a::before, .kat-acilir .kat-menu a::after { display: none; }
/* İndirimli satırının üstüne ince ayraç */
.kat-acilir .kat-menu .kat-menu-firsat {
    margin-top: .3rem;
    border-top: 1px solid var(--cizgi-acik);
    border-radius: 0 0 8px 8px;
    padding-top: .65rem;
}

/* =========================================================
   ANASAYFA DOLGUNLUK PAKETİ
   ========================================================= */

/* ---- Arya Parti Süs varsayılan karşılama vitrini ---- */
.arya-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0,1.06fr) minmax(390px,.94fr); align-items: center; gap: 2rem;
    min-height: 390px; margin-top: 1.15rem; padding: 2.6rem 3rem;
    border: 1px solid var(--marka-a); border-radius: 22px;
    background:
        radial-gradient(circle at 82% 4%, rgba(255,255,255,.2) 0 8%, transparent 8.3%),
        radial-gradient(circle at 91% 82%, rgba(var(--aksiyon-rgb),.2) 0 12%, transparent 12.3%),
        linear-gradient(118deg,var(--marka-d) 0%,var(--marka) 56%,var(--marka-2) 100%);
    color: #fff;
}
.arya-hero::before { content:""; position:absolute; left:-100px; bottom:-150px; width:340px; height:340px; border:58px solid rgba(255,255,255,.035); border-radius:50%; }
.arya-hero-metin,.arya-hero-kolaj { position:relative; z-index:1; }
.arya-hero-etiket { display:inline-flex; align-items:center; gap:.45rem; color:var(--aksiyon-acik); font-size:11px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.arya-hero-metin h2 { max-width:650px; margin:.8rem 0 .75rem; color:#fff; font-size:clamp(36px,4.1vw,54px); line-height:1.02; letter-spacing:-.045em; }
.arya-hero-metin h2 b { color:var(--aksiyon-acik); font-weight:800; }
.arya-hero-metin>p { max-width:630px; margin:0; color:rgba(255,255,255,.78); font-size:14px; line-height:1.7; }
.arya-hero-butonlar { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.45rem; }
.arya-hero-butonlar .btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:48px; padding:.75rem 1.15rem; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; box-shadow:none; }
.arya-hero-butonlar .btn-amber { border-color:var(--aksiyon); background:var(--aksiyon); color:#fff; }
.arya-hero-guven { display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; margin-top:1.35rem; }
.arya-hero-guven span { display:inline-flex; align-items:center; gap:.38rem; color:rgba(255,255,255,.72); font-size:10.5px; }
.arya-hero-guven .ikn { color:var(--aksiyon-acik); }.arya-hero-guven b { color:inherit; font-weight:700; }
.arya-hero-kolaj { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:12px; min-height:310px; padding-bottom:32px; }
.arya-hero-urun { position:relative; overflow:hidden; display:grid; grid-template-rows:minmax(0,1fr) auto; width:100%; height:238px; border:4px solid rgba(255,255,255,.94); border-radius:15px; background:#fff; color:var(--metin); text-decoration:none; box-shadow:0 12px 28px rgba(var(--marka-rgb),.2); transition:transform var(--gecis),border-color var(--gecis); }
.arya-hero-urun[hidden] { display:none; }
.arya-hero-urun:hover { border-color:#fff; transform:translateY(-4px); }
.arya-hero-urun img { width:100%; height:100%; min-height:0; object-fit:contain; background:#fff; }
.arya-hero-urun>span { display:grid; gap:2px; padding:.55rem .65rem .6rem; border-top:1px solid #EEF1F1; background:#fff; }
.arya-hero-urun b { display:-webkit-box; overflow:hidden; min-height:25px; font-size:10px; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.arya-hero-urun small { color:var(--marka); font-size:11px; font-weight:850; }
.arya-hero-urun.ahu-1,.arya-hero-urun.ahu-2,.arya-hero-urun.ahu-3 { inset:auto; z-index:1; width:100%; height:238px; transform:none; }
.arya-hero-kontrol { position:absolute; z-index:5; left:50%; bottom:0; display:flex; align-items:center; gap:8px; transform:translateX(-50%); }
.arya-hero-kontrol button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(255,255,255,.1); color:#fff; box-shadow:none; cursor:pointer; }
.arya-hero-kontrol button:hover { border-color:#fff; background:#fff; color:var(--marka); }
.arya-hero-kontrol span { min-width:34px; color:rgba(255,255,255,.72); font-size:9px; font-weight:700; text-align:center; }
.arya-hero-kontrol span b { color:#fff; font-size:10px; }
.arya-konfeti { position:absolute; width:11px; height:11px; border-radius:3px; background:var(--aksiyon-acik); transform:rotate(28deg); }
.arya-konfeti.ak-1 { left:10%; top:20px; }.arya-konfeti.ak-2 { right:3%; top:42px; width:8px; height:20px; background:#fff; transform:rotate(-18deg); }.arya-konfeti.ak-3 { left:20%; bottom:5px; width:18px; height:7px; background:var(--marka-buz); }

/* ---- Kategori vitrini ---- */
.kategori-vitrin {
    display: grid; gap: .8rem;
    grid-template-columns: repeat(5, 1fr);
    padding-top: 1rem;
}
.kategori-kart {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    padding: 1rem 1.1rem 0.95rem;
    border-radius: var(--r2);
    text-decoration: none; color: #fff;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.kategori-kart::after { /* köşe parlaması */
    content: ''; position: absolute; right: -30px; top: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: rgba(255,255,255,.12);
}
.kategori-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); }
.kk-0 { background: linear-gradient(140deg, var(--marka), var(--marka-2)); }
.kk-1 { background: linear-gradient(140deg, var(--navy), var(--marka)); }
.kk-2 { background: linear-gradient(140deg, var(--aksiyon-k2), var(--aksiyon)); }
.kk-3 { background: linear-gradient(140deg, var(--aksiyon-k), var(--aksiyon-2)); }
.kk-4 { background: linear-gradient(140deg, var(--marka-k3), var(--marka-2)); }
.kategori-ikon {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 11px;
    background: rgba(255,255,255,.16);
    margin-bottom: .45rem;
}
.kategori-ad { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.kategori-sayi { font-size: 11px; color: rgba(255,255,255,.75); font-weight: 600; }

/* ---- Fırsat kutusu: sıcak tonlu konteyner ---- */
.firsat-kutu {
    background: linear-gradient(180deg, var(--aksiyon-a), #fff);
    border-color: var(--aksiyon-acik);
}
.firsat-kutu .satir-ust h2 { display: flex; align-items: center; gap: .45rem; color: var(--aksiyon-k2); }
.firsat-kutu .satir-ust h2 .ikn { color: var(--aksiyon-2); }
.firsat-kutu .tumu-link { color: var(--aksiyon-k); }
.firsat-kutu .serit-ok:hover { background: var(--aksiyon); border-color: var(--aksiyon); }
.firsat-kutu .urun-kart { border-color: var(--aksiyon-acik); }

/* ---- Rehber kartları ---- */
.rehber-alan {
    display: grid; gap: .8rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.1rem;
}
.rehber-kart {
    display: flex; align-items: center; gap: .85rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1rem 1.1rem;
    text-decoration: none; color: var(--metin);
    box-shadow: var(--golge);
    transition: box-shadow var(--gecis), transform var(--gecis);
}
.rehber-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.rehber-ikon {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--marka-a); color: var(--marka);
    transition: background var(--gecis), color var(--gecis);
}
.rehber-kart:hover .rehber-ikon { background: var(--marka); color: #fff; }
.rehber-metin { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.rehber-metin b { font-size: 13.5px; font-weight: 700; }
.rehber-metin small { font-size: 11.5px; color: var(--metin-3); line-height: 1.4; }
.rehber-ok { color: var(--metin-3); flex: none; transition: transform var(--gecis), color var(--gecis); }
.rehber-kart:hover .rehber-ok { transform: translateX(3px); color: var(--marka); }

/* ---- Bülten şeridi ---- */
.bulten {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
    align-items: center; gap: 2rem;
    margin-top: 1.1rem;
    padding: 1.55rem 1.8rem;
    border-radius: var(--r2);
    background:
        radial-gradient(400px 160px at 90% -30%, rgba(var(--aksiyon-rgb),.22), transparent 60%),
        linear-gradient(140deg, var(--marka-d), var(--marka));
    color: #fff;
    box-shadow: var(--golge);
}
.bulten-metin h2 { display: flex; align-items: center; gap: .5rem; font-size: 17px; font-weight: 800; margin-bottom: .2rem; }
.bulten-metin h2 .ikn { color: var(--aksiyon-acik2); }
.bulten-metin p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.8); }
.bulten-form { display: grid; gap: .55rem; min-width: 0; }
.bulten-giris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.bulten-eposta { display: flex; align-items: center; gap: .65rem; min-width: 0; height: 46px;
    margin: 0; padding: 0 .9rem; border: 1px solid rgba(255,255,255,.3); border-radius: 10px;
    background: rgba(255,255,255,.96); color: var(--marka); cursor: text;
    box-shadow: 0 5px 16px rgba(0,0,0,.08); transition: border-color var(--gecis), box-shadow var(--gecis); }
.bulten-eposta:focus-within { border-color: var(--aksiyon-acik2); box-shadow: 0 0 0 3px rgba(var(--aksiyon-rgb),.22); }
.bulten-eposta .ikn { flex: none; color: var(--marka-2); }
.bulten-form input[type="email"] {
    width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0;
    border: 0; outline: 0; background: transparent; color: var(--metin);
    font-size: 13.5px;
}
.bulten-form input[type="email"]::placeholder { color: var(--metin-3); }
.bulten-form input[type="email"]:focus { box-shadow: none; }
.bulten-form .btn { height: 46px; min-width: 112px; padding: 0 1.35rem; white-space: nowrap; }
.bulten-onay { display: flex; align-items: flex-start; gap: .48rem; margin: 0; padding: 0 .15rem;
    font-size: 10.5px; line-height: 1.45; color: rgba(255,255,255,.82); cursor: pointer; }
.bulten-onay input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--aksiyon); }

@media (max-width: 980px) {
    .kategori-vitrin { grid-template-columns: repeat(3, 1fr); }
    .rehber-alan { grid-template-columns: 1fr; }
    .bulten { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
    .kategori-vitrin { grid-template-columns: 1fr 1fr; }
    .bulten { padding: 1.2rem 1.1rem; }
    .bulten-giris { grid-template-columns: 1fr; }
    .bulten-form .btn { width: 100%; }
}

/* =========================================================
   YARATICI BÖLÜMLER: kullanım alanları, hesaplayıcı, uyumluluk
   ========================================================= */

/* ---- Kullanım alanları ---- */
.alan-bolum { margin-top: 1.4rem; }
.alan-bolum .bolum-baslik { margin-bottom: .9rem; }
.alan-izgara { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }
.alan-kart {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    column-gap: .8rem; align-items: center;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik);
    border-radius: var(--r2); padding: .95rem 1.1rem;
    transition: box-shadow var(--gecis), transform var(--gecis);
}
.alan-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.alan-ikon {
    grid-row: 1 / 3;
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--marka-a); color: var(--marka);
}
.alan-kart b { font-size: 13.5px; font-weight: 700; }
.alan-kart small { font-size: 11.5px; color: var(--metin-3); line-height: 1.4; }

/* ---- Şişe hesaplayıcı ---- */
.hesap {
    display: grid; gap: 2rem;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
    align-items: center;
    margin-top: 1.4rem;
    padding: 1.8rem 2rem;
    border-radius: var(--r2);
    background:
        radial-gradient(420px 200px at 88% -30%, rgba(var(--marka-2-rgb),.35), transparent 62%),
        linear-gradient(140deg, var(--marka-d), var(--marka));
    color: #fff;
    box-shadow: var(--golge-2);
}
.hesap-sol h2 { display: flex; align-items: center; gap: .5rem; font-size: 18px; font-weight: 800; margin-bottom: .25rem; }
.hesap-sol h2 .ikn { color: var(--marka-buz); }
.hesap-sol > p { margin: 0 0 1.1rem; font-size: 13px; color: rgba(255,255,255,.8); }
.hesap-alanlar { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: 440px; }
.hesap-alanlar label { color: rgba(255,255,255,.85); font-size: 12px; margin: 0; }
.hesap-alanlar input, .hesap-alanlar select {
    margin-top: .35rem; height: 44px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
    background: rgba(255,255,255,.12); color: #fff;
    font-size: 14px; font-weight: 700;
}
.hesap-alanlar select option { color: var(--metin); }
.hesap-alanlar input:focus, .hesap-alanlar select:focus {
    border-color: var(--aksiyon); box-shadow: 0 0 0 3px rgba(var(--aksiyon-rgb),.2);
    background: rgba(255,255,255,.16);
}
.hesap-sonuc {
    display: flex; flex-direction: column; gap: .3rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    backdrop-filter: blur(4px);
}
.hesap-sonuc small { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--marka-buz); }
.hesap-sonuc b { font-size: 17px; font-weight: 800; line-height: 1.3; }
.hesap-sonuc > span { font-size: 12px; color: rgba(255,255,255,.75); }
.hesap-sonuc .btn { margin-top: .7rem; }

/* ---- Cam uyumluluğu ---- */
.uyum-bolum { margin-top: 1.6rem; }
.uyum-bolum .bolum-baslik { margin-bottom: .9rem; }
.uyum-izgara { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }
.uyum-kart {
    position: relative;
    display: flex; flex-direction: column; gap: .1rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-left-width: 4px;
    border-radius: var(--r);
    padding: .85rem 1rem .85rem 1.1rem;
}
.uyum-kart b { font-size: 13.5px; font-weight: 700; padding-right: 2rem; }
.uyum-kart small { font-size: 11.5px; color: var(--metin-3); }
.uyum-isaret {
    position: absolute; right: .9rem; top: .85rem;
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: 13px; font-weight: 800;
}
.uyum-kart.olur   { border-left-color: #00A365; }
.uyum-kart.olur .uyum-isaret   { background: var(--yesil-a); color: #00875A; }
.uyum-kart.olmaz  { border-left-color: #DD1A31; }
.uyum-kart.olmaz .uyum-isaret  { background: var(--kirmizi-a); color: #DD1A31; }
.uyum-kart.dikkat { border-left-color: var(--aksiyon); }
.uyum-kart.dikkat .uyum-isaret { background: var(--aksiyon-a4); color: var(--aksiyon-k); }

@media (max-width: 900px) {
    .alan-izgara, .uyum-izgara { grid-template-columns: 1fr 1fr; }
    .hesap { grid-template-columns: 1fr; padding: 1.4rem 1.2rem; }
}
@media (max-width: 560px) {
    .alan-izgara, .uyum-izgara { grid-template-columns: 1fr; }
    .hesap-alanlar { grid-template-columns: 1fr; }
}

/* =========================================================
   YARATICI PAKET 2: demo animasyonu, sayaç, gezilenler, WA
   ========================================================= */

/* ---- Matkap mı Jel mi ---- */
.kiyas-bolum { margin-top: 1.6rem; }
.kiyas {
    display: grid; gap: 0;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    overflow: hidden; box-shadow: var(--golge);
}
.kiyas-demo {
    background: linear-gradient(150deg, var(--marka-d), var(--marka));
    display: grid; place-items: center; padding: 2rem 1.5rem;
}
.demo-sahne { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.demo-cam {
    position: relative;
    width: 210px; height: 150px;
    border-radius: 10px;
    background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.16) 100%);
    border: 1.5px solid rgba(255,255,255,.35);
    box-shadow: inset 0 0 30px rgba(255,255,255,.06);
}
.demo-sablon, .demo-jel, .demo-delik {
    position: absolute; left: 50%; top: 50%;
    width: 54px; height: 54px; border-radius: 50%;
    transform: translate(-50%, -50%);
}
.demo-sablon { border: 2.5px dashed rgba(255,255,255,.75); animation: demo-sablon 9s infinite; }
.demo-jel { background: radial-gradient(circle, var(--aksiyon-acik2) 20%, var(--aksiyon) 80%); animation: demo-jel 9s infinite; }
.demo-delik {
    background: #082530;
    box-shadow: inset 0 3px 9px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.25);
    animation: demo-delik 9s infinite;
}
@keyframes demo-sablon {
    0%, 4% { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
    10%, 62% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    72%, 100% { opacity: 0; }
}
@keyframes demo-jel {
    0%, 14% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
    24%, 40% { opacity: 1; transform: translate(-50%,-50%) scale(.92); }
    50%, 60% { opacity: .9; transform: translate(-50%,-50%) scale(.98); filter: brightness(1.15); }
    68%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.85); }
}
@keyframes demo-delik {
    0%, 64% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
    74%, 92% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; }
}
.demo-adimlar { position: relative; height: 20px; width: 230px; }
.demo-adim {
    position: absolute; inset: 0;
    text-align: center; color: rgba(255,255,255,.9);
    font-size: 12.5px; font-weight: 700;
    opacity: 0;
}
.demo-adim.a1 { animation: demo-yazi1 9s infinite; }
.demo-adim.a2 { animation: demo-yazi2 9s infinite; }
.demo-adim.a3 { animation: demo-yazi3 9s infinite; }
.demo-adim.a4 { animation: demo-yazi4 9s infinite; color: #7DE0B0; }
@keyframes demo-yazi1 { 2%, 18% { opacity: 1; } 0%, 24%, 100% { opacity: 0; } }
@keyframes demo-yazi2 { 26%, 42% { opacity: 1; } 0%, 20%, 48%, 100% { opacity: 0; } }
@keyframes demo-yazi3 { 50%, 64% { opacity: 1; } 0%, 44%, 70%, 100% { opacity: 0; } }
@keyframes demo-yazi4 { 74%, 94% { opacity: 1; } 0%, 68%, 100% { opacity: 0; } }

.kiyas-tablo { padding: 1.6rem 1.8rem; }
.kiyas-tablo .bolum-baslik { margin-bottom: .9rem; }
.kiyas-tablo table { width: 100%; border-collapse: collapse; }
.kiyas-tablo th, .kiyas-tablo td { text-align: left; padding: .6rem .8rem; font-size: 13px; border-bottom: 1px solid var(--cizgi-acik); }
.kiyas-tablo thead th { font-size: 12px; font-weight: 800; color: var(--metin-2); }
.kiyas-tablo tbody td:first-child { font-weight: 600; color: var(--metin-2); }
.kiyas-tablo tbody tr:last-child td { border-bottom: 0; }
.kiyas-biz { background: #F0FAF6; }
.kiyas-tablo thead .kiyas-biz { color: #00875A; }
.kiyas-iyi { display: inline-block; padding: .15rem .55rem; border-radius: 99px; background: var(--yesil-a); color: #00875A; font-size: 11.5px; font-weight: 700; }
.kiyas-kotu { display: inline-block; padding: .15rem .55rem; border-radius: 99px; background: var(--kirmizi-a); color: #C22030; font-size: 11.5px; font-weight: 700; }
.kiyas-orta { display: inline-block; padding: .15rem .55rem; border-radius: 99px; background: var(--aksiyon-a4); color: var(--aksiyon-k2); font-size: 11.5px; font-weight: 700; }

/* ---- Kargo sayacı ---- */
.kargo-sayac {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-top: 1rem;
    padding: .65rem 1rem;
    background: var(--yesil-a);
    border: 1px solid #BFE3D3; border-radius: 10px;
    font-size: 13px; color: #086B45;
}
.kargo-sayac-ikon { display: grid; color: #00875A; }
.kargo-sayac b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Son Gezdikleriniz ---- */
.gezilen-izgara { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gezilen-kart {
    display: flex; flex-direction: column; gap: .15rem;
    background: #fff; border: 1px solid var(--cizgi-acik); border-radius: var(--r);
    padding: .6rem; text-decoration: none;
    transition: box-shadow var(--gecis), border-color var(--gecis);
}
.gezilen-kart:hover { box-shadow: var(--golge-2); border-color: var(--cizgi); }
.gezilen-gorsel { display: grid; place-items: center; aspect-ratio: 1.4; overflow: hidden; border-radius: 6px; background: #fff; }
.gezilen-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.gezilen-gorsel .gorsel-yok { font-size: 30px; }
.gezilen-ad { font-size: 12px; font-weight: 600; color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gezilen-fiyat { font-size: 13px; font-weight: 800; color: var(--metin); }

/* ---- WhatsApp balonu ---- */
.wa-balon {
    position: fixed; right: 20px; bottom: 20px; z-index: 80;
    display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25D366; color: #fff;
    box-shadow: 0 6px 20px rgba(37,211,102,.45);
    transition: transform var(--gecis), box-shadow var(--gecis);
}
.wa-balon::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(37,211,102,.5);
    animation: wa-nabiz 2.2s infinite;
}
@keyframes wa-nabiz {
    0% { transform: scale(1); opacity: 1; }
    70%, 100% { transform: scale(1.45); opacity: 0; }
}
.wa-balon:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(37,211,102,.55); }

/* ---- Kaydırdıkça belirme ---- */
.anim-hazir .satir-kutu, .anim-hazir .promo-kart, .anim-hazir .alan-kart,
.anim-hazir .uyum-kart, .anim-hazir .rehber-kart, .anim-hazir .kategori-kart,
.anim-hazir .hesap, .anim-hazir .bulten, .anim-hazir .kiyas {
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
}
.anim-hazir .girdi { opacity: 1 !important; transform: none !important; }

@media (max-width: 900px) {
    .kiyas { grid-template-columns: 1fr; }
    .kiyas-demo { padding: 1.6rem 1rem; }
    .wa-balon { right: 14px; bottom: 14px; width: 48px; height: 48px; }
}

/* =========================================================
   ANASAYFA GENİŞLETME — Günün Fırsatı + vitrin ızgarası
   (katman kuralı: bu blok dosyanın SONUNDA kalmalı)
   ========================================================= */

/* ---- Günün Fırsatı spotlight ---- */
.gunun-firsati {
    position: relative;
    display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
    margin-top: 1.1rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    overflow: hidden;
    box-shadow: var(--golge);
}
.gunun-firsati::before { /* prizma çizgisi — marka imzası */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
    background: linear-gradient(90deg,
        var(--marka) 0%, var(--marka-2) 30%, var(--marka-buz) 48%,
        var(--aksiyon-acik) 62%, var(--aksiyon) 78%, var(--marka) 100%);
}
.gf-gorsel {
    position: relative; display: grid; place-items: center;
    min-height: 300px; padding: 2.2rem;
    background:
        radial-gradient(340px 200px at 85% 0%, rgba(var(--aksiyon-rgb),.25), transparent 65%),
        linear-gradient(145deg, var(--marka-d) 0%, var(--marka) 70%, #11919F 115%);
}
.gf-gorsel img {
    max-width: 78%; max-height: 260px; object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
    transition: transform .3s ease;
}
.gunun-firsati:hover .gf-gorsel img { transform: scale(1.04) translateY(-3px); }
.gf-gorsel .gorsel-yok { color: #fff; opacity: .22; }
.gf-etiket {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--aksiyon); color: var(--marka-d2);
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: .35rem .7rem; border-radius: 99px;
    box-shadow: 0 4px 12px rgba(var(--aksiyon-rgb),.4);
}
.gf-yuzde {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 50%;
    background: #fff; color: var(--aksiyon-k2);
    font-size: 19px; font-weight: 800; line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.gf-yuzde small { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--metin-2); }
.gf-bilgi { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: 1.8rem 2rem; }
.gf-bilgi h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.gf-bilgi h2 a { color: var(--metin); text-decoration: none; }
.gf-bilgi h2 a:hover { color: var(--marka); }
.gf-ozet { margin: 0; font-size: 13.5px; color: var(--metin-2); line-height: 1.55; max-width: 52ch; }
.gf-fiyat { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-top: .2rem; }
.gf-eski { display: inline-flex; align-items: center; gap: .45rem; }
.gf-eski del { font-size: 14px; color: var(--metin-3); }
.gf-fiyat b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--metin); }
.gf-kazanc { font-size: 12px; font-weight: 700; color: #00875A; background: var(--yesil-a); padding: .25rem .6rem; border-radius: 99px; }
.gf-rozetler { display: flex; align-items: center; gap: .9rem; }
.gf-rozetler .kargo-rozet { margin-top: 0; }
.gf-stok { display: inline-flex; align-items: center; gap: .3rem; font-size: 11.5px; font-weight: 700; color: #00875A; }
.gf-stok.az { color: #C22030; }
.gf-butonlar { display: flex; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.gf-butonlar .btn { padding: .65rem 1.6rem; font-size: 13.5px; }
.gf-incele { background: #fff; border: 1px solid var(--cizgi); color: var(--metin); }
.gf-incele:hover { border-color: var(--marka); color: var(--marka); }

/* ---- Öne Çıkan Ürünler ızgarası ---- */
.vitrin-izgara { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 2px; }
.vitrin-alt { display: flex; justify-content: center; margin-top: 1rem; }
.vitrin-tum-btn {
    background: #fff; border: 1px solid var(--cizgi); color: var(--metin);
    font-weight: 700; font-size: 13px; padding: .6rem 2.2rem;
}
.vitrin-tum-btn:hover { border-color: var(--marka); color: var(--marka); box-shadow: var(--golge); }

/* ---- Kaydırdıkça belirme (yeni bölümler) ---- */
.anim-hazir .gunun-firsati {
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
}

@media (max-width: 860px) {
    .gunun-firsati { grid-template-columns: 1fr; }
    .gf-gorsel { min-height: 230px; }
    .gf-gorsel img { max-height: 190px; }
    .gf-bilgi { padding: 1.2rem 1.1rem 1.4rem; }
    .gf-fiyat b { font-size: 25px; }
}

/* =========================================================
   BUTİK VİTRİN — Ürünlerimiz ızgarası + Ana Ürün Sahnesi
   (4 ürünlük katalog: şerit yok, her ürüne büyük sahne)
   ========================================================= */

/* ---- Ürünlerimiz: tam genişlik, eşit bölünen büyük kartlar ---- */
.urunler-vitrin { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); padding: 2px; }
.urunler-vitrin .urun-kart { border-radius: var(--r2); }
.urunler-vitrin .urun-gorsel { padding: 20px; }
.urunler-vitrin .urun-govde { padding: .5rem 1rem 1rem; }
.urunler-vitrin .urun-govde h3 { font-size: 14.5px; min-height: 0; }
.urunler-vitrin .urun-ozet {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: .1rem 0 .55rem; font-size: 12px; color: var(--metin-2); line-height: 1.5;
}
.urunler-vitrin .urun-fiyat { font-size: 19px; }
.urunler-vitrin .urun-kart-aksiyon { padding: .6rem; font-size: 13px; }

/* ---- Ana Ürün Sahnesi: varyant panelleri (yalnızca aktif görünür) ---- */
.ana-sahne .gunun-firsati { display: none; }
.ana-sahne .gunun-firsati.aktif { display: grid; }
/* belirme animasyonunu kapsayıcı üstlenir; iç paneller anında görünür */
.anim-hazir .ana-sahne .gunun-firsati { opacity: 1; transform: none; transition: none; }
.anim-hazir .ana-sahne {
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
}

/* ---- Ambalaj (boy) seçici ---- */
.sahne-boylar { display: flex; align-items: center; gap: .45rem; margin-top: .2rem; }
.sahne-boy-etiket { font-size: 12px; font-weight: 700; color: var(--metin-2); margin-right: .15rem; }
.sahne-boy {
    appearance: none; -webkit-appearance: none;
    background: #fff; border: 1.5px solid var(--cizgi); border-radius: 99px;
    padding: .4rem 1.1rem; margin: 0;
    font: 700 12.5px/1 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    color: var(--metin-2); cursor: pointer;
    transition: border-color var(--gecis), color var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.sahne-boy:hover { border-color: var(--marka); color: var(--marka); }
.sahne-boy.aktif {
    background: var(--marka-a); border-color: var(--marka); color: var(--marka);
    box-shadow: 0 0 0 3px rgba(var(--marka-rgb),.12);
}

/* =========================================================
   BLOG / REHBER — yazı kartları + yazı detayı
   ========================================================= */
.yazi-izgara { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 2px; }
.yazi-kart {
    display: flex; flex-direction: column;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    overflow: hidden; text-decoration: none; color: var(--metin);
    box-shadow: var(--golge);
    transition: box-shadow var(--gecis), transform var(--gecis);
    animation: yukari-gel .45s backwards;
}
.yazi-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.yazi-gorsel { position: relative; display: grid; place-items: center; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(140deg, #EAF4F6, #F6FAFB); }
.yazi-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.yazi-kart:hover .yazi-gorsel img { transform: scale(1.05); }
.yazi-gorsel-yok { color: var(--marka); opacity: .3; }
.yazi-etiket {
    position: absolute; top: 10px; left: 10px;
    background: rgba(var(--marka-rgb),.92); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    padding: .25rem .6rem; border-radius: 99px;
}
.yazi-govde { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; flex: 1; }
.yazi-tarih { font-size: 11px; font-weight: 600; color: var(--metin-3); }
.yazi-baslik { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.yazi-kart:hover .yazi-baslik { color: var(--marka); }
.yazi-ozet {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; color: var(--metin-2); line-height: 1.5;
}
.yazi-devam { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .5rem; font-size: 12px; font-weight: 700; color: var(--aksiyon-k); }
.yazi-kart:hover .yazi-devam { gap: .5rem; }

/* Yazı detayı */
.yazi-ust-bilgi { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; font-size: 12.5px; color: var(--metin-3); font-weight: 600; }
.yazi-etiket-satir { background: var(--marka-a); color: var(--marka); padding: .2rem .65rem; border-radius: 99px; font-size: 11.5px; font-weight: 700; }
.yazi-kapak { width: 100%; border-radius: var(--r2); margin-bottom: 1.2rem; }

/* Boş durum (yazı yokken blog.php) */
.bos-durum { display: grid; place-items: center; gap: 1rem; padding: 4rem 1rem; text-align: center; color: var(--metin-2); }

/* belirme animasyonu kapsamına yazı kartlarını da al */
.anim-hazir .yazi-kart { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }

/* =========================================================
   FOOTER ÜSTÜ AVANTAJ ŞERİDİ (HB deseni, ekran görüntüsünden)
   Eski .avantaj sınıflarından bağımsız — ft-avantaj-* kullanılır.
   ========================================================= */
/* Koyu petrol final bandı — eski bülten kutusunun sevilen görsel dili:
   koyu zemin + köşeden amber parlama. Açık zeminde cılız kalan denemelerin
   (beyaz bant / gri zemin / kontur çember) yerini aldı. */
.ft-avantaj-band {
    margin-top: 2.4rem;
    background:
        radial-gradient(640px 240px at 88% -40%, rgba(var(--aksiyon-rgb),.2), transparent 62%),
        linear-gradient(140deg, var(--marka-d) 0%, var(--marka) 72%, #11919F 115%);
}
.ft-avantaj-band + .ft { margin-top: 0; }
/* HB ekran görüntüsü birebir: kontur çember + krem dolgu + amber ikon, ayraçsız */
.ft-avantaj-izgara {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 300px));
    justify-content: center;
    gap: 2.4rem;
    padding-top: 1.8rem; padding-bottom: 1.8rem;
}
.ft-avantaj { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.ft-avantaj-ikon {
    display: grid; place-items: center; flex: none;
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.22);
    color: var(--aksiyon-acik2); /* koyu zeminde amber ikon */
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis);
}
.ft-avantaj-ikon svg { width: 26px; height: 26px; }
.ft-avantaj:hover .ft-avantaj-ikon { background: var(--aksiyon); border-color: var(--aksiyon); color: var(--marka-d2); transform: translateY(-2px); }
.ft-avantaj > div { min-width: 0; }
.ft-avantaj b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.01em; margin-bottom: .2rem; color: #fff; }
.ft-avantaj small { display: block; font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.5; }

@media (max-width: 1000px) {
    .ft-avantaj-izgara { grid-template-columns: repeat(2, minmax(0, 320px)); gap: 1.4rem 2.4rem; }
}
@media (max-width: 560px) {
    .ft-avantaj-izgara { grid-template-columns: minmax(0, 360px); gap: 1rem; }
    .ft-avantaj-ikon { width: 54px; height: 54px; }
    .ft-avantaj-ikon svg { width: 26px; height: 26px; }
}

/* ---- Sepetim butonu: dolu/boş fark etmez, Giriş Yap ile aynı nötr beyaz hap.
       (Önceki petrol degrade kullanıcı isteğiyle kaldırıldı; doluluğu sayaç rozeti anlatır.) ---- */
.sepet-btn,
.sepet-btn.dolu {
    background: #fff;
    border: 1px solid #C9CED4;
    color: var(--metin);
}
.sepet-btn small { color: var(--metin-3); }
.sepet-btn:hover,
.sepet-btn.dolu:hover {
    background: #fff;
    border-color: var(--marka);
    color: var(--marka);
}
.sepet-btn .sepet-sayac,
.sepet-btn.dolu .sepet-sayac { background: var(--aksiyon); border-color: #fff; color: #fff; }

/* =========================================================
   KATEGORİ BARI v6 — HB ekran görüntüsü:
   prizma çizgisi barın üstünde, öğeler ortalı + ince dikey ayraçlar
   ========================================================= */
.kat-bar {
    background: #fff;
    border-top: 0; /* üst çizginin yerini prizma aldı */
    border-bottom: 1px solid var(--cizgi-acik);
}
.kat-ic { justify-content: center; }

/* ince dikey ayraçlar (HB'deki gibi) */
.kat-ic > a { border-left: 1px solid var(--cizgi-acik); }
.kat-ic > a:last-child { border-right: 1px solid var(--cizgi-acik); }
.kat-ic .kat-acilir { border-left: 1px solid var(--cizgi-acik); }

@media (max-width: 900px) {
    .kat-ic { justify-content: flex-start; }
}

/* =========================================================
   KATEGORİ BARI v8 — geniş, ürünlü mega menü
   ========================================================= */
.kat-bar { position: relative; z-index: 3; }
.kat-ic { position: relative; align-items: stretch; overflow: visible; }
.kat-ic > .kat-grup {
    position: static; display: flex; flex: 1 1 0; min-width: 0;
    border-left: 1px solid var(--cizgi-acik);
}
.kat-ic > .kat-grup:last-child { border-right: 1px solid var(--cizgi-acik); }
.kat-grup > .kat-ana-link {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    width: 100%; min-width: 0; min-height: 58px; padding: .65rem .7rem;
    border: 0; color: #3C4650; font-size: 13.5px; font-weight: 650;
    white-space: nowrap; text-align: center;
    box-shadow: none !important;
    transition: color .16s ease, background .16s ease;
}
.kat-grup > .kat-ana-link:hover,
.kat-grup.acik > .kat-ana-link,
.kat-grup > .kat-ana-link:active { box-shadow: none !important; }
.kat-grup > .kat-ana-link > span { overflow: hidden; text-overflow: ellipsis; }
.kat-grup > .kat-ana-link::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--marka); transform: scaleX(0); transform-origin: center;
    transition: transform .18s ease;
}
.kat-grup > .kat-ana-link .ikn { opacity: .45; transition: transform .2s ease, opacity .2s ease; }
.kat-grup.acik > .kat-ana-link {
    color: var(--marka); background: linear-gradient(180deg, #fff, var(--marka-a2));
}
.kat-grup.acik > .kat-ana-link::before { transform: scaleX(1); }
.kat-grup.acik > .kat-ana-link .ikn { transform: rotate(180deg); opacity: 1; }
.kat-grup > .kat-ana-link.kat-firsat { color: var(--aksiyon-2); font-weight: 750; }
.kat-grup > .kat-ana-link.kat-firsat::before { background: var(--aksiyon); }
.kat-grup.acik > .kat-ana-link.kat-firsat { color: var(--aksiyon-k); background: linear-gradient(180deg, #fff, var(--aksiyon-a4)); }

.kat-acilan {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 72;
    display: grid; grid-template-columns: minmax(220px, .68fr) minmax(180px, .55fr) minmax(0, 2fr);
    min-width: 0; padding: 0; overflow: hidden;
    background: #fff; border: 1px solid var(--cizgi); border-top: 3px solid var(--marka);
    border-radius: 0 0 18px 18px; box-shadow: 0 24px 55px rgba(9,45,52,.2);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(10px) scale(.992); transform-origin: top center;
    transition: opacity .17s ease, transform .2s ease, visibility .2s;
}
.kat-grup.acik .kat-acilan {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1);
}
.kat-ic .kat-acilan a::before { content: none; display: none; }
.kat-grup:has(.kat-firsat).acik .kat-acilan { border-top-color: var(--aksiyon); }
.kat-mega-sol {
    position: relative; overflow: hidden; padding: 1.45rem 1.4rem; color: var(--metin);
    border-right: 1px solid #DFEDEF;
    background:
        radial-gradient(circle at 100% 0, rgba(14,110,124,.1), transparent 34%),
        linear-gradient(145deg, #F7FBFB, #EDF7F8);
}
.kat-mega-ikon {
    display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem;
    border-radius: 13px; color: var(--marka); background: #fff; border: 1px solid #D7E8EA;
    box-shadow: 0 7px 18px rgba(15,94,103,.08);
}
.kat-mega-sol > small { display: block; color: var(--marka); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.kat-mega-sol > strong { display: block; margin-top: .28rem; color: var(--metin); font-size: 20px; line-height: 1.2; }
.kat-mega-sol > p { min-height: 58px; margin: .65rem 0 .9rem; color: var(--metin-3); font-size: 11.5px; line-height: 1.55; }
.kat-ic .kat-mega-sol > .kat-mega-tumu {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .45rem .7rem;
    border: 1px solid var(--marka); border-radius: 9px;
    color: #fff; background: var(--marka); font-size: 11.5px; font-weight: 750;
}
.kat-ic .kat-mega-sol > .kat-mega-tumu:hover { color: #fff; background: var(--marka-k2); border-color: var(--marka-k2); }
.kat-mega-orta {
    min-width: 0; padding: 1.45rem 1.1rem; border-right: 1px solid var(--cizgi-acik); background: #fff;
}
.kat-mega-orta-baslik { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .8rem; }
.kat-mega-orta-baslik small { color: var(--metin-3); font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.kat-mega-orta-baslik strong { color: var(--metin); font-size: 14px; }
.kat-mega-kisayol {
    display: flex; flex-direction: column; margin: 0; padding: 0;
}
.kat-ic .kat-mega-kisayol a {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: .55rem;
    min-width: 0; min-height: 48px; padding: .45rem .25rem; border: 0; border-bottom: 1px solid var(--cizgi-acik);
    color: var(--metin-2); background: transparent; font-size: 10.5px; font-weight: 650; line-height: 1.25; text-align: left;
    transition: color .16s ease, padding .16s ease;
}
.kat-ic .kat-mega-kisayol a:last-child { border-bottom: 0; }
.kat-ic .kat-mega-kisayol a > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kat-ic .kat-mega-kisayol a > .ikn:last-child { color: #A4B4B7; transition: transform .16s ease, color .16s ease; }
.kat-kisayol-ikon {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    color: var(--marka); background: var(--marka-a2);
}
.kat-ic .kat-mega-kisayol a:hover {
    color: var(--marka); padding-left: .45rem;
}
.kat-ic .kat-mega-kisayol a:hover > .ikn:last-child { color: var(--marka); transform: translateX(2px); }

/* İndirim kategorisi: standart kategori özetinden ayrılan, daha güçlü fırsat vitrini. */
.kat-grup-firsat .kat-mega-sol {
    position: relative; isolation: isolate; overflow: hidden; padding: 1.35rem 1.4rem;
    border-right-color: #F2DFC0;
    background:
        radial-gradient(circle at 96% 4%, rgba(255,174,28,.2) 0 9%, transparent 30%),
        linear-gradient(145deg, #FFFCF6, #FFF4E2);
}
.kat-grup-firsat .kat-mega-sol::after {
    content: '%'; position: absolute; z-index: -1; right: -1rem; bottom: -4.6rem;
    color: rgba(255,159,10,.07); font-size: 13rem; font-weight: 900; line-height: 1;
    transform: rotate(-9deg); pointer-events: none;
}
.kat-firsat-kimlik { display: flex; align-items: center; gap: .7rem; }
.kat-firsat-kimlik .kat-mega-ikon {
    flex: 0 0 auto; width: 43px; height: 43px; margin: 0; border-color: #F4D49B;
    color: var(--aksiyon-2); background: #fff; box-shadow: 0 7px 18px rgba(168,104,0,.08);
}
.kat-firsat-kimlik > span:last-child { display: flex; flex-direction: column; gap: .08rem; }
.kat-firsat-kimlik small {
    color: var(--aksiyon-2); font-size: 8.5px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase;
}
.kat-firsat-kimlik b { color: var(--metin); font-size: 11.5px; }
.kat-firsat-vurgu { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.kat-firsat-vurgu strong { color: var(--aksiyon-2); font-size: clamp(2.5rem, 3vw, 3.15rem); font-weight: 850; line-height: .9; letter-spacing: -.07em; }
.kat-firsat-vurgu span { color: #7E530C; font-size: 11px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.kat-grup-firsat .kat-mega-sol > p {
    min-height: 0; max-width: 250px; margin: .8rem 0 .85rem; color: var(--metin-3); font-size: 11px; line-height: 1.55;
}
.kat-ic .kat-grup-firsat .kat-mega-sol > .kat-firsat-buton {
    justify-content: center; min-height: 39px; padding: .55rem .85rem; border-color: transparent;
    color: #513000; background: linear-gradient(135deg, #FFB323, #FF9500); box-shadow: 0 8px 18px rgba(255,149,0,.22);
}
.kat-ic .kat-grup-firsat .kat-mega-sol > .kat-firsat-buton:hover { color: #3D2600; background: #FFC04A; transform: translateY(-1px); }
.kat-firsat-ozet {
    display: grid; grid-template-columns: 1fr 1.45fr; gap: .5rem; margin-top: .8rem; padding-top: .7rem;
    border-top: 1px solid #F0D9B3;
}
.kat-firsat-ozet > span {
    display: flex; align-items: center; gap: .35rem; min-width: 0; color: var(--aksiyon-2);
}
.kat-firsat-ozet b { color: var(--metin); font-size: 16px; line-height: 1; }
.kat-firsat-ozet small { color: var(--metin-3); font-size: 9.5px; line-height: 1.25; }
.kat-firsat-ozet .ikn { flex: 0 0 auto; color: var(--aksiyon-2); }
.kat-mega-sag { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem 1.35rem 1.35rem;
    background: radial-gradient(circle at 90% 100%, rgba(14,110,124,.055), transparent 34%), #fff; }
.kat-mega-sag-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.kat-mega-sag-bas b { color: var(--metin); font-size: 13px; }
.kat-mega-sag-bas span { padding: .2rem .5rem; border-radius: 999px; background: var(--marka-a2); color: var(--marka); font-size: 10px; font-weight: 750; }
.kat-mega-urunler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.kat-mega-urunler-az { grid-template-columns: minmax(0, 1fr); }
.kat-ic .kat-mega-urun {
    display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    min-width: 0; min-height: 76px; padding: .55rem .65rem; border: 1px solid var(--cizgi-acik);
    border-radius: 12px; color: var(--metin); text-align: left; background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.kat-ic .kat-mega-urun:hover { color: var(--metin); border-color: var(--marka-buz); box-shadow: 0 7px 18px rgba(12,80,89,.09); transform: translateY(-1px); }
.kat-mega-gorsel { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, #F7FAFA, var(--marka-a2)); color: var(--marka); }
.kat-mega-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.kat-mega-urun-bilgi { min-width: 0; }
.kat-mega-urun-bilgi b { display: block; overflow: hidden; color: var(--metin); font-size: 11.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.kat-mega-urun-bilgi em { display: block; overflow: hidden; margin-top: .12rem; color: var(--metin-3); font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.kat-mega-urun-bilgi small { display: block; margin-top: .25rem; color: var(--marka); font-size: 12px; font-weight: 800; }
.kat-mega-urun > .ikn { color: var(--metin-3); }
.kat-mega-bos { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 150px; border: 1px dashed var(--cizgi); border-radius: 12px; color: var(--metin-3); }
.kat-mega-bos span { display: flex; flex-direction: column; gap: .15rem; }.kat-mega-bos b { color: var(--metin); font-size: 12px; }.kat-mega-bos small { font-size: 10.5px; }
.kat-ic .kat-mega-yardim {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    min-height: 68px; margin-top: auto; padding: .65rem .8rem; border: 1px solid #DCEAEC;
    border-radius: 12px; color: var(--metin); text-align: left;
    background: linear-gradient(100deg, var(--marka-a2), #fff 72%);
}
.kat-ic .kat-mega-yardim:hover { color: var(--metin); border-color: var(--marka-buz); box-shadow: 0 5px 14px rgba(12,80,89,.07); }
.kat-mega-yardim > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--marka); }
.kat-mega-yardim > span:nth-child(2) { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.kat-mega-yardim b { color: var(--metin); font-size: 11.5px; }.kat-mega-yardim small { color: var(--metin-3); font-size: 10.5px; }
.kat-mega-yardim em { display: inline-flex; align-items: center; gap: .3rem; color: var(--marka); font-size: 10.5px; font-weight: 800; font-style: normal; white-space: nowrap; }
.kat-arka {
    position: fixed; left: 0; right: 0; top: var(--kat-alt, 0); bottom: 0; z-index: 1;
    display: block; width: 100%; padding: 0; border: 0; background: rgba(8,32,37,.34);
    -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s;
}
body.kat-menu-acik .kat-arka { opacity: 1; visibility: visible; pointer-events: auto; }

@media (max-width: 900px) {
    .kat-ic { overflow-x: auto; }
    .kat-ic > .kat-grup { position: relative; flex: none; }
    .kat-grup > .kat-ana-link { width: auto; min-height: 48px; padding: .55rem 1rem; font-size: 13px; }
    .kat-grup > .kat-ana-link .ikn { display: none; }
    .kat-acilan, .kat-arka { display: none; }
}

/* =========================================================
   SLIDER OKLARI v3 — buzlu cam (marka teması: cam!)
   Düz beyaz toplar yerine yarı saydam, blur'lu, zarif oklar.
   ========================================================= */
.slider-ok {
    width: 46px; height: 46px;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.38);
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25);
}
.slider-ok:hover {
    background: var(--aksiyon);
    border-color: var(--aksiyon);
    color: var(--marka-d2);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 24px rgba(var(--aksiyon-rgb),.45);
}
.slider-ok:active { transform: translateY(-50%) scale(.95); }

/* =========================================================
   ÇEREZ BİLDİRİMİ — sol altta zarif kart (WA balonu sağda)
   ========================================================= */
.cerez-kutu {
    position: fixed; left: 20px; bottom: 20px; z-index: 90;
    width: min(370px, calc(100vw - 40px));
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--marka), var(--marka-2) 45%, var(--aksiyon)) 1;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(37,51,66,.22);
    padding: 1rem 1.15rem 1.15rem;
    animation: cerez-gel .35s ease backwards;
}
@keyframes cerez-gel {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.cerez-kutu.kapaniyor { opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease; }
.cerez-ust { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.cerez-ust b { font-size: 14px; font-weight: 800; }
.cerez-ikon {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--marka-a); color: var(--marka);
}
.cerez-kutu p { margin: 0 0 .8rem; font-size: 12.5px; line-height: 1.55; color: var(--metin-2); }
.cerez-kutu p a { color: var(--marka); font-weight: 700; }
.cerez-btnler { display: flex; gap: .5rem; }
.cerez-btnler .btn { flex: 1; padding: .55rem .8rem; font-size: 12.5px; }
.cerez-zorunlu { background: #fff; border: 1px solid var(--cizgi); color: var(--metin-2); }
.cerez-zorunlu:hover { border-color: var(--marka); color: var(--marka); }

@media (max-width: 560px) {
    .cerez-kutu { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

/* =========================================================
   ÇEREZ AYARLARI PANELİ + anahtar (toggle) bileşeni
   ========================================================= */
.cerez-ayar-ort {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(12,32,42,.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
/* HB (OneTrust) tarzı: SOLDAN kayarak açılan tam boy panel */
.cerez-ayar {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: min(440px, 92vw);
    display: flex; flex-direction: column;
    background: var(--beyaz);
    border-radius: 0;
    box-shadow: 12px 0 40px rgba(0,0,0,.25);
    padding: 1.4rem 1.35rem 1.35rem;
    overflow-y: auto;
    animation: cerez-soldan .28s ease backwards;
}
@keyframes cerez-soldan {
    from { transform: translateX(-100%); }
    to   { transform: none; }
}
.cerez-ayar::before { /* panelin tepesinde prizma imzası */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--marka), var(--marka-2) 45%, var(--aksiyon));
}
.ca-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.ca-baslik b { display: inline-flex; align-items: center; gap: .5rem; font-size: 16px; font-weight: 800; color: var(--marka); }
.ca-kapat {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: var(--bg); color: var(--metin-2);
    font-size: 14px; cursor: pointer;
    transition: background var(--gecis), color var(--gecis);
}
.ca-kapat:hover { background: var(--kirmizi-a); color: var(--kirmizi); }
.ca-giris { margin: 0 0 1rem; font-size: 12.5px; color: var(--metin-2); line-height: 1.55; }
.ca-giris a { color: var(--marka); font-weight: 700; }

.ca-grup { border: 1px solid var(--cizgi-acik); border-radius: 12px; padding: .85rem 1rem; margin-bottom: .7rem; }
.ca-ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.ca-ust b { font-size: 13.5px; font-weight: 800; }
.ca-grup p { margin: 0; font-size: 12px; color: var(--metin-2); line-height: 1.55; }
.ca-sabit {
    font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    background: var(--yesil-a); color: #00875A;
    padding: .25rem .6rem; border-radius: 99px; white-space: nowrap;
}
.ca-btnler { display: flex; gap: .6rem; margin-top: auto; padding-top: 1.1rem; } /* panelin dibine yaslanır */
.ca-btnler .btn { flex: 1; padding: .65rem .8rem; font-size: 13px; }

/* Anahtar (toggle) — global input kurallarından yalıtılmış */
.anahtar { position: relative; display: inline-block; flex: none; width: 42px; height: 24px; cursor: pointer; }
.anahtar input {
    all: unset; /* global form stillerinin sızmasını engelle */
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.anahtar-top {
    position: absolute; inset: 0;
    background: #C9CED4; border-radius: 99px;
    transition: background var(--gecis);
}
.anahtar-top::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .18s ease;
}
.anahtar input:checked + .anahtar-top { background: var(--marka); }
.anahtar input:checked + .anahtar-top::after { transform: translateX(18px); }
.anahtar input:focus-visible + .anahtar-top { outline: 2px solid var(--aksiyon); outline-offset: 2px; }

/* =========================================================
   KATALOG (urunler.php) PRO — çipler + araç çubuğu + zengin kartlar
   ========================================================= */
.katalog-cipler { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 .9rem; }
.cip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1.15rem; border-radius: 99px;
    background: var(--beyaz); border: 1px solid var(--cizgi);
    font-size: 13px; font-weight: 600; color: var(--metin-2);
    text-decoration: none;
    transition: border-color var(--gecis), color var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.cip:hover { border-color: var(--marka); color: var(--marka); box-shadow: var(--golge); }
.cip.aktif { background: var(--marka); border-color: var(--marka); color: #fff; }
.cip-firsat { color: var(--aksiyon-k); border-color: #F3DCB8; background: #FFFBF4; }
.cip-firsat:hover { border-color: var(--aksiyon); color: var(--aksiyon-k2); }
.cip-firsat.aktif { background: var(--aksiyon); border-color: var(--aksiyon); color: var(--marka-d2); }

.katalog-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 12px;
    box-shadow: var(--golge);
    padding: .55rem .6rem .55rem 1rem;
    margin-bottom: 1rem;
}
.katalog-adet { font-size: 12.5px; color: var(--metin-2); }
.katalog-adet b, .katalog-adet strong { color: var(--marka); font-weight: 800; }
.katalog-adet a { color: var(--aksiyon-k); font-weight: 700; }

.katalog-bar .katalog-arac { margin: 0; flex: 0 1 auto; justify-content: flex-end; gap: .55rem; }
.katalog-bar .arama-kutu {
    position: relative; max-width: 260px;
}
.katalog-bar .arama-kutu-ikon {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--metin-3); display: grid; pointer-events: none;
}
.katalog-bar .arama-kutu input {
    width: 100%; margin: 0;
    padding: .5rem .9rem .5rem 2.3rem;
    border: 1px solid var(--cizgi); border-radius: 99px;
    font-size: 12.5px; background: var(--bg);
    transition: border-color var(--gecis), background var(--gecis);
}
.katalog-bar .arama-kutu input:focus { border-color: var(--marka); background: #fff; outline: none; }
.katalog-bar .sirala select {
    margin: 0; padding: .5rem 2rem .5rem .9rem;
    border: 1px solid var(--cizgi); border-radius: 99px;
    font-size: 12.5px; font-weight: 600; color: var(--metin);
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A6572' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center;
    -webkit-appearance: none; appearance: none;
    cursor: pointer;
    transition: border-color var(--gecis);
}
.katalog-bar .sirala select:hover, .katalog-bar .sirala select:focus { border-color: var(--marka); outline: none; }

/* Katalog kartları anasayfa vitriniyle aynı zenginlikte: açıklama görünür, ferah */
.urun-izgara { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.urun-izgara .urun-kart { border-radius: var(--r2); }
.urun-izgara .urun-gorsel { padding: 20px; }
.urun-izgara .urun-govde { padding: .5rem 1rem 1rem; }
.urun-izgara .urun-govde h3 { font-size: 14.5px; min-height: 0; }
.urun-izgara .urun-ozet {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: .1rem 0 .55rem; font-size: 12px; color: var(--metin-2); line-height: 1.5;
}
.urun-izgara .urun-fiyat { font-size: 19px; }
.urun-izgara .urun-kart-aksiyon { padding: .6rem; font-size: 13px; }

@media (max-width: 700px) {
    .katalog-bar { padding: .55rem .7rem; }
    .katalog-bar .katalog-arac { flex: 1 1 100%; justify-content: space-between; }
    .katalog-bar .arama-kutu { max-width: none; flex: 1; }
    .urun-izgara { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
}

/* ---- Katalog canlı arama: sonuçlar yenilenirken yumuşak soluklaşma ---- */
#katalog-sonuc { transition: opacity .18s ease; }
#katalog-sonuc.yukleniyor { opacity: .45; pointer-events: none; }

/* =========================================================
   ÜRÜN DETAYI PRO — marka satırı, WA sorusu, sekmeler, canlı toplam
   ========================================================= */
.detay-gorsel { position: relative; } /* rozetler görselin üstünde */
.detay-gorsel img { transition: transform .35s ease; }
.detay-gorsel:hover img { transform: scale(1.04); }

.detay-marka {
    display: inline-block;
    font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--marka); text-decoration: none;
    margin-bottom: .25rem;
}
.detay-marka:hover { text-decoration: underline; }

.detay-soru {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: 1.1rem; padding: .6rem 1rem;
    background: #F0FAF4; border: 1px solid #BFE3CD; border-radius: 10px;
    font-size: 12.5px; font-weight: 700; color: #128C4B;
    text-decoration: none;
    transition: background var(--gecis), border-color var(--gecis);
}
.detay-soru:hover { background: #E2F5EA; border-color: #25D366; }

.al-kazanc {
    display: inline-block; margin-top: .3rem;
    font-size: 12px; font-weight: 700; color: #00875A;
    background: var(--yesil-a); padding: .25rem .6rem; border-radius: 99px;
}

.al-toplam {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .7rem; padding: .6rem .9rem;
    background: var(--bg); border: 1px dashed var(--cizgi); border-radius: 10px;
    font-size: 12.5px; color: var(--metin-2);
}
.al-toplam > b { font-size: 16px; font-weight: 800; color: var(--marka); }

/* Sekmeli detay bölümü */
.detay-sekmeler {
    margin-top: 1.6rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    box-shadow: var(--golge);
    overflow: hidden;
}
.sekme-btnler {
    display: flex; gap: 0; overflow-x: auto;
    border-bottom: 1px solid var(--cizgi-acik);
    scrollbar-width: none;
}
.sekme-btnler::-webkit-scrollbar { display: none; }
.sekme-btn {
    position: relative; flex: none;
    padding: .95rem 1.5rem;
    border: 0; background: none; cursor: pointer;
    font: 700 13.5px/1 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    color: var(--metin-2);
    transition: color var(--gecis), background var(--gecis);
}
.sekme-btn::after {
    content: ''; position: absolute; left: 1.1rem; right: 1.1rem; bottom: -1px;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--marka);
    transform: scaleX(0);
    transition: transform .2s ease;
}
.sekme-btn:hover { color: var(--marka); }
.sekme-btn.aktif { color: var(--marka); }
.sekme-btn.aktif::after { transform: scaleX(1); }
.sekme-panel { display: none; padding: 1.4rem 1.6rem; }
.sekme-panel.aktif { display: block; }
.sekme-panel p { margin: 0 0 .8rem; font-size: 13.5px; line-height: 1.7; color: var(--metin-2); }
.sekme-panel p:last-child { margin-bottom: 0; }
.sekme-panel a { color: var(--marka); font-weight: 700; }
.sekme-liste { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.sekme-liste li { display: flex; align-items: flex-start; gap: .55rem; font-size: 13px; color: var(--metin-2); line-height: 1.5; }
.sekme-liste li .ikn { color: var(--marka); flex: none; margin-top: .1rem; }
.sekme-panel .guvenlik-notu { margin: 0 0 1rem; }

@media (max-width: 700px) {
    .sekme-btn { padding: .85rem 1rem; font-size: 12.5px; }
    .sekme-panel { padding: 1.1rem 1rem; }
}

/* =========================================================
   ÜRÜN DETAYI v3 — ışıklı görsel sahnesi, fiyat paneli,
   nitelik çipleri, ağırlıklı CTA
   ========================================================= */
.detay-hb { padding: 1.8rem; gap: 2rem; }

/* Görsel: düz beyaz kutu yerine hafif petrol ışıklı sahne */
.detay-gorsel {
    border: 0;
    background:
        radial-gradient(75% 58% at 50% 40%, rgba(var(--marka-rgb),.10), transparent 72%),
        linear-gradient(165deg, #F2F8F9, #FFFFFF 70%);
    padding: 30px;
}
.detay-gorsel img { filter: drop-shadow(0 18px 24px rgba(10,60,70,.16)); }
.detay-gorsel .gorsel-yok { color: var(--marka); opacity: .14; }

/* Başlık tipografisi büyüdü */
.detay-bilgi h1 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-bottom: .4rem; }
.detay-ozet { font-size: 14px; line-height: 1.6; max-width: 46ch; }

/* Nitelikler: gri blok yerine tekil beyaz çipler */
.detay-nitelikler { background: none; padding: 0; gap: .5rem; }
.detay-nitelikler span {
    background: #fff; border: 1px solid var(--cizgi-acik); border-radius: 10px;
    padding: .6rem .75rem;
    box-shadow: var(--golge);
}

/* Satın alma kutusu: prizma imzalı, fiyat panelli */
.al-kutu {
    position: sticky; top: 120px;
    border: 1px solid var(--cizgi-acik);
    box-shadow: var(--golge-2);
    overflow: hidden;
}
.al-kutu::before { /* marka imzası */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--marka), var(--marka-2) 45%, var(--aksiyon));
}
.al-fiyat {
    background: linear-gradient(165deg, #F5FAFB, #fff);
    border: 1px solid var(--cizgi-acik); border-radius: 12px;
    padding: .9rem 1rem;
    margin-bottom: .8rem;
}
.al-fiyat strong { font-size: 30px; }
.al-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1rem; font-size: 14.5px;
    box-shadow: 0 6px 18px rgba(var(--aksiyon-rgb),.35);
    transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.al-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(var(--aksiyon-rgb),.45); }
.al-cta:active { transform: none; }

/* Sekmeler: bar hafif gri zeminde, panel tipografisi ferah */
.sekme-btnler { background: #FAFBFC; }
.sekme-panel { padding: 1.6rem 1.8rem; }
.sekme-panel p { font-size: 14px; max-width: 78ch; }

@media (max-width: 700px) {
    .detay-hb { padding: 1.1rem; gap: 1.2rem; }
    .detay-gorsel { padding: 18px; }
    .sekme-panel { padding: 1.1rem 1rem; }
}

/* ---- Buy-box kargo geri sayımı ---- */
#kargo-geri-sayim .ikn { color: #00875A; }
.kargo-sure {
    color: var(--aksiyon-k2); font-weight: 800;
    font-variant-numeric: tabular-nums; /* saniyeler akarken genişlik oynamasın */
}

/* =========================================================
   ÜRÜN DETAYI v4 — ekran görüntüsü rötuşları:
   toplam kutusu bug'ı, kırılan CTA, WhatsApp satırı, pill hizası
   ========================================================= */

/* BUG: display:flex, hidden niteliğini eziyordu — boş "Toplam ( adet)" görünüyordu */
.al-toplam[hidden] { display: none; }

/* Sepete Ekle iki satıra kırılmasın; adet kutusuyla aynı boyda dursun */
.al-satir { align-items: stretch; }
.al-cta { white-space: nowrap; height: 46px; padding-top: 0; padding-bottom: 0; }
.adet-kutusu { height: 46px; }

/* Fiyat panelindeki haplar sola yaslı kalsın (flex-column'da tam genişliğe yayılıyordu) */
.al-fiyat { align-items: flex-start; }
.al-fiyat .kargo-rozet { margin-top: .3rem; }

/* WhatsApp satırı: yeşil blok yerine rehber-kart dili — kurumsal ve sakin */
.detay-soru {
    display: flex; align-items: center; gap: .8rem;
    margin-top: 1.1rem; padding: .75rem .95rem;
    background: #fff; border: 1px solid var(--cizgi-acik); border-radius: 12px;
    box-shadow: var(--golge);
    text-decoration: none; color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.detay-soru:hover { border-color: #25D366; box-shadow: var(--golge-2); background: #fff; }
.soru-ikon {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%;
    background: #25D366; color: #fff;
}
.soru-metin { display: flex; flex-direction: column; gap: .05rem; min-width: 0; flex: 1; }
.soru-metin b { font-size: 13px; font-weight: 700; color: var(--metin); }
.soru-metin small { font-size: 11.5px; color: var(--metin-3); }
.soru-ok { color: var(--metin-3); flex: none; transition: transform var(--gecis), color var(--gecis); }
.detay-soru:hover .soru-ok { transform: translateX(3px); color: #25D366; }

/* =========================================================
   ÜRÜN DETAYI v5 — görsel paneli taşma düzeltmesi
   Eski sticky+kare-oran kuralları paneli karttan taşırıyordu;
   panel artık kartın satır yüksekliğini birebir doldurur.
   ========================================================= */
.detay-hb { align-items: stretch; }
.detay-gorsel {
    position: relative;          /* sticky iptal — rozetlerin çapası */
    top: auto;
    aspect-ratio: auto;          /* kare zorlaması iptal */
    height: auto;
    align-self: stretch;         /* kartla aynı boy: ne taşar ne kısa kalır */
    min-height: 380px;
}
.detay-gorsel img { max-height: 420px; }
/* al-kutu sticky kalır ama uzun kolonda kayarken kendi hücresinde durur */
.al-kutu { align-self: start; }

@media (max-width: 700px) {
    .detay-gorsel { min-height: 260px; }
    .detay-gorsel img { max-height: 300px; }
}

/* =========================================================
   ÜRÜN DETAYI v6 — HB ekran görüntüsü birebir:
   2 sütun (galeri | bilgi+satın alma), gri teslimat paneli,
   ürün bilgisi çipleri, sekmede özellik tablosu
   ========================================================= */
.detay-v2 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.2rem;
    align-items: start;
}
.detay-galeri { position: sticky; top: 110px; }
.detay-v2 .detay-gorsel {
    align-self: auto; min-height: 0;
    aspect-ratio: 1; /* galeri kartı kare — HB oranı */
    border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
}

/* Başlık: marka renkli inline (HB "Koç Fırınlı Kuzine..." deseni) */
.detay-ad { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 .3rem; }
.detay-marka-ic { color: var(--marka); font-weight: 800; text-decoration: none; }
.detay-marka-ic:hover { text-decoration: underline; }
.detay-v2 .detay-ozet { margin-bottom: .8rem; }

/* Satıcı satırı */
.detay-satici { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.satici-chip, .satici-sor {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 99px;
    background: var(--bg); border: 1px solid var(--cizgi-acik);
    font-size: 12px; font-weight: 600; color: var(--metin-2);
    text-decoration: none;
}
.satici-chip b { color: var(--marka); font-weight: 800; }
.satici-sor { background: #fff; transition: border-color var(--gecis), color var(--gecis); }
.satici-sor .ikn { color: #25D366; }
.satici-sor:hover { border-color: #25D366; color: #128C4B; }

/* Fiyat: HB gibi sade ve büyük, panel yok */
.detay-fiyat-blok { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-bottom: .9rem; }
.detay-fiyat-blok .fiyat-ust { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.detay-buyuk-fiyat { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--metin); }
.detay-fiyat-blok .al-kazanc { margin: 0; }

/* Satın alma satırı: buton geniş (HB tam genişlik CTA) */
.detay-al-satir { max-width: 480px; }
.detay-al-satir .al-cta { flex: 1; }
.detay-sag .al-toplam { max-width: 480px; }

/* Teslimat paneli: HB'nin gri kutusu */
.teslimat-panel {
    margin-top: 1.2rem; padding: 1rem 1.1rem;
    background: var(--bg); border-radius: 12px;
    display: flex; flex-direction: column; gap: .6rem;
    max-width: 560px;
}
.tp-baslik { display: block; font-size: 12.5px; font-weight: 800; color: var(--metin); }
.tp-satir { display: flex; align-items: flex-start; gap: .6rem; font-size: 12.5px; color: var(--metin-2); line-height: 1.5; }
.tp-satir .ikn { color: var(--marka); flex: none; margin-top: .1rem; }
.tp-satir strong { color: var(--metin); }
.tp-info {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .2rem; padding: .55rem .8rem;
    background: var(--marka-a); border-radius: 9px;
    font-size: 12px; font-weight: 700; color: var(--marka);
    text-decoration: none;
    transition: background var(--gecis);
}
.tp-info:hover { background: #D9ECEF; }

/* Ürün bilgileri çipleri (HB kv kutuları) */
.detay-bilgi-blok { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .55rem; max-width: 560px; }
.bilgi-cipleri { display: flex; flex-wrap: wrap; gap: .5rem; }
.bilgi-cip {
    display: inline-flex; flex-direction: column; gap: .1rem;
    padding: .5rem .8rem; border-radius: 9px;
    background: var(--bg);
    font-size: 12px; font-weight: 700; color: var(--metin);
}
.bilgi-cip small { font-size: 10px; font-weight: 600; color: var(--metin-3); }
.bilgi-cip-link {
    flex-direction: row; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid var(--cizgi);
    color: var(--aksiyon-k2); text-decoration: none;
    transition: border-color var(--gecis);
}
.bilgi-cip-link .ikn { color: var(--aksiyon-2); }
.bilgi-cip-link:hover { border-color: var(--aksiyon); }

/* Sekmede özellik tablosu (HB "Ürün özellikleri" gri satırları) */
.ozellik-baslik { font-size: 16px; font-weight: 800; margin: 1.4rem 0 .8rem; }
.ozellik-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; }
.ozellik-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem;
    background: var(--bg); border-radius: 9px;
    font-size: 12.5px;
}
.ozellik-satir span { color: var(--metin-2); font-weight: 600; }
.ozellik-satir b { font-weight: 700; color: var(--metin); text-align: right; }

@media (max-width: 900px) {
    .detay-v2 { grid-template-columns: 1fr; }
    .detay-galeri { position: static; }
    .ozellik-izgara { grid-template-columns: 1fr; }
    .detay-al-satir, .detay-sag .al-toplam, .teslimat-panel, .detay-bilgi-blok { max-width: none; }
}

/* =========================================================
   ÜRÜN GALERİSİ — kapak + ek görseller (HB küçük önizleme deseni)
   ========================================================= */
.galeri-ok {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--cizgi-acik);
    background: rgba(255,255,255,.92); color: var(--metin);
    cursor: pointer;
    box-shadow: var(--golge);
    opacity: 0; pointer-events: none;
    transition: opacity var(--gecis), color var(--gecis), border-color var(--gecis);
}
.detay-gorsel:hover .galeri-ok, .detay-gorsel:focus-within .galeri-ok { opacity: 1; pointer-events: auto; }
.galeri-ok:hover { color: var(--marka); border-color: var(--marka); }
.galeri-ok.geri { left: 12px; }
.galeri-ok.ileri { right: 12px; }
@media (hover: none) { .galeri-ok { opacity: 1; pointer-events: auto; } }

.galeri-kucukler {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: .55rem; margin-top: .8rem;
}
.galeri-kucuk {
    display: grid; place-items: center;
    width: 64px; height: 64px; padding: 6px;
    background: #fff; border: 1.5px solid var(--cizgi-acik); border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.galeri-kucuk img { width: 100%; height: 100%; object-fit: contain; }
.galeri-kucuk:hover { border-color: var(--cizgi); }
.galeri-kucuk.aktif { border-color: var(--aksiyon); box-shadow: 0 0 0 3px rgba(var(--aksiyon-rgb),.15); }

#galeri-buyuk { transition: opacity .15s ease; }

/* =========================================================
   GÖRSEL HOVER HAREKETLERİ KAPALI (kullanıcı isteği)
   Sitedeki hiçbir görsel, üzerine gelince büyümez/kaymaz.
   ========================================================= */
.mini-banner:hover img,
.urun-kart:hover .urun-gorsel img,
.promo-kart.gorselli:hover img,
.gunun-firsati:hover .gf-gorsel img,
.yazi-kart:hover .yazi-gorsel img,
.detay-gorsel:hover img { transform: none; }

/* =========================================================
   GÖRSEL İNCELEME PENCERESİ (lightbox — HB deseni)
   Solda büyük görsel, sağda açık gri önizleme sütunu, ✕ kapat.
   ========================================================= */
.isik-kutu {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    background: rgba(12,32,42,.62);
    padding: 2vh 2vw;
}
.ik-ic {
    display: grid; grid-template-columns: minmax(0, 1fr) 220px;
    width: min(1180px, 100%);
    height: min(740px, 96vh);
    background: #fff;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    animation: cerez-gel .25s ease backwards;
}
.ik-sahne { position: relative; display: grid; place-items: center; padding: 2.2rem; min-width: 0; }
.ik-sahne img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ik-sahne .galeri-ok { opacity: 1; pointer-events: auto; } /* lightbox içinde oklar hep görünür */

.ik-yan {
    display: flex; flex-direction: column; gap: 1.2rem;
    background: #F5F5F5; border-left: 1px solid var(--cizgi-acik);
    padding: 1rem;
}
.ik-kapat {
    align-self: flex-end;
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--cizgi); background: #fff; color: var(--metin-2);
    font-size: 15px; cursor: pointer;
    transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.ik-kapat:hover { background: var(--kirmizi-a); border-color: var(--kirmizi); color: var(--kirmizi); }
.ik-kucukler {
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
    overflow-y: auto; scrollbar-width: thin;
}
.ik-kucukler .galeri-kucuk { background: #fff; }

@media (max-width: 700px) {
    .isik-kutu { padding: 0; }
    .ik-ic {
        grid-template-columns: 1fr; grid-template-rows: 1fr auto;
        width: 100%; height: 100%; border-radius: 0;
    }
    .ik-yan {
        flex-direction: row-reverse; align-items: center;
        border-left: 0; border-top: 1px solid var(--cizgi-acik);
    }
    .ik-kapat { position: absolute; top: 10px; right: 10px; z-index: 5; }
    .ik-kucukler { flex-direction: row; overflow-x: auto; overflow-y: hidden; flex: 1; }
}

/* BUG düzeltme: display:grid, hidden niteliğini eziyordu — lightbox sayfa
   açılışında görünüyor ve kapanmıyordu (al-toplam'daki hatanın aynısı). */
.isik-kutu[hidden] { display: none; }

/* =========================================================
   KIRINTI v2 — HB deseni: ev ikonu, ok ayraçlar,
   koyu tıklanabilir adımlar, gri son öğe
   ========================================================= */
.kirinti-v2 { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.kirinti-v2 a {
    display: inline-flex; align-items: center;
    color: var(--metin); font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    transition: color var(--gecis);
}
.kirinti-v2 a:hover { color: var(--marka); }
.kirinti-ev {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--cizgi-acik); background: #fff;
    color: var(--metin-2) !important;
    transition: border-color var(--gecis), color var(--gecis);
}
.kirinti-ev:hover { border-color: var(--marka); color: var(--marka) !important; }
.kirinti-ok { display: grid; color: var(--metin-3); margin: 0; }
.kirinti-son { font-size: 12.5px; font-weight: 600; color: var(--metin-3); }

/* Kırıntı ev ikonu: beyaz kutu kaldırıldı — zemine karışır, sade ikon */
.kirinti-ev {
    width: auto; height: auto;
    border: 0; background: transparent;
    border-radius: 0;
}

/* =========================================================
   KATALOG BAŞLIK SATIRI — HB deseni:
   solda "Kategori (N ürün)", sağda arama + sıralama
   ========================================================= */
.katalog-baslik-satir {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin: .2rem 0 .4rem;
}
.katalog-h1 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.baslik-adet { font-size: 14px; font-weight: 600; color: var(--metin-3); margin-left: .25rem; }
.katalog-baslik-satir .katalog-arac { margin: 0; flex: 0 1 auto; gap: .55rem; }
.katalog-baslik-satir .arama-kutu { position: relative; max-width: 240px; }
.katalog-baslik-satir .arama-kutu-ikon {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--metin-3); display: grid; pointer-events: none;
}
.katalog-baslik-satir .arama-kutu input {
    width: 100%; margin: 0;
    padding: .5rem .9rem .5rem 2.3rem;
    border: 1px solid var(--cizgi); border-radius: 99px;
    font-size: 12.5px; background: #fff;
    transition: border-color var(--gecis);
}
.katalog-baslik-satir .arama-kutu input:focus { border-color: var(--marka); outline: none; }
.katalog-baslik-satir .sirala select {
    margin: 0; padding: .5rem 2rem .5rem .9rem;
    border: 1px solid var(--cizgi); border-radius: 99px;
    font-size: 12.5px; font-weight: 600; color: var(--metin);
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A6572' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.katalog-cipler { margin: .6rem 0 1rem; }

@media (max-width: 700px) {
    .katalog-baslik-satir .katalog-arac { flex: 1 1 100%; }
    .katalog-baslik-satir .arama-kutu { max-width: none; flex: 1; }
}

/* =========================================================
   BOŞ SONUÇ DURUMU v2 — sıcak, yönlendiren tasarım
   ========================================================= */
.bos-v2 {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 3.2rem 1.5rem;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); /* kesikli çerçeve yerine düz, sakin */
    border-radius: var(--r2);
    box-shadow: var(--golge);
}
.bos-cember {
    display: grid; place-items: center;
    width: 76px; height: 76px; border-radius: 50%;
    background:
        radial-gradient(60% 60% at 50% 40%, rgba(var(--aksiyon-rgb),.14), transparent 70%),
        #EAF4F6;
    color: var(--marka);
    margin-bottom: .6rem;
}
.bos-baslik { font-size: 17px; font-weight: 800; color: var(--metin); }
.bos-metin { margin: 0; font-size: 13px; color: var(--metin-2); max-width: 42ch; text-align: center; line-height: 1.6; }
.bos-oneriler { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.bos-btn { margin-top: 1rem; padding: .65rem 2rem; }

/* Katalog sayfası üst hizası ürün detayıyla eşitlendi (2.2rem → 1rem) */
.katalog-sayfa { padding-top: 1rem; }

/* =========================================================
   DEĞERLENDİRMELER — yıldızlar, yorum kartları, puan seçici
   ========================================================= */
.sekme-rozet {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 .35rem;
    margin-left: .3rem; border-radius: 99px;
    background: var(--aksiyon); color: var(--marka-d2);
    font-size: 11px; font-weight: 800;
}

.yildizlar { display: inline-flex; gap: 1px; font-style: normal; }
.yildiz { color: #D9DEE3; font-size: 18px; font-style: normal; line-height: 1; }
.yildiz.dolu { color: var(--aksiyon); }
.yildizlar.kucuk .yildiz { font-size: 14px; }

.yorum-ozet {
    display: flex; align-items: center; gap: .8rem;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--cizgi-acik);
}
.yorum-ort { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--metin); }
.yorum-ozet small { font-size: 12.5px; color: var(--metin-3); font-weight: 600; }

.yorum-liste { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.2rem; }
.yorum-kart {
    padding: .9rem 1.1rem;
    background: var(--bg); border-radius: 12px;
}
.yorum-kart header { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .4rem; }
.yorum-kart header b { font-size: 13px; font-weight: 700; }
.yorum-onay {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
    color: #00875A; background: var(--yesil-a);
    padding: .2rem .55rem; border-radius: 99px;
}
.yorum-kart header time { margin-left: auto; font-size: 11.5px; color: var(--metin-3); }
.yorum-kart p { margin: 0 !important; font-size: 13px; line-height: 1.6; color: var(--metin-2); }

.yorum-yok, .yorum-not { font-size: 13px; color: var(--metin-2); }
.yorum-not a { color: var(--marka); font-weight: 700; }

/* Puan seçici: ters sıra hilesiyle hover/işaretli yıldız dolumu */
.yorum-form { display: flex; flex-direction: column; gap: .7rem; max-width: 560px; margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--cizgi-acik); }
.yorum-form > b { font-size: 14px; font-weight: 800; }
.puan-secici { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.puan-secici input { all: unset; position: absolute; opacity: 0; pointer-events: none; }
.puan-secici label { font-size: 30px; color: #D9DEE3; cursor: pointer; transition: color .12s ease; line-height: 1; }
.puan-secici label:hover,
.puan-secici label:hover ~ label,
.puan-secici input:checked ~ label { color: var(--aksiyon); }
.yorum-form textarea {
    border: 1px solid var(--cizgi); border-radius: 10px;
    padding: .7rem .9rem; font: 400 13px/1.6 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    resize: vertical;
}
.yorum-form textarea:focus { border-color: var(--marka); outline: none; }
.yorum-form .btn { align-self: flex-start; padding: .6rem 1.6rem; }

/* =========================================================
   DEĞERLENDİRME PANELİ v2 — HB deseni:
   özet (görsel + ortalama + dağılım çubukları), Değerlendir
   butonu, kriterler, avatarlı yorum balonları
   ========================================================= */
.yp-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.yp-baslik { font-size: 15px; font-weight: 800; }
.yp-tum { font-size: 13.5px; font-weight: 800; color: var(--metin); }

.yp-ozet {
    display: flex; align-items: center; gap: 2.2rem; flex-wrap: wrap;
    padding-bottom: 1.4rem; margin-bottom: 1.2rem;
}
.yp-gorsel { width: 110px; height: 110px; object-fit: contain; border: 1px solid var(--cizgi-acik); border-radius: 12px; padding: 8px; background: #fff; }
.yp-ort { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.yp-ort > b { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--metin); line-height: 1; }
.yp-ort small { font-size: 12px; color: var(--metin-3); font-weight: 600; }

.yp-dagilim { display: flex; flex-direction: column; gap: .35rem; min-width: 260px; flex: 0 1 340px; }
.pd-satir { display: flex; align-items: center; gap: .6rem; }
.pd-yildiz { font-size: 12px; font-weight: 800; color: var(--aksiyon-2); width: 26px; }
.pd-cubuk { flex: 1; height: 7px; border-radius: 99px; background: var(--cizgi-acik); overflow: hidden; }
.pd-cubuk i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--aksiyon), #F8BE4F); }
.pd-satir small { width: 20px; text-align: right; font-size: 11.5px; color: var(--metin-2); font-weight: 600; }

.yp-eylem { padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--cizgi-acik); border-bottom: 1px solid var(--cizgi-acik); margin-bottom: 1.2rem; }
.yp-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.6rem; margin-bottom: .9rem; text-decoration: none; }
.yp-kriter-baslik { display: block; font-size: 13px; font-weight: 800; color: var(--aksiyon-k); margin-bottom: .3rem; }
.yp-kriter { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 12.5px !important; color: var(--metin-2); }
.yp-kriter .ikn { color: var(--metin-3); flex: none; }

.yp-adet-not { font-size: 13px; font-weight: 600; color: var(--metin); }

.yorum-kart-v2 { display: flex; gap: .9rem; align-items: flex-start; }
.yk-avatar {
    position: relative; flex: none;
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--marka-a); color: var(--marka);
    font-size: 15px; font-weight: 800;
}
.yk-tik {
    position: absolute; top: -2px; right: -2px;
    display: grid; place-items: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--marka); color: #fff;
    border: 2px solid #fff;
}
.yk-govde { flex: 1; min-width: 0; }
.yorum-kart-v2 header { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .4rem; }
.yorum-kart-v2 header time { font-size: 11.5px; color: var(--metin-3); }
.yorum-kart-v2 header b { font-size: 12.5px; font-weight: 700; color: var(--metin-2); }
.yk-balon { background: var(--bg); border-radius: 12px; padding: .8rem 1rem; }
.yk-balon p { margin: 0 0 .5rem !important; font-size: 13px; line-height: 1.6; color: var(--metin); }
.yk-balon small { font-size: 11px; color: var(--metin-3); }

@media (max-width: 700px) {
    .yp-ozet { gap: 1.2rem; }
    .yp-gorsel { width: 84px; height: 84px; }
    .yp-ort > b { font-size: 34px; }
    .yp-dagilim { min-width: 0; flex: 1 1 100%; }
}

/* ---- Doğrulama tiki ipucu balonu ---- */
.yk-tik { cursor: help; }
.yk-tik::after {
    content: attr(data-ipucu);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: var(--marka-d2); color: #fff;
    font-size: 11px; font-weight: 600; font-style: normal;
    line-height: 1.3; white-space: nowrap;
    padding: .4rem .65rem; border-radius: 7px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 20;
}
.yk-tik::before { /* balon oku */
    content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%;
    transform: translateX(-50%) translateY(3px);
    border: 5px solid transparent; border-top-color: var(--marka-d2);
    opacity: 0; visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 20;
}
.yk-tik:hover::after, .yk-tik:focus-visible::after,
.yk-tik:hover::before, .yk-tik:focus-visible::before {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* İpucu balonu düzeltmesi: sol kenarda kırpılıyordu —
   balon artık tikten SAĞA doğru açılır, ok sola yaslı */
.yk-tik::after {
    left: -6px; right: auto;
    transform: translateY(3px);
}
.yk-tik::before {
    left: 9px;
    transform: translateY(3px);
}
.yk-tik:hover::after, .yk-tik:focus-visible::after,
.yk-tik:hover::before, .yk-tik:focus-visible::before {
    transform: translateY(0);
}

/* =========================================================
   DEĞERLENDİRME FİLTRE + SIRALAMA (HB deseni)
   ========================================================= */
.yf-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.yf-etiket { font-size: 12.5px; font-weight: 700; color: var(--metin-2); }
.yf-acilir { position: relative; }
.yf-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1rem;
    background: #fff; border: 1px solid var(--cizgi); border-radius: 10px;
    font: 700 12.5px/1 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    color: var(--aksiyon-2); cursor: pointer;
    transition: border-color var(--gecis);
}
.yf-btn:hover, .yf-btn.acik { border-color: var(--aksiyon); }
.yf-btn .ikn { transition: transform .2s ease; color: var(--metin-3); }
.yf-btn.acik .ikn { transform: rotate(180deg); }

.yf-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    min-width: 240px;
    display: flex; flex-direction: column; gap: .1rem;
    background: #fff; border: 1px solid var(--cizgi-acik); border-radius: 12px;
    box-shadow: var(--golge-2);
    padding: .5rem;
}
.yf-panel[hidden] { display: none; } /* display, hidden'ı ezmesin (bilinen tuzak) */
.yf-satir {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--metin);
    cursor: pointer;
    transition: background var(--gecis);
}
.yf-satir:hover { background: var(--bg); }
.yf-satir.pasif { color: var(--metin-3); cursor: default; }
.yf-satir.pasif:hover { background: none; }
.yf-kutu { width: 16px; height: 16px; margin: 0; accent-color: var(--aksiyon); }
.yf-ad { flex: 1; }
.yf-yildiz { font-size: 13px; font-weight: 800; color: #D9DEE3; }
.yf-yildiz.dolu { color: var(--aksiyon); }

.yf-select {
    display: inline-block; width: auto; margin-top: 0; /* global select (width:100%/block) sızmasın */
    padding: .5rem 2rem .5rem 1rem;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23E8930A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center;
    border: 1px solid var(--cizgi); border-radius: 10px;
    font: 700 12.5px/1.2 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    color: var(--aksiyon-2);
    -webkit-appearance: none; appearance: none; cursor: pointer;
    transition: border-color var(--gecis);
}
.yf-select:hover, .yf-select:focus { border-color: var(--aksiyon); outline: none; box-shadow: none; }

/* filtrelenen kartlar gerçekten gizlensin (display:flex, hidden'ı ezmesin) */
.yorum-kart-v2[hidden] { display: none; }

/* =========================================================
   DETAY SEKMELERİ v2 — Teslimat & İade / İptal-İade / Güvenlik
   ========================================================= */

/* --- Teslimat & İade: ikonlu bilgi kartları --- */
.ti-izgara {
    display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
    margin-bottom: 1.1rem;
}
.ti-kart {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .95rem 1.1rem;
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 12px;
}
.ti-ikon {
    flex: none; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.ti-metin b { display: block; font-size: 13px; color: var(--metin); margin-bottom: .2rem; }
.sekme-panel .ti-metin p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--metin-2); }
.ti-metin strong { color: var(--marka); }
.ti-tamami {
    display: flex; width: fit-content; margin: 0 auto; /* kart ızgarasının altında ortalı (HB "Tümünü Gör" deseni) */
    align-items: center; gap: .4rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--marka); border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--marka); text-decoration: none;
    transition: background var(--gecis);
}
.ti-tamami:hover { background: rgba(var(--marka-rgb), .06); }
.ti-tamami .ikn { flex: none; }

/* --- İptal ve İade Koşulları: özet şeridi + içerik tipografisi --- */
.ik-ozet {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .95rem 1.1rem; margin-bottom: 1.2rem;
    background: rgba(var(--marka-rgb), .05);
    border: 1px solid rgba(var(--marka-rgb), .18); border-left: 4px solid var(--marka);
    border-radius: 12px;
}
.ik-ozet-ikon {
    flex: none; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marka); border-radius: 50%; color: #fff;
}
.ik-ozet-metin b { display: block; font-size: 13.5px; color: var(--marka-k2); margin-bottom: .15rem; }
.ik-ozet-metin span { font-size: 12.5px; line-height: 1.55; color: var(--metin-2); }
/* içerik: bölüm başına ikonlu kart (Teslimat & Güvenlik sekmeleriyle aynı dil) */
.ik-izgara {
    /* Uzun ve kısa iade metinlerini iki sütunda aynı satıra koymak kısa kartı
       komşusunun boyuna kadar uzatıp büyük boş alanlar oluşturuyordu. Doküman
       akışı artık tek sütunda; her kart yalnız kendi içeriği kadar yükselir. */
    display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem;
}
.ik-kart {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .95rem 1.1rem;
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 12px;
    align-self: start; min-height: 0;
}
.ik-kart-ikon {
    flex: none; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.ik-kart-metin b { display: block; font-size: 13px; color: var(--metin); margin-bottom: .2rem; }
.sekme-panel .ik-kart-metin p { margin: 0 0 .5rem; font-size: 12.5px; line-height: 1.55; color: var(--metin-2); }
.sekme-panel .ik-kart-metin p:last-child { margin-bottom: 0; }
.sekme-panel .ik-kart-metin p.icerik-not { /* admin *not* bloğu kart içinde de amber kalır */
    font-style: normal;
    background: var(--aksiyon-a); border-left: 3px solid #E5B92E; border-radius: 0 8px 8px 0;
    padding: .5rem .7rem;
}

/* --- Güvenlik: amber uyarı bandı + güvenlik kartları --- */
.gv-uyari {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .95rem 1.1rem; margin-bottom: 1.1rem;
    background: #FFF7E8; border: 1px solid #F3DCA8; border-left: 4px solid var(--aksiyon);
    border-radius: 12px;
}
.gv-uyari-ikon {
    flex: none; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--aksiyon); border-radius: 50%; color: #fff;
}
.gv-uyari-metin b { display: block; font-size: 13.5px; color: #92600A; margin-bottom: .15rem; }
.gv-uyari-metin span { font-size: 12.5px; line-height: 1.55; color: #7A5A1E; }
.gv-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.gv-kart {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .95rem 1.1rem;
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 12px;
}
.gv-ikon {
    flex: none; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.gv-metin b { display: block; font-size: 13px; color: var(--metin); margin-bottom: .2rem; }
.sekme-panel .gv-metin p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--metin-2); }

@media (max-width: 700px) {
    .ti-izgara, .gv-izgara, .ik-izgara { grid-template-columns: 1fr; }
}

/* =========================================================
   "KAZANCIMI GÖR" — fiyat detayı açılır paneli (HB deseni)
   ========================================================= */
.fiyat-satir { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.detay-buyuk-fiyat.indirimli { color: var(--yesil); }   /* indirimli fiyat HB gibi yeşil */
.detay-eski-fiyat { font-size: 14px; }

.kg-kap { position: relative; }
.kg-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .85rem;
    background: var(--yesil-a); border: 1px solid transparent; border-radius: 999px;
    font: 600 12.5px/1 'Figtree', -apple-system, 'Segoe UI', sans-serif;
    color: #067A4E; cursor: pointer;
    transition: border-color var(--gecis);
}
.kg-btn b { font-weight: 800; }
.kg-btn:hover, .kg-btn.acik { border-color: var(--yesil); }
.kg-btn .ikn { transition: transform .2s ease; }
.kg-btn.acik .ikn { transform: rotate(180deg); }

.kg-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 45;
    width: 300px;
    background: #fff; border: 1px solid var(--cizgi-acik); border-radius: 14px;
    box-shadow: var(--golge-2);
    padding: 1rem 1.1rem;
}
.kg-panel[hidden] { display: none; } /* display, hidden'ı ezmesin (bilinen tuzak) */
.kg-baslik { display: block; font-size: 13.5px; font-weight: 800; color: var(--metin); margin-bottom: .55rem; }
.kg-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .4rem 0;
    font-size: 12.5px; font-weight: 600; color: var(--metin-2);
}
.kg-satir del { color: var(--metin-3); }
.kg-toplam {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: .45rem; padding-top: .65rem;
    border-top: 1px solid var(--cizgi-acik);
    font-size: 12.5px; font-weight: 700; color: var(--metin);
}
.kg-toplam b { color: var(--yesil); font-weight: 800; }

@media (max-width: 700px) {
    .kg-panel { left: auto; right: 0; } /* dar ekranda taşmasın */
}

/* Sekme kabındaki overflow:hidden, yf-panel açılırını kırpıyordu.
   Kabı serbest bırak; yuvarlak köşeyi sekme barının kendisinde koru. */
.detay-sekmeler { overflow: visible; scroll-margin-top:155px; }
.sekme-btnler { border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0; }

/* =========================================================
   POPÜLER ARAMALAR — ürün etiketleri (HB deseni)
   ========================================================= */
.pa-kutu {
    background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    box-shadow: var(--golge);
    padding: 0 1.4rem 1.4rem;
}
.pa-baslik {
    margin: 0 -1.4rem 1.2rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--cizgi-acik);
    text-align: center;
    font-size: 15px; font-weight: 800; color: var(--metin);
}
.pa-etiketler {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
}
.pa-etiket {
    display: block;
    padding: .55rem 1rem;
    background: var(--bg); border-radius: 999px;
    text-align: center;
    font-size: 12.5px; font-weight: 700; color: var(--metin-2);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background var(--gecis), color var(--gecis);
}
.pa-etiket:hover { background: rgba(var(--marka-rgb), .08); color: var(--marka); }

@media (max-width: 900px) { .pa-etiketler { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pa-etiketler { grid-template-columns: 1fr; } }

/* =========================================================
   ÜRÜN KARTI CİLASI — gerçek yıldız puanı + ince rötuşlar
   ========================================================= */
.kart-puan {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-bottom: .35rem;
}
.kart-puan b { font-size: 12.5px; font-weight: 800; color: var(--metin); }
.kart-puan .yildiz { font-size: 12px; }
.kart-puan .yildiz.dolu { color: var(--aksiyon); }
.kart-puan small { font-size: 11.5px; font-weight: 600; color: var(--metin-3); }

/* hover: hareket YOK (bilinçli) — yalnız kenarlık/gölge tonu derinleşir */
.urun-kart { transition: border-color var(--gecis), box-shadow var(--gecis); }
.urun-kart:hover { border-color: var(--cizgi); box-shadow: var(--golge-2); }

/* başlık kart genişliğini iki satırda geçmesin */
.urun-govde h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   ADET SEÇİCİ v2 — hap gövde + yuvarlak petrol butonlar
   (global input kuralı içteki input'a çerçeve sızdırıyordu:
   eş özgüllükte olduğundan buradaki SON blok kazanır)
   ========================================================= */
.adet-kutusu {
    display: inline-flex; align-items: center;
    height: 46px; padding: 0 .35rem;
    background: #fff; border: 1px solid var(--cizgi); border-radius: 999px;
}
.adet-btn {
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .07);
    font-size: 17px; line-height: 1; color: var(--marka); cursor: pointer;
    transition: background var(--gecis), color var(--gecis);
}
.adet-btn:hover { background: rgba(var(--marka-rgb), .14); color: var(--marka-k2); }
.adet-kutusu input {
    width: 44px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    text-align: center;
    font: 700 14.5px 'Figtree', sans-serif; color: var(--metin);
    -moz-appearance: textfield; appearance: textfield;
}
.adet-kutusu input:focus { border: 0; box-shadow: none; outline: none; }
.adet-kutusu.kucuk { height: 36px; padding: 0 .25rem; }
.adet-kutusu.kucuk .adet-btn { width: 26px; height: 26px; font-size: 14px; }
.adet-kutusu.kucuk input { width: 34px; font-size: 12.5px; }

/* =========================================================
   TANITIM GÖRSELLERİ — Ürün Açıklaması sekmesinde tam genişlik
   ========================================================= */
.aciklama-gorsel {
    display: block; width: 100%; height: auto;
    margin: 1.1rem 0;
    border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
}
.aciklama-gorsel:last-child { margin-bottom: 0; }
/* admin: tanıtım listesinde yer tutucu numarası */
.tanitim-no { display: block; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--metin-3); }

/* =========================================================
   İLETİŞİM v2 — kanal kartları, konu çipleri, bilgi satırları
   ========================================================= */
.il-kanallar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.il-kanal {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1.1rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    text-decoration: none;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.il-kanal:hover { border-color: var(--cizgi); box-shadow: var(--golge-2); }
.il-kanal-ikon {
    flex: none; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.il-kanal.wa .il-kanal-ikon { background: var(--yesil-a); color: var(--yesil); }
.il-kanal-metin b { display: block; font-size: 13.5px; color: var(--metin); margin-bottom: .1rem; }
.il-kanal-metin small { font-size: 12px; color: var(--metin-3); }

/* Konu çipleri (radio hapları) — global input kuralı radio'ya sızmasın diye görsel gizli */
.alan-baslik { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: .4rem; color: var(--metin); }
.konu-cipler { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .95rem; }
.konu-cip { margin: 0; cursor: pointer; }
.konu-cip input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
.konu-cip span {
    display: inline-block;
    padding: .5rem .9rem;
    background: var(--bg); border: 1px solid var(--cizgi); border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--metin-2);
    transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.konu-cip:hover span { border-color: var(--marka); color: var(--marka); }
.konu-cip input:checked + span { background: var(--marka); border-color: var(--marka); color: #fff; }
.konu-cip input:focus-visible + span { outline: 2px solid var(--aksiyon); outline-offset: 2px; }

/* Yan bilgi kutusu: ikon rozetli satırlar */
.il-satirlar { display: flex; flex-direction: column; gap: .85rem; }
.il-satir { display: flex; align-items: flex-start; gap: .7rem; }
.il-satir-ikon {
    flex: none; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.il-satir b { display: block; font-size: 12.5px; color: var(--metin); margin-bottom: .1rem; }
.il-satir span, .il-satir a { font-size: 12.5px; line-height: 1.5; color: var(--metin-2); }
.il-satir a { font-weight: 700; color: var(--marka); text-decoration: none; }
.il-satir a:hover { text-decoration: underline; }

/* Kurumsal alımlar: koyu petrol vitrin kutusu */

@media (max-width: 700px) { .il-kanallar { grid-template-columns: 1fr; } }

/* Canlı toplam artık Sepete Ekle butonunun içinde — kesikli kutu kaldırıldı.
   Adet 1'e dönünce gizlenir; [hidden] kuralı şart (bilinen display tuzağı). */
.al-cta-toplam {
    margin-left: .3rem; padding-left: .7rem;
    border-left: 1px solid rgba(255, 255, 255, .45);
    font-weight: 800; white-space: nowrap;
}
.al-cta-toplam[hidden] { display: none; }

/* =========================================================
   İLETİŞİM v3 — koyu petrol hero + taşan kartlar + onay paneli
   ========================================================= */
.il-hero {
    background: linear-gradient(135deg, #0B4A54, var(--marka) 60%, #11828F);
    padding: 2.2rem 0 3.6rem; /* alt boşluk: taşan kartlara yer */
}
.il-hero-kirinti { font-size: 12px; color: rgba(255, 255, 255, .55); margin-bottom: .5rem; }
.il-hero-kirinti a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.il-hero-kirinti a:hover { color: #fff; }
.il-hero-kirinti span { margin: 0 .3rem; }
.il-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0 0 .35rem; }
.il-hero p { font-size: 13.5px; color: rgba(255, 255, 255, .78); margin: 0; }

.il-bolum { padding-top: 0; }
.il-kanallar.hero-tasan { margin-top: -2.4rem; } /* kartlar hero'nun üstüne biner */
.il-kanallar.hero-tasan .il-kanal { box-shadow: var(--golge); }

/* Form başlık satırı + yanıt süresi rozeti */
.il-form-baslik { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.il-form-baslik .iletisim-alt { margin: 0; }
.il-yanit-rozet {
    flex: none; display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .75rem; margin-top: .1rem;
    background: var(--yesil-a); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; color: #067A4E;
    white-space: nowrap;
}
.il-yanit-rozet .ikn { color: var(--yesil); }

/* Gönderim sonrası onay paneli (formun yerine) */
.il-basari { text-align: center; padding: 2.2rem 1rem; }
.il-basari-ikon {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 0 auto 1rem;
    background: var(--yesil-a); border-radius: 50%;
    color: var(--yesil);
}
.il-basari h2 { font-size: 19px; font-weight: 800; margin-bottom: .5rem; }
.il-basari p { font-size: 13.5px; line-height: 1.7; color: var(--metin-2); margin-bottom: 1.3rem; }
.il-basari p a { color: var(--marka); font-weight: 700; }
.il-basari-btnler { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }

/* Form altı gizlilik notu */
.il-kvkk-not {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin: .8rem 0 0; font-size: 11.5px; color: var(--metin-3);
}
.il-kvkk-not .ikn { flex: none; color: var(--metin-3); }

/* SSS yönlendirme kartı */
a.il-sss {
    display: flex; align-items: center; gap: .7rem;
    text-decoration: none;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
a.il-sss:hover { border-color: var(--cizgi); box-shadow: var(--golge-2); }
.il-sss-metin { flex: 1; }
.il-sss-metin b { display: block; font-size: 12.5px; color: var(--metin); margin-bottom: .15rem; }
.il-sss-metin small { font-size: 12px; line-height: 1.5; color: var(--metin-2); }
.il-sss-ok { flex: none; color: var(--marka); }

@media (max-width: 700px) {
    .il-hero h1 { font-size: 21px; }
    .il-form-baslik { flex-direction: column; gap: .5rem; }
}

/* =========================================================
   SSS v2 — hero + canlı arama + kategori grupları
   ========================================================= */
.sss-ara {
    position: relative;
    margin-bottom: 1.5rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 999px;
    box-shadow: var(--golge);
}
.sss-ara.hero-tasan { margin-top: -2.4rem; } /* iletişimdeki kanal kartları gibi hero'ya biner */
.sss-ara-ikon {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: var(--metin-3); pointer-events: none;
}
.sss-ara input {
    width: 100%; margin: 0;
    padding: .95rem 1.2rem .95rem 2.9rem;
    border: 0; border-radius: 999px; background: none; box-shadow: none;
    font: 600 13.5px 'Figtree', sans-serif; color: var(--metin);
}
.sss-ara input:focus { border: 0; box-shadow: none; outline: none; }
.sss-ara:focus-within { border-color: var(--marka); }

.sss-grup { margin-bottom: 1.5rem; }
.sss-grup:last-child { margin-bottom: 0; }
.sss-grup-baslik {
    display: flex; align-items: center; gap: .55rem;
    margin: 0 0 .7rem;
    font-size: 14.5px; font-weight: 800; color: var(--metin);
}
.sss-grup-ikon {
    flex: none; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.sss-grup-baslik small { font-size: 12px; font-weight: 600; color: var(--metin-3); }

/* akordeon cilası: petrol vurgu, yumuşak açılış */
.sss summary { transition: color var(--gecis); }
.sss summary:hover { color: var(--marka); }
.sss[open] summary { color: var(--marka); }
.sss summary::after { color: var(--marka); }
.sss[open] { border-color: rgba(var(--marka-rgb), .35); }

/* canlı filtre gizlemeleri (details/section display'i hidden'ı ezmesin) */
.sss[hidden], .sss-grup[hidden] { display: none; }

/* yan paneldeki WhatsApp kartı ikonu yeşil */
.sss-wa-ikon { background: var(--yesil-a); color: var(--yesil); }

/* yan sütun hero çizgisine yapışmasın (solda arama kutusu bilerek taşıyor, sağ taşımıyor) */
.sss-yan { margin-top: 1.3rem; }

/* =========================================================
   KURUMSAL SAYFA v2 — doküman meta, numaralı bölümler, içindekiler
   ========================================================= */
.dok-meta {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    padding-bottom: 1rem; margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--cizgi-acik);
}
.dok-meta-oge { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; font-weight: 600; color: var(--metin-3); }
.dok-meta-oge b { color: var(--metin-2); }
.dok-meta-oge .ikn { color: var(--marka); }
.dok-bolum { scroll-margin-top: 110px; } /* çapa tıklanınca yapışkan başlığın altına gelmesin */
.icerik-govde .dok-bolum h2 {
    display: flex; align-items: center; gap: .6rem;
    margin: 1.6rem 0 .55rem; padding-bottom: .45rem;
}
.dok-bolum:first-of-type h2 { margin-top: .2rem; }
.dok-no {
    flex: none; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    font-size: 11.5px; font-weight: 800; color: var(--marka);
}
.dok-bolum p { line-height: 1.75; }
.icerik-liste {
    display: flex; flex-direction: column; gap: 0;
    margin: .8rem 0 1.15rem; padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--cizgi-acik); border-radius: 13px;
    background: var(--beyaz);
}
.icerik-liste li {
    position: relative;
    padding: .72rem .9rem .72rem 2.55rem;
    border: 0; border-bottom: 1px solid var(--cizgi-acik); border-radius: 0;
    background: #FBFCFC; color: var(--metin-2);
    font-size: 13px; line-height: 1.65;
}
.icerik-liste li:nth-child(even) { background: var(--beyaz); }
.icerik-liste li:last-child { border-bottom: 0; }
.icerik-liste:not(.icerik-liste-numarali) li::before {
    content: '✓';
    position: absolute; left: .8rem; top: .72rem;
    width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(var(--marka-rgb), .09);
    color: var(--marka); font-size: 11px; font-weight: 900;
}
.icerik-liste-numarali { counter-reset: dok-adim; }
.icerik-liste-numarali li { counter-increment: dok-adim; padding-left: 2.65rem; }
.icerik-liste-numarali li::before {
    content: counter(dok-adim);
    position: absolute; left: .8rem; top: .72rem;
    width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(var(--marka-rgb), .1);
    color: var(--marka); font-size: 10.5px; font-weight: 850;
}

@media (max-width: 700px) {
    .icerik-liste { border-radius: 12px; }
    .icerik-liste li { padding: .68rem .75rem .68rem 2.35rem; font-size: 12.5px; }
    .icerik-liste:not(.icerik-liste-numarali) li::before,
    .icerik-liste-numarali li::before { left: .68rem; top: .68rem; width: 20px; height: 20px; }
}

/* İçindekiler */
.dok-ic-linkler { display: flex; flex-direction: column; }
.dok-ic-linkler a {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--cizgi-acik);
    font-size: 12.5px; font-weight: 600; color: var(--metin-2); text-decoration: none;
    transition: color var(--gecis);
}
.dok-ic-linkler a:last-child { border-bottom: 0; }
.dok-ic-linkler a:hover { color: var(--marka); }
.dok-ic-linkler a span { flex: none; font-size: 11px; font-weight: 800; color: var(--marka); }

/* =========================================================
   FIRSAT MODU — urunler.php?indirim=1 özel görünümü
   ========================================================= */
.firsat-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.1rem; padding: 1.5rem 1.7rem;
    background: linear-gradient(120deg, #B45309, var(--aksiyon-2) 55%, var(--aksiyon));
    border-radius: var(--r2);
}
.fh-etiket {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-bottom: .5rem; padding: .3rem .7rem;
    background: rgba(255, 255, 255, .16); border-radius: 999px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: #fff;
}
.fh-etiket .ikn { color: #FFD79A; }
.fh-baslik { margin: 0 0 .3rem; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.fh-baslik .baslik-adet { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .75); margin-left: .3rem; }
.fh-metin p { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.fh-yuzde {
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) rotate(12deg);
    font-size: 120px; font-weight: 800; line-height: 1;
    color: rgba(255, 255, 255, .12); user-select: none; pointer-events: none;
}

/* fırsat modunda h1 hero'da — solda çipler, sağda araçlar aynı hizada */
.katalog-firsat .katalog-baslik-satir { justify-content: space-between; align-items: center; }
.katalog-firsat .katalog-baslik-satir .katalog-cipler { margin-bottom: 0; }
/* kartlar sıcak amber çerçeve alır, hover'da koyulaşır (hareket yok) */
.katalog-firsat .urun-kart { border-color: #F3DFC2; }
.katalog-firsat .urun-kart:hover { border-color: #E8B45A; }

@media (max-width: 700px) {
    .firsat-hero { padding: 1.2rem 1.2rem; }
    .fh-baslik { font-size: 19px; }
    .fh-yuzde { font-size: 80px; }
}

/* =========================================================
   REHBER v2 — öne çıkan yazı + yazı detayı
   ========================================================= */
/* HayatBurada deseni: tam görselli yazı slider'ı + bölüm etiketi + kart ızgarası */
.rehber-slider { margin-bottom: 2rem; }
.rehber-slider.hero-tasan-kutu { margin-top: 1rem; } /* hero'ya binmesin, altından nefes payıyla başlasın */
.rg-slayt-etiket {
    align-self: flex-start;
    padding: .3rem .7rem;
    background: var(--aksiyon); border-radius: 4px;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--marka-d2);
}

.rg-bolum-ust {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; padding-bottom: .6rem;
    border-bottom: 1px solid var(--cizgi-acik);
}
.rg-sayfa-notu { margin-left: .6rem; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--metin-3); }
.rg-ust-kutu { /* 2+ sayfada slider yok: başlık kutusu hero'nun altından başlar */
    margin-top: 1rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1rem 1.3rem .85rem;
}

/* Sayfalama: ‹ 1 2 3 › */
.sayfalama {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    margin-top: 1.8rem;
}
.sayfa-no, .sayfa-ok {
    display: flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 .5rem;
    background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 10px;
    font-size: 13px; font-weight: 700; color: var(--metin-2); text-decoration: none;
    transition: border-color var(--gecis), color var(--gecis);
}
.sayfa-no:hover, .sayfa-ok:hover { border-color: var(--marka); color: var(--marka); }
.sayfa-no.aktif { background: var(--marka); border-color: var(--marka); color: #fff; cursor: default; }

/* =========================================================
   HOVER'DA KAYMA YOK (kullanıcı tercihi — site geneli)
   Renk/gölge değişimi kalır, konum hareketi kalkar.
   ========================================================= */
.ft-linkler a:hover { padding-left: 0; }                     /* footer linkleri sağa kaymasın */

/* =========================================================
   HESABIM v2 — özet kartları + açılır sipariş satırları
   ========================================================= */
/* HB düzeni: sol profil menüsü + sağ sipariş listesi */
.hs2-duzen {
    display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.6rem;
    align-items: start; padding-top: 1rem;
}
.hs2-yan, .hs2-ana { min-width: 0; }
.hs2-yan {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1.3rem 1.1rem;
    position: sticky; top: 150px;
}
.hs2-profil { display: flex; align-items: center; gap: .8rem; padding: 0 .3rem 1.1rem; border-bottom: 1px solid var(--cizgi-acik); }
.hs2-avatar {
    flex: none; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marka); border-radius: 50%;
    font-size: 20px; font-weight: 800; color: #fff;
}
.hs2-kimlik { min-width: 0; }
.hs2-kimlik b { display: block; font-size: 14px; letter-spacing: .01em; color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs2-kimlik small { display: block; font-size: 11.5px; color: var(--metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs2-menu { display: flex; flex-direction: column; padding-top: .7rem; }
.hs2-menu a {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .6rem; border-radius: 10px;
    font-size: 13.5px; font-weight: 600; color: var(--metin); text-decoration: none;
    transition: background var(--gecis), color var(--gecis);
}
.hs2-menu a:hover { background: var(--bg); color: var(--marka); }
.hs2-menu a .ikn { color: var(--marka); flex: none; }
.hs2-menu a.aktif { color: var(--aksiyon-2); background: var(--aksiyon-a3); }
.hs2-menu a.aktif .ikn { color: var(--aksiyon-2); }
.hs2-menu a.hs2-cikis { color: var(--kirmizi); margin-top: .3rem; }
.hs2-menu a.hs2-cikis .ikn { color: var(--kirmizi); }
.hs2-menu a.hs2-cikis:hover { background: #FDF1F0; color: var(--kirmizi); }
.hs2-mobil-bilgi { display: none !important; }

.hs2-baslik { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 1rem; color: var(--metin); }

/* araçlar: arama + durum çipleri */
.hs2-araclar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hs2-ara { position: relative; }
.hs2-ara-ikon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--metin-3); pointer-events: none; }
.hs2-ara input {
    width: 210px; margin: 0;
    padding: .55rem .9rem .55rem 2.2rem;
    background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 10px;
    font: 600 12.5px 'Figtree', sans-serif; color: var(--metin);
    display: inline-block;
}
.hs2-ara input:focus { border-color: var(--marka); outline: none; box-shadow: none; }
.hs2-cipler { display: flex; gap: .45rem; flex-wrap: wrap; }
.hs2-cip {
    padding: .5rem .9rem;
    background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 10px;
    font: 700 12px 'Figtree', sans-serif; color: var(--metin-2); cursor: pointer;
    transition: border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.hs2-cip:hover { border-color: var(--aksiyon-2); color: var(--aksiyon-2); }
.hs2-cip.aktif { border-color: var(--aksiyon-2); color: var(--aksiyon-2); background: var(--aksiyon-a3); }

/* sipariş satırı (HB anatomisi): görseller | no | durum | tarih+tutar | ok */
.hs2-gorseller { display: flex; gap: .35rem; }
.hs2-gorsel {
    width: 44px; height: 44px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 8px;
    overflow: hidden;
}
.hs2-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.hs2-gorsel .gorsel-yok { font-size: 20px; }
.hs2-fazla { font-size: 11.5px; font-weight: 800; color: var(--metin-2); }
.hs2-no { font-size: 12.5px; color: var(--metin-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs2-no b { color: var(--metin); }
.hs2-durum { display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hs2-yeni         { color: var(--aksiyon-metin); }
.hs2-hazirlaniyor { color: #24518F; }
.hs2-kargoda      { color: #55389B; }
.hs2-teslim       { color: var(--yesil); }
.hs2-iptal        { color: var(--kirmizi); }
.hs2-sag { text-align: right; }
.hs2-sag small { display: block; font-size: 11.5px; color: var(--metin-3); }
.hs2-sag b { font-size: 13.5px; font-weight: 800; color: var(--yesil); }

@media (max-width: 900px) {
    .hs2-duzen { grid-template-columns: 1fr; }
    .hs2-yan { position: static; }
}

/* Değerlendirmelerim */
.dg-liste { display: flex; flex-direction: column; gap: .8rem; }
.dg-kart {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
}
.dg-gorsel {
    flex: none; width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 10px;
    overflow: hidden; text-decoration: none;
}
.dg-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.dg-gorsel .gorsel-yok { font-size: 26px; }
.dg-govde { flex: 1; min-width: 0; }
.dg-ust { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .25rem; }
.dg-urun { font-size: 13.5px; font-weight: 700; color: var(--metin); text-decoration: none; }
.dg-urun:hover { color: var(--marka); }
.dg-orta { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.dg-orta time { font-size: 11.5px; color: var(--metin-3); }
.dg-yorum { margin: 0; font-size: 13px; line-height: 1.65; color: var(--metin-2); }

/* Kuponlarım boş durumu */
.kp-bos-ikon {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 0 auto 1rem;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}

/* Kullanıcı Bilgilerim formu */
.kb-form { max-width: 640px; }
.kb-kutu {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1.3rem 1.4rem; margin-bottom: 1rem;
}
.kb-kutu-baslik {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 1rem; font-size: 14px; font-weight: 800; color: var(--metin);
}
.kb-kutu-baslik .ikn { color: var(--marka); }
.kb-kutu-baslik small { font-size: 11.5px; font-weight: 600; color: var(--metin-3); }
.kb-kutu input:disabled { background: var(--bg); color: var(--metin-3); cursor: not-allowed; }
.kb-kutu { scroll-margin-top: 150px; } /* alt menü çapaları yapışkan başlığın altına gelmesin */

/* Kullanıcı Bilgilerim sekmeleri (detay-sekmeler altyapısı üstüne)
   İçerik sola yapışmasın: her şey ortalanmış ferah bir kolonda yaşar */
.kb-sekmeler { margin-top: 0; scroll-margin-top: 150px; position: relative; }
.kb-sekmeler::before { /* marka prizma çizgisi kartın tepesinde */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--r2) var(--r2) 0 0;
    background: linear-gradient(90deg,
        var(--marka) 0%, var(--marka-2) 20%, var(--marka-buz) 38%,
        #C8EAD9 50%,
        var(--aksiyon-acik) 64%, var(--aksiyon) 82%, var(--marka) 100%);
}
.kb-sekmeler .sekme-panel { padding: 2.4rem 1.5rem 2.8rem; position: relative; overflow: hidden; }
.kb-filigran { /* köşede silik panel ikonu — doku, dikkat çelmez */
    position: absolute; right: -24px; top: -18px;
    color: var(--marka); opacity: .05;
    transform: rotate(12deg);
    pointer-events: none; user-select: none;
}
.kb-sekmeler .kb-panel-baslik,
.kb-sekmeler .kb-panel-alt,
.kb-sekmeler .kb-form,
.kb-sekmeler .hata-kutu { max-width: 520px; margin-left: auto; margin-right: auto; }

.kb-panel-baslik {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 .35rem; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--metin);
}
.kb-panel-ikon {
    flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.kb-panel-alt { margin: 0 0 1.5rem; font-size: 13px; line-height: 1.6; color: var(--metin-2); }
.kb-sekmeler .hata-kutu { margin-bottom: 1.1rem; }

/* form elemanları: daha dolgun, odakta petrol halka */
.kb-sekmeler .kb-form label { margin-bottom: 1.05rem; }
.kb-sekmeler .kb-form input {
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: 13.5px;
}
.kb-sekmeler .kb-form input:focus {
    border-color: var(--marka);
    box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12);
}
.kb-sekmeler .kb-form input:disabled { background: var(--bg); color: var(--metin-3); cursor: not-allowed; }
.kb-sekmeler .kb-maskeli input:disabled { background: var(--beyaz); color: var(--metin-2); cursor: default; }
.kb-sekmeler .kb-form .btn {
    display: block; width: 100%;
    margin-top: 1.2rem; padding: .85rem 1rem;
    font-size: 14px;
}
.kb-secmeli { font-weight: 600; color: var(--metin-3); }
.kb-cinsiyet { margin-bottom: 1.1rem; }

/* İletişim bilgileri: gri kutu + maskeli alanlar (HB deseni) */
.kb-gri {
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 12px;
    padding: 1.1rem 1.2rem; margin: .4rem 0 1.1rem;
}
.kb-gri h4 { margin: 0 0 .2rem; font-size: 14px; font-weight: 800; color: var(--metin); }
.kb-maskeli { margin-top: .9rem; }
.kb-maskeli-ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.kb-maskeli-ust label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--metin); }
.kb-degistir {
    background: none; border: 0; padding: 0;
    font: 700 12.5px 'Figtree', sans-serif; color: var(--aksiyon-2); cursor: pointer;
}
.kb-degistir:hover { text-decoration: underline; }
.kb-degistir[hidden] { display: none; }
.kb-maskeli input { margin-top: 0; background: var(--beyaz); }
.kb-maskeli input:disabled { background: var(--beyaz); color: var(--metin-2); cursor: default; }

/* =========================================================
   SEPET v2 — hero + kartlı liste + kargo ilerleme çubuğu
   ========================================================= */
.sp2-adet { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.sp2-duzen { padding-top: 1rem; }
.sp2-kart {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    overflow: hidden;
}
.sp2-kart-ust {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.1rem;
    background: #FAFBFC; border-bottom: 1px solid var(--cizgi-acik);
}
.sp2-kart-ust b { display: inline-flex; align-items: center; gap: .45rem; font-size: 13.5px; color: var(--metin); }
.sp2-kart-ust b .ikn { color: var(--marka); }
.sp2-kart-ust small { font-size: 12px; font-weight: 600; color: var(--metin-3); }
.sp2-kart .sepet-satir { border: 0; border-bottom: 1px solid var(--cizgi-acik); border-radius: 0; }
.sp2-kart .sepet-satir:last-child { border-bottom: 0; }
.sp2-stok { display: inline-flex; align-items: center; gap: .25rem; margin-top: .2rem; font-size: 11px; font-weight: 700; color: #C2410C; }
.sp2-stok .ikn { color: #C2410C; }
.sp2-devam {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: .9rem;
    font-size: 12.5px; font-weight: 700; color: var(--marka); text-decoration: none;
}
.sp2-devam:hover { text-decoration: underline; }

/* özet: yapışkan + kargo ilerlemesi + güven satırları */
.sp2-ozet { position: sticky; top: 150px; }
.sp2-kargo-kutu {
    padding: .8rem .9rem; margin-bottom: .9rem;
    background: var(--aksiyon-a3); border: 1px solid #F3DCA8; border-radius: 10px;
}
.sp2-kargo-kutu.tamam { background: var(--yesil-a); border-color: #BFE8D2; }
.sp2-kargo-metin { display: flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; font-size: 12px; color: var(--metin-2); }
.sp2-kargo-metin b { color: var(--metin); }
.sp2-kargo-kutu.tamam .sp2-kargo-metin { color: #067A4E; }
.sp2-kargo-kutu.tamam .sp2-kargo-metin b { color: #067A4E; }
.sp2-kargo-kutu.tamam .ikn { color: var(--yesil); }
.sp2-cubuk { height: 7px; background: rgba(0, 0, 0, .07); border-radius: 99px; overflow: hidden; }
.sp2-cubuk span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--aksiyon), var(--aksiyon-2)); }
.sp2-kargo-kutu.tamam .sp2-cubuk span { background: var(--yesil); }
/* =========================================================
   TOAST v2 — sağ altta ikonlu beyaz bildirim kartı
   (WhatsApp balonuyla çakışmasın diye onun üstünde durur)
   ========================================================= */
.toast {
    left: auto; right: 24px; bottom: 96px;
    transform: translateY(12px) scale(.97);
    display: flex; align-items: center; gap: .7rem;
    background: linear-gradient(135deg, #F3FBF7, var(--beyaz) 45%);
    color: var(--metin);
    border: 1px solid rgba(0, 163, 101, .25);
    border-radius: 14px;
    padding: .9rem 1.2rem .9rem 1rem;
    font-weight: 700; text-align: left;
    box-shadow: 0 14px 40px rgba(var(--marka-golge-rgb), .2);
    overflow: hidden;
}
.toast::before { /* durum ikonu: başarıda ✓, hatada ! */
    content: '✓';
    flex: none; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--yesil); border-radius: 50%;
    font-size: 15px; font-weight: 800; color: #fff;
    box-shadow: 0 0 0 4px var(--yesil-a);
}
.toast::after { /* otomatik kapanma sayacı: alt çizgi 2.6 sn'de erir */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--yesil);
    transform-origin: left;
}
.toast.goster { transform: translateY(0) scale(1); }
.toast.goster::after { animation: toast-sayac 2.6s linear forwards; }
@keyframes toast-sayac { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast.hata { background: linear-gradient(135deg, #FDF3F2, var(--beyaz) 45%); border-color: rgba(221, 26, 49, .3); }
.toast.hata::before { content: '!'; background: var(--kirmizi); box-shadow: 0 0 0 4px var(--kirmizi-a); }
.toast.hata::after { background: var(--kirmizi); }

/* =========================================================
   ÖDEME v2 — kayıtlı adres/fatura seçimi + HB özet düzeni
   ========================================================= */
.od2-duzen { padding-top: 1rem; align-items: start; }
.od-hata { margin-top: 1rem; }
.od-kart {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1.4rem 1.5rem; margin-bottom: 1rem;
}
.od-kart-baslik {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 1.1rem;
    font-size: 15.5px; font-weight: 800; color: var(--metin);
}
.od-no {
    flex: none; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marka); border-radius: 50%;
    font-size: 13px; font-weight: 800; color: #fff;
}

/* kayıtlı adres / fatura seçim kartları — eşit boy, düzgün hiza */
.od-adresler { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.od-adres { position: relative; margin: 0; cursor: pointer; }
.od-adres input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
.od-adres-kutu {
    display: flex; flex-direction: column; justify-content: center; gap: .3rem;
    height: 100%; min-height: 86px; box-sizing: border-box;
    padding: .9rem 1.05rem;
    background: var(--beyaz); border: 1.5px solid var(--cizgi); border-radius: 12px;
    transition: border-color var(--gecis), background var(--gecis);
}
.od-adres-kutu b { display: flex; align-items: center; gap: .45rem; font-size: 13px; color: var(--metin); }
.od-adres-kutu small { font-size: 11.5px; line-height: 1.5; color: var(--metin-2); }
.od-adres-ikon {
    flex: none; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.od-adres:hover .od-adres-kutu { border-color: var(--marka); }
.od-adres input:checked + .od-adres-kutu {
    border-color: var(--marka); background: rgba(var(--marka-rgb), .04);
    box-shadow: 0 0 0 1px var(--marka) inset;
}
.od-adres input:checked + .od-adres-kutu::after { /* seçili işareti: sağ üst köşe petrol tik */
    content: '✓'; position: absolute; right: .7rem; top: .6rem;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marka); border-radius: 50%;
    font-size: 11px; font-weight: 800; color: #fff;
}
.od-adres input:focus-visible + .od-adres-kutu { outline: 2px solid var(--aksiyon); outline-offset: 2px; }
.od-adres-yeni { border-style: dashed; background: var(--bg); }
.od-adres-yeni b { color: var(--marka); }

/* yeni adres/fatura formu: kartlardan ayrışan içerik paneli */
.od-alt-form {
    margin-top: .2rem; padding: 1.2rem 1.2rem .9rem;
    background: #FAFBFC; border: 1px solid var(--cizgi-acik); border-radius: 12px;
}
.od-alt-form .od-kaydet-satir { background: var(--beyaz); }

#od-yeni-adres[hidden], #od-yeni-fatura[hidden] { display: none; }
.tip-b[hidden], .tip-k[hidden], .ad-alan-vd[hidden] { display: none; } /* label display:block hidden'ı ezmesin */

/* form elemanları: dolgun, odakta petrol halka (kb-form ile aynı dil) */
.od-kart label { font-size: 12.5px; margin-bottom: 1.05rem; }
.od-kart label small { font-weight: 600; color: var(--metin-3); }
.od-kart input:not([type=checkbox]):not([type=radio]),
.od-kart textarea,
.od-kart select {
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: 13.5px;
}
.od-kart input:focus, .od-kart textarea:focus, .od-kart select:focus {
    border-color: var(--marka);
    box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12);
    outline: none;
}
.od-kart input:disabled { background: var(--bg); color: var(--metin-3); cursor: not-allowed; }

.od-kaydet-satir { /* panel kapanış satırı: solda not, sağda başlık + kaydet butonu */
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin-top: .2rem; padding-top: 1rem;
    border-top: 1px solid var(--cizgi-acik);
}
.od-kaydet-baslik {
    flex: 1; min-width: 160px; max-width: 240px;
    margin: 0 !important; padding: .55rem .8rem !important;
    font-size: 12px !important; border-radius: 8px !important;
    background: var(--beyaz) !important;
}
.od-kaydet-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0; padding: .55rem 1.1rem;
    background: var(--marka); border-color: var(--marka); color: #fff;
    font-size: 12.5px; font-weight: 700; border-radius: 8px;
}
.od-kaydet-btn:hover { background: var(--marka-k2); border-color: var(--marka-k2); color: #fff; }
.od-kaydet-btn .ikn { color: #fff; }
.od-kaydet-not { flex: 1; min-width: 200px; font-size: 11.5px; line-height: 1.5; color: var(--metin-3); }
.od-alt-form .od-kaydet-satir { background: none; }

/* doğrulama: hatalı alan kırmızı halkayla işaretlenir (toast'la birlikte) */
.alan-hata {
    border-color: var(--kirmizi) !important;
    box-shadow: 0 0 0 3px rgba(221, 26, 49, .12) !important;
}
.od-onay.alan-hata-onay { color: var(--kirmizi); }
.od-onay.alan-hata-onay input { outline: 2px solid var(--kirmizi); outline-offset: 1px; border-radius: 3px; }

/* hata kutusu v2: pembe blok yerine beyaz kart + kırmızı şerit (toast diliyle aynı) */
.hata-kutu {
    background: var(--beyaz);
    border: 1px solid rgba(221, 26, 49, .25); border-left: 4px solid var(--kirmizi);
    border-radius: 12px;
    padding: .85rem 1.1rem;
    box-shadow: var(--golge);
    color: var(--metin);
}
.hata-kutu p { color: var(--kirmizi); }

/* sözleşme akordeonları */
.od-sozlesme {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    margin-bottom: .7rem; scroll-margin-top: 150px;
}
.od-sozlesme summary {
    display: flex; align-items: center; gap: .5rem;
    padding: .95rem 1.3rem;
    font-size: 13.5px; font-weight: 800; color: var(--metin);
    cursor: pointer; list-style: none;
}
.od-sozlesme summary::-webkit-details-marker { display: none; }
.od-sozlesme[open] summary { border-bottom: 1px solid var(--cizgi-acik); color: var(--marka); }
.od-sozlesme-ic { padding: 1rem 1.3rem; }
.od-sozlesme-ic p { margin: 0 0 .6rem; font-size: 12.5px; line-height: 1.7; color: var(--metin-2); }
.od-sozlesme-ic h2 { margin: 1rem 0 .4rem; font-size: 13px; font-weight: 800; color: var(--metin); }

/* sağ özet: ödenecek tutar + onay */
.od2-ozet { position: sticky; top: 150px; }
.od-tutar-etiket { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--aksiyon-k2); }
.od-tutar { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--metin); margin: .1rem 0 .9rem; }
.od-rezervasyon { display:flex; align-items:flex-start; gap:.45rem; margin:0 0 1rem; padding:.7rem .8rem; border:1px solid #bce5d2; border-radius:10px; background:#effaf4; color:#176344; font-size:12.5px; line-height:1.45; }
.od-rezervasyon svg { flex:0 0 auto; margin-top:2px; }
.od-rezervasyon.doldu { border-color:#f2c7c2; background:#fff4f2; color:#9a2d24; }
.od-onay {
    display: flex; align-items: flex-start; gap: .55rem;
    margin-bottom: .9rem;
    font-size: 12px; line-height: 1.55; color: var(--metin-2); cursor: pointer;
}
.od-onay input { width: 16px; height: 16px; margin-top: .1rem; flex: none; accent-color: var(--aksiyon-2); }
.od-onay a { color: var(--marka); font-weight: 700; }
.od-dokum { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--cizgi-acik); }
.od-ozet-urun { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .4rem 0 .75rem; }
.od-ozet-gorsel { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cizgi-acik); border-radius: 8px; background: #fff; color: var(--metin-3); }
.od-ozet-gorsel img { width: 100%; height: 100%; padding: 2px; border-radius: 7px; object-fit: contain; }
.od-ozet-gorsel i { position: absolute; right: -5px; top: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 99px; background: var(--marka); color: #fff; font-style: normal; font-size: 8.5px; font-weight: 850; }
.od-ozet-urun-ad { display: flex; flex-direction: column; min-width: 0; }
.od-ozet-urun-ad b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin); font-size: 11.5px; }
.od-ozet-urun-ad small { color: var(--metin-3); font-size: 9.5px; }
.od-ozet-urun > strong { white-space: nowrap; color: var(--metin-2); font-size: 11px; }
.od-bedava { color: var(--yesil); font-weight: 700; }

@media (max-width: 800px) { .od2-ozet { position: static; } }

/* =========================================================
   ADRESLERİM — hesapta adres/fatura yönetimi
   ========================================================= */
.ad-bolum { margin-bottom: 1.8rem; }
.ad-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.ad-kart {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1rem 1.1rem;
}
.ad-kart-ust { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .3rem; }
.ad-kart-ust b { font-size: 13.5px; color: var(--metin); }
.ad-sil {
    background: none; border: 0; padding: .1rem .3rem;
    font-size: 13px; color: var(--metin-3); cursor: pointer;
    transition: color var(--gecis);
}
.ad-sil:hover { color: var(--kirmizi); }
.ad-kisi { display: block; font-size: 12px; font-weight: 700; color: var(--metin-2); margin-bottom: .2rem; }
.ad-kart p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--metin-2); }
.ad-yeni {
    grid-column: 1 / -1;
    background: var(--beyaz); border: 1.5px dashed var(--cizgi); border-radius: var(--r2);
}
.ad-yeni summary {
    display: flex; align-items: center; gap: .6rem;
    padding: .95rem 1.1rem;
    font-size: 13px; font-weight: 700; color: var(--marka);
    cursor: pointer; list-style: none;
}
.ad-yeni summary::-webkit-details-marker { display: none; }
.ad-yeni-arti {
    flex: none; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    font-size: 15px; font-weight: 700; color: var(--marka);
}
.ad-form { padding: .3rem 1.1rem 1.2rem; }
.ad-tip-cipler { margin-bottom: 1rem; }
.hs2-baslik .ikn { color: var(--marka); margin-right: .2rem; vertical-align: -2px; }

@media (max-width: 700px) { .ad-izgara { grid-template-columns: 1fr; } }

/* =========================================================
   SEPETE EKLENDİ POPUP'I — ortada onay penceresi
   ========================================================= */
.se-popup { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; }
.se-popup[hidden] { display: none; } /* display, hidden'ı ezmesin (bilinen tuzak) */
.se-arka {
    position: absolute; inset: 0;
    background: rgba(var(--marka-golge-rgb), .45);
    opacity: 0; transition: opacity .18s ease;
}
.se-kutu {
    position: relative; z-index: 1;
    width: min(92vw, 420px);
    background: var(--beyaz); border-radius: 18px;
    box-shadow: 0 24px 64px rgba(var(--marka-golge-rgb), .28);
    padding: 2.2rem 1.8rem 1.8rem;
    text-align: center;
    opacity: 0; transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}
.se-popup.acik .se-arka { opacity: 1; }
.se-popup.acik .se-kutu { opacity: 1; transform: translateY(0); }
.se-kapat {
    position: absolute; right: .9rem; top: .9rem;
    width: 30px; height: 30px;
    background: var(--bg); border: 0; border-radius: 50%;
    font-size: 13px; color: var(--metin-2); cursor: pointer;
    transition: background var(--gecis), color var(--gecis);
}
.se-kapat:hover { background: var(--cizgi-acik); color: var(--metin); }
.se-ikon {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 0 auto 1rem;
    background: var(--yesil-a); border-radius: 50%;
    color: var(--yesil);
}
.se-baslik { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--metin); margin-bottom: .35rem; }
.se-mesaj { margin: 0 0 1.4rem; font-size: 13px; color: var(--metin-2); }
.se-btnler { display: flex; flex-direction: column; gap: .55rem; }
.se-btnler .btn[hidden] { display: none; } /* sepet sayfasında "Sepete Git" gizlenir (display tuzağı) */

/* boş sepet: karşılama kartı + ürün önerileri */
.sp2-bos-kart {
    max-width: 640px; margin-left: auto; margin-right: auto;
    padding: 3rem 2rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    text-align: center;
    margin-top: 1rem; box-shadow: var(--golge);
}
.sp2-bos-ikon {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; margin: 0 auto 1.1rem;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.sp2-bos-kart h2 { margin: 0 0 .5rem; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--metin); }
.sp2-bos-kart p { margin: 0 0 1.4rem; font-size: 13.5px; line-height: 1.7; color: var(--metin-2); }
.sp2-bos-btnler { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.sp2-bos-firsat { display: inline-flex; align-items: center; gap: .4rem; border-color: var(--aksiyon-2); color: var(--aksiyon-2); }
.sp2-bos-firsat:hover { background: var(--aksiyon-a3); }
.sp2-bos-firsat .ikn { color: var(--aksiyon-2); }
.sp2-oneriler { margin-top: 2.2rem; }

/* kupon alanı: katlanır başlık + tek parça girdi/buton kontrolü */
.sp2-kupon-acilir { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--cizgi-acik); }
.sp2-kupon-acilir summary {
    display: flex; align-items: center; gap: .45rem;
    font-size: 12.5px; font-weight: 700; color: var(--marka);
    cursor: pointer; list-style: none;
}
.sp2-kupon-acilir summary::-webkit-details-marker { display: none; }
.sp2-kupon-acilir summary .ikn { color: var(--marka); }
.sp2-kupon-ok { margin-left: auto; display: flex; transition: transform .2s ease; }
.sp2-kupon-acilir[open] .sp2-kupon-ok { transform: rotate(180deg); }

.sp2-kupon { /* girdi + buton tek gövdede: boy farkı diye bir şey yok */
    display: flex; margin-top: .7rem;
    border: 1px solid var(--cizgi); border-radius: 10px;
    overflow: hidden; background: var(--beyaz);
}
.sp2-kupon:focus-within { border-color: var(--marka); }
.sp2-kupon input {
    flex: 1; min-width: 0; width: auto; margin: 0;
    padding: .6rem .8rem;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    font: 700 12.5px 'Figtree', sans-serif; color: var(--metin);
    text-transform: uppercase;
}
.sp2-kupon input::placeholder { text-transform: none; font-weight: 600; }
.sp2-kupon input:focus { border: 0; outline: none; box-shadow: none; }
.sp2-kupon button {
    flex: none; padding: 0 1.1rem;
    border: 0; background: var(--marka);
    font: 700 12.5px 'Figtree', sans-serif; color: #fff; cursor: pointer;
    transition: background var(--gecis);
}
.sp2-kupon button:hover { background: var(--marka-k2); }
.sp2-kupon-mesaj { margin: .5rem 0 0; font-size: 12px; font-weight: 600; color: var(--metin-2); }
.sp2-kupon-mesaj.hata { color: var(--kirmizi); }
.sp2-kupon-cip {
    display: flex; align-items: center; justify-content: space-between; gap: .7rem;
    padding: .6rem .9rem; margin-bottom: .9rem;
    background: var(--yesil-a); border: 1px dashed var(--yesil); border-radius: 10px;
}
.sp2-kupon-cip > span { display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; color: #067A4E; }
.sp2-kupon-cip b { font-weight: 800; }
.sp2-kupon-cip .ikn { color: var(--yesil); }
.sp2-kupon-sil {
    background: none; border: 0; padding: .1rem .3rem;
    font-size: 14px; color: #067A4E; cursor: pointer; line-height: 1;
}
.sp2-kupon-sil:hover { color: var(--kirmizi); }
.sp2-indirim span { color: var(--yesil); font-weight: 700; }
.sp2-indirim-etiket { display:flex; flex-direction:column; align-items:flex-start; gap:.08rem; min-width:0; }
.sp2-indirim-etiket small { display:block; overflow:hidden; max-width:220px; color:var(--metin-3); font-size:10px; font-weight:600; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }

/* güven mühürleri: kutusuz, havadar 3'lü dizi */
.sp2-guven {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--cizgi-acik);
}
.sp2-guven span {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-align: center;
    font-size: 10.5px; font-weight: 600; line-height: 1.35; color: var(--metin-2);
}
.sp2-guven .ikn {
    flex: none; box-sizing: content-box;
    width: 15px; height: 15px; padding: 8px;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}

@media (max-width: 800px) { .sp2-ozet { position: static; } }

/* İletişim tercih kanalları: başlık + açıklama + anahtar (HB deseni) */
.kb-kanal {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.1rem; margin-bottom: .7rem;
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 12px;
}
.kb-kanal-ikon {
    flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.kb-kanal-metin { flex: 1; min-width: 0; }
.kb-kanal-metin b { display: block; font-size: 13px; color: var(--metin); margin-bottom: .15rem; }
.kb-kanal-metin small { font-size: 12px; line-height: 1.55; color: var(--metin-2); overflow-wrap: anywhere; }
.kb-kanal-metin small b { display: inline; font-size: inherit; }
.kb-panel-alt a { color: var(--marka); font-weight: 700; }
.kb-bulten { display: flex; align-items: flex-start; gap: .6rem; font-size: 13px; line-height: 1.6; color: var(--metin-2); cursor: pointer; }
.kb-bulten input { width: 16px; height: 16px; margin-top: .15rem; accent-color: var(--marka); flex: none; }
.kb-bulten b { color: var(--metin); }
.kb-not { margin: .6rem 0 0; font-size: 11.5px; color: var(--metin-3); }

/* Kullanıcı Bilgilerim: tıklayınca açılan alt menü (HB deseni) */
.hs2-acilir { border: 0; }
.hs2-acilir summary {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .6rem; border-radius: 10px;
    font-size: 13.5px; font-weight: 600; color: var(--metin);
    cursor: pointer; list-style: none;
    transition: background var(--gecis), color var(--gecis);
}
.hs2-acilir summary::-webkit-details-marker { display: none; }
.hs2-acilir summary:hover { background: var(--bg); color: var(--marka); }
.hs2-acilir summary .ikn { color: var(--marka); flex: none; }
.hs2-acilir summary.aktif { color: var(--aksiyon-2); background: var(--aksiyon-a3); }
.hs2-acilir summary.aktif .ikn { color: var(--aksiyon-2); }
.hs2-acilir-ok { margin-left: auto; display: flex; transition: transform .2s ease; }
.hs2-acilir[open] .hs2-acilir-ok { transform: rotate(180deg); }
.hs2-alt-menu {
    display: flex; flex-direction: column;
    margin: .15rem 0 .3rem 1.55rem; padding-left: .9rem;
    border-left: 2px solid var(--cizgi-acik);   /* HB'deki dikey kılavuz çizgisi */
}
.hs2-alt-menu a {
    padding: .5rem .4rem; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--metin-2); text-decoration: none;
    transition: color var(--gecis), background var(--gecis);
}
.hs2-alt-menu a:hover { color: var(--marka); background: var(--bg); }
.hs-liste { display: flex; flex-direction: column; gap: .7rem; }
.hs-siparis {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.hs-siparis[open] { border-color: rgba(var(--marka-rgb), .35); box-shadow: var(--golge); }
.hs-siparis summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; /* görseller | no | durum | tarih+tutar | ok */
    align-items: center; gap: 1.1rem;
    padding: .9rem 1.1rem;
    cursor: pointer; list-style: none;
}
.hs-siparis summary::-webkit-details-marker { display: none; }
.hs-no b { display: block; font-size: 13px; color: var(--metin); }
.hs-no small { font-size: 11.5px; color: var(--metin-3); }
.hs-adet { font-size: 12px; font-weight: 600; color: var(--metin-2); white-space: nowrap; }
.hs-tutar { font-size: 14px; font-weight: 800; color: var(--metin); white-space: nowrap; }
.hs-ok { display: flex; color: var(--metin-3); transition: transform .2s ease; }
.hs-siparis[open] .hs-ok { transform: rotate(180deg); }
.hs-detay { border-top: 1px solid var(--cizgi-acik); padding: .9rem 1.1rem; }
.hs-kalem {
    display: flex; align-items: baseline; gap: .8rem;
    padding: .35rem 0;
    font-size: 13px; color: var(--metin-2);
}
.hs-kalem-ad { flex: 1; font-weight: 600; color: var(--metin); }
.hs-kalem-adet { color: var(--metin-3); }
.hs-kalem-fiyat { font-weight: 700; }
.hs-alt-satir {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: .7rem; padding-top: .8rem;
    border-top: 1px dashed var(--cizgi);
    font-size: 12px; color: var(--metin-2);
}
.hs-adres { display: inline-flex; align-items: center; gap: .35rem; }
.hs-adres .ikn { color: var(--marka); flex: none; }
.hs-toplamlar b { color: var(--metin); }
.hs-genel-toplam { color: var(--marka); font-size: 13px; }
.hs-cikis { border-color: var(--kirmizi); color: var(--kirmizi); }
.hs-cikis:hover { background: #FDF1F0; }

@media (max-width: 700px) {
    .hs-ozetler { grid-template-columns: 1fr; }
    .hs-siparis summary { grid-template-columns: minmax(0, 1fr) auto auto; }
    .hs-adet, .hs-ok { display: none; }
}

/* =========================================================
   HESAP MENÜSÜ — header'da hover'la açılır (girişli kullanıcı)
   ========================================================= */
.hesap-kap { position: relative; }
.hesap-kap::after { /* buton ile panel arasındaki boşlukta hover kopmasın */
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}
.hesap-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    width: 240px;
    background: #fff; border: 1px solid var(--cizgi-acik); border-radius: 14px;
    box-shadow: var(--golge-2);
    opacity: 0; visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
}
.hesap-kap:hover .hesap-menu,
.hesap-kap:focus-within .hesap-menu { opacity: 1; visibility: visible; }
.hesap-menu-ust {
    display: flex; align-items: center; gap: .7rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--cizgi-acik);
}
.hm-avatar {
    flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marka); border-radius: 50%;
    font-size: 15px; font-weight: 800; color: #fff;
}
.hm-kimlik { min-width: 0; }
.hm-kimlik b { display: block; font-size: 13px; color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kimlik small { display: block; font-size: 11.5px; color: var(--metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hesap-menu-linkler { display: flex; flex-direction: column; padding: .4rem; }
.hesap-menu-linkler a {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--metin); text-decoration: none;
    transition: background var(--gecis), color var(--gecis);
}
.hesap-menu-linkler a:hover { background: var(--bg); color: var(--marka); }
.hesap-menu-linkler a .ikn { color: var(--marka); flex: none; }
.hm-alt { border-top: 1px solid var(--cizgi-acik); }
.hm-cikis { color: var(--kirmizi); }
.hesap-menu-linkler a.hm-cikis:hover { background: #FDF1F0; color: var(--kirmizi); }
.hesap-menu-linkler a.hm-cikis .ikn { color: var(--kirmizi); }
.yan-linkler a:hover, .yan-linkler a.aktif { padding-left: .1rem; } /* taban padding'le AYNI değer: hover'da hiçbir yöne kayma olmaz */
.mini-banner:hover .mini-ok,
.promo-kart:hover .mini-ok,
.destek-satir:hover .destek-ok,
.rehber-kart:hover .rehber-ok,
.detay-soru:hover .soru-ok { transform: none; }              /* ok uçları da yerinde dursun */
.rg-bolum-baslik {
    margin: 0;
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--metin);
}

.rg-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.rg-kart {
    display: flex; flex-direction: column;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    overflow: hidden; text-decoration: none;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.rg-kart:hover { border-color: var(--cizgi); box-shadow: var(--golge-2); }
.rg-gorsel { position: relative; aspect-ratio: 16 / 10; background: var(--bg); }
.rg-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rg-gorsel .yazi-gorsel-yok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--marka); opacity: .25; }
.rg-rozet {
    position: absolute; left: .8rem; bottom: -0.55rem; z-index: 2;
    padding: .3rem .7rem;
    background: var(--aksiyon); border-radius: 4px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--marka-d2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.rg-govde { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.1rem 1.1rem; }
.rg-baslik {
    font-size: 15px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; color: var(--metin);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color var(--gecis);
}
.rg-kart:hover .rg-baslik { color: var(--marka); }
.rg-ozet {
    font-size: 12.5px; line-height: 1.6; color: var(--metin-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-tarih { margin-top: .2rem; font-size: 11.5px; font-weight: 600; color: var(--metin-3); }

@media (max-width: 900px) { .rg-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rg-izgara { grid-template-columns: 1fr; } }

/* yazı detayı: kart hero'ya binmesin (rehber slider'la aynı karar),
   yan panel de kartla AYNI hizadan başlasın ve kaydırdıkça yazıyla insin (yapışkan) */
.yz-govde.hero-tasan-kutu { margin-top: 1rem; }
.yz-govde ~ .icerik-yan.sss-yan {
    margin-top: 1rem;
    position: sticky; top: 150px;  /* yapışkan başlık + kategori barının altında, ferah boşlukla takip eder */
}

/* yazı detayı — makale iç düzeni */
.yz-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-bottom: 1rem; margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--cizgi-acik);
}
.yz-yazar { display: flex; align-items: center; gap: .6rem; }
.yz-yazar-avatar {
    flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marka); border-radius: 50%; color: #fff;
}
.yz-yazar-metin b { display: block; font-size: 13px; color: var(--metin); }
.yz-yazar-metin small { font-size: 11.5px; color: var(--metin-3); }
.yz-paylas { display: flex; align-items: center; gap: .45rem; }
.yz-paylas-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: none; border: 1px solid var(--cizgi); border-radius: 50%;
    color: var(--metin-2); cursor: pointer; text-decoration: none;
    transition: border-color var(--gecis), color var(--gecis);
}
.yz-paylas-btn:hover { border-color: var(--marka); color: var(--marka); }

.yz-bolum h2 {
    margin: 1.9rem 0 .7rem; padding-left: .85rem;
    border-left: 4px solid var(--aksiyon);               /* amber vurgu çubuğu */
    font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--metin);
}
.yz-bolum:first-of-type h2 { margin-top: 1.4rem; }
.sekme-panel .yz-bolum p, .yz-govde p { font-size: 14px; line-height: 1.85; color: var(--metin-2); }
.yz-govde .yz-giris { font-size: 15px; font-weight: 600; line-height: 1.7; color: var(--metin); }
.yz-govde .icerik-not { margin-top: 1.4rem; }

.yz-hero-meta { display: flex; align-items: center; gap: .6rem; }
.yz-hero-etiket {
    padding: .25rem .65rem;
    background: rgba(255, 255, 255, .16); border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #fff;
}
.yz-govde .yazi-kapak {
    width: 100%; height: auto;
    border-radius: var(--r2); border: 1px solid var(--cizgi-acik);
    margin-bottom: 1.2rem;
}
.yz-giris {
    font-size: 14.5px; font-weight: 600; line-height: 1.7; color: var(--metin);
    padding-bottom: 1rem; margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--cizgi-acik);
}
.yz-govde p { line-height: 1.75; }
.yz-alt-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.6rem; padding: 1.1rem 1.3rem;
    background: rgba(var(--marka-rgb), .05);
    border: 1px solid rgba(var(--marka-rgb), .18); border-left: 4px solid var(--marka);
    border-radius: 12px;
}
.yz-alt-metin b { display: block; font-size: 13.5px; color: var(--metin); margin-bottom: .15rem; }
.yz-alt-metin span { font-size: 12.5px; color: var(--metin-2); }

/* yan panel: görselli mini yazı kartları */
.yan-yazilar { display: flex; flex-direction: column; gap: .7rem; }
.yan-yazi { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.yan-yazi-gorsel {
    position: relative; flex: none; width: 64px; height: 44px;
    border-radius: 8px; overflow: hidden; background: var(--bg);
    border: 1px solid var(--cizgi-acik);
}
.yan-yazi-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yan-yazi-gorsel .yazi-gorsel-yok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--marka); opacity: .3; }
.yan-yazi-metin { min-width: 0; }
.yan-yazi-metin b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; line-height: 1.4; color: var(--metin);
    transition: color var(--gecis);
}
.yan-yazi:hover .yan-yazi-metin b { color: var(--marka); }
.yan-yazi-metin time { font-size: 11px; color: var(--metin-3); }

@media (max-width: 700px) {
    .yazi-one { grid-template-columns: 1fr; }
    .yo-gorsel { min-height: 170px; }
    .yo-govde { padding: 1.1rem 1.2rem; }
}

/* =========================================================
   MÜŞTERİ HİZMETLERİ — yardım konuları + popüler sorular
   ========================================================= */
.mh-baslik { margin: 1.6rem 0 .9rem; font-size: 17px; font-weight: 800; color: var(--metin); }
.mh-konular {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
    margin-bottom: 1.8rem;
}
.mh-konu {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem 1.1rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    text-decoration: none;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.mh-konu:hover { border-color: var(--cizgi); box-shadow: var(--golge-2); }
.mh-konu-ikon {
    flex: none; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .08); border-radius: 50%;
    color: var(--marka);
}
.mh-konu-metin { flex: 1; min-width: 0; }
.mh-konu-metin b { display: block; font-size: 13px; color: var(--metin); margin-bottom: .15rem; }
.mh-konu-metin small { font-size: 12px; line-height: 1.45; color: var(--metin-2); }
.mh-konu-ok { flex: none; color: var(--marka); }
.mh-populer .kamp-firsat-ust h2 .ikn { color: var(--marka); }
.mh-tumu { color: var(--marka); }
.mh-tumu:hover { border-color: var(--marka); }

@media (max-width: 900px) { .mh-konular { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mh-konular { grid-template-columns: 1fr; } }

/* =========================================================
   KAMPANYALAR SAYFASI — banner ızgarası + fırsat vitrini
   ========================================================= */
.kampanya-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center; min-height: 250px;
    margin-bottom: 1.35rem; padding: 2.25rem 2.5rem;
    border: 1px solid rgba(var(--marka-2-rgb), .3); border-radius: 22px;
    background:
        radial-gradient(circle at 84% 18%, rgba(var(--marka-buz-rgb), .2), transparent 24%),
        linear-gradient(120deg, var(--marka-d) 0%, var(--marka) 68%, var(--marka-2) 100%);
    color: #fff;
}
.kampanya-hero::after {
    content: ''; position: absolute; inset: auto -80px -145px auto;
    width: 340px; height: 340px; border-radius: 50%;
    border: 70px solid rgba(var(--aksiyon-rgb), .16);
    pointer-events: none;
}
.kampanya-hero-metin { position: relative; z-index: 2; max-width: 670px; }
.kampanya-hero-etiket {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-bottom: .85rem; padding: .36rem .7rem;
    border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
    background: rgba(255,255,255,.11);
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.kampanya-hero-metin h1 {
    max-width: 620px; margin: 0 0 .65rem;
    color: #fff; font-size: clamp(27px, 3vw, 39px); line-height: 1.08;
    letter-spacing: -.035em;
}
.kampanya-hero-metin p {
    max-width: 600px; margin: 0; color: rgba(255,255,255,.78);
    font-size: 14px; line-height: 1.6;
}
.kampanya-hero-aksiyonlar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.25rem; }
.kampanya-hero-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 42px; padding: .68rem 1rem;
    border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
    color: #fff; font-size: 12.5px; font-weight: 750; text-decoration: none;
    transition: background var(--gecis), border-color var(--gecis);
}
.kampanya-hero-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.kampanya-hero-btn-ana { border-color: var(--aksiyon); background: var(--aksiyon); }
.kampanya-hero-btn-ana:hover { border-color: var(--aksiyon-k); background: var(--aksiyon-k); }
.kampanya-hero-gorsel { position: relative; z-index: 1; width: 240px; height: 180px; justify-self: end; }
.kampanya-hero-halka {
    position: absolute; inset: 50% auto auto 50%; width: 152px; height: 152px;
    transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.24); border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255,255,255,.05), 0 0 0 58px rgba(255,255,255,.025);
}
.kampanya-hero-oran {
    position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-52%) rotate(-8deg);
    color: #fff; font-size: 104px; font-weight: 850; line-height: 1;
    text-shadow: 9px 12px 0 rgba(var(--aksiyon-rgb), .5);
}
.kampanya-hero-parilti { position: absolute; color: var(--aksiyon-acik); font-size: 24px; }
.kampanya-hero-parilti-1 { left: 8px; top: 23px; }
.kampanya-hero-parilti-2 { right: 8px; bottom: 20px; font-size: 16px; }

.kamp-izgara {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
    margin-bottom: 1.6rem;
}
.kamp-izgara .kamp-kart { aspect-ratio: 3 / 1; min-height: 0; }
.kamp-izgara .promo-bos { aspect-ratio: 3 / 1; }

.kamp-firsat-ust {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem;
}
.kamp-firsat-ust h2 {
    display: flex; align-items: center; gap: .45rem;
    margin: 0; font-size: 17px; font-weight: 800; color: var(--metin);
}
.kamp-firsat-ust h2 .ikn { color: var(--aksiyon-2); }
.kamp-firsat-ust h2 small { font-size: 12.5px; font-weight: 600; color: var(--metin-3); }
.kamp-tumu {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1rem;
    border: 1px solid var(--cizgi); border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--aksiyon-2); text-decoration: none;
    transition: border-color var(--gecis);
}
.kamp-tumu:hover { border-color: var(--aksiyon); }
.kamp-firsatlar .urun-kart { border-color: #F3DFC2; }   /* fırsat modundaki sıcak çerçeve */
.kamp-firsatlar .urun-kart:hover { border-color: #E8B45A; }
.kampanya-bos-kart {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(250px, 330px);
    align-items: center; gap: 1.2rem;
    padding: 1.45rem 1.55rem; margin-bottom: 1.8rem;
    border: 1px solid var(--cizgi); border-radius: 18px; background: var(--beyaz);
}
.kampanya-bos-ikon {
    width: 62px; height: 62px; display: grid; place-items: center; flex: none;
    border-radius: 18px; color: var(--aksiyon);
    background: rgba(var(--aksiyon-rgb), .08); border: 1px solid rgba(var(--aksiyon-rgb), .16);
}
.kampanya-bos-ust {
    display: block; margin-bottom: .3rem; color: var(--aksiyon);
    font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
}
.kampanya-bos-metin h2 { margin: 0 0 .35rem; font-size: 18px; color: var(--metin); }
.kampanya-bos-metin p { max-width: 650px; margin: 0; color: var(--metin-2); font-size: 12.5px; line-height: 1.55; }
.kampanya-bos-aksiyonlar { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; margin-top: .85rem; }
.kampanya-bos-aksiyonlar .btn { min-height: 40px; padding: .62rem 1rem; }
.kampanya-metin-link { color: var(--marka); font-size: 12.5px; font-weight: 750; text-decoration: none; }
.kampanya-metin-link:hover { text-decoration: underline; }
.kampanya-bos-bilgi {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .9rem 1rem; border-radius: 13px;
    color: var(--marka); background: var(--marka-a2); border: 1px solid rgba(var(--marka-rgb), .12);
}
.kampanya-bos-bilgi .ikn { flex: none; margin-top: 2px; }
.kampanya-bos-bilgi b { display: block; margin-bottom: .18rem; color: var(--metin); font-size: 12px; }
.kampanya-bos-bilgi small { display: block; color: var(--metin-2); font-size: 11px; line-height: 1.45; }
.kamp-onerilenler { margin-top: .2rem; }
.kamp-onerilenler .kamp-firsat-ust h2 .ikn { color: var(--aksiyon); }

@media (max-width: 900px) {
    .kampanya-hero { grid-template-columns: minmax(0,1fr) 190px; padding: 1.8rem; }
    .kampanya-hero-gorsel { width: 180px; }
    .kampanya-bos-kart { grid-template-columns: auto minmax(0,1fr); }
    .kampanya-bos-bilgi { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .kamp-izgara { grid-template-columns: 1fr; }
    .kampanya-hero { display: block; min-height: 0; padding: 1.35rem 1.25rem; border-radius: 16px; }
    .kampanya-hero-metin { padding-right: 0; }
    .kampanya-hero-metin h1 { max-width: 290px; font-size: 25px; }
    .kampanya-hero-metin p { max-width: 310px; font-size: 12.5px; }
    .kampanya-hero-gorsel { position: absolute; right: -42px; top: 2px; width: 160px; height: 150px; opacity: .3; }
    .kampanya-hero-oran { font-size: 82px; }
    .kampanya-hero-aksiyonlar { position: relative; z-index: 2; }
    .kampanya-hero-btn { min-height: 40px; padding: .62rem .85rem; }
    .kampanya-bos-kart { display: block; padding: 1.15rem; border-radius: 15px; }
    .kampanya-bos-ikon { width: 50px; height: 50px; margin-bottom: .85rem; border-radius: 14px; }
    .kampanya-bos-metin h2 { font-size: 16px; line-height: 1.3; }
    .kampanya-bos-aksiyonlar { align-items: flex-start; flex-direction: column; gap: .65rem; }
    .kampanya-bos-aksiyonlar .btn { width: 100%; }
    .kampanya-bos-bilgi { margin-top: 1rem; }
    .kamp-onerilenler .kamp-firsat-ust { align-items: center; }
    .kamp-onerilenler .kamp-firsat-ust h2 { font-size: 15px; }
}

/* Son Gezdikleriniz: görsel alttan kırpılıyordu. Kök neden: grid'in auto satır
   izinde yüzdesel yükseklik (height/max-height: %) çözümlenmez ve yok sayılır →
   görsel doğal boyutunda basılıp overflow'da kırpılıyordu. Çare: flex + MUTLAK
   max-height (96px) — yüzde çözümlemesine hiç girmez, kırpılması imkânsız. */
.gezilen-gorsel { display: flex; align-items: center; justify-content: center; height: 96px; aspect-ratio: auto; }
.gezilen-gorsel img { width: auto; height: auto; max-width: 100%; max-height: 96px; }

/* Yazdır / PDF: sayfa gövdesi dışındaki her şey gizlenir */
@media print {
    .market-ust, .ft, .cerez-kutu, .icerik-yan, .dok-yazdir { display: none !important; }
    .il-hero { background: none; padding: 0; }
    .il-hero h1 { color: #000; }
    .il-hero p, .il-hero-kirinti { display: none; }
    .icerik-duzen { display: block; }
    .icerik-govde { border: 0; box-shadow: none; padding: 0; margin-top: .5rem; }
}

/* =========================================================
   SORU SOR — üye kapısı + üye soru formu
   ========================================================= */
.hero-tasan-kutu { margin-top: -2.4rem; box-shadow: var(--golge); } /* kart hero'ya biner */
.ss-form, .ss-kapi { max-width: 720px; margin-left: auto; margin-right: auto; }
.ss-kapi { text-align: center; padding: 2.4rem 2rem; }
.ss-kapi-ikon { background: rgba(var(--marka-rgb), .08); color: var(--marka); }
.ss-kapi h2 { font-size: 19px; font-weight: 800; margin-bottom: .5rem; }
.ss-kapi > p { font-size: 13.5px; line-height: 1.7; color: var(--metin-2); max-width: 520px; margin: 0 auto 1.3rem; }
.ss-kapi > p.ss-kapi-alt { margin: 1.1rem auto 0; font-size: 12px; color: var(--metin-3); }
.ss-kapi-alt a { color: var(--marka); font-weight: 700; }

/* =========================================================
   ÖDEME v4 — onay + Siparişi Onayla butonu 4. ADIM olarak
   sol akışın sonuna taşındı (1→2→3→4 düz akış; kart bilgisini
   yazan kullanıcı sağdaki özeti aramak zorunda kalmıyor).
   Sağ özet artık salt bilgi: tutar + döküm + güven satırları.
   ========================================================= */
.od-onay-kart .od-sozlesme { background: #FAFBFC; box-shadow: none; margin-bottom: .6rem; }
.od-onay-kart .od-onay { /* onay satırı amber panelde — sıradaki eylem gözden kaçmasın */
    margin: 1rem 0 0;
    padding: .85rem 1rem;
    background: rgba(var(--aksiyon-2-rgb), .07);
    border: 1px solid rgba(var(--aksiyon-2-rgb), .3);
    border-radius: 10px;
    font-size: 12.5px;
}
.od-siparis-satir { /* kapanış satırı: solda tutar, sağda buton (kaydet satırıyla aynı dil) */
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.05rem; padding-top: 1.05rem;
    border-top: 1px solid var(--cizgi-acik);
}
.od-siparis-tutar small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--aksiyon-k2); }
.od-siparis-tutar b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--metin); }
.od-siparis-btn { flex: 1; max-width: 360px; min-width: 220px; }
@media (max-width: 560px) { .od-siparis-satir { flex-direction: column; align-items: stretch; } .od-siparis-btn { max-width: none; } }

/* =========================================================
   DOĞRULAMA HATA MODALI — ödeme eksikleri sağ alt toast yerine
   ORTADA popup listeyle gösterilir (kullanıcı isteği; toast tek
   satır + "+N eksik daha" yetersizdi). se-popup iskeletini yeniden
   kullanır; dm-* yalnız farklılaşan parçalar. DOM'u app.js kurar.
   (DİKKAT: hm-* öneki header hesap menüsünün — o yüzden dm-*.)
   ========================================================= */
.dm-popup { z-index: 96; }
.dm-ikon { background: var(--kirmizi-a); color: var(--kirmizi); font-size: 30px; font-weight: 800; }
.dm-kutu .se-mesaj { margin-bottom: .9rem; }
.dm-liste {
    list-style: none; margin: 0 0 1.4rem; padding: .35rem 1rem;
    text-align: left; max-height: 42vh; overflow: auto;
    background: #FDF3F2; border: 1px solid rgba(221, 26, 49, .18); border-radius: 12px;
}
.dm-liste li {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .55rem 0; font-size: 13px; line-height: 1.5; color: var(--metin);
}
.dm-liste li + li { border-top: 1px dashed rgba(221, 26, 49, .22); }
.dm-liste li::before { /* madde imi: kırmızı nokta */
    content: '';
    flex: none; width: 7px; height: 7px; margin-top: .45em;
    background: var(--kirmizi); border-radius: 50%;
}

/* =========================================================
   SİPARİŞ DETAYI v2 (hsd-*) — Hesabım'daki açılır sipariş
   gövdesi HB düzenine geçti: üstte kalemler | durum paneli,
   altta Adres Bilgileri | Ödeme Bilgileri, en altta Diğer.
   (hs- öneki satır/summary için kalıyor; hsd- yalnız detay.)
   ========================================================= */
.hsd { padding: 1.1rem 1.2rem 1rem; background: #FAFBFC; }
.hsd-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 1rem; align-items: start; }

/* kalemler: görselli satır + mini eylem butonları */
.hsd-kalem { display: flex; gap: .8rem; align-items: flex-start; padding: .65rem 0; }
.hsd-kalem + .hsd-kalem { border-top: 1px solid var(--cizgi-acik); }
.hsd-gorsel {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; overflow: hidden;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 10px;
}
.hsd-gorsel img { max-width: 100%; max-height: 100%; width: auto; height: auto; } /* grid % tuzağına girme */
.hsd-gorsel .gorsel-yok { font-size: 20px; color: var(--metin-3); }
.hsd-kalem-bilgi { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.hsd-kalem-ad { font-size: 13px; font-weight: 700; color: var(--metin); }
a.hsd-kalem-ad:hover { color: var(--marka); }
.hsd-kalem-fiyat { font-size: 12.5px; color: var(--metin-2); }
.hsd-kalem-fiyat b { color: var(--metin); }
.hsd-kalem-btnler { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .15rem; }
.hsd-mini-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .34rem .75rem; margin: 0;
    background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 8px;
    font-size: 11.5px; font-weight: 700; color: var(--metin); cursor: pointer;
    transition: border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.hsd-mini-btn:hover { border-color: var(--marka); color: var(--marka); background: var(--beyaz); }

/* durum paneli: duruma göre yumuşak zemin (metin renkleri hs2-* ile aynı) */
.hsd-durum { border-radius: 12px; padding: .95rem 1.05rem; border: 1px solid var(--cizgi-acik); background: var(--beyaz); }
.hsd-durum.hs2-teslim       { background: var(--yesil-a);  border-color: rgba(0, 163, 101, .25); }
.hsd-durum.hs2-yeni         { background: var(--aksiyon-a); border-color: rgba(var(--aksiyon-metin-rgb), .22); }
.hsd-durum.hs2-hazirlaniyor { background: #EFF4FB; border-color: rgba(36, 81, 143, .22); }
.hsd-durum.hs2-kargoda      { background: #F3EFFB; border-color: rgba(85, 56, 155, .22); }
.hsd-durum.hs2-iptal        { background: #FDF3F2; border-color: rgba(221, 26, 49, .22); }
.hsd-durum-bas { display: flex; gap: .7rem; align-items: flex-start; }
.hsd-durum-ikon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--beyaz); box-shadow: 0 1px 4px rgba(var(--marka-golge-rgb), .1);
}
.hsd-durum-bas b { display: block; font-size: 14px; }
.hsd-durum-bas small { display: block; font-size: 11.5px; font-weight: 500; color: var(--metin-2); margin-top: .15rem; }
.hsd-eylemler { display: flex; flex-direction: column; gap: .2rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed rgba(var(--marka-golge-rgb), .15); }
.hsd-eylemler a {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .2rem;
    font-size: 12px; font-weight: 700; color: var(--metin);
}
.hsd-eylemler a:hover { color: var(--marka); }
.hsd-eylemler .ikn { color: var(--marka); flex: none; }

/* alt bölüm: adres | ödeme */
.hsd-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.1rem; }
.hsd-blok-baslik { margin: 0 0 .55rem; font-size: 13.5px; font-weight: 800; color: var(--metin); }
.hsd-kart { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 12px; padding: .85rem 1rem; }
.hsd-kart + .hsd-kart { margin-top: .6rem; }
.hsd-kart-baslik { display: flex; align-items: center; gap: .45rem; font-size: 12.5px; color: var(--metin); margin-bottom: .4rem; }
.hsd-kart-baslik .ikn { color: var(--marka); }
.hsd-kart p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--metin-2); }
.hsd-cip {
    display: inline-block; margin-top: .35rem;
    padding: .12rem .55rem;
    background: rgba(var(--marka-rgb), .08); border-radius: 20px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--marka);
}

/* ödeme kartı: yöntem satırı + döküm */
.hsd-odeme-yontem { display: flex; gap: .7rem; align-items: center; padding-bottom: .7rem; border-bottom: 1px solid var(--cizgi-acik); }
.hsd-odeme-ikon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(var(--marka-rgb), .08); color: var(--marka);
}
.hsd-odeme-yontem b { display: block; font-size: 14.5px; color: var(--marka); }
.hsd-odeme-yontem small { display: block; font-size: 11.5px; color: var(--metin-3); margin-top: .1rem; }
.hsd-dokum { padding-top: .55rem; }
.hsd-dokum-satir { display: flex; justify-content: space-between; gap: 1rem; padding: .28rem 0; font-size: 12.5px; color: var(--metin-2); }
.hsd-indirim span:last-child { color: var(--yesil); font-weight: 700; }
.hsd-genel { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--cizgi-acik); font-weight: 800; color: var(--metin); font-size: 13px; }
.hsd-genel span:last-child { font-size: 14.5px; }

/* en alt: sözleşme linkleri */
.hsd-diger { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--cizgi-acik); }
.hsd-diger > span { display:block; margin-bottom:.55rem; font-size:11px; font-weight:800; letter-spacing:.035em; color:var(--metin-3); }
.hsd-diger-linkler { display:grid; grid-template-columns:repeat(2,minmax(0,230px)); gap:.6rem; }
.hsd-diger-linkler a {
    display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:.55rem;
    min-height:46px; padding:.45rem .65rem; border:1px solid var(--cizgi-acik); border-radius:10px;
    background:#fff; color:var(--metin-2); text-decoration:none;
    transition:border-color var(--gecis),background var(--gecis),color var(--gecis);
}
.hsd-diger-linkler a > svg:first-child { box-sizing:border-box; width:30px; height:30px; padding:8px; border-radius:9px; background:var(--marka-a2); color:var(--marka); }
.hsd-diger-linkler a > svg:last-child { color:var(--metin-3); }
.hsd-diger-linkler a b { min-width:0; font-size:11.5px; line-height:1.25; }
.hsd-diger-linkler a:hover { border-color:rgba(var(--marka-rgb),.35); background:#F8FBFB; color:var(--marka); }

@media (max-width: 800px) {
    .hsd-ust, .hsd-alt { grid-template-columns: 1fr; }
}

/* hsd: buton/başlık görünümlü linklerde alt çizgi olmaz (Diğer'dekiler bilinçli çizgili) */
a.hsd-mini-btn, a.hsd-kalem-ad, a.hsd-gorsel, .hsd-eylemler a { text-decoration: none; }

/* hsd v2.1: sipariş yolculuğu ilerleme çizgisi + fatura görüntüle linki.
   Renkler currentColor'dan akar → panel durum rengini (yeşil/amber/mavi/mor) otomatik alır. */
.hsd-adimlar { display: flex; margin: .9rem 0 0; }
.hsd-adim {
    flex: 1; position: relative;
    padding-top: 15px;
    text-align: center;
    font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    color: var(--metin-3);
}
.hsd-adim::before { /* adımlar arası bağlantı çizgisi */
    content: ''; position: absolute; top: 4px; left: -50%; width: 100%; height: 2px;
    background: rgba(var(--marka-golge-rgb), .14);
}
.hsd-adim:first-child::before { display: none; }
.hsd-adim i {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 10px; height: 10px; box-sizing: border-box;
    background: var(--beyaz); border: 2px solid rgba(var(--marka-golge-rgb), .22); border-radius: 50%;
    z-index: 1;
}
.hsd-adim.tamam { color: inherit; } /* panel durum rengi */
.hsd-adim.tamam::before { background: currentColor; }
.hsd-adim.tamam i { background: currentColor; border-color: currentColor; }
.hsd-adim.simdi i { box-shadow: 0 0 0 3px rgba(var(--marka-golge-rgb), .08); width: 12px; height: 12px; top: -1px; }
.hsd-adimlar + .hsd-eylemler { margin-top: .8rem; }

.hsd-kart-baslik .hsd-kart-link {
    margin-left: auto;
    font-size: 11px; font-weight: 800; color: var(--marka); text-decoration: none;
}
.hsd-kart-baslik .hsd-kart-link:hover { color: var(--marka-k2); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   DEĞERLENDİRME MODALI (ym-*) — Hesabım'da "Ürünü Değerlendir"
   ile ortada açılır; yıldız seçici + yorum + api/yorum.php.
   se-popup iskeletini yeniden kullanır; DOM'u app.js kurar.
   ========================================================= */
.ym-popup { z-index: 96; }
.ym-kutu .ym-urun { margin-bottom: 1rem; font-weight: 700; color: var(--metin); }
.ym-yildizlar { display: flex; justify-content: center; gap: .3rem; }
.ym-yildiz {
    background: none; border: 0; padding: 0 .15rem; margin: 0;
    font-size: 34px; line-height: 1; color: #D8DEE1; cursor: pointer;
    transition: color var(--gecis);
}
.ym-yildiz.dolu { color: var(--turuncu); }
.ym-yildiz:hover { color: var(--turuncu); }
.ym-puan-adi { min-height: 18px; margin: .35rem 0 .8rem; font-size: 12.5px; font-weight: 700; color: var(--metin-2); }
.ym-metin {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: .7rem .9rem;
    border: 1px solid var(--cizgi); border-radius: 10px;
    font: inherit; font-size: 13px; line-height: 1.6; color: var(--metin);
}
.ym-metin:focus { border-color: var(--marka); box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12); outline: none; }
.ym-hata { margin: .6rem 0 0; font-size: 12px; font-weight: 700; color: var(--kirmizi); }
.ym-hata[hidden] { display: none; }
.ym-kutu .se-btnler { margin-top: 1rem; }
.ym-not { margin: .8rem 0 0; font-size: 11px; color: var(--metin-3); }

/* değerlendirilmiş ürün rozeti: buton görünümlü ama pasif */
.hsd-yorumlu { cursor: default; background: rgba(var(--marka-rgb), .06); border-color: rgba(var(--marka-rgb), .25); color: var(--marka); }

/* ym yıldızları site genelindeki amber ile aynı (--turuncu rebrand'de petrol oldu, tuzak!) */
.ym-yildiz.dolu, .ym-yildiz:hover { color: var(--aksiyon); }

/* =========================================================
   DEĞERLENDİRMELERİM v2 (dgb-*) — üstte "Değerlendirilmeyi
   Bekleyenler" ürün ızgarası (Değerlendir → ym modalı),
   altta mevcut değerlendirme listesi.
   ========================================================= */
.dgb-adet { font-weight: 700; color: var(--metin-3); }
.dgb-tanitim { margin: -.3rem 0 1rem; font-size: 12.5px; color: var(--metin-2); }
.dgb-izgara {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem;
    margin-bottom: 1.8rem;
}
.dgb-kart {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: 1.1rem 1rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    text-align: center;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.dgb-kart:hover { border-color: rgba(var(--marka-rgb), .35); box-shadow: var(--golge); }
.dgb-gorsel {
    display: flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; overflow: hidden;
    background: var(--bg); border-radius: 12px;
}
.dgb-gorsel img { max-width: 100%; max-height: 76px; width: auto; height: auto; } /* mutlak px — % tuzağı yok */
.dgb-gorsel .gorsel-yok { font-size: 26px; color: var(--metin-3); }
.dgb-ad {
    font-size: 12.5px; font-weight: 700; color: var(--metin); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.6em;
}
.dgb-ad:hover { color: var(--marka); }
.dgb-btn { margin-top: .2rem; padding: .45rem 1.4rem; font-size: 12.5px; }

/* =========================================================
   DEĞERLENDİRMELERİM v2.1 — bekleyen kartı zenginleşti
   (teslim tarihi + TIKLANIR yıldızlar: DOM 5→1 + row-reverse,
   :hover ~ soldakileri doldurur, tıklanan puan modalda hazır)
   + yorum listesi cilası. Dosya sonu override (cascade kuralı).
   ========================================================= */
.dgb-kart { padding: 1.3rem 1.1rem 1.15rem; gap: .5rem; }
.dgb-gorsel { width: 92px; height: 92px; border-radius: 14px; }
.dgb-gorsel img { max-height: 92px; }
.dgb-tarih { font-size: 11px; color: var(--metin-3); margin-top: -.2rem; }
.dgb-yildizlar { display: flex; flex-direction: row-reverse; justify-content: center; margin: .15rem 0 .1rem; }
.dgb-yildiz {
    background: none; border: 0; margin: 0; padding: 0 .12rem;
    font-size: 26px; line-height: 1; color: #D8DEE1; cursor: pointer;
    transition: color var(--gecis);
}
.dgb-yildiz:hover,
.dgb-yildiz:hover ~ .dgb-yildiz { color: var(--aksiyon); } /* row-reverse: sonraki kardeşler görselde SOLDA */
.dgb-btn { width: 100%; margin-top: .25rem; }
.dgb-kart .hsd-yorumlu { width: 100%; justify-content: center; margin-top: .25rem; box-sizing: border-box; }

/* yorum listesi: karta hover halkası (hareket yok), yorum metni yumuşak panelde */
.dg-kart { transition: border-color var(--gecis), box-shadow var(--gecis); }
.dg-kart:hover { border-color: rgba(var(--marka-rgb), .35); box-shadow: var(--golge); }
.dg-yorum {
    background: var(--bg); border-radius: 10px;
    padding: .6rem .85rem;
    position: relative;
}
.dg-orta time::before { content: '·'; margin-right: .6rem; color: var(--cizgi); }

/* =========================================================
   KUPONLARIM v2 (kp2-*) — bilet görünümlü kupon kartları:
   solda petrol değer kuponu, zımba delikli ayraç (radial-gradient
   çentikler), sağda kod + kopyala + şartlar + durum rozeti.
   ========================================================= */
.kp2-ipucu {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 1rem; padding: .65rem .9rem;
    background: var(--turuncu-a); border-radius: 10px;
    font-size: 12.5px; color: var(--metin-2);
}
.kp2-ipucu .ikn { color: var(--marka); flex: none; }
.kp2-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .9rem; }
.kp2-kupon {
    position: relative;
    display: flex; align-items: stretch;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 14px;
    overflow: hidden;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.kp2-kupon:hover { border-color: rgba(var(--marka-rgb), .35); box-shadow: var(--golge); }
.kp2-sol {
    flex: none; width: 108px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    background: linear-gradient(150deg, var(--marka), var(--marka-k));
    color: #fff;
    /* zımba çentikleri: sağ kenarda üst/alt yarım daire (sayfa zemini renginde) */
    -webkit-mask: radial-gradient(circle 8px at right 0, transparent 96%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 8px at right 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 8px at right 0, transparent 96%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 8px at right 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;
}
.kp2-sol b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kp2-sol small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.kp2-govde {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: .2rem;
    padding: .95rem 1rem .95rem 1.1rem;
    border-left: 2px dashed var(--cizgi); /* bilet yırtma çizgisi */
}
.kp2-kod { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .15rem; }
.kp2-kod > span {
    font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--metin);
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
.kp2-kopyala {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .26rem .6rem; margin: 0;
    background: rgba(var(--marka-rgb), .08); border: 1px solid rgba(var(--marka-rgb), .25); border-radius: 7px;
    font-size: 11px; font-weight: 800; color: var(--marka); cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis);
}
.kp2-kopyala:hover { background: rgba(var(--marka-rgb), .14); border-color: var(--marka); }
.kp2-sart { font-size: 11.5px; line-height: 1.5; color: var(--metin-3); }
.kp2-rozet {
    position: absolute; right: .8rem; top: .8rem;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .24rem .6rem; border-radius: 20px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    text-decoration: none;
}
.kp2-rozet-aktif      { background: var(--vurgu); color: #fff; }
.kp2-rozet-aktif:hover { background: var(--vurgu-k); color: #fff; }
.kp2-rozet-kullanildi { background: var(--yesil-a); color: var(--yesil); }
.kp2-rozet-doldu      { background: var(--bg); color: var(--metin-3); }

/* pasif kupon: soluk + petrol kupon grileşir */
.kp2-pasif { opacity: .72; }
.kp2-pasif .kp2-sol { background: linear-gradient(150deg, #8A979B, #6E7B7F); }
.kp2-pasif:hover { border-color: var(--cizgi-acik); box-shadow: none; }

/* =========================================================
   SEPET: KULLANILABİLİR KUPONLAR (sp2-ks) — özet kutusunda
   tek tıkla "Uygula" listesi; min sepeti tutmayanlar soluk
   + "X ₺ daha ekleyin" teşviki. Kupon uygulanınca liste gizli
   (yerine yeşil kupon çipi zaten var).
   ========================================================= */
.sp2-kuponlar { margin: .8rem 0 .2rem; }
.sp2-kuponlar-baslik {
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .5rem;
    font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--metin-2);
}
.sp2-kuponlar-baslik .ikn { color: var(--marka); }
.sp2-ks {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem;
    background: #F7FAFB; border: 1px dashed rgba(var(--marka-rgb), .35); border-radius: 10px;
    margin-bottom: .45rem;
}
.sp2-ks-deger {
    flex: none; min-width: 46px;
    padding: .3rem .4rem;
    background: var(--marka); border-radius: 7px;
    font-size: 12px; font-weight: 800; color: #fff; text-align: center;
}
.sp2-ks-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.sp2-ks-bilgi b { font-size: 12px; letter-spacing: .04em; color: var(--metin); font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.sp2-ks-bilgi small { font-size: 10.5px; line-height: 1.4; color: var(--metin-3); }
.sp2-ks-btn {
    flex: none; margin: 0; padding: .38rem .8rem;
    background: var(--vurgu); border: 0; border-radius: 8px;
    font-size: 11.5px; font-weight: 800; color: #fff; cursor: pointer;
    transition: background var(--gecis);
}
.sp2-ks-btn:hover { background: var(--vurgu-k); }
.sp2-ks-yetersiz { opacity: .75; border-style: dotted; }
.sp2-ks-yetersiz .sp2-ks-deger { background: #8A979B; }
.sp2-ks-yetersiz .sp2-ks-bilgi small { color: var(--aksiyon-k2); font-weight: 700; } /* teşvik amber */
.sp2-ks-btn:disabled { background: var(--cizgi); color: var(--metin-3); cursor: not-allowed; }

/* =========================================================
   BİLGİ MODALI (bm-*) — flash mesajları tepe bandı yerine
   ortada modal (kullanıcı isteği). Bant markup'ı no-JS yedeği;
   app.js söker ve bu modalı açar. se-popup iskeleti ortak.
   ========================================================= */
.bm-popup { z-index: 97; }
.bm-ikon { font-size: 30px; font-weight: 800; }
.bm-ikon.bm-basari { background: var(--yesil-a); color: var(--yesil); }
.bm-ikon.bm-uyari  { background: var(--aksiyon-a2); color: var(--aksiyon-metin); }
.bm-ikon.bm-hata   { background: var(--kirmizi-a); color: var(--kirmizi); }

/* =========================================================
   SORU VE TALEPLERİM (st-*) — hesap içinden soru sorma
   (akordeon form) + soru/yanıt balonları (soru sağa beyaz,
   destek yanıtı sola petrol zeminli — mesajlaşma dili).
   ========================================================= */
.st-yeni {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    margin-bottom: 1.1rem;
}
.st-yeni summary {
    display: flex; align-items: center; gap: .5rem;
    padding: .95rem 1.2rem;
    font-size: 13.5px; font-weight: 800; color: var(--metin);
    cursor: pointer; list-style: none;
}
.st-yeni summary::-webkit-details-marker { display: none; }
.st-yeni summary .ikn:first-child { color: var(--marka); }
.st-yeni[open] summary { border-bottom: 1px solid var(--cizgi-acik); color: var(--marka); }
.st-yeni-ic { padding: 1.1rem 1.2rem 1.2rem; }
.st-yeni-not { margin: 0 0 .9rem; font-size: 12.5px; color: var(--metin-2); }
.st-yeni-ic textarea {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: .7rem .9rem; border: 1px solid var(--cizgi); border-radius: 10px;
    font: inherit; font-size: 13px; line-height: 1.6;
}
.st-yeni-ic textarea:focus { border-color: var(--marka); box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12); outline: none; }

.st-bekleyen-not {
    display: flex; align-items: center; gap: .45rem;
    margin: 0 0 .9rem; padding: .6rem .9rem;
    background: var(--aksiyon-a); border-radius: 10px;
    font-size: 12.5px; color: var(--aksiyon-metin);
}
.st-liste { display: flex; flex-direction: column; gap: .9rem; }
.st-kart {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: var(--r2);
    padding: 1rem 1.15rem 1.1rem;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.st-kart:hover { border-color: rgba(var(--marka-rgb), .35); box-shadow: var(--golge); }
.st-ust { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .7rem; }
.st-konu { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 800; color: var(--metin); }
.st-konu .ikn { color: var(--marka); }

.st-balon { max-width: 85%; border-radius: 14px; padding: .7rem .95rem; }
.st-balon p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--metin-2); }
.st-balon-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.st-balon-bas b { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; color: var(--metin); }
.st-balon-bas time { font-size: 10.5px; color: var(--metin-3); white-space: nowrap; }
.st-soru { margin-left: auto; background: var(--bg); border-top-right-radius: 4px; }
.st-yanit { margin-top: .55rem; background: var(--marka-a); border-top-left-radius: 4px; }
.st-yanit .st-balon-bas b { color: var(--marka); }
.st-destek-ikon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--marka); color: #fff;
}
@media (max-width: 560px) { .st-balon { max-width: 100%; } }

/* st v2: sorular AYRI AYRI kapalı satırlar (details) — tıklayınca balonlar açılır.
   Dosya sonu override: st-kart artık details, st-ust summary oldu. */
.st-kart { padding: 0; }
.st-ust {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem;
    margin: 0; padding: .9rem 1.15rem;
    cursor: pointer; list-style: none;
}
.st-ust::-webkit-details-marker { display: none; }
.st-onizleme {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; color: var(--metin-3);
}
.st-kart[open] .st-onizleme { visibility: hidden; } /* açıkken balon zaten görünür, tekrar etmesin */
.st-sag { display: flex; align-items: center; gap: .7rem; }
.st-sag time { font-size: 11.5px; color: var(--metin-3); white-space: nowrap; }
.st-kart .hs-ok { transition: transform var(--gecis); }
.st-kart[open] .hs-ok { transform: rotate(180deg); }
.st-kart[open] { border-color: rgba(var(--marka-rgb), .35); box-shadow: var(--golge); }
.st-govde { padding: .9rem 1.15rem 1.1rem; border-top: 1px solid var(--cizgi-acik); }
.st-yanit-yok {
    display: flex; align-items: center; gap: .45rem;
    margin: .6rem 0 0; font-size: 12px; color: var(--metin-3);
}
@media (max-width: 700px) {
    .st-ust { grid-template-columns: minmax(0, 1fr) auto auto; }
    .st-onizleme { display: none; }
}

/* st v3: konuya CEVAP YAZ formu (gunc-22 zincir) — balonların altında ince satır */
.st-cevap { display: flex; gap: .5rem; align-items: flex-end; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--cizgi); }
.st-cevap textarea {
    flex: 1; min-width: 0; resize: vertical; box-sizing: border-box;
    padding: .55rem .8rem;
    border: 1px solid var(--cizgi); border-radius: 10px;
    font: inherit; font-size: 12.5px; line-height: 1.55;
}
.st-cevap textarea:focus { border-color: var(--marka); box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12); outline: none; }
.st-cevap-btn {
    flex: none; display: inline-flex; align-items: center; gap: .35rem;
    margin: 0; padding: .55rem 1rem;
    background: var(--marka); border-color: var(--marka); color: #fff;
    font-size: 12.5px; font-weight: 700; border-radius: 9px;
}
.st-cevap-btn:hover { background: var(--marka-k2); border-color: var(--marka-k2); color: #fff; }
.st-cevap-btn .ikn { color: #fff; }

/* st v3.1: mesaj balonları arası nefes payı (kullanıcı isteği — sıkışıktı) */
.st-govde .st-balon { margin-top: .85rem; }
.st-govde .st-balon:first-child { margin-top: 0; }
.st-yanit { margin-top: .85rem; } /* eski .55rem'i ez */
.st-yanit-yok { margin-top: .85rem; }

/* =========================================================
   DESTEK ASİSTANI (da-*) — kural tabanlı widget; footer'daki
   "Destek Merkezine bağlanın" (.da-ac) açar. Sağ altta panel,
   wa-balon'un (z:80) üstünde. Kişisel veri yok, dış servis yok.
   ========================================================= */
.da-panel {
    position: fixed; right: 20px; bottom: 20px; z-index: 94;
    display: flex; flex-direction: column;
    width: min(92vw, 370px); height: min(72vh, 540px);
    background: var(--beyaz); border-radius: 16px;
    box-shadow: 0 24px 64px rgba(var(--marka-golge-rgb), .32);
    overflow: hidden;
    opacity: 0; transform: translateY(14px);
    transition: opacity .18s ease, transform .18s ease;
}
.da-arka { display: none; }
.da-panel[hidden] { display: none; } /* display, hidden'ı ezmesin (bilinen tuzak) */
.da-panel.acik { opacity: 1; transform: translateY(0); }

.da-bas {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem;
    background: linear-gradient(140deg, var(--marka), var(--marka-k));
    color: #fff;
}
.da-bas-ikon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}
.da-bas-yazi { flex: 1; min-width: 0; }
.da-bas-yazi b { display: block; font-size: 13.5px; }
.da-bas-yazi small { display: block; font-size: 10.5px; opacity: .8; }
.da-kapat {
    flex: none; width: 28px; height: 28px;
    background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%;
    color: #fff; font-size: 12px; cursor: pointer;
    transition: background var(--gecis);
}
.da-kapat:hover { background: rgba(255, 255, 255, .28); }

.da-akis { flex: 1; overflow-y: auto; padding: 1rem .9rem; background: #F4F7F8; }
.da-balon {
    max-width: 86%; margin-bottom: .6rem;
    padding: .6rem .85rem; border-radius: 14px;
    font-size: 12.5px; line-height: 1.6; color: var(--metin);
}
.da-balon p { margin: 0; }
.da-bot  { background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-top-left-radius: 4px; }
.da-kisi { background: var(--marka); color: #fff; margin-left: auto; border-top-right-radius: 4px; }
.da-yaziyor { color: var(--metin-3); font-style: italic; }
.da-balon-link { display: inline-block; margin-top: .4rem; font-size: 12px; font-weight: 800; color: var(--marka); text-decoration: none; }
.da-balon-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.da-cipler { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .7rem; }
.da-cipler small { flex-basis: 100%; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3); margin-bottom: .1rem; }
.da-cip {
    display: inline-flex; align-items: center;
    margin: 0; padding: .38rem .7rem;
    background: var(--beyaz); border: 1px solid rgba(var(--marka-rgb), .35); border-radius: 18px;
    font-size: 11.5px; font-weight: 700; color: var(--marka); cursor: pointer; text-decoration: none;
    transition: background var(--gecis), color var(--gecis);
}
.da-cip:hover { background: var(--marka); color: #fff; }
.da-cip-kanal { border-color: var(--cizgi); color: var(--metin); }
.da-cip-kanal:hover { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }

.da-form { display: flex; gap: .5rem; padding: .7rem .8rem; background: var(--beyaz); border-top: 1px solid var(--cizgi-acik); }
.da-form input {
    flex: 1; min-width: 0;
    padding: .6rem .85rem;
    border: 1px solid var(--cizgi); border-radius: 20px;
    font: inherit; font-size: 12.5px;
}
.da-form input:focus { border-color: var(--marka); box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12); outline: none; }
.da-form button {
    flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vurgu); border: 0; border-radius: 50%;
    color: #fff; cursor: pointer;
    transition: background var(--gecis);
    margin: 0; padding: 0;
}
.da-form button:hover { background: var(--vurgu-k); }

@media (max-width: 480px) { .da-panel { right: 10px; bottom: 10px; width: calc(100vw - 20px); } }

/* =========================================================
   DESTEK ASİSTANI v2 — tasarım yükseltmesi (dosya sonu override):
   daha büyük panel, çevrimiçi noktalı başlık, avatarlı bot satırları,
   zıplayan nokta "yazıyor", mini ürün kartları, balon giriş animasyonu.
   ========================================================= */
.da-panel { width: min(94vw, 400px); height: min(78vh, 600px); border-radius: 20px; }
.da-bas { padding: 1rem 1.1rem; position: relative; }
.da-bas::after { /* prizma çizgisi: marka imzası */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--marka-2), var(--marka-buz) 30%, var(--aksiyon-acik) 60%, var(--aksiyon) 100%);
    opacity: .85;
}
.da-bas-ikon { width: 40px; height: 40px; position: relative; background: rgba(255,255,255,.18); }
.da-bas-ikon::after { /* çevrimiçi noktası */
    content: ''; position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #2EE6A8; border: 2px solid var(--marka-k);
}
.da-bas-yazi b { font-size: 14.5px; letter-spacing: -.01em; }
.da-bas-yazi small { font-size: 11px; }

.da-akis { padding: 1.1rem 1rem; background: linear-gradient(180deg, #EFF5F6, #F6F8F9); }
.da-akis::-webkit-scrollbar { width: 5px; }
.da-akis::-webkit-scrollbar-thumb { background: rgba(var(--marka-rgb), .25); border-radius: 3px; }

@keyframes da-gel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.da-satir { display: flex; align-items: flex-end; gap: .45rem; margin-bottom: .65rem; animation: da-gel .22s ease; }
.da-satir-kisi { justify-content: flex-end; }
.da-avatar {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(140deg, var(--marka), var(--marka-2)); color: #fff;
    box-shadow: 0 2px 6px rgba(var(--marka-rgb), .3);
}
.da-balon { margin-bottom: 0; box-shadow: 0 1px 3px rgba(var(--marka-golge-rgb), .06); position: relative; }
.da-bot { border-bottom-left-radius: 4px; border-top-left-radius: 14px; }
.da-kisi { border-bottom-right-radius: 4px; border-top-right-radius: 14px; background: linear-gradient(140deg, var(--marka), #0B5B68); }
.da-balon time { display: block; margin-top: .3rem; font-size: 9.5px; color: var(--metin-3); text-align: right; }
.da-kisi time { color: rgba(255, 255, 255, .65); }

/* yazıyor: üç zıplayan nokta */
@keyframes da-nokta { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.da-yaziyor { display: inline-flex; gap: 4px; padding: .75rem .9rem; }
.da-yaziyor i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--marka);
    animation: da-nokta 1.1s infinite;
}
.da-yaziyor i:nth-child(2) { animation-delay: .15s; }
.da-yaziyor i:nth-child(3) { animation-delay: .3s; }

/* asistan içi mini ürün kartları */
.da-urunler { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 .65rem 2rem; animation: da-gel .22s ease; }
.da-urun {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .7rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(var(--marka-golge-rgb), .06);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.da-urun:hover { border-color: rgba(var(--marka-rgb), .45); box-shadow: var(--golge); }
.da-urun-gorsel {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; overflow: hidden;
    background: var(--bg); border-radius: 9px;
    font-size: 17px; color: var(--metin-3);
}
.da-urun-gorsel img { max-width: 100%; max-height: 44px; width: auto; height: auto; }
.da-urun-bilgi { flex: 1; min-width: 0; }
.da-urun-bilgi > b { display: block; font-size: 12px; color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-urun-fiyat { display: flex; align-items: baseline; gap: .4rem; margin-top: .1rem; }
.da-urun-fiyat s { font-size: 10.5px; color: var(--metin-3); }
.da-urun-fiyat b { font-size: 13px; color: var(--yesil); }
.da-urun-ok { flex: none; font-size: 14px; color: var(--marka); }

.da-cipler { margin-left: 2rem; animation: da-gel .22s ease; }
.da-form { padding: .75rem .85rem; }
.da-form input { padding: .68rem .95rem; font-size: 13px; background: var(--bg); border-color: transparent; }
.da-form input:focus { background: var(--beyaz); }
.da-form button { width: 42px; height: 42px; box-shadow: 0 3px 10px rgba(var(--aksiyon-rgb), .35); }

/* =========================================================
   DESTEK ASİSTANI v3 — köklü görsel yenileme (dosya sonu override):
   dekoratif baloncuklu derin petrol başlık + KIVRIMLI sohbet geçişi,
   çerçevesiz gölge balonlar, ikonlu karşılama menü kartları,
   parlak amber gönder. v2'nin prizma ::after'ı baloncuğa dönüştü.
   ========================================================= */
.da-panel {
    width: min(94vw, 404px); height: min(82vh, 640px);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(var(--marka-golge-rgb), .45);
}

/* Başlık: derin petrol gradyan + dekoratif ışık baloncukları */
.da-bas {
    padding: 1.3rem 1.2rem 2.4rem; /* alttaki kıvrım payı */
    background: linear-gradient(135deg, #0A4E5A, var(--marka) 48%, #128CA0);
}
.da-bas::before {
    content: ''; position: absolute;
    width: 160px; height: 160px; border-radius: 50%;
    top: -70px; right: -45px; left: auto; bottom: auto;
    background: rgba(255, 255, 255, .08);
    opacity: 1;
}
.da-bas::after { /* v2 prizma çizgisi → ikinci ışık baloncuğu */
    content: ''; position: absolute;
    width: 90px; height: 90px; border-radius: 50%;
    bottom: -18px; left: 34%; right: auto;
    background: rgba(255, 255, 255, .06);
    opacity: 1;
}
.da-bas > * { position: relative; z-index: 1; }
.da-bas-ikon { width: 44px; height: 44px; background: rgba(255, 255, 255, .2); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.da-bas-ikon::after { width: 12px; height: 12px; background: #2EE6A8; border-color: #0C5F6D; }
.da-bas-yazi b { font-size: 15.5px; }
.da-bas-yazi small { font-size: 11px; opacity: .85; }

/* Sohbet alanı başlığın üstüne KIVRIMLA biner */
.da-akis {
    position: relative; z-index: 2;
    margin-top: -1.1rem;
    border-radius: 20px 20px 0 0;
    background: #F1F5F6;
    padding: 1.2rem 1rem 1rem;
}

/* Balonlar: çerçevesiz, yumuşak gölgeli */
.da-balon { font-size: 13px; padding: .75rem 1rem; }
.da-bot {
    border: 0; border-radius: 16px 16px 16px 5px;
    box-shadow: 0 2px 12px rgba(var(--marka-golge-rgb), .09);
}
.da-kisi {
    border-radius: 16px 16px 5px 16px;
    background: linear-gradient(135deg, var(--marka), #128CA0);
    box-shadow: 0 5px 14px rgba(var(--marka-rgb), .3);
}
.da-satir { margin-bottom: .75rem; }
.da-avatar { width: 28px; height: 28px; box-shadow: 0 3px 8px rgba(var(--marka-rgb), .35); }

/* Karşılama menüsü: ikonlu tıklanır kartlar (çiplerden terfi) */
.da-menu { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 .85rem 2.1rem; animation: da-gel .22s ease; }
.da-menu-satir {
    display: flex; align-items: center; gap: .7rem;
    margin: 0; padding: .72rem .95rem;
    background: var(--beyaz); border: 0; border-radius: 14px;
    box-shadow: 0 2px 10px rgba(var(--marka-golge-rgb), .07);
    font-size: 12.5px; font-weight: 700; color: var(--metin);
    text-align: left; cursor: pointer;
    transition: background var(--gecis), box-shadow var(--gecis);
}
.da-menu-satir:hover { background: #EAF4F5; box-shadow: 0 4px 16px rgba(var(--marka-rgb), .18); }
.da-menu-ikon {
    flex: none; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, rgba(var(--marka-rgb), .1), rgba(var(--marka-2-rgb), .14));
    border-radius: 10px; font-size: 15px;
}
.da-menu-satir::after { content: '›'; margin-left: auto; font-size: 17px; font-weight: 800; color: var(--marka); }

/* Çipler: beyaz hap + gölge (çerçeve yok) */
.da-cip {
    border: 0; background: var(--beyaz);
    box-shadow: 0 2px 8px rgba(var(--marka-golge-rgb), .08);
    padding: .45rem .85rem;
    color: var(--marka);
}
.da-cip:hover { background: var(--marka); color: #fff; box-shadow: 0 4px 12px rgba(var(--marka-rgb), .3); }
.da-cip-kanal { color: var(--metin); }
.da-cip-kanal:hover { background: var(--vurgu); color: #fff; box-shadow: 0 4px 12px rgba(var(--aksiyon-rgb), .35); }
.da-cipler small { color: #7d8f93; }

/* Ürün kartları: çerçevesiz gölge diliyle uyum */
.da-urun { border: 0; box-shadow: 0 2px 10px rgba(var(--marka-golge-rgb), .08); border-radius: 14px; }
.da-urun:hover { box-shadow: 0 5px 18px rgba(var(--marka-rgb), .2); }
.da-urunler { margin-left: 2.1rem; }
.da-cipler { margin-left: 2.1rem; }

/* Giriş alanı: temiz beyaz bant + parlak amber gönder */
.da-form { padding: .8rem .9rem .9rem; border-top: 0; box-shadow: 0 -6px 18px rgba(var(--marka-golge-rgb), .05); }
.da-form input { background: #EDF2F3; border-color: transparent; padding: .72rem 1rem; }
.da-form input:focus { background: var(--beyaz); }
.da-form button {
    width: 44px; height: 44px;
    background: linear-gradient(140deg, var(--aksiyon), #E8890A);
    box-shadow: 0 5px 16px rgba(var(--aksiyon-rgb), .45);
}
.da-form button:hover { background: linear-gradient(140deg, var(--aksiyon-2), var(--aksiyon-k)); }

/* =========================================================
   DESTEK ASİSTANI v4 — canlı ekran görüntüsü düzeltmeleri:
   emoji yerine SVG ikonlar, karşılama menüsü 2 SÜTUN kompakt
   ızgara, kanal önerisi TEK kompakt bar (tekrar yığılmaz —
   JS eskisini siler), bağıran BÜYÜK HARF etiketler sakinleşti,
   hizalar tam genişliğe oturdu, boşluklar sıkılaştı.
   ========================================================= */
.da-akis { padding: 1.1rem .85rem .85rem; }

/* karşılama menüsü: 2 sütun mini kartlar (dev satır listesi gitti) */
.da-menu { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0 0 .8rem; }
.da-menu-satir {
    flex-direction: row; align-items: center; gap: .55rem;
    padding: .6rem .7rem;
    font-size: 11.5px; line-height: 1.25;
    border-radius: 12px;
}
.da-menu-satir::after { display: none; } /* chevron gitti — kart zaten tıklanır */
.da-menu-ikon {
    width: 28px; height: 28px; border-radius: 9px;
    background: rgba(var(--marka-rgb), .1); color: var(--marka);
}
.da-menu-yazi { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.da-menu-yazi b { font-size: 11.5px; line-height: 1.2; color: var(--metin); }
.da-menu-yazi small { font-size: 9.3px; line-height: 1.25; font-weight: 500; color: var(--metin-3); }

/* balon/öneri hizaları: kontroller tam genişlik (mesaj girintisi yalnız balonlarda) */
.da-cipler, .da-urunler { margin-left: 0; }
.da-balon { max-width: 84%; }
.da-avatar { width: 24px; height: 24px; }
.da-satir { margin-bottom: .6rem; }

/* öneri etiketi: bağıran BÜYÜK HARF yerine sakin küçük başlık */
.da-cipler small {
    text-transform: none; letter-spacing: 0;
    font-size: 11px; font-weight: 600; color: #8a9a9e;
}
.da-cip { font-size: 11px; padding: .4rem .75rem; text-align: left; }

/* kanallar: tek kompakt bar — 3 eşit ikonlu buton */
.da-kanallar { margin: .1rem 0 .75rem; animation: da-gel .22s ease; }
.da-kanallar small { display: block; margin-bottom: .35rem; font-size: 11px; font-weight: 600; color: #8a9a9e; }
.da-kanal-kutu { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.da-kanal {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .6rem .3rem;
    background: var(--beyaz); border-radius: 12px;
    box-shadow: 0 2px 8px rgba(var(--marka-golge-rgb), .07);
    font-size: 10.5px; font-weight: 700; color: var(--metin);
    text-decoration: none; text-align: center;
    transition: box-shadow var(--gecis), background var(--gecis), color var(--gecis);
}
.da-kanal svg { color: var(--marka); transition: color var(--gecis); }
.da-kanal:hover { background: var(--marka); color: #fff; box-shadow: 0 4px 14px rgba(var(--marka-rgb), .3); }
.da-kanal:hover svg { color: #fff; }

/* başlık süs baloncukları daha silik (kenar çizgisi hissi vermesin) */
.da-bas { padding: 1.1rem 1.1rem 2.1rem; }
.da-bas::before { background: rgba(255, 255, 255, .05); }
.da-bas::after { background: rgba(255, 255, 255, .04); }

/* da v4.1: saat damgası ayrı satır açıyordu (yazı altında koca boşluk) →
   WhatsApp usulü balonun sağ alt köşesine gömülü, balon alt dolgusu sıkıştı */
.da-balon { position: relative; padding: .65rem .9rem 1.1rem; }
.da-balon p { line-height: 1.55; }
.da-balon time { position: absolute; right: .8rem; bottom: .3rem; margin: 0; font-size: 9px; }
.da-yaziyor { padding: .7rem .9rem; } /* nokta balonunda saat yok — dolgu eski haline */

/* da v5: SİPARİŞ MODÜLÜ — asistan içinde sipariş kartları + işlem akışı
   (iade/sorun talebi doğrudan müşteri hizmetlerine düşer) */
button.da-siparis { border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left; margin: 0; }
.da-siparis .da-urun-gorsel { color: var(--marka); background: rgba(var(--marka-rgb), .08); }
.da-siparis-alt { display: block; font-size: 10.5px; color: var(--metin-3); margin-top: .15rem; }
.da-siparis-alt em { font-style: normal; font-weight: 800; }
.da-durum-yeni         { color: var(--aksiyon-metin); }
.da-durum-hazirlaniyor { color: #24518F; }
.da-durum-kargoda      { color: #55389B; }
.da-durum-teslim       { color: var(--yesil); }
.da-durum-iptal        { color: var(--kirmizi); }

/* da v5.1: talep durum satırları (Taleplerim modülü) */
.da-talep-satir { margin-top: .35rem !important; font-size: 12px; color: var(--metin-2); }

/* =========================================================
   da v6.1 — profesyonellik cilası:
   talep modu ŞERİDİ (giriş üstünde amber bant; balon spam bitti),
   fatura kartlarına "Görüntüle" rozeti, sipariş kartlarında kalem
   özeti, kanal barına Ana Menü, kişisel karşılama satırları.
   ========================================================= */
.da-mod-bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .9rem;
    background: #FFF4DE; border-top: 1px solid rgba(var(--aksiyon-2-rgb), .3);
    font-size: 11.5px; font-weight: 800; color: var(--aksiyon-metin);
}
.da-mod-bar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-mod-bar button {
    flex: none; width: 22px; height: 22px;
    background: rgba(var(--aksiyon-metin-rgb), .12); border: 0; border-radius: 50%;
    font-size: 10px; color: var(--aksiyon-metin); cursor: pointer; margin: 0; padding: 0;
    transition: background var(--gecis);
}
.da-mod-bar button:hover { background: rgba(var(--aksiyon-metin-rgb), .25); }
.da-mod-bar + .da-form input { border-color: rgba(var(--aksiyon-2-rgb), .45); background: var(--beyaz); }

.da-siparis-kalem {
    display: block; margin-top: .15rem;
    font-size: 10.5px; color: var(--metin-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.da-fatura-ikon { background: var(--turuncu-a) !important; color: var(--aksiyon-k2) !important; }
.da-fatura-btn {
    flex: none; align-self: center;
    padding: .32rem .65rem;
    background: rgba(var(--marka-rgb), .09); border-radius: 8px;
    font-size: 10.5px; font-weight: 800; color: var(--marka);
    transition: background var(--gecis), color var(--gecis);
}
.da-fatura:hover .da-fatura-btn { background: var(--marka); color: #fff; }

.da-anamenu {
    display: block; width: 100%;
    margin: .45rem 0 0; padding: .45rem;
    background: none; border: 0; border-radius: 10px;
    font-size: 11px; font-weight: 800; color: var(--marka); cursor: pointer;
    transition: background var(--gecis);
}
.da-anamenu:hover { background: rgba(var(--marka-rgb), .07); }

/* =========================================================
   da v6.2 — durum kartı & öneri alanı şıklaştırma:
   emoji satırları yerine TIKLANIR durum kartı (SVG ikonlu
   satırlar → ilgili modülü açar), öneri çipleri yumuşak petrol
   zemin, Ana Menü ortalanmış ikonlu hap buton.
   ========================================================= */
.da-durum-kart {
    background: var(--beyaz); border-radius: 14px;
    box-shadow: 0 2px 12px rgba(var(--marka-golge-rgb), .09);
    overflow: hidden;
    margin: 0 0 .8rem;
    animation: da-gel .22s ease;
}
.da-dk-bas {
    padding: .6rem .95rem .55rem;
    background: linear-gradient(135deg, rgba(var(--marka-rgb), .08), rgba(var(--marka-2-rgb), .1));
    font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--marka);
}
.da-dk-satir {
    display: flex; align-items: center; gap: .65rem;
    width: 100%; margin: 0; padding: .62rem .95rem;
    background: none; border: 0; border-top: 1px solid var(--cizgi-acik);
    font-size: 12px; font-weight: 700; color: var(--metin);
    text-align: left; cursor: pointer;
    transition: background var(--gecis);
}
.da-dk-satir:hover { background: var(--marka-a2); }
.da-dk-satir::after { content: '›'; margin-left: auto; font-size: 15px; font-weight: 800; color: var(--marka); opacity: .7; }
.da-dk-ikon {
    flex: none; width: 27px; height: 27px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .09); border-radius: 50%; color: var(--marka);
}

/* öneri çipleri: gölge kalabalığı yerine yumuşak petrol zemin */
.da-cip {
    background: rgba(var(--marka-rgb), .07);
    box-shadow: none;
    font-weight: 700;
}
.da-cip:hover { background: var(--marka); color: #fff; box-shadow: none; }
.da-cip.kp2-kopyala { background: rgba(var(--aksiyon-rgb), .1); color: #B26E08; } /* kupon çipleri amber */
.da-cip.kp2-kopyala:hover { background: var(--vurgu); color: #fff; }

/* Ana Menü: ortalanmış ikonlu hap */
.da-anamenu-kap { text-align: center; margin-top: .55rem; }
.da-anamenu {
    display: inline-flex; align-items: center; gap: .4rem;
    width: auto; margin: 0; padding: .42rem 1.05rem;
    background: var(--beyaz); border: 1px solid rgba(var(--marka-rgb), .3); border-radius: 20px;
    font-size: 11px; font-weight: 800; color: var(--marka); cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--marka-golge-rgb), .06);
    transition: background var(--gecis), color var(--gecis);
}
.da-anamenu:hover { background: var(--marka); color: #fff; }

/* =========================================================
   da v6.3 — soru/cevap alanı son cila:
   "İlgili sorular" çip yığını yerine KART satır listesi (? rozetli),
   bot cevaplarına ince petrol aksan, balon linkleri mini buton.
   ========================================================= */
.da-ilgili {
    background: var(--beyaz); border-radius: 14px;
    box-shadow: 0 2px 12px rgba(var(--marka-golge-rgb), .09);
    overflow: hidden; margin: 0 0 .8rem;
    animation: da-gel .22s ease;
}
.da-ilgili-bas {
    padding: .55rem .95rem .5rem;
    background: #F7FAFA;
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #8a9a9e;
}
.da-ilgili-satir {
    display: flex; align-items: center; gap: .65rem;
    width: 100%; margin: 0; padding: .6rem .95rem;
    background: none; border: 0; border-top: 1px solid var(--cizgi-acik);
    font-size: 12px; font-weight: 700; color: var(--metin);
    text-align: left; cursor: pointer;
    transition: background var(--gecis);
}
.da-ilgili-satir:hover { background: var(--marka-a2); }
.da-ilgili-satir::after { content: '›'; margin-left: auto; font-size: 15px; font-weight: 800; color: var(--marka); opacity: .7; }
.da-ilgili-ikon {
    flex: none; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--marka-rgb), .09); border-radius: 50%;
    font-size: 11px; font-weight: 800; color: var(--marka);
}

/* bot cevabına ince marka aksanı */
.da-bot { border-left: 3px solid rgba(var(--marka-2-rgb), .5); }
.da-yaziyor { border-left: 3px solid rgba(var(--marka-2-rgb), .5); }

/* balon içi linkler: çıplak yazı yerine mini buton */
.da-balon-link {
    display: inline-flex; align-items: center;
    margin: .55rem .4rem 0 0; padding: .42rem .85rem;
    background: rgba(var(--marka-rgb), .08); border-radius: 9px;
    font-size: 11.5px;
    transition: background var(--gecis), color var(--gecis);
}
.da-balon-link:hover { background: var(--marka); color: #fff; text-decoration: none; }

/* da v6.4: sipariş işlem kartları — emoji çip yerine 2 sütun SVG ikonlu kart */
.da-islemler { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0 0 .8rem; animation: da-gel .22s ease; }
.da-islem {
    display: flex; align-items: center; gap: .55rem;
    margin: 0; padding: .6rem .7rem;
    background: var(--beyaz); border: 0; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(var(--marka-golge-rgb), .07);
    font-size: 11.5px; font-weight: 700; color: var(--metin); line-height: 1.25;
    text-align: left; cursor: pointer;
    transition: background var(--gecis), box-shadow var(--gecis);
}
.da-islem:hover { background: #EAF4F5; box-shadow: 0 4px 16px rgba(var(--marka-rgb), .18); }
.da-islem-ikon {
    flex: none; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
}
.da-islem-petrol { background: rgba(var(--marka-rgb), .1); color: var(--marka); }
.da-islem-amber  { background: rgba(var(--aksiyon-rgb), .13); color: var(--aksiyon-k2); }

/* =========================================================
   da v6.5 — Taleplerim & ürün kartları cilası:
   talepler TIKLANIR durum kartında (✓ yeşil / saat amber rozet,
   dokun → soru-taleplerim#t<ID> açılır), ürün kartlarında indirim
   yüzdesi rozeti + "İncele" butonu, liste altı "Tümü" hap linkleri.
   ========================================================= */
.da-dk-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.da-dk-metin b { font-size: 12px; color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-dk-metin small { font-size: 10.5px; font-weight: 600; color: var(--metin-3); }
a.da-dk-satir { text-decoration: none; }
.da-dk-ikon.da-dk-yesil { background: var(--yesil-a); color: var(--yesil); }
.da-dk-ikon.da-dk-amber { background: var(--aksiyon-a2); color: #B26E08; }

.da-indirim-rozet {
    display: inline-flex; align-items: center;
    padding: .12rem .42rem;
    background: var(--kirmizi); border-radius: 6px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #fff;
}
.da-urun-gorsel { width: 48px; height: 48px; }
.da-urun-gorsel img { max-height: 48px; }
.da-urun-fiyat b { font-size: 13.5px; }
.da-urun .da-fatura-btn { align-self: center; }

/* "Tümü" hap linklerinde alt çizgi olmaz */
a.da-anamenu { text-decoration: none; }

/* da v6.6: asistan kupon kartları — kuponlarim.php bilet dilinin minisi
   (solda petrol değer kuponu, kesikli yırtma çizgisi, monospace kod, Kopyala) */
.da-kupon-deger {
    flex: none; min-width: 54px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    padding: .45rem .45rem;
    background: linear-gradient(150deg, var(--marka), var(--marka-k));
    border-radius: 9px;
    font-size: 12.5px; font-weight: 800; color: #fff; text-align: center;
}
.da-kupon .da-urun-bilgi { border-left: 2px dashed var(--cizgi); padding-left: .65rem; }
.da-kupon-kod {
    display: block; font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--metin);
    font-family: "SF Mono", ui-monospace, Menlo, monospace;
}
button.da-fatura-btn { border: 0; margin: 0; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 800; }
.da-kupon .da-fatura-btn:hover { background: var(--vurgu); color: #fff; }

/* =========================================================
   BOY SEÇENEKLERİ (vr-*, gunc-23) — ürün detayında varyant
   grubu butonları: aktif olan petrol halkalı, diğerleri linkli
   kart (HB varyant kutusu deseni). Hover'da yalnız renk/gölge.
   ========================================================= */
.vr-blok { margin: .2rem 0 1.1rem; }
.vr-baslik {
    display: block; margin-bottom: .5rem;
    font-size: 12px; font-weight: 800; color: var(--metin);
}
.vr-secenekler { display: flex; flex-wrap: wrap; gap: .5rem; }
.vr-btn {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    min-width: 86px; padding: .55rem .9rem;
    background: var(--beyaz); border: 1.5px solid var(--cizgi); border-radius: 11px;
    text-decoration: none; text-align: center;
    transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.vr-btn b { font-size: 13px; font-weight: 800; color: var(--metin); }
.vr-btn small { font-size: 11px; font-weight: 600; color: var(--metin-3); }
a.vr-btn:hover { border-color: var(--marka); box-shadow: 0 2px 10px rgba(var(--marka-rgb), .14); }
.vr-btn.aktif {
    border-color: var(--marka); background: rgba(var(--marka-rgb), .05);
    box-shadow: 0 0 0 1px var(--marka) inset;
}
.vr-btn.aktif b { color: var(--marka); }

/* gunc-68 görünüm v2: ürün seçenekleri — kart kutusu kaldırıldı,
   başlık satırında seçili değer ("Beden: L"), çipler hap biçimli;
   seçili = petrol dolgu + ✓, tükenen = soluk hap + üstü çizili değer */
.vrx-blok { margin: .2rem 0 1.25rem; }
.vrx-baslik-satir {
    display: flex; align-items: baseline; gap: .35rem;
    margin: .95rem 0 .55rem;
}
.vrx-baslik-satir:first-child { margin-top: 0; }
.vrx-blok .vr-baslik {
    margin: 0; font-size: 12.5px; font-weight: 800;
    color: var(--metin); text-transform: capitalize;
}
.vrx-secili {
    font-size: 12.5px; font-weight: 800; color: var(--marka);
    text-transform: capitalize;
}
.vrx-secili:empty { display: none; }
.vrx-secili::before { content: ": "; font-weight: 600; color: var(--metin-3); }
.vrx-fiyat-notu {
    margin-left: auto; font-size: 10.5px; font-weight: 650; color: var(--metin-3);
}
/* v3 KUTULU MAĞAZA DESENİ (Yasin seçti): eşit boy köşeli kutular, seçili olan
   dolgu yerine kalın petrol çerçeve + açık petrol zemin (✓ yok) — HB varyant dili */
button.vrx-btn {
    cursor: pointer; font: inherit;
    justify-content: center; gap: .05rem;
    min-width: 58px; min-height: 42px; padding: .45rem .95rem;
    border-radius: 10px;
    transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis), transform .1s;
}
button.vrx-btn b { font-size: 13px; font-weight: 700; text-transform: capitalize; line-height: 1.15; }
/* gunc-70: değere özel fiyat — kutuda değerin altında küçük etiket (Boy Seçenekleri dili) */
.vrx-fiyat { font-size: 10.5px; font-weight: 700; color: var(--metin-3); white-space: nowrap; }
button.vrx-btn:hover:not([disabled]):not(.aktif) {
    border-color: var(--marka);
    box-shadow: none;
    transform: none;
}
button.vrx-btn.aktif {
    border-color: var(--marka); background: rgba(var(--marka-rgb), .06);
    box-shadow: 0 0 0 1px var(--marka) inset;
}
button.vrx-btn.aktif b { color: var(--marka); font-weight: 800; }
button.vrx-btn.aktif .vrx-fiyat { color: var(--marka); }
.vrx-cok-secenek {
    display: grid;
    grid-template-columns: repeat(11, minmax(46px, 1fr));
    gap: 7px;
    width: 100%;
    max-width: 650px;
}
.vrx-cok-secenek button.vrx-btn {
    min-width: 0;
    width: 100%;
    min-height: 46px;
    padding: .4rem .25rem;
    border-radius: 9px;
}
.vrx-cok-secenek button.vrx-btn b {
    font-size: 13px;
    line-height: 1;
    text-transform: none;
}
.vrx-cok-secenek .vrx-fiyat { display: none; }
@media (max-width: 640px) {
    .vrx-cok-secenek { grid-template-columns: repeat(6, minmax(43px, 1fr)); gap: 6px; }
    .vrx-cok-secenek button.vrx-btn { min-height: 44px; }
    .vrx-fiyat-notu { font-size: 9.5px; }
}
/* Tükenen değer: sade soluk hap, değer üstü çizili — çapraz çizgi/rozet yok */
.vrx-btn.vrx-bitti {
    cursor: not-allowed;
    background: #F4F6F7; border-color: var(--cizgi-acik, #E7ECEE);
}
.vrx-btn.vrx-bitti b {
    color: #ADB9BE; font-weight: 600;
    text-decoration: line-through; text-decoration-thickness: 1.5px;
}
/* gunc-69: haber ayarı açıkken bitti çipi TIKLANIR (disabled değil, aria-disabled) —
   hover'da amber kenar + mini zil, modal "stoğa gelince haber verelim mi?" sorar */
.vrx-btn.vrx-bitti[aria-disabled] { cursor: pointer; }
.vrx-btn.vrx-bitti[aria-disabled]:hover {
    border-color: var(--vurgu); background: #FFF9EF;
    box-shadow: 0 2px 10px rgba(240, 165, 0, .16);
}
.vrx-btn.vrx-bitti[aria-disabled]:hover b { color: var(--metin-2); }

/* vhm v6 "SİTE YERLİSİ" (v4 gece + v5 aydınlık davetiye de "siteye uygun değil"
   dendi — DERS: modal, sitenin KENDİ bileşenlerinden kurulur): se-kutu ailesi
   (değerlendirme modalıyla aynı), tıklanan değer sitedeki bitti kutusunun
   birebir aynısı (.vhm-cip, vrx-bitti stilini paylaşır), form ürün sayfasının
   hazır .stok-haber paneli. Yalnız dizilim için ufak ekler: */
.vhm-kutu { width: min(92vw, 450px); padding: 2.4rem 2rem 1.9rem; }
.vhm-rozet { /* petrol zil rozeti — site bilgi ikonları dili */
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin: 0 auto .8rem;
    background: rgba(var(--marka-rgb), .1); border-radius: 50%;
    color: var(--marka);
}
.vhm-kutu .vhm-aciklama { margin-bottom: 1.35rem; }
.vhm-urun { /* ürün satırı — kutusuz, ince ayraçlarla nefes alır (sepet çekmecesi dili) */
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    padding: .9rem 0; margin-bottom: 1.1rem;
    border-top: 1px solid var(--cizgi-acik, #EDF1F2);
    border-bottom: 1px solid var(--cizgi-acik, #EDF1F2);
    text-align: left;
}
.vhm-urun-foto {
    flex: none; width: 54px; height: 54px; padding: 3px;
    object-fit: contain;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik, #EDF1F2); border-radius: 12px;
}
.vhm-urun-bilgi { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.vhm-urun-ad {
    font-size: 13.5px; font-weight: 700; color: var(--metin);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vhm-secim-satir { display: flex; align-items: baseline; gap: .35rem; }
.vhm-secim-etiket { font-size: 12.5px; font-weight: 600; color: var(--metin-2); text-transform: capitalize; }
.vhm-secim-etiket::after { content: ''; }
.vhm-secim-deger { font-size: 13.5px; font-weight: 800; color: var(--marka); text-transform: capitalize; }
.vhm-tukendi { font-size: 12px; font-weight: 700; color: #C4515C; white-space: nowrap; }
.vhm-panel { text-align: left; margin-top: 0; }
/* girdi/buton boy eşitliği bileşenin kendisinde (.stok-haber-satir) — modal da oradan alır */
.vhm-sosyal {
    display: flex; align-items: flex-start; justify-content: center; gap: .4rem;
    margin: .8rem 0 0; font-size: 12px; line-height: 1.45; color: var(--aksiyon-metin);
}
.vhm-sosyal[hidden] { display: none; }
.vhm-sosyal svg { flex: none; margin-top: .1rem; color: var(--vurgu); }
.vhm-not { margin: .6rem 0 0; font-size: 11px; line-height: 1.45; color: var(--metin-3); }

/* =========================================================
   SEKME ÇUBUĞU SABİTLEME — .sekme-btnler overflow-x:auto idi;
   masaüstünde trackpad/tekerlek şeridin üstündeyken sayfa yerine
   ŞERİDİ kaydırıyordu (sekmeler oynuyor, kaydırma takılıyor).
   Masaüstünde kaydırma kapalı, sığmazsa alt satıra sarar;
   mobilde (≤700px) yatay kaydırma davranışı korunur.
   ========================================================= */
@media (min-width: 701px) {
    .sekme-btnler { overflow-x: visible; flex-wrap: wrap; }
}

/* =========================================================
   DEĞERLENDİRME FORMU v2 (yf2-*) — ürün sayfasındaki form
   çıplak alanlardan KART görünümüne: amber yıldız başlık rozeti,
   yıldız + canlı puan adı, kapanışta not | buton satırı.
   ========================================================= */
.yorum-form.yf2 {
    max-width: 620px;
    padding: 1.15rem 1.25rem 1.2rem;
    background: #F7FAFA; border: 1px solid var(--cizgi-acik); border-radius: 14px;
    border-top: 1px solid var(--cizgi-acik); /* eski üst-çizgi ayracını ez */
}
.yf2-bas { display: flex; align-items: center; gap: .7rem; }
.yf2-ikon {
    flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--aksiyon-rgb), .14); border-radius: 10px; color: var(--aksiyon-k2);
}
.yf2-bas-metin b { display: block; font-size: 14.5px; }
.yf2-bas-metin small { display: block; font-size: 11.5px; color: var(--metin-3); margin-top: .1rem; }
.yf2-puan { display: flex; align-items: center; gap: .8rem; }
.yf2 .puan-secici label { font-size: 34px; }
.yf2-puan-adi { min-width: 100px; font-size: 12.5px; font-weight: 800; color: var(--aksiyon-k2); }
.yf2 textarea { background: var(--beyaz); }
.yf2 textarea:focus { box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12); }
.yf2-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.yf2-not { display: inline-flex; align-items: center; gap: .4rem; font-size: 11.5px; color: var(--metin-3); }
.yf2-not .ikn { color: var(--marka); }
.yf2 .btn { align-self: auto; margin: 0; }

/* yf2.1: form yarım genişlikte yüzüyordu (eski max-width:560 mirası) —
   panel genişliğine yayıldı, başlık ile yıldızlar tek satırda dengelendi */
.yorum-form.yf2 { max-width: none; padding: 1.3rem 1.5rem 1.35rem; }
.yf2-bas { justify-content: space-between; flex-wrap: wrap; }
.yf2-bas-metin { flex: 1; min-width: 220px; }
.yf2-bas .yf2-puan { margin-left: auto; }   /* yıldızlar başlık satırının sağına */
@media (max-width: 700px) { .yf2-bas .yf2-puan { margin-left: 0; flex-basis: 100%; } }

/* yf2.2: "Puanınız" şeridi — yıldızlar sağa savrulmak yerine başlığın
   altında etiketli beyaz şeritte; hatada kırmızı halka */
.yf2-puan {
    display: flex; align-items: center; gap: .8rem;
    padding: .55rem .95rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 11px;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.yf2-puan-etiket { font-size: 12.5px; font-weight: 800; color: var(--metin); }
.yf2-puan-hata { border-color: var(--kirmizi); box-shadow: 0 0 0 3px rgba(221, 26, 49, .12); }
.yf2-bas .yf2-puan { margin-left: 0; } /* eski sağa-it kuralını ez (yapı değişti) */

/* yf2.3: "Puanınız" kutusu olmadı → kutusuz sade satır; çerçeve görünmez
   ama hata durumunda kırmızı halka aynı yerde belirir (yer kaymaz) */
.yf2-puan {
    background: none; border: 1px solid transparent;
    padding: .35rem .6rem; margin: -.2rem 0 0 -.6rem;
    gap: .7rem; align-self: flex-start;
}
.yf2 .puan-secici label { font-size: 26px; }
.yf2-puan-etiket { color: var(--metin-2); font-weight: 700; }
.yf2-puan-hata { background: #FDF3F2; border-color: var(--kirmizi); box-shadow: 0 0 0 3px rgba(221, 26, 49, .1); border-radius: 10px; }

/* yp2: "Yorum Yayınlanma Kriterleri" turuncu başlık + uyarı ikonu KALDIRILDI —
   buton ve sakin bilgi rozeti tek satırda (durumlar: kriter / onay bekliyor / yayında) */
.yp-eylem.yp2 { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.yp2-kriter {
    display: inline-flex; align-items: center; gap: .5rem;
    margin: 0; padding: .55rem .9rem;
    background: var(--bg); border-radius: 10px;
    font-size: 12px; line-height: 1.5; color: var(--metin-2);
}
.yp2-kriter .ikn { color: var(--marka); flex: none; }
.yp2-kriter b { color: var(--metin); }
.yp2-durum {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .9rem;
    background: var(--aksiyon-a); border-radius: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--aksiyon-metin);
}
.yp2-durum .ikn { flex: none; }
.yp2-durum.yayinda { background: var(--yesil-a); color: #086B45; }

/* yp3: buton + gri hap yan yana duruyordu — form başlığındaki (yf2) rozet
   desenine geçildi: tek sakin kart, solda amber yıldız rozeti + başlık/kriter,
   sağda eylem butonu ya da durum rozeti */
.yp-eylem.yp3 {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .95rem 1.15rem; margin-bottom: 1.2rem;
    background: var(--bg); border: 1px solid var(--cizgi-acik); border-radius: 13px;
}
.yp3-sol { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 250px; }
.yp3-ikon {
    flex: none; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--aksiyon-rgb), .14); border-radius: 11px; color: var(--aksiyon-k2);
}
.yp3-metin b { display: block; font-size: 13.5px; }
.yp3-metin small {
    display: flex; align-items: center; gap: .4rem;
    margin-top: .15rem;
    font-size: 11.5px; line-height: 1.45; color: var(--metin-3);
}
.yp3-metin small .ikn { color: var(--marka); flex: none; }
.yp3-metin small b { display: inline; font-size: inherit; color: var(--metin-2); }
.yp3-btn { margin: 0; }
@media (max-width: 600px) {
    .yp3-btn { flex-basis: 100%; justify-content: center; }
}

/* gunc-24 v2: "Kargom Nerede?" — amber buton lila panelde sırıtıyordu →
   panel içinde TEK beyaz tıklanır kart (petrol kamyon rozeti + başlık/takip
   no + chevron); hover'da yalnız kenarlık/gölge, kayma yok */
.hsd-takip {
    display: flex; align-items: center; gap: .7rem;
    margin-top: .9rem; padding: .65rem .8rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 10px;
    text-decoration: none; color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.hsd-takip:hover { border-color: var(--marka); box-shadow: 0 2px 10px rgba(var(--marka-rgb), .12); color: var(--metin); }
.hsd-takip-ikon {
    flex: none; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--turuncu-a); border-radius: 9px; color: var(--marka);
}
.hsd-takip-metin { flex: 1; min-width: 0; }
.hsd-takip-metin b { display: block; font-size: 12.5px; }
.hsd-takip-metin small {
    display: block; margin-top: .1rem;
    font-size: 11px; color: var(--metin-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hsd-takip-ok { flex: none; color: var(--metin-3); display: flex; }

/* hsd v3: sipariş detayı cilası — üstte kopyalanabilir sipariş no şeridi,
   kalemler "Ürünler (N)" başlıklı beyaz kartta + "Tümünü Sepete Ekle",
   kalem tutarı satırın sağına hizalı */
.hsd-no-bar {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-bottom: .9rem; padding: .55rem .9rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 10px;
    font-size: 12.5px; color: var(--metin-2);
}
.hsd-no-bar b { color: var(--metin); }
.hsd-kopyala {
    border: 1px solid var(--cizgi-acik); background: var(--bg); border-radius: 7px;
    padding: .22rem .6rem; font-size: 11px; font-weight: 700; color: var(--metin-2);
    cursor: pointer; transition: border-color var(--gecis), color var(--gecis);
}
.hsd-kopyala:hover { border-color: var(--marka); color: var(--marka); }
.hsd-no-ozet { margin-left: auto; font-size: 12px; color: var(--metin-3); }

.hsd-kalemler {
    background: var(--beyaz); border: 1px solid var(--cizgi-acik);
    border-radius: 12px; padding: .2rem 1rem .35rem;
}
.hsd-kalemler-bas {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .75rem 0 .65rem; border-bottom: 1px solid var(--cizgi-acik);
}
.hsd-kalemler-bas b { font-size: 13px; }
.hsd-kalemler-bas .hsd-mini-btn { display: inline-flex; align-items: center; gap: .35rem; }
.hsd-kalem-toplam { margin-left: auto; flex: none; font-size: 13px; padding-top: .1rem; }
@media (max-width: 600px) {
    .hsd-no-ozet { flex-basis: 100%; margin-left: 0; }
}

/* gunc-25: "İade Edildi" durumu — petrol tonlu satır rozeti + durum paneli,
   asistan sipariş kartı rengi */
.hs2-iade { color: var(--marka); }
.hsd-durum.hs2-iade { background: var(--marka-a); border-color: rgba(var(--marka-rgb), .22); }
.da-durum-iade { color: var(--marka); }

/* gunc-25b: "Siparişle ilgili sorunum var" — v1 link görünümü eylem satırları
   arasında kayboldu → panel kartlarıyla aynı dilde TAM GENİŞLİK beyaz buton
   (amber uyarı rozeti + ortalanmış metin); tıklayınca sm (sorun) modalı açılır */
.hsd-sorun-ac {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-bottom: .5rem; padding: .55rem .8rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--metin); cursor: pointer;
    transition: border-color var(--gecis), box-shadow var(--gecis), color var(--gecis);
}
.hsd-sorun-ac:hover { border-color: var(--marka); color: var(--marka); box-shadow: 0 2px 10px rgba(var(--marka-rgb), .12); }
.hsd-sorun-ac .ikn { color: var(--aksiyon-k2); flex: none; }

/* sm başarı ekranı: gönderim sonrası modal kapanmaz — form yerine yeşil onay,
   yanıt süresi rozeti ve Taleplerimi Gör / Tamam butonları (bilgiModal'ın düz
   emojili metni yerine kurgulu kapanış) */
.sm-sonuc { text-align: center; }
.sm-sonuc-mesaj { max-width: 380px; margin-left: auto; margin-right: auto; }
.sm-sonuc-not {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: .7rem 0 .2rem; padding: .4rem .85rem;
    background: var(--bg); border-radius: 8px;
    font-size: 11.5px; font-weight: 600; color: var(--metin-2);
}
.sm-sonuc-not svg { color: var(--marka); flex: none; }
.sm-sonuc-btnler { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.sm-sonuc-btnler .btn { text-decoration: none; }

/* kp2 fix: kişiye özel uzun kodlarda (HG50-XXXXX, gunc-27) kod+Kopyala satırı
   sağ üstteki absolute rozetin ("Alışverişe Başla") altına giriyordu →
   kod satırına rozet genişliği kadar sağ pay; dar kartta Kopyala alta sarar */
.kp2-kod { padding-right: 118px; }

/* gm v2: giriş/kayıt modalı — v1 çıplak form "çok kötü" bulundu → petrol
   gradyan karşılama başlığı (damla logo rozeti + ışık baloncuğu), ikonlu
   girdiler, autofill mavisi düzeltmesi, SSL güven satırı.
   Girdi stilleri bilinçli AÇIK yazıldı (global input kuralları sızmasın) */
.gm-popup {
    z-index: 1300; /* mobil dock ve sabit ürün butonlarının daima üstünde */
    overflow-y: auto;
    overscroll-behavior: contain;
}
.gm-kutu { padding: 0; overflow: hidden; text-align: left; }
.gm-bas {
    position: relative; overflow: hidden;
    padding: 1.5rem 1.6rem 1.3rem;
    background: linear-gradient(135deg, var(--navy), var(--marka) 80%, #14899A);
    color: #fff;
}
.gm-bas::after { /* dekoratif ışık baloncuğu (da-panel v3 dili) */
    content: ''; position: absolute; top: -70px; right: -45px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.gm-logo {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: .65rem;
    background: rgba(255, 255, 255, .14); border-radius: 12px;
}
.gm-logo svg { width: 20px; height: 20px; }
.gm-bas b, .gm-bas h1 { display: block; margin: 0; font-size: 19px; letter-spacing: -.02em; }
.gm-bas small { display: block; margin-top: .2rem; font-size: 12.5px; opacity: .85; }
.gm-kutu .se-kapat { z-index: 4; background: rgba(255, 255, 255, .16); color: #fff; }
.gm-kutu .se-kapat:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.gm-icerik { padding: 1.15rem 1.6rem 1.35rem; }
.gm-sekmeler {
    display: flex; gap: .3rem; margin-bottom: 1.05rem;
    background: var(--bg); border-radius: 11px; padding: .3rem;
}
.gm-sekme {
    flex: 1; padding: .52rem .8rem;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--metin-2);
    transition: background var(--gecis), color var(--gecis), box-shadow var(--gecis);
}
.gm-sekme.aktif { background: var(--beyaz); color: var(--marka); box-shadow: 0 1px 4px rgba(var(--marka-golge-rgb), .1); }
.gm-kutu form label {
    display: block; margin-bottom: .72rem;
    font-size: 12px; font-weight: 700; color: var(--metin-2);
}
.gm-alan { position: relative; display: block; margin-top: .32rem; }
.gm-alan svg {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: #93A6AB; pointer-events: none;
    transition: color var(--gecis);
}
.gm-alan:focus-within svg { color: var(--marka); }
.gm-kutu form input {
    display: block; width: 100%;
    padding: .62rem .8rem .62rem 2.45rem;
    background: var(--beyaz); border: 1.5px solid var(--cizgi); border-radius: 10px;
    font: inherit; font-size: 13.5px; color: var(--metin);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.gm-kutu form input::placeholder { color: #A9B6BA; }
.gm-kutu form input:focus { border-color: var(--marka); box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12); outline: none; }
/* Chrome autofill mavi zemini ez (beyaz iç gölge hilesi) */
.gm-kutu form input:-webkit-autofill,
.gm-kutu form input:-webkit-autofill:hover,
.gm-kutu form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--beyaz) inset;
    -webkit-text-fill-color: var(--metin);
}
.gm-cift { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 480px) { .gm-cift { grid-template-columns: 1fr; } }
.gm-kutu .se-btnler { margin-top: .95rem; }
.gm-kutu input.gm-sifre2-gizli { display: none !important; }
.gm-kutu form label.gm-sifre-goster {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: -.15rem 0 0; color: var(--metin-2); font-size: 11.5px; font-weight: 650;
    cursor: pointer;
}
.gm-kutu form label.gm-sifre-goster input {
    display: block; width: 16px; height: 16px; margin: 0; padding: 0;
    border-radius: 4px; box-shadow: none; accent-color: var(--marka);
}
.gm-kutu form label > small { color: var(--metin-3); font-size: 10px; font-weight: 550; }
.gm-yukleniyor { cursor: wait !important; opacity: .92; }
.gm-yukleniyor .gm-spinner {
    width: 15px; height: 15px; flex: none;
    border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
    animation: gm-don .7s linear infinite;
}
@keyframes gm-don { to { transform: rotate(360deg); } }
/* hata uyarısı: çıplak kırmızı satır yerine ikonlu yumuşak kırmızı kart */
.gm-hata {
    display: flex; align-items: flex-start; gap: .5rem;
    margin: 0 0 .85rem; padding: .6rem .8rem;
    background: #FDF3F2; border: 1px solid rgba(221, 26, 49, .25); border-radius: 10px;
    font-size: 12px; font-weight: 600; line-height: 1.45; color: #B3261E;
}
.gm-hata[hidden] { display: none; } /* hidden + display:flex tuzağı */
.gm-hata svg { flex: none; margin-top: .1rem; color: var(--kirmizi); }
/* buton altı notlar: düz gri satır yerine yumuşak zeminli rozet
   (girişte sakin gri sepet, kayıtta amber hediye) */
.gm-not {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    margin: .85rem 0 0; padding: .5rem .8rem;
    background: var(--bg); border-radius: 9px;
    font-size: 11.5px; line-height: 1.45; color: var(--metin-2); text-align: center;
}
.gm-not svg { flex: none; color: var(--marka); }
.gm-not b { color: var(--metin); }
.gm-not-hediye { background: rgba(var(--aksiyon-rgb), .1); color: var(--aksiyon-metin); }
.gm-not-hediye svg { color: var(--aksiyon-k2); }
.gm-not-hediye b { color: var(--aksiyon-metin); }
.gm-guven {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    margin: 1.05rem 0 0; padding-top: .9rem;
    border-top: 1px dashed var(--cizgi-acik);
    font-size: 11px; color: var(--metin-3);
}
.gm-guven svg { color: var(--marka); flex: none; }

/* gunc-27b: bot tuzağı alanı — insan görmez (display:none DEĞİL, kimi botlar
   onu atlıyor; ekran dışına taşınır) */
.hp-alan {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* ha: header canlı arama paneli — sonuçlar kutunun altına açılır.
   .arama'nın overflow:hidden'ı paneli kırpardı → visible'a çevrildi
   (köşe kırpması kaybı yok: çocuklar zaten saydam zeminli) */
.arama { position: relative; overflow: visible; }
.ha-panel {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    z-index: 96;
    padding: .35rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 13px;
    box-shadow: 0 14px 34px rgba(var(--marka-golge-rgb), .16);
}
.ha-panel[hidden] { display: none; }
.ha-satir {
    display: flex; align-items: center; gap: .7rem;
    padding: .45rem .55rem; border-radius: 9px;
    text-decoration: none; color: var(--metin);
    transition: background var(--gecis);
}
.ha-satir:hover { background: var(--bg); color: var(--metin); }
.ha-gorsel {
    flex: none; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border-radius: 8px;
    font-size: 16px; color: var(--metin-3); overflow: hidden;
}
.ha-gorsel img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ha-ad {
    flex: 1; min-width: 0;
    font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ha-fiyat { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.ha-fiyat s { font-size: 10.5px; color: var(--metin-3); }
.ha-fiyat b { font-size: 12.5px; }
.ha-fiyat b.ha-indirimli { color: var(--yesil); }
.ha-tumu {
    display: block; margin-top: .25rem; padding: .55rem;
    border-top: 1px solid var(--cizgi-acik);
    text-align: center; text-decoration: none;
    font-size: 12px; font-weight: 700; color: var(--marka);
}
.ha-tumu:hover { color: var(--marka-k); }
.ha-bos { padding: .95rem; text-align: center; font-size: 12.5px; color: var(--metin-3); }

/* ib2: iletişim onay paneli v2 — kuru teşekkür metni yerine 3 adımlı süreç
   kartları + acil kanal hapları (telefon/WhatsApp) */
.ib2-alt { max-width: 460px; margin-left: auto; margin-right: auto; }
.ib2-adimlar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
    max-width: 560px; margin: 0 auto 1.15rem;
    text-align: left;
}
@media (max-width: 640px) { .ib2-adimlar { grid-template-columns: 1fr; max-width: 340px; } }
.ib2-adim {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .7rem .75rem;
    background: var(--bg); border-radius: 11px;
}
.ib2-adim-ikon {
    flex: none; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 50%;
    color: var(--metin-3);
}
.ib2-adim.tamam { background: var(--yesil-a); }
.ib2-adim.tamam .ib2-adim-ikon { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.ib2-adim b { display: block; font-size: 12px; }
.ib2-adim small { display: block; margin-top: .1rem; font-size: 10.5px; line-height: 1.4; color: var(--metin-3); }
.ib2-kanallar {
    display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap;
    margin-bottom: 1.35rem; padding-top: 1.1rem;
    border-top: 1px dashed var(--cizgi-acik);
    max-width: 560px; margin-left: auto; margin-right: auto;
}
.ib2-kanallar > span { font-size: 12px; font-weight: 700; color: var(--metin-2); }
.ib2-kanallar a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 20px;
    font-size: 12px; font-weight: 700; color: var(--metin); text-decoration: none;
    transition: border-color var(--gecis), color var(--gecis), box-shadow var(--gecis);
}
.ib2-kanallar a:hover { border-color: var(--marka); color: var(--marka); box-shadow: 0 2px 8px rgba(var(--marka-rgb), .12); }
.ib2-kanallar a .ikn { color: var(--marka); }
.ib2 .il-basari-btnler { margin-top: 0; }

/* gunc-26 v3: kart rozeti minyatür karta dönüştü — sol üstte altın EMV yonga,
   sağ üstte marka, altta monospace son 4; köşeden yumuşak parlama.
   (v2 tek sütun etiket+numara sıkışık durdu.) İşlem referansı dökümün
   altında kesikli ayraçlı soluk satırda */
.hsd-kart-cip {
    position: relative; overflow: hidden;
    margin-left: auto; flex: none; align-self: center;
    display: flex; flex-direction: column; justify-content: space-between; gap: .55rem;
    min-width: 112px; padding: .55rem .7rem .55rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--marka) 75%, #14899A 130%);
    border-radius: 10px; color: #fff;
    box-shadow: 0 3px 10px rgba(var(--marka-rgb), .3);
}
.hsd-kart-cip::after { /* köşe parlaması */
    content: ''; position: absolute; top: -55px; right: -35px;
    width: 100px; height: 100px; border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}
.hsd-cip-ust { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.hsd-cip-ust em { /* altın EMV yonga */
    width: 17px; height: 13px; border-radius: 3px;
    background: linear-gradient(140deg, var(--aksiyon-acik), #D9A93F);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.hsd-kart-cip i {
    font-style: normal; font-size: 8px; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; opacity: .92;
}
.hsd-kart-cip b {
    position: relative; /* parlamanın üstünde kalsın */
    font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #fff;
}
.hsd-ref {
    margin-top: .55rem; padding-top: .5rem;
    border-top: 1px dashed var(--cizgi-acik);
    font-size: 10.5px; color: var(--metin-3);
}

/* Siparişlerim boş arama durumu: çıplak gri satır yerine kesikli kart
   (ikon rozeti + başlık + açıklama + Aramayı Temizle) */
.bos-arama {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: 2.2rem 1rem 1.9rem; text-align: center;
    background: var(--beyaz); border: 1px dashed var(--cizgi); border-radius: 12px;
}
.bos-arama[hidden] { display: none; } /* hidden + display:flex tuzağı */
.bos-arama-ikon {
    width: 46px; height: 46px; margin-bottom: .35rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border-radius: 50%; color: var(--metin-3);
}
.bos-arama b { font-size: 14px; }
.bos-arama p { margin: 0 0 .9rem; font-size: 12.5px; color: var(--metin-3); max-width: 420px; }
.bos-arama-btnler { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.bos-arama-btnler .btn { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.bos-arama-btnler .btn .ikn { flex: none; }

/* gs: giris.php + kayit.php sayfaları header modalının (gm) diline geçti —
   aynı gm-* sınıfları sayfada kart içinde kullanılır, sekmeler LİNK olur */
.gs-duzen { display: flex; justify-content: center; }
.gs-kart {
    width: 100%; max-width: 460px;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 18px;
    box-shadow: 0 10px 30px rgba(var(--marka-golge-rgb), .08);
}
a.gm-sekme { display: block; text-align: center; text-decoration: none; }
a.gm-sekme:hover { color: var(--marka); }
.gs-btn { width: 100%; margin-top: .35rem; }

/* gunc-25c: iade panelinde süreç notu + para iadesi bilgi kartı
   (hsd-takip kart iskeletini kullanır ama tıklanmaz — hover etkisi ezilir,
   rozet yeşil: para geri döndü) */
.hsd-geri-odeme:hover { border-color: var(--cizgi-acik); box-shadow: none; }
.hsd-geri-odeme .hsd-takip-ikon { background: var(--yesil-a); color: var(--yesil); }
/* açıklama takip no gibi tek satır kesilmesin — sarabilsin */
.hsd-geri-odeme .hsd-takip-metin small { white-space: normal; overflow: visible; }

/* ===== Sepet kupon hatası (sp2-kupon-hata) =====
   Çıplak kırmızı satır yerine ikonlu yumuşak kırmızı kart — gm-hata dili */
.sp2-kupon-hata {
    display: flex; align-items: flex-start; gap: .5rem;
    margin: .6rem 0 0; padding: .6rem .8rem;
    background: #FDF3F2; border: 1px solid rgba(221, 26, 49, .25); border-radius: 10px;
    font-size: 12px; font-weight: 600; line-height: 1.45; color: #B3261E;
}
.sp2-kupon-hata svg { flex: none; margin-top: .1rem; color: var(--kirmizi); }
.sp2-kupon-hata small { display: block; font-size: 11px; font-weight: 500; color: #C4736D; }

/* ===== Üyeliksiz sipariş takibi (stk-*) =====
   gs-kart + gm-kutu iskeleti; sonuç görünümünde kart genişler,
   durum paneli hesabım (hsd) bileşenlerini aynen kullanır */
.gs-kart.stk-genis { max-width: 560px; }
.stk-kalemler {
    margin: 1rem 0 .95rem; padding: .85rem 1rem;
    background: var(--zemin); border: 1px solid var(--cizgi-acik); border-radius: 12px;
}
.stk-kalem-baslik {
    display: flex; align-items: center; gap: .4rem;
    font-size: 12px; color: var(--metin-2); text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: .55rem;
}
.stk-kalem {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .35rem 0; font-size: 13px;
}
.stk-kalem small { color: var(--metin-2); font-weight: 600; }
.stk-kalem b { font-size: 13px; white-space: nowrap; }
.stk-dokum {
    margin-top: .65rem; padding-top: .45rem;
    border-top: 1px solid var(--cizgi-acik);
}
.stk-indirim { color: var(--yesil); }
.stk-indirim span { font-weight: 650; }
.stk-indirim b, .stk-bedava { color: var(--yesil); }
.stk-toplam {
    margin-top: .4rem; padding-top: .6rem;
    border-top: 1px dashed var(--cizgi-acik); font-weight: 700;
}
.stk-toplam b { font-size: 15px; color: var(--marka); }

/* ===== Bulunamadı / 404 (bn-*) ===== bos-arama kartı sayfa gövdesinde ortalanır */
.bn-duzen { display: flex; justify-content: center; }
.bn-kart { width: 100%; max-width: 640px; margin: 2.5rem 0 3rem; padding: 2.6rem 1.6rem; }

/* ===== Adreslerim: kart düzenleme (ad-duzenle) ===== */
.ad-eylem { display: flex; align-items: center; gap: .3rem; }
.ad-duzenle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    color: var(--metin-2); border: 1px solid transparent;
}
.ad-duzenle:hover { color: var(--marka); border-color: var(--cizgi-acik); background: var(--zemin); }
.ad-form-btnler { display: flex; gap: .6rem; align-items: center; }
.ad-form-btnler .btn { text-decoration: none; }

/* ===== Sipariş iptali (hsd-iptal) ===== hsd-sorun-ac kart-buton dili, kırmızı vurgu */
.hsd-iptal-form { margin-bottom: .5rem; }
.hsd-iptal-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .55rem .8rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--metin); cursor: pointer;
    transition: border-color var(--gecis), box-shadow var(--gecis), color var(--gecis);
}
.hsd-iptal-btn:hover { border-color: var(--kirmizi); color: var(--kirmizi); box-shadow: 0 2px 10px rgba(221, 26, 49, .12); }
.hsd-iptal-btn .ikn { color: var(--kirmizi); flex: none; }

/* ===== Şifremi unuttum (su-*) ===== gs kartı içinde onay ekranı */
.su-sonuc { text-align: center; padding: .4rem 0 .2rem; }
.su-onay {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--yesil-a); color: var(--yesil); margin-bottom: .7rem;
}
.su-sonuc b { display: block; font-size: 15px; margin-bottom: .35rem; }
.su-sonuc p { font-size: 12.5px; color: var(--metin-2); line-height: 1.6; margin: 0 0 1.1rem; }
.gs-unuttum { display: block; text-align: right; font-size: 12px; font-weight: 600;
              color: var(--metin-2); margin: -.35rem 0 .75rem; text-decoration: none; }
.gs-unuttum:hover { color: var(--marka); text-decoration: underline; }

/* ===== İki adımlı doğrulama (ia-*, gunc-70) — giris.php sayfası ve gm modalı
   AYNI sınıfları kullanır: kalkan rozeti + 6 haneli büyük kod kutusu + tekrar linki ===== */
.ia-kutu { text-align: center; }
.ia-ikon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: .2rem auto .65rem;
    background: rgba(var(--marka-rgb), .1); border-radius: 50%;
    color: var(--marka);
}
.ia-baslik { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--metin); }
.ia-metin { max-width: 320px; margin: .4rem auto 1rem; font-size: 12.5px; color: var(--metin-2); line-height: 1.55; }
.ia-kod, .gm-kutu form input.ia-kod {
    display: block; width: 100%; max-width: 230px; height: 54px;
    margin: 0 auto .7rem; padding: 0;
    text-align: center; font-size: 24px; font-weight: 800; letter-spacing: .32em;
    color: var(--metin); background: var(--beyaz);
    border: 1.5px solid var(--cizgi); border-radius: 12px;
}
.ia-kod::placeholder { color: #C9D3D6; letter-spacing: .32em; }
.ia-kod:focus, .gm-kutu form input.ia-kod:focus {
    outline: none; border-color: var(--marka);
    box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .12);
}
.ia-form .gs-btn { width: 100%; }
.ia-tekrar { margin: .8rem 0 0; }
.ia-tekrar-btn {
    border: 0; background: none; cursor: pointer; margin-top: .8rem;
    font: 600 12px 'Figtree', sans-serif; color: var(--metin-2);
}
.ia-tekrar-btn b { color: var(--marka); }
.ia-tekrar-btn:hover b { text-decoration: underline; }
.ia-tekrar-btn[disabled] { cursor: default; color: var(--yesil, #1B8A4C); }

/* ===== gm modalı: Şifremi unuttum paneli (gm-unuttum-*) ===== */
.gm-unuttum-baslik { display: block; font-size: 14.5px; margin-bottom: .3rem; }
.gm-unuttum-metin { margin: 0 0 .9rem; font-size: 12.5px; color: var(--metin-2); line-height: 1.55; }
.gm-unuttum-sonuc { text-align: center; padding: .5rem 0 .3rem; }
.gm-unuttum-sonuc .su-onay { margin-bottom: .6rem; }
.gm-unuttum-sonuc .gm-unuttum-metin { max-width: 320px; margin-left: auto; margin-right: auto; }
.gm-unuttum-geri {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    width: 100%; margin-top: .85rem; padding: .5rem;
    background: none; border: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--metin-2);
}
.gm-unuttum-geri:hover { color: var(--marka); }
.gm-sekmeler[hidden] { display: none; } /* unuttum panelinde sekmeler gizli — hidden + display:flex tuzağı */

/* ---- Kalem bazlı iade (gunc-33): iade edilen ürün rozeti ---- */
.hsd-iade-rozet {
    display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem;
    padding: .12rem .5rem; border-radius: 999px; vertical-align: 1px;
    background: var(--marka-a); color: var(--marka); border: 1px solid rgba(var(--marka-rgb), .22);
    font-size: .68rem; font-weight: 800; font-style: normal; letter-spacing: .03em; text-transform: uppercase;
}
.hsd-kalem-iade .hsd-gorsel { opacity: .55; }
.hsd-kalem-iade .hsd-kalem-ad { color: #8AA3A9; }
.hsd-kalem-iade .hsd-kalem-toplam { text-decoration: line-through; color: #8AA3A9; }
.stk-kalem-iade > span { color: #8AA3A9; }
.stk-kalem-iade > b { text-decoration: line-through; color: #8AA3A9; }

/* ---- Okunmamış destek yanıtı rozeti (gunc-44) ---- */
.hs2-rozet { display: inline-grid; place-items: center; min-width: 20px; height: 20px;
    margin-left: auto; padding: 0 .4rem; border-radius: 999px;
    background: var(--aksiyon); color: #fff; font-style: normal; font-size: .7rem; font-weight: 800;
    box-shadow: 0 2px 6px rgba(var(--aksiyon-rgb), .35); }
.hs2-menu a.aktif .hs2-rozet { background: #fff; color: #B45309; }
.st-yeni-cip { display: inline-block; padding: .14rem .55rem; border-radius: 999px;
    background: var(--aksiyon); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
    box-shadow: 0 2px 6px rgba(var(--aksiyon-rgb), .3); white-space: nowrap; }

/* ---- Header'da okunmamış destek yanıtı rozeti (gunc-44 devamı) ----
   Buton üstünde sayaç DENENDİ, BEĞENİLMEDİ — rozet yalnız açılır menüdeki
   "Soru ve Taleplerim" satırında (hs2-rozet). */
.hesap-menu-linkler .hs2-rozet { min-width: 18px; height: 18px; font-size: .66rem; }

/* ---- Ürün açıklaması markdown-lite öğeleri (aciklama_paragraf) ---- */
.sekme-panel .aciklama-alt-baslik { margin: 1.1rem 0 .55rem; font-size: 15px; font-weight: 800; color: var(--navy); }
.sekme-panel .aciklama-alt-baslik:first-child { margin-top: 0; }
.aciklama-liste { margin: 0 0 .8rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.aciklama-liste li { position: relative; padding-left: 1.1rem; font-size: 13.5px; line-height: 1.6; color: var(--metin-2); }
.aciklama-liste li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--turuncu); }
.aciklama-orta { text-align: center; }
.aciklama-orta.aciklama-liste li { padding-left: 0; }
.aciklama-orta.aciklama-liste li::before { position: static; display: inline-block; margin-right: .45rem; vertical-align: middle; }
.aciklama-sag { text-align: right; }
/* max-width:78ch'li paragraf kutusunun KENDİSİ de hizaya uymalı (margin auto tuzağı) */
.sekme-panel .aciklama-orta { margin-left: auto; margin-right: auto; }
.sekme-panel .aciklama-sag { margin-left: auto; }

/* ---- Slayt zemin paleti: görselsiz slayt/mini/hikâye için marka uyumlu zeminler
   (Admin → Vitrin → Zemin Rengi; varsayılan petrol gradyanı kendi kuralından gelir) ---- */
.zemin-amber    { background: linear-gradient(125deg, #7A4A00 0%, #C77800 52%, #F08A00 100%) !important; }
.zemin-lacivert { background: linear-gradient(125deg, #0A1D30 0%, #14324F 52%, #1F4B75 100%) !important; }
.zemin-yesil    { background: linear-gradient(125deg, #0B3327 0%, #14543F 52%, #1F7A5C 100%) !important; }

/* ---- Slayt renk paletleri: yazılı slaytlarda yazı ve buton rengi (admin seçer) ---- */
.yz-amber, .yz-amber strong, .yz-amber em { color: #FFC24D !important; }
.yz-krem,  .yz-krem strong,  .yz-krem em  { color: #FFE9C4 !important; }
.bt-petrol  { background: var(--marka) !important; color: #fff !important; }
.bt-yesil   { background: #15803D !important; color: #fff !important; }
.bt-kirmizi { background: #DC2626 !important; color: #fff !important; }

/* ---- Görselli slaytta opsiyonel buton: yazı basılmaz, buton alt sola oturur ---- */
.slayt-yazi-buton { position: absolute; left: 0; bottom: 0; max-width: none; }
.slayt-yazi-buton .slayt-cta { margin-top: 0; }
.mini-yazi-buton { position: absolute; left: 0; bottom: 0; margin-top: 0; max-width: none; }
.mini-yazi-buton .mini-ok { margin-top: 0; }
/* Görselli buton konumu: varsayılan sol alt; orta = tam merkez, sag = sağ alt */
.slayt-yazi-buton.buton-orta, .mini-yazi-buton.buton-orta {
    left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); }
.slayt-yazi-buton.buton-sag, .mini-yazi-buton.buton-sag { left: auto; right: 0; }

/* =========================================================
   DUYURU ŞERİDİ — Ayarlar → Alışveriş & Site. Zemin rengi --dz
   olarak inline gelir; gradyan + ışıltı süpürmesi + sallanan
   megafon rozeti CSS'te türetilir (.koyu = beyaz metin).
   ========================================================= */
.duyuru-serit { --dz: #F59E0B; position: relative; overflow: hidden;
    color: #262B33; font-size: 13px; font-weight: 600; letter-spacing: .01em;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--dz), #fff 10%),
        var(--dz) 45%,
        color-mix(in srgb, var(--dz), #000 18%)); }
.duyuru-serit.koyu { color: #fff; }
/* üst kenarda ince ışık çizgisi (cam hissi) */
.duyuru-serit::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: rgba(255, 255, 255, .35); }
.duyuru-ic { position: relative; display: flex; align-items: center; justify-content: center;
    gap: .7rem; min-height: 42px; padding-top: .4rem; padding-bottom: .4rem; }
.duyuru-rozet { display: grid; place-items: center; flex: none; width: 27px; height: 27px;
    border-radius: 50%; background: rgba(0, 0, 0, .1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.duyuru-serit.koyu .duyuru-rozet { background: rgba(255, 255, 255, .16); }
.duyuru-rozet svg { animation: duyuru-salla 5s ease-in-out infinite; transform-origin: 40% 60%; }
@keyframes duyuru-salla {
    0%, 78%, 100% { transform: rotate(0); }
    82% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); }
    90% { transform: rotate(-7deg); }  94% { transform: rotate(4deg); } }
.duyuru-metin { text-align: center; text-wrap: balance; }
.duyuru-link { display: inline-flex; align-items: center; gap: .3rem; flex: none;
    padding: .3rem .85rem; border-radius: 999px; text-decoration: none; color: inherit;
    font-size: 12px; font-weight: 800; white-space: nowrap;
    background: rgba(0, 0, 0, .12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    transition: background var(--gecis), transform var(--gecis); }
.duyuru-serit.koyu .duyuru-link { background: rgba(255, 255, 255, .18); }
.duyuru-link:hover { background: rgba(0, 0, 0, .22); transform: translateY(-1px); }
.duyuru-serit.koyu .duyuru-link:hover { background: rgba(255, 255, 255, .3); }
.duyuru-link svg { transition: transform var(--gecis); }
.duyuru-link:hover svg { transform: translateX(2px); }
@media (max-width: 640px) {
    .duyuru-serit { font-size: 12px; }
    .duyuru-ic { gap: .5rem; }
    .duyuru-rozet { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
    .duyuru-rozet svg { animation: none; }
}
.ft-ssl { display: inline-flex; align-items: center; gap: .3rem; }

/* Ödeme yöntemi seçimi (Ayarlar → Ödeme'de havale/kapıda açılırsa görünür) */
.od-yontemler { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin-bottom: 1.1rem; }
.od-yontem { position: relative; }
.od-yontem > input[type="radio"] { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px !important;
    margin: 0 !important; padding: 0 !important; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.od-yontem-ic { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; height: 100%;
    padding: .75rem .85rem; border: 1.5px solid var(--cizgi); border-radius: var(--r2);
    cursor: pointer; transition: border-color var(--gecis), background var(--gecis); }
.od-yontem-ic svg { color: var(--marka); margin-bottom: .2rem; }
.od-yontem-ic b { font-size: 13.5px; }
.od-yontem-ic small { font-size: 11px; color: var(--metin-3); line-height: 1.35; }
.od-yontem input:checked + .od-yontem-ic { border-color: var(--marka); background: var(--marka-a2);
    box-shadow: 0 0 0 1px var(--marka); }
.od-yontem input:focus-visible + .od-yontem-ic { outline: 2px solid var(--marka-2); outline-offset: 2px; }
.od-yontem-not { display: flex; gap: .5rem; align-items: flex-start; margin: .2rem 0 0;
    padding: .7rem .85rem; background: var(--marka-a2); border-radius: var(--r); font-size: 12.5px; }
.od-yontem-not[hidden] { display: none; } /* display:flex, hidden özniteliğini ezmesin */
.od-yontem-not svg { flex: none; color: var(--marka); margin-top: .1rem; }

/* "Stok gelince haber ver" formu (tükenen ürün sayfası) */
.stok-haber { margin-top: .8rem; padding: .9rem 1rem; background: var(--marka-a2);
    border: 1px dashed var(--marka-buz); border-radius: var(--r2); }
.stok-haber-baslik { display: flex; align-items: center; gap: .4rem; margin: 0 0 .55rem;
    font-size: 13px; font-weight: 700; color: var(--marka-k); }
/* Girdi ile buton HER YERDE (ürün sayfası + haber modalı) birebir aynı boyda */
.stok-haber-satir { display: flex; gap: .5rem; align-items: stretch; }
.stok-haber-satir input { flex: 1; min-width: 0; padding: 0 .8rem;
    border: 1px solid var(--cizgi); font: 500 13px 'Figtree', sans-serif; }
.stok-haber-satir input,
.stok-haber-satir .btn {
    height: 44px; margin: 0; /* genel form kuralı input'a üst boşluk veriyor — hiza kayması yapar */
    padding-top: 0; padding-bottom: 0;
    border-radius: var(--r); box-sizing: border-box; line-height: 42px;
}
.stok-haber-satir .btn { white-space: nowrap; display: inline-flex; align-items: center; }
.adet-fiyat-panel { margin: .9rem 0; padding: .8rem .9rem; border: 1px solid #D8E8E9;
    border-radius: var(--r2); background: linear-gradient(135deg, var(--marka-a2), #fff); }
.adet-fiyat-bas { display: flex; align-items: center; gap: .4rem; color: var(--marka-k); }
.adet-fiyat-bas svg { flex: none; color: var(--marka); }
.adet-fiyat-bas b { font-size: 13px; }
.adet-fiyat-bas small { margin-left: auto; font-size: 10.5px; color: var(--metin-3); }
.adet-fiyat-kademeler { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.adet-fiyat-kademeler span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem;
    border: 1px solid var(--cizgi-acik); border-radius: 8px; background: #fff; font-size: 11.5px; }
.adet-fiyat-kademeler b { color: var(--metin); }
.adet-fiyat-kademeler em { font-style: normal; font-weight: 700; color: var(--yesil); }
.adet-fiyat-durum { margin: .55rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--cizgi);
    font-size: 11.5px; font-weight: 700; color: var(--yesil); }
.adet-fiyat-kisa { display: inline-flex; align-items: center; gap: .25rem; width: fit-content;
    margin: .15rem 0 .45rem; padding: .2rem .45rem; border-radius: 999px;
    background: var(--yesil-a); color: var(--yesil); font-size: 10.5px; font-weight: 700; }
.sepet-birim del { margin-right: .3rem; color: var(--metin-3); }
.sepet-birim b { color: var(--yesil); }
.sepet-birim em { display: block; margin-top: .15rem; font-size: 10.5px; font-style: normal;
    font-weight: 700; color: var(--yesil); }
/* Sepette "üye girişi gerekir" notu (misafir alışverişi kapalıyken) */
.sp2-uye-not { display: flex; align-items: center; justify-content: center; gap: .35rem;
    margin: .5rem 0 0; font-size: 11.5px; color: var(--metin-3); }

/* ===== Favoriler (gunc-65): fav-* kalp butonları + Favorilerim sayfası ===== */
.urun-kart { position: relative; }
.fav-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    background: rgba(255, 255, 255, .93); border: 1px solid var(--cizgi-acik); border-radius: 50%;
    color: var(--metin-3); cursor: pointer;
    transition: color var(--gecis), border-color var(--gecis), transform var(--gecis); }
.urun-kart > .fav-btn { position: absolute; top: 10px; right: 10px; z-index: 3; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); }
.karsilastir-btn { position: absolute; top: 50px; right: 10px; z-index: 3; display: grid; place-items: center;
    width: 34px; height: 34px; padding: 0; border: 1px solid var(--cizgi-acik); border-radius: 50%;
    background: rgba(255,255,255,.93); color: var(--metin-3); cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.08);
    transition: color var(--gecis), border-color var(--gecis), background var(--gecis), transform var(--gecis); }
.karsilastir-btn:hover, .karsilastir-btn.aktif { color: var(--marka); border-color: var(--marka); background: var(--marka-a2); transform: scale(1.06); }
.kars-tepsi { position: fixed; left: 50%; bottom: 18px; z-index: 80; transform: translateX(-50%);
    display: flex; align-items: center; gap: .7rem; width: min(560px, calc(100% - 28px)); padding: .65rem .75rem;
    border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: #0B3F48; color: #fff;
    box-shadow: 0 12px 32px rgba(4,36,42,.28); }
.kars-tepsi[hidden] { display: none; }
body.kars-tepsi-acik .ft { margin-bottom: 82px; }
.kars-tepsi-ikon { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
    border-radius: 10px; background: rgba(255,255,255,.12); color: var(--amber); }
.kars-tepsi-metin { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.kars-tepsi-metin b { font-size: 13px; }.kars-tepsi-metin small { color: rgba(255,255,255,.68); font-size: 10.5px; }
.kars-temizle { border: 0; background: transparent; color: rgba(255,255,255,.75); font: 600 11.5px Figtree,sans-serif; cursor: pointer; }
.kars-git { white-space: nowrap; }.kars-git.pasif { opacity: .55; cursor: not-allowed; }
.kars-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 1rem;
    padding: 1.1rem 1.2rem; border-radius: 16px; background: linear-gradient(110deg, #0B3F48, #167987); color: #fff; }
.kars-hero > div { display: flex; align-items: center; gap: .8rem; }.kars-hero h1 { margin: 0; font-size: 22px; }
.kars-hero p { margin: .2rem 0 0; color: rgba(255,255,255,.72); font-size: 12.5px; }
.kars-hero-ikon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
    background: rgba(255,255,255,.12); color: var(--amber); }
.kars-bos { padding: 3rem 1rem; }.kars-bos h2 { margin: .7rem 0 .25rem; }.kars-bos-ikon { color: var(--marka); }
.kars-arac { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font-size: 12px; color: var(--metin-2); }
.kars-arac label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; cursor: pointer; }
.kars-kaydir { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: 14px; background: #fff; }
.kars-tablo { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.kars-tablo th, .kars-tablo td { padding: .8rem; border-right: 1px solid var(--cizgi-acik); border-bottom: 1px solid var(--cizgi-acik);
    text-align: left; vertical-align: top; font-size: 12px; line-height: 1.45; }
.kars-tablo tr:last-child th, .kars-tablo tr:last-child td { border-bottom: 0; }.kars-tablo th:last-child, .kars-tablo td:last-child { border-right: 0; }
.kars-tablo .kars-ozellik { width: 145px; background: #F7F9FA; color: var(--metin-2); font-weight: 700; }
.kars-urun { display: flex; flex-direction: column; gap: .45rem; min-width: 150px; }
.kars-gorsel { display: grid; place-items: center; height: 150px; border-radius: 10px; background: var(--bg); overflow: hidden; }
.kars-gorsel img { width: 100%; height: 100%; object-fit: contain; }.kars-ad { min-height: 38px; color: var(--metin); font-weight: 700; }
.kars-urun strong { font-size: 17px; color: var(--metin); }.kars-urun .btn { min-height: 38px; font-size: 11.5px; }
.kars-cikar { align-self: center; color: var(--metin-3); font-size: 10.5px; text-decoration: underline; }
@media (max-width: 640px) {
    body.kars-tepsi-acik .ft { margin-bottom: 64px; }
    .kars-tepsi { left: auto; right: 10px; bottom: 10px; transform: none; width: auto; max-width: calc(100% - 20px);
        min-height: 46px; gap: .35rem; padding: .4rem .45rem; border-radius: 999px; }
    .kars-tepsi-ikon { display: none; }.kars-tepsi-metin { margin-right: 0; }.kars-tepsi-metin b { font-size: 11.5px; }
    .kars-tepsi-metin small { display: none; }
    .kars-temizle { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; font-size: 0; }
    .kars-temizle::before { content: '\00d7'; font-size: 19px; line-height: 1; }
    .kars-git { min-height: 34px; padding: .38rem .65rem; font-size: 11px; border-radius: 999px; }
    .kars-hero { align-items: flex-start; }.kars-hero-ikon { display: none; }.kars-hero h1 { font-size: 18px; }
    .kars-arac { align-items: flex-start; flex-direction: column; }.kars-tablo .kars-ozellik { width: 115px; }
}
.fav-btn:hover { color: var(--kirmizi); border-color: var(--kirmizi); transform: scale(1.08); }
.fav-btn.aktif { color: var(--kirmizi); border-color: var(--kirmizi); animation: fav-pop .32s ease; }
.fav-btn.aktif .ikn { fill: var(--kirmizi); }
@keyframes fav-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* Ürün detayı: sepete ekle CTA'sının yanında kalp — satırla aynı boy (46px),
   ince çember yerine belirgin kenar + hafif gölge; aktifte dolgulu kırmızı zemin */
.fav-detay { width: 46px; height: 46px; flex: none; background: var(--beyaz);
    border-color: var(--cizgi); box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.fav-detay.aktif { background: var(--kirmizi-a); border-color: transparent; }
.tukendi .fav-detay { display: inline-grid; width: 40px; height: 40px; margin-left: .55rem; vertical-align: middle; }
/* Favorilerim ızgarası: auto-FILL + üst sınırlı iz — az ürün varken kart tüm
   satıra yayılıp kare görseli devleştirmesin (urunler-vitrin auto-fit'ini ezer) */
.fav-izgara { grid-template-columns: repeat(auto-fill, minmax(200px, 235px)); justify-content: start; }

/* ===== Müşteriden iade talebi (gunc-65): hsd-iade-* ===== */
.hsd-iade { margin: 0; }
.hsd-iade > summary { display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .55rem .8rem; background: var(--beyaz);
    border: 1px solid var(--cizgi-acik); border-radius: 10px;
    font-size: 12.5px; font-weight: 700; color: var(--metin); cursor: pointer; list-style: none;
    transition: border-color var(--gecis), color var(--gecis); }
.hsd-iade > summary::-webkit-details-marker { display: none; }
.hsd-iade > summary:hover, .hsd-iade[open] > summary { border-color: var(--vurgu); color: var(--vurgu-k); }
.hsd-iade > summary .ikn { color: var(--vurgu); flex: none; }
.hsd-iade-form { display: grid; gap: .55rem; margin-top: .6rem; padding: .85rem;
    background: var(--beyaz); border: 1px solid var(--cizgi-acik); border-radius: 10px; }
.hsd-iade-form label { display: grid; gap: .28rem; font-size: 12px; font-weight: 700; color: var(--metin); }
.hsd-iade-form select, .hsd-iade-form textarea { width: 100%; padding: .5rem .6rem;
    border: 1px solid var(--cizgi); border-radius: var(--r); background: #fff;
    font: 500 13px 'Figtree', sans-serif; color: var(--metin); }
.hsd-iade-form textarea { resize: vertical; min-height: 64px; }
.hsd-iade-form small { font-size: 11px; font-weight: 500; color: var(--metin-3); }
/* Talep alındı bilgi kartı (hsd-takip dili, amber ton) */
.hsd-iade-durum { border-color: #F2D9A6; background: #FFF9EC; cursor: default; }
.hsd-iade-durum .hsd-takip-ikon { color: #B97E10; }

/* gunc-70/89: Kullanıcı Bilgilerim → Güvenlik sekmesi blokları */
.kb-guvenlik { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px dashed var(--cizgi); }
.kb-guvenlik-baslik { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem;
    font-size: 14px; font-weight: 800; color: var(--metin); }
.kb-guvenlik-baslik svg { color: var(--marka); }

/* gunc-71: Şifre Değişikliği — son değişiklik bilgi satırı (6+ ay → amber uyarı) */
.kb-sifre-son { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    margin: -.3rem 0 1rem; padding: .55rem .8rem;
    background: var(--bg); border-radius: 9px;
    font-size: 12.5px; color: var(--metin-2); }
.kb-sifre-son svg { flex: none; color: var(--marka); }
.kb-sifre-son.eski { background: var(--aksiyon-a2); color: var(--aksiyon-metin); }
.kb-sifre-son.eski svg { color: var(--aksiyon-k); }
.kb-sifre-son em { font-style: normal; font-weight: 700; }
/* ===== Hazır Setler ===== */
.set-sayfa { padding-top:1.2rem; padding-bottom:2.25rem; }
.set-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; overflow:hidden; margin:.9rem 0 1rem; padding:1.3rem 1.4rem; border:1px solid rgba(var(--marka-2-rgb),.34); border-radius:14px; background:linear-gradient(112deg,var(--marka-d),var(--marka) 64%,var(--marka-2)); color:#fff; box-shadow:0 8px 24px rgba(var(--marka-golge-rgb),.11); }
.set-hero::after { content:""; position:absolute; right:15%; bottom:-84px; width:190px; height:190px; border:42px solid rgba(255,255,255,.045); border-radius:50%; }
.set-hero > * { position:relative; z-index:1; }
.set-hero h1 { margin:.32rem 0 .25rem; color:#fff; font-size:clamp(22px,2.6vw,30px); }
.set-hero p { max-width:700px; margin:0; color:rgba(255,255,255,.78); font-size:12.5px; line-height:1.55; }
.set-hero-rozet { display:inline-flex; align-items:center; gap:.4rem; color:var(--aksiyon-acik); font-size:10.5px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.set-hero > a { display:inline-flex; align-items:center; gap:.45rem; flex:none; padding:.7rem .9rem; border:1px solid rgba(255,255,255,.22); border-radius:9px; background:rgba(255,255,255,.1); color:#fff; font-size:12px; font-weight:800; transition:.18s; }
.set-hero > a:hover { background:#fff; color:var(--marka-d); }
.set-hata { max-width:none; margin-bottom:1rem; }
.set-kesif { margin:0 0 1rem; padding:1rem 1.1rem; border:1px solid var(--cizgi); border-radius:14px; background:#fff; }
.set-kesif-bas { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.set-kesif-bas > span { display:grid; gap:.15rem; }
.set-kesif-bas b { color:var(--metin); font-size:13px; }
.set-kesif-bas small { color:var(--metin-3); font-size:10.5px; line-height:1.4; }
.set-kesif-bas em { flex:none; padding:.35rem .6rem; border-radius:99px; background:var(--marka-a2); color:var(--marka); font-size:10px; font-style:normal; font-weight:800; }
.set-filtreler { display:flex; align-items:center; gap:.5rem; overflow-x:auto; padding-bottom:.1rem; scrollbar-width:none; }
.set-filtreler::-webkit-scrollbar { display:none; }
.set-filtreler button { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; flex:none; min-height:36px; padding:.48rem .75rem; border:1px solid var(--cizgi); border-radius:9px; background:#fff; color:var(--metin-2); font:inherit; font-size:11px; font-weight:750; cursor:pointer; transition:background var(--gecis),border-color var(--gecis),color var(--gecis); }
.set-filtreler button:hover { border-color:var(--marka); color:var(--marka); }
.set-filtreler button.aktif { border-color:var(--marka); background:var(--marka); color:#fff; }
.set-kart[hidden] { display:none !important; }
.set-izgara { display:grid; grid-template-columns:1fr; gap:1rem; }
.set-kart { overflow:hidden; border:1px solid var(--cizgi); border-radius:14px; background:#fff; box-shadow:0 5px 18px rgba(28,51,58,.07); }
.set-kart-bas { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.2rem .9rem; }
.set-kart-bas small { color:var(--marka); font-size:9.5px; font-weight:850; letter-spacing:.12em; }
.set-kart-bas h2 { margin:.18rem 0 0; font-size:19px; }
.set-kart-bas > b { flex:none; padding:.4rem .65rem; border-radius:99px; background:#EAF8F1; color:#078052; font-size:11.5px; }
.set-aciklama { margin:0; padding:0 1.2rem 1rem; border-bottom:1px solid var(--cizgi-acik); color:var(--metin-2); font-size:12.5px; line-height:1.55; }
.set-form { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:1rem; padding:1.05rem 1.2rem 1.2rem; }
.set-icerik { align-self:start; overflow:hidden; border:1px solid var(--cizgi); border-radius:11px; background:#fff; }
.set-icerik-bas { display:flex; align-items:center; justify-content:space-between; min-height:45px; padding:.7rem .9rem; border-bottom:1px solid var(--cizgi-acik); background:#F8FAFA; }
.set-icerik-bas b { color:var(--metin); font-size:12.5px; }
.set-icerik-bas span { padding:.25rem .48rem; border-radius:99px; background:var(--marka-a2); color:var(--marka); font-size:9.5px; font-weight:800; }
.set-urunler { display:grid; }
.set-urun { display:grid; grid-template-columns:64px minmax(150px,1fr) minmax(220px,.9fr); align-items:center; gap:.85rem; min-width:0; padding:.8rem .9rem; border-bottom:1px solid var(--cizgi-acik); background:#fff; }
.set-urun:last-child { border-bottom:0; }
.set-urun:hover { background:#FBFDFD; }
.set-urun-gorsel { position:relative; display:grid; place-items:center; width:64px; height:64px; border:1px solid var(--cizgi); border-radius:9px; background:#fff; color:var(--metin-3); }
.set-urun-gorsel img { width:100%; height:100%; object-fit:contain; border-radius:8px; }
.set-urun-gorsel i { position:absolute; right:-7px; top:-7px; display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border:2px solid #fff; border-radius:99px; background:var(--marka); color:#fff; font-size:9.5px; font-style:normal; font-weight:850; }
.set-urun-bilgi { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.set-urun-bilgi > a { overflow:hidden; color:var(--metin); font-size:13px; font-weight:800; line-height:1.35; text-overflow:ellipsis; }
.set-urun-bilgi > small { display:flex; align-items:center; gap:.45rem; margin-top:.28rem; color:var(--metin-3); font-size:10.5px; }
.set-urun-bilgi > small span { padding-right:.45rem; border-right:1px solid var(--cizgi); }
.set-urun-bilgi > small b { color:var(--metin-2); font-size:10.5px; }
.set-urun-secimler { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; min-width:0; }
.set-secim { display:grid; gap:.32rem; }
.set-secim small { color:var(--metin-2); font-size:10.5px; font-weight:750; text-transform:capitalize; }
.set-secim select { width:100%; min-width:0; height:38px; padding:0 .65rem; border:1px solid var(--cizgi); border-radius:8px; background:#fff; color:var(--metin); font-size:11.5px; }
.set-secim select:focus { outline:none; border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-a2); }
.set-satin-al { align-self:start; padding:.95rem; border:1px solid #D9E7E8; border-radius:11px; background:#F5F9F9; }
.set-ozet-etiket { display:flex; align-items:center; gap:.4rem; padding-bottom:.65rem; border-bottom:1px solid #DCE7E8; color:var(--marka-d); font-size:11.5px; font-weight:800; }
.set-fiyat { display:grid; gap:.65rem; padding:.8rem 0; }
.set-fiyat > span,.set-fiyat > strong { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:.75rem; }
.set-fiyat small { color:var(--metin-2); font-size:11px; font-weight:650; }
.set-fiyat del { color:var(--metin-3); font-size:12px; }
.set-fiyat .set-kazanc b { color:var(--yesil); font-size:12.5px; }
.set-fiyat > strong { display:grid; grid-template-columns:1fr auto; margin-top:.15rem; padding-top:.7rem; border-top:1px dashed #CADBDD; color:var(--metin); font-size:21px; }
.set-fiyat > strong small { color:var(--metin); font-size:12px; font-weight:800; }
.set-fiyat > strong > span { white-space:nowrap; }
.set-fiyat > strong i { grid-column:1/-1; display:block; color:var(--metin-3); font-size:8.5px; font-style:normal; font-weight:500; line-height:1.25; text-align:right; }
.set-guven-not { display:flex; align-items:flex-start; gap:.4rem; margin:.1rem 0 .75rem; color:var(--metin-3); font-size:9.5px; line-height:1.45; }
.set-guven-not svg { flex:none; margin-top:1px; color:var(--marka); }
.set-form-hata { margin:0 0 .6rem; padding:.55rem .7rem; border:1px solid #F3C7C3; border-radius:8px; background:#FFF5F4; color:#B3261E; font-size:11px; }
@media (max-width:900px) { .set-form{grid-template-columns:1fr}.set-satin-al{position:static}.set-hero{align-items:flex-start;flex-direction:column;gap:.9rem}.set-hero>a{align-self:stretch;justify-content:center} }
@media (max-width:700px) { .set-urun{grid-template-columns:58px minmax(0,1fr);align-items:start}.set-urun-gorsel{width:58px;height:58px}.set-urun-secimler{grid-column:1/-1} }
@media (max-width:560px) { .set-hero{padding:1.1rem}.set-hero p{font-size:11.5px}.set-kart-bas{align-items:flex-start;padding:.9rem}.set-kart-bas h2{font-size:17px}.set-aciklama{padding:0 .9rem .85rem}.set-form{padding:.85rem}.set-urun{padding:.75rem}.set-urun-secimler{grid-template-columns:1fr}.set-satin-al{padding:.85rem} }

/* ===== Katalog gelişmiş filtreler ===== */
.katalog-filtre { margin:.9rem 0 1.1rem; overflow:hidden; border:1px solid var(--cizgi); border-radius:12px; background:#fff; box-shadow:0 2px 10px rgba(24,53,59,.045); }
.katalog-filtre > summary { display:flex; align-items:center; gap:.55rem; min-height:47px; padding:.75rem 1rem; color:var(--metin); font-size:12.5px; font-weight:800; cursor:pointer; list-style:none; }
.katalog-filtre > summary::-webkit-details-marker { display:none; }
.katalog-filtre > summary > svg { color:var(--marka); }
.katalog-filtre > summary b { display:grid; place-items:center; min-width:20px; height:20px; border-radius:99px; background:var(--marka); color:#fff; font-size:9px; }
.katalog-filtre > summary i { display:flex; margin-left:auto; transition:transform .2s; }
.katalog-filtre[open] > summary i { transform:rotate(180deg); }
.katalog-filtre-form { display:grid; grid-template-columns:1.15fr .8fr 1.1fr .8fr; align-items:end; gap:.8rem .9rem; padding:1rem; border-top:1px solid var(--cizgi-acik); background:#F8FAFA; }
.katalog-filtre-form label { display:flex; flex-direction:column; gap:.38rem; color:var(--metin-2); font-size:11px; font-weight:800; }
.katalog-filtre-form input,.katalog-filtre-form select { width:100%; min-width:0; height:41px; padding:0 .7rem; border:1px solid var(--cizgi); border-radius:8px; background:#fff; color:var(--metin); font-size:12px; }
.katalog-filtre-form input:focus,.katalog-filtre-form select:focus { outline:none; border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-a2); }
.kf-fiyat { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.3rem; }
.kf-fiyat i { color:var(--metin-3); font-style:normal; }
.kf-birim { position:relative; display:block; }
.kf-birim input { padding-right:35px; }
.kf-birim i { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); color:var(--metin-3); font-size:10px; font-style:normal; }
.katalog-filtre-form .kf-stok { grid-column:1/3; flex-direction:row; align-items:center; align-self:center; white-space:nowrap; cursor:pointer; }
.katalog-filtre-form .kf-stok input { width:17px; height:17px; }
.kf-eylem { grid-column:3/5; display:flex; align-items:center; justify-content:flex-end; gap:.75rem; }
.kf-eylem a { color:var(--metin-2); font-size:11.5px; text-decoration:underline; }
@media (max-width:900px) { .katalog-filtre-form{grid-template-columns:1fr 1fr}.katalog-filtre-form .kf-stok{grid-column:1}.kf-eylem{grid-column:2} }
@media (max-width:560px) { .katalog-filtre-form{grid-template-columns:1fr;padding:.85rem}.katalog-filtre-form .kf-stok,.kf-eylem{grid-column:1}.kf-eylem{justify-content:stretch}.kf-eylem .btn{flex:1} }

/* Katalog yardımcı araçları */
.katalog-kisayol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; margin:.7rem 0 1rem; }
.katalog-kisayol > a { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:1rem; min-height:96px; overflow:hidden; padding:1rem 1.05rem; border:1px solid #D5E4E6; border-radius:15px; background:linear-gradient(118deg,#fff 30%,#F1F8F8); color:var(--metin); text-decoration:none; transition:border-color .18s,background .18s; }
.katalog-kisayol > a::after { content:""; position:absolute; right:18%; top:-54px; width:122px; height:122px; border:24px solid rgba(13,112,125,.035); border-radius:50%; pointer-events:none; }
.katalog-kisayol > a:hover { border-color:#9FC5CA; background:linear-gradient(118deg,#fff 24%,#EAF5F5); }
.katalog-kisayol > a:focus-visible { outline:3px solid rgba(13,112,125,.16); outline-offset:2px; }
.katalog-kisayol > a.katalog-kisayol-set { border-color:#EBDDC5; background:linear-gradient(118deg,#fff 30%,#FFF7E9); }
.katalog-kisayol > a.katalog-kisayol-set::after { border-color:rgba(239,151,9,.055); }
.katalog-kisayol > a.katalog-kisayol-set:hover { border-color:#E4C48F; background:linear-gradient(118deg,#fff 24%,#FFF3DD); }
.katalog-kisayol-ikon { position:relative; z-index:1; display:grid!important; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--marka); color:#fff; }
.katalog-kisayol-set .katalog-kisayol-ikon { background:#FFF0D3; color:#C97800; }
.katalog-kisayol-metin { position:relative; z-index:1; display:flex; flex-direction:column; min-width:0; }
.katalog-kisayol-metin em { margin-bottom:.16rem; color:var(--marka); font-size:8.5px; font-style:normal; font-weight:850; letter-spacing:.1em; }
.katalog-kisayol-set .katalog-kisayol-metin em { color:#B56D00; }
.katalog-kisayol b { font-size:14px; line-height:1.3; }
.katalog-kisayol small { margin-top:.2rem; color:var(--metin-3); font-size:10.5px; line-height:1.4; }
.katalog-kisayol strong { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.45rem; min-height:38px; padding:0 .8rem; border:1px solid #C8DCDE; border-radius:9px; background:rgba(255,255,255,.82); color:var(--marka-d); font-size:10.5px; font-weight:800; white-space:nowrap; }
.katalog-kisayol-set strong { border-color:#E7D5B7; color:#A86200; }

/* Hazır Setler + Ürün Bulucu: masaüstünde ortak, ferah mağaza düzeni. */
@media (min-width:901px) {
    .sayfa-setler .set-sayfa,
    .sayfa-urun-bulucu .ub-sayfa { padding-top:1.35rem; padding-bottom:3rem; }
    .sayfa-setler .set-hero,
    .sayfa-urun-bulucu .ub-hero { min-height:138px; margin:1rem 0 1.15rem; padding:1.55rem 1.7rem; border-radius:18px; box-shadow:none; }
    .sayfa-setler .set-hero h1,
    .sayfa-urun-bulucu .ub-hero h1 { margin:.34rem 0 .3rem; font-size:30px; line-height:1.16; letter-spacing:-.025em; }
    .sayfa-setler .set-hero p,
    .sayfa-urun-bulucu .ub-hero p { max-width:760px; font-size:13px; line-height:1.6; }
    .sayfa-setler .set-hero > a,
    .sayfa-urun-bulucu .ub-hero > a { justify-content:center; min-width:152px; min-height:44px; padding:.7rem 1rem; border-radius:11px; font-size:11.5px; text-decoration:none; }

    .sayfa-urun-bulucu .ub-hero { border-color:rgba(var(--marka-2-rgb),.34); background:linear-gradient(112deg,var(--marka-d),var(--marka) 64%,var(--marka-2)); color:#fff; }
    .sayfa-urun-bulucu .ub-hero::after { right:16%; top:-88px; width:230px; height:230px; border:46px solid rgba(255,255,255,.045); background:transparent; }
    .sayfa-urun-bulucu .ub-hero > div > span { width:48px; height:48px; margin-right:1rem; border-radius:13px; background:rgba(255,255,255,.13); color:var(--aksiyon-acik); }
    .sayfa-urun-bulucu .ub-hero small { color:var(--aksiyon-acik); }
    .sayfa-urun-bulucu .ub-hero h1 { color:#fff; }
    .sayfa-urun-bulucu .ub-hero p { color:rgba(255,255,255,.76); }
    .sayfa-urun-bulucu .ub-hero > a { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.1); color:#fff; }
    .sayfa-urun-bulucu .ub-hero > a:hover { border-color:#fff; background:#fff; color:var(--marka-d); }

    .sayfa-urun-bulucu .ub-duzen { grid-template-columns:minmax(360px,410px) minmax(0,1fr); gap:1.15rem; }
    .sayfa-urun-bulucu .ub-form,
    .sayfa-urun-bulucu .ub-sonuc { border-radius:16px; box-shadow:none; }
    .sayfa-urun-bulucu .ub-form { gap:.9rem; padding:1.2rem; }
    .sayfa-urun-bulucu .ub-form-bas { padding-bottom:.9rem; }
    .sayfa-urun-bulucu .ub-form-bas > span { width:34px; height:34px; border-radius:10px; }
    .sayfa-urun-bulucu .ub-form input,
    .sayfa-urun-bulucu .ub-form select { height:46px; border-radius:10px; }
    .sayfa-urun-bulucu .ub-form > .btn { min-height:48px; border-radius:10px; font-size:12.5px; }
    .sayfa-urun-bulucu .ub-sonuc { padding:1.2rem; }
    .sayfa-urun-bulucu .ub-baslangic { min-height:390px; }

    .sayfa-setler .set-hero { background:linear-gradient(112deg,var(--marka-d),var(--marka) 64%,var(--marka-2)); }
    .sayfa-setler .set-form { grid-template-columns:minmax(0,1fr) 300px; gap:1.15rem; padding:1.2rem 1.3rem 1.3rem; }
    .sayfa-setler .set-kart { border-radius:16px; box-shadow:none; }
    .sayfa-setler .set-satin-al { padding:1.05rem; border-radius:12px; }
    .sayfa-setler .set-bos { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:1.25rem; min-height:176px; overflow:hidden; padding:1.7rem 1.9rem; border:1px solid #D7E5E7; border-radius:17px; background:linear-gradient(120deg,#fff 42%,#EFF7F7); text-align:left; }
    .sayfa-setler .set-bos::after { content:""; position:absolute; right:14%; bottom:-92px; width:190px; height:190px; border:38px solid rgba(11,102,115,.035); border-radius:50%; }
    .sayfa-setler .set-bos > span { position:relative; z-index:1; display:grid; place-items:center; width:72px; height:72px; margin:0; border-radius:20px; background:var(--marka-a2); color:var(--marka); }
    .sayfa-setler .set-bos h2 { position:relative; z-index:1; grid-column:2; align-self:end; margin:0 0 .15rem; font-size:21px; }
    .sayfa-setler .set-bos > p { position:relative; z-index:1; grid-column:2; align-self:start; margin:0; font-size:12px; }
    .sayfa-setler .set-bos .bos-arama-btnler { position:relative; z-index:1; grid-column:3; grid-row:1 / span 2; display:flex; gap:.55rem; margin:0; }
    .sayfa-setler .set-bos .btn { min-height:44px; padding:.7rem .9rem; border-radius:10px; font-size:11.5px; white-space:nowrap; }
}

/* ===== Akıllı Ürün Bulucu ===== */
.ub-sayfa { padding-top:1.2rem; padding-bottom:2.25rem; }
.ub-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; overflow:hidden; margin:.9rem 0 1rem; padding:1.2rem 1.3rem; border:1px solid rgba(var(--marka-2-rgb),.34); border-radius:14px; background:linear-gradient(112deg,var(--marka-d),var(--marka) 64%,var(--marka-2)); color:#fff; box-shadow:0 3px 14px rgba(var(--marka-golge-rgb),.09); }
.ub-hero::after { content:""; position:absolute; right:15%; top:-76px; width:170px; height:170px; border:34px solid rgba(255,255,255,.045); border-radius:50%; background:transparent; }
.ub-hero > * { position:relative; z-index:1; }.ub-hero > div > span { display:grid; place-items:center; float:left; width:40px; height:40px; margin-right:.85rem; border-radius:10px; background:rgba(255,255,255,.13); color:var(--aksiyon-acik); }
.ub-hero small { display:block; color:var(--aksiyon-acik); font-size:9.5px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.ub-hero h1 { margin:.12rem 0 .2rem; color:#fff; font-size:clamp(21px,2.4vw,28px); }.ub-hero p { max-width:710px; margin:0; color:rgba(255,255,255,.78); font-size:12.5px; line-height:1.5; }
.ub-hero > a { display:inline-flex; align-items:center; gap:.4rem; flex:none; padding:.65rem .85rem; border:1px solid rgba(255,255,255,.24); border-radius:9px; background:rgba(255,255,255,.1); color:#fff; font-size:11.5px; font-weight:800; }
.ub-hero > a:hover { border-color:#fff; background:#fff; color:var(--marka-d); }
.ub-duzen { display:grid; grid-template-columns:minmax(310px,370px) minmax(0,1fr); gap:1rem; align-items:start; }
.ub-form,.ub-sonuc { border:1px solid var(--cizgi); border-radius:13px; background:#fff; box-shadow:0 4px 16px rgba(28,51,58,.06); }
.ub-form { display:grid; gap:.75rem; padding:1rem; }.ub-form-bas { display:flex; align-items:center; gap:.65rem; padding-bottom:.7rem; border-bottom:1px solid var(--cizgi-acik); }
.ub-form-bas > span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--marka); color:#fff; font-size:11px; font-weight:850; }
.ub-form-bas > div { display:flex; flex-direction:column; }.ub-form-bas b { font-size:13px; }.ub-form-bas small { color:var(--metin-3); font-size:10.5px; }
.ub-form label { display:grid; gap:.32rem; color:var(--metin); font-size:11.5px; font-weight:750; }.ub-form label > span small { color:var(--metin-3); font-size:9.5px; font-weight:550; }
.ub-form input,.ub-form select { width:100%; height:42px; padding:0 .72rem; border:1px solid var(--cizgi); border-radius:8px; background:#fff; color:var(--metin); font-size:12px; }.ub-form input:focus,.ub-form select:focus { outline:none; border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-a2); }
.ub-form .ub-stok-sec { display:flex; align-items:center; gap:.55rem; min-height:28px; cursor:pointer; }
.ub-form .ub-stok-sec input[type="checkbox"] { flex:0 0 auto; width:18px; height:18px; margin:0; padding:0; border-radius:5px; accent-color:var(--marka); box-shadow:none; }
.ub-form .ub-stok-sec > span { min-height:0; font-size:11px; }
.ub-guven { display:flex; align-items:flex-start; gap:.38rem; margin:0; color:var(--metin-3); font-size:9.5px; line-height:1.45; }.ub-guven svg { flex:none; color:var(--marka); margin-top:1px; }
.ub-sonuc { min-height:0; padding:1rem; }.ub-baslangic { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:345px; padding:1.6rem; text-align:center; }
.ub-baslangic > span { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; background:var(--marka-a2); color:var(--marka); }.ub-baslangic > small { margin-top:.85rem; color:var(--marka); font-size:9px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }.ub-baslangic h2 { margin:.22rem 0 .35rem; font-size:18px; }.ub-baslangic p { max-width:500px; margin:0; color:var(--metin-2); font-size:12px; line-height:1.55; }
.ub-adimlar { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; width:min(100%,510px); margin:1.15rem 0 0; }
.ub-adimlar i { display:flex; align-items:center; gap:.4rem; padding:.55rem .65rem; border:1px solid var(--cizgi-acik); border-radius:8px; background:#FAFCFC; color:var(--metin-2); font-size:10.5px; font-style:normal; font-weight:650; text-align:left; }
.ub-adimlar b { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:6px; background:var(--marka-a2); color:var(--marka); font-size:9px; }
.ub-baslangic .btn { margin-top:1rem; }.ub-bos > span { background:rgba(var(--aksiyon-rgb),.08); color:var(--aksiyon); }
.ub-sonuc-bas { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:.2rem .1rem 1rem; border-bottom:1px solid var(--cizgi-acik); }.ub-sonuc-bas small { color:var(--marka); font-size:9px; font-weight:850; letter-spacing:.1em; }.ub-sonuc-bas h2 { margin:.12rem 0 0; font-size:17px; }.ub-sonuc-bas > span { color:var(--metin-3); font-size:10px; text-align:right; }
.ub-oneriler { display:grid; gap:.75rem; margin-top:.85rem; }.ub-urun { position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:.8rem; border:1px solid var(--cizgi-acik); border-radius:11px; background:#fff; }.ub-urun.en-uygun { border-color:rgba(var(--marka-rgb),.42); background:linear-gradient(105deg,var(--marka-a2),#fff 48%); }
.ub-urun > em { position:absolute; left:.55rem; top:-8px; display:inline-flex; align-items:center; gap:.25rem; padding:.18rem .45rem; border-radius:99px; background:var(--aksiyon); color:#fff; font-size:8px; font-style:normal; font-weight:850; }.ub-urun-gorsel { display:grid; place-items:center; width:72px; height:72px; overflow:hidden; border:1px solid var(--cizgi-acik); border-radius:9px; background:var(--marka-a2); color:var(--metin-3); }.ub-urun-gorsel img { width:100%; height:100%; object-fit:contain; }
.ub-urun-metin { display:flex; flex-direction:column; min-width:0; }.ub-urun-metin > a { color:var(--metin); font-size:13px; font-weight:800; }.ub-urun-metin small { margin-top:.25rem; color:var(--metin-3); font-size:9.5px; }
.ub-hesap { display:flex; gap:1.1rem; }.ub-hesap span { display:flex; flex-direction:column; min-width:90px; }.ub-hesap small { color:var(--metin-3); font-size:8.5px; }.ub-hesap b { font-size:12px; }.ub-urun > .btn { grid-column:3; min-width:130px; }.ub-eksik-not { grid-column:2/4; margin:0; color:#9A6507; font-size:9px; }.ub-eksik { margin-top:.85rem; padding:.75rem .85rem; border:1px dashed var(--cizgi); border-radius:9px; background:var(--bg); }.ub-eksik b { font-size:11px; }.ub-eksik p { margin:.2rem 0 0; color:var(--metin-3); font-size:10px; line-height:1.45; }
@media (max-width:900px) { .ub-duzen{grid-template-columns:1fr}.ub-baslangic{min-height:280px}.ub-hero{align-items:flex-start;flex-direction:column;gap:.9rem}.ub-hero>a{align-self:stretch;justify-content:center} }
@media (max-width:650px) { .katalog-kisayol{grid-template-columns:1fr}.ub-hero{padding:1rem}.ub-hero>div>span{display:none}.ub-hero p{font-size:11.5px}.ub-adimlar{grid-template-columns:1fr}.ub-baslangic{padding:1.1rem}.ub-urun{grid-template-columns:58px minmax(0,1fr)}.ub-urun-gorsel{width:58px;height:58px}.ub-hesap{grid-column:1/-1;justify-content:space-between}.ub-urun>.btn{grid-column:1/-1}.ub-eksik-not{grid-column:1/-1}.ub-sonuc-bas{align-items:flex-start;flex-direction:column}.ub-sonuc-bas>span{text-align:left} }

/* =========================================================
   DÜZ BUTON DİLİ — site genelinde butonlarda yükselti/gölge yok
   Kart, panel ve menü gölgeleri bu kapsamın dışındadır.
   ========================================================= */
:where(
    button,
    input[type="submit"], input[type="button"], input[type="reset"],
    .btn, [role="button"],
    [class$="-btn"], [class*="-btn "], [class*=" btn-"],
    [class$="-buton"], [class*="-buton "],
    .kat-mega-tumu
),
:where(
    button,
    input[type="submit"], input[type="button"], input[type="reset"],
    .btn, [role="button"],
    [class$="-btn"], [class*="-btn "], [class*=" btn-"],
    [class$="-buton"], [class*="-buton "],
    .kat-mega-tumu
):hover,
:where(
    button,
    input[type="submit"], input[type="button"], input[type="reset"],
    .btn, [role="button"],
    [class$="-btn"], [class*="-btn "], [class*=" btn-"],
    [class$="-buton"], [class*="-buton "],
    .kat-mega-tumu
):active {
    box-shadow: none !important;
}
:where(
    button,
    input[type="submit"], input[type="button"], input[type="reset"],
    .btn, [role="button"],
    [class$="-btn"], [class*="-btn "], [class*=" btn-"],
    [class$="-buton"], [class*="-buton "],
    .kat-mega-tumu
):focus-visible {
    box-shadow: none !important;
    outline: 2px solid var(--marka) !important;
    outline-offset: 2px;
}

/* =========================================================
   TİCARET+ — sadakat, B2B, soru-cevap, medya ve teslimat
   ========================================================= */
.hsd-yeniden-form{margin-left:auto}.hsd-yeniden-form .hsd-mini-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--cizgi);background:#fff;color:var(--metin);cursor:pointer}
.sadakat-sayfa{display:grid;gap:1rem}.sadakat-ozet{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:1rem}.sadakat-ozet.tek{grid-template-columns:1fr}.sadakat-bakiye,.sadakat-davet,.sadakat-hareket{border:1px solid var(--cizgi);border-radius:14px;background:#fff}.sadakat-bakiye{display:grid;align-content:start;padding:1.5rem;background:linear-gradient(145deg,var(--navy),#0E6E7C);color:#fff}.sadakat-bakiye>small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.68)}.sadakat-bakiye>strong{margin:.3rem 0 -.2rem;font-size:48px;line-height:1;font-weight:800}.sadakat-bakiye>span{color:rgba(255,255,255,.72)}.sadakat-bakiye form{margin-top:1.3rem}.sadakat-bakiye .btn{width:100%;justify-content:center}.sadakat-bakiye p{margin:.75rem 0 0;color:rgba(255,255,255,.65);font-size:11px}.sadakat-davet{display:grid;grid-template-columns:46px minmax(0,1fr);gap:1rem;padding:1.5rem}.sadakat-davet>span{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--turuncu-a);color:var(--turuncu)}.sadakat-davet small{color:var(--turuncu);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.sadakat-davet h2{margin:.15rem 0 .4rem;font-size:20px}.sadakat-davet p{margin:0;color:var(--metin-2);font-size:13px}.sadakat-kod{display:flex;align-items:center;gap:.5rem;margin-top:1rem}.sadakat-kod code{flex:1;padding:.65rem .8rem;border:1px dashed #9BC7CC;border-radius:8px;background:#F4FAFB;color:var(--navy);font-weight:800;letter-spacing:.06em}.sadakat-kod button{padding:.6rem .8rem;border:1px solid var(--cizgi);border-radius:8px;background:#fff;color:var(--metin);font:700 12px inherit;cursor:pointer}.sadakat-hareket{padding:1.2rem 1.4rem}.sadakat-hareket h2{font-size:17px;margin-bottom:.5rem}.sadakat-satir{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;border-top:1px solid var(--cizgi-acik)}.sadakat-satir>span{display:flex;flex-direction:column}.sadakat-satir b{font-size:13px}.sadakat-satir small{color:var(--metin-3);font-size:11px}.sadakat-satir strong{white-space:nowrap}.sadakat-satir .arti{color:var(--yesil)}.sadakat-satir .eksi{color:var(--kirmizi)}
.yorum-fotograflari{display:flex;flex-wrap:wrap;gap:.55rem;margin:.8rem 0}.yorum-fotograflari a{position:relative;display:block;width:92px;height:92px;border:1px solid var(--cizgi);border-radius:10px;overflow:hidden;background:#fff}.yorum-fotograflari a:after{position:absolute;right:.4rem;bottom:.4rem;width:22px;height:22px;border-radius:7px;background:rgba(11,60,68,.82);color:#fff;content:"+";font-size:16px;font-weight:700;line-height:21px;text-align:center}.yorum-fotograflari img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.yorum-fotograflari a:hover img{transform:scale(1.04)}.yorum-foto-alan{display:grid;gap:.5rem;padding:.95rem 1rem;border:1px dashed #b9d4d8;border-radius:10px;background:#f7fbfb;font-size:12px;font-weight:700}.yorum-foto-alan small{color:var(--metin-3);font-weight:500}.yorum-foto-alan input{font:500 12px inherit;color:var(--metin-2)}
.soru-cevap-panel{padding:0!important;overflow:hidden}.soru-cevap-bas{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;border-bottom:1px solid var(--cizgi);background:linear-gradient(110deg,#fff 0%,#fff 62%,#f2f8f9 100%)}.soru-cevap-urun{display:flex;align-items:center;gap:.9rem;min-width:0}.soru-cevap-urun>img,.soru-cevap-urun>span{width:58px;height:58px;flex:0 0 58px;border:1px solid var(--cizgi);border-radius:11px;background:#fff;object-fit:cover}.soru-cevap-urun>span{display:grid;place-items:center;color:var(--turuncu)}.soru-cevap-urun>div{display:flex;min-width:0;flex-direction:column}.soru-cevap-urun small{color:var(--turuncu);font-size:9px;font-weight:800;letter-spacing:.09em}.soru-cevap-urun b{margin:.1rem 0;font-size:17px}.soru-cevap-urun p{margin:0;color:var(--metin-2);font-size:11.5px}.soru-cevap-sayac{display:flex;align-items:baseline;gap:.28rem;flex:0 0 auto;padding:.45rem .7rem;border:1px solid #d5e7e9;border-radius:9px;background:#fff;color:var(--metin-2);font-size:10px}.soru-cevap-sayac b{color:var(--navy);font-size:17px}.soru-cevap-liste{display:grid;gap:.9rem;padding:1.15rem 1.25rem}.soru-cevap-kart{border:1px solid var(--cizgi);border-radius:12px;overflow:hidden;background:#fff}.soru-kart-meta{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.85rem 1rem;border-bottom:1px solid var(--cizgi-acik)}.soru-kullanici-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;font-size:12px;font-weight:800}.soru-kart-meta>div{display:flex;flex-direction:column}.soru-kart-meta b{font-size:12px}.soru-kart-meta small,.soru-kart-meta time{color:var(--metin-3);font-size:9.5px}.soru-metni{padding:1rem}.soru-metni>small{color:var(--turuncu);font-size:9px;font-weight:800;letter-spacing:.09em}.soru-metni p{margin:.28rem 0 0;color:var(--metin);font-size:13px;line-height:1.65}.cevap-satir{margin:0 .8rem .8rem;padding:.9rem 1rem;border:1px solid #d8e9eb;border-radius:10px;background:#f4f9fa}.cevap-satir header{display:flex;align-items:center;gap:.5rem}.cevap-satir header>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--navy);color:#fff}.cevap-satir header>div{display:flex;flex-direction:column}.cevap-satir header b{font-size:11.5px}.cevap-satir header small{color:#2d7d87;font-size:9px;font-weight:700}.cevap-satir p{margin:.65rem 0 0;padding-left:2.2rem;color:var(--metin);font-size:12px;line-height:1.65}.urun-soru-form{display:grid;gap:.75rem;margin:1.15rem 1.25rem 1.2rem;padding:1rem;border:1px solid var(--cizgi);border-radius:11px;background:#fafbfc}.urun-soru-form-bas{display:flex;align-items:center;gap:.65rem}.urun-soru-form-bas>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--turuncu-a);color:var(--turuncu)}.urun-soru-form-bas>div{display:flex;flex-direction:column}.urun-soru-form-bas b{font-size:13px}.urun-soru-form-bas small{color:var(--metin-3);font-size:10px}.urun-soru-form label{display:grid;gap:.38rem;font-size:11px;font-weight:700}.urun-soru-form label>span{display:flex;align-items:center;justify-content:space-between}.urun-soru-form label>span small{color:var(--metin-3);font-size:9.5px;font-weight:500}.urun-soru-form textarea{width:100%;min-height:76px;padding:.7rem .8rem;border:1px solid var(--cizgi);border-radius:9px;background:#fff;resize:vertical;color:var(--metin);font:inherit;line-height:1.55}.urun-soru-form textarea:focus{border-color:var(--navy);outline:0}.urun-soru-form-alt{display:flex;align-items:center;justify-content:space-between;gap:1rem}.urun-soru-form-alt>small{display:flex;align-items:center;gap:.32rem;color:var(--metin-3);font-size:9.5px}.urun-soru-form-mesaj{padding:.65rem .75rem;border:1px solid #f3c9cb;border-radius:8px;background:#fff5f5;color:#b4232f;font-size:11px;font-weight:650}.urun-soru-sonuc{display:flex;align-items:center;gap:.8rem;margin:1.15rem 1.25rem 1.2rem;padding:1rem;border:1px solid #b9dfce;border-radius:11px;background:#f1faf6}.urun-soru-sonuc-ikon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:#2fa66d;color:#fff;font-size:21px;font-weight:800}.urun-soru-sonuc>div{display:flex;flex-direction:column}.urun-soru-sonuc b{color:#155f41;font-size:13px}.urun-soru-sonuc p{margin:.2rem 0 0;color:#507167;font-size:10.5px}.urun-soru-giris{margin:0 1.25rem 1.2rem}
.soru-cevap-bos{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:.9rem;margin:1.15rem 1.25rem 1.2rem;padding:1rem;border:1px solid #D7E8EA;border-radius:11px;background:#F6FBFB}.soru-cevap-bos-ikon{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#E2F3F5;color:#0E6E7C}.soru-cevap-bos b{font-size:14px}.soru-cevap-bos p{margin:.2rem 0 0;color:var(--metin-2);font-size:11.5px}.soru-cevap-cta{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:150px;min-height:40px;padding:.6rem .9rem;border:1px solid #0B3C44;border-radius:8px;background:#0B3C44;font-size:12px;font-weight:750;line-height:1;text-decoration:none;box-shadow:none}.sekme-panel .soru-cevap-cta{color:#fff}.soru-cevap-cta:hover{border-color:#0E6E7C;background:#0E6E7C;color:#fff}.soru-cevap-cta svg{transition:transform .18s ease}.soru-cevap-cta:hover svg{transform:translateX(2px)}.urun-soru-giris{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:.8rem .9rem;border:1px solid var(--cizgi);border-radius:9px;background:#FAFBFC}.urun-soru-giris>span{display:flex;flex-direction:column}.urun-soru-giris b{font-size:12px}.urun-soru-giris small{color:var(--metin-3);font-size:10.5px}.urun-soru-giris .btn{white-space:nowrap}
.posta-tahmin{margin:.2rem 0 .75rem;padding:.65rem .8rem;border:1px solid #B7DDCE;border-radius:8px;background:#F0FAF6;color:#187954;font-size:12px;font-weight:700}
@media(max-width:900px){.sadakat-ozet{grid-template-columns:1fr}}
@media(max-width:600px){.sadakat-davet{grid-template-columns:1fr}.sadakat-kod{align-items:stretch;flex-direction:column}.sadakat-satir{align-items:flex-start}.hsd-yeniden-form{width:100%;margin:.5rem 0 0}.hsd-yeniden-form .hsd-mini-btn{width:100%;justify-content:center}}
@media(max-width:600px){.soru-cevap-bas{align-items:flex-start;padding:.9rem}.soru-cevap-urun>img,.soru-cevap-urun>span{width:48px;height:48px;flex-basis:48px}.soru-cevap-urun b{font-size:14px}.soru-cevap-urun p{font-size:10px}.soru-cevap-sayac{padding:.35rem .5rem}.soru-cevap-liste{padding:.9rem}.soru-kart-meta{padding:.75rem}.soru-metni{padding:.85rem}.cevap-satir{margin:0 .65rem .65rem;padding:.8rem}.cevap-satir p{padding-left:0}.soru-cevap-bos{grid-template-columns:40px minmax(0,1fr);margin:.9rem;padding:.85rem}.soru-cevap-bos-ikon{width:40px;height:40px}.soru-cevap-cta{grid-column:1/-1;width:100%}.urun-soru-form{margin:0 .9rem .9rem;padding:.85rem}.urun-soru-form-alt{align-items:stretch;flex-direction:column}.urun-soru-form-alt .btn{justify-content:center}.urun-soru-giris{align-items:stretch;flex-direction:column;margin:0 .9rem .9rem}.urun-soru-giris .btn{justify-content:center}.yorum-fotograflari a{width:78px;height:78px}}

/* Trendyol referanslı ürün soru-cevap alanı */
.soru-cevap-duzen{display:grid;grid-template-columns:285px minmax(0,1fr);align-items:stretch;min-height:420px;background:#fff}
.soru-cevap-sol{position:sticky;top:90px;align-self:start;min-height:420px;padding:1.2rem;border-right:1px solid var(--cizgi);background:#fff}
.soru-sol-urun{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:.75rem;color:var(--metin);text-decoration:none}
.soru-sol-urun>img,.soru-sol-gorsel-yok{width:74px;height:96px;border:1px solid var(--cizgi);border-radius:8px;background:#F7F9F9;object-fit:contain}
.soru-sol-gorsel-yok{display:grid;place-items:center;color:var(--metin-3)}
.soru-sol-urun>span{display:grid;gap:.4rem;min-width:0}
.soru-sol-urun b{font-size:12.5px;line-height:1.4}
.soru-sol-urun strong{color:var(--turuncu);font-size:18px}
.soru-sol-sor{display:flex;align-items:center;justify-content:center;width:100%;height:42px;margin-top:.85rem;padding:0;border:1px solid var(--aksiyon);border-radius:7px;background:var(--aksiyon);color:#fff!important;font:750 12px inherit;text-decoration:none;cursor:pointer;box-shadow:none}
.soru-sol-sor:hover{border-color:var(--aksiyon-k);background:var(--aksiyon-k)}
.soru-sol-sor.soru-sol-sor-kapali{border-color:#DCE5E6;background:#F2F5F5;color:#657477!important;cursor:not-allowed}
.soru-sol-sor.soru-sol-sor-kapali:hover{border-color:#DCE5E6;background:#F2F5F5;color:#657477!important}
.soru-sol-not{margin:1rem 0 0;padding-top:.85rem;border-top:1px solid var(--cizgi-acik);color:var(--metin-3);font-size:10px;line-height:1.55}
.soru-cevap-ana{min-width:0;background:#fff}
.soru-cevap-bas.soru-cevap-bas-v2{padding:1.15rem 1.4rem .95rem;border:0;border-bottom:1px solid var(--cizgi-acik);background:#fff}
.soru-cevap-etiket{display:block;margin-bottom:.28rem;color:var(--marka);font-size:8.5px;font-weight:850;letter-spacing:.11em}
.soru-cevap-baslik h2{display:flex;align-items:center;gap:.55rem;margin:0;color:var(--metin);font-size:19px;line-height:1.25}
.soru-cevap-baslik h2 .soru-cevap-baslik-adet{display:inline-flex;align-items:center;min-height:23px;padding:0 .58rem;border-radius:99px;background:var(--marka-a2);color:var(--marka);font-size:9.5px;font-weight:750;white-space:nowrap}
.soru-cevap-baslik p{margin:.3rem 0 0;color:var(--metin-3);font-size:10.5px}
.soru-cevap-yayin-notu{display:inline-flex;align-items:center;gap:.45rem;padding:.48rem .65rem;border:1px solid #DCEBEC;border-radius:8px;background:#F5FAFA;color:var(--metin-2);font-size:9.5px;white-space:nowrap}
.soru-cevap-yayin-notu svg{flex:0 0 auto;color:var(--marka)}
.soru-cevap-liste{display:grid;width:100%;max-width:1040px;margin:0 auto;padding:.2rem 1.4rem 0;gap:0;background:#fff}
.soru-cevap-kart{display:grid;gap:.72rem;padding:1.05rem 0;overflow:visible;border:0;border-bottom:1px solid #E5E9EA;border-radius:0;background:#fff}
.soru-cevap-kart:last-child{border-bottom:0}
.soru-kart-soru{display:block}
.soru-kart-soru>div{display:grid;gap:.32rem;min-width:0}
.soru-kart-soru p{margin:0;color:var(--metin);font-size:12.5px;font-weight:700;line-height:1.55}
.soru-kart-soru small{display:flex;align-items:center;gap:.45rem;color:var(--metin-3);font-size:9.5px}
.soru-kart-soru small b{color:var(--metin-3);font-size:9.5px;font-weight:500}
.soru-kart-soru small i,.soru-kart-yanit small i{width:3px;height:3px;border-radius:50%;background:#AFB8BA}
.soru-kart-yanit{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:.75rem;margin:0;padding:.85rem .9rem;border:0;border-radius:8px;background:#F3F4F5}
.soru-kart-yanit>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-size:9px;font-weight:850;letter-spacing:-.02em}
.soru-kart-yanit>div{display:grid;gap:.32rem}
.soru-kart-yanit small{display:flex;align-items:center;gap:.45rem;color:var(--metin-3);font-size:9.5px}
.soru-kart-yanit small b{color:var(--metin);font-size:10.5px}
.soru-kart-yanit small em{padding:0;background:transparent;color:var(--metin-3);font-size:9.5px;font-style:normal;font-weight:500}
.soru-kart-yanit p{margin:0;color:var(--metin);font-size:12px;line-height:1.55}
.soru-sayfalama{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:1rem 1rem 1.2rem}
.soru-sayfalama a{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:34px;height:34px;padding:0 .65rem;border:1px solid var(--cizgi);border-radius:7px;background:#fff;color:var(--metin-2);font-size:10px;font-weight:700;text-decoration:none}
.soru-sayfalama a:hover{border-color:var(--aksiyon);color:var(--aksiyon-k)}
.soru-sayfalama a.aktif{border-color:var(--aksiyon);background:var(--aksiyon);color:#fff}
.soru-arama-bos{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 1.4rem;padding:1rem;border:1px solid var(--cizgi);border-radius:8px;background:#FAFBFB;font-size:11px}.soru-arama-bos a{color:var(--marka);font-weight:700}
.urun-soru-modal[hidden]{display:none}
.urun-soru-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:1rem;opacity:0;transition:opacity .16s ease}
.urun-soru-modal.aktif{opacity:1}
.urun-soru-modal-arka{position:absolute;inset:0;background:rgba(7,34,39,.62);backdrop-filter:blur(2px)}
.urun-soru-modal-kutu{position:relative;width:min(620px,100%);max-height:calc(100vh - 2rem);overflow:auto;border:1px solid var(--cizgi);border-radius:14px;background:#fff;transform:translateY(8px);transition:transform .16s ease}
.urun-soru-modal.aktif .urun-soru-modal-kutu{transform:translateY(0)}
.urun-soru-modal-kapat{position:absolute;z-index:1;top:.8rem;right:.8rem;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--cizgi);border-radius:50%;background:#fff;color:var(--metin-2);font:500 22px/1 inherit;cursor:pointer;box-shadow:none}
.urun-soru-modal-kapat:hover{border-color:var(--navy);color:var(--navy)}
.urun-soru-modal .urun-soru-form{gap:1rem;margin:0;padding:1.35rem;border:0;border-radius:14px;background:#fff}
.urun-soru-modal .urun-soru-form-bas{padding-right:2.6rem;padding-bottom:.9rem;border-bottom:1px solid var(--cizgi-acik)}
.urun-soru-modal .urun-soru-form-bas b{font-size:16px}
.urun-soru-modal .urun-soru-form-bas small{margin-top:.15rem;font-size:11px}
.urun-soru-modal .urun-soru-form textarea{min-height:130px;padding:.85rem;line-height:1.6}
.urun-soru-modal .urun-soru-sonuc{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:.9rem;width:min(620px,100%);margin:0;padding:1.35rem;border-radius:14px;background:#fff}
.urun-soru-sonuc-kapat{height:38px;padding:0 1rem;border:1px solid var(--aksiyon);border-radius:7px;background:var(--aksiyon);color:#fff;font:750 11px inherit;cursor:pointer;box-shadow:none}
body.urun-soru-modal-acik{overflow:hidden}
@media(max-width:900px){
    .soru-cevap-duzen{grid-template-columns:1fr}
    .soru-cevap-sol{position:static;display:grid;grid-template-columns:minmax(0,1fr) 140px;align-items:center;gap:.75rem;min-height:0;padding:1rem;border-right:0;border-bottom:1px solid var(--cizgi)}
    .soru-sol-urun{grid-template-columns:54px minmax(0,1fr)}
    .soru-sol-urun>img,.soru-sol-gorsel-yok{width:54px;height:66px}
    .soru-sol-urun strong{font-size:15px}
    .soru-sol-sor{margin:0}
    .soru-sol-not{display:none}
}
@media(max-width:600px){
    .soru-cevap-sol{grid-template-columns:minmax(0,1fr) 105px;padding:.8rem}
    .soru-sol-urun b{font-size:11px}.soru-sol-urun strong{font-size:14px}
    .soru-sol-sor{height:38px;font-size:11px}
    .soru-cevap-bas.soru-cevap-bas-v2{align-items:flex-start;gap:.65rem;padding:.95rem .85rem .8rem}
    .soru-cevap-baslik h2{font-size:16px}
    .soru-cevap-yayin-notu{padding:.4rem .5rem;white-space:normal}
    .soru-cevap-yayin-notu span{display:none}
    .soru-cevap-liste{padding:.1rem .85rem 0}
    .soru-cevap-kart{padding:.9rem 0}
    .soru-kart-soru p{font-size:12px}
    .soru-kart-yanit{grid-template-columns:34px minmax(0,1fr);gap:.6rem;padding:.72rem}
    .soru-kart-yanit>span{width:34px;height:34px;font-size:8px}
    .soru-kart-yanit small{align-items:flex-start;flex-wrap:wrap;gap:.3rem}
    .urun-soru-modal{align-items:end;padding:.65rem}
    .urun-soru-modal-kutu{width:100%;max-height:calc(100vh - 1.3rem);border-radius:13px}
    .urun-soru-modal .urun-soru-form{margin:0;padding:1rem}
    .urun-soru-modal .urun-soru-form-alt{align-items:stretch;flex-direction:column}
    .urun-soru-modal .urun-soru-form-alt .btn{width:100%;justify-content:center}
    .urun-soru-modal .urun-soru-sonuc{grid-template-columns:42px minmax(0,1fr);padding:1rem}
    .urun-soru-sonuc-kapat{grid-column:1/-1;width:100%}
    .soru-kart-yanit p{font-size:11.5px}
    .soru-sayfalama{flex-wrap:wrap;padding:.85rem}
    .soru-arama-bos{align-items:flex-start;flex-direction:column;margin:.85rem}
}

/* =========================================================
   MOBİL MAĞAZA DENEYİMİ — kompakt header, çekmece ve alt dock
   ========================================================= */
.mobil-dock,.mobil-magaza-panel{display:none}

@media(max-width:700px){
    :root{--mobil-dock-yukseklik:66px}
    html{scroll-padding-top:112px;scroll-padding-bottom:calc(var(--mobil-dock-yukseklik) + 18px)}
    body{overflow-x:hidden;padding-bottom:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom));background:#F5F7F7}
    body.mobil-panel-acik{overflow:hidden}
    main{min-width:0}
    .kap{width:100%;padding-left:16px;padding-right:16px}
    .bolum{padding:1.25rem 16px 1.65rem}
    .bolum-baslik{align-items:flex-end;margin-bottom:.75rem}
    .bolum-baslik h2,.satir-ust h2{font-size:18px;letter-spacing:-.02em}
    .tumu-link{font-size:11px;white-space:nowrap}
    button,a,input,select,textarea{touch-action:manipulation}
    .btn{min-height:44px;border-radius:10px;box-shadow:none!important}
    .toast{left:12px;right:12px;bottom:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom) + 12px);width:auto;max-width:none}

    /* Üst alan telefonda yalnız marka, hesap, sepet ve aramadan oluşur. */
    .tepe-cubuk{display:none}
    .market-ust{position:sticky;top:0;z-index:75;background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(11,60,68,.09);backdrop-filter:saturate(150%) blur(12px)}
    .market-ic{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:46px 42px;gap:8px 10px;padding:8px 16px 9px}
    .market-ust .logo{grid-column:1;grid-row:1;align-self:center;min-width:0;gap:.5rem}
    .market-ust .logo-isaret{width:36px;height:36px;border-radius:11px}
    .market-ust .logo-yazi{font-size:20px;letter-spacing:-.045em}
    .market-ust .logo-img{width:auto;max-width:178px!important;max-height:44px!important;object-fit:contain}
    .market-ust .arama{grid-column:1/-1;grid-row:2;width:100%;height:42px;margin:0;overflow:hidden;border:1px solid #DCE4E5;border-radius:13px;background:#F5F7F7;box-shadow:none}
    .market-ust .arama:focus-within{border-color:var(--marka);background:#fff;box-shadow:0 0 0 3px rgba(var(--marka-rgb),.08)}
    .market-ust .arama input{height:40px;padding:0 12px 0 42px;background:transparent;font-size:13px}
    .market-ust .arama-ikon{left:0;width:42px;height:40px;color:var(--marka)}
    .market-btnler{grid-column:2;grid-row:1;align-items:center;gap:7px}
    .destek-chip,.hesap-menu{display:none!important}
    .market-btn,.sepet-btn{display:grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;border:1px solid #DDE5E6;border-radius:50%;background:#fff;color:var(--navy);box-shadow:none!important}
    .market-btn:hover,.sepet-btn:hover,.sepet-btn.dolu,.sepet-btn.dolu:hover{border-color:#DDE5E6;background:#fff;color:var(--navy)}
    .market-btn>span,.market-btn>.ikn:last-child,.sepet-btn>b{display:none}
    .hesap-kap{display:block}
    .sepet-ikon{display:grid!important}
    .sepet-btn .sepet-sayac,.sepet-btn.dolu .sepet-sayac{right:-7px;top:-8px;min-width:18px;height:18px;padding:0 4px;border:2px solid #fff;background:var(--vurgu);font-size:9px;line-height:14px}
    .gokkusagi{height:2px}
    .kat-bar,.kat-arka{display:none!important}
    .duyuru-serit{position:relative;z-index:76}
    .duyuru-ic{min-height:34px;padding-top:5px;padding-bottom:5px;gap:.45rem}
    .duyuru-metin{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;font-size:10.5px}
    .duyuru-link{font-size:10px;white-space:nowrap}

    /* Soldan açılan kategori vitrini. */
    .mobil-magaza-panel{position:fixed;inset:0;z-index:1000;display:block;pointer-events:none}
    .mobil-magaza-panel[hidden]{display:none!important}
    .mobil-panel-arka{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(6,29,34,.52);opacity:0;cursor:pointer;transition:opacity .22s ease;backdrop-filter:blur(2px)}
    .mobil-panel-kutu{position:absolute;inset:0 auto 0 0;display:flex;flex-direction:column;width:min(88vw,360px);overflow-y:auto;padding:calc(12px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));border-radius:0 18px 18px 0;background:#fff;box-shadow:18px 0 45px rgba(6,37,43,.22);transform:translateX(-105%);transition:transform .24s cubic-bezier(.22,.75,.28,1);-webkit-overflow-scrolling:touch}
    .mobil-magaza-panel.acik{pointer-events:auto}
    .mobil-magaza-panel.acik .mobil-panel-arka{opacity:1}
    .mobil-magaza-panel.acik .mobil-panel-kutu{transform:translateX(0)}
    .mobil-panel-bas{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:3px 3px 13px;border-bottom:1px solid #E8EDEE}
    .mobil-panel-marka{display:flex;align-items:center;gap:.65rem;min-width:0}
    .mobil-panel-marka .logo-isaret{width:38px;height:38px;border-radius:11px}
    .mobil-panel-marka>span:last-child{display:grid;gap:1px}
    .mobil-panel-marka small{color:var(--marka);font-size:8px;font-weight:850;letter-spacing:.12em}
    .mobil-panel-marka b{font-size:16px;letter-spacing:-.02em}
    .mobil-panel-kapat{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #E0E7E8;border-radius:50%;background:#fff;color:var(--metin-2);font:400 23px/1 inherit;box-shadow:none;cursor:pointer}
    .mobil-panel-kapat:focus{outline:0}
    .mobil-panel-kapat:focus-visible{border-color:rgba(var(--marka-rgb),.45);box-shadow:0 0 0 3px rgba(var(--marka-rgb),.08)}
    .mobil-panel-kategoriler{display:grid;padding:9px 0}
    .mobil-panel-kategoriler>a,.mobil-panel-kategori>summary{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:.7rem;min-height:58px;padding:6px 5px;border-bottom:1px solid #EEF1F2;color:var(--metin);text-decoration:none}
    .mobil-panel-kategoriler>a>span:nth-child(2),.mobil-panel-kategori>summary>span:nth-child(2){display:grid;gap:2px;min-width:0}
    .mobil-panel-kategoriler b{font-size:13px}
    .mobil-panel-kategoriler small{overflow:hidden;color:var(--metin-3);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
    .mobil-panel-kategoriler>a>.ikn{color:#A1ADB0}
    .mobil-panel-ikon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--marka-a2);color:var(--marka)}
    .mobil-panel-kategoriler>a.firsat b,.mobil-panel-kategori.firsat b{color:#B96900}
    .mobil-panel-kategoriler>a.firsat .mobil-panel-ikon,.mobil-panel-kategori.firsat .mobil-panel-ikon{background:#FFF1D8;color:#DA7D00}
    .mobil-panel-kategori{border-bottom:1px solid #EEF1F2}
    .mobil-panel-kategori>summary{border-bottom:0;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .mobil-panel-kategori>summary::-webkit-details-marker{display:none}
    .mobil-panel-kategori>summary:focus{outline:0}
    .mobil-panel-kategori>summary:focus-visible{box-shadow:inset 0 0 0 2px rgba(var(--marka-rgb),.28);border-radius:9px}
    .mobil-panel-kategori[open]>summary{background:#F6F9F9}
    .mobil-panel-ok{display:grid;place-items:center;color:#A1ADB0;transition:transform .2s ease,color .2s ease}
    .mobil-panel-kategori[open] .mobil-panel-ok{transform:rotate(180deg);color:var(--marka)}
    .mobil-panel-altlar{display:grid;gap:2px;padding:3px 5px 9px 54px;background:#F9FBFB}
    .mobil-panel-altlar>a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:40px;padding:7px 8px 7px 13px;border-radius:8px;color:var(--metin-2);font-size:11px;font-weight:650;text-decoration:none}
    .mobil-panel-altlar>a::before{content:'';position:absolute;left:1px;width:5px;height:5px;border:1.5px solid #9FB1B4;border-radius:50%}
    .mobil-panel-altlar>a>.ikn{flex:0 0 auto;color:#9BA9AC}
    .mobil-panel-altlar>a.mobil-panel-tumu{color:var(--marka);font-weight:800}
    .mobil-panel-altlar>a.mobil-panel-tumu::before{border-color:var(--vurgu);background:var(--vurgu)}
    .mobil-panel-hizli-bas{display:flex;align-items:flex-end;justify-content:space-between;padding:12px 3px 7px}
    .mobil-panel-hizli-bas>span{display:grid;gap:2px}
    .mobil-panel-hizli-bas small{color:var(--marka);font-size:8px;font-weight:850;letter-spacing:.12em}
    .mobil-panel-hizli-bas b{color:var(--metin-2);font-size:10.5px;font-weight:650}
    .mobil-panel-hizli{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
    .mobil-panel-hizli>a{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:.55rem;min-height:76px;padding:10px 18px 10px 9px;overflow:hidden;border:1px solid #DCE8EA;border-radius:12px;background:linear-gradient(145deg,#fff,#F4F9F9);color:var(--metin);text-decoration:none}
    .mobil-panel-hizli>a::after{content:'›';position:absolute;right:8px;top:50%;color:#9BADB0;font-size:18px;font-weight:400;line-height:1;transform:translateY(-52%)}
    .mobil-hizli-ikon{display:grid!important;place-items:center;width:34px;height:34px;border-radius:10px;background:#E5F4F5;color:var(--marka)}
    .mobil-panel-hizli>a>span:nth-child(2){display:grid;gap:3px;min-width:0}
    .mobil-panel-hizli b{font-size:10.5px;line-height:1.2}
    .mobil-panel-hizli small{color:var(--metin-3);font-size:8px;line-height:1.35}
    .mobil-panel-hizli .setler{border-color:#F0E3CB;background:linear-gradient(145deg,#fff,#FFF9EE)}
    .mobil-panel-hizli .setler .mobil-hizli-ikon{background:#FFF0D4;color:#C97500}
    .mobil-panel-hizli .takip .mobil-hizli-ikon{background:#E8F5F1;color:#168164}
    .mobil-panel-hizli .yardim .mobil-hizli-ikon{background:#EEF1F8;color:#42629A}
    .mobil-panel-hesap{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:.7rem;margin-top:auto;padding:10px;border-radius:12px;background:var(--navy);color:#fff;text-decoration:none}
    .mobil-panel-hesap>span:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12)}
    .mobil-panel-hesap>span:nth-child(2){display:grid;gap:2px;min-width:0}
    .mobil-panel-hesap b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
    .mobil-panel-hesap small{color:rgba(255,255,255,.68);font-size:9px}

    /* Başparmak erişimi: ana alışveriş aksiyonları her ekranda aynı yerde. */
    .mobil-dock{position:fixed;z-index:900;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom));padding:5px 6px env(safe-area-inset-bottom);border-top:1px solid rgba(12,66,75,.12);background:rgba(255,255,255,.97);box-shadow:0 -5px 22px rgba(11,49,56,.08);backdrop-filter:saturate(150%) blur(13px)}
    .mobil-dock>a,.mobil-dock>button{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:0;padding:3px 1px;border:0;background:transparent;color:#758387;font:650 9px/1.1 'Figtree',sans-serif;text-decoration:none;box-shadow:none;cursor:pointer}
    .mobil-dock .ikn{width:20px;height:20px}
    .mobil-dock .aktif{color:var(--marka)}
    .mobil-dock .aktif::before{content:'';position:absolute;top:-5px;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--vurgu)}
    .mobil-dock-sepet i{position:absolute;top:0;left:calc(50% + 5px);display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:2px solid #fff;border-radius:99px;background:var(--vurgu);color:#fff;font-size:8px;font-style:normal;font-weight:850}
    .mobil-dock-sepet i[hidden]{display:none}

    /* Anasayfa: içerik keşfedilir, ürün vitrini yatay kaydırılır. */
    .arya-hero{grid-template-columns:1fr;gap:.75rem;width:auto;max-width:none;min-height:0;margin:.7rem 12px 1rem;padding:1.35rem 1rem 1rem;border-radius:17px}
    .arya-hero-metin h2{margin:.55rem 0 .55rem;font-size:30px;line-height:1.06}.arya-hero-metin>p{font-size:11.5px;line-height:1.55}
    .arya-hero-butonlar{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1rem}.arya-hero-butonlar .btn{min-width:0;min-height:44px;padding:.55rem .45rem;font-size:10.5px}
    .arya-hero-guven{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin-top:.85rem}.arya-hero-guven span{align-items:flex-start;font-size:8.5px;line-height:1.25}
    .arya-hero-kolaj{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:7px;min-height:0;margin-top:.35rem;padding-bottom:31px}.arya-hero-urun>span{padding:.38rem .42rem}.arya-hero-urun b{min-height:20px;font-size:8px;line-height:1.2}.arya-hero-urun small{font-size:9px}
    .arya-hero-urun.ahu-1,.arya-hero-urun.ahu-2,.arya-hero-urun.ahu-3{inset:auto;width:100%;height:150px;transform:none;border-width:3px;border-radius:11px;box-shadow:0 8px 18px rgba(4,37,43,.13)}
    .arya-konfeti.ak-1{left:19%;top:8px}.arya-konfeti.ak-2{right:12%;top:8px}.arya-konfeti.ak-3{display:none}
    .banner-alan{padding-top:.75rem;padding-bottom:.35rem}
    .ana-sahne{gap:.65rem}
    .slider{height:auto;min-height:0;aspect-ratio:1.56;border-radius:14px;box-shadow:none}
    .slider-ok{width:34px;height:34px}
    .slider-ok.geri{left:8px}.slider-ok.ileri{right:8px}
    .mini-bannerlar{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:.65rem}
    .mini-banner{min-height:116px;border-radius:13px;box-shadow:none}
    .mini-yazi{max-width:92%;padding:.75rem}
    .mini-yazi strong{font-size:12px}.mini-yazi em{font-size:9px}.mini-ok{font-size:9.5px}
    .kategori-vitrin{display:grid;grid-auto-flow:column;grid-auto-columns:42%;grid-template-columns:none;gap:.65rem;overflow-x:auto;padding:2px 2px 9px;scroll-snap-type:x mandatory;scrollbar-width:none}
    .kategori-vitrin::-webkit-scrollbar,.sayfa-index .urunler-vitrin::-webkit-scrollbar,.rehber-alan::-webkit-scrollbar{display:none}
    .kategori-vitrin>*{scroll-snap-align:start}
    .sayfa-index .urunler-vitrin{display:grid;grid-auto-flow:column;grid-auto-columns:min(76vw,286px);grid-template-columns:none;gap:.75rem;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .sayfa-index .urunler-vitrin .urun-kart{scroll-snap-align:start}
    .sayfa-index .urunler-vitrin .urun-gorsel{padding:14px}
    .sayfa-index .rehber-alan{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;gap:.65rem;overflow-x:auto;padding-bottom:7px;scroll-snap-type:x mandatory;scrollbar-width:none}
    .sayfa-index .rehber-kart{scroll-snap-align:start;box-shadow:none}
    .bulten{gap:.8rem;margin-top:.8rem;padding:1.05rem;border-radius:14px;box-shadow:none}
    .bulten-metin h2{font-size:15px}.bulten-metin p{font-size:10.5px}
    .bulten-giris{grid-template-columns:1fr}
    .bulten-form .btn{width:100%}
    .satir-kutu{margin-left:12px;margin-right:12px;padding:1rem;border-radius:14px;box-shadow:none}

    /* Listeleme kartları: küçük ekranda iki sütun, okunaklı fiyat ve tek tip CTA. */
    .urun-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .urun-izgara .urun-kart{min-width:0;border-radius:12px;box-shadow:none}
    .urun-izgara .urun-gorsel{padding:9px}
    .urun-izgara .urun-govde{padding:.35rem .65rem .7rem}
    .urun-izgara .urun-govde h3{min-height:35px;margin:.28rem 0;font-size:12.5px;line-height:1.38}
    .urun-izgara .urun-ozet{min-height:29px;margin-bottom:.35rem;font-size:10px;line-height:1.4;-webkit-line-clamp:2}
    .urun-izgara .urun-fiyat{font-size:17px}
    .urun-izgara .urun-kart-aksiyon{min-height:40px;padding:.55rem .35rem;font-size:10.5px}
    .urun-izgara .urun-puan{font-size:10px}
    .urun-izgara .eski-fiyat{font-size:10px}
    .urun-izgara .fav-kart{width:34px;height:34px}

    /* Ürün detayı: galeri ilk ekranı işgal etmez; satın alma her an erişilebilir. */
    .detay-sayfa{padding:10px 12px 1.35rem}
    .kirinti,.urun-kirinti{display:flex;overflow-x:auto;padding-bottom:4px;white-space:nowrap;scrollbar-width:none}
    .kirinti-v2 .kirinti-son,.kirinti-v2 .kirinti-ok:has(+ .kirinti-son){display:none}
    .detay-hb,.detay-v2{gap:.8rem;padding:.75rem;border-radius:14px;box-shadow:none}
    .detay-galeri{position:static}
    .detay-v2 .detay-gorsel,.detay-gorsel{min-height:0;aspect-ratio:1.22;border-radius:11px}
    .detay-gorsel img{max-height:none!important;padding:5px;filter:none}
    .detay-gorsel .detay-gorsel-yok{min-height:0;height:100%}
    .detay-kucukler,.galeri-kucukler{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;gap:7px;overflow-x:auto;padding:7px 1px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .detay-kucuk,.detay-kucukler button,.galeri-kucuk{flex:0 0 56px!important;width:56px!important;height:56px!important;border-radius:9px}
    .galeri-ok{width:34px;height:34px;opacity:.92;pointer-events:auto}
    .detay-ad,.detay-bilgi h1{font-size:19px;line-height:1.3}
    .detay-ozet{margin-bottom:.65rem;font-size:12px;line-height:1.5}
    .detay-satici{margin-bottom:.65rem}
    .detay-buyuk-fiyat{font-size:27px}
    .detay-fiyat-blok{margin-bottom:.65rem}
    .detay-bilgi-blok{margin-top:.8rem}
    .detay-al-satir{position:fixed;z-index:880;left:0;right:0;bottom:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom));display:flex;max-width:none!important;margin:0;padding:8px 12px;border-top:1px solid rgba(11,60,68,.12);background:rgba(255,255,255,.97);box-shadow:0 -5px 18px rgba(8,46,53,.08);backdrop-filter:blur(12px)}
    .detay-al-satir .adet-kutusu{flex:0 0 94px;height:44px}
    .detay-al-satir .al-cta{min-height:44px;font-size:12.5px}
    .detay-al-satir .fav-detay,.detay-al-satir .fav-btn{flex:0 0 44px;width:44px;height:44px}
    body.sayfa-urun{padding-bottom:calc(var(--mobil-dock-yukseklik) + 68px + env(safe-area-inset-bottom))}
    body.sayfa-urun .kars-tepsi{display:none!important}
    .detay-sekmeler{margin-top:.9rem;scroll-margin-top:108px}
    .sekme-btnler{position:sticky;top:101px;z-index:38;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;background:#fff;scrollbar-width:none}
    .sekme-btn{flex:0 0 auto;min-height:46px;padding:0 .9rem;white-space:nowrap}
    .sekme-panel{padding:1rem}
    .detay-aciklama{overflow-wrap:anywhere}
    .detay-aciklama img,.sekme-panel img{max-width:100%;height:auto}
    .urun-soru-modal{z-index:1100}

    /* Sepet: ürün, adet ve tutar tek bakışta okunur. */
    .il-hero{padding:1.1rem 0 2.5rem}
    .il-hero h1{font-size:22px}.il-hero p{font-size:11.5px}.il-hero-kirinti{font-size:10px}
    .il-bolum{padding-left:12px;padding-right:12px}
    .sepet-duzen{gap:.85rem}
    .sepet-satir{position:relative;grid-template-columns:66px minmax(0,1fr) auto!important;grid-template-rows:auto auto;align-items:center;gap:.5rem .65rem;padding:.8rem 2.35rem .8rem .75rem;border-radius:12px;box-shadow:none}
    .sepet-mini{grid-column:1;grid-row:1/3;width:66px;height:66px;border-radius:9px}
    .sepet-bilgi{grid-column:2/4;grid-row:1;padding-right:4px}
    .sepet-bilgi a{font-size:12.5px;line-height:1.35}
    .sepet-birim{font-size:10px}
    .sepet-satir .adet-kutusu{grid-column:2;grid-row:2;width:96px;height:38px}
    .sepet-tutar{grid-column:3;grid-row:2;justify-self:end;font-size:13.5px}
    .sepet-sil{position:absolute;top:7px;right:7px;width:30px;height:30px;padding:0}
    .sepet-ozet{padding:1rem;border-radius:13px;box-shadow:none}
    .sp2-kupon{min-height:44px}.sp2-kupon button{padding:0 .85rem}
    .sp2-guven{gap:.25rem}.sp2-guven span{font-size:9px}.sp2-guven .ikn{padding:7px}
    .sp2-bos-kart{margin-top:.5rem;padding:2rem 1rem;border-radius:14px;box-shadow:none}
    .sp2-bos-ikon{width:58px;height:58px}.sp2-bos-kart h2{font-size:18px}.sp2-bos-kart p{font-size:12px}
    .sp2-bos-btnler{display:grid;grid-template-columns:1fr}.sp2-bos-btnler .btn{width:100%;justify-content:center}
    body.sayfa-sepet{padding-bottom:calc(var(--mobil-dock-yukseklik) + 70px + env(safe-area-inset-bottom))}
    .sayfa-sepet .sp2-ozet>.btn-tam{position:fixed;z-index:880;left:12px;right:12px;bottom:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom) + 8px);width:auto;margin:0;border-radius:12px;box-shadow:0 6px 20px rgba(7,46,53,.16)!important}
    .sayfa-sepet .kars-tepsi{display:none!important}

    /* Ödeme: dikkat dağıtan dock kapanır, tüm formlar başparmağa uygun olur. */
    body.sayfa-odeme,body.sayfa-siparis-tamam{padding-bottom:env(safe-area-inset-bottom)}
    body.sayfa-odeme .mobil-dock,body.sayfa-siparis-tamam .mobil-dock{display:none}
    .od2-duzen{gap:.8rem}
    .od-kart{padding:1rem;border-radius:13px;box-shadow:none}
    .od-kart-baslik{font-size:15px}
    .od-no{width:28px;height:28px}
    .od-adresler,.od-yontemler{grid-template-columns:1fr;gap:.55rem}
    .od-adres-kutu,.od-yontem-ic{min-height:72px;padding:.8rem;border-radius:11px}
    .od-alt-form{padding:.8rem;border-radius:11px}
    .od-alt-form input,.od-alt-form select,.od-alt-form textarea,.od-kaydet-baslik{min-height:46px}
    .od-kaydet-satir{align-items:stretch;flex-direction:column}
    .od-kaydet-btn{width:100%;justify-content:center}
    .od-onay{padding:.8rem;font-size:11.5px;line-height:1.5}
    .od-siparis-satir{align-items:stretch;flex-direction:column;gap:.65rem}
    .od-siparis-btn{width:100%;max-width:none;min-width:0}
    .od-siparis-tutar{display:flex;align-items:center;justify-content:space-between}
    .od-siparis-tutar b{font-size:21px}
    .od2-ozet{position:static;order:-1;padding:1rem}
    .od-tutar{font-size:25px}
    .od-rezervasyon{font-size:11px}
    .od-ozet-urun{grid-template-columns:46px minmax(0,1fr) auto}
    .od-ozet-gorsel{width:46px;height:46px}

    /* Hesap ve siparişler: menü sıkışmaz, sipariş özeti kart gibi taranır. */
    .hs2-duzen{gap:.8rem;padding-left:12px;padding-right:12px}
    .hs2-yan{padding:.75rem;border-radius:13px;box-shadow:none}
    .hs2-profil{gap:.65rem;padding:0 .2rem .75rem}
    .hs2-avatar{width:42px;height:42px;font-size:15px}
    .hs2-kimlik b{font-size:13px}.hs2-kimlik small{font-size:10px}
    .hs2-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding-top:.65rem}
    .hs2-menu>a{justify-content:center;flex-direction:column;gap:4px;min-width:0;min-height:57px;padding:.5rem .2rem;border:1px solid #E7ECEE;border-radius:9px;text-align:center;font-size:9.5px;line-height:1.2}
    .hs2-menu>a .ikn{width:17px;height:17px}
    .hs2-menu>a.hs2-cikis{margin-top:0}
    .hs2-acilir{grid-column:1/-1;border:1px solid #E7ECEE;border-radius:9px}
    .hs2-acilir summary{min-height:44px;padding:.55rem .65rem;font-size:11.5px}
    .hs2-alt-menu{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0;padding:0 .4rem .45rem;border-left:0}
    .hs2-alt-menu a{padding:.48rem;font-size:10.5px;text-align:center}
    .hs2-baslik{margin-bottom:.7rem;font-size:18px}
    .hs2-araclar{gap:.55rem;margin-bottom:.75rem}
    .hs2-ara{width:100%}.hs2-ara input{width:100%;min-height:44px}
    .hs2-cipler{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
    .hs2-cip{flex:0 0 auto;min-height:38px}
    .hs-siparis{border-radius:12px;box-shadow:none!important}
    .hs-siparis summary{grid-template-columns:52px minmax(0,1fr) auto!important;grid-template-rows:auto auto;gap:.25rem .65rem;padding:.75rem}
    .hs2-gorseller{grid-column:1;grid-row:1/3}.hs2-gorsel{width:52px;height:52px}.hs2-gorsel:nth-child(n+2){display:none}
    .hs2-no{grid-column:2;grid-row:1;font-size:10.5px}
    .hs2-durum{grid-column:2;grid-row:2;font-size:10.5px}
    .hs2-sag{grid-column:3;grid-row:1/3;align-self:center;text-align:right}
    .hs2-sag small{font-size:9px}.hs2-sag b{font-size:13px}
    .hs-adet,.hs-ok{display:none!important}
    .hs-detay{padding:.75rem}
    .hsd-no-bar{align-items:flex-start;flex-wrap:wrap;gap:.4rem;padding:.65rem}
    .hsd-no-ozet{width:100%;margin-left:0;font-size:10px}
    .hsd-yeniden-form{width:100%;margin:0}.hsd-yeniden-form .hsd-mini-btn{width:100%;justify-content:center}
    .hsd-ust,.hsd-alt{grid-template-columns:1fr;gap:.7rem}
    .hsd-kalem{position:relative;gap:.6rem;padding:.6rem 0;padding-right:0}
    .hsd-gorsel{width:54px;height:54px;flex-basis:54px}
    .hsd-kalem-ad{font-size:11.5px}.hsd-kalem-fiyat{font-size:10.5px}
    .hsd-kalem-toplam{position:absolute;right:0;bottom:.65rem;font-size:11px}
    .hsd-kalem-btnler{padding-right:70px}.hsd-mini-btn{min-height:34px;font-size:9.5px}
    .hsd-durum{padding:.8rem}.hsd-durum-bas b{font-size:12.5px}.hsd-durum-bas small{font-size:10px}
    .hsd-adim{font-size:8.5px}
    .hsd-kart{padding:.75rem;border-radius:10px}.hsd-kart p{font-size:11px}
    .hsd-diger{align-items:flex-start;flex-direction:column;gap:.45rem}
    .kb-sekmeler .sekme-btnler{top:101px}
    .kb-sekmeler .sekme-panel{padding:1rem}
    .kb-kanal{align-items:flex-start;padding:.8rem}.kb-kanal-metin small{font-size:10.5px}

    /* Footer artık masaüstünün küçültülmüş hali değil, gerçek mobil kart düzeni. */
    .ft-avantaj-band{padding:.75rem 0}
    .ft-avantaj-izgara{grid-template-columns:1fr 1fr;gap:.55rem;padding:0 16px}
    .ft-avantaj{
        align-items:center;gap:.55rem;min-height:58px;padding:.55rem;
        border:1px solid rgba(255,255,255,.13);border-radius:12px;
        background:rgba(255,255,255,.07)
    }
    .ft-avantaj-ikon{width:32px;height:32px;flex-basis:32px;border:0;border-radius:9px;background:rgba(255,255,255,.11)}
    .ft-avantaj-ikon svg{width:16px;height:16px}
    .ft-avantaj b{margin:0;font-size:10px;line-height:1.25}.ft-avantaj small{display:none}

    .ft{padding:0}
    .ft-izgara{grid-template-columns:1fr 1fr;gap:.65rem;padding:1rem 16px}
    .ft-sutun h3{margin-bottom:.55rem;font-size:11.5px}
    .ft-link-sutun,.ft-sosyal-sutun{
        padding:.8rem;border:1px solid #DCE7E8;border-radius:12px;background:rgba(255,255,255,.66)
    }
    .ft-linkler{gap:0}
    .ft-linkler a{display:flex;align-items:center;gap:.35rem;min-height:28px;border-bottom:1px solid rgba(211,225,227,.72);font-size:10px;line-height:1.3}
    .ft-linkler a:last-child{border-bottom:0}
    .ft-linkler a::after{content:'›';margin-left:auto;color:#91A3A7;font-size:14px;line-height:1}

    .ft-sosyal-sutun{grid-column:1/-1}
    .ft-sosyal{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
    .ft-sosyal a{gap:.5rem;min-height:42px;padding:.35rem .5rem;border:1px solid #E0E8E9;border-radius:10px;background:#fff;font-size:10px}
    .ft-sosyal-yuvarlak{width:28px;height:28px}
    .ft-sosyal-yuvarlak svg{width:14px;height:14px}

    .ft-soru{grid-column:1/-1;padding-top:.9rem;border-top:1px solid #E4EAEB}
    .ft-soru-btn{min-height:42px;width:100%;font-size:11px}
    .ft-veya{margin:.55rem 0;font-size:9px}
    .ft-cagri-etiket{font-size:10.5px}
    .ft-telefon{font-size:18px}
    .ft-wa{font-size:11px}
    .ft-rozetler{justify-content:center;gap:.45rem;padding:.9rem 0}
    .ft-rozet{font-size:9px}.ft-banka{height:19px}
    .ft-imza-ic{align-items:center;justify-content:center;flex-direction:column;gap:.55rem;padding:.9rem 16px;text-align:center}
    .ft-imza-nokta{display:none}.ft-yasal-linkler{gap:.35rem .65rem}.ft-yasal-linkler a{font-size:9.5px}
    .ft-imza-marka{font-size:10px}

    /* Diğer sabit araçlar dock'un üstünde kalır. */
    .kars-tepsi{bottom:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom) + 10px)}
    .da-dugme,.da-yuvarlak{bottom:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom) + 14px)}
    .cerez-kutu{bottom:calc(var(--mobil-dock-yukseklik) + env(safe-area-inset-bottom) + 10px);left:10px;right:10px;width:auto}
}

@media(max-width:380px){
    .market-ust .logo-yazi{font-size:18px}
    .market-ust .logo-isaret{width:34px;height:34px}
    .urun-izgara{gap:7px}
    .urun-izgara .urun-govde{padding:.3rem .5rem .6rem}
    .urun-izgara .urun-govde h3{font-size:11.5px}
    .urun-izgara .urun-fiyat{font-size:15.5px}
    .detay-al-satir{padding-left:8px;padding-right:8px}
    .detay-al-satir .adet-kutusu{flex-basis:86px}
    .mobil-dock>a,.mobil-dock>button{font-size:8.5px}
}

/* Mobil header sağ aksiyonları: dar cihazlarda kenara sürüklenme ve SVG taban
   çizgisi farkını önler. */
@media(max-width:700px){
    .market-ic{grid-template-columns:minmax(0,1fr) max-content}
    .market-btnler{justify-self:end;align-self:center;width:max-content;height:40px;margin:0;padding-right:2px}
    .hesap-kap{width:40px;height:40px}
    .market-btn,.sepet-btn{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;line-height:0}
    .market-btn>.ikn,.sepet-btn .sepet-ikon,.sepet-btn .sepet-ikon>.ikn{display:block;margin:0}
    .sepet-btn .sepet-ikon>.ikn{transform:translateY(1px)}
}

/* =========================================================
   HESAP ALANI — mobil uygulama yoğunluğu
   Alt sayfalarda aynı tanıtım kahramanını tekrar etmeyip hesabın gerçek
   içeriğini ilk ekrana taşır; menü tek satırlık, kaydırılabilir bir araç
   şeridine dönüşür. Masaüstü düzeni yukarıdaki kurallarla aynen korunur.
   ========================================================= */
@media(max-width:700px){
    body:is(.sayfa-hesabim,.sayfa-favorilerim,.sayfa-soru-taleplerim,.sayfa-degerlendirmelerim,.sayfa-adreslerim,.sayfa-kuponlarim,.sayfa-sadakatim,.sayfa-kullanici-bilgilerim) .il-hero{display:none}
    body:is(.sayfa-hesabim,.sayfa-favorilerim,.sayfa-soru-taleplerim,.sayfa-degerlendirmelerim,.sayfa-adreslerim,.sayfa-kuponlarim,.sayfa-sadakatim,.sayfa-kullanici-bilgilerim) .il-bolum{padding-top:12px}
    body:is(.sayfa-hesabim,.sayfa-favorilerim,.sayfa-soru-taleplerim,.sayfa-degerlendirmelerim,.sayfa-adreslerim,.sayfa-kuponlarim,.sayfa-sadakatim,.sayfa-kullanici-bilgilerim) .kars-tepsi{display:none!important}

    .hs2-duzen{gap:.85rem;padding-left:12px;padding-right:12px}
    .hs2-yan{padding:.7rem;border-radius:14px;box-shadow:none}
    .hs2-profil{gap:.65rem;padding:.1rem .2rem .7rem}
    .hs2-avatar{width:42px;height:42px;font-size:15px}
    .hs2-kimlik b{font-size:12.5px}
    .hs2-kimlik small{font-size:9.5px}
    .hs2-menu{display:flex;flex-direction:row;gap:7px;margin:0 -.15rem;padding:.6rem .15rem .15rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .hs2-menu::-webkit-scrollbar{display:none}
    .hs2-menu>a{flex:0 0 112px;justify-content:center;flex-direction:column;gap:5px;min-width:112px;min-height:64px;padding:.5rem .4rem;border:1px solid #E4EAEB;border-radius:11px;background:#fff;text-align:center;font-size:9.5px;line-height:1.15;white-space:normal;word-break:normal;scroll-snap-align:start}
    .hs2-menu>a .ikn{width:18px;height:18px}
    .hs2-menu>a.aktif{border-color:#F0D8AE;background:#FFF8EC;color:#B66B00}
    .hs2-menu>a.hs2-cikis{margin-top:0;border-color:#F1DFE1;background:#FFF9F9}
    .hs2-mobil-bilgi{display:flex!important}
    .hs2-acilir{display:none}

    /* Favori/kupon bilgilendirmeleri dar ekranda sözcük sözcük bölünmez. */
    .kp2-ipucu{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:.65rem;padding:.75rem .8rem;font-size:10.5px;line-height:1.55}
    .kp2-ipucu>.ikn{box-sizing:content-box;width:15px;height:15px;padding:8px;border-radius:9px;background:rgba(var(--marka-rgb),.08)}
    .kp2-ipucu>span{display:block;min-width:0}
    .kp2-izgara{grid-template-columns:1fr;gap:.7rem}
    .kp2-kupon{min-height:118px;border-radius:12px}
    .kp2-sol{width:86px}
    .kp2-sol b{font-size:19px}
    .kp2-sol small{font-size:8px}
    .kp2-govde{padding:.8rem .7rem 2rem .8rem}
    .kp2-kod{padding-right:0}
    .kp2-kod>span{font-size:12px}
    .kp2-sart{font-size:9.5px}
    .kp2-rozet{top:auto;right:.65rem;bottom:.55rem;font-size:8.5px}

    /* Soru/talep satırı iki okunabilir satıra iner; durum ve tarih ezilmez. */
    .st-yeni{margin-bottom:.75rem;border-radius:12px}
    .st-yeni summary{min-height:48px;padding:.75rem .85rem}
    .st-yeni-ic{padding:.85rem}
    .st-ust{grid-template-columns:minmax(0,1fr) 24px!important;grid-template-rows:auto auto;gap:.3rem .5rem;padding:.75rem .85rem}
    .st-konu{grid-column:1;grid-row:1;min-width:0;font-size:11.5px}
    .st-sag{grid-column:1;grid-row:2;justify-content:flex-start;gap:.45rem;min-width:0}
    .st-sag time{font-size:9px}
    .st-sag .rozet,.st-yeni-cip{font-size:8.5px}
    .st-kart .hs-ok{grid-column:2;grid-row:1/3;align-self:center;display:flex!important}
    .st-govde{padding:.75rem}
    .st-balon{padding:.65rem .75rem}
    .st-balon p{font-size:11.5px}
    .st-cevap{align-items:stretch;flex-direction:column}
    .st-cevap-btn{justify-content:center;min-height:42px}

    /* Adres ve fatura kartlarının eylemleri parmakla rahat kullanılır. */
    .ad-bolum{margin-bottom:1.2rem}
    .ad-kart{padding:.85rem;border-radius:12px}
    .ad-kart-ust b{font-size:12.5px}
    .ad-kisi{font-size:10.5px}
    .ad-kart p{font-size:11px}
    .ad-duzenle,.ad-sil{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #E4EAEB;border-radius:9px}
    .ad-yeni summary{min-height:48px;padding:.75rem .85rem}
    .ad-form{padding:.2rem .85rem 1rem}
    .ad-form .alan-cift{grid-template-columns:1fr}
    .ad-form-btnler{align-items:stretch;flex-direction:column}
    .ad-form-btnler .btn{width:100%;justify-content:center}

    /* Değerlendirme kartları dikey boşluk yerine yatay ürün satırı olur. */
    .dgb-tanitim{font-size:11px;line-height:1.55}
    .dgb-izgara{grid-template-columns:1fr;margin-bottom:1.2rem}
    .dgb-kart{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto auto;padding:.8rem;text-align:left;column-gap:.75rem}
    .dgb-gorsel{grid-column:1;grid-row:1/4;width:72px;height:72px}
    .dgb-gorsel img{max-height:72px}
    .dgb-ad{grid-column:2;min-height:0;font-size:11.5px}
    .dgb-tarih{grid-column:2;font-size:9.5px}
    .dgb-yildizlar{grid-column:2;justify-content:flex-end;margin:0}
    .dgb-yildiz{font-size:21px}
    .dgb-btn,.dgb-kart .hsd-yorumlu{grid-column:1/-1;min-height:40px;margin-top:.4rem}
    .dg-kart{gap:.65rem;padding:.75rem;border-radius:12px}
    .dg-gorsel{width:58px;height:58px;flex:0 0 58px}
    .dg-ust{align-items:flex-start;flex-direction:column;gap:.35rem}
    .dg-urun{font-size:11.5px}
    .dg-orta{align-items:flex-start;flex-direction:column;gap:.2rem}
    .dg-yorum{font-size:11px}
}

/* =========================================================
   MOBİL TAM TARAMA RÖTUŞLARI
   - grid çocuklarının min-content taşmasını engeller
   - dokunma hedeflerini gerçek telefon kullanımına uygun büyütür
   Bu blok dosyanın sonunda kalarak önceki mobil kuralları bilinçli ezer.
   ========================================================= */
@media (max-width: 700px) {
    /* Hazır Setler + Ürün Bulucu: ortak, kompakt mobil alışveriş dili. */
    .sayfa-setler .set-sayfa,
    .sayfa-urun-bulucu .ub-sayfa { padding-top: 1rem; padding-bottom: 1.5rem; }
    .sayfa-setler .set-sayfa > .kirinti,
    .sayfa-urun-bulucu .ub-sayfa > .kirinti { display: none; }

    .sayfa-setler .set-hero,
    .sayfa-urun-bulucu .ub-hero {
        gap: .75rem;
        margin: .65rem 0 .85rem;
        padding: 1rem;
        border-radius: 16px;
        box-shadow: none;
    }
    .sayfa-setler .set-hero h1,
    .sayfa-urun-bulucu .ub-hero h1 {
        margin-top: .28rem;
        font-size: 22px;
        line-height: 1.18;
        letter-spacing: -.025em;
    }
    .sayfa-setler .set-hero p,
    .sayfa-urun-bulucu .ub-hero p { font-size: 11.5px; line-height: 1.55; }
    .sayfa-setler .set-hero > a,
    .sayfa-urun-bulucu .ub-hero > a {
        align-self: stretch;
        justify-content: center;
        min-height: 44px;
        padding: .65rem .8rem;
        border-radius: 11px;
        font-size: 11.5px;
        text-decoration: none;
        box-shadow: none;
    }
    .sayfa-setler .set-hero > a {
        border-color: rgba(255,255,255,.24);
        background: rgba(255,255,255,.1);
    }
    .sayfa-urun-bulucu .ub-hero > a {
        border-color: rgba(255,255,255,.24);
        background: rgba(255,255,255,.1);
        color: #fff;
    }

    /* Set yokken eski kesikli boş kutu yerine iki net aksiyonlu vitrin. */
    .sayfa-setler .set-bos {
        gap: .35rem;
        padding: 1.35rem 1rem 1.1rem;
        border: 1px solid #DCE7E8;
        border-radius: 16px;
        background: linear-gradient(150deg, #fff 35%, #F1F7F7);
    }
    .sayfa-setler .set-bos > span {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        margin-bottom: .25rem;
        border-radius: 16px;
        background: var(--marka-a2);
        color: var(--marka);
    }
    .sayfa-setler .set-bos h2 { margin: .15rem 0 0; font-size: 18px; }
    .sayfa-setler .set-bos p { margin: .15rem 0 .8rem; font-size: 11px; line-height: 1.5; }
    .sayfa-setler .set-bos .bos-arama-btnler {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        width: 100%;
    }
    .sayfa-setler .set-bos .btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        padding: .6rem .45rem;
        border-radius: 11px;
        font-size: 11.5px;
        white-space: nowrap;
    }
    .sayfa-setler .set-bos .btn:not(.btn-amber) {
        border-color: #CFE0E2;
        background: #fff;
        color: var(--marka);
    }

    /* Set yayınlandığında ürün, seçenek, özet ve sepete ekleme alanı. */
    .sayfa-setler .set-kart { border-radius: 16px; box-shadow: none; }
    .sayfa-setler .set-kesif { margin:.7rem 0 .85rem; padding:.85rem; border-radius:14px; }
    .sayfa-setler .set-kesif-bas { align-items:flex-start; margin-bottom:.65rem; }
    .sayfa-setler .set-kesif-bas small { max-width:235px; }
    .sayfa-setler .set-filtreler { margin:0 -.15rem; padding:0 .15rem .1rem; }
    .sayfa-setler .set-filtreler button { min-height:38px; }
    .sayfa-setler .set-kart-bas { align-items: center; gap: .65rem; padding: .85rem; }
    .sayfa-setler .set-kart-bas h2 { font-size: 16px; line-height: 1.25; }
    .sayfa-setler .set-kart-bas > b { padding: .35rem .55rem; font-size: 10px; }
    .sayfa-setler .set-aciklama { padding: 0 .85rem .8rem; font-size: 11px; }
    .sayfa-setler .set-form { gap: .7rem; padding: .8rem; }
    .sayfa-setler .set-icerik,
    .sayfa-setler .set-satin-al { border-radius: 12px; }
    .sayfa-setler .set-icerik-bas { min-height: 43px; padding: .65rem .75rem; }
    .sayfa-setler .set-urun { grid-template-columns: 56px minmax(0, 1fr); gap: .7rem; padding: .75rem; }
    .sayfa-setler .set-urun-gorsel { width: 56px; height: 56px; }
    .sayfa-setler .set-urun-bilgi > a { font-size: 12px; }
    .sayfa-setler .set-urun-secimler { grid-template-columns: 1fr; gap: .5rem; }
    .sayfa-setler .set-secim select { height: 44px; border-radius: 10px; font-size: 12px; }
    .sayfa-setler .set-satin-al { padding: .8rem; background: #F4F9F9; }
    .sayfa-setler .set-satin-al .btn { min-height: 48px; border-radius: 11px; font-size: 13px; }

    /* Ürün Bulucu: dört alan telefonda iki kısa satır, ana buton hemen görünür. */
    .sayfa-urun-bulucu .ub-duzen { gap: .75rem; }
    .sayfa-urun-bulucu .ub-form,
    .sayfa-urun-bulucu .ub-sonuc { border-radius: 16px; box-shadow: none; }
    .sayfa-urun-bulucu .ub-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem .6rem;
        padding: .85rem;
    }
    .sayfa-urun-bulucu .ub-form-bas,
    .sayfa-urun-bulucu .ub-stok-sec,
    .sayfa-urun-bulucu .ub-form > .btn,
    .sayfa-urun-bulucu .ub-guven { grid-column: 1 / -1; }
    .sayfa-urun-bulucu .ub-form-bas { padding-bottom: .65rem; }
    .sayfa-urun-bulucu .ub-form label { gap: .35rem; font-size: 10.5px; }
    .sayfa-urun-bulucu .ub-form label > span { min-height: 16px; }
    .sayfa-urun-bulucu .ub-form input,
    .sayfa-urun-bulucu .ub-form select {
        height: 46px;
        padding: 0 .7rem;
        border-color: var(--cizgi);
        border-radius: 11px;
        font-size: 16px;
    }
    .sayfa-urun-bulucu .ub-form > .btn { min-height: 48px; border-radius: 11px; font-size: 13px; }
    .sayfa-urun-bulucu .ub-guven { padding-top: .05rem; font-size: 9px; }
    .sayfa-urun-bulucu .ub-sonuc { padding: .8rem; }
    .sayfa-urun-bulucu .ub-baslangic { min-height: 0; padding: 1.15rem .65rem; }
    .sayfa-urun-bulucu .ub-baslangic > span { width: 48px; height: 48px; border-radius: 14px; }
    .sayfa-urun-bulucu .ub-baslangic > small { margin-top: .65rem; }
    .sayfa-urun-bulucu .ub-baslangic h2 { font-size: 17px; }
    .sayfa-urun-bulucu .ub-baslangic p { font-size: 11px; }
    .sayfa-urun-bulucu .ub-adimlar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
        margin-top: .85rem;
    }
    .sayfa-urun-bulucu .ub-adimlar i {
        flex-direction: column;
        justify-content: center;
        gap: .35rem;
        min-height: 66px;
        padding: .45rem .25rem;
        font-size: 9px;
        line-height: 1.25;
        text-align: center;
    }
    .sayfa-urun-bulucu .ub-urun { gap: .65rem; padding: .75rem; }
    .sayfa-urun-bulucu .ub-urun > .btn { min-height: 44px; border-radius: 10px; }

    /* Mobil katalog üst alanı: daha az dikey yer kaplayan, kolay taranan mağaza düzeni. */
    .sayfa-urunler .katalog-baslik-satir {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .7rem;
        margin: .1rem 0 0;
    }
    .sayfa-urunler .katalog-h1 {
        display: flex;
        align-items: center;
        gap: .45rem;
        font-size: 20px;
        line-height: 1.25;
    }
    .sayfa-urunler .baslik-adet {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        margin: 0;
        padding: .2rem .55rem;
        border-radius: 99px;
        background: #EAF3F4;
        color: var(--marka);
        font-size: 10.5px;
        font-weight: 750;
    }
    .sayfa-urunler .katalog-baslik-satir .katalog-arac {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 132px;
        gap: .5rem;
        width: 100%;
    }
    .sayfa-urunler .katalog-baslik-satir .arama-kutu,
    .sayfa-urunler .katalog-baslik-satir .sirala,
    .sayfa-urunler .katalog-baslik-satir .sirala select { width: 100%; min-width: 0; }
    .sayfa-urunler .katalog-baslik-satir .arama-kutu input,
    .sayfa-urunler .katalog-baslik-satir .sirala select {
        min-height: 44px;
        border-color: #DCE5E7;
        background-color: #fff;
        box-shadow: none;
    }
    .sayfa-urunler .katalog-baslik-satir .arama-kutu input:focus,
    .sayfa-urunler .katalog-baslik-satir .sirala select:focus {
        border-color: var(--marka);
        box-shadow: 0 0 0 3px rgba(var(--marka-rgb), .08);
    }
    .sayfa-urunler .katalog-cipler {
        flex-wrap: nowrap;
        gap: .45rem;
        overflow-x: auto;
        margin: .65rem -16px .8rem;
        padding: 0 16px .2rem;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sayfa-urunler .katalog-cipler::-webkit-scrollbar { display: none; }
    .sayfa-urunler .katalog-cipler .cip {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 .95rem;
        font-size: 11.5px;
        box-shadow: none;
    }
    .sayfa-urunler .katalog-kisayol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        margin: 0 0 .75rem;
    }
    .sayfa-urunler .katalog-kisayol > a {
        position: relative;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        gap: .6rem;
        min-height: 82px;
        padding: .7rem .65rem;
        border-color: #DDE8E9;
        border-radius: 14px;
        background: linear-gradient(145deg, #fff, #F2F8F8);
        text-decoration: none;
        box-shadow: none;
    }
    .sayfa-urunler .katalog-kisayol > a:nth-child(2) {
        border-color: #F0DFC4;
        background: linear-gradient(145deg, #fff, #FFF8EC);
    }
    .sayfa-urunler .katalog-kisayol-ikon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .sayfa-urunler .katalog-kisayol-ikon svg {
        width: 15px;
        height: 15px;
    }
    .sayfa-urunler .katalog-kisayol-set .katalog-kisayol-ikon {
        background: rgba(var(--aksiyon-rgb), .12);
        color: var(--aksiyon-k);
    }
    .sayfa-urunler .katalog-kisayol-metin { gap: .14rem; padding-right: .35rem; }
    .sayfa-urunler .katalog-kisayol-metin em { display: none; }
    .sayfa-urunler .katalog-kisayol b { font-size: 11.5px; line-height: 1.25; }
    .sayfa-urunler .katalog-kisayol small { font-size: 9.5px; line-height: 1.35; }
    .sayfa-urunler .katalog-kisayol strong {
        position: absolute;
        top: 10px;
        right: 9px;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 0;
    }
    .sayfa-urunler .katalog-kisayol strong svg {
        width: 10px;
        height: 10px;
    }
    .sayfa-urunler .katalog-filtre { margin: 0 0 1rem; }

    .detay-hb > *, .detay-galeri, .detay-sag,
    .sayfa-blog-yazi .icerik-duzen > *, .sayfa-blog-yazi .yz-govde {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .sayfa-blog-yazi .icerik-duzen { grid-template-columns: minmax(0, 1fr); }
    .sayfa-blog-yazi .yz-meta { align-items: flex-start; flex-direction: column; gap: .8rem; }
    .sayfa-blog-yazi .yz-yazar { width: 100%; min-width: 0; }
    .sayfa-blog-yazi .yz-paylas {
        width: 100%; max-width: 100%; overflow-x: auto;
        padding: 1px 0 3px; scrollbar-width: none;
    }
    .sayfa-blog-yazi .yz-paylas::-webkit-scrollbar { display: none; }
    .sayfa-blog-yazi .yz-paylas-btn { flex: 0 0 40px; width: 40px; height: 40px; }
    .sayfa-blog-yazi .yz-govde.hero-tasan-kutu,
    .sayfa-blog-yazi .yz-govde ~ .icerik-yan.sss-yan { margin-top: .8rem; }

    .urun-kart > .fav-btn, .urun-kart > .fav-kart,
    .urun-kart > .karsilastir-btn { width: 40px; height: 40px; box-shadow: none; }
    .urun-kart > .karsilastir-btn { top: 56px; }
    .sahne-boy { min-height: 40px; box-shadow: none !important; }
    .slider-ok { display: grid; width: 40px; height: 40px; box-shadow: none; }
    .slider-noktalar { bottom: 2px; gap: 0; }
    .slider-noktalar .nokta,
    .slider-noktalar .nokta.aktif {
        position: relative; width: 36px; height: 36px;
        background: transparent;
    }
    .slider-noktalar .nokta::after {
        content: ''; position: absolute; left: 50%; top: 50%;
        width: 8px; height: 8px; border-radius: 99px;
        background: rgba(255,255,255,.58); transform: translate(-50%,-50%);
    }
    .slider-noktalar .nokta.aktif::after { width: 22px; background: #fff; }
    .katalog-bar .arama-kutu input,
    .katalog-bar .sirala select,
    .katalog-baslik-satir .arama-kutu input,
    .katalog-baslik-satir .sirala select { min-height: 42px; }
    .kg-btn { min-height: 40px; padding-top: .55rem; padding-bottom: .55rem; }
    .galeri-ok { width: 40px; height: 40px; }

    .detay-al-satir .adet-kutusu { flex-basis: 112px; width: 112px; height: 44px; padding: 0; }
    .detay-al-satir .adet-btn { flex: 0 0 40px; width: 40px; height: 40px; }
    .detay-al-satir .adet-kutusu input { flex: 0 0 32px; width: 32px; min-height: 40px; }
    .sepet-satir .adet-kutusu { width: 108px; height: 40px; }
    .sepet-satir .adet-kutusu.kucuk .adet-btn { width: 38px; height: 38px; }
    .sepet-satir .adet-kutusu.kucuk input { width: 30px; min-height: 38px; }
    .sepet-sil { width: 40px; height: 40px; top: 2px; right: 2px; }
    .kars-temizle { width: 40px; height: 40px; }
    .hsd-kopyala, .hsd-mini-btn { min-height: 40px; }
    .ad-duzenle, .ad-sil { width: 40px; height: 40px; }

    /* Yardım açıldığında ürün CTA'sı ve mobil dock panelin üstüne çıkmasın.
       Panel telefonda bağımsız bir tam ekran katman gibi davranır; kendi akışı
       kayar, arka sayfa sabit kalır. */
    body.da-panel-acik { overflow: hidden; }
    body.da-panel-acik .da-arka {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1190;
        background: rgba(7, 39, 46, .28);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    body.da-panel-acik .mobil-dock,
    body.da-panel-acik .detay-al-satir,
    body.da-panel-acik.sayfa-sepet .sp2-ozet > .btn-tam,
    body.da-panel-acik .kars-tepsi {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .da-panel {
        z-index: 1200;
        left: 10px;
        right: 10px;
        top: auto;
        bottom: max(10px, env(safe-area-inset-bottom));
        width: auto;
        height: auto;
        max-height: calc(100dvh - 20px);
        border-radius: 22px;
    }
    .da-panel .da-akis {
        flex: 0 1 auto;
        min-height: 0;
        max-height: calc(100dvh - 182px);
    }
}

/* =========================================================
   ANASAYFA PAZARYERİ VİTRİNLERİ
   - 6 rastgele öne çıkan ürün
   - ürün yoğunluğuna göre kategori şeritleri
   ========================================================= */
.sayfa-index .ana-vitrin-ust { align-items:flex-end; padding-bottom:.72rem; border-bottom:1px solid #EDF1F2; }
.sayfa-index .ana-vitrin-ust > div { display:grid; gap:2px; }
.sayfa-index .ana-vitrin-ust h2 { font-size:19px; }
.sayfa-index .ana-urun-serit {
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:10px;
    padding-top:3px;
}
.sayfa-index .ana-urun-serit .urun-kart { min-width:0; border-radius:12px; box-shadow:none; }
.sayfa-index .ana-urun-serit .urun-gorsel { padding:13px; }
.sayfa-index .ana-urun-serit .urun-govde { padding:.42rem .72rem .75rem; }
.sayfa-index .ana-urun-serit .urun-govde h3 { min-height:36px; font-size:12.5px; }
.sayfa-index .ana-urun-serit .urun-ozet { display:none; }
.sayfa-index .ana-urun-serit .urun-fiyat { font-size:16px; }
.sayfa-index .ana-urun-serit .urun-kart-aksiyon { min-height:39px; padding:.48rem .35rem; font-size:11.5px; }
.sayfa-index .ana-kategori-bolumu { margin-top:1.1rem; }
.sayfa-index .ana-kategori-kutu { position:relative; overflow:hidden; margin-top:0; border-top:3px solid var(--kategori-renk); }
.sayfa-index .ana-kategori-ust { align-items:center; padding-bottom:.72rem; border-bottom:1px solid #EDF1F2; }
.sayfa-index .ana-kategori-baslik { display:flex; align-items:center; gap:.72rem; min-width:0; }
.sayfa-index .ana-kategori-baslik > div { display:grid; gap:1px; min-width:0; }
.sayfa-index .ana-kategori-baslik h2 { overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.sayfa-index .ana-kategori-ikon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:11px; background:var(--kategori-renk); color:#fff; }
.sayfa-index .ana-kategori-kutu .tumu-link { color:var(--kategori-renk); }

@media (max-width:1100px) {
    .sayfa-index .ana-urun-serit {
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:210px;
        grid-template-columns:none;
        overflow-x:auto;
        padding-bottom:8px;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }
    .sayfa-index .ana-urun-serit::-webkit-scrollbar { display:none; }
    .sayfa-index .ana-urun-serit .urun-kart { scroll-snap-align:start; }
}
@media (max-width:700px) {
    .sayfa-index .ana-one-cikan,
    .sayfa-index .ana-kategori-bolumu { padding:0; }
    .sayfa-index .ana-one-cikan .satir-kutu,
    .sayfa-index .ana-kategori-kutu { margin-left:12px; margin-right:12px; padding:.85rem; }
    .sayfa-index .ana-vitrin-ust,
    .sayfa-index .ana-kategori-ust { margin-bottom:.65rem; padding-bottom:.65rem; }
    .sayfa-index .ana-vitrin-ust h2 { font-size:17px; }
    .sayfa-index .ana-kategori-baslik { gap:.55rem; }
    .sayfa-index .ana-kategori-baslik h2 { font-size:16px; }
    .sayfa-index .ana-kategori-ikon { flex-basis:34px; width:34px; height:34px; border-radius:10px; }
    .sayfa-index .ana-urun-serit { grid-auto-columns:min(72vw,265px); gap:9px; }
    .sayfa-index .ana-urun-serit .urun-gorsel { padding:12px; }
}
/* Kategori SEO tanıtımı: arama motoru için görünür, müşteri için kısa ve sakin bir giriş. */
.katalog-kategori-tanitim {
    max-width: 860px;
    margin: -4px 0 16px;
    color: var(--yazi-2, #64748b);
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 700px) {
    .katalog-kategori-tanitim {
        margin: 0 0 14px;
        font-size: 13px;
        line-height: 1.55;
    }
}