@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ══════════════════════════════════════════════════════════════════════════
BUTİK TEMASI — giyim, "çoklu seçim" (müşteri listeden N ürün + beden seçer)
Panel: One Page > Genel > Tema Klasörü = butik · Sayfa Tipi = Ürün seçimli.
Dosya iki katman: (1) ortak iskelet — yerleşim ve ölçülmüş tuzak düzeltmeleri,
(2) en altta "BUTİK KİMLİĞİ" — sitenin yüzü. Görünüm değişikliği 2. katmanda yapılır.
Seçici klasör adına kilitlidir: klasörü yeniden adlandırırsan buradaki
body[data-theme-folder="butik"] seçicilerini de değiştir.
══════════════════════════════════════════════════════════════════════════ */
body[data-theme-folder="butik"] {
/* BUTİK — krem kâğıt, mürekkep siyahı, tek vurgu kiremit. Mavi YOK.
Köşeler keskin, başlıklar serifli (Fraunces), gövde DM Sans.
Değişken adları ortak iskeletle aynı (--a2-*) ki alttaki kurallar çalışsın. */
--a2-acc: #1b1815; /* birincil eylem: mürekkep siyahı (krem üstünde 15:1) */
--a2-acc-lite: #a8431f; /* kiremit — ilerleme çubuğu, ince vurgular */
--a2-acc-deep: #1b1815;
--a2-tint: #efe7da;
--a2-tint2: #ddd0bd;
--a2-hero-1: #2a2521;
--a2-hero-2: #1b1815;
--a2-ink: #1b1815;
--a2-mut: #675e54; /* krem üstünde 5,6:1 */
--a2-line: #ddd0bd;
--a2-paper: #f6f0e6;
--a2-card: #fffdf9;
--a2-ok: #2f5d46;
--a2-ok-tint: #e7eee8;
--a2-warm: #efe7da;
--a2-warm-ln: #cdbfa9;
--bt-kiremit: #a8431f; /* yazı taşıyabilir: krem üstünde 5,4:1, beyaz yazıyla 5,9:1 */
--bt-serif: 'Fraunces', 'Times New Roman', serif;
background: var(--a2-paper);
color: var(--a2-ink);
font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
}
body[data-theme-folder="butik"] .ay2-wrap {
width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px;
}
body[data-theme-folder="butik"] .ay2-h2 {
font-size: clamp(20px, 3vw, 26px); font-weight: 800; line-height: 1.15;
margin: 0 0 16px; color: var(--a2-ink);
}
/* Ortak header/footer bu temada gizli — kendi üst çubuğumuz ve altlığımız var */
body[data-theme-folder="butik"] #theme-header,
body[data-theme-folder="butik"] .site-footer { display: none; }
/* ══ ÜST ÇUBUK ══ */
body[data-theme-folder="butik"] .ay2-top {
position: sticky; top: 0; z-index: 60;
background: var(--a2-card); border-bottom: 1px solid var(--a2-line);
}
body[data-theme-folder="butik"] .ay2-top-in {
display: flex; align-items: center; justify-content: space-between;
height: 56px;
}
body[data-theme-folder="butik"] .ay2-logo {
display: inline-flex; align-items: center; gap: 9px; text-decoration: none; line-height: 1.1;
}
body[data-theme-folder="butik"] .ay2-logo img { width: 44px; height: 44px; display: block; border-radius: 0; }
body[data-theme-folder="butik"] .ay2-logo b {
font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--a2-ink);
}
body[data-theme-folder="butik"] .ay2-logo b span { color: var(--a2-acc); }
body[data-theme-folder="butik"] .ay2-cart {
position: relative; width: 40px; height: 40px; border-radius: 0;
display: grid; place-items: center; color: var(--a2-acc);
background: var(--a2-tint); text-decoration: none; font-size: 17px;
}
body[data-theme-folder="butik"] .ay2-cart b {
position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px;
border-radius: 0; background: var(--a2-acc); color: #fff;
font-size: 11px; font-weight: 800; display: grid; place-items: center;
padding: 0 5px; border: 2px solid #fff;
}
/* Eski koyu kampanya afişinin (daire, %50 baloncuğu, "İNDİRİM" bandı, fiyat kartı)
kuralları 2026-09-15'te kaldırıldı — yerini dosya sonundaki
"KATEGORİ KAMPANYA ALANI" (.ay2-teklif) aldı. */
/* ══ YAPIŞKAN İLERLEME ÇUBUĞU ══
Bu şerit aynı zamanda .pkg-card taşıyor (script.js "selected" işaretini
buraya koyuyor). style.css'in paket kartı görünümünü — 150px genişlik,
flex sütun, ortalı yazı, kesikli ::before çizgisi ve seçilince KOYU zemin —
burada tamamen sıfırlıyoruz; yoksa şerit küçük bir kutuya dönüşüyor. */
body[data-theme-folder="butik"] .ay2-bar.pkg-card,
body[data-theme-folder="butik"] .ay2-bar.pkg-card.selected,
body[data-theme-folder="butik"] .ay2-bar.pkg-card:hover {
position: sticky; top: 56px; z-index: 55;
display: block; width: auto; flex: initial;
background: var(--a2-card); box-shadow: none;
border: 0; border-bottom: 1px solid var(--a2-line); border-radius: 0;
padding: 9px 0 0; margin: 0;
text-align: left; cursor: default;
}
body[data-theme-folder="butik"] .ay2-bar.pkg-card::before { content: none; display: none; }
body[data-theme-folder="butik"] .ay2-bar-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
body[data-theme-folder="butik"] .ay2-bar-name {
font-size: 13px; font-weight: 800; color: var(--a2-acc); line-height: 1.3;
}
body[data-theme-folder="butik"] .ay2-bar-price {
font-size: 15px; font-weight: 800; color: var(--a2-acc);
}
body[data-theme-folder="butik"] .ay2-bar-sub {
margin-top: 1px; font-size: 11.5px; color: var(--a2-mut);
}
body[data-theme-folder="butik"] .ay2-bar-count { color: var(--a2-ok); font-weight: 700; }
body[data-theme-folder="butik"] .ay2-bar-count b { font-weight: 800; }
body[data-theme-folder="butik"] .ay2-prog {
height: 5px; background: var(--a2-tint2); margin-top: 7px; overflow: hidden;
}
body[data-theme-folder="butik"] .ay2-prog i {
display: block; height: 100%; background: var(--a2-acc-lite);
transition: width .28s ease;
}
body[data-theme-folder="butik"] .ay2-bar-done .ay2-prog i { background: var(--a2-ok); }
/* ══ IZGARA ══ */
body[data-theme-folder="butik"] .ay2-grid-wrap { padding: 6px 0 24px; }
body[data-theme-folder="butik"] .ay2-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
body[data-theme-folder="butik"] .ay2-card {
background: var(--a2-card); border: 1px solid var(--a2-line);
border-radius: 0; overflow: hidden; display: flex; flex-direction: column;
/* transform YOK: içeride position:fixed kullanan bir şey olursa kopmasın
(ayakkabı #1'de yaşanan tuzak). */
transition: border-color .18s ease, box-shadow .18s ease;
}
body[data-theme-folder="butik"] .ay2-card.product-selected {
border-color: var(--a2-acc); box-shadow: 0 0 0 2px var(--a2-tint2);
}
/* ── Görsel alanı ── */
body[data-theme-folder="butik"] .ay2-thumb {
position: relative; aspect-ratio: 1 / 1; background: var(--a2-tint);
cursor: pointer; overflow: hidden;
}
body[data-theme-folder="butik"] .ay2-thumb .ay2-img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
body[data-theme-folder="butik"] .ay2-check {
position: absolute; top: 8px; left: 8px; z-index: 3;
width: 26px; height: 26px; border-radius: 0;
background: var(--a2-acc); color: #fff;
display: none; place-items: center; font-size: 12px;
}
body[data-theme-folder="butik"] .product-selected .ay2-check { display: grid; }
/* style.css (paylaşımlı, data-product-type="shoe") ::after ile " SEÇİLDİ" yazısı
ekliyor; kendine göre genişleyen bir "pill" rozeti varsayıyor. Bizim rozet
26px sabit yuvarlak — yazı sığmıyor, komşu karta taşıyor (bkz. teknik-tuzaklar,
ayakkabi #1'de aynı sorun yaşanmıştı). */
body[data-theme-folder="butik"] .product-card.product-selected .product-check-badge::after { content: none; }
body[data-theme-folder="butik"] .ay2-code {
position: absolute; left: 8px; bottom: 8px; z-index: 3;
background: rgba(0,0,0,.62); color: #fff; font-size: 10px; font-weight: 700;
padding: 3px 7px; border-radius: 0; max-width: 60%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Karusel noktaları */
body[data-theme-folder="butik"] .ay2-dots {
position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3;
display: flex; gap: 5px; justify-content: center;
}
body[data-theme-folder="butik"] .ay2-dot {
width: 7px; height: 7px; padding: 0; border-radius: 0; cursor: pointer;
border: 1px solid rgba(255,255,255,.9); background: rgba(0,0,0,.28);
}
body[data-theme-folder="butik"] .ay2-dot.on { background: var(--a2-card); }
/* Karusel okları — Trendyol tarzı: görseli kapatmadan önceki/sonraki fotoğrafa geç */
body[data-theme-folder="butik"] .ay2-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 24px; height: 24px; border-radius: 0; border: 0; cursor: pointer;
background: rgba(0,0,0,.32); color: #fff; font-size: 11px;
display: grid; place-items: center; padding: 0;
}
body[data-theme-folder="butik"] .ay2-arrow-prev { left: 6px; }
body[data-theme-folder="butik"] .ay2-arrow-next { right: 6px; }
body[data-theme-folder="butik"] .ay2-zoom {
position: absolute; right: 8px; bottom: 8px; z-index: 3;
width: 28px; height: 28px; border-radius: 0; border: 0; cursor: pointer;
background: rgba(255,255,255,.94); color: var(--a2-ink); font-size: 12px;
display: grid; place-items: center;
}
/* Telefonda büyüteç parmakla kolay basılsın (site sahibi 2026-09-15) */
@media (max-width: 699px) {
body[data-theme-folder="butik"] .ay2-zoom { width: 36px; height: 36px; font-size: 15px; right: 6px; bottom: 6px; }
}
/* ── Hızlı teslimat şeridi ── */
body[data-theme-folder="butik"] .ay2-fast {
display: block; background: var(--a2-ok); color: #fff;
font-size: 13px; font-weight: 700; text-align: center; letter-spacing: .01em;
padding: 5px 6px; line-height: 1.3;
}
body[data-theme-folder="butik"] .ay2-fast i { font-size: 11px; margin-right: 3px; }
body[data-theme-folder="butik"] .ay2-fast b {
font-weight: 700; display: inline-block; transition: opacity .25s ease;
}
body[data-theme-folder="butik"] .ay2-fast b.ay2-fade { opacity: 0; }
/* ── Kart gövdesi ── */
body[data-theme-folder="butik"] .ay2-body {
padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 4px;
flex: 1;
}
body[data-theme-folder="butik"] .ay2-body h3 {
margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.3;
color: var(--a2-ink);
}
body[data-theme-folder="butik"] .ay2-views {
margin: 0; font-size: 11.5px; color: var(--bt-kiremit); font-weight: 600; line-height: 1.35;
}
body[data-theme-folder="butik"] .ay2-views i { color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .ay2-spec {
margin: 0; font-size: 12px; color: var(--a2-mut); line-height: 1.4;
}
body[data-theme-folder="butik"] .ay2-spec span { font-weight: 700; color: var(--a2-ink); }
/* ── BEDEN SEÇ paneli — yalnız kart seçilip numara girilmemişken açık ── */
body[data-theme-folder="butik"] .ay2-sizebox {
display: none;
background: var(--a2-warm); border: 1px solid var(--a2-warm-ln);
border-radius: 0; padding: 8px; margin-top: 3px;
}
body[data-theme-folder="butik"] .ay2-card.ay2-open .ay2-sizebox { display: block; }
body[data-theme-folder="butik"] .ay2-sizebox-h {
display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
color: var(--a2-mut); margin-bottom: 6px; line-height: 1.3;
}
/* script.js kendi etiketini basıyor ("Numaranı seç / Seçilen: —") — üstteki
başlığımız zaten var, tekrarı gizle. */
body[data-theme-folder="butik"] .ay2-sizes .shoe-size-label { display: none; }
body[data-theme-folder="butik"] .ay2-sizes .shoe-size-options {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
body[data-theme-folder="butik"] .ay2-sizes .shoe-size-options button {
padding: 7px 0; border-radius: 0; border: 1px solid var(--a2-warm-ln);
background: var(--a2-card); color: var(--a2-ink);
font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
line-height: 1.2;
}
body[data-theme-folder="butik"] .ay2-sizes .shoe-size-options button.active {
background: var(--a2-acc); border-color: var(--a2-acc); color: #fff;
}
/* ── Sepete ekle ── */
body[data-theme-folder="butik"] .ay2-btn {
margin-top: auto; width: 100%; padding: 10px 8px; cursor: pointer;
border: 1px solid var(--a2-acc); border-radius: 0;
background: var(--a2-acc); color: #fff;
font-size: 14px; font-weight: 800; font-family: inherit; line-height: 1.3;
letter-spacing: .01em; text-transform: uppercase;
}
/* Seçiliyken "eklendi" hissi versin diye sönük çerçeve — referansta da
"Sepetten Kaldır" ikincil görünür, kartlar fuşya duvarına dönmez. */
body[data-theme-folder="butik"] .product-selected .ay2-btn {
background: var(--a2-card); color: var(--a2-mut); border-color: var(--a2-line);
}
/* ══ SİPARİŞ BÖLÜMÜ ══ */
body[data-theme-folder="butik"] .ay2-order { padding: 6px 0 30px; }
body[data-theme-folder="butik"] .ay2-ship {
display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
background: var(--a2-tint); border: 1px solid var(--a2-tint2);
border-radius: 0; padding: 10px 12px;
font-size: 12.5px; color: var(--a2-acc-deep); line-height: 1.4;
}
body[data-theme-folder="butik"] .ay2-ship b { font-weight: 800; }
body[data-theme-folder="butik"] #theme-payment-form { padding: 0; background: transparent; }
body[data-theme-folder="butik"] #orderForm .form-block {
background: var(--a2-card); border: 1px solid var(--a2-line); border-radius: 0;
padding: 14px; margin-bottom: 12px; box-shadow: none;
}
body[data-theme-folder="butik"] #orderForm .form-block-title {
font-size: 15px; font-weight: 800; color: var(--a2-ink);
line-height: 1.3; margin-bottom: 10px;
}
/* Ortak stil ikon kutusuna altın zemin veriyor — palet dışı, fuşya tona çekildi. */
body[data-theme-folder="butik"] #orderForm .form-block-title i {
color: var(--a2-acc); background: var(--a2-tint);
}
/* Seçili ürünler ızgarası — referanstaki iki sütunlu düzen */
body[data-theme-folder="butik"] #pkgItemRows {
display: grid; grid-template-columns: 1fr; gap: 9px;
}
body[data-theme-folder="butik"] .pkg-sel-item,
body[data-theme-folder="butik"] .pkg-sel-slot {
border: 1px solid var(--a2-line); border-radius: 0; background: var(--a2-card);
padding: 9px;
}
body[data-theme-folder="butik"] .pkg-sel-item { border-color: var(--a2-tint2); }
body[data-theme-folder="butik"] .pkg-sel-slot {
border-style: dashed; background: transparent;
}
body[data-theme-folder="butik"] .pkg-sel-thumb,
body[data-theme-folder="butik"] .pkg-sel-thumb-ph { border-radius: 0; }
body[data-theme-folder="butik"] .pkg-sel-name {
font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
/* style.css bu seçiciyi ayakkabı sayfalarında gizliyor (numara kartta
seçiliyor diye). Referans düzende özet kartında da görünmesi gerekiyor —
müşteri seçtiği numarayı burada görüp değiştirebilmeli. */
body[data-theme-folder="butik"] .pkg-sel-size {
display: block !important; width: 100%; margin-top: 5px;
border: 1px solid var(--a2-line); border-radius: 0; padding: 6px 8px;
font-size: 12px; font-family: inherit; background: var(--a2-card); color: var(--a2-ink);
}
/* Kaldır düğmesi kartın DIŞINA taşıyordu (top/right: -10px, neredeyse siyah).
İçeri alındı ve tema rengine çekildi. */
body[data-theme-folder="butik"] .pkg-sel-remove {
top: 6px; right: 6px; width: 24px; height: 24px;
background: var(--a2-tint); color: var(--a2-acc); border: 0;
}
body[data-theme-folder="butik"] .pkg-sel-slot-text { color: var(--a2-mut); font-size: 12px; }
body[data-theme-folder="butik"] .pkg-sel-slot-btn {
background: var(--a2-acc); color: #fff; border: 0;
}
body[data-theme-folder="butik"] .pkg-campaign-pending {
background: var(--a2-tint); border: 1px solid var(--a2-tint2);
color: var(--a2-acc-deep); border-radius: 0; padding: 9px 11px;
font-size: 12.5px; line-height: 1.4;
}
body[data-theme-folder="butik"] .pkg-campaign-ok {
background: var(--a2-ok-tint); border: 1px solid #c4d6cb;
color: #2f5d46; border-radius: 0; padding: 9px 11px;
font-size: 12.5px; line-height: 1.4;
}
body[data-theme-folder="butik"] #orderForm input[type="text"],
body[data-theme-folder="butik"] #orderForm input[type="tel"],
body[data-theme-folder="butik"] #orderForm input[type="email"],
body[data-theme-folder="butik"] #orderForm select,
body[data-theme-folder="butik"] #orderForm textarea {
border: 1px solid var(--a2-line); border-radius: 0; font-family: inherit;
font-size: 14px; padding: 11px 12px; background: var(--a2-card); color: var(--a2-ink);
}
body[data-theme-folder="butik"] #orderForm input:focus,
body[data-theme-folder="butik"] #orderForm select:focus,
body[data-theme-folder="butik"] #orderForm textarea:focus {
outline: none; border-color: var(--a2-acc);
box-shadow: 0 0 0 3px var(--a2-tint);
}
body[data-theme-folder="butik"] #orderForm .submit-btn,
body[data-theme-folder="butik"] #orderForm button[type="submit"] {
background: var(--a2-acc); border: 0; color: #fff;
font-family: inherit; font-weight: 800; font-size: 15px;
border-radius: 0; padding: 14px 16px; line-height: 1.3;
}
body[data-theme-folder="butik"] .payment-card.selected {
border-color: var(--a2-acc); background: var(--a2-tint); color: var(--a2-ink);
}
/* Ortak formun soluk gri tonları (style.css) bu zeminde AA'dan kalıyordu —
#8a8074 beyaz üstünde 3,87:1, 9px yardımcı metin 4,27:1. Tema rengimiz
#6b6b76 ile 5,26:1. Gönder düğmesindeki altın fiyat da fuşya üstünde
3,78:1 idi; beyaza alındı (5,85:1). */
body[data-theme-folder="butik"] #orderForm .sub-title,
body[data-theme-folder="butik"] #orderForm label,
body[data-theme-folder="butik"] #orderForm .phone-prefix-label,
body[data-theme-folder="butik"] #orderForm .char-note,
body[data-theme-folder="butik"] #orderForm .char-note span,
body[data-theme-folder="butik"] #orderForm small {
color: var(--a2-mut);
}
body[data-theme-folder="butik"] #orderForm .btn-order-price { color: #fff; }
/* 9px yardımcı metin renkli zemin üstünde duruyor; --a2-mut orada 4,47:1'de
kalıyor — bir tık daha koyu. */
body[data-theme-folder="butik"] #orderForm small { color: #554d44; }
/* ══ KAMPANYA ÖZETİ ══ */
body[data-theme-folder="butik"] .ay2-sum { padding: 0 0 26px; }
body[data-theme-folder="butik"] .ay2-sum-in {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
body[data-theme-folder="butik"] .ay2-sum-box {
background: var(--a2-acc); color: #fff; border-radius: 0; padding: 14px;
}
body[data-theme-folder="butik"] .ay2-sum-k {
display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
opacity: .9; line-height: 1.3;
}
body[data-theme-folder="butik"] .ay2-sum-box b {
display: block; font-size: 20px; font-weight: 800; line-height: 1.2; margin: 3px 0;
}
body[data-theme-folder="butik"] .ay2-sum-box small { font-size: 11.5px; opacity: .95; }
body[data-theme-folder="butik"] .ay2-sum-item {
background: var(--a2-card); border: 1px solid var(--a2-line); border-radius: 0;
padding: 14px; display: flex; flex-direction: column; gap: 3px;
}
body[data-theme-folder="butik"] .ay2-sum-item i { color: var(--a2-acc); font-size: 17px; }
body[data-theme-folder="butik"] .ay2-sum-item b { font-size: 13px; font-weight: 800; line-height: 1.3; }
body[data-theme-folder="butik"] .ay2-sum-item small { font-size: 11.5px; color: var(--a2-mut); line-height: 1.4; }
/* ══ SSS ══ */
body[data-theme-folder="butik"] .ay2-faq { padding: 0 0 30px; }
body[data-theme-folder="butik"] .ay2-faq-list { display: flex; flex-direction: column; gap: 8px; }
body[data-theme-folder="butik"] .ay2-faq details {
background: var(--a2-card); border: 1px solid var(--a2-line); border-radius: 0;
padding: 11px 13px;
}
body[data-theme-folder="butik"] .ay2-faq summary {
cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
line-height: 1.4;
}
body[data-theme-folder="butik"] .ay2-faq summary::-webkit-details-marker { display: none; }
body[data-theme-folder="butik"] .ay2-faq summary i { color: var(--a2-acc); font-size: 12px; }
body[data-theme-folder="butik"] .ay2-faq details[open] summary i { transform: rotate(45deg); }
body[data-theme-folder="butik"] .ay2-faq p {
margin: 9px 0 0; font-size: 13px; color: var(--a2-mut); line-height: 1.55;
}
/* ══ FOOTER ══ */
body[data-theme-folder="butik"] .ay2-foot {
background: var(--a2-ink); color: #d8d5dd; padding: 22px 0 24px;
}
body[data-theme-folder="butik"] .ay2-foot-in { text-align: center; }
body[data-theme-folder="butik"] .ay2-foot-logo {
width: 72px; height: 72px; border-radius: 0; margin: 0 auto 10px; display: block;
}
body[data-theme-folder="butik"] .ay2-foot-ad { margin: 0 0 14px; font-family: var(--bt-serif); font-weight: 500; font-size: 26px; color: var(--a2-paper); }
body[data-theme-folder="butik"] .ay2-foot-note { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; }
body[data-theme-folder="butik"] .ay2-foot-c { margin: 0; font-size: 11.5px; opacity: .75; }
/* ══ YÜZEN DÜĞMELER ══ */
body[data-theme-folder="butik"] .ay2-fab {
position: fixed; right: 12px; bottom: 16px; z-index: 70;
display: flex; flex-direction: column; gap: 9px;
}
body[data-theme-folder="butik"] .ay2-fab-b {
width: 46px; height: 46px; border-radius: 0; border: 0; cursor: pointer;
display: grid; place-items: center; color: #fff; font-size: 20px;
text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.20);
}
body[data-theme-folder="butik"] .ay2-fab-ig {
background: linear-gradient(45deg, #f9a03f, #d6249f 55%, #8a3ab9);
}
body[data-theme-folder="butik"] .ay2-fab-wa { background: #25d366; }
body[data-theme-folder="butik"] .ay2-fab-up { background: var(--a2-acc); }
/* ══ GÖRSEL BÜYÜTME ══ */
body[data-theme-folder="butik"] .ay2-lb {
position: fixed; inset: 0; z-index: 120;
display: grid; place-items: center; padding: 20px;
}
body[data-theme-folder="butik"] .ay2-lb[hidden] { display: none; }
body[data-theme-folder="butik"] .ay2-lb-bg {
position: absolute; inset: 0; border: 0; padding: 0;
background: rgba(18,12,20,.82); cursor: pointer;
}
body[data-theme-folder="butik"] .ay2-lb-box {
position: relative; z-index: 1; margin: 0; max-width: 560px; width: 100%;
background: var(--a2-card); border-radius: 0; overflow: hidden;
}
body[data-theme-folder="butik"] .ay2-lb-box img {
display: block; width: 100%; height: auto;
}
/* Büyütülmüş görselde fotoğraflar arası geçiş (oklar + sayaç); kaydırma JS'te */
body[data-theme-folder="butik"] .ay2-lb-gorsel { position: relative; touch-action: pan-y; }
body[data-theme-folder="butik"] .ay2-lb-ok {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 40px; height: 40px; border-radius: 0; border: 0; cursor: pointer; padding: 0;
background: rgba(255,255,255,.94); color: var(--a2-ink); font-size: 15px;
display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
body[data-theme-folder="butik"] .ay2-lb-ok[hidden] { display: none; }
body[data-theme-folder="butik"] .ay2-lb-onceki { left: 10px; }
body[data-theme-folder="butik"] .ay2-lb-sonraki { right: 10px; }
body[data-theme-folder="butik"] .ay2-lb-sayac {
position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
padding: 3px 10px; border-radius: 0; background: rgba(0,0,0,.55); color: #fff;
font-size: 12px; font-weight: 700; line-height: 1.4;
}
body[data-theme-folder="butik"] .ay2-lb-sayac[hidden] { display: none; }
body[data-theme-folder="butik"] .ay2-lb-box figcaption {
padding: 10px 12px; font-size: 13px; font-weight: 700; line-height: 1.35;
}
body[data-theme-folder="butik"] .ay2-lb-x {
position: absolute; top: 14px; right: 14px; z-index: 2;
width: 38px; height: 38px; border-radius: 0; border: 0; cursor: pointer;
background: var(--a2-card); color: var(--a2-ink); font-size: 16px;
}
/* ══ KÜÇÜK UYARI ══ */
body[data-theme-folder="butik"] .ay2-toast {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
z-index: 130; background: var(--a2-ink); color: #fff;
padding: 11px 16px; border-radius: 0; font-size: 13px; line-height: 1.4;
max-width: calc(100% - 32px); text-align: center;
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body[data-theme-folder="butik"] .ay2-toast.on { opacity: 1; }
/* ══ ORTAK SOSYAL KANIT BALONU — tema diline uydur ══ */
body[data-theme-folder="butik"] .notif-popup {
border: 1px solid var(--a2-tint2); border-radius: 0;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
body[data-theme-folder="butik"] .notif-cart-icon {
background: var(--a2-acc); color: #fff;
}
body[data-theme-folder="butik"] .notif-head b { color: var(--a2-acc); }
/* ══ MASAÜSTÜ ══ */
@media (min-width: 700px) {
body[data-theme-folder="butik"] .ay2-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
body[data-theme-folder="butik"] #pkgItemRows { grid-template-columns: repeat(2, 1fr); }
body[data-theme-folder="butik"] #pkgItemRows .pkg-campaign-pending,
body[data-theme-folder="butik"] #pkgItemRows .pkg-campaign-ok { grid-column: 1 / -1; }
body[data-theme-folder="butik"] .ay2-body h3 { font-size: 14px; }
}
@media (min-width: 1000px) {
body[data-theme-folder="butik"] .ay2-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ══ 2026-09-11 iyileştirmeleri ══════════════════════════════════════════
- Hero'daki üçüncü fiyat tekrarı (kart) kalktı → yerine güven satırı.
- Sipariş özeti style.css "shoe" bloğundan sızan krem zemin + siyah/altın toplam +
8–9px yazılarla geliyordu; temaya çekildi (!important eşit silahla).
- Masaüstünde afiş iki sütuna açılmadı (zaman); yalnız içerik düzeltmeleri. */
body[data-theme-folder="butik"] #orderForm .order-summary {
background: var(--a2-card) !important; border: 1px solid var(--a2-tint2) !important;
box-shadow: none !important; border-radius: 0; color: var(--a2-ink);
}
body[data-theme-folder="butik"] #orderForm .order-summary > .form-block-title { border-bottom: 1px solid var(--a2-line); color: var(--a2-ink); font-size: 15px; }
body[data-theme-folder="butik"] .order-summary .summary-row { font-size: 13px; color: var(--a2-mut); border-bottom: 1px solid var(--a2-line); min-height: 40px; }
body[data-theme-folder="butik"] .order-summary .summary-row > span:last-child { color: var(--a2-ink); }
body[data-theme-folder="butik"] .order-summary .gray-s { font-size: 12px; }
body[data-theme-folder="butik"] .order-summary .free-label {
background: var(--a2-ok-tint); color: var(--a2-ok); font-size: 11px; font-weight: 800;
border-radius: 0; padding: 3px 9px; min-height: 0;
}
body[data-theme-folder="butik"] .order-summary .total-row {
background: var(--a2-acc); color: #fff; border-radius: 0; margin: 10px 0 0; padding: 12px 14px; min-height: 0; font-size: 14px;
}
body[data-theme-folder="butik"] .order-summary .total-row > span:first-child { color: #fff; }
body[data-theme-folder="butik"] .order-summary .total-val { color: #fff !important; font-size: 24px; letter-spacing: 0; }
body[data-theme-folder="butik"] .order-summary .delivery-promise,
body[data-theme-folder="butik"] .order-summary .pay-on-delivery-note {
background: var(--a2-tint); border: 1px solid var(--a2-tint2); border-radius: 0; color: var(--a2-acc-deep);
margin-top: 10px; padding: 11px 12px; font-size: 12.5px; line-height: 1.45;
}
body[data-theme-folder="butik"] .order-summary .delivery-promise strong,
body[data-theme-folder="butik"] .order-summary .pay-on-delivery-note strong { color: var(--a2-ink); font-size: 13px; }
body[data-theme-folder="butik"] .order-summary .delivery-promise small { font-size: 12px; color: var(--a2-mut); }
body[data-theme-folder="butik"] .order-summary .delivery-promise-icon { background: var(--a2-acc); color: #fff; border-radius: 0; width: 36px; height: 36px; }
body[data-theme-folder="butik"] .order-summary .pay-on-delivery-note > i { color: var(--a2-acc); }
body[data-theme-folder="butik"] .checkout-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
body[data-theme-folder="butik"] .checkout-trust span {
display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--a2-ink);
background: var(--a2-paper); border: 1px solid var(--a2-line); border-radius: 0; padding: 8px 9px;
}
body[data-theme-folder="butik"] .checkout-trust i { color: var(--a2-acc); }
body[data-theme-folder="butik"] .btn-order { border-radius: 0; padding: 14px 16px; margin-top: 12px; }
/* Özet: Toplam bandı gizli, düğme onun yerinde (sayfa.php) */
body[data-theme-folder="butik"] .order-summary .total-row.ay2-toplam-gizli { display: none !important; }
body[data-theme-folder="butik"] .btn-order .btn-order-price { font-size: 20px; font-weight: 800; }
body[data-theme-folder="butik"] .btn-order .btn-order-label { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
/* ══ 2026-09-12 · GÖRÜNÜM HATASI DÜZELTMELERİ ═══════════════════════════════
Yalnız ölçümle doğrulanmış hatalar. Renk paleti, metin, fiyat ve düzenin
temel yapısı değişmedi. Ortak style.css / script.js'e dokunulmadı. */
/* ── H1 · TABLET (701–980 px): sipariş formu sayfayı yatay taşırıyordu ─────
Ortak style.css'in shoe bloğu bu aralıkta "#orderForm { grid-template-columns:
1fr 1fr }" veriyor. CSS'te 1fr aslında minmax(AUTO,1fr)'dir: sütun, içeriğinin
min-content genişliğinin altına inemez. İsim+soyisim satırı ve il/ilçe kutuları
yüzünden sağ sütun 464 px'e kilitlenip 768 px ekranda form 880 px yer kaplıyor,
sayfa 896 px'e taşıyordu (yatay kaydırma çubuğu). minmax(0,1fr) tabanı sıfırlar.
Ölçüm: 768 px → scrollWidth 896 → 768. */
@media (max-width: 980px) and (min-width: 701px) {
body[data-theme-folder="butik"] #orderForm {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body[data-theme-folder="butik"] #orderForm > * { min-width: 0; }
}
/* ── H2 · Karusel noktaları parmakla isabet ettirilemiyordu ────────────────
Nokta 7×7 px. GÖRÜNEN nokta bilerek değiştirilmedi (tasarım aynı kalsın);
yalnız dokunma alanı görünmez bir ::before ile 11×25 px'e büyütüldü.
Yatayda -2 px seçildi: komşu noktalar arası boşluk 5 px olduğu için
alanlar üst üste binmez, yanlış noktaya basma riski doğmaz. */
body[data-theme-folder="butik"] .ay2-dot { position: relative; }
body[data-theme-folder="butik"] .ay2-dot::before {
content: ''; position: absolute; inset: -9px -2px;
}
/* 2026-09-15: dokunma alanı en az 24×24 px (WCAG 2.5.8). Görünen nokta yine 7 px;
noktalar arası boşluk 5 → 17 px açıldı ki büyüyen alanlar birbirine binmesin
(7 + 17 = 24 px adım). Dokunma katmanı her yönde 8,5 px taşar. */
body[data-theme-folder="butik"] .ay2-dots { gap: 17px; }
body[data-theme-folder="butik"] .ay2-dot::before { inset: -8.5px; }
/* ── H1b · Aynı hata bir kat daha derinde ──────────────────────────────────
Sütunlar eşitlendikten sonra bu kez "İSİM | SOYİSİM" satırı taşıdı: ortak
style.css'te ".form-row { grid-template-columns: 1fr 1fr }" ve bir
öğesinin kendi doğal (min-content) genişliği ~170 px. Taban yine sıfırlanır;
kutular kendi sütunlarına sığar. Kural YALNIZ bu aralıkla sınırlı: sınırsız
yazıldığında ortak style.css'in 700 px altındaki "tek sütun" kuralını da
eziyor ve mobilde İSİM ile SOYİSİM yan yana geliyordu (istenmeyen değişiklik).
768, 820 ve 900 px'te ölçülen taşma böyle kapandı. */
@media (max-width: 980px) and (min-width: 701px) {
body[data-theme-folder="butik"] #orderForm .form-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body[data-theme-folder="butik"] #orderForm .f-group,
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap { min-width: 0; }
body[data-theme-folder="butik"] #orderForm input,
body[data-theme-folder="butik"] #orderForm select,
body[data-theme-folder="butik"] #orderForm textarea { min-width: 0; max-width: 100%; }
}
/* ── H3 · Yüzen "siparişe git" düğmesi form alanlarını kapatıyordu ─────────
Ölçüm: düğme 360, 390 ve 768 px'te "KAPIDA NAKİT / KAPIDA KART" ödeme şekli
kartının üstüne biniyordu. Düğmenin TEK işi sipariş bölümüne kaydırmak, yani
o bölüm ekrandayken zaten işlevsiz. Diğer temalardaki
sabit çubuk çözümünün aynısı temaya eklendi: bölüm görünürken düğme gizlenir,
ekrandan çıkınca geri gelir. Gizleme sınıfını themes/butik/sayfa.php
içindeki tema betiği koyar — ortak script.js'e dokunulmadı. */
body[data-theme-folder="butik"] .ay2-fab {
transition: opacity .18s ease, transform .18s ease;
}
body[data-theme-folder="butik"] .ay2-fab.ay2-fab-gizli {
opacity: 0; pointer-events: none; transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
body[data-theme-folder="butik"] .ay2-fab { transition: none; }
body[data-theme-folder="butik"] .ay2-fab.ay2-fab-gizli { transform: none; }
}
/* ══ 2026-09-14 · SİTE SAHİBİNİN SEÇTİĞİ DÜZELTMELER ══════════════════════════════
Site sahibi maddeleri tek tek seçti. Renk paleti ve düzenin temel yapısı aynı. */
/* (Eski afişin H1 ve "%50" rozeti kuralları 2026-09-15'te kaldırıldı;
sayfanın tek H1'i artık kampanya alanındaki .ay2-teklif-baslik.) */
/* ── Masaüstü (981 px+) sipariş bölümü sıkışıyordu ────────────────────────
Ortak style.css 3 sütun veriyor; soldaki "Seçtiğiniz Ayakkabılar" sütunu
~300 px'e düşüyor, içindeki 2'li slot ızgarası yazıları kesiyordu ("2. ürünü
seç…", uyarı satırı). Slotlar bu genişlikte alt alta dizilir. Orta sütunda
İSİM | SOYİSİM satırı input'ların doğal genişliği yüzünden kutudan
taşıyordu — tablet aralığındaki H1b düzeltmesinin aynısı. */
@media (min-width: 981px) {
body[data-theme-folder="butik"] #pkgItemRows { grid-template-columns: minmax(0, 1fr); }
body[data-theme-folder="butik"] #orderForm > * { min-width: 0; }
body[data-theme-folder="butik"] #orderForm .form-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body[data-theme-folder="butik"] #orderForm .f-group,
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap { min-width: 0; }
body[data-theme-folder="butik"] #orderForm input,
body[data-theme-folder="butik"] #orderForm select,
body[data-theme-folder="butik"] #orderForm textarea { min-width: 0; max-width: 100%; }
}
/* ── Telefon kutusu diğer kutularla aynı çerçeve ──────────────────────────
Ortak stil bu kutuya yalnız alt çizgi veriyordu; tema diğer kutulara tam
çerçeve verdiği için telefon kutusu farklı duruyordu. */
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap {
/* 11px: il/ilçe kutuları ortak stilden 11px köşe alıyor, onlarla aynı */
border: 1px solid var(--a2-line); border-radius: 0; background: var(--a2-card); overflow: hidden;
}
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap:focus-within {
border-color: var(--a2-acc); box-shadow: 0 0 0 3px var(--a2-tint);
}
body[data-theme-folder="butik"] #orderForm .phone-prefix-label {
padding: 11px 10px 11px 12px; border-right: 1px solid var(--a2-line); font-size: 14px;
}
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap input {
padding: 11px 12px; font-size: 14px;
}
/* ── Sözleşme onayı: tarayıcının minik kutucuğu + sayfaya uymayan yazı ──── */
body[data-theme-folder="butik"] #orderForm .sozlesme-onay {
display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0;
font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.45;
color: var(--a2-mut); cursor: pointer; text-transform: none; letter-spacing: 0;
}
body[data-theme-folder="butik"] #orderForm .sozlesme-onay span { font-family: inherit; }
body[data-theme-folder="butik"] #orderForm .sozlesme-onay input[type="checkbox"] {
flex: 0 0 20px; width: 20px; height: 20px; margin: 0; cursor: pointer;
accent-color: var(--a2-acc);
}
body[data-theme-folder="butik"] #orderForm .sozlesme-onay a {
color: var(--a2-acc); font-weight: 700; text-decoration: underline;
}
/* ── Telefon (699 px ve altı) ─────────────────────────────────────────────
Hero ilk ekranın tamamını kaplıyordu, ilk ürün ancak kaydırınca görünüyordu.
Halka ve boşluklar küçültüldü. Yüzen sepet düğmesi ürün kartının üstüne
biniyordu; düğme küçültülüp köşeye yaklaştırıldı. */
@media (max-width: 699px) {
body[data-theme-folder="butik"] .ay2-fab { right: 6px; bottom: 10px; }
body[data-theme-folder="butik"] .ay2-fab-b { width: 40px; height: 40px; font-size: 17px; }
}
/* ── Kategori sayfaları (/erkek, /kadin) ── */
/* Ürünü henüz girilmemiş kategori */
body[data-theme-folder="butik"] .ay2-yakinda {
margin: 8px 0 0; padding: 26px 16px; text-align: center;
font-size: 15px; font-weight: 700; color: var(--a2-mut);
background: var(--a2-card); border: 1px dashed var(--a2-line); border-radius: 0;
}
/* Ana sayfadan #pc- ile gelen: kart yapışkan üst çubuk + ilerleme
çubuğunun altında kalmasın, hangi model olduğu vurgulansın. */
body[data-theme-folder="butik"] .ay2-card { scroll-margin-top: 150px; }
body[data-theme-folder="butik"] .ay2-card:target { box-shadow: 0 0 0 3px var(--a2-acc); }
/* ══ 2026-09-15 · KATEGORİ KAMPANYA ALANI (site sahibi) ═══════════════════════════
/erkek ve /kadin'in en üstü. Eski koyu afişin yerine kompakt teklif alanı:
solda başlık + "2 çift ayakkabı" + fiyat (alanın en güçlü öğesi) + koşullar,
sağda iki gerçek ürün görseli — kırpılmadan (object-fit yok, doğal oran),
yumuşak gölgeyle. Marka rengi, açık zemin ve Manrope korunur; rozet, kalın
çerçeve, parlama ve animasyon yok. Masaüstü ~260 px, telefon ~210 px. */
body[data-theme-folder="butik"] .ay2-teklif {
background: linear-gradient(180deg, #fff 0%, var(--a2-tint) 100%);
border-bottom: 1px solid var(--a2-tint2);
}
body[data-theme-folder="butik"] .ay2-teklif-in {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
gap: 12px; padding-block: 18px 16px;
}
body[data-theme-folder="butik"] .ay2-teklif-gorselsiz .ay2-teklif-in { grid-template-columns: minmax(0, 1fr); }
body[data-theme-folder="butik"] .ay2-teklif-metin { min-width: 0; }
/* Kategori adı ("Erkek koleksiyonu"): başlığın üstünde, marka mavisi, küçük ama
net — rozet/büyük harf yok. Çelik mavisi açık zeminde 5,3:1 (AA). */
body[data-theme-folder="butik"] .ay2-teklif-etiket {
margin: 0 0 4px; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--a2-acc);
}
@media (min-width: 700px) {
body[data-theme-folder="butik"] .ay2-teklif-etiket { font-size: 15.5px; margin-bottom: 6px; }
}
body[data-theme-folder="butik"] .ay2-teklif-baslik {
margin: 0 0 6px; font-size: 21px; font-weight: 800; line-height: 1.15;
letter-spacing: -.015em; color: var(--a2-ink); text-transform: none;
/* 375 px'te "Favorilerini birlikte / al." diye tek kelime alt satırda kalıyordu */
text-wrap: balance;
}
/* "2 çift ayakkabı" ve fiyat tek blok: üst satır teklif, alt satır fiyat */
body[data-theme-folder="butik"] .ay2-teklif-fiyat { margin: 0; line-height: 1; }
body[data-theme-folder="butik"] .ay2-teklif-adet {
display: block; font-size: 15px; font-weight: 700; color: var(--a2-ink); line-height: 1.25;
}
body[data-theme-folder="butik"] .ay2-teklif-tutar {
display: block; margin-top: 2px; font-size: 38px; font-weight: 800; line-height: 1.05;
letter-spacing: -.03em; color: var(--a2-acc); white-space: nowrap;
}
body[data-theme-folder="butik"] .ay2-teklif-kosul {
margin: 8px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--a2-mut);
}
body[data-theme-folder="butik"] .ay2-teklif-dugme {
display: none; align-items: center; gap: 8px; margin-top: 14px;
min-height: 44px; padding: 0 18px; border-radius: 0; text-decoration: none;
background: var(--a2-acc); color: #fff; font-size: 14.5px; font-weight: 800; line-height: 1.1;
}
body[data-theme-folder="butik"] .ay2-teklif-dugme i { font-size: 12px; }
body[data-theme-folder="butik"] .ay2-teklif-dugme:hover { background: var(--a2-acc-deep); }
body[data-theme-folder="butik"] .ay2-teklif-dugme:focus-visible { outline: 3px solid var(--a2-acc); outline-offset: 3px; }
/* İki görsel: doğal oran (yükseklik sabit, genişlik oranla), hafif üst üste
ve kademeli; kırpma yok, beyaz zemin + yumuşak gölge. */
body[data-theme-folder="butik"] .ay2-teklif-gorseller { display: flex; align-items: center; padding-right: 2px; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel {
display: block; height: 128px; width: auto; max-width: none;
border-radius: 0; background: var(--a2-card);
box-shadow: 0 10px 22px -8px rgba(27, 24, 21, .22), 0 2px 6px rgba(27, 24, 21, .08);
}
body[data-theme-folder="butik"] .ay2-teklif-gorsel-1 { position: relative; z-index: 1; transform: translateY(-8px); }
body[data-theme-folder="butik"] .ay2-teklif-gorsel-2 { position: relative; z-index: 2; margin-left: -22px; transform: translateY(10px); }
/* "Modelleri keşfet" → #modeller: yapışkan üst çubuk + ilerleme çubuğunun altında dursun */
body[data-theme-folder="butik"] #modeller { scroll-margin-top: 120px; }
/* Telefon: iki görsel yan yana 375 px'e sığmıyor (her biri ~170 px). Metnin
sağında dikey, kademeli dizilir: genişlik sabit, yükseklik orandan (kırpma yok). */
@media (max-width: 699px) {
body[data-theme-folder="butik"] .ay2-teklif-gorseller { flex-direction: column; align-items: stretch; width: 132px; padding-right: 0; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel { width: 112px; height: auto; border-radius: 0; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel-1 { align-self: flex-start; transform: none; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel-2 { align-self: flex-end; margin: -22px 0 0; transform: none; }
}
/* Çok dar telefon: görseller biraz küçülür, metin sıkışmaz */
@media (max-width: 359px) {
body[data-theme-folder="butik"] .ay2-teklif-gorseller { width: 112px; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel { width: 94px; }
body[data-theme-folder="butik"] .ay2-teklif-tutar { font-size: 33px; }
}
@media (min-width: 700px) {
/* Koleksiyon satırı eklenince masaüstü 321 px'e çıkmıştı; boşluk 30 → 22 px */
body[data-theme-folder="butik"] .ay2-teklif-in { gap: 32px; padding-block: 22px; min-height: 260px; }
body[data-theme-folder="butik"] .ay2-teklif-baslik { font-size: 30px; margin-bottom: 10px; }
body[data-theme-folder="butik"] .ay2-teklif-adet { font-size: 20px; }
body[data-theme-folder="butik"] .ay2-teklif-tutar { font-size: 56px; }
body[data-theme-folder="butik"] .ay2-teklif-kosul { margin-top: 12px; font-size: 14.5px; }
body[data-theme-folder="butik"] .ay2-teklif-dugme { display: inline-flex; }
body[data-theme-folder="butik"] .ay2-teklif-gorseller { padding-right: 12px; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel { height: 210px; border-radius: 0; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel-1 { transform: translateY(-12px); }
body[data-theme-folder="butik"] .ay2-teklif-gorsel-2 { margin-left: -34px; transform: translateY(14px); }
}
/* Tablet (700–999): 210 px'lik iki görsel metin sütununu ~180 px'e düşürüp
"1.499 TL"yi kırpıyordu, alan 336 px oluyordu (768 px'te ölçüldü). */
@media (min-width: 700px) and (max-width: 999px) {
body[data-theme-folder="butik"] .ay2-teklif-in { gap: 20px; padding-block: 24px; min-height: 0; }
body[data-theme-folder="butik"] .ay2-teklif-baslik { font-size: 26px; }
body[data-theme-folder="butik"] .ay2-teklif-tutar { font-size: 46px; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel { height: 150px; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel-1 { transform: translateY(-8px); }
body[data-theme-folder="butik"] .ay2-teklif-gorsel-2 { margin-left: -26px; transform: translateY(10px); }
}
@media (min-width: 1000px) {
body[data-theme-folder="butik"] .ay2-teklif-baslik { font-size: 34px; }
body[data-theme-folder="butik"] .ay2-teklif-tutar { font-size: 64px; }
body[data-theme-folder="butik"] .ay2-teklif-gorsel { height: 220px; }
}
/* ══ 2026-09-15 · SİPARİŞ SONRASI KİLİT + DOKUNMA ALANLARI ══════════════════
Başarılı siparişten sonra geri dönülürse form kilitlenir ve bu kutu çıkar
(script.js _siparisTamamKontrol). Ana sayfadaki "Tümünü gör" bağlantısı
19 px yüksekti; dikey dolguyla en az 24 px dokunma alanı. */
body[data-theme-folder="butik"] .siparis-tamam-kutu {
margin: 0 0 14px; padding: 14px 16px; border-radius: 0;
background: var(--a2-ok-tint); border: 1px solid #c4d6cb; color: var(--a2-ink);
font-size: 14.5px; line-height: 1.45;
}
body[data-theme-folder="butik"] .siparis-tamam-kutu strong { color: var(--a2-ok); }
body[data-theme-folder="butik"] .siparis-yeni-btn {
display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 0 14px;
border-radius: 0; border: 1.5px solid var(--a2-acc); background: var(--a2-card); color: var(--a2-acc);
font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
}
body[data-theme-folder="butik"] .siparis-yeni-btn:focus-visible { outline: 3px solid var(--a2-acc); outline-offset: 2px; }
body[data-theme-folder="butik"] #orderForm.siparis-tamam .btn-order { opacity: .55; cursor: not-allowed; }
body[data-theme-folder="butik"] .ay2-onizleme-bas a { display: inline-block; padding-block: 8px; }
/* ══════════════════════════════════════════════════════════════════════════
BUTİK KİMLİĞİ — bu bloğun üstündeki kurallar ortak iskelettir (yerleşim, tuzak
düzeltmeleri); sitenin YÜZÜ burada kurulur. Dil: moda dergisi / butik mağaza.
· krem kâğıt zemin, mürekkep siyahı, tek vurgu kiremit — mavi ve yeşil bant yok
· başlıklar Fraunces (serif), küçük etiketler BÜYÜK HARF + geniş aralık
· kutu ve gölge yerine ince çizgiler; köşeler keskin
· ürün görselleri 4:5 dikey (giyim), kartlar çerçevesiz
══════════════════════════════════════════════════════════════════════════ */
/* Yapışkan üst çubuk + ilerleme çubuğu: ortak style.css body'ye overflow-x:hidden veriyor;
html'de overflow-x:clip olduğu için body ayrı bir kaydırma kabına dönüşüyor ve
position:sticky hiç yapışmıyor (ölçüldü: 300 px kaydırınca çubuk -300'de). clip kap yaratmaz. */
body[data-theme-folder="butik"] { overflow-x: clip !important; overflow-y: visible !important; }
/* ── Ortak yardımcılar ── */
body[data-theme-folder="butik"] .ay2-wrap { max-width: 1160px; padding: 0 18px; }
body[data-theme-folder="butik"] .ay2-h2 {
font-family: var(--bt-serif); font-weight: 400; font-size: clamp(26px, 4vw, 36px);
letter-spacing: -.015em; line-height: 1.1; margin: 0 0 18px;
}
/* ── Üst çubuk: ortalanmış söz markası ── */
body[data-theme-folder="butik"] .ay2-top { background: var(--a2-paper); border-bottom: 1px solid var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-top-in { height: 60px; }
body[data-theme-folder="butik"] .ay2-logo b {
font-family: var(--bt-serif); font-weight: 500; font-size: 23px; letter-spacing: .01em;
}
body[data-theme-folder="butik"] .ay2-logo img { width: 36px; height: 36px; }
body[data-theme-folder="butik"] .ay2-logo b span { font-style: italic; font-weight: 400; color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .ay2-foot-ad span { font-style: italic; font-weight: 400; color: #e6a98c; }
body[data-theme-folder="butik"] .ay2-cart {
background: transparent; color: var(--a2-ink); border: 1px solid var(--a2-ink); border-radius: 0;
width: 42px; height: 42px; font-size: 16px;
}
body[data-theme-folder="butik"] .ay2-cart b {
background: var(--bt-kiremit); border: 0; border-radius: 0; top: -7px; right: -7px;
min-width: 20px; height: 20px; font-weight: 700;
}
/* ══ AFİŞ — üst çubuğun altında tam genişlik (uploads/butik/afis.* + afis-mobil.*) ══ */
body[data-theme-folder="butik"] .bt-afis { background: var(--a2-tint); border-bottom: 1px solid var(--a2-ink); }
body[data-theme-folder="butik"] .bt-afis img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; }
/* Yalnız dikey afiş varken: telefonda görsel üstte, yazı altında; geniş ekranda iki sütun (yazı solda) */
body[data-theme-folder="butik"] .bt-afis-dikey { display: flex; flex-direction: column-reverse; background: var(--a2-paper); }
body[data-theme-folder="butik"] .bt-afis-metin { padding: 24px 18px 26px; }
body[data-theme-folder="butik"] .bt-afis-ust { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .bt-afis-ad { margin: 0 0 12px; font-family: var(--bt-serif); font-weight: 400; font-size: 38px; line-height: 1.04; letter-spacing: -.025em; color: var(--a2-ink); }
body[data-theme-folder="butik"] .bt-afis-acl { margin: 0 0 20px; max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: var(--a2-mut); }
body[data-theme-folder="butik"] .bt-afis-dugme {
display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 26px; text-decoration: none;
background: var(--a2-ink); color: var(--a2-paper); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
body[data-theme-folder="butik"] .bt-afis-dugme:hover { background: var(--bt-kiremit); }
@media (min-width: 700px) {
body[data-theme-folder="butik"] .bt-afis-dikey { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
body[data-theme-folder="butik"] .bt-afis-dikey .bt-afis-metin {
display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px clamp(24px, 6vw, 96px);
}
body[data-theme-folder="butik"] .bt-afis-dikey picture { display: block; min-width: 0; }
body[data-theme-folder="butik"] .bt-afis-dikey img { height: 100%; max-height: 600px; min-height: 420px; object-fit: cover; object-position: center 18%; }
body[data-theme-folder="butik"] .bt-afis-ust { font-size: 11.5px; letter-spacing: .22em; margin-bottom: 16px; }
body[data-theme-folder="butik"] .bt-afis-ad { font-size: clamp(40px, 4.6vw, 68px); margin-bottom: 18px; }
body[data-theme-folder="butik"] .bt-afis-acl { font-size: 16px; margin-bottom: 28px; }
}
/* ══ KOLEKSİYON ŞERİDİ (includes/kampanya-seridi.php yalnız yerleşimi verir) ══
Telefon: dergi içindekiler sayfası gibi SATIR listesi (küçük dikey görsel · sıra no
· serif ad · sağda fiyat). Geniş ekran: görselli sütunlar. Açık sayfa ters renk. */
body[data-theme-folder="butik"] .ks { padding: 22px 0 6px; }
body[data-theme-folder="butik"] .ks-bas {
display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px;
font-family: var(--bt-serif); font-weight: 400; font-style: italic; font-size: 24px; letter-spacing: -.01em;
}
body[data-theme-folder="butik"] .ks-bas::after { content: ''; flex: 1; height: 1px; background: var(--a2-ink); transform: translateY(-5px); }
body[data-theme-folder="butik"] .ks .ks-liste { grid-template-columns: minmax(0, 1fr); gap: 0; }
body[data-theme-folder="butik"] .ks-kart {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px;
grid-template-areas: "ust alt" "ad alt" "acl alt"; align-content: center;
padding: 13px 12px; border: 0; border-bottom: 1px solid var(--a2-line);
background: transparent; color: var(--a2-ink); transition: background-color .2s;
}
body[data-theme-folder="butik"] .ks-kart.ks-gorselli {
grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "g ust alt" "g ad alt" "g acl alt";
}
body[data-theme-folder="butik"] .ks-kart:hover { background: var(--a2-tint); }
body[data-theme-folder="butik"] .ks-gorsel {
grid-area: g; display: block; width: 58px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--a2-tint);
}
body[data-theme-folder="butik"] .ks-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-theme-folder="butik"] .ks-ust { grid-area: ust; justify-content: flex-start; gap: 10px; min-height: 0; }
body[data-theme-folder="butik"] .ks-sira { font-family: var(--bt-serif); font-style: italic; font-size: 13px; color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .ks-rozet {
font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
padding: 2px 6px 1px; border: 1px solid currentColor; color: var(--bt-kiremit);
}
body[data-theme-folder="butik"] .ks-ad {
grid-area: ad; font-family: var(--bt-serif); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -.01em;
}
body[data-theme-folder="butik"] .ks .ks-acl {
grid-area: acl; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--a2-mut);
}
body[data-theme-folder="butik"] .ks-alt {
grid-area: alt; margin: 0; padding: 0; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; text-align: right;
}
body[data-theme-folder="butik"] .ks-fiyat { font-family: var(--bt-serif); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
body[data-theme-folder="butik"] .ks-fiyat small {
font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--a2-mut); margin-bottom: 1px;
}
body[data-theme-folder="butik"] .ks .ks-durum {
display: inline; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
/* Açık sayfa: ters renk */
body[data-theme-folder="butik"] .ks-acik, body[data-theme-folder="butik"] .ks-acik:hover { background: var(--a2-ink); color: var(--a2-paper); border-bottom-color: var(--a2-ink); }
body[data-theme-folder="butik"] .ks-acik .ks-sira, body[data-theme-folder="butik"] .ks-acik .ks-rozet, body[data-theme-folder="butik"] .ks-acik .ks-durum { color: #e6a98c; }
body[data-theme-folder="butik"] .ks-acik .ks-acl, body[data-theme-folder="butik"] .ks-acik .ks-fiyat small { color: #cdc2b3; }
body[data-theme-folder="butik"] .ks-acik .ks-durum { text-decoration: none; }
@media (min-width: 700px) {
body[data-theme-folder="butik"] .ks { padding: 34px 0 10px; }
body[data-theme-folder="butik"] .ks-bas { font-size: 30px; margin-bottom: 18px; }
body[data-theme-folder="butik"] .ks .ks-liste { gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-theme-folder="butik"] .ks-n3 .ks-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-theme-folder="butik"] .ks-n4 .ks-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-theme-folder="butik"] .ks-kart, body[data-theme-folder="butik"] .ks-kart.ks-gorselli {
display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; border: 1px solid var(--a2-line);
}
body[data-theme-folder="butik"] .ks-acik { border-color: var(--a2-ink); }
body[data-theme-folder="butik"] .ks-gorsel { width: 100%; margin-bottom: 10px; }
body[data-theme-folder="butik"] .ks-ad { font-size: 21px; }
body[data-theme-folder="butik"] .ks .ks-acl { display: -webkit-box; -webkit-line-clamp: 2; white-space: normal; font-size: 13px; }
body[data-theme-folder="butik"] .ks-alt {
margin-top: auto; padding-top: 12px; flex-direction: row; align-items: flex-end; justify-content: space-between; text-align: left;
}
body[data-theme-folder="butik"] .ks-fiyat { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { body[data-theme-folder="butik"] .ks-kart { transition: none; } }
/* ══ KAYAN GÜVEN ŞERİDİ — koleksiyonun altında tam genişlik siyah bant ══ */
body[data-theme-folder="butik"] .bt-serit { overflow: hidden; background: var(--a2-ink); color: var(--a2-paper); }
body[data-theme-folder="butik"] .bt-serit-in { display: flex; width: max-content; animation: bt-kay 40s linear infinite; }
body[data-theme-folder="butik"] .bt-serit:hover .bt-serit-in { animation-play-state: paused; }
body[data-theme-folder="butik"] .bt-serit-yari { display: flex; flex: none; }
body[data-theme-folder="butik"] .bt-serit span {
display: inline-flex; align-items: center; flex: none; padding: 12px 0; white-space: nowrap;
font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2;
}
body[data-theme-folder="butik"] .bt-serit span::after { content: '✦'; margin: 0 26px; font-size: 10px; letter-spacing: 0; color: #e6a98c; }
body[data-theme-folder="butik"] .bt-serit-alt { margin-top: 14px; }
/* Üstteki daha ince; alttakiyle aynı anda aynı yazı görünmesin diye ters yöne kayar */
body[data-theme-folder="butik"] .bt-serit-ust span { padding: 9px 0; font-size: 10.5px; }
body[data-theme-folder="butik"] .bt-serit-ust .bt-serit-in { animation-direction: reverse; }
@keyframes bt-kay { to { transform: translateX(-50%); } }
@media (min-width: 700px) {
body[data-theme-folder="butik"] .bt-serit-alt { margin-top: 24px; }
body[data-theme-folder="butik"] .bt-serit span { font-size: 12px; padding: 14px 0; }
}
/* Hareket istemeyen ziyaretçide şerit durur; ilk yazılar okunur kalır */
@media (prefers-reduced-motion: reduce) { body[data-theme-folder="butik"] .bt-serit-in { animation: none; } }
/* ══ TEKLİF ALANI (hero) ══ */
body[data-theme-folder="butik"] .ay2-teklif { background: var(--a2-paper); border-bottom: 1px solid var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-teklif-in { padding-block: 26px 24px; }
body[data-theme-folder="butik"] .ay2-teklif-etiket {
font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bt-kiremit); margin-bottom: 10px;
}
body[data-theme-folder="butik"] .ay2-teklif-baslik {
font-family: var(--bt-serif); font-weight: 400; font-size: 36px; line-height: 1.04; letter-spacing: -.025em; margin-bottom: 14px;
}
body[data-theme-folder="butik"] .ay2-teklif-adet {
font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--a2-mut);
}
body[data-theme-folder="butik"] .ay2-teklif-tutar {
font-family: var(--bt-serif); font-weight: 500; font-size: 50px; letter-spacing: -.03em; color: var(--a2-ink); margin-top: 4px;
}
body[data-theme-folder="butik"] .ay2-teklif-nasil { margin: 12px 0 0; max-width: 44ch; font-size: 13.5px; line-height: 1.5; color: var(--a2-mut); }
@media (min-width: 700px) { body[data-theme-folder="butik"] .ay2-teklif-nasil { font-size: 15px; } }
body[data-theme-folder="butik"] .ay2-teklif-kosul {
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--a2-line);
font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--a2-mut);
}
body[data-theme-folder="butik"] .ay2-teklif-dugme {
margin-top: 20px; min-height: 48px; padding: 0 26px; background: var(--a2-ink); color: var(--a2-paper);
font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
body[data-theme-folder="butik"] .ay2-teklif-dugme:hover { background: var(--bt-kiremit); }
body[data-theme-folder="butik"] .ay2-teklif-gorsel { box-shadow: none; border: 1px solid var(--a2-line); background: var(--a2-tint); }
@media (min-width: 700px) {
body[data-theme-folder="butik"] .ay2-teklif-in { padding-block: 44px; }
body[data-theme-folder="butik"] .ay2-teklif-baslik { font-size: 54px; }
body[data-theme-folder="butik"] .ay2-teklif-tutar { font-size: 72px; }
body[data-theme-folder="butik"] .ay2-teklif-kosul { font-size: 12px; max-width: 440px; }
}
@media (min-width: 1000px) {
body[data-theme-folder="butik"] .ay2-teklif-baslik { font-size: 64px; }
body[data-theme-folder="butik"] .ay2-teklif-tutar { font-size: 84px; }
}
/* ══ İLERLEME ÇUBUĞU ══ */
body[data-theme-folder="butik"] .ay2-bar.pkg-card,
body[data-theme-folder="butik"] .ay2-bar.pkg-card.selected,
body[data-theme-folder="butik"] .ay2-bar.pkg-card:hover { top: 60px; background: var(--a2-paper); border-bottom: 0; padding-top: 10px; }
body[data-theme-folder="butik"] .ay2-bar-name { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-bar-price { font-family: var(--bt-serif); font-weight: 500; font-size: 19px; color: var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-bar-sub { font-size: 12px; margin-top: 2px; }
body[data-theme-folder="butik"] .ay2-bar-count { color: var(--bt-kiremit); font-weight: 600; }
body[data-theme-folder="butik"] .ay2-prog { height: 2px; background: var(--a2-line); margin-top: 9px; }
body[data-theme-folder="butik"] .ay2-prog i { background: var(--bt-kiremit); }
body[data-theme-folder="butik"] .ay2-bar-done .ay2-prog i { background: var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-bar-done .ay2-bar-count { color: var(--a2-ink); }
/* ══ ÜRÜN IZGARASI: çerçevesiz kart, 4:5 dikey görsel ══ */
body[data-theme-folder="butik"] .ay2-grid-wrap { padding: 22px 0 36px; }
body[data-theme-folder="butik"] .ay2-grid { gap: 26px 12px; }
body[data-theme-folder="butik"] .ay2-card { background: transparent; border: 0; overflow: visible; }
body[data-theme-folder="butik"] .ay2-card.product-selected { border: 0; box-shadow: none; }
body[data-theme-folder="butik"] .ay2-card:target { box-shadow: none; }
body[data-theme-folder="butik"] .ay2-thumb { aspect-ratio: 4 / 5; background: var(--a2-tint); }
body[data-theme-folder="butik"] .ay2-thumb::after {
content: ''; position: absolute; inset: 0; pointer-events: none; border: 2px solid transparent; transition: border-color .18s;
}
body[data-theme-folder="butik"] .product-selected .ay2-thumb::after,
body[data-theme-folder="butik"] .ay2-card:target .ay2-thumb::after { border-color: var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-check { top: 0; left: 0; width: 30px; height: 30px; border-radius: 0; background: var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-fast {
background: transparent; color: var(--a2-mut); text-align: left; padding: 9px 0 0;
font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
body[data-theme-folder="butik"] .ay2-fast i { color: var(--bt-kiremit); font-size: 10px; margin-right: 5px; }
body[data-theme-folder="butik"] .ay2-body { padding: 3px 0 0; gap: 5px; }
body[data-theme-folder="butik"] .ay2-body h3 { font-family: var(--bt-serif); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
body[data-theme-folder="butik"] .ay2-views { font-size: 12px; font-weight: 500; }
body[data-theme-folder="butik"] .ay2-spec { font-size: 12.5px; }
body[data-theme-folder="butik"] .ay2-spec span { font-weight: 600; }
body[data-theme-folder="butik"] .ay2-sizebox { background: transparent; border: 0; border-top: 1px solid var(--a2-line); padding: 10px 0 2px; margin-top: 4px; }
body[data-theme-folder="butik"] .ay2-sizebox-h { font-size: 10px; letter-spacing: .18em; color: var(--a2-ink); margin-bottom: 8px; }
body[data-theme-folder="butik"] .ay2-sizes .shoe-size-options { gap: 5px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
body[data-theme-folder="butik"] .ay2-sizes .shoe-size-options button {
background: transparent; border: 1px solid var(--a2-ink); padding: 9px 0; font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
body[data-theme-folder="butik"] .ay2-sizes .shoe-size-options button.active { background: var(--a2-ink); color: var(--a2-paper); }
body[data-theme-folder="butik"] .ay2-btn {
margin-top: 8px; padding: 13px 8px; background: var(--a2-ink); border: 1px solid var(--a2-ink); color: var(--a2-paper);
font-size: 11px; font-weight: 700; letter-spacing: .18em;
}
body[data-theme-folder="butik"] .ay2-btn:hover { background: var(--bt-kiremit); border-color: var(--bt-kiremit); }
/* !important: ortak style.css seçili düğmeye kendi yeşil zeminini daha özgül seçiciyle veriyor */
body[data-theme-folder="butik"] .product-card.product-selected .ay2-btn,
body[data-theme-folder="butik"] .product-card.product-selected .ay2-btn:hover {
background: transparent !important; color: var(--a2-ink) !important; border-color: var(--a2-ink) !important;
}
body[data-theme-folder="butik"] .ay2-yakinda { background: transparent; font-family: var(--bt-serif); font-style: italic; font-weight: 400; font-size: 19px; }
@media (min-width: 700px) {
body[data-theme-folder="butik"] .ay2-grid { gap: 40px 22px; }
body[data-theme-folder="butik"] .ay2-body h3 { font-size: 20px; }
}
/* ══ BEDENİMİ BUL ══ kartta düğme + öneri satırı, ortada pencere */
body[data-theme-folder="butik"] .ay2-sizebox-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body[data-theme-folder="butik"] .bt-bb-ac {
flex: none; padding: 6px 0; border: 0; background: transparent; cursor: pointer; font-family: inherit;
font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bt-kiremit);
text-decoration: underline; text-underline-offset: 4px;
}
body[data-theme-folder="butik"] .bt-bb-ac i { font-size: 11px; margin-right: 3px; }
body[data-theme-folder="butik"] .bt-bb-ac:focus-visible { outline: 2px solid var(--a2-ink); outline-offset: 2px; }
body[data-theme-folder="butik"] .bt-bb-oneri { display: block; margin: -2px 0 8px; font-size: 12px; font-weight: 600; color: var(--a2-ok); }
body[data-theme-folder="butik"] .bt-bb-oneri[hidden] { display: none; }
body[data-theme-folder="butik"] .bt-bb { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; padding: 18px; }
body[data-theme-folder="butik"] .bt-bb[hidden] { display: none; }
body[data-theme-folder="butik"] .bt-bb-bg { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(27, 24, 21, .72); cursor: pointer; }
body[data-theme-folder="butik"] .bt-bb-kutu {
position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 30px 24px 24px;
background: var(--a2-paper); border: 1px solid var(--a2-ink);
}
body[data-theme-folder="butik"] .bt-bb-x {
position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
font-size: 18px; color: var(--a2-ink);
}
body[data-theme-folder="butik"] .bt-bb-ust { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .bt-bb-baslik { margin: 0 0 20px; font-family: var(--bt-serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; color: var(--a2-ink); }
body[data-theme-folder="butik"] .bt-bb-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-theme-folder="butik"] .bt-bb-alanlar label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a2-mut); }
body[data-theme-folder="butik"] .bt-bb-alanlar input {
display: block; width: 100%; min-width: 0; margin-top: 7px; padding: 13px 12px; border: 1px solid var(--a2-warm-ln); border-radius: 0;
background: var(--a2-card); color: var(--a2-ink); font-family: inherit; font-size: 16px; letter-spacing: 0;
}
body[data-theme-folder="butik"] .bt-bb-alanlar input:focus { outline: none; border-color: var(--a2-ink); box-shadow: 0 0 0 1px var(--a2-ink); }
body[data-theme-folder="butik"] .bt-bb-hata { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .bt-bb-sonuc {
margin: 14px 0 0; padding: 14px; text-align: center; background: var(--a2-ink); color: var(--a2-paper);
font-family: var(--bt-serif); font-weight: 500; font-size: 22px; line-height: 1.2;
}
body[data-theme-folder="butik"] .bt-bb-hata[hidden], body[data-theme-folder="butik"] .bt-bb-sonuc[hidden] { display: none; }
body[data-theme-folder="butik"] .bt-bb-hesapla {
width: 100%; margin-top: 16px; padding: 16px; border: 1px solid var(--a2-ink); background: var(--a2-ink); color: var(--a2-paper); cursor: pointer;
font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
body[data-theme-folder="butik"] .bt-bb-hesapla:hover { background: var(--bt-kiremit); border-color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .bt-bb-not { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--a2-mut); }
/* ══ SİPARİŞ ══ */
body[data-theme-folder="butik"] .ay2-order { padding: 10px 0 40px; border-top: 1px solid var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-ship {
background: transparent; border: 0; border-bottom: 1px solid var(--a2-line); padding: 16px 0; margin-bottom: 18px;
color: var(--a2-ink); font-size: 13px;
}
body[data-theme-folder="butik"] .ay2-ship i { color: var(--bt-kiremit); }
body[data-theme-folder="butik"] #orderForm .form-block { padding: 18px 16px; border-color: var(--a2-line); }
body[data-theme-folder="butik"] #orderForm .form-block-title { font-family: var(--bt-serif); font-weight: 500; font-size: 21px; letter-spacing: -.01em; }
body[data-theme-folder="butik"] #orderForm .form-block-title i { background: transparent; color: var(--bt-kiremit); }
body[data-theme-folder="butik"] #orderForm label,
body[data-theme-folder="butik"] #orderForm .sub-title { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
body[data-theme-folder="butik"] #orderForm .sozlesme-onay { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
body[data-theme-folder="butik"] #orderForm input[type="text"],
body[data-theme-folder="butik"] #orderForm input[type="tel"],
body[data-theme-folder="butik"] #orderForm input[type="email"],
body[data-theme-folder="butik"] #orderForm select,
body[data-theme-folder="butik"] #orderForm textarea,
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap { border-color: var(--a2-warm-ln); border-radius: 0; }
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap input { border: 0; }
body[data-theme-folder="butik"] #orderForm input:focus,
body[data-theme-folder="butik"] #orderForm select:focus,
body[data-theme-folder="butik"] #orderForm textarea:focus,
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap:focus-within { border-color: var(--a2-ink); box-shadow: 0 0 0 1px var(--a2-ink); }
body[data-theme-folder="butik"] #orderForm .phone-prefix-wrap input:focus { box-shadow: none; }
body[data-theme-folder="butik"] .payment-card { border-radius: 0; }
body[data-theme-folder="butik"] .payment-card.selected { border-color: var(--a2-ink); background: var(--a2-tint); box-shadow: inset 0 0 0 1px var(--a2-ink); }
body[data-theme-folder="butik"] .pkg-sel-item { border-color: var(--a2-line); }
body[data-theme-folder="butik"] .pkg-sel-name { font-family: var(--bt-serif); font-weight: 500; font-size: 15px; }
body[data-theme-folder="butik"] .pkg-sel-remove { background: var(--a2-ink); color: var(--a2-paper); border-radius: 0; }
body[data-theme-folder="butik"] .pkg-sel-slot-btn { border-radius: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
body[data-theme-folder="butik"] .pkg-campaign-pending { background: transparent; border-color: var(--a2-line); color: var(--a2-ink); }
body[data-theme-folder="butik"] #orderForm .order-summary { border-color: var(--a2-ink) !important; }
body[data-theme-folder="butik"] .order-summary .free-label { border-radius: 0; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
body[data-theme-folder="butik"] .order-summary .total-val { font-family: var(--bt-serif); font-weight: 500; }
body[data-theme-folder="butik"] .order-summary .delivery-promise,
body[data-theme-folder="butik"] .order-summary .pay-on-delivery-note { background: transparent; border-color: var(--a2-line); color: var(--a2-ink); }
body[data-theme-folder="butik"] .order-summary .delivery-promise-icon { background: var(--a2-ink); }
body[data-theme-folder="butik"] .order-summary .pay-on-delivery-note > i,
body[data-theme-folder="butik"] .checkout-trust i { color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .checkout-trust span { background: transparent; }
body[data-theme-folder="butik"] .btn-order,
body[data-theme-folder="butik"] #orderForm .submit-btn,
body[data-theme-folder="butik"] #orderForm button[type="submit"] { background: var(--a2-ink); color: var(--a2-paper); border-radius: 0; padding: 17px 18px; }
body[data-theme-folder="butik"] .btn-order:hover { background: var(--bt-kiremit); }
body[data-theme-folder="butik"] #orderForm.siparis-tamam .btn-order:hover { background: var(--a2-ink); }
body[data-theme-folder="butik"] .btn-order .btn-order-label { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
body[data-theme-folder="butik"] .btn-order .btn-order-price { font-family: var(--bt-serif); font-weight: 500; font-size: 23px; color: var(--a2-paper); }
body[data-theme-folder="butik"] .siparis-yeni-btn { border-radius: 0; border-color: var(--a2-ink); color: var(--a2-ink); background: transparent; }
/* Ortak style.css il/ilçe kutularına, ödeme kartlarına ve seçili ürün satırlarına kendi
yuvarlak köşesini veriyor (tema kuralından daha özgül) — butikte hepsi keskin. */
body[data-theme-folder="butik"] #orderForm select,
body[data-theme-folder="butik"] #orderForm input,
body[data-theme-folder="butik"] #orderForm textarea,
body[data-theme-folder="butik"] #orderForm .payment-card,
body[data-theme-folder="butik"] #orderForm .pkg-sel-item,
body[data-theme-folder="butik"] #orderForm .pkg-sel-slot,
body[data-theme-folder="butik"] #orderForm .pkg-sel-thumb,
body[data-theme-folder="butik"] #orderForm .pkg-sel-thumb-ph,
body[data-theme-folder="butik"] #orderForm .pkg-sel-slot-btn,
body[data-theme-folder="butik"] #orderForm .form-block-title i,
body[data-theme-folder="butik"] #orderForm .btn-order { border-radius: 0 !important; }
/* ══ SSS: kutu yok, çizgili liste ══ */
body[data-theme-folder="butik"] .ay2-faq { padding: 34px 0 44px; border-top: 1px solid var(--a2-line); }
body[data-theme-folder="butik"] .ay2-faq-list { gap: 0; border-top: 1px solid var(--a2-ink); }
body[data-theme-folder="butik"] .ay2-faq details { background: transparent; border: 0; border-bottom: 1px solid var(--a2-line); padding: 16px 2px; }
body[data-theme-folder="butik"] .ay2-faq summary { font-family: var(--bt-serif); font-weight: 500; font-size: 18px; line-height: 1.3; }
body[data-theme-folder="butik"] .ay2-faq summary i { color: var(--a2-ink); transition: transform .2s; }
body[data-theme-folder="butik"] .ay2-faq p { font-size: 14px; max-width: 68ch; }
/* ══ ALTLIK ══ */
body[data-theme-folder="butik"] .ay2-foot { background: var(--a2-ink); color: #cdc2b3; padding: 36px 0 34px; }
body[data-theme-folder="butik"] .ay2-foot-logo { width: 56px; height: 56px; margin-bottom: 16px; }
body[data-theme-folder="butik"] .ay2-foot-note { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--a2-paper); margin-bottom: 12px; }
body[data-theme-folder="butik"] .ay2-foot-yasal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 16px; }
body[data-theme-folder="butik"] .ay2-foot-yasal a { padding: 6px 0; font-size: 12.5px; color: #cdc2b3; text-decoration: underline; text-underline-offset: 3px; }
body[data-theme-folder="butik"] .ay2-foot-yasal a:hover { color: var(--a2-paper); }
body[data-theme-folder="butik"] .ay2-foot-c { font-size: 12px; opacity: 1; color: #a89d8e; }
/* ══ Yüzen düğmeler, bildirim, büyütme ══ */
body[data-theme-folder="butik"] .ay2-fab-b { box-shadow: 0 6px 18px rgba(27, 24, 21, .22); }
body[data-theme-folder="butik"] .ay2-fab-up { background: var(--a2-ink); color: var(--a2-paper); }
body[data-theme-folder="butik"] .notif-popup { border-color: var(--a2-ink); border-radius: 0; box-shadow: 0 10px 28px rgba(27, 24, 21, .16); background: var(--a2-card); }
body[data-theme-folder="butik"] .notif-cart-icon { background: var(--a2-ink); border-radius: 0; }
body[data-theme-folder="butik"] .notif-head b { color: var(--bt-kiremit); }
body[data-theme-folder="butik"] .ay2-lb-bg { background: rgba(27, 24, 21, .88); }
body[data-theme-folder="butik"] .ay2-lb-box figcaption { font-family: var(--bt-serif); font-weight: 500; font-size: 17px; }
body[data-theme-folder="butik"] .ay2-toast { background: var(--a2-ink); color: var(--a2-paper); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
body[data-theme-folder="butik"] .ay2-thumb::after, body[data-theme-folder="butik"] .ay2-faq summary i { transition: none; }
}