/* store.css — Katalog / Mağaza / Bayi Portalı ortak vitrin bileşenleri (Bluep teması) */
.store-page { padding: 28px 0 70px; }
.store-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.store-toolbar > * { min-width: 0; max-width: 100%; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip-btn { flex: none; padding: 8px 16px; font: inherit; font-weight: 650; font-size: .9rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: all .2s; white-space: nowrap; }
.chip-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.chip-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); border-color: transparent; box-shadow: 0 6px 18px -8px var(--accent-3); }
.store-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.store-tools .input { min-width: 200px; padding: 9px 14px; }
.store-tools .select { padding-block: 9px; }
.count-note { color: var(--muted); font-size: .88rem; margin: 0 0 14px; }

.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.p-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.p-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow); }
.p-img { position: relative; height: 220px; display: grid; place-items: center; background: color-mix(in srgb, var(--surface-2) 70%, #fff 30%); border-bottom: 1px solid var(--border); }
.p-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.p-img .ph { color: var(--muted); font-size: .88rem; }
.p-cat { position: absolute; top: 12px; left: 12px; }
.p-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.p-title { margin: 0 0 12px; font-size: 1.12rem; font-weight: 750; letter-spacing: -.01em; overflow-wrap: anywhere; }
.p-vars { margin-top: auto; display: grid; }
.p-var { display: grid; gap: 4px; padding: 10px 0; border-top: 1px dashed var(--border); }
.p-var:first-child { border-top: 0; }
.p-var-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-var-name { font-weight: 650; font-size: .95rem; overflow-wrap: anywhere; }
.price { font-size: 1.12rem; font-weight: 800; white-space: nowrap; color: var(--accent); }
.price-retail { color: #b45309; }   /* #d97706 beyazda 3,18:1 idi (WCAG AA 4,5 ister); #b45309 ≈ 5,0:1 */
:root[data-theme="dark"] .price-retail { color: #fbbf24; }
.p-var-note { text-align: right; font-size: .8rem; color: var(--muted); }
.p-var-note strong { color: #d97706; }
:root[data-theme="dark"] .p-var-note strong { color: #fbbf24; }

.state-panel { grid-column: 1 / -1; padding: 46px 20px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 22px; }
.state-panel h2 { margin: 0 0 8px; color: var(--text); font-size: 1.3rem; }
.state-panel .btn { margin-top: 14px; }
.skeleton { height: 340px; border-radius: 22px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: 1px solid var(--border); }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 560px) { .store-tools .input, .store-tools .select { flex: 1; min-width: 0; } }

/* ───── Mağaza ───── */
.store-hero { text-align: center; margin-bottom: 26px; }
.store-hero h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -.02em; }
.store-hero p { margin: 0 auto; max-width: 620px; color: var(--muted); }
.buy-box { margin-top: auto; display: grid; gap: 8px; }
.buy-price { font-size: 1.55rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.buy-label { font-size: .8rem; font-weight: 650; color: var(--muted); margin-top: 4px; }
.buy-box .select { width: 100%; }
.buy-box .btn { margin-top: 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Artık üst menünün İÇİNDE DEĞİL (bkz. tools/magaza.html, tools/bayi.html) — .site-header'ın
   backdrop-filter'ı position:fixed alt öğeler için "containing block" oluşturuyordu, yani header içinde
   sabitlenmiş bir öğe viewport'a değil header kutusuna göre konumlanıyordu (düğme ekranın değil header'ın
   sağ alt köşesine yapışıyor, bu da görünürde üst köşede kalmasına yol açıyordu). Header dışına taşınınca
   her zaman GERÇEKTEN yüzen (viewport'a göre sabit) bir düğme oldu. <960px'te alttaki yüzen sepet çubuğu
   (.cart-bar, sepette ürün varken belirir, bkz. shop2.css) ile çakışmaması için üstte, header'ın hemen
   altında küçük bir ikon olarak durur; ≥960px'te (.cart-bar zaten gizli) sağ alta, etiketli bir düğmeye
   dönüşür. */
.cart-btn { position: fixed; top: 78px; right: 16px; z-index: 65; }
.cart-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; background: var(--accent-3); border-radius: 999px; }
.cart-count[hidden] { display: none; }
.cart-label { display: none; }
@media (min-width: 960px) {
  .cart-btn {
    top: auto; bottom: 24px; right: 24px;
    display: inline-flex; align-items: center; width: auto; height: 52px; padding: 0 20px 0 16px; gap: 10px;
    background: var(--accent-3); border-color: transparent; color: #fff; border-radius: 999px;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .5);
  }
  .cart-btn:hover { background: color-mix(in srgb, var(--accent-3) 82%, #000); border-color: transparent; color: #fff; }
  .cart-label { display: inline; font-weight: 700; font-size: .9rem; white-space: nowrap; }
  .cart-count { position: static; display: inline-grid; background: #fff; color: var(--accent-3); }
  /* Bayi sayfasında yeşil WhatsApp düğmesi (js/catalog-brand.js .cb-wa) de aynı sağ-alt köşeye
     sabitleniyor — masaüstünde Sepetim düğmesinin tam arkasına binip köşeden taşıyordu (kullanıcı
     canlıda yakaladı). WhatsApp'ı sepetin üstüne kaydırıyoruz. */
  .cart-btn ~ .cb-wa { bottom: 92px; }
  /* "Sepete eklendi" toast bildirimi (#toast-container, bkz. js/common.js) z-index'i (200) Sepetim
     düğmesinden (65) yüksek olduğu için masaüstünde tam üzerine biniyordu (kullanıcı canlıda yakaladı).
     Sepetim'in — Bayi'de ayrıca WhatsApp'ın da — üstüne çıkacak kadar yukarı kaydırıyoruz. */
  .cart-btn ~ #toast-container { bottom: 92px; }
  .cart-btn ~ .cb-wa ~ #toast-container { bottom: 160px; }
}

.pay-banner { padding: 14px 18px; margin-bottom: 22px; border-radius: 14px; border: 1px solid; font-weight: 600; }
.pay-banner[hidden] { display: none; }
.pay-banner.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pay-banner.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

.trust-footer { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: .92rem; }
.trust-badges { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust-badges li { padding: 7px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-weight: 600; color: var(--text); }
.store-contact { line-height: 1.7; }
.store-contact strong { color: var(--text); }
.legal-links { margin: 14px 0 0; font-size: .85rem; }
.legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.legal-links a:hover { color: var(--text); }

/* Sepet çekmecesi */
.no-scroll { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; }
.drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 20, .6); backdrop-filter: blur(3px); }
.drawer-panel { position: relative; display: flex; flex-direction: column; width: min(440px, 100%); height: 100%; background: var(--bg-2); border-left: 1px solid var(--border); box-shadow: -20px 0 50px -20px rgba(0,0,0,.5); animation: drawer-in .25s ease-out; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 1.2rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-foot { padding: 14px 20px 18px; border-top: 1px solid var(--border); background: var(--surface-solid); max-height: 62vh; overflow-y: auto; }
.cart-empty { color: var(--muted); text-align: center; padding: 30px 0; }
.cart-row { display: grid; grid-template-columns: 52px 1fr auto; grid-template-areas: "t i s" "t q s"; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.cart-thumb { grid-area: t; width: 52px; height: 52px; border-radius: 10px; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { grid-area: i; display: grid; min-width: 0; }
.cart-info strong { font-size: .93rem; overflow-wrap: anywhere; }
.cart-meta { font-size: .8rem; color: var(--muted); }
.qty { grid-area: q; display: inline-flex; align-items: center; width: max-content; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.qty button { width: 30px; height: 28px; border: 0; background: var(--surface-2); color: var(--text); font-size: 1rem; cursor: pointer; }
.qty button:hover { background: var(--border); }
.qty span { min-width: 32px; text-align: center; font-weight: 700; font-size: .9rem; }
.cart-side { grid-area: s; display: grid; justify-items: end; gap: 4px; text-align: right; }
.link-btn { border: 0; background: none; padding: 0; color: var(--danger); font: inherit; font-size: .78rem; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.cart-total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-total-row span { color: var(--muted); font-weight: 600; }
.cart-total-row strong { font-size: 1.6rem; color: var(--accent); }
.checkout-details { margin-bottom: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.checkout-details summary { cursor: pointer; font-weight: 700; }
.checkout-details form { margin-top: 14px; }
.checkout-details .field { margin-bottom: 10px; }
.checkout-details textarea.input { resize: vertical; min-height: 60px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-2-wide { grid-template-columns: 2fr 1fr; }
.agree { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; font-size: .78rem; color: var(--muted); line-height: 1.5; cursor: pointer; }
.agree input { margin-top: 3px; }
.agree a { color: var(--accent); }
.btn-lg { padding: 14px 20px; font-size: 1.05rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) { .grid-2, .grid-2-wide { grid-template-columns: 1fr; } }

/* Yasal sayfa */
.legal { max-width: 820px; }
/* #legalContent artık Quill'den gelen DÜZ h1/h2 dizisi (sarmalayan <section> yok, bkz. js/yasal.js) —
   scroll-margin-top eskiden .legal section'daydı, o seçici artık hiçbir şeye denk gelmiyordu; bu yüzden
   İçindekiler'e tıklayınca sticky üst çubuk (.site-header) başlığın üstünü kapatıp "fazla aşağı kaymış"
   gibi görünüyordu. Artık doğrudan başlıklarda. */
.legal h1 { margin: 40px 0 14px; scroll-margin-top: 90px; font-size: 1.6rem; letter-spacing: -.01em; }
.legal h1:first-child { margin-top: 0; }
.legal h2 { font-size: 1.05rem; margin: 20px 0 6px; scroll-margin-top: 90px; }
.legal p, .legal li { color: var(--muted); line-height: 1.7; }
/* Quill editöründe tarayıcının varsayılan <p> kuralı (margin:1em 0, HEM üst HEM alt) kullanılıyordu —
   komşu paragraflar arası boşluk normalde çakışsa (collapse) da, admin iki kez Enter'a basınca (Word/Docs
   alışkanlığı) Quill boş bir <p><br></p> ekliyor; bu boş paragraf KENDİ satır yüksekliğini + boşluklarını
   da eklediği için art arda Enter'a basılan yerlerde "kendiliğinden" fazladan boşluk oluşuyordu — kullanıcı
   canlıda yakaladı. Düzeltme: paragraflara SABİT, yalnız-alt boşluk verildi (üst/alt çakışma belirsizliği
   bitti); boş (yalnızca <br> içeren) paragraflar görünmez hale getirildi — kaç kez Enter'a basılırsa
   basılsın boşluk hep AYNI kalır. DEVAMI (canlıda TEKRAR yakalandı): bu kural yalnız <p>'yeydi — <ul>/<ol>
   hâlâ tarayıcının STİLSİZ varsayılan boşluğunu (yaklaşık 1em, ama paragrafların 1.1em'inden FARKLI bir
   kaynaktan) kullanıyordu. Liste öncesi/sonrası boşluk bu yüzden paragraf araları ile TUTARSIZ görünüyordu
   (Hakkımızda'daki maddeli listelerde fark edildi) — şimdi <ul>/<ol> da AYNI sabit boşluğu alıyor. */
.legal p, .legal ul, .legal ol { margin: 0 0 1.1em; }
.legal p:has(> br:only-child) { display: none; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin-bottom: .3em; }
.legal strong { color: var(--text); }
.legal mark { background: color-mix(in srgb, #f59e0b 30%, transparent); color: var(--text); padding: 0 4px; border-radius: 4px; }
.legal a { color: var(--accent); }
.legal code { padding: 1px 6px; background: var(--surface-2); border-radius: 6px; font-size: .88em; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.legal-toc a { padding: 7px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.legal-toc a:hover { border-color: var(--border-strong); background: var(--surface-2); }
/* Kısa ekranlarda (telefon yatay / küçük pencere) çekmece tek parça kayar; sepet listesi sıkışmaz */
@media (max-height: 760px) {
  .drawer-panel { overflow-y: auto; }
  .drawer-head { position: sticky; top: 0; z-index: 2; background: var(--bg-2); }
  .drawer-body { flex: none; overflow: visible; }
  .drawer-foot { max-height: none; overflow: visible; }
}

/* ───── Bayi Portalı ───── */
.contact-links { display: flex; flex-wrap: wrap; gap: 8px; }
.iban-box { max-width: 460px; margin-bottom: 20px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; font-size: .9rem; }
.iban-box[hidden] { display: none; }
.iban-dialog { width: min(440px, calc(100% - 32px)); padding: 18px 20px; color: var(--text); background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.iban-dialog::backdrop { background: rgba(2, 8, 20, .6); }
.link-btn { padding: 0; font: inherit; color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.preinfo-dialog { width: min(820px, calc(100% - 24px)); max-height: 92vh; padding: 0; color: var(--text); background: var(--surface-solid, var(--surface)); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.preinfo-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.preinfo-dialog::backdrop { background: rgba(2, 8, 20, .6); }
.preinfo-head, .preinfo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; }
.preinfo-body { overflow-y: auto; margin: 0 14px; padding: 14px 18px; background: #fff; color: #0f172a; border-radius: 10px; }
/* Sayfa olarak (on-bilgilendirme.html): form sayfanın temasına uyar. Form HTML'i satır içi (açık zemin için) renklerle yazılır — ödeme penceresi ve sipariş kopyası aynı HTML'i beyaz zeminde kullanır —
   bu yüzden yalnız sayfada, tema değişkenleriyle !important ile ezilir (koyu temada koyu zemin/açık metin, açık temada eskisi gibi). */
.legal .preinfo { color: var(--muted) !important; max-width: none !important; font-family: inherit !important; }
.legal .preinfo h2, .legal .preinfo h3, .legal .preinfo strong { color: var(--text); }
.legal .preinfo p, .legal .preinfo small { color: var(--muted); }
.legal .preinfo td, .legal .preinfo th { color: var(--text); border-color: var(--border) !important; background: transparent !important; }
.legal .preinfo tr > td:first-child:not([colspan]) { background: var(--surface-2, var(--surface)) !important; }
.legal .preinfo tr[style*="background"] { background: var(--surface-2, var(--surface)) !important; }
.iban-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.iban-dialog .iban-text { margin: 0 0 14px; padding: 12px; background: var(--surface-2, rgba(127,127,127,.08)); border-radius: 10px; user-select: all; overflow-wrap: anywhere; }
.iban-text { margin: 6px 0 0; white-space: pre-wrap; font: inherit; color: var(--muted); }
.w-var { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--border); }
.w-var:first-child { border-top: 0; }
.w-var-info { display: grid; gap: 2px; min-width: 0; }
.w-var-name { font-weight: 650; font-size: .93rem; overflow-wrap: anywhere; }
.w-var-price { font-size: 1.08rem; font-weight: 800; color: var(--accent); }
.w-var-hint { font-size: .72rem; color: var(--muted); }
.w-var-act { display: flex; align-items: center; gap: 6px; flex: none; }
.w-qty { width: 64px; padding: 6px 8px; text-align: center; }
.orders-list { display: grid; gap: 10px; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.order-date { color: var(--muted); font-size: .85rem; }
.order-meta { margin-top: 3px; font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.order-right { display: grid; justify-items: end; gap: 6px; text-align: right; }
.legal mark.filled { background: none; padding: 0; color: inherit; font-weight: 600; }
.cart-breakdown { display: grid; gap: 4px; margin-bottom: 8px; font-size: .9rem; color: var(--muted); }
.cart-breakdown > div { display: flex; justify-content: space-between; }
.cart-breakdown[hidden] { display: none; }

/* İletişim sayfası */
.ct-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ct-card { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; }
.ct-card h2 { margin: 0 0 14px; font-size: 1.15rem; }
.ct-card textarea.input { resize: vertical; min-height: 120px; }
.ct-note { margin: 12px 0 0; font-size: .8rem; color: var(--muted); }
.ct-note a { color: var(--accent); }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-row { display: grid; gap: 2px; padding: 10px 0; border-top: 1px dashed var(--border); }
.ct-row:first-child { border-top: 0; padding-top: 0; }
.ct-row span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.ct-row a, .ct-row strong { overflow-wrap: anywhere; }
@media (max-width: 800px) { .ct-layout { grid-template-columns: 1fr; } }

.hero-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; }
.hero-bar .trust-row { margin-top: 0; }
.hero-bar .contact-links { margin-left: auto; }
@media (max-width: 640px) { .hero-bar .contact-links { margin-left: 0; } }

/* Bayi portalı: belge düğmeleri ve hesap özeti */
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.acct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 14px; }
.acct-card { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.acct-k { color: var(--muted); font-size: .82rem; }
.acct-v { font-size: 1.15rem; }
.acct-h { margin: 18px 0 10px; font-size: 1rem; }
.acct-note { margin: 10px 0; color: var(--muted); font-size: .85rem; }

/* ── müşteri hesabı (hesabim.html) + ödeme formundaki hesap kutusu ── */
.acct { max-width: 1080px; }
.acct-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.acct-tabs button { padding: 9px 16px; font: inherit; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.acct-tabs button[aria-selected="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.acct-list { display: grid; gap: 12px; }
.acct-card { display: grid; gap: 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.acct-card.is-default { border-color: var(--accent); }
.acct-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.acct-muted { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.acct-badge { padding: 3px 12px; font-size: .78rem; font-weight: 800; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); white-space: nowrap; }
.acct-badge-ok { background: rgba(5, 150, 105, .16); color: #059669; } .acct-badge-bad { background: rgba(220, 38, 38, .14); color: #dc2626; }
.acct-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.acct-step { display: grid; justify-items: center; gap: 4px; font-size: .76rem; text-align: center; color: var(--muted); }
.acct-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border); }
.acct-step-done .acct-dot { background: #059669; } .acct-step-done { color: var(--text); }
.acct-step-current .acct-dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } .acct-step-current { color: var(--text); font-weight: 800; }
.acct-track code { padding: 1px 8px; border-radius: 6px; background: var(--surface-2, rgba(127,127,127,.12)); }
.acct-items { display: grid; gap: 4px; margin: 4px 0; padding: 0; list-style: none; font-size: .9rem; }
.acct-items li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--border); }
.acct-qty { white-space: nowrap; color: var(--muted); }
.acct-sum { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .92rem; }
.acct-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-form { display: grid; gap: 4px; margin-top: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.acct-form[hidden] { display: none; }
@media (max-width: 520px) { .acct-step { font-size: .68rem; } .acct-card { padding: 14px; } }
.acct-danger { border-color: rgba(220, 38, 38, .35); }
.acct-danger { border-color: rgba(220, 38, 38, .35); }
.acct-box { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid var(--border); border-radius: 12px; font-size: .88rem; }
.acct-box[hidden] { display: none; }
.acct-box select { width: 100%; }
.acct-links { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-box a { color: var(--accent); font-weight: 700; }

/* Hesabım: e-ticaret düzeni — solda menü (gruplu), sağda içerik; dar ekranda üstte kaydırmalı sekmeler */
.acct-crumb { margin: 0 0 8px; color: var(--muted); font-size: .85rem; }
.acct-crumb a { color: var(--muted); }
.acct-title h1 { margin: 0 0 4px; }
.acct-title p { margin: 0 0 18px; color: var(--muted); }
.acct-layout { display: grid; gap: 14px; }
.acct-main { min-width: 0; }
.acct-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding-bottom: 4px; }
.acct-nav button { white-space: nowrap; }
.acct-nav-label { display: none; }
@media (min-width: 860px) {
  .acct-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 26px; }
  .acct-nav { position: sticky; top: 90px; flex-direction: column; gap: 2px; padding: 8px; overflow: visible; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
  .acct-nav button { text-align: left; padding: 11px 14px; color: var(--text); background: none; border: 0; border-radius: 10px; }
  .acct-nav button:hover { background: var(--surface-2); }
  .acct-nav button[aria-selected="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
  .acct-nav-label { display: block; margin: 10px 14px 4px; padding-top: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border); }
}
.acct-filters { display: grid; gap: 10px; margin: 0 0 12px; }
.acct-filters[hidden] { display: none; }
.acct-search { max-width: 440px; }
.acct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-chip { padding: 7px 14px; font: inherit; font-size: .86rem; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.acct-chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Sepette tek satırlık öneri */
.cart-suggest { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 14px; }
.cart-suggest img { flex: none; width: 44px; height: 44px; object-fit: contain; background: var(--img-bg); border-radius: 8px; }
.cs-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cs-text small { color: var(--muted); font-size: .72rem; }
.cs-text strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-text span { font-size: .8rem; color: var(--accent); font-weight: 700; }

/* Hesabım › Favorilerim */
.acct-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.acct-fav { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.acct-fav-img { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--img-bg); }
.acct-fav-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.acct-fav-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.acct-fav-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.acct-fav-name:hover { color: var(--accent); }
.acct-rate { font-size: .8rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.acct-req { margin-top: 4px; }
.nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; font-size: .7rem; font-weight: 800; color: #fff; background: #ef4444; border-radius: 999px; }
.nav-badge[hidden] { display: none; }
.acct-drop { display: inline-block; padding: 3px 10px; font-size: .78rem; font-weight: 800; color: #047857; background: color-mix(in srgb, #10b981 16%, transparent); border-radius: 999px; }

/* Son baktıklarınız */
.recent-zone { margin: 0 0 18px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.recent-zone[hidden] { display: none; }
.recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .9rem; }
.recent-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.recent-item { flex: none; display: flex; align-items: center; gap: 8px; width: 210px; padding: 6px; font: inherit; text-align: left; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.recent-item:hover { border-color: var(--accent); }
.recent-item img { flex: none; width: 48px; height: 48px; object-fit: contain; background: var(--img-bg); border-radius: 8px; }
.recent-text { display: grid; min-width: 0; line-height: 1.25; }
.recent-text b { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-text small { color: var(--accent); font-weight: 700; }

/* İndirim kodu + hediye paketi */
.coupon-row { display: grid; gap: 6px; margin: 0 0 10px; }
.coupon-row[hidden] { display: none; }
.coupon-row .link-btn { justify-self: start; font-size: .88rem; }
.coupon-form { display: flex; gap: 8px; }
.coupon-form[hidden] { display: none; }
.coupon-form .input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-msg { font-size: .84rem; font-weight: 700; color: #047857; }
.coupon-msg.bad { color: #b91c1c; }
.coupon-msg[hidden] { display: none; }
.cart-breakdown #cart-discount { color: #047857; font-weight: 700; }
.gift-box { display: grid; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; }
.gift-box[hidden] { display: none; }

/* Zorunlu alan işareti (ödeme formu) */
.req { color: #dc2626; font-weight: 800; margin-left: 2px; }
.opt { font-weight: 400; opacity: .7; }
.req-note { margin: 0 0 12px; font-size: .84rem; color: var(--muted, #64748b); }

/* Özel üretim talebi (ozel-uretim.html), mağaza çağrı kartı, ürün penceresi bağlantısı, talep görselleri */
.oz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; margin: 8px 0; }
.oz-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.oz-thumb { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.oz-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--surface-2, #f1f5f9); }   /* dik görsel kırpılmaz */
.oz-thumb-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .75); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; }
.custom-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 28px 0 8px; padding: 18px 22px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 16px; }
.custom-cta h2 { margin: 0 0 4px; font-size: 1.1rem; }
.custom-cta p { margin: 0; color: var(--muted, #64748b); max-width: 62ch; font-size: .92rem; }
.pm-custom-link { display: inline-block; margin: 10px 0 2px; font-size: .88rem; font-weight: 600; color: var(--accent, #0b5fff); text-decoration: none; }
.pm-custom-link:hover { text-decoration: underline; }
.th-offer { border-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, var(--surface, #fff)); margin: 10px 0; }
.th-req { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: .86rem; color: var(--muted, #64748b); }
.th-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.th-file { width: 96px; height: 96px; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2, #f1f5f9); cursor: zoom-in; }
.th-file img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* dik fotoğraf kırpılmaz; tıklayınca büyük pencere */
/* [hidden] her zaman gizler: .acct-card { display: grid } hidden özniteliğini eziyordu ("Talebiniz alındı" kartı form dolmadan görünüyordu) */
.acct-card[hidden], .acct-form[hidden], .alert[hidden] { display: none !important; }

/* ── Düzen kayması (CLS) önlemi: JS sonradan dolduracağı alanların yerini baştan ayır (Lighthouse: katalog 0,21 / mağaza 0,07 → kayma kaynağı bunlardı).
      Yükseklikler canlı sayfada ölçüldü (marka bandı 124 px masaüstü / ~200 px mobil + 24 px alt boşluk; güven rozetleri 35 px / mobilde 121 px).
      Yalnız :empty iken geçerli: dolunca kendiliğinden kalkar. */
#cb-header:empty { min-height: 148px; }
@media (max-width: 900px) { #cb-header:empty { min-height: 224px; } }
#trust-row:empty { min-height: 35px; }
@media (max-width: 600px) { #trust-row:empty { min-height: 121px; } }