/* VELOUR — Editöryal butik moda vitrini · store.css Fildişi zemin · espresso tipografi · dusty bordo vurgu + mat altın detay. Keskin köşeler, bol beyaz alan, dergi-vari ızgara, serif display başlık + Jost gövde. Renk/yarıçap/font değişkenleri içindeki :root'tan gelir; burada yalnız tüketilir. */ :root{ --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --ic-zemin:#fbf8f2; --kil:rgba(31,27,24,.12); --kil-ince:rgba(31,27,24,.08); --bos:64px; --bos-yari:32px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;max-width:100%} body{margin:0;font-family:var(--font);background:var(--renk-arkaplan);color:var(--renk-yazi);line-height:1.62;font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;max-width:100vw;position:relative;letter-spacing:.01em} a{color:inherit;text-decoration:none;transition:color .18s ease} img{max-width:100%;height:auto;display:block} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} input,select,textarea{font:inherit;max-width:100%} .kapsayici,.ana,section,header,footer{max-width:100%} *{min-width:0} ::selection{background:var(--renk-birincil);color:#fff} h1,h2,h3,h4,.serif{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.08;color:var(--renk-yazi)} .kapsayici{max-width:var(--gov-genislik);margin:0 auto;padding:0 24px;width:100%} .kapsayici.dar{max-width:780px} .gizle-mobil{display:none} .gizle-masaustu{display:block} /* ---- Eyebrow / küçük-CAPS etiket ritmi ---- */ .eyebrow,.bolum-alt-etiket{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--renk-ikincil);font-family:var(--font)} .kilcal{height:1px;background:var(--kil);border:0;margin:0} /* ---- Butonlar: köşesiz, küçük-CAPS, çizgi/dolgu ---- */ .buton{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:var(--buton-radius);font-family:var(--font);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;transition:.2s ease;border:1px solid transparent;white-space:nowrap;line-height:1} .buton-birincil{background:var(--renk-birincil);color:#fff;border-color:var(--renk-birincil)} .buton-birincil:hover{background:var(--renk-ikincil);border-color:var(--renk-ikincil)} .buton-katmanli{background:transparent;border-color:var(--renk-yazi);color:var(--renk-yazi)} .buton-katmanli:hover{background:var(--renk-yazi);color:var(--renk-arkaplan)} .buton-vurgu{background:var(--renk-vurgu);color:#1f1b18;border-color:var(--renk-vurgu)} .buton-vurgu:hover{filter:brightness(.94)} .buton-blok{width:100%} .buton-buyuk{padding:16px 30px;font-size:13px} .buton-link{color:var(--renk-birincil);font-weight:600;background:none;padding:4px 0;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;border-bottom:1px solid currentColor;border-radius:0} .buton-link:hover{color:var(--renk-ikincil)} .metin-basari{color:var(--renk-basari)!important} .metin-uyari{color:var(--renk-uyari)!important} /* ---- Üst duyuru şeridi ---- */ .ust-serit{background:var(--renk-yazi);color:#e7ddd0;font-size:11.5px;letter-spacing:.08em} .ust-serit-ic{display:flex;justify-content:space-between;align-items:center;padding:9px 24px;gap:18px;flex-wrap:wrap} .ust-serit-sol,.ust-serit-sag{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .ust-serit-sol span,.ust-serit-sag a{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;font-size:11px;letter-spacing:.12em} .ust-serit-sag a:hover{color:#fff} /* ---- Header ---- */ .ust-bar{background:var(--renk-arkaplan);border-bottom:1px solid var(--kil);position:sticky;top:0;z-index:90;width:100%;max-width:100vw} .ust-bar-ic{display:grid;grid-template-columns:auto auto 1fr auto;gap:14px;align-items:center;padding:18px 24px;max-width:var(--gov-genislik);margin:0 auto;width:100%} .ust-bar-ic > *{min-width:0} .menu-tetik{display:flex;padding:8px;flex-shrink:0} .logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:26px;flex-shrink:0;min-width:0;letter-spacing:.02em} .logo img{height:34px;width:auto} .logo-isaret{width:38px;height:38px;background:var(--renk-yazi);color:var(--renk-arkaplan);display:grid;place-items:center;font-family:var(--font-display);font-size:22px;flex-shrink:0} .logo-yazi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.16em;font-size:21px;font-weight:600} .arama-form{display:flex;background:var(--renk-kart);border:1px solid var(--kil);border-radius:0;overflow:hidden;min-width:0} .arama-form input{flex:1;border:0;background:transparent;padding:13px 18px;outline:none;font-size:14px;min-width:0;width:100%;letter-spacing:.02em} .arama-form button{padding:0 18px;background:var(--renk-yazi);color:var(--renk-arkaplan);display:grid;place-items:center;flex-shrink:0;transition:.2s} .arama-form button:hover{background:var(--renk-birincil)} .ust-aksiyonlar{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:nowrap} .aksiyon{display:inline-flex;padding:9px;color:var(--renk-yazi);position:relative;transition:.18s;flex-shrink:0} .aksiyon:hover{color:var(--renk-birincil)} .sepet-aksiyon .rozet{position:absolute;top:-2px;right:-2px;background:var(--renk-birincil);color:#fff;font-size:10px;min-width:18px;height:18px;border-radius:99px;padding:0 5px;display:grid;place-items:center;font-weight:700;letter-spacing:0} /* ---- Kategori menü şeridi ---- */ .kategori-bar{background:var(--renk-arkaplan);border-bottom:1px solid var(--kil);width:100%;max-width:100vw;overflow:hidden} .kategori-bar-ic{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:0 24px;max-width:var(--gov-genislik);margin:0 auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;justify-content:center} .kategori-bar-ic::-webkit-scrollbar{height:3px} .kategori-bar-ic::-webkit-scrollbar-thumb{background:var(--kil);border-radius:0} .kategori-bar a{padding:14px 16px;font-size:11.5px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:.18s;flex-shrink:0;text-transform:uppercase;letter-spacing:.14em;border-bottom:2px solid transparent} .kategori-bar a:hover{color:var(--renk-birincil);border-color:var(--renk-birincil)} .kategori-bar .kampanya{color:var(--renk-uyari)} /* ---- Mobil menü ---- */ .mobil-menu{position:fixed;top:0;left:0;width:90%;max-width:360px;height:100vh;background:var(--renk-arkaplan);z-index:200;overflow-y:auto;transition:transform .3s ease;transform:translateX(-105%);box-shadow:18px 0 60px rgba(31,27,24,.22);visibility:hidden} .mobil-menu.acik{transform:translateX(0);visibility:visible} .mobil-menu-ic{padding:24px} .mobil-menu .kapat{position:absolute;top:14px;right:14px;padding:8px} .mobil-kullanici{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--kil);margin-bottom:16px} .mobil-kategoriler{list-style:none;padding:0;margin:0 0 20px} .mobil-kategoriler li{border-bottom:1px solid var(--kil-ince)} .mobil-kategoriler a{display:block;padding:15px 4px;font-weight:500;font-family:var(--font-display);font-size:19px} .mobil-menu h4{margin:22px 0 10px;font-size:11px;color:var(--renk-yazi-acik);text-transform:uppercase;letter-spacing:.22em;font-weight:600} .ana{min-height:60vh;padding:var(--bos-yari) 0 var(--bos)} /* ---- Flash mesajlar ---- */ .flash{padding:14px 18px;background:var(--renk-yazi);color:var(--renk-arkaplan);text-align:center;font-weight:500;font-size:13px;letter-spacing:.04em} .flash-uyari{background:var(--renk-uyari);color:#fff} .flash-basari{background:var(--renk-basari);color:#fff} /* ---- Breadcrumb + sayfa başlık ---- */ .ekmek-yolu{font-size:11px;color:var(--renk-yazi-acik);padding:16px 0 18px;display:flex;flex-wrap:wrap;gap:8px;text-transform:uppercase;letter-spacing:.14em;align-items:center} .ekmek-yolu a:hover{color:var(--renk-birincil)} .ekmek-yolu .ayrac{opacity:.5} .sayfa-baslik{font-size:38px;margin:6px 0 26px;font-weight:600} .sayfa-baslik small{color:var(--renk-yazi-acik);font-weight:400;font-size:14px;margin-left:10px;font-family:var(--font);letter-spacing:.02em} /* ---- Hero / Lookbook editöryal ---- */ .hero{margin:0 0 var(--bos)} .hero-slayt{position:relative;overflow:hidden;height:560px;background:var(--renk-yazi)} .slayt{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center;opacity:0;transition:opacity .8s ease} .slayt.aktif{opacity:1} .slayt::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,27,24,.55) 0%,rgba(31,27,24,.15) 55%,transparent 100%)} .slayt-icerik{position:relative;z-index:1;color:#fff;max-width:560px;padding:0 56px} .slayt-etiket{display:inline-block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--renk-vurgu);font-weight:600;margin-bottom:18px} .slayt-icerik h1{font-size:60px;line-height:1.04;margin:0 0 16px;font-weight:600;color:#fff;letter-spacing:-.01em} .slayt-icerik p{font-size:16px;opacity:.92;margin:0 0 28px;max-width:440px;line-height:1.6} .hero-noktalar{position:absolute;bottom:24px;left:56px;display:flex;gap:10px;z-index:2} .hero-noktalar button{width:30px;height:2px;background:rgba(255,255,255,.4);padding:0;transition:.25s;border-radius:0} .hero-noktalar button.aktif{background:var(--renk-vurgu)} /* Lookbook çift panel düzeni */ .lookbook{display:grid;grid-template-columns:1fr;gap:2px;margin:0 0 var(--bos)} .lookbook-panel{position:relative;overflow:hidden;min-height:420px;background:var(--renk-yazi);display:flex;align-items:flex-end;background-size:cover;background-position:center} .lookbook-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(31,27,24,.6) 100%)} .lookbook-panel-ic{position:relative;z-index:1;padding:36px;color:#fff} .lookbook-panel .slayt-etiket{margin-bottom:10px} .lookbook-panel h3{font-size:34px;margin:0 0 14px;color:#fff;font-weight:600} /* ---- İnce güvence şeridi (4'lü, kılcal ayrımlı) ---- */ .ozellikler{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0 auto var(--bos);border-top:1px solid var(--kil);border-bottom:1px solid var(--kil)} .ozellik{background:none;border:0;padding:26px 20px;display:flex;align-items:center;gap:16px;color:var(--renk-birincil);position:relative} .ozellik + .ozellik::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--kil)} .ozellik div{color:var(--renk-yazi)} .ozellik b{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase} .ozellik small{color:var(--renk-yazi-acik);font-size:12px;letter-spacing:.02em} /* ---- Bölüm başlıkları ---- */ .bolum{margin:0 auto var(--bos)} .bolum-bas{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 var(--bos-yari);gap:20px;flex-wrap:wrap} .bolum-bas h2{font-size:40px;margin:6px 0 0;font-weight:600} .bolum-tum{font-size:11px;color:var(--renk-yazi);display:inline-flex;align-items:center;gap:8px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;border-bottom:1px solid var(--renk-yazi);padding-bottom:3px;transition:.18s} .bolum-tum:hover{color:var(--renk-birincil);border-color:var(--renk-birincil)} .bolum-alt{display:block;color:var(--renk-yazi-acik);font-size:14px;font-weight:400;margin-top:8px;font-family:var(--font);max-width:520px;letter-spacing:.01em} .merkez-bas{text-align:center;flex-direction:column;align-items:center} .merkez-bas .bolum-alt{margin-left:auto;margin-right:auto} .merkez-bas h2{font-size:42px} /* ---- Koleksiyon ızgarası (kategori kartları) ---- */ .kategori-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .kategori-kart{position:relative;aspect-ratio:3/4;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;color:#fff;background-color:var(--renk-yazi)} .kategori-kart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(31,27,24,.72) 100%);transition:.4s} .kategori-kart:hover::after{background:linear-gradient(180deg,rgba(31,27,24,.25) 0%,rgba(31,27,24,.78) 100%)} .kategori-kart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .kategori-kart:hover img{transform:scale(1.05)} .kategori-kart-ic{position:relative;z-index:1;padding:24px 22px;width:100%} .kategori-kart h3{font-size:24px;margin:0 0 6px;font-weight:600;color:#fff} .kategori-kart span{font-size:11px;opacity:.92;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.16em;font-weight:600} /* ---- Dergi-vari ürün ızgarası ---- */ .urun-izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 16px} .urun-kart{background:transparent;border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;transition:.2s ease;position:relative} .urun-link{display:flex;flex-direction:column;height:100%} .urun-gorsel{position:relative;aspect-ratio:3/4;background:var(--ic-zemin);overflow:hidden} .urun-gorsel img{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease,transform .7s ease} .urun-gorsel .ikincil-gorsel{position:absolute;inset:0;opacity:0} .urun-kart:hover .urun-gorsel .birincil-gorsel{opacity:0} .urun-kart:hover .urun-gorsel .ikincil-gorsel{opacity:1} .urun-kart:hover .urun-gorsel img:only-child{transform:scale(1.05)} .indirim-rozet{position:absolute;top:14px;left:14px;background:var(--renk-birincil);color:#fff;padding:5px 10px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;z-index:2} .indirim-rozet.buyuk{font-size:13px;padding:7px 13px} .yeni-rozet{position:absolute;top:14px;right:14px;background:var(--renk-arkaplan);color:var(--renk-yazi);padding:5px 10px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;z-index:2} .favori-mini{position:absolute;bottom:14px;right:14px;background:var(--renk-arkaplan);width:38px;height:38px;display:grid;place-items:center;color:var(--renk-yazi-acik);box-shadow:0 6px 18px rgba(31,27,24,.12);transition:.18s;opacity:0;z-index:2} .urun-kart:hover .favori-mini{opacity:1} .favori-mini:hover{color:var(--renk-birincil)} .favori-mini.aktif{color:var(--renk-birincil);opacity:1} .urun-bilgi{padding:16px 2px 4px;flex:1;display:flex;flex-direction:column;gap:5px} .urun-marka{font-size:10.5px;color:var(--renk-yazi-acik);text-transform:uppercase;letter-spacing:.18em;font-weight:600} .urun-ad{font-size:18px;margin:1px 0;font-weight:500;font-family:var(--font-display);color:var(--renk-yazi);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:0} .urun-puan{display:flex;align-items:center;gap:4px;color:var(--renk-vurgu);font-size:12px;font-weight:600} .urun-puan small{color:var(--renk-yazi-acik);font-weight:400;font-family:var(--font)} .urun-renk-mini{display:flex;gap:5px;margin-top:2px} .urun-renk-mini i{width:13px;height:13px;border-radius:50%;border:1px solid var(--kil);display:inline-block} .urun-fiyat-blok{margin-top:auto;display:flex;align-items:baseline;gap:10px;padding-top:8px;flex-wrap:wrap} .urun-fiyat-blok .eski{font-size:13px;color:var(--renk-yazi-acik);text-decoration:line-through;order:2} .urun-fiyat-blok .guncel{font-size:16px;font-weight:600;color:var(--renk-yazi);letter-spacing:.01em} .urun-fiyat-blok .guncel.indirimli{color:var(--renk-birincil)} .urun-sepet{margin:12px 0 0;font-size:11px;padding:12px} /* ---- Orta editöryal banner ---- */ .orta-banner{position:relative;display:flex;align-items:center;overflow:hidden;background-size:cover;background-position:center;color:#fff;padding:64px 48px;min-height:340px;background-color:var(--renk-yazi)} .orta-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,27,24,.6),transparent)} .orta-banner > *{position:relative;z-index:1} .orta-banner .slayt-etiket{margin-bottom:14px} .orta-banner h2{font-size:44px;margin:0 0 10px;font-weight:600;color:#fff;max-width:520px} .orta-banner p{margin:0 0 24px;opacity:.92;max-width:440px} /* ---- Kategori sayfa başlık ---- */ .kategori-bas{padding:8px 0 var(--bos-yari);text-align:center} .kategori-bas .eyebrow{margin-bottom:12px} .kategori-bas h1{font-size:46px;margin:0 0 12px;font-weight:600} .kategori-bas p{color:var(--renk-yazi-acik);margin:0 auto;max-width:600px;line-height:1.6} .kategori-istatistik{margin-top:14px;font-size:11px;color:var(--renk-yazi-acik);text-transform:uppercase;letter-spacing:.16em} .alt-kategori-pill{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--bos-yari);justify-content:center} .alt-kategori-pill a{padding:9px 18px;background:transparent;border:1px solid var(--kil);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;transition:.18s} .alt-kategori-pill a:hover,.alt-kategori-pill a.aktif{border-color:var(--renk-yazi);background:var(--renk-yazi);color:var(--renk-arkaplan)} /* ---- Liste düzeni + filtre ---- */ .liste-duzen{display:grid;grid-template-columns:1fr;gap:28px} .filtre-yan{background:var(--renk-arkaplan);border:0;padding:0;position:fixed;top:0;left:0;width:90%;max-width:360px;height:100vh;z-index:200;transition:transform .3s ease;transform:translateX(-105%);overflow-y:auto;visibility:hidden;box-shadow:18px 0 60px rgba(31,27,24,.22)} .filtre-yan.acik{transform:translateX(0);visibility:visible} .filtre-yan h4{margin:26px 0 12px;font-size:11px;font-family:var(--font);font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--renk-yazi);padding-bottom:8px;border-bottom:1px solid var(--kil)} .filtre-yan h4:first-of-type{margin-top:0} .filtre-form input,.filtre-form select{width:100%;padding:11px 14px;border:1px solid var(--kil);border-radius:0;background:var(--renk-kart);margin-bottom:10px;outline:none;font-size:14px} .filtre-form input:focus,.filtre-form select:focus{border-color:var(--renk-yazi)} .filtre-form label{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;cursor:pointer} .filtre-yan .kapat{position:absolute;top:18px;right:18px;padding:8px} .alan-cifti{display:grid;grid-template-columns:1fr 1fr;gap:10px} .alan-uclu{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .liste-ust{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--kil)} .liste-ust .sonuc-say{font-size:11px;color:var(--renk-yazi-acik);text-transform:uppercase;letter-spacing:.14em} .sirala select{padding:10px 14px;border:1px solid var(--kil);border-radius:0;background:var(--renk-kart);font-size:13px;outline:none;text-transform:uppercase;letter-spacing:.08em} /* ---- Ürün detay ---- */ .urun-detay{display:grid;grid-template-columns:1fr;gap:36px;margin:0 0 var(--bos)} .ana-gorsel{position:relative;overflow:hidden;background:var(--ic-zemin);aspect-ratio:3/4} .ana-gorsel img{width:100%;height:100%;object-fit:cover} .kucuk-gorseller{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px} .kucuk-resim{flex:0 0 78px;overflow:hidden;border:1px solid var(--kil);background:var(--renk-kart);padding:0;transition:.18s} .kucuk-resim.aktif{border-color:var(--renk-yazi)} .kucuk-resim img{aspect-ratio:3/4;object-fit:cover} .marka-link{font-size:11px;color:var(--renk-ikincil);text-transform:uppercase;letter-spacing:.18em;font-weight:600;display:inline-block;margin-bottom:6px} .urun-yan h1{font-size:40px;margin:6px 0 10px;font-weight:600;line-height:1.06} .urun-puan.buyuk{font-size:13px;color:var(--renk-yazi-acik);margin:8px 0 16px;display:flex;align-items:center;gap:3px} .urun-puan.buyuk span{color:var(--kil)} .urun-puan.buyuk span.dolu{color:var(--renk-vurgu)} .urun-fiyat-blok.buyuk{flex-direction:row;align-items:baseline;gap:16px;margin:18px 0;flex-wrap:wrap;padding-top:0} .urun-fiyat-blok.buyuk .guncel{font-size:34px;font-weight:600;font-family:var(--font-display)} .urun-fiyat-blok.buyuk .eski{font-size:19px} .indirim-yuzde{background:var(--renk-birincil);color:#fff;font-weight:600;padding:5px 11px;font-size:11px;letter-spacing:.1em;text-transform:uppercase} .kisa{color:var(--renk-yazi-acik);margin:14px 0 22px;font-size:15px;line-height:1.65} .urun-form{display:flex;flex-direction:column;gap:24px} /* Varyant: beden çipleri + renk swatch */ .varyant-grup{display:flex;flex-direction:column;gap:10px} .varyant-grup > .varyant-bas{display:flex;justify-content:space-between;align-items:center} .varyant-grup label.varyant-baslik{font-family:var(--font);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--renk-yazi);margin:0} .varyant-grup label{font-family:var(--font);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--renk-yazi);display:block;margin-bottom:2px} .beden-tablo-ac{font-size:11px;color:var(--renk-yazi-acik);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--kil);padding-bottom:2px;background:none} .beden-tablo-ac:hover{color:var(--renk-birincil)} .varyant-secenek{display:flex;flex-wrap:wrap;gap:10px} /* beden çipleri */ .beden-cip,.vrad{position:relative} .beden-cip input,.vrad input{position:absolute;opacity:0;width:0;height:0} .beden-cip span,.vrad span{display:inline-grid;place-items:center;min-width:52px;height:48px;padding:0 12px;border:1px solid var(--kil);background:var(--renk-kart);font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:.16s;color:var(--renk-yazi);text-transform:uppercase} .beden-cip span:hover,.vrad span:hover{border-color:var(--renk-yazi)} .beden-cip input:checked + span,.vrad input:checked + span{border-color:var(--renk-yazi);background:var(--renk-yazi);color:var(--renk-arkaplan)} .beden-cip input:disabled + span{opacity:.4;cursor:not-allowed;text-decoration:line-through} /* renk swatch */ .renk-swatch{position:relative;width:40px;height:40px} .renk-swatch input{position:absolute;opacity:0;width:0;height:0} .renk-swatch span{display:block;width:40px;height:40px;border-radius:50%;cursor:pointer;border:1px solid var(--kil);box-shadow:inset 0 0 0 3px var(--renk-kart);transition:.16s} .renk-swatch input:checked + span{box-shadow:inset 0 0 0 3px var(--renk-kart),0 0 0 1.5px var(--renk-yazi)} .renk-swatch input:disabled + span{opacity:.35;cursor:not-allowed} .renk-swatch .swatch-ad{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:var(--renk-yazi-acik);opacity:0;transition:.16s} .renk-swatch:hover .swatch-ad,.renk-swatch input:checked ~ .swatch-ad{opacity:1} .adet-blok{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .adet-blok > label{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em} .adet-arttir{display:flex;align-items:center;border:1px solid var(--kil);border-radius:0;overflow:hidden;background:var(--renk-kart)} .adet-arttir button{padding:12px 16px;background:var(--renk-kart);transition:.15s} .adet-arttir button:hover{background:var(--ic-zemin)} .adet-arttir input{width:54px;text-align:center;border:0;border-left:1px solid var(--kil);border-right:1px solid var(--kil);padding:12px 0;font-weight:600;outline:none;background:var(--renk-kart)} .stok-bilgi{font-size:12px;color:var(--renk-basari);font-weight:600;text-transform:uppercase;letter-spacing:.08em} .stok-bilgi.az{color:var(--renk-uyari)} .aksiyon-blok{display:flex;gap:12px;align-items:stretch} .aksiyon-blok .buton-buyuk{flex:1} .urun-favoriye{padding:0 20px;border:1px solid var(--renk-yazi);border-radius:var(--buton-radius);background:transparent;display:grid;place-items:center;transition:.18s} .urun-favoriye:hover{background:var(--renk-yazi);color:var(--renk-arkaplan)} .urun-favoriye.aktif{color:#fff;background:var(--renk-birincil);border-color:var(--renk-birincil)} .urun-guvence{list-style:none;padding:22px 0 0;margin:24px 0 0;border-top:1px solid var(--kil);display:flex;flex-direction:column;gap:14px;font-size:13px} .urun-guvence li{display:flex;align-items:center;gap:12px;color:var(--renk-yazi)} .urun-guvence li svg{color:var(--renk-ikincil);flex-shrink:0} /* ---- Sekmeler (açıklama/özellik/yorum) ---- */ .sekmeler{margin:0 0 var(--bos)} .sekme-bar{display:flex;gap:32px;border-bottom:1px solid var(--kil);margin-bottom:28px;overflow-x:auto} .sekme-bar button{padding:16px 0;font-family:var(--font);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.16em;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--renk-yazi-acik);white-space:nowrap;background:none} .sekme-bar button.aktif{color:var(--renk-yazi);border-color:var(--renk-yazi)} .sekme-icerik{display:none;padding:0;line-height:1.75;font-size:15px;color:var(--renk-yazi)} .sekme-icerik.aktif{display:block} .detay-tablo{width:100%;border-collapse:collapse} .detay-tablo th{text-align:left;padding:12px 0;color:var(--renk-yazi-acik);font-weight:500;width:200px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;vertical-align:top} .detay-tablo td{padding:12px 0;border-bottom:1px solid var(--kil-ince);font-weight:500} .yorum-form{padding:24px;background:var(--ic-zemin);border:1px solid var(--kil);margin-bottom:28px} .yorum-form h4{margin:0 0 16px;font-size:22px} .yorum-form input,.yorum-form textarea{width:100%;padding:12px 14px;border:1px solid var(--kil);border-radius:0;margin-bottom:12px;background:var(--renk-kart);outline:none} .yorum-form input:focus,.yorum-form textarea:focus{border-color:var(--renk-yazi)} .puan-secim{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-bottom:12px} .puan-secim input{position:absolute;opacity:0} .puan-secim label{color:var(--kil);cursor:pointer;padding:0 2px;font-size:22px} .puan-secim label:hover,.puan-secim label:hover ~ label,.puan-secim input:checked ~ label{color:var(--renk-vurgu)} .yorum{padding:24px 0;border-bottom:1px solid var(--kil-ince)} .yorum-bas{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap} .yorum-yildiz{display:flex;color:var(--kil)} .yorum-yildiz .dolu{color:var(--renk-vurgu)} .yorum h5{margin:8px 0 4px;font-family:var(--font-display);font-size:18px;font-weight:600} .yorum p{color:var(--renk-yazi);font-size:14.5px;margin:0;line-height:1.7} .bilgi-kutu{padding:18px;background:var(--ic-zemin);border:1px solid var(--kil);font-size:14px;line-height:1.7} .bos-mini{color:var(--renk-yazi-acik);text-align:center;padding:40px 0} /* ---- Boş durum / 404 ---- */ .bos-durum{padding:80px 20px;text-align:center;color:var(--renk-yazi-acik)} .bos-durum.buyuk{padding:100px 24px;background:var(--renk-kart);border:1px solid var(--kil)} .bos-durum h3{margin:18px 0 8px;color:var(--renk-yazi);font-size:28px} .bos-durum p{margin:0 0 24px} .dort-yuz{font-size:120px;font-weight:600;color:var(--renk-yazi);line-height:1;font-family:var(--font-display)} /* ---- Sayfalama ---- */ .sayfalama{display:flex;gap:8px;justify-content:center;margin:var(--bos) 0 0;align-items:center} .sayfalama a{min-width:46px;height:46px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--kil);border-radius:0;background:transparent;font-weight:600;font-size:13px;transition:.16s} .sayfalama a.aktif{background:var(--renk-yazi);color:var(--renk-arkaplan);border-color:var(--renk-yazi)} .sayfalama a:hover:not(.aktif){border-color:var(--renk-yazi)} .sayfalama .nokta{border:0;background:none} /* ---- Sepet ---- */ .sepet-duzen{display:grid;grid-template-columns:1fr;gap:28px} .sepet-liste{background:transparent;border:0;padding:0} .sepet-satir{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:24px 0;border-bottom:1px solid var(--kil);align-items:center;position:relative} .sepet-satir:first-child{border-top:1px solid var(--kil)} .sepet-gorsel{width:96px;aspect-ratio:3/4;overflow:hidden;background:var(--ic-zemin)} .sepet-gorsel img{width:100%;height:100%;object-fit:cover} .sepet-bilgi h3{font-size:18px;margin:0 0 4px;font-weight:500;font-family:var(--font-display)} .sepet-bilgi small{color:var(--renk-yazi-acik);font-size:12px;text-transform:uppercase;letter-spacing:.06em} .sepet-bilgi .varyant-etiket{display:inline-flex;gap:8px;margin-top:4px;font-size:12px;color:var(--renk-yazi-acik)} .sepet-fiyat-mini{margin-top:8px;font-weight:600;color:var(--renk-yazi)} .sepet-adet{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:8px} .sepet-tutar{display:none} .sepet-sil{position:absolute;top:24px;right:0;color:var(--renk-yazi-acik);padding:6px;transition:.15s} .sepet-sil:hover{color:var(--renk-uyari)} .sepet-alt-aksiyon{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:14px} .sepet-ozet{background:var(--ic-zemin);border:1px solid var(--kil);padding:28px;align-self:start;position:sticky;top:104px} .sepet-ozet h3{margin:0 0 18px;font-size:24px} .ozet-satir{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;color:var(--renk-yazi-acik)} .ozet-satir b{color:var(--renk-yazi)} .ozet-satir.buyuk{font-size:20px;font-weight:600;color:var(--renk-yazi);padding-top:18px;margin-top:8px;border-top:1px solid var(--kil);font-family:var(--font-display)} .ozet-satir.buyuk b{color:var(--renk-yazi)} .kupon-form{display:flex;gap:8px;margin:16px 0} .kupon-form input{flex:1;padding:12px 14px;border:1px solid var(--kil);border-radius:0;outline:none;background:var(--renk-kart);text-transform:uppercase;letter-spacing:.06em;font-size:13px} .kupon-form input:focus{border-color:var(--renk-yazi)} .mini-guvence{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--kil);font-size:12px;color:var(--renk-yazi-acik);display:flex;flex-direction:column;gap:10px} .mini-guvence li{display:flex;gap:9px;align-items:center} /* ---- Checkout adımları ---- */ .odeme-adimlar{display:flex;align-items:center;justify-content:center;gap:0;margin:0 0 var(--bos-yari);flex-wrap:wrap} .odeme-adim{display:flex;align-items:center;gap:10px;color:var(--renk-yazi-acik);font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:600} .odeme-adim .num{width:28px;height:28px;border:1px solid var(--kil);border-radius:50%;display:grid;place-items:center;font-size:12px;font-family:var(--font-display);font-weight:600} .odeme-adim.aktif{color:var(--renk-yazi)} .odeme-adim.aktif .num{background:var(--renk-yazi);color:var(--renk-arkaplan);border-color:var(--renk-yazi)} .odeme-adim.tamam .num{background:var(--renk-basari);color:#fff;border-color:var(--renk-basari)} .odeme-adim-cizgi{width:48px;height:1px;background:var(--kil);margin:0 14px} .odeme-duzen{display:grid;grid-template-columns:1fr;gap:28px} .odeme-sutun{display:flex;flex-direction:column;gap:24px} .kart-blok{background:var(--renk-kart);border:1px solid var(--kil);padding:28px} .kart-blok h3{margin:0 0 20px;font-size:24px} .kart-blok input,.kart-blok textarea,.kart-blok select{width:100%;padding:13px 16px;border:1px solid var(--kil);border-radius:0;outline:none;margin-bottom:12px;background:var(--renk-arkaplan);font-size:14px} .kart-blok input:focus,.kart-blok textarea:focus,.kart-blok select:focus{border-color:var(--renk-yazi)} .kart-blok label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--renk-yazi-acik);font-weight:600;display:block;margin-bottom:6px} .kayit-adres{margin-bottom:14px} .secim-liste{display:flex;flex-direction:column;gap:12px} .secim-kart{display:grid;grid-template-columns:auto 1fr auto;gap:16px;padding:18px;border:1px solid var(--kil);border-radius:0;cursor:pointer;transition:.16s;background:var(--renk-arkaplan)} .secim-kart:hover{border-color:var(--renk-yazi)} .secim-kart:has(input:checked){border-color:var(--renk-yazi);background:var(--ic-zemin)} .secim-kart input{margin:0;align-self:start;width:auto;accent-color:var(--renk-yazi)} .secim-kart b{display:block;margin-bottom:3px;font-family:var(--font-display);font-size:18px;font-weight:600} .secim-kart small{color:var(--renk-yazi-acik);font-size:13px;display:block} .secim-kart span{font-weight:600;align-self:center;color:var(--renk-yazi);font-size:15px} .havale-detay{margin-top:10px;padding:12px 14px;background:var(--ic-zemin);border:1px solid var(--kil);font-size:12.5px;font-family:'Courier New',monospace;line-height:1.7} .odeme-ozet{background:var(--ic-zemin);border:1px solid var(--kil);padding:28px;align-self:start;position:sticky;top:104px} .odeme-ozet h3{margin:0 0 18px;font-size:24px} .ozet-urunler{display:flex;flex-direction:column;gap:14px;max-height:360px;overflow-y:auto;padding-bottom:4px} .ozet-urun{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;font-size:13px} .oz-gorsel{position:relative;width:56px;aspect-ratio:3/4;overflow:hidden;background:var(--renk-kart)} .oz-gorsel img{width:100%;height:100%;object-fit:cover} .oz-gorsel span{position:absolute;top:-6px;right:-6px;background:var(--renk-yazi);color:var(--renk-arkaplan);font-size:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:600} .oz-bilgi b{font-size:13.5px;font-weight:500;font-family:var(--font-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .oz-bilgi small{color:var(--renk-yazi-acik);font-size:11px} .oz-fiyat{font-weight:600;font-size:13px;color:var(--renk-yazi)} .sozlesme{display:flex;gap:10px;font-size:13px;margin:16px 0;color:var(--renk-yazi-acik);align-items:flex-start} .sozlesme input{margin-top:3px;accent-color:var(--renk-yazi)} .sozlesme a{color:var(--renk-birincil);text-decoration:underline} /* ---- Sipariş başarı ---- */ .basari-kutu{background:var(--renk-kart);border:1px solid var(--kil);padding:56px 32px;text-align:center;max-width:720px;margin:var(--bos-yari) auto} .basari-ikon{width:84px;height:84px;border-radius:50%;background:var(--renk-basari);color:#fff;display:grid;place-items:center;font-size:42px;margin:0 auto 24px;font-weight:300} .basari-kutu h1{margin:0 0 8px;font-size:36px} .basari-kutu p{margin:6px 0;color:var(--renk-yazi-acik)} .siparis-ozet-kutu{margin:32px 0;text-align:left;background:var(--ic-zemin);border:1px solid var(--kil);padding:24px} .siparis-ozet-kutu table{width:100%;border-collapse:collapse;font-size:14px} .siparis-ozet-kutu td{padding:10px 6px;border-bottom:1px solid var(--kil-ince)} .siparis-ozet-kutu .sag{text-align:right} .siparis-ozet-kutu .toplam-satir td{font-size:18px;border-bottom:0;padding-top:18px;font-family:var(--font-display);font-weight:600} .mini-resim{width:46px;aspect-ratio:3/4;object-fit:cover;vertical-align:middle} .merkez{text-align:center;margin:18px 0} .aksiyon-blok.merkezde{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---- Auth (giriş / kayıt / doğrulama) ---- */ .auth-kart{background:var(--renk-kart);border:1px solid var(--kil);padding:48px 36px;margin:var(--bos-yari) auto;text-align:center;max-width:480px} .auth-kart .eyebrow{margin-bottom:14px} .auth-kart h1{margin:0 0 8px;font-size:36px} .auth-kart .alt{margin:0 0 28px;color:var(--renk-yazi-acik)} .auth-form{text-align:left;display:flex;flex-direction:column;gap:14px} .auth-form label{font-size:11px;color:var(--renk-yazi-acik);font-weight:600;display:block;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px} .auth-form input,.auth-form select,.auth-form textarea{width:100%;padding:13px 16px;border:1px solid var(--kil);border-radius:0;outline:none;background:var(--renk-arkaplan);font-size:14px} .auth-form input:focus,.auth-form select:focus{border-color:var(--renk-yazi)} .form-katlama{margin-top:22px;padding:18px;background:var(--ic-zemin);border:1px solid var(--kil)} .form-katlama summary{cursor:pointer;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em} /* ---- Hesap paneli ---- */ .hesap-duzen{display:grid;grid-template-columns:1fr;gap:28px} .hesap-yan{display:flex;flex-direction:column;gap:2px;background:transparent;border:0;padding:0} .hesap-yan a{padding:14px 16px;font-weight:600;font-size:12px;display:flex;align-items:center;gap:12px;color:var(--renk-yazi-acik);text-transform:uppercase;letter-spacing:.12em;border-left:2px solid transparent;transition:.16s} .hesap-yan a.aktif{color:var(--renk-yazi);border-color:var(--renk-yazi);background:var(--ic-zemin)} .hesap-yan a:hover:not(.aktif){color:var(--renk-yazi)} .hesap-icerik{display:flex;flex-direction:column;gap:24px} .hesap-istatistik{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .ist-kutu{background:var(--renk-kart);border:1px solid var(--kil);padding:24px;text-align:center} .ist-kutu b{display:block;font-size:34px;color:var(--renk-yazi);font-weight:600;font-family:var(--font-display)} .ist-kutu small{color:var(--renk-yazi-acik);font-size:11px;text-transform:uppercase;letter-spacing:.12em} .adres-liste{display:flex;flex-direction:column;gap:14px} .adres-kart{padding:22px;background:var(--renk-kart);border:1px solid var(--kil);position:relative} .adres-kart b{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:18px;font-weight:600} .adres-kart p{margin:3px 0;font-size:14px;color:var(--renk-yazi-acik)} .pill{display:inline-block;background:var(--renk-vurgu);color:#1f1b18;font-size:10px;padding:3px 9px;border-radius:0;margin-left:8px;font-weight:600;letter-spacing:.1em;vertical-align:middle;text-transform:uppercase} /* ---- Tablolar ---- */ .tablo{width:100%;border-collapse:collapse;font-size:14px} .tablo th{text-align:left;padding:14px 10px;color:var(--renk-yazi-acik);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;border-bottom:1px solid var(--kil)} .tablo td{padding:16px 10px;border-bottom:1px solid var(--kil-ince)} .tablo td.sag{text-align:right} .durum{display:inline-block;padding:5px 12px;border-radius:0;font-size:10.5px;font-weight:600;background:var(--ic-zemin);color:var(--renk-yazi);text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--kil)} .durum.durum-aktif,.durum.durum-onaylandi,.durum.durum-teslim_edildi,.durum.durum-odendi{background:#eaf2ec;color:var(--renk-basari);border-color:#cfe0d4} .durum.durum-pasif,.durum.durum-iptal,.durum.durum-basarisiz{background:#f6e9e6;color:var(--renk-uyari);border-color:#e8cfc8} .durum.durum-beklemede,.durum.durum-dogrulama_bekliyor,.durum.durum-odeme_bekliyor{background:#f7f0e2;color:#9a7b34;border-color:#e8dcc2} .durum.durum-kargoda,.durum.durum-hazirlaniyor{background:#f1ecf0;color:var(--renk-ikincil);border-color:#e0d2dc} .siparis-bas{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px} .siparis-bas h3{margin:0;font-size:22px} .siparis-ozet-mini{margin-top:18px;padding-top:18px;border-top:1px solid var(--kil)} .siparis-ozet-mini div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--renk-yazi-acik)} .siparis-ozet-mini div b{color:var(--renk-yazi)} .siparis-ozet-mini div.buyuk{padding-top:12px;border-top:1px solid var(--kil);margin-top:6px;font-size:19px;font-weight:600;font-family:var(--font-display);color:var(--renk-yazi)} /* ---- İçerik / yasal sayfalar ---- */ .sayfa-icerik{background:transparent;border:0;padding:0;margin:0 0 var(--bos);max-width:780px} .sayfa-icerik h1{margin:0 0 18px;font-size:46px;font-weight:600} .metin-blok{color:var(--renk-yazi);line-height:1.85;font-size:16px} .metin-blok h2,.metin-blok h3{margin:36px 0 12px;font-weight:600} .metin-blok h2{font-size:28px} .metin-blok h3{font-size:22px} .metin-blok p{margin:0 0 16px} .metin-blok a{color:var(--renk-birincil);text-decoration:underline} /* ---- Bülten ---- */ .bulten{background:var(--renk-yazi);color:var(--renk-arkaplan);padding:64px 0;margin-top:var(--bos)} .bulten-ic{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;text-align:center} .bulten .eyebrow{color:var(--renk-vurgu)} .bulten h3{margin:10px 0 6px;font-size:40px;color:var(--renk-arkaplan);font-weight:600} .bulten p{margin:0;opacity:.8} .bulten-form{display:flex;gap:0;flex-wrap:wrap;max-width:480px;margin:0 auto;border:1px solid rgba(251,248,242,.3)} .bulten-form input{flex:1;min-width:200px;padding:15px 18px;border-radius:0;border:0;outline:none;background:transparent;color:var(--renk-arkaplan);font-size:14px} .bulten-form input::placeholder{color:rgba(251,248,242,.5)} .bulten-form .buton{border-radius:0} /* ---- Footer ---- */ .alt-bar{background:var(--renk-yazi);color:#cabeb0;margin-top:0;padding:var(--bos) 0 0;font-size:14px} .alt-bar-ic{display:grid;grid-template-columns:1fr;gap:36px} .alt-blok h4{color:var(--renk-arkaplan);margin:0 0 16px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-family:var(--font);font-weight:600} .alt-blok .logo{color:var(--renk-arkaplan);font-size:28px;margin-bottom:14px} .alt-blok p{color:#9a8e80;line-height:1.7;font-size:13.5px} .alt-blok ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .alt-blok ul li a{color:#cabeb0;font-size:13.5px} .alt-blok ul li a:hover{color:var(--renk-arkaplan)} .sosyal{display:flex;gap:10px;margin-top:18px} .sosyal a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(251,248,242,.2);border-radius:50%;color:#cabeb0;transition:.18s} .sosyal a:hover{background:var(--renk-arkaplan);border-color:var(--renk-arkaplan);color:var(--renk-yazi)} .iletisim-liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .iletisim-liste li{display:flex;gap:10px;align-items:center;color:#cabeb0;font-size:13.5px} .alt-serit{background:#181512;margin-top:var(--bos-yari);padding:20px 0;font-size:12px;color:#9a8e80} .alt-serit-ic{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .odeme-rozetler{display:flex;gap:8px;flex-wrap:wrap} .odeme-rozetler span{padding:5px 11px;background:rgba(251,248,242,.06);border:1px solid rgba(251,248,242,.12);font-weight:600;letter-spacing:.08em;color:#cabeb0;font-size:10.5px;text-transform:uppercase} /* ---- WhatsApp / sabit butonlar ---- */ .wp-buton{position:fixed;bottom:24px;right:24px;width:54px;height:54px;background:#25d366;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.4);z-index:100} .wp-buton:hover{filter:brightness(1.05)} /* ---- Flaş indirim sayacı ---- */ .flas-sayac{margin:18px 0;padding:18px 20px;background:var(--ic-zemin);border:1px solid var(--kil);border-left:3px solid var(--renk-birincil)} .flas-etiket{display:inline-block;background:var(--renk-birincil);color:#fff;padding:4px 11px;border-radius:0;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px} .sayac-blok{display:flex;gap:10px} .sayac-blok > div{flex:1;background:var(--renk-yazi);color:var(--renk-arkaplan);padding:12px 6px;text-align:center} .sayac-blok b{display:block;font-size:26px;font-weight:600;line-height:1;font-family:var(--font-display)} .sayac-blok small{font-size:10px;text-transform:uppercase;opacity:.75;letter-spacing:.1em;margin-top:4px;display:block} /* ---- Stok bitti / geri bildirim kutusu ---- */ .stok-bitti-kutu{background:var(--ic-zemin);border:1px solid var(--kil);border-left:3px solid var(--renk-uyari);padding:18px 20px;margin-bottom:18px} .stok-bitti-kutu h4{margin:0 0 8px;color:var(--renk-uyari);font-family:var(--font-display);font-size:20px} .stok-bitti-kutu p{margin:0 0 12px;font-size:13.5px;color:var(--renk-yazi-acik)} /* ---- SSS ---- */ .soru-blok{padding:22px 0;border-bottom:1px solid var(--kil-ince)} .soru-bas,.cevap-blok{display:grid;grid-template-columns:40px 1fr;gap:14px;margin-bottom:12px} .soru-ikon,.cevap-ikon{width:40px;height:40px;border-radius:50%;background:var(--ic-zemin);border:1px solid var(--kil);color:var(--renk-yazi);display:grid;place-items:center;font-weight:600;font-size:15px;font-family:var(--font-display)} .cevap-ikon{background:var(--renk-yazi);color:var(--renk-arkaplan);border-color:var(--renk-yazi)} .cevap-blok{padding-left:18px;background:var(--ic-zemin);border:1px solid var(--kil);padding:16px;margin-left:54px} .soru-blok p{margin:6px 0 0;font-size:14.5px} .soru-blok h4{margin:0;font-family:var(--font-display);font-size:20px;font-weight:600;align-self:center} /* ---- Dil dropdown ---- */ .dropdown-mini{position:relative;display:inline-block} .dropdown-mini > button.dil-buton{display:inline-flex;align-items:center;gap:5px;padding:9px 11px;background:transparent;border:1px solid var(--kil);color:var(--renk-yazi);font-size:11px;font-weight:600;cursor:pointer;border-radius:0;line-height:1;transition:.16s;flex-shrink:0;text-transform:uppercase;letter-spacing:.08em} .dropdown-mini > button.dil-buton:hover{border-color:var(--renk-yazi)} .dropdown-mini > button.dil-buton svg{opacity:.6} .dropdown-mini ul{position:absolute;top:calc(100% + 8px);right:0;background:var(--renk-kart);color:var(--renk-yazi);list-style:none;padding:8px;margin:0;border-radius:0;box-shadow:0 18px 48px rgba(31,27,24,.16);border:1px solid var(--kil);min-width:190px;display:none;z-index:50} .dropdown-mini:hover ul,.dropdown-mini:focus-within ul{display:block} .dropdown-mini li a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:0;font-size:13px;color:var(--renk-yazi)} .dropdown-mini li a:hover{background:var(--ic-zemin);color:var(--renk-birincil)} .dropdown-mini li a b{min-width:26px;font-weight:600;color:var(--renk-ikincil)} /* ---- Bakım perdesi ---- */ .bakim-perdesi{position:fixed;inset:0;background:var(--renk-yazi);color:var(--renk-arkaplan);display:grid;place-items:center;z-index:9999;padding:24px} .bakim-kart{text-align:center;max-width:520px} .bakim-kart h1{font-size:48px;margin:0 0 12px;color:var(--renk-arkaplan)} .bakim-kart p{opacity:.8;font-size:17px;line-height:1.6} /* ---- Mobil alt navigasyon ---- */ .mobil-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--renk-arkaplan);border-top:1px solid var(--kil);z-index:90;padding:6px 0 max(6px, env(safe-area-inset-bottom));display:none;grid-template-columns:repeat(5,1fr);box-shadow:0 -6px 24px rgba(31,27,24,.06)} .mobil-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;font-size:9.5px;color:var(--renk-yazi-acik);font-weight:600;position:relative;text-transform:uppercase;letter-spacing:.06em} .mobil-bottom-nav a.aktif{color:var(--renk-yazi)} .mobil-bottom-nav a svg{width:22px;height:22px} .mobil-bottom-nav .rozet{position:absolute;top:2px;right:50%;transform:translateX(14px);background:var(--renk-birincil);color:#fff;font-size:9px;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px;font-weight:700} /* ---- Mobil sabit ürün CTA ---- */ .sticky-urun-cta{position:fixed;bottom:62px;left:0;right:0;background:var(--renk-arkaplan);border-top:1px solid var(--kil);padding:12px 16px;display:none;gap:12px;align-items:center;z-index:80;box-shadow:0 -6px 20px rgba(31,27,24,.08)} .sticky-urun-cta .fiyat{flex:1} .sticky-urun-cta .fiyat b{font-size:19px;display:block;color:var(--renk-yazi);font-family:var(--font-display);font-weight:600} .sticky-urun-cta .fiyat s{font-size:12px;color:var(--renk-yazi-acik)} .sticky-urun-cta .buton{flex:1.2;padding:14px} /* ---- Canlı destek widget ---- */ .chat-widget{position:fixed;bottom:24px;right:24px;z-index:95} .chat-tetik{background:var(--renk-yazi);color:var(--renk-arkaplan);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 28px rgba(31,27,24,.3);position:relative;cursor:pointer;transition:.2s} .chat-tetik:hover{background:var(--renk-birincil)} .chat-panel{position:fixed;bottom:90px;right:24px;width:350px;max-width:calc(100vw - 40px);max-height:540px;background:var(--renk-arkaplan);border-radius:0;box-shadow:0 28px 60px rgba(31,27,24,.2);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--kil)} .chat-panel[hidden]{display:none!important} .chat-bas{background:var(--renk-yazi);color:var(--renk-arkaplan);padding:16px 20px;display:flex;justify-content:space-between;align-items:center} .chat-bas b{font-family:var(--font-display);font-size:18px} .chat-bas small{display:block;font-size:11px;opacity:.8} .chat-kapat{color:var(--renk-arkaplan);font-size:26px;line-height:1;background:none;padding:0;width:30px} .chat-govde{flex:1;overflow-y:auto;padding:16px;background:var(--ic-zemin);min-height:200px;max-height:340px} .chat-karsilama{background:var(--renk-kart);padding:14px;border:1px solid var(--kil);font-size:13.5px;color:var(--renk-yazi);line-height:1.6} .chat-mesaj{padding:11px 14px;background:var(--renk-kart);border:1px solid var(--kil);margin-bottom:10px;font-size:13.5px;max-width:85%;word-wrap:break-word} .chat-mesaj.benim{background:var(--renk-yazi);color:var(--renk-arkaplan);border-color:var(--renk-yazi);margin-left:auto} .chat-form{border-top:1px solid var(--kil);padding:12px;background:var(--renk-arkaplan)} .chat-misafir{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px} .chat-misafir input{padding:10px 12px;border:1px solid var(--kil);border-radius:0;font-size:13px;outline:none;background:var(--renk-kart)} .chat-yaz{display:flex;gap:8px} .chat-yaz input{flex:1;padding:12px 14px;border:1px solid var(--kil);border-radius:0;font-size:13.5px;outline:none;background:var(--renk-kart)} .chat-yaz button{background:var(--renk-yazi);color:var(--renk-arkaplan);border-radius:0;padding:0 16px;display:grid;place-items:center;transition:.18s} .chat-yaz button:hover{background:var(--renk-birincil)} /* ---- Çerez bildirimi ---- */ .cerez-mini{position:fixed;bottom:24px;left:24px;width:340px;max-width:calc(100vw - 48px);background:var(--renk-arkaplan);border:1px solid var(--kil);box-shadow:0 20px 50px rgba(31,27,24,.18);z-index:140;overflow:hidden} .cerez-mini-bas{background:var(--renk-yazi);color:var(--renk-arkaplan);padding:16px 18px;display:flex;align-items:center;gap:10px} .cerez-mini-bas svg{flex-shrink:0} .cerez-mini-bas b{font-size:14px;line-height:1.2;font-family:var(--font-display);font-weight:600} .cerez-mini-govde{padding:16px 18px} .cerez-mini-govde p{margin:0 0 14px;font-size:12.5px;color:var(--renk-yazi-acik);line-height:1.6} .cerez-mini-aksiyon{display:flex;gap:8px} .cerez-mini-aksiyon .buton{flex:1;padding:11px 12px;font-size:11px} .cerez-mini-detay{font-size:11px;color:var(--renk-yazi-acik);margin-top:10px;text-align:center;text-transform:uppercase;letter-spacing:.08em} .cerez-mini-detay a{color:var(--renk-birincil)} .cerez-modal{max-width:520px;width:92%;padding:32px;border:1px solid var(--kil);border-radius:0;box-shadow:0 40px 90px rgba(31,27,24,.35);background:var(--renk-arkaplan)} .cerez-modal::backdrop{background:rgba(31,27,24,.6)} .cerez-modal h3{margin:0 0 6px;font-size:28px} .cerez-modal .alt{color:var(--renk-yazi-acik);font-size:13px;margin:0 0 22px} .cerez-secim-satir{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--kil-ince)} .cerez-secim-satir:last-of-type{border-bottom:0} .cerez-secim-satir b{display:block;font-size:14px;margin-bottom:3px;font-family:var(--font-display)} .cerez-secim-satir small{font-size:12px;color:var(--renk-yazi-acik)} .cerez-switch{position:relative;width:46px;height:26px;flex-shrink:0;margin-top:2px} .cerez-switch input{opacity:0;width:0;height:0} .cerez-switch span{position:absolute;inset:0;background:var(--kil);border-radius:26px;cursor:pointer;transition:.2s} .cerez-switch span::before{content:"";position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s} .cerez-switch input:checked + span{background:var(--renk-yazi)} .cerez-switch input:checked + span::before{left:23px} .cerez-switch input:disabled + span{opacity:.6;cursor:not-allowed} .cerez-modal-aksiyon{display:flex;gap:10px;margin-top:22px} .cerez-modal-aksiyon .buton{flex:1} /* ---- Beden tablosu modal ---- */ .beden-modal{max-width:640px;width:92%;padding:32px;border:1px solid var(--kil);border-radius:0;box-shadow:0 32px 80px rgba(31,27,24,.32);background:var(--renk-arkaplan)} .beden-modal::backdrop{background:rgba(31,27,24,.6)} .beden-modal h3{margin:0 0 18px;font-size:28px} .beden-modal table{width:100%;border-collapse:collapse;font-size:14px} .beden-modal th{background:var(--ic-zemin);text-align:left;padding:12px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--renk-yazi-acik);font-weight:600} .beden-modal td{padding:12px;border-bottom:1px solid var(--kil-ince)} /* ---- Müşteri yorumları bölümü ---- */ .yorum-bolum{background:var(--ic-zemin);border-top:1px solid var(--kil);border-bottom:1px solid var(--kil);padding:var(--bos) 0;margin:0} .yorum-izgara{display:grid;grid-template-columns:1fr;gap:24px;margin-top:var(--bos-yari)} .yorum-kart{background:var(--renk-kart);border:1px solid var(--kil);padding:32px} .yorum-yildizlar{color:var(--renk-vurgu);font-size:16px;letter-spacing:3px;margin-bottom:14px} .yorum-kart h4{margin:0 0 12px;font-size:20px;font-family:var(--font-display);font-weight:600} .yorum-kart p{font-size:15px;color:var(--renk-yazi);line-height:1.7;font-style:italic;margin:0 0 18px;font-family:var(--font-display)} .yorum-urun{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--kil-ince);color:inherit} .yorum-urun img{width:48px;aspect-ratio:3/4;object-fit:cover} .yorum-urun b{display:block;font-size:13px;font-weight:600} .yorum-urun small{display:block;color:var(--renk-yazi-acik);font-size:11px;text-transform:uppercase;letter-spacing:.08em} /* ---- Neden biz ---- */ .neden-biz-izgara{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--kil)} .neden-blok{background:transparent;border-bottom:1px solid var(--kil);padding:36px 24px;text-align:center;transition:.2s} .neden-ikon{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 18px;color:var(--renk-ikincil)} .neden-blok h4{margin:0 0 10px;font-size:22px;font-weight:600} .neden-blok p{margin:0;color:var(--renk-yazi-acik);font-size:14px;line-height:1.6} /* ---- Blog ---- */ .blog-izgara{display:grid;grid-template-columns:1fr;gap:24px} .blog-kart{background:transparent;border:0;overflow:visible;transition:.2s;color:inherit;display:block} .blog-kart-resim{aspect-ratio:4/5;overflow:hidden;background:var(--ic-zemin)} .blog-kart-resim img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .blog-kart:hover .blog-kart-resim img{transform:scale(1.04)} .blog-kart-bilgi{padding:18px 0 0} .blog-etiket{display:inline-block;font-size:10.5px;color:var(--renk-ikincil);letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;font-weight:600} .blog-kart h3{margin:0 0 10px;font-size:24px;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blog-kart p{margin:0;color:var(--renk-yazi-acik);font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ---- Marka şeridi ---- */ .marka-serit{background:transparent;border-top:1px solid var(--kil);border-bottom:1px solid var(--kil);padding:36px 0;margin:0} .marka-serit small{display:block;text-align:center;margin-bottom:18px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--renk-yazi-acik);font-weight:600} .marka-liste{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:center} .marka-liste a{color:var(--renk-yazi-acik);font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.04em;transition:.2s} .marka-liste a:hover{color:var(--renk-yazi)} /* ---- Destek bilet konuşma ---- */ .bilet-konusma{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow-y:auto;padding-right:8px} .bilet-satir{padding:14px 16px;background:var(--ic-zemin);border:1px solid var(--kil);max-width:85%} .bilet-satir.bilet-ben,.bilet-satir.bilet-destek{background:var(--renk-kart);align-self:flex-end} .bilet-satir.bilet-ic-not{background:#f7f0e2;border-left:3px solid var(--renk-vurgu);align-self:stretch} .bilet-bas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--renk-yazi-acik)} .bilet-satir p{margin:0;font-size:14px;line-height:1.6} /* ========================================================= DUYARLI KIRILIMLAR ========================================================= */ @media (max-width:879.98px){ html,body{overflow-x:hidden;max-width:100vw;position:relative;width:100%} body{padding-bottom:62px;font-size:14.5px} .kapsayici{padding-left:16px;padding-right:16px;max-width:100%} .urun-izgara,.kategori-izgara,.neden-biz-izgara,.yorum-izgara,.blog-izgara,.ozellikler{max-width:100%} table{max-width:100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} img,iframe,video{max-width:100%;height:auto} pre,code{max-width:100%;overflow-x:auto;word-wrap:break-word} .mobil-bottom-nav{display:grid} .wp-buton{bottom:80px;right:14px;width:50px;height:50px} .chat-widget{bottom:80px;right:14px} .chat-tetik{width:50px;height:50px} .chat-panel{bottom:140px;right:10px;left:10px;width:auto;max-width:none} body.sayfa-urun.urun-detay-acik{padding-bottom:132px} body.sayfa-urun .sticky-urun-cta{display:flex} .alt-serit-ic{justify-content:center;text-align:center} .sayfa-baslik{font-size:28px} .sayfa-icerik h1{font-size:32px} .bolum-bas h2,.merkez-bas h2{font-size:30px} .kategori-bas h1{font-size:32px;line-height:1.15} .slayt-icerik{padding:0 24px} .slayt-icerik h1{font-size:40px} .hero-slayt{height:460px} .hero-noktalar{left:24px} .lookbook-panel{min-height:340px} .orta-banner{padding:40px 28px;min-height:280px} .orta-banner h2{font-size:32px} .urun-yan h1{font-size:30px} .urun-fiyat-blok.buyuk .guncel{font-size:28px} .ust-bar-ic{padding:14px 16px;gap:10px} .ust-serit-ic{padding:7px 14px;font-size:10.5px;gap:8px} .ust-serit-sag{justify-content:center;width:100%;flex-wrap:wrap;gap:14px} .ust-serit-sol{display:none} .logo{font-size:21px} .logo-yazi{font-size:18px} .urun-ad{font-size:16px} .urun-fiyat-blok .guncel{font-size:15px} .auth-kart{padding:32px 22px} .kategori-bar-ic{justify-content:flex-start} .bulten{padding:48px 0} .bulten h3{font-size:30px} .siparis-ozet-mini div{font-size:13px} .sepet-ozet,.odeme-ozet{position:static} .odeme-adim span.metin{display:none} .odeme-adim-cizgi{width:28px;margin:0 8px} button[type=submit],.buton:not(.buton-link){min-height:44px} input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=date],input[type=datetime-local],textarea,select{font-size:16px;min-height:44px} .cerez-mini{left:12px;right:12px;width:auto;bottom:75px} } @media (min-width:881px){ .mobil-bottom-nav,.sticky-urun-cta{display:none!important} } @media (min-width:640px){ .ozellikler{grid-template-columns:repeat(4,1fr)} .urun-izgara{grid-template-columns:repeat(3,1fr);gap:20px 18px} .kategori-izgara{grid-template-columns:repeat(3,1fr)} .alan-uclu{grid-template-columns:1fr 1fr 1fr} .lookbook{grid-template-columns:1fr 1fr} .sepet-tutar{display:block;font-weight:600;font-size:16px;color:var(--renk-yazi)} .sepet-adet{grid-column:auto;padding-top:0} .sepet-satir{grid-template-columns:96px 1fr auto auto 44px;gap:20px} .gizle-mobil{display:initial} .neden-biz-izgara{grid-template-columns:repeat(2,1fr)} .neden-blok{border-right:1px solid var(--kil)} .neden-blok:nth-child(2n){border-right:0} .yorum-izgara{grid-template-columns:repeat(2,1fr)} .blog-izgara{grid-template-columns:repeat(2,1fr)} .odeme-adim span.metin{display:inline} } @media (min-width:880px){ .ust-bar-ic{grid-template-columns:auto minmax(0,2fr) auto;gap:24px} .menu-tetik{display:none} .gizle-masaustu{display:none!important} .urun-izgara{grid-template-columns:repeat(4,1fr);gap:24px 20px} .neden-biz-izgara{grid-template-columns:repeat(4,1fr)} .neden-blok{border-right:1px solid var(--kil)} .neden-blok:nth-child(2n){border-right:1px solid var(--kil)} .neden-blok:nth-child(4n){border-right:0} .yorum-izgara{grid-template-columns:repeat(3,1fr)} .blog-izgara{grid-template-columns:repeat(3,1fr)} .kategori-izgara{grid-template-columns:repeat(4,1fr)} .urun-detay{grid-template-columns:1.05fr 1fr;gap:56px} .urun-yan h1{font-size:44px} .bolum-bas h2{font-size:44px} .liste-duzen{grid-template-columns:280px 1fr;gap:48px} .filtre-yan{position:static;width:100%;height:auto;background:transparent;padding:0;box-shadow:none;visibility:visible;transform:none} .filtre-yan .kapat{display:none} .sepet-duzen{grid-template-columns:1fr 380px;gap:48px} .odeme-duzen{grid-template-columns:1fr 420px;align-items:start;gap:40px} .hesap-duzen{grid-template-columns:240px 1fr;gap:48px} .hesap-istatistik{grid-template-columns:repeat(4,1fr)} .alt-bar-ic{grid-template-columns:1.5fr 1fr 1fr 1.2fr} .bulten-ic{grid-template-columns:1fr;max-width:560px;margin:0 auto} .sepet-fiyat-mini{display:none} } @media (max-width:639px){ .sepet-fiyat-mini{display:block} .ozet-urunler{max-height:260px} .lookbook-panel{min-height:300px} .sayac-blok b{font-size:22px} .marka-liste{gap:24px} .marka-liste a{font-size:18px} } @media print{ .ust-bar,.ust-serit,.kategori-bar,.alt-bar,.alt-serit,.bulten,.wp-buton,.chat-widget,.mobil-bottom-nav,.sticky-urun-cta,.sayfa-baslik small{display:none!important} body{background:#fff;color:#000} .basari-kutu{border:0;padding:0} } /* ===== Çarşım pazaryeri bileşenleri ===== */ .kategori-bar .satici-ol{ display:inline-flex;align-items:center;gap:6px; margin-left:auto;padding:6px 14px; background:var(--renk-basari);color:#fff;border-radius:999px; font-weight:600;font-size:13px;line-height:1;white-space:nowrap; } .kategori-bar .satici-ol svg{width:15px;height:15px} .kategori-bar .satici-ol:hover{filter:brightness(1.06);color:#fff} .kategori-bar-ic{gap:18px} .kategori-bar .kampanya{color:var(--renk-uyari);font-weight:600} .lookbook-panel{position:relative;overflow:hidden;color:#fff;min-height:280px;border-radius:var(--uzun-radius)} .lookbook-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35))} .lookbook-panel-ic{position:relative;z-index:1} .lookbook-elektronik{background:linear-gradient(135deg,#2a211b 0%,#a23c12 100%)} .lookbook-yerli{background:linear-gradient(135deg,#2f4a34 0%,#4f7d52 100%)} .lookbook-elektronik::before,.lookbook-yerli::before{ content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px; border-radius:50%;background:rgba(255,255,255,.08) } /* satıcı/marka rozeti — ürün kartında marka yerli vurgusu */ .urun-kart .urun-marka{color:var(--renk-yazi-acik);font-size:12px;font-weight:500}