/* ============================================================================ ATÖLYE — kadın giyim teması Yalnız altında yüklenir (theme/header.php). Bileşen tokenları header.php'deki [data-tema="atolye"] bloğunda; buradaki kurallar o tokenların üzerine düzeni kurar. Tasarım tezi: kıyafet fotoğrafı tasarımın kendisidir. Arayüz geri çekilir — krom saç teli kalınlığında, vurgu rengi SOĞUK (petrol #1F4B4A) seçildi ki vitrindeki sıcak/pembe/kırmızı giysilerle çarpışmasın. Kadın giyimde en sık yapılan hata, arayüzü de gül pembesi yapıp ürünle yarıştırmaktır. Ölçülen kontrast (WCAG): yazı/zemin 15.2:1 · soluk/zemin 5.2:1 · vurgu/zemin 8.5:1 · beyaz/koyu-buton 17.4:1 · footer bağlantı 8.7:1 — hepsi AA üstü. ============================================================================ */ [data-tema="atolye"]{ /* Tema-içi ek tokenlar (ana tokenlar header.php'de) */ --at-keten:#E7E3DC; /* ikincil yüzey */ --at-kiremit:#9C3D2E; /* indirim/uyarı — vurgudan ayrı semantik renk */ --at-gece:#161614; /* footer zemini */ --at-gece-yazi:#B9B3AA; /* footer gövde yazısı — #161614 üstünde 7.1:1 */ --at-kenar:1px solid var(--cizgi); --at-tempo:.28s; --at-egri:cubic-bezier(.22,.61,.36,1); /* Dikey ritim — 4pt tabanlı */ --at-bosluk-s:16px; --at-bosluk-m:32px; --at-bosluk-l:64px; --at-bosluk-xl:104px; --at-sinir:1520px; /* içerik genişliği (1320 → 1520: geniş ekranda site daha büyük görünsün) */ } /* ---------- Zemin ---------- */ [data-tema="atolye"] body{background:var(--zemin);color:var(--yazi);font-family:var(--govde); font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} [data-tema="atolye"] h1,[data-tema="atolye"] h2,[data-tema="atolye"] h3,[data-tema="atolye"] h4{ font-family:var(--bas);font-weight:400;letter-spacing:-.01em;text-wrap:balance} [data-tema="atolye"] .at-sarma{width:min(var(--at-sinir),calc(100% - 48px));margin-inline:auto} [data-tema="atolye"] .kapsa{max-width:var(--at-sinir)} /* kategori/ürün/sepet sayfaları da aynı genişlikte */ /* Fiyat, adet, sayaç — rakamlar sütun hâlinde hizalansın, kart zıplamasın */ [data-tema="atolye"] .fiyat,[data-tema="atolye"] .eski,[data-tema="atolye"] .at-fiyat, [data-tema="atolye"] .at-sayi{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* Klavye odağı — her yerde görünür (tema geneli) */ [data-tema="atolye"] a:focus-visible,[data-tema="atolye"] button:focus-visible, [data-tema="atolye"] input:focus-visible,[data-tema="atolye"] select:focus-visible{ outline:2px solid var(--vurgu);outline-offset:3px;border-radius:2px} /* İçerik atlama bağlantısı — klavye kullanıcısı menüyü her sayfada geçmesin */ [data-tema="atolye"] .at-atla{position:absolute;left:-9999px;top:0;z-index:999; background:var(--vurgu);color:#fff;padding:12px 20px;text-decoration:none;font-weight:500} [data-tema="atolye"] .at-atla:focus{left:12px;top:12px} /* ============================================================================ 1) BAŞLIK — ince künye şeridi + ortalanmış logo + altında sakin kategori dizini Marka önce okunur; kategori navigasyonu bir alt satırda "içindekiler" gibi durur. ============================================================================ */ [data-tema="atolye"] .at-kunye{background:var(--yazi);color:#EDE9E2;font-size:12px;letter-spacing:.06em} [data-tema="atolye"] .at-kunye-ic{min-height:44px;display:flex;align-items:center; justify-content:space-between;gap:24px} [data-tema="atolye"] .at-kunye a{display:inline-flex;align-items:center;min-height:44px; color:inherit;text-decoration:none;opacity:.82} [data-tema="atolye"] .at-kunye a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} [data-tema="atolye"] .at-kunye-bag{display:flex;gap:22px;align-items:center} [data-tema="atolye"] .at-kunye-mesaj{text-transform:uppercase} /* Başlık (logo satırı + menü) BEYAZ zemin — tema kreminden ayrışır, menü şeridiyle tek parça */ [data-tema="atolye"] .at-bas{background:#fff;border-bottom:var(--at-kenar); position:sticky;top:0;z-index:60} [data-tema="atolye"] .at-bas-ic{display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:24px;padding:22px 0 18px} [data-tema="atolye"] .at-marka{grid-column:2;justify-self:center;text-decoration:none; color:var(--yazi);text-align:center;display:block} [data-tema="atolye"] .at-marka .ad{font-family:var(--bas);font-size:clamp(24px,3.4vw,36px); line-height:1;letter-spacing:.02em;display:block} [data-tema="atolye"] .at-marka .alt{display:block;margin-top:7px;font-size:9.5px; letter-spacing:.42em;text-indent:.42em;color:var(--soluk);text-transform:uppercase} [data-tema="atolye"] .at-marka img{height:44px;width:auto;object-fit:contain;display:block;margin:auto} [data-tema="atolye"] .at-bas-sol{display:flex;align-items:center;gap:6px} [data-tema="atolye"] .at-bas-sag{display:flex;align-items:center;gap:6px;justify-self:end} /* İkon düğmeleri — görünen daire 40px, dokunma alanı 44px (WCAG/HIG) */ [data-tema="atolye"] .at-ik{width:44px;height:44px;display:inline-grid;place-items:center; border:0;background:none;color:var(--yazi);cursor:pointer;position:relative; border-radius:50%;transition:background var(--at-tempo) var(--at-egri);text-decoration:none} [data-tema="atolye"] .at-ik:hover{background:var(--at-keten)} /* Sol blok — masaüstü: çekmece düğmesi gizli (dizin zaten görünür), arama etiketli hap düğme; mobil: ikisi de sade ikon (etiket gizli). */ [data-tema="atolye"] .at-ara-ac .et{display:none} @media(min-width:761px){ [data-tema="atolye"] .at-cekmece-ac{display:none} [data-tema="atolye"] .at-ara-ac{display:inline-flex;align-items:center;width:auto;gap:8px; padding:0 16px 0 13px;border:var(--at-kenar);border-radius:999px;color:var(--yazi)} [data-tema="atolye"] .at-ara-ac .et{display:inline;font-size:12px;font-weight:500; letter-spacing:.14em;text-transform:uppercase} [data-tema="atolye"] .at-ara-ac:hover{background:var(--at-keten);border-color:transparent} } [data-tema="atolye"] .at-ik svg{width:21px;height:21px;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} [data-tema="atolye"] .at-rozet{position:absolute;top:5px;right:4px;min-width:17px;height:17px; padding:0 4px;border-radius:9px;background:var(--vurgu);color:#fff;font-size:10.5px; font-weight:600;display:grid;place-items:center;line-height:1;font-variant-numeric:tabular-nums} /* Kategori dizini */ /* Ana sayfa bölüm ton farkı: .tonlu bölümler tam genişlik BEYAZ bant olur (krem zemin üzerinde dönüşümlü ayrışma). Bölüm .at-sarma ile dar kapsayıcı olduğundan tam-genişlik bant ::before + inset -50vw tekniğiyle çizilir; html'de overflow-x clip olduğundan yatay taşma oluşmaz. */ [data-tema="atolye"] .at-bolum.tonlu{position:relative;z-index:0} [data-tema="atolye"] .at-bolum.tonlu::before{content:"";position:absolute;z-index:-1; top:0;bottom:0;left:calc(50% - 50vw / var(--mz,1));right:calc(50% - 50vw / var(--mz,1)); background:#fff;border-top:var(--at-kenar);border-bottom:var(--at-kenar)} /* Menü şeridi: içerikten ayrışsın diye BEYAZ zemin (tema kremi değil) + iki ince çizgi */ [data-tema="atolye"] .at-nav{border-top:var(--at-kenar);border-bottom:var(--at-kenar);background:#fff} /* Daralan başlık (yalnız masaüstü): .at-bas.daralt iken büyük logo satırı gizlenir, yapışık kalan tek şey menü şerididir; küçük logo menünün SOLUNDA belirir. Menü bağlantıları ortalı kalsın diye logo mutlak konumludur. */ [data-tema="atolye"] .at-nav-ic{position:relative} /* Seçici bilerek "a.at-nav-logo": genel ".at-nav a" kuralı (altı çizgi animasyonu için position:relative taşır) daha spesifik kalıp mutlak konumu eziyordu. */ [data-tema="atolye"] .at-nav a.at-nav-logo{display:none} [data-tema="atolye"] .at-nav a.at-nav-logo::after{display:none} @media(min-width:761px){ [data-tema="atolye"] .at-nav a.at-nav-logo{display:flex;align-items:center;position:absolute; left:0;top:50%;transform:translateY(-50%);padding:0;opacity:0;visibility:hidden; transition:opacity .25s var(--at-egri)} [data-tema="atolye"] .at-nav a.at-nav-logo img{height:30px;width:auto;display:block} [data-tema="atolye"] .at-nav a.at-nav-logo span{font-family:var(--bas);font-size:19px;color:var(--yazi);white-space:nowrap} [data-tema="atolye"] .at-bas.daralt .at-bas-ic{display:none} [data-tema="atolye"] .at-bas.daralt .at-nav a.at-nav-logo{opacity:1;visibility:visible;pointer-events:auto} [data-tema="atolye"] .at-bas.daralt .at-nav{border-top:0} [data-tema="atolye"] .at-bas.daralt{box-shadow:0 16px 34px -24px rgba(26,26,25,.3)} } [data-tema="atolye"] .at-nav-ic{display:flex;align-items:center;justify-content:center; gap:38px;min-height:46px;flex-wrap:wrap} [data-tema="atolye"] .at-nav a{text-decoration:none;color:var(--yazi);font-size:12.5px; letter-spacing:.13em;text-transform:uppercase;position:relative; display:flex;align-items:center;min-height:46px} /* Altı çizgi transform ile büyür — genişlik animasyonu düzen yeniden akıtır */ [data-tema="atolye"] .at-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px; height:1px;background:var(--vurgu);transform:scaleX(0);transform-origin:left; transition:transform var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .at-nav a:hover::after,[data-tema="atolye"] .at-nav a[aria-current]::after{transform:scaleX(1)} [data-tema="atolye"] .at-nav .at-yeni{color:var(--vurgu)} /* Kampanya bağlantısı: süreli olduğu için dizinde vurgulu durur */ [data-tema="atolye"] .at-nav .at-kampanya{color:#b91c1c;font-weight:700} [data-tema="atolye"] .at-nav .at-kampanya::before{content:"●";font-size:7px;margin-right:6px;vertical-align:middle} /* Mega menü — kategori grubunun alt dalları */ [data-tema="atolye"] .at-dal{position:relative} [data-tema="atolye"] .at-mega{position:absolute;top:100%;left:50%;translate:calc(-50% + var(--kaydir,0px)) 0; max-width:calc(100vw - 24px);box-sizing:border-box; display:grid;grid-template-columns:1fr;gap:0 6px; min-width:250px;background:#fff;border:var(--at-kenar);border-top:2px solid var(--vurgu); padding:14px 10px 12px;box-shadow:0 22px 44px -24px rgba(26,26,25,.34);z-index:70; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity var(--at-tempo) var(--at-egri),transform var(--at-tempo) var(--at-egri),visibility var(--at-tempo)} /* Kalabalık dallar (6+ alt kategori) iki sütuna, çok kalabalıklar (15+, örn. Markalar) üç sütuna yayılır */ [data-tema="atolye"] .at-mega.genis{grid-template-columns:1fr 1fr;min-width:440px} [data-tema="atolye"] .at-mega.genis3{grid-template-columns:1fr 1fr 1fr;min-width:620px} [data-tema="atolye"] .at-mega-bas{grid-column:1/-1;font-size:10.5px;font-weight:600; letter-spacing:.19em;text-transform:uppercase;color:var(--soluk); padding:2px 18px 10px;margin-bottom:6px;border-bottom:var(--at-kenar)} [data-tema="atolye"] .at-mega .at-mega-tum{grid-column:1/-1;margin-top:8px;padding-top:10px; border-top:var(--at-kenar);color:var(--vurgu);font-weight:600} [data-tema="atolye"] .at-dal:hover .at-mega,[data-tema="atolye"] .at-dal:focus-within .at-mega{ opacity:1;visibility:visible;transform:none} [data-tema="atolye"] .at-mega a{display:flex;align-items:center;min-height:33px;padding:3px 16px; text-transform:none;letter-spacing:.01em;font-size:13.5px;color:var(--soluk)} /* satırlar sıkı: uzun listeler (Markalar) taşmasın */ [data-tema="atolye"] .at-mega a::after{display:none} /* 3. düzey: alt kategori başlığı + girintili altları */ [data-tema="atolye"] .at-mega-grup{display:flex;flex-direction:column;padding-bottom:4px} [data-tema="atolye"] .at-mega a.at-mega-gbas{color:var(--yazi);font-weight:600} [data-tema="atolye"] .at-mega a.at-mega-3{min-height:28px;padding-left:30px;font-size:12.5px} [data-tema="atolye"] .at-mega a:hover{color:var(--vurgu)} /* Arama katmanı — büyüteçle açılır, tam genişlik */ [data-tema="atolye"] .at-ara-kat{position:fixed;inset:0 0 auto;background:var(--surface); border-bottom:var(--at-kenar);z-index:90;padding:26px 0; transform:translateY(-100%);transition:transform var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .at-ara-kat.acik{transform:none} [data-tema="atolye"] .at-ara-form{display:flex;align-items:center;gap:14px; border-bottom:1px solid var(--yazi);padding-bottom:12px} [data-tema="atolye"] .at-ara-form input{flex:1;border:0;outline:0;background:none; font-family:var(--bas);font-size:clamp(19px,3vw,28px);color:var(--yazi);min-width:0;padding:4px 0} [data-tema="atolye"] .at-ara-form input::placeholder{color:var(--soluk);opacity:.65} [data-tema="atolye"] .at-ara-ipuc{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px; font-size:12.5px;color:var(--soluk);align-items:center} [data-tema="atolye"] .at-ara-ipuc a{color:var(--yazi);text-decoration:none; border:var(--at-kenar);padding:0 16px;border-radius:22px; display:inline-flex;align-items:center;min-height:44px} [data-tema="atolye"] .at-ara-ipuc a:hover{border-color:var(--vurgu);color:var(--vurgu)} [data-tema="atolye"] .at-ara-sonuc{margin-top:18px;max-height:calc(52vh / var(--mz,1));overflow:auto} [data-tema="atolye"] .at-ara-sonuc a{display:flex;gap:14px;align-items:center;padding:10px 0; border-bottom:var(--at-kenar);text-decoration:none;color:var(--yazi)} [data-tema="atolye"] .at-ara-sonuc img{width:52px;height:69px;object-fit:contain;background:#fff} [data-tema="atolye"] .at-ara-sonuc small{display:block;color:var(--vurgu);margin-top:3px} /* Mobil çekmece menü */ [data-tema="atolye"] .at-cekmece{position:fixed;inset:0 auto 0 0;width:min(340px,88vw); background:var(--surface);z-index:95;transform:translateX(-100%); transition:transform var(--at-tempo) var(--at-egri);display:flex;flex-direction:column; overflow:auto;-webkit-overflow-scrolling:touch} [data-tema="atolye"] .at-cekmece.acik{transform:none} [data-tema="atolye"] .at-cekmece-bas{display:flex;align-items:center;justify-content:space-between; padding:18px 20px;border-bottom:var(--at-kenar)} [data-tema="atolye"] .at-cekmece-bas strong{font-family:var(--bas);font-size:19px;font-weight:400} [data-tema="atolye"] .at-cekmece nav{padding:8px 0} [data-tema="atolye"] .at-cekmece nav a{display:block;padding:14px 20px;text-decoration:none; color:var(--yazi);font-size:15px;border-bottom:1px solid color-mix(in srgb,var(--cizgi) 55%,transparent)} [data-tema="atolye"] .at-cekmece nav a.alt{padding-left:36px;font-size:14px;color:var(--soluk)} /* Çekmece akordiyonu: satır = kategori linki + ok düğmesi; altlar kapalı başlar */ [data-tema="atolye"] .at-cekmece .cek-satir{display:flex;align-items:center} [data-tema="atolye"] .at-cekmece .cek-satir a{flex:1;min-width:0} [data-tema="atolye"] .at-cekmece .cek-ok{flex:0 0 auto;background:none;border:0;cursor:pointer; padding:12px 18px;color:var(--soluk);display:inline-flex;align-items:center} [data-tema="atolye"] .at-cekmece .cek-ok svg{transition:transform .2s var(--at-egri)} [data-tema="atolye"] .at-cekmece .cek-ok.acik svg{transform:rotate(180deg)} [data-tema="atolye"] .at-cekmece .cek-altlar{border-left:2px solid var(--cizgi);margin-left:20px} [data-tema="atolye"] .at-cekmece .cek-altlar .cek-altlar{margin-left:36px} [data-tema="atolye"] .at-cekmece nav a.alt3{padding-left:22px;font-size:13.5px} [data-tema="atolye"] .at-perde{position:fixed;inset:0;background:rgba(22,22,20,.52);z-index:88; opacity:0;visibility:hidden;transition:opacity var(--at-tempo),visibility var(--at-tempo)} [data-tema="atolye"] .at-perde.acik{opacity:1;visibility:visible} [data-tema="atolye"] body.at-kilit{overflow:hidden} /* ============================================================================ 2) HERO — tam taşan görsel, tip görselin üstünde. Sert karartma perdesi yerine tek yönlü degrade: fotoğraf kararmıyor, metin yine de her arka planda okunuyor. ============================================================================ */ [data-tema="atolye"] .at-hero{position:relative;min-height:clamp(460px,calc(72vh / var(--mz,1)),760px); display:grid;overflow:hidden;background:var(--at-keten)} [data-tema="atolye"] .at-hero-kare{grid-area:1/1;position:relative;opacity:0; transition:opacity .7s var(--at-egri)} [data-tema="atolye"] .at-hero-kare.aktif{opacity:1} [data-tema="atolye"] .at-hero-kare img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 22%} /* Karartma slayt başına (Yönetim → Banner Slider): yok | hafif | güçlü. Açık yazıda koyu, koyu yazıda açık perde; yazı sağdaysa perde sağdan, ortadaysa eşit dağılır. "Yok" → görsel olduğu gibi. */ [data-tema="atolye"] .at-hero-kare::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1} [data-tema="atolye"] .at-hero-kare.kx-sag{--kar-yon:282deg} [data-tema="atolye"] .at-hero-kare.kar-guclu.yazi-acik::after{background:linear-gradient(var(--kar-yon,78deg),rgba(22,22,20,.62) 0%,rgba(22,22,20,.34) 38%,rgba(22,22,20,0) 68%)} [data-tema="atolye"] .at-hero-kare.kar-hafif.yazi-acik::after{background:linear-gradient(var(--kar-yon,78deg),rgba(22,22,20,.38) 0%,rgba(22,22,20,.16) 42%,rgba(22,22,20,0) 72%)} [data-tema="atolye"] .at-hero-kare.kar-guclu.yazi-koyu::after{background:linear-gradient(var(--kar-yon,78deg),rgba(250,248,244,.8) 0%,rgba(250,248,244,.45) 38%,rgba(250,248,244,0) 68%)} [data-tema="atolye"] .at-hero-kare.kar-hafif.yazi-koyu::after{background:linear-gradient(var(--kar-yon,78deg),rgba(250,248,244,.52) 0%,rgba(250,248,244,.2) 42%,rgba(250,248,244,0) 72%)} [data-tema="atolye"] .at-hero-kare.kx-orta.kar-guclu.yazi-acik::after{background:rgba(22,22,20,.4)} [data-tema="atolye"] .at-hero-kare.kx-orta.kar-hafif.yazi-acik::after{background:rgba(22,22,20,.2)} [data-tema="atolye"] .at-hero-kare.kx-orta.kar-guclu.yazi-koyu::after{background:rgba(250,248,244,.55)} [data-tema="atolye"] .at-hero-kare.kx-orta.kar-hafif.yazi-koyu::after{background:rgba(250,248,244,.3)} /* Bağlantılı slaytın tamamı tıklanır (yazı kutusu üstte kalır) */ [data-tema="atolye"] .at-hero-link{position:absolute;inset:0;z-index:2} /* Yazı slayt içinde; konum 3×3 (sol/orta/sağ × üst/orta/alt) */ [data-tema="atolye"] .at-hero-kare .at-hero-ic{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column; justify-content:center;align-items:flex-start;text-align:left;padding-block:56px 76px;pointer-events:none} [data-tema="atolye"] .at-hero-kare .at-hero-kutu{pointer-events:auto} [data-tema="atolye"] .ky-ust .at-hero-ic{justify-content:flex-start} [data-tema="atolye"] .ky-alt .at-hero-ic{justify-content:flex-end} [data-tema="atolye"] .kx-orta .at-hero-ic{align-items:center;text-align:center} [data-tema="atolye"] .kx-sag .at-hero-ic{align-items:flex-end;text-align:right} [data-tema="atolye"] .kx-orta .at-hero-kutu p{margin-inline:auto} [data-tema="atolye"] .kx-sag .at-hero-kutu p{margin-left:auto} [data-tema="atolye"] .kx-orta .at-hero-btnlar{justify-content:center} [data-tema="atolye"] .kx-sag .at-hero-btnlar{justify-content:flex-end} [data-tema="atolye"] .at-hero-kutu{max-width:min(560px,90%)} [data-tema="atolye"] .at-hero-ust{font-family:var(--bas);font-style:italic;font-size:16px; color:#F0EDE6;letter-spacing:.02em;display:block;margin-bottom:14px} [data-tema="atolye"] .at-hero .at-hero-bas{font-size:clamp(38px,6.4vw,74px);line-height:1.02;margin:0; color:#fff;text-shadow:0 2px 20px rgba(22,22,20,.34)} [data-tema="atolye"] .at-hero p{color:#EAE6DE;font-size:16px;margin:18px 0 0;max-width:44ch; text-shadow:0 1px 12px rgba(22,22,20,.44)} [data-tema="atolye"] .at-hero .yazi-koyu .at-hero-bas{color:var(--yazi);text-shadow:none} [data-tema="atolye"] .at-hero .yazi-koyu p,[data-tema="atolye"] .at-hero .yazi-koyu .at-hero-ust{color:#3f3f46;text-shadow:none} [data-tema="atolye"] .at-hero .yazi-koyu .at-btn.ters{background:var(--yazi);border-color:var(--yazi);color:#fff} [data-tema="atolye"] .at-hero .yazi-koyu .at-btn.hafif{border-color:var(--yazi);color:var(--yazi)} [data-tema="atolye"] .at-gizli{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Kaydırma geçişi (Banner Slider → Geçiş animasyonu: Kaydırma) */ [data-tema="atolye"] .at-hero.kaydir .at-hero-kare{opacity:1;transform:translateX(100%);transition:none} [data-tema="atolye"] .at-hero.kaydir .at-hero-kare.aktif{transform:none} [data-tema="atolye"] .at-hero.kaydir .at-hero-kare.gecis{transition:transform .7s var(--at-egri)} /* Oklar (Banner Slider → Okları göster) — rengi "Ok / nokta rengi" */ [data-tema="atolye"] .at-hero-ok{position:absolute;top:50%;translate:0 -50%;z-index:4;width:46px;height:46px;border:0;border-radius:50%; background:rgba(22,22,20,.26);color:var(--at-hero-renk,#fff);font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background var(--at-tempo)} [data-tema="atolye"] .at-hero-ok:hover{background:rgba(22,22,20,.46)} [data-tema="atolye"] .at-hero-ok.onceki{left:18px} [data-tema="atolye"] .at-hero-ok.sonraki{right:18px} /* Görselin kendi oranı (ilk slayt): kırpmadan göster; çok geniş ekranda ekran yüksekliğini aşmasın */ [data-tema="atolye"] .at-hero.oranli{min-height:0;aspect-ratio:var(--at-hero-oran);max-height:calc(86vh / var(--mz,1))} @media(max-width:760px){ /* Telefonda mobil görsel yoksa eski yükseklik (geniş masaüstü görseli telefonda çok basık kalırdı) */ [data-tema="atolye"] .at-hero.oranli{aspect-ratio:auto;min-height:clamp(400px,calc(64vh / var(--mz,1)),560px);max-height:none} [data-tema="atolye"] .at-hero.mobil-oranli{min-height:0;aspect-ratio:var(--at-hero-mobil-oran);max-height:calc(86vh / var(--mz,1))} [data-tema="atolye"] .at-hero-ok{width:34px;height:34px;font-size:22px} [data-tema="atolye"] .at-hero-ok.onceki{left:8px} [data-tema="atolye"] .at-hero-ok.sonraki{right:8px} } [data-tema="atolye"] .at-hero-btnlar{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} [data-tema="atolye"] .at-hero-nokta{position:absolute;left:50%;translate:-50% 0;bottom:26px; z-index:3;display:flex;gap:9px} [data-tema="atolye"] .at-hero-nokta button{width:44px;height:44px;padding:0;border:0;background:none; cursor:pointer;display:grid;place-items:center} [data-tema="atolye"] .at-hero-nokta button::before{content:"";width:26px;height:2px; background:rgba(255,255,255,.45);background:color-mix(in srgb,var(--at-hero-renk,#fff) 45%,transparent);transition:background var(--at-tempo)} [data-tema="atolye"] .at-hero-nokta button[aria-current="true"]::before{background:var(--at-hero-renk,#fff)} /* Butonlar */ [data-tema="atolye"] .at-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:48px;padding:0 30px;border:1px solid var(--yazi);background:var(--yazi);color:#fff; font-family:var(--govde);font-size:12.5px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;cursor:pointer; transition:background var(--at-tempo) var(--at-egri),color var(--at-tempo) var(--at-egri), border-color var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .at-btn:hover{background:var(--vurgu);border-color:var(--vurgu);color:#fff} [data-tema="atolye"] .at-btn.hafif{background:transparent;color:var(--yazi)} [data-tema="atolye"] .at-btn.hafif:hover{background:var(--yazi);border-color:var(--yazi);color:#fff} [data-tema="atolye"] .at-btn.ters{background:#fff;border-color:#fff;color:var(--yazi)} [data-tema="atolye"] .at-btn.ters:hover{background:var(--vurgu);border-color:var(--vurgu);color:#fff} [data-tema="atolye"] .at-btn[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none} /* ============================================================================ 3) BÖLÜM BAŞLIKLARI ============================================================================ */ [data-tema="atolye"] .at-bolum{padding:var(--at-bosluk-xl) 0} /* Slider (kapak) ile ilk bölüm (vitrin) arası nefes payı azaltıldı — üst dolgu ~yarı */ [data-tema="atolye"] .at-hero + .at-bolum{padding-top:calc(var(--at-bosluk-xl) / 2)} [data-tema="atolye"] .at-bolum.sik{padding:var(--at-bosluk-l) 0} [data-tema="atolye"] .at-bolum-bas{display:flex;align-items:flex-end;justify-content:space-between; gap:24px;margin-bottom:var(--at-bosluk-m);flex-wrap:wrap} [data-tema="atolye"] .at-bolum-bas .sol{max-width:56ch} [data-tema="atolye"] .at-etiket{display:block;font-size:11px;letter-spacing:.26em; text-transform:uppercase;color:var(--vurgu);margin-bottom:11px} [data-tema="atolye"] .at-bolum-bas h2{font-size:clamp(27px,3.6vw,42px);margin:0;line-height:1.1} [data-tema="atolye"] .at-bolum-bas p{color:var(--soluk);margin:10px 0 0;max-width:52ch} /* "Tümünü Gör": metin 12px ama dokunma alanı 44px. Alt çizgi kenarlık yerine ::before ile çiziliyor — böylece yükseklik büyürken çizgi metne yapışık kalır. */ [data-tema="atolye"] .at-tumu{position:relative;display:inline-flex;align-items:center; min-height:44px;text-decoration:none;color:var(--yazi);font-size:12px; letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; transition:color var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .at-tumu::before{content:"";position:absolute;left:0;right:0;bottom:12px; height:1px;background:currentColor} [data-tema="atolye"] .at-tumu:hover{color:var(--vurgu)} /* ============================================================================ 4) ÜRÜN KARTI — paylaşılan .urun-kart bileşeninin moda uyarlaması Kıyafet bedende ve dikey çekilir: 3:4 kare, görsel kart kenarına taşar, krom yalnız altta bir satır tipografi. ============================================================================ */ [data-tema="atolye"] .urun-grid,[data-tema="atolye"] .at-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:40px 26px} [data-tema="atolye"] .urun-kart{background:#fff;border:1px solid var(--cizgi);border-radius:10px;box-shadow:none; padding:0 0 14px;display:block;text-decoration:none;color:var(--yazi);position:relative;overflow:hidden; transition:border-color var(--at-tempo) var(--at-egri),box-shadow var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .urun-kart:hover{border-color:color-mix(in srgb,var(--yazi) 32%,var(--cizgi)); box-shadow:0 10px 26px -18px rgba(20,18,14,.35)} [data-tema="atolye"] .urun-kart .gorsel{aspect-ratio:3/4;background:#fff; border-radius:0;overflow:hidden;position:relative;margin:0;border-bottom:1px solid var(--cizgi)} /* Yüklenme sonrası da zemin BEYAZ kalsın (header'daki .yuklu kuralı krem basıyordu; şeffaf PNG'ler standart beyaz zeminde görünsün) */ [data-tema="atolye"] .urun-kart .gorsel.yuklu, [data-tema="atolye"] .urun-kart .gorsel:has(img.y), [data-tema="atolye"] .urun-kart .gorsel.gorselsiz, [data-tema="atolye"] .urun-kart .gorsel:has(>.bos){background:#fff} /* Boydan (tam boy) ürün çekimleri kırpılmasın: contain + beyaz zemin — ürün her karede TAM görünür */ [data-tema="atolye"] .urun-kart .gorsel img{width:100%;height:100%;object-fit:contain; transition:transform .7s var(--at-egri),opacity var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .urun-kart:hover .gorsel img{transform:scale(1.035)} /* İkinci görsele çapraz geçiş — kıyafetin detay/giyimli karesi. Ana görselin üstüne bindirilir; yalnız işaretçi cihazlarda (aşağıda) etkinleşir. */ [data-tema="atolye"] .at-kart-arka{position:absolute;inset:0;opacity:0; transition:opacity .45s var(--at-egri);pointer-events:none} /* Zemin ancak görsel YÜKLENİNCE beyaz olur (.hazir — kart.php onload'da ekler); yüklenmemiş/eksik dosyada katman şeffaf kalır ya da kaldırılır → hover'da ana görsel korunur */ [data-tema="atolye"] .at-kart-arka.hazir{background:#fff} [data-tema="atolye"] .urun-kart:hover .at-kart-arka:not(.hazir){opacity:0} [data-tema="atolye"] .at-kart-arka img{width:100%;height:100%;object-fit:contain;opacity:1} /* temel opacity:0 kuralını her koşulda ez */ [data-tema="atolye"] .urun-kart .ind{position:absolute;top:0;left:0;z-index:3; background:var(--at-kiremit);color:#fff;border-radius:0;padding:6px 11px; font-size:11px;letter-spacing:.08em;font-weight:500;box-shadow:none} [data-tema="atolye"] .at-kart-etiket{position:absolute;top:0;left:0;z-index:3; background:var(--yazi);color:#fff;padding:6px 11px;font-size:11px;letter-spacing:.08em} [data-tema="atolye"] .urun-kart .ind + .at-kart-etiket, [data-tema="atolye"] .at-kart-etiket.ikinci{top:31px} /* Favori: dokunma alanı 44×44 (HIG/MD), görünen daire 37px. Beyaz daireyi svg taşır — böylece hedef büyür ama tasarım incelmiş kalır. */ [data-tema="atolye"] .urun-kart .kalp{position:absolute;top:2px;right:2px;z-index:4; width:44px;height:44px;border:0;background:none;border-radius:50%; color:var(--yazi);display:grid;place-items:center;cursor:pointer;padding:0} [data-tema="atolye"] .urun-kart .kalp svg{width:17px;height:17px;padding:10px;box-sizing:content-box; background:rgba(255,255,255,.9);border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.6; transition:background var(--at-tempo),color var(--at-tempo)} [data-tema="atolye"] .urun-kart .kalp:hover svg{background:#fff} [data-tema="atolye"] .urun-kart .kalp:hover{color:var(--vurgu)} [data-tema="atolye"] .urun-kart .kalp.ekli{color:var(--at-kiremit)} [data-tema="atolye"] .urun-kart .kalp.ekli svg{fill:currentColor} /* Beden satırı — karenin altından yükselir. Moda perakendesinde en işlevsel etkileşim: ürüne girmeden hangi bedenler var görünür. */ [data-tema="atolye"] .at-bedenler{position:absolute;left:0;right:0;bottom:0;z-index:3; display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:11px 10px; background:rgba(255,255,255,.94);backdrop-filter:blur(3px); transform:translateY(101%);transition:transform var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .at-bedenler span{min-width:31px;padding:3px 7px;text-align:center; font-size:11.5px;letter-spacing:.05em;color:var(--yazi);border:1px solid var(--cizgi)} [data-tema="atolye"] .at-bedenler span.yok{color:var(--soluk);opacity:.5; text-decoration:line-through;text-decoration-thickness:1px} /* Küçük görsel şeridi — karenin alt kenarında en çok 4 kare (varyant görselleri ya da kapak dışındaki diğer görseller; kart.php). 4'ten azsa ortalanır. Kare boyu kart genişliğine göre (cqw) — mobilde 2 sütunda da sığar; beden satırı şeridin ÜSTÜNDEN yükselir. */ [data-tema="atolye"] .urun-kart .gorsel{container-type:inline-size} [data-tema="atolye"] .at-kucukler{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center; gap:5px;padding:14px 6px 7px;background:linear-gradient(to top,rgba(255,255,255,.97) 62%,rgba(255,255,255,0))} [data-tema="atolye"] .at-kucuk{flex:0 0 auto;height:clamp(40px,26cqw,66px);aspect-ratio:3/4;padding:0;border:1px solid var(--cizgi); background:#fff;cursor:pointer;overflow:hidden;display:block;transition:border-color var(--at-tempo),transform var(--at-tempo)} [data-tema="atolye"] .at-kucuk img,[data-tema="atolye"] .urun-kart:hover .gorsel .at-kucuk img{width:100%;height:100%;object-fit:contain; opacity:1;transform:none;display:block;transition:none} [data-tema="atolye"] .at-kucuk:hover{border-color:var(--yazi);transform:translateY(-2px)} [data-tema="atolye"] .at-kucuk.aktif{border-color:var(--yazi);box-shadow:0 0 0 1px var(--yazi)} [data-tema="atolye"] .gorsel:has(.at-kucukler) .at-bedenler{bottom:calc(clamp(40px,26cqw,66px) + 21px)} /* Şerit varyant görsellerinden kurulduysa alttaki renk noktaları aynı bilgiyi tekrarlamasın */ [data-tema="atolye"] .urun-kart:has(.at-kucukler.k-varyant) .uk-varyant{display:none} /* Renk seçicileri: görünen nokta 16px kalır (editöryel incelik), dokunma alanı 32px. Düğme şeffaf ve büyük; daireyi içindeki öğe çiziyor. */ [data-tema="atolye"] .urun-kart .uk-varyant{display:flex;justify-content:flex-start;gap:2px; margin:8px 0 0 4px;padding:0;border:0;background:none;flex-wrap:wrap} [data-tema="atolye"] .urun-kart .uk-sw{width:32px;height:32px;padding:0;border:0;background:none; border-radius:50%;overflow:visible;cursor:pointer;display:grid;place-items:center} [data-tema="atolye"] .urun-kart .uk-sw img,[data-tema="atolye"] .urun-kart .uk-sw-renk{ width:16px;height:16px;object-fit:cover;display:block;border-radius:50%; border:1px solid var(--cizgi);outline:1px solid transparent;outline-offset:2px; transition:outline-color var(--at-tempo)} [data-tema="atolye"] .urun-kart .uk-sw:hover img,[data-tema="atolye"] .urun-kart .uk-sw:hover .uk-sw-renk{ outline-color:var(--yazi)} [data-tema="atolye"] .urun-kart .ic{padding:13px 13px 0;text-align:left} [data-tema="atolye"] .urun-kart .marka{display:block;font-size:10.5px;letter-spacing:.19em; text-transform:uppercase;color:var(--soluk);margin-bottom:6px} [data-tema="atolye"] .urun-kart h3{font-family:var(--govde);font-size:14px;font-weight:400; line-height:1.45;margin:0 0 7px;color:var(--yazi);letter-spacing:0} [data-tema="atolye"] .urun-kart .fiyat-satir{display:flex;align-items:baseline;gap:9px; flex-wrap:wrap;margin:0} [data-tema="atolye"] .urun-kart .fiyat{font-size:14.5px;font-weight:500;color:var(--yazi)} [data-tema="atolye"] .urun-kart .fiyat.ind-f{color:var(--at-kiremit)} [data-tema="atolye"] .urun-kart .fiyat-gizli{font-size:13px;font-weight:400;color:var(--vurgu)} [data-tema="atolye"] .urun-kart .eski{font-size:13px;color:var(--soluk);text-decoration:line-through} [data-tema="atolye"] .urun-kart .kazanc{display:none} /* editöryel sadelik: tek fiyat satırı yeter */ /* Sepete ekle — kartın altında sabit yer kaplar (görünürlüğü hover'a bağlamak dokunmatikte erişilemez yapardı; §2 hover-vs-tap). */ [data-tema="atolye"] .urun-kart .hizli-ekle{width:100%;min-height:44px;margin-top:13px; opacity:1;transform:none; /* temel temanın hover'a bağlı gizlemesini iptal et: SEPETE EKLE hep görünür */ border:1px solid var(--cizgi);background:transparent;color:var(--yazi);border-radius:0; font-family:var(--govde);font-size:11.5px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;cursor:pointer; transition:background var(--at-tempo) var(--at-egri),color var(--at-tempo) var(--at-egri), border-color var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .urun-kart .hizli-ekle:hover:not([disabled]){ background:var(--yazi);border-color:var(--yazi);color:#fff} [data-tema="atolye"] .urun-kart .hizli-ekle[disabled]{color:var(--soluk);opacity:.55;cursor:not-allowed} /* Hover davranışları yalnız gerçek işaretçi cihazlarda — dokunmatikte "hover" tek dokunuşta kilitlenip içeriği kalıcı örterdi. */ @media (hover:hover) and (pointer:fine){ [data-tema="atolye"] .urun-kart:hover .at-kart-arka{opacity:1} [data-tema="atolye"] .urun-kart:hover .at-bedenler, [data-tema="atolye"] .urun-kart:focus-within .at-bedenler{transform:none} } /* Dokunmatik: beden satırı hep açık dursun (bilgi gizlenmesin) */ @media (hover:none){ [data-tema="atolye"] .at-bedenler{position:static;transform:none;background:none; backdrop-filter:none;padding:10px 0 0;justify-content:flex-start} [data-tema="atolye"] .at-kart-arka{display:none} } /* ---------- Yatay ray (Yeni Gelenler) ---------- */ [data-tema="atolye"] .at-ray{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr); gap:26px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px; scrollbar-width:thin;scrollbar-color:var(--cizgi) transparent} [data-tema="atolye"] .at-ray > *{scroll-snap-align:start} [data-tema="atolye"] .at-ray::-webkit-scrollbar{height:3px} [data-tema="atolye"] .at-ray::-webkit-scrollbar-thumb{background:var(--cizgi)} [data-tema="atolye"] .at-ray-arac{display:flex;gap:8px} [data-tema="atolye"] .at-ray-arac button{width:44px;height:44px;border:var(--at-kenar); background:transparent;color:var(--yazi);cursor:pointer;display:grid;place-items:center; transition:background var(--at-tempo),border-color var(--at-tempo),color var(--at-tempo)} [data-tema="atolye"] .at-ray-arac button:hover{background:var(--yazi);border-color:var(--yazi);color:#fff} [data-tema="atolye"] .at-ray-arac button svg{width:17px;height:17px;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* ============================================================================ 5) KATEGORİ ÜÇLEMESİ — 2:3 dikey karolar, tip görselin içinde ============================================================================ */ [data-tema="atolye"] .at-uclu{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} [data-tema="atolye"] .at-karo{position:relative;aspect-ratio:2/3;overflow:hidden; text-decoration:none;background:var(--at-keten);display:block} [data-tema="atolye"] .at-karo img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--at-egri)} [data-tema="atolye"] .at-karo:hover img{transform:scale(1.045)} [data-tema="atolye"] .at-karo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(22,22,20,.66) 0%,rgba(22,22,20,.12) 42%,rgba(22,22,20,0) 66%)} [data-tema="atolye"] .at-karo-ic{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 26px} [data-tema="atolye"] .at-karo-ic h3{color:#fff;font-size:clamp(20px,2.2vw,27px);margin:0} [data-tema="atolye"] .at-karo-ic span{display:inline-block;margin-top:11px;color:#fff;font-size:11.5px; letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.55); padding-bottom:3px;transition:border-color var(--at-tempo)} [data-tema="atolye"] .at-karo:hover .at-karo-ic span{border-color:#fff} [data-tema="atolye"] .at-karo-bos{display:grid;place-items:center;height:100%;color:var(--soluk)} [data-tema="atolye"] .at-karo-bos svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1} /* ============================================================================ 6) MARKA ŞERİDİ — sakin, tam genişlik anlatı bandı ============================================================================ */ [data-tema="atolye"] .at-serit{background:var(--at-keten)} [data-tema="atolye"] .at-serit-ic{display:grid;grid-template-columns:1fr 1fr;align-items:stretch; gap:0;min-height:460px} [data-tema="atolye"] .at-serit-gorsel{position:relative;overflow:hidden;background:var(--cizgi)} [data-tema="atolye"] .at-serit-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} [data-tema="atolye"] .at-serit-yazi{display:flex;flex-direction:column;justify-content:center; padding:clamp(36px,5vw,76px)} [data-tema="atolye"] .at-serit-yazi h2{font-size:clamp(26px,3.4vw,40px);margin:0;line-height:1.12} [data-tema="atolye"] .at-serit-yazi p{color:var(--soluk);margin:18px 0 0;max-width:46ch;font-size:15.5px} [data-tema="atolye"] .at-serit-yazi .at-btn{align-self:flex-start;margin-top:30px} /* Güvence satırı — ikon + metin (emoji yok) */ [data-tema="atolye"] .at-guvence{display:grid;grid-template-columns:repeat(4,1fr);gap:26px; padding:var(--at-bosluk-l) 0;border-top:var(--at-kenar);border-bottom:var(--at-kenar)} [data-tema="atolye"] .at-guvence article{display:flex;gap:15px;align-items:flex-start} [data-tema="atolye"] .at-guvence svg{width:25px;height:25px;flex:0 0 auto;fill:none; stroke:var(--vurgu);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px} [data-tema="atolye"] .at-guvence h4{margin:0 0 5px;font-family:var(--govde);font-size:13px; font-weight:600;letter-spacing:.02em} [data-tema="atolye"] .at-guvence p{margin:0;color:var(--soluk);font-size:13.5px;line-height:1.55} /* ============================================================================ 7) GÜNLÜK (blog) ============================================================================ */ [data-tema="atolye"] .at-gunluk{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} [data-tema="atolye"] .at-yazi{text-decoration:none;color:var(--yazi);display:block} [data-tema="atolye"] .at-yazi-gorsel{aspect-ratio:4/3;overflow:hidden;background:var(--at-keten); margin-bottom:17px} [data-tema="atolye"] .at-yazi-gorsel img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--at-egri)} [data-tema="atolye"] .at-yazi:hover .at-yazi-gorsel img{transform:scale(1.04)} [data-tema="atolye"] .at-yazi time{font-size:11px;letter-spacing:.17em;text-transform:uppercase; color:var(--soluk)} [data-tema="atolye"] .at-yazi h3{font-size:20px;margin:9px 0 8px;line-height:1.25} [data-tema="atolye"] .at-yazi p{color:var(--soluk);margin:0;font-size:14px;line-height:1.6} [data-tema="atolye"] .at-yazi-bos{display:grid;place-items:center;height:100%;color:var(--soluk);font-size:13px} /* ============================================================================ 8) BÜLTEN ============================================================================ */ [data-tema="atolye"] .at-bulten{background:var(--yazi);color:#EDE9E2; padding:var(--at-bosluk-l) 0;text-align:center} [data-tema="atolye"] .at-bulten h2{color:#fff;font-size:clamp(25px,3.2vw,36px);margin:0} [data-tema="atolye"] .at-bulten p{color:#B9B3AA;margin:13px auto 0;max-width:46ch} [data-tema="atolye"] .at-bulten form{display:flex;gap:0;max-width:470px;margin:30px auto 0; border-bottom:1px solid rgba(237,233,226,.4)} [data-tema="atolye"] .at-bulten input{flex:1;min-height:48px;border:0;background:none;outline:0; color:#fff;font-family:var(--govde);font-size:15px;padding:0 4px;min-width:0} [data-tema="atolye"] .at-bulten input::placeholder{color:#8E8880} [data-tema="atolye"] .at-bulten button{min-height:48px;padding:0 22px;border:0;background:none; color:#fff;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer; transition:color var(--at-tempo)} [data-tema="atolye"] .at-bulten button:hover{color:var(--vurgu-acik,#7FB3AF)} [data-tema="atolye"] .at-bulten small{display:block;margin-top:15px;color:#8E8880;font-size:12px} /* ============================================================================ 9) FOOTER ============================================================================ */ [data-tema="atolye"] .at-alt{background:var(--at-gece);color:var(--at-gece-yazi)} [data-tema="atolye"] .at-alt-ic{display:grid;grid-template-columns:1.5fr .95fr .9fr 1fr 1.1fr;gap:44px; padding:var(--at-bosluk-l) 0 var(--at-bosluk-m)} [data-tema="atolye"] .at-alt h4{color:#fff;font-family:var(--govde);font-size:11.5px;font-weight:600; letter-spacing:.19em;text-transform:uppercase;margin:0 0 20px} [data-tema="atolye"] .at-alt a{color:var(--at-gece-yazi);text-decoration:none;display:flex; align-items:center;min-height:44px;padding:4px 0;font-size:14px;transition:color var(--at-tempo)} [data-tema="atolye"] .at-alt a:hover{color:#fff} [data-tema="atolye"] .at-alt p{margin:0;font-size:14px;line-height:1.75} [data-tema="atolye"] .at-alt-marka .ad{font-family:var(--bas);font-size:26px;color:#fff;display:block; margin-bottom:15px} /* Marka sütunu iletişim satırları (tel + e-posta) — sosyal ikonların üstünde */ [data-tema="atolye"] .at-iletisim{display:flex;flex-direction:column;gap:8px;margin-top:18px} [data-tema="atolye"] .at-iletisim a{display:inline-flex;align-items:center;gap:9px;color:inherit;font-size:13.5px;opacity:.85;transition:opacity var(--at-tempo)} [data-tema="atolye"] .at-iletisim a:hover{opacity:1} [data-tema="atolye"] .at-iletisim svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} [data-tema="atolye"] .at-sosyal{display:flex;gap:9px;margin-top:16px} [data-tema="atolye"] .at-sosyal a{width:40px;height:40px;border:1px solid #35322E;border-radius:50%; display:grid;place-items:center;padding:0; transition:border-color var(--at-tempo),color var(--at-tempo)} [data-tema="atolye"] .at-sosyal a:hover{border-color:#fff} [data-tema="atolye"] .at-sosyal svg{width:17px;height:17px;fill:currentColor} [data-tema="atolye"] .at-pwa-kur{margin-top:10px;background:none;border:1px solid #3A362F; color:inherit;border-radius:8px;padding:8px 14px;font-size:12.5px;cursor:pointer;letter-spacing:.04em} [data-tema="atolye"] .at-pwa-kur:hover{border-color:#6b655b} [data-tema="atolye"] .at-alt-dip{border-top:1px solid #2A2723;padding:22px 0; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:12.5px;color:#8E8880} [data-tema="atolye"] .at-alt-dip a{display:inline;padding:0;color:#8E8880} [data-tema="atolye"] .at-odeme{display:flex;gap:8px;align-items:center} [data-tema="atolye"] .at-odeme svg{display:block;border-radius:3px} /* Footer Blog sütunu yardımcıları */ [data-tema="atolye"] .at-alt-not{display:block;color:var(--at-gece-yazi);opacity:.75;font-size:13px;padding:4px 0 6px} [data-tema="atolye"] .at-alt-sut .govde .at-alt-tum{margin-top:6px;color:#fff;font-weight:600} /* Masaüstü: link satırları sıkı (44px dokunma alanı yalnız mobil akordiyonda kalır) */ @media(min-width:761px){ [data-tema="atolye"] .at-alt-sut > h4{margin-bottom:14px} [data-tema="atolye"] .at-alt-sut .govde a{min-height:0;padding:6px 0;line-height:1.45} [data-tema="atolye"] .at-alt-sut .govde .at-alt-tum{margin-top:8px} } /* Mobil footer akordiyonu */ [data-tema="atolye"] .at-alt-sut > h4{position:relative;cursor:default} @media(max-width:760px){ [data-tema="atolye"] .at-alt-sut > h4{cursor:pointer;padding:15px 0;margin:0; border-bottom:1px solid #2A2723;display:flex;align-items:center;justify-content:space-between} [data-tema="atolye"] .at-alt-sut > h4::after{content:"";width:9px;height:9px; border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--at-tempo) var(--at-egri)} [data-tema="atolye"] .at-alt-sut.acik > h4::after{transform:rotate(225deg) translate(-2px,-2px)} [data-tema="atolye"] .at-alt-sut > .govde{display:none;padding:9px 0 15px} [data-tema="atolye"] .at-alt-sut.acik > .govde{display:block} } /* ============================================================================ 10) PAYLAŞILAN SAYFALAR — kategori / ürün / sepet uyarlamaları ============================================================================ */ /* Kategori sayfası */ [data-tema="atolye"] .kp-yol{font-size:12px;letter-spacing:.05em;color:var(--soluk)} [data-tema="atolye"] .kp-bas h1{font-size:clamp(28px,4vw,44px)} [data-tema="atolye"] .kp-cip{border-radius:20px;border:var(--at-kenar);background:var(--surface)} [data-tema="atolye"] .kp-gbtn{border-radius:0} [data-tema="atolye"] .filtre,[data-tema="atolye"] .kp-sheet{border-radius:0} [data-tema="atolye"] .kp-sayfa a,[data-tema="atolye"] .kp-sayfa span{border-radius:0} /* Ürün sayfası — dikey galeri, sakin tipografi */ [data-tema="atolye"] .pd-bas h1{font-size:20px;line-height:1.35;font-weight:400} [data-tema="atolye"] .pd .fiyat{font-weight:500} [data-tema="atolye"] .pd-alt-btn,[data-tema="atolye"] .pd .btn{border-radius:0;letter-spacing:.12em; text-transform:uppercase;font-size:12px} [data-tema="atolye"] .pd-beden-birim{border-radius:0} /* Paylaşılan ürün sayfası denetimleri 44px'in altındaydı (favori 42, paylaş 19×36, vitrin okları 34). Yalnız bu temanın kapsamında büyütülür — diğer temalar etkilenmez. Ekmek kırıntısı bağlantıları kasıtlı dokunulmadı: satır içi metin bağlantıları WCAG 2.5.8'in "inline" istisnasına girer, büyütmek satır ritmini bozar. */ [data-tema="atolye"] .pd-kalp{width:44px;height:44px} [data-tema="atolye"] .pd-paylas .pp-btn{min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center} [data-tema="atolye"] .vitrin-ok{width:44px;height:44px;border-radius:0} /* Genel: bu temada yuvarlak köşe yok — editöryel keskinlik */ [data-tema="atolye"] .btn,[data-tema="atolye"] .kutu,[data-tema="atolye"] .kart, [data-tema="atolye"] input,[data-tema="atolye"] select,[data-tema="atolye"] textarea{border-radius:0} /* ============================================================================ 11) DUYARLI DÜZEN — 1180 / 1000 / 760 / 480 ============================================================================ */ @media(max-width:1180px){ [data-tema="atolye"] .at-sarma{width:min(var(--at-sinir),calc(100% - 36px))} [data-tema="atolye"] .urun-grid,[data-tema="atolye"] .at-grid{gap:34px 20px} [data-tema="atolye"] .at-alt-ic{grid-template-columns:1.4fr 1fr 1fr;gap:38px} [data-tema="atolye"] .at-alt-marka{grid-column:1/-1} /* 5 sütun tablete sığmaz: marka üste yayılır */ [data-tema="atolye"] .at-alt-sut:last-child{grid-column:1/-1} } @media(max-width:1000px){ [data-tema="atolye"] .urun-grid,[data-tema="atolye"] .at-grid{grid-template-columns:repeat(3,1fr)} [data-tema="atolye"] .at-uclu{grid-template-columns:1fr 1fr} [data-tema="atolye"] .at-uclu > :nth-child(3){display:none} [data-tema="atolye"] .at-gunluk{grid-template-columns:1fr 1fr} [data-tema="atolye"] .at-gunluk > :nth-child(3){display:none} [data-tema="atolye"] .at-guvence{grid-template-columns:1fr 1fr;gap:30px} [data-tema="atolye"] .at-serit-ic{grid-template-columns:1fr;min-height:0} [data-tema="atolye"] .at-serit-gorsel{aspect-ratio:16/10;position:relative} [data-tema="atolye"] .at-bolum{padding:var(--at-bosluk-l) 0} } @media(max-width:760px){ [data-tema="atolye"] .at-sarma{width:calc(100% - 28px)} [data-tema="atolye"] .at-kunye-bag{display:none} [data-tema="atolye"] .at-kunye-ic{justify-content:center;text-align:center} [data-tema="atolye"] .at-bas-ic{padding:12px 0;gap:8px} [data-tema="atolye"] .at-marka .ad{font-size:22px} [data-tema="atolye"] .at-marka .alt{letter-spacing:.3em;text-indent:.3em;font-size:8.5px} [data-tema="atolye"] .at-nav{display:none} /* dizin çekmeceye taşınır */ [data-tema="atolye"] .urun-grid,[data-tema="atolye"] .at-grid{ grid-template-columns:1fr 1fr;gap:28px 14px} [data-tema="atolye"] .at-ray{grid-auto-columns:minmax(190px,60vw)} [data-tema="atolye"] .at-ray-arac{display:none} /* dokunmatikte kaydırma yeter */ [data-tema="atolye"] .at-uclu{grid-template-columns:1fr;gap:14px} [data-tema="atolye"] .at-uclu > :nth-child(3){display:block} [data-tema="atolye"] .at-karo{aspect-ratio:4/3} [data-tema="atolye"] .at-gunluk{grid-template-columns:1fr;gap:34px} [data-tema="atolye"] .at-gunluk > :nth-child(3){display:block} [data-tema="atolye"] .at-guvence{grid-template-columns:1fr;gap:24px;padding:38px 0} [data-tema="atolye"] .at-alt-ic{grid-template-columns:1fr;gap:0;padding:38px 0 24px} [data-tema="atolye"] .at-alt-marka{margin-bottom:24px} [data-tema="atolye"] .at-alt-dip{justify-content:center;text-align:center} [data-tema="atolye"] .at-hero{min-height:clamp(400px,calc(64vh / var(--mz,1)),560px)} [data-tema="atolye"] .at-bolum{padding:52px 0} [data-tema="atolye"] .at-bolum-bas{margin-bottom:24px} } @media(max-width:480px){ [data-tema="atolye"] .urun-kart .hizli-ekle{font-size:10.5px;letter-spacing:.1em;padding:0 6px} [data-tema="atolye"] .at-hero p{font-size:14px;margin-top:10px} /* yönetimde yazılan slogan telefonda da görünür */ [data-tema="atolye"] .at-hero-btnlar .at-btn{flex:1 0 100%} } /* Yatay (landscape) küçük ekran — hero ekranı yutmasın */ @media(max-height:520px) and (orientation:landscape){ [data-tema="atolye"] .at-hero{min-height:420px} } /* ============================================================================ 12) HAREKET AZALTMA — sistem tercihine saygı ============================================================================ */ @media (prefers-reduced-motion:reduce){ [data-tema="atolye"] *,[data-tema="atolye"] *::before,[data-tema="atolye"] *::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} [data-tema="atolye"] .urun-kart:hover .gorsel img, [data-tema="atolye"] .at-karo:hover img, [data-tema="atolye"] .at-yazi:hover .at-yazi-gorsel img{transform:none} [data-tema="atolye"] .at-hero-kare{opacity:1;transform:none !important} [data-tema="atolye"] .at-hero-kare:not(.aktif){display:none} } /* Yazdırma — fotoğraf ve krom değil, bilgi kalsın */ @media print{ [data-tema="atolye"] .at-kunye,[data-tema="atolye"] .at-nav,[data-tema="atolye"] .at-bulten, [data-tema="atolye"] .at-ara-kat,[data-tema="atolye"] .at-cekmece,[data-tema="atolye"] .at-perde{display:none} } /* ============================================================================ 14) ANA SAYFA EKLERİ — Günün Fırsatı, sekmeli Ürünler, Markalar şeridi ============================================================================ */ /* Sekme hapları ("Ürünler" başlığının sağında: Öne Çıkan / Yeni Gelenler / Çok Satan) */ [data-tema="atolye"] .at-sek{display:flex;gap:8px;flex-wrap:wrap} [data-tema="atolye"] .at-sek button{padding:11px 20px;border:var(--at-kenar);background:var(--surface); color:var(--yazi);font:inherit;font-size:13px;letter-spacing:.03em;cursor:pointer; transition:background var(--at-tempo),color var(--at-tempo),border-color var(--at-tempo)} [data-tema="atolye"] .at-sek button:hover{border-color:var(--yazi)} [data-tema="atolye"] .at-sek button.aktif{background:var(--vurgu);border-color:var(--vurgu);color:#fff} /* hidden niteliği .at-grid{display:grid} yazar kuralına YENİLİYORDU (UA display:none'u ezilir): üç sekme listesi alt alta görünüyor, tıklama "filtrelemiyor" sanılıyordu */ [data-tema="atolye"] [data-sek-icerik][hidden]{display:none} /* Günün Fırsatı kartı — sol görsel, sağ geri sayım + fiyat + satın alma */ [data-tema="atolye"] .at-firsat{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:clamp(22px,4vw,56px);align-items:center;background:var(--surface);border:var(--at-kenar); padding:clamp(18px,3vw,44px)} [data-tema="atolye"] .at-firsat-g{position:relative;display:block;background:#fff;overflow:hidden; border:var(--at-kenar)} [data-tema="atolye"] .at-firsat-g img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:contain} [data-tema="atolye"] .at-firsat-bos{display:block;aspect-ratio:4/5} [data-tema="atolye"] .at-firsat-rozet{position:absolute;top:14px;left:14px;background:var(--at-kiremit); color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;padding:6px 12px} [data-tema="atolye"] .at-firsat-ic h3{font-size:clamp(22px,2.6vw,32px);margin:18px 0 10px} [data-tema="atolye"] .at-firsat-ic h3 a{color:inherit;text-decoration:none} [data-tema="atolye"] .at-firsat-ic h3 a:hover{text-decoration:underline;text-underline-offset:4px} [data-tema="atolye"] .at-firsat-ic>p{color:var(--soluk);max-width:52ch} [data-tema="atolye"] .at-firsat-fiyat{display:flex;align-items:baseline;gap:12px;margin-bottom:8px} [data-tema="atolye"] .at-firsat-fiyat .at-fiyat{font-family:var(--bas);font-size:clamp(22px,2.4vw,30px)} [data-tema="atolye"] .at-firsat-fiyat .eski{color:var(--soluk);font-size:15px} [data-tema="atolye"] .at-geri{display:flex;gap:10px} [data-tema="atolye"] .at-geri b{display:grid;place-items:center;min-width:66px;padding:8px 10px; border:var(--at-kenar);background:var(--zemin);font-weight:400} [data-tema="atolye"] .at-geri .at-sayi{font-family:var(--bas);font-size:22px;line-height:1.15} [data-tema="atolye"] .at-geri small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soluk)} [data-tema="atolye"] .at-firsat-al{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:stretch} [data-tema="atolye"] .at-firsat-al input{width:72px;padding:0 10px;border:var(--at-kenar);background:var(--surface); font:inherit;text-align:center} [data-tema="atolye"] .at-firsat-al .at-btn[disabled]{opacity:.5;cursor:not-allowed} @media(max-width:860px){[data-tema="atolye"] .at-firsat{grid-template-columns:1fr}} /* Markalar şeridi — footer'ın hemen üstünde, tipografik logo dizisi */ [data-tema="atolye"] .at-markalar{border-top:var(--at-kenar);background:var(--surface); padding:clamp(22px,3vw,34px) 0} /* üst boşluk yok: önceki bölümün kendi dolgusu yeter, bültene bitişik durur */ [data-tema="atolye"] .at-markalar-ic{display:flex;align-items:center;gap:16px} [data-tema="atolye"] .at-marka-ray{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(130px,1fr); gap:10px;overflow:hidden;text-align:center;align-items:center} [data-tema="atolye"] .at-marka-ray a,[data-tema="atolye"] .at-marka-ray span{display:block;padding:6px 4px; font-family:var(--bas);font-size:clamp(15px,1.6vw,19px);letter-spacing:.14em;text-transform:uppercase; color:var(--soluk);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color var(--at-tempo)} [data-tema="atolye"] .at-marka-ray a:hover{color:var(--yazi)} [data-tema="atolye"] .at-marka-ok{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center; border:var(--at-kenar);background:var(--surface);cursor:pointer;color:var(--yazi); transition:border-color var(--at-tempo)} [data-tema="atolye"] .at-marka-ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} [data-tema="atolye"] .at-marka-ok:hover{border-color:var(--yazi)} @media(max-width:640px){[data-tema="atolye"] .at-marka-ray{grid-auto-columns:minmax(104px,1fr)}} /* ---------- Geniş ekranda her şey biraz daha büyük ---------- Tema px tabanlı; tek tek büyütmek yerine belge ölçeği. 1400px+ %10, 1800px+ %16. Ölçek (zoom) düzeni bozmaz: 1520px sarmal 1920 ekranda hâlâ sığar. Mobil/tablet etkilenmez. */ @media (min-width:1400px){ [data-tema="atolye"] body{zoom:1.1} } @media (min-width:1800px){ [data-tema="atolye"] body{zoom:1.16} } /* ---------- Ürün kartı kutusu (mağaza sahibinin örneği): beyaz zemin, açık gri ince çerçeve, 12px köşe, görsel–bilgi arasında çizgi yok; bilgi alanı çok açık gri. Diğer parçalar aynen. */ [data-tema="atolye"] .urun-kart{background:#fff;border:1px solid #e9e9e9;border-radius:12px;padding-bottom:0} [data-tema="atolye"] .urun-kart:hover{border-color:#d4d4d4;box-shadow:0 10px 26px -18px rgba(0,0,0,.28)} [data-tema="atolye"] .urun-kart .gorsel{border-bottom:0;background:#fff} [data-tema="atolye"] .urun-kart .ic{background:#f8f8f8;padding:14px 13px 16px;margin:0} /* ---------- Fiyat satırı (örnek): önce üstü çizili eski fiyat (gri), sonra indirimli fiyat (kırmızı, kalın); ürün adı kalın. "Yeni" etiketi SAĞ üst köşede; kalp etiketin altına iner. */ [data-tema="atolye"] .urun-kart h3{font-weight:700;font-size:15px;letter-spacing:.01em} [data-tema="atolye"] .urun-kart .fiyat-satir{gap:10px} [data-tema="atolye"] .urun-kart .eski{order:1;font-size:16px;font-weight:700;color:#9a9a9a;text-decoration:line-through} [data-tema="atolye"] .urun-kart .fiyat{order:2;font-size:18px;font-weight:700;color:var(--yazi)} [data-tema="atolye"] .urun-kart .fiyat.ind-f{color:#e4322b} [data-tema="atolye"] .urun-kart .kazanc{display:none} [data-tema="atolye"] .at-kart-etiket,[data-tema="atolye"] .urun-kart .ind + .at-kart-etiket,[data-tema="atolye"] .at-kart-etiket.ikinci{left:auto;right:0;top:0;border-radius:0 0 0 6px} [data-tema="atolye"] .urun-kart .gorsel:has(.at-kart-etiket) .kalp{top:34px} /* Kart altındaki renk/varyant kutucukları (nokta/kare satırı) gösterilmez — mağaza sahibi istemedi; varyant seçimi ürün sayfasında. Görsel şeridi (.at-kucukler) bundan bağımsız. */ [data-tema="atolye"] .urun-kart .uk-varyant{display:none} /* "Yeni" etiketi: yeşil yumuşak rozet (örnekteki gibi), köşeden içeride, hafif gölge */ [data-tema="atolye"] .at-kart-etiket,[data-tema="atolye"] .urun-kart .ind + .at-kart-etiket,[data-tema="atolye"] .at-kart-etiket.ikinci{ top:10px;right:10px;background:#2e7d4f;color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em; padding:5px 11px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.18)} [data-tema="atolye"] .urun-kart .gorsel:has(.at-kart-etiket) .kalp{top:40px} /* "Yeni" etiketi indirim rozeti gibi tam köşede (sağ üst), kart köşesine yaslı */ [data-tema="atolye"] .at-kart-etiket,[data-tema="atolye"] .urun-kart .ind + .at-kart-etiket,[data-tema="atolye"] .at-kart-etiket.ikinci{ top:0;right:0;border-radius:0 0 0 8px;box-shadow:none;padding:6px 11px} [data-tema="atolye"] .urun-kart .gorsel:has(.at-kart-etiket) .kalp{top:34px}