/* ==================================================== FANTAZI — ANA SAYFA'ya özel stiller (Ortak stiller global.css'te. Burada sadece hero, kategoriler, ürünler, avantaj şeridi.) ==================================================== */ /* ==================================================== HERO SLIDER (editorial, auto-fill progress + pause/play) Görsel içinde başlık/altbaşlık · altında açıklama. Masaüstü yatay görsel (--img-d) · mobil dikey görsel (--img-m). ==================================================== */ .hero { padding-top: 30px; padding-bottom: 30px; } .hero__stage { } .hero__slides { position: relative; border-radius: var(--radius); overflow: hidden; touch-action: pan-y; } .hero__slides, .hero__slide { min-height: 560px; } .hero__slide { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; background-image: var(--img-d); background-size: cover; background-position: center; color: var(--renk-beyaz); text-align: center; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; } .hero__slide.is-active { opacity: 1; visibility: visible; position: relative; } .hero__caption { position: relative; z-index: 1; padding-bottom: var(--space-64); max-width: 800px; padding-left: var(--space-20); padding-right: var(--space-20); } .hero__title { color: #fff; font-family: var(--font-baslik); font-size: clamp(30px, 4.5vw, 56px); line-height: 1.05; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-12); text-shadow: 0 2px 20px rgba(26,20,22,.85), 0 0 40px rgba(26,20,22,.55); } .hero__subtitle { color: #fff; font-size: clamp(13px, 1.1vw, 16px); text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 1px 16px rgba(26,20,22,.9), 0 0 30px rgba(26,20,22,.5); } /* Oklar (görselin kenarında, minimal) */ .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: var(--radius-full); background: transparent; border: none; cursor: pointer; color: var(--renk-beyaz); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .hero__arrow:hover { background: rgba(255,255,255,.18); } .hero__arrow .icon { width: 26px; height: 26px; } .hero__arrow--prev { left: var(--space-12); } .hero__arrow--prev .icon { transform: rotate(90deg); } .hero__arrow--next { right: var(--space-12); } .hero__arrow--next .icon { transform: rotate(-90deg); } /* Alt kontrol: her slayt için gösterge — aktifken dolan bar, değilken nokta */ .hero__ctrl { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--space-20); display: flex; align-items: center; justify-content: center; gap: var(--space-10); } .hero__ind { width: 8px; height: 8px; border-radius: 999px; padding: 0; cursor: pointer; border: 1px solid transparent; background: rgba(255,255,255,.5); overflow: hidden; transition: width .35s ease, background .35s ease; box-sizing: border-box; } .hero__ind:hover { background: rgba(255,255,255,.8); } /* Aktif: geniş + beyaz border + içi boş; süreyle içi TAM YÜKSEKLİK beyaz dolar */ .hero__ind.is-active { width: 56px; background: transparent; border-color: var(--renk-beyaz); } .hero__ind-fill { display: block; height: 100%; width: 0; background: var(--renk-beyaz); border-radius: 999px; } .hero__ind.is-active .hero__ind-fill { width: var(--hero-progress, 0%); } .hero__playpause { width: auto; height: 16px; padding: 0; border: none; background: none; cursor: pointer; color: var(--renk-beyaz); display: inline-flex; align-items: center; justify-content: center; } .hero__playpause .icon { width: 13px; height: 13px; } .hero__ic-play { display: none; } .hero.is-paused .hero__ic-pause { display: none; } .hero.is-paused .hero__ic-play { display: block; } /* Görselin altında açıklama (sağa hizalı, referanstaki gibi) */ .hero__desc { margin-top: var(--space-16); font-size: var(--fs-14); color: var(--renk-metin-soft); line-height: 1.6; text-align: right; max-width: 460px; margin-left: auto; } /* ==================================================== COMPONENT 1: SPLIT SHOWCASE Sol tam görsel + sağ başlık/CTA + mini ürün şeridi + progress ==================================================== */ .showcase { padding-top: 30px; padding-bottom: 30px; overflow-x: clip; /* full-bleed şeridin yatay taşmasını kes (sticky'yi bozmaz) */ /* container'ın sağ iç kenarından viewport sağına olan mesafe (şeridi sağa taşırmak için) */ --sc-right: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad))); } /* 12 kolon: sol görsel 1/6, sağ içerik 6/13 (bitişik) */ .showcase__grid { align-items: stretch; } .showcase__visual { grid-column: 1 / 6; display: block; background-size: cover; background-position: center; min-height: 460px; border-radius: var(--radius); } .showcase__content { grid-column: 6 / 13; display: flex; flex-direction: column; justify-content: center; padding: var(--space-24) 0 var(--space-24) var(--space-32); } .showcase__head { margin-bottom: var(--space-32); } .showcase__title { font-family: var(--font-baslik); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; margin-bottom: var(--space-16); max-width: 420px; } .showcase__desc { font-size: var(--fs-15); color: var(--renk-metin-soft); line-height: 1.6; max-width: 420px; margin-bottom: var(--space-16); } .showcase__cta { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--renk-metin); text-decoration: underline; text-underline-offset: 4px; } .showcase__cta:hover { color: var(--renk-marka); } /* Ürün kartı şeridi — sağ kenar viewport'a kadar (sıfıra sıfır) */ .showcase__strip { display: flex; gap: var(--space-16); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-16); margin-right: calc(var(--sc-right) * -1); } .showcase__strip::-webkit-scrollbar { display: none; } .showcase__strip .pcard { flex: 0 0 clamp(190px, 15vw, 220px); border-radius: var(--radius); } .scitem:hover img { transform: scale(1.06); } /* Progress track — şeritle aynı sağ kenar (viewport'a kadar), ince */ .showcase__track { height: 2px; background: var(--renk-cizgi); border-radius: 999px; overflow: hidden; margin-right: calc(var(--sc-right) * -1); } .showcase__thumb { height: 100%; width: 30%; background: var(--renk-koyu); border-radius: 999px; } /* ==================================================== COMPONENT 2: İKİLİ PROMO BLOKLAR Görsel + wine panel (tag + başlık + metin + CTA) ==================================================== */ /* 12 kolon grid: 1 boş - 5 - 5 - 1 boş */ .promos { padding-top: 30px; padding-bottom: 30px; overflow-x: clip; } .promos__grid { } .promo { grid-column: span 4; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; min-height: 340px; transition: var(--transition); } .promo:nth-of-type(1) { grid-column: 2 / 7; } .promo:nth-of-type(2) { grid-column: 7 / 12; } .promo:hover { box-shadow: var(--shadow-hover); } /* Masaüstü/mobil ayrı görsel — PHP tarafında iki CSS custom property olarak inline verilir (--promo-img-desktop / --promo-img-mobil), hangisinin kullanılacağı burada media query ile seçilir. */ .promo__img { background-image: var(--promo-img-desktop); background-size: cover; background-position: center; } /* İçerik üstten başlar, CTA en altta sabit → iki kart eşit yükseklikteyken başlık/metin/buton aynı hizada durur. */ .promo__panel { background: var(--renk-koyu); color: var(--renk-beyaz); padding: var(--space-32); display: flex; flex-direction: column; justify-content: flex-start; } .promo__cta { margin-top: auto; } .promo__tag { font-size: var(--fs-12); color: var(--renk-nude); margin-bottom: var(--space-14); letter-spacing: .5px; } .promo__title { font-family: var(--font-baslik); font-size: var(--fs-24); line-height: 1.25; margin-bottom: var(--space-14); color: var(--renk-beyaz); } .promo__text { font-size: var(--fs-14); color: rgba(255,255,255,.8); line-height: 1.6; margin-bottom: var(--space-24); } .promo__cta { display: inline-flex; align-items: center; gap: var(--space-10); font-size: var(--fs-13); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: var(--renk-beyaz); } .promo__cta .icon { width: 18px; height: 18px; transition: transform var(--transition); } .promo:hover .promo__cta .icon { transform: translateX(5px); } /* Metnin altına soldan sağa kayarak açılan çizgi */ .promo__cta-txt { position: relative; } .promo__cta-txt::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--renk-beyaz); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.4,0,.2,1); } .promo:hover .promo__cta-txt::after { transform: scaleX(1); } /* ==================================================== COMPONENT 3: KATEGORİ ÜRÜN KARUSELİ Sol sabit başlık/CTA + sağda oklu pcard slider ==================================================== */ .katkarusel { padding-top: 30px; padding-bottom: 30px; overflow-x: clip; } /* Sayfanın son component'i footer'a yapışmasın */ .katkarusel:last-of-type { margin-bottom: var(--space-64); } .katkarusel__inner { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-32); align-items: center; padding-left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad))); } .katkarusel__aside { } .katkarusel__title { font-family: var(--font-baslik); font-size: var(--fs-24); line-height: 1.2; margin-bottom: var(--space-8); } .katkarusel__sub { font-size: var(--fs-14); color: var(--renk-metin-soft); margin-bottom: var(--space-16); } .katkarusel__link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--renk-marka); } .katkarusel__link .icon { width: 15px; height: 15px; } .katkarusel__link:hover { color: var(--renk-koyu); } .katkarusel__scrollwrap { position: relative; min-width: 0; } .katkarusel__scroll { display: flex; gap: var(--space-16); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-right: var(--container-pad); } .katkarusel__scroll::-webkit-scrollbar { display: none; } .katkarusel__scroll .pcard { flex: 0 0 clamp(210px, 20vw, 250px); border-radius: var(--radius); } /* Oklar */ .katkarusel__arrow { position: absolute; top: 40%; z-index: 4; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); cursor: pointer; color: var(--renk-koyu); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: var(--transition); } .katkarusel__arrow:hover { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); } .katkarusel__arrow .icon { width: 18px; height: 18px; } .katkarusel__arrow--prev { left: calc(var(--space-16) * -1 - 22px); } .katkarusel__arrow--prev .icon { transform: rotate(180deg); } .katkarusel__arrow--next { right: var(--space-16); } .katkarusel__arrow[hidden] { display: none; } /* ==================================================== RESPONSIVE — ana sayfa ==================================================== */ @media (max-width: 989px) { /* Hero: mobilde full-bleed + header'a bitişik + header/footer arasına tam sığar */ .hero { padding-top: 0; } .hero > .container { padding-left: 0; padding-right: 0; max-width: none; } /* Stage = kullanılabilir yükseklik (ekran - header - alt navbar); görsel + açıklama bu alana sığar */ .hero__stage { display: flex; flex-direction: column; height: calc(100dvh - var(--sticky-top, 120px) - var(--botnav-gap) - var(--botnav-h) - env(safe-area-inset-bottom, 0)); min-height: 460px; } .hero__slides { position: relative; border-radius: 0; flex: 1; min-height: 0; max-height: none; } /* Mobilde slides sabit (flex) yükseklik alır; slide'lar absolute ile onu doldurur (aktif slide relative bırakılırsa caption kadar kısa kalıp altta boşluk oluşuyordu). */ .hero__slide, .hero__slide.is-active { position: absolute; inset: 0; min-height: 0; max-height: none; background-image: var(--img-m); } .hero__arrow { display: none; } .hero__caption { padding-bottom: var(--space-44); } /* Açıklama: sabit yükseklik alan, container padding'i içinde, ortalı */ .hero__desc { flex: 0 0 auto; text-align: center; max-width: 100%; margin: var(--space-14) auto 0; padding: 0 var(--container-pad-mob) var(--space-14); } /* Showcase: mobilde görsel üstte, içerik altta (tam genişlik, grid 6 kolon) */ .showcase { padding-top: 30px; padding-bottom: 30px; } .showcase__visual { grid-column: 1 / -1; min-height: 300px; } .showcase__content { grid-column: 1 / -1; padding: var(--space-24) 0 0; } /* Promo: mobilde yatay kaydırılabilir slider (kart = görsel üstte + panel altta) */ .promos { padding-top: 30px; padding-bottom: 30px; overflow-x: visible; } /* Container'ın sağ padding'ini kaldır → grid sağ kenara (sıfıra sıfır) dayanır */ .promos > .container { padding-right: 0; } .promos__grid { display: flex; gap: var(--space-16); align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-right: 0; /* son kart ekranın sağ kenarına dayanır (sıfıra sıfır) */ } .promos__grid::-webkit-scrollbar { display: none; } .promo, .promo:nth-of-type(1), .promo:nth-of-type(2) { grid-column: auto; flex: 0 0 76%; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 0; } .promo__img { flex: 0 0 auto; aspect-ratio: 16 / 11; background-image: var(--promo-img-mobil); } .promo__panel { flex: 1; padding: var(--space-24); } /* paneller uzayıp kartları eşit yükseklikte tutar */ .promo__title { font-size: var(--fs-18); } /* mobilde başlık daha küçük */ /* Karusel: başlık üstte, slider altta */ .katkarusel { padding-top: 30px; padding-bottom: 30px; } .katkarusel__inner { grid-template-columns: 1fr; gap: var(--space-16); padding-left: var(--container-pad-mob); } .katkarusel__arrow { display: none; } .katkarusel__scroll .pcard { flex-basis: 54vw; } /* mobilde ~1.8 kart (devamı var hissi + varyant paneli sığar) */ } /* Küçük mobil: kartlar çok darsa varyant paneli için biraz büyüt */ @media (max-width: 480px) { .katkarusel__scroll .pcard { flex-basis: 62vw; } /* dar ekranda ~1.5 kart, panel rahat sığar */ } /* Tablet: masaüstü layout korunur, kart ~2.5-3 kart görünür */ @media (min-width: 768px) and (max-width: 989px) { .katkarusel__scroll .pcard { flex-basis: 34vw; } } /* ==================================================== SEO ANLATIM — dönüşümlü görsel/metin satırları (.seo-story) 12 kolon grid üstünde: satır 1 ve 3 → metin sol / görsel sağ, satır 2 → görsel sol / metin sağ. Görseller şimdilik gradient placeholder; gerçek görsel gelince .seo-story__tile'a background-image verilir. ==================================================== */ .seo-story { padding-top: 30px; padding-bottom: 30px; border-top: 1px solid var(--renk-cizgi); } /* --- Blokların 12 kolonda yerleşimi (masaüstü) --- grid-row buradan kaldırıldı — sabit 1/2/3 sadece ilk 3 satırda doğru çalışıyordu, 4. satırdan itibaren $sira deseni (1/2/3) tekrarladığı için hep grid-row:3'e denk gelip önceki satırla çakışıyordu. Artık her PHP satırının gerçek grid satırı (index.php/koleksiyon.php'de $gridRow = $i+1) inline style="grid-row:N" ile veriliyor — bu class'lar sadece grid-column (görsel/metin dönüşümlü tarafı) ve margin belirliyor. */ .seo-story .grid-12 { row-gap: 60px; } .seo-story__text--1 { grid-column: 1 / 7; align-self: center; } .seo-story__media--1 { grid-column: 7 / 13; align-self: center; } .seo-story__media--2 { grid-column: 1 / 7; align-self: center; } .seo-story__text--2 { grid-column: 7 / 13; align-self: center; } .seo-story__text--3 { grid-column: 1 / 7; align-self: center; } .seo-story__media--3 { grid-column: 7 / 13; align-self: center; } /* --- Metin tarafı = PROSE bloğu --- İçerik CKEditor'dan class'sız düz HTML olarak gelir; bu yüzden TÜM stiller ana kapsayıcı .seo-story__text üzerinden (eleman seçicilerle) tanımlanır. Editorde h2/p/ul/ol/a/strong/em/blockquote ne yazılırsa otomatik biçimlenir. */ /* İlk/son elemanın dış boşluğu bloğu bozmasın */ .seo-story__text > *:first-child { margin-top: 0; } .seo-story__text > *:last-child { margin-bottom: 0; } /* Başlıklar */ .seo-story__text h2 { font-family: var(--font-baslik); font-size: var(--fs-28); color: var(--renk-metin); line-height: 1.2; margin: 0 0 var(--space-16); } .seo-story__text h3 { font-size: var(--fs-18); color: var(--renk-metin); margin: var(--space-24) 0 var(--space-10); } .seo-story__text h4 { font-size: var(--fs-16); color: var(--renk-metin); font-weight: var(--fw-semibold); margin: var(--space-20) 0 var(--space-8); } /* Paragraf + satır içi */ .seo-story__text p { color: var(--renk-metin-soft); font-size: var(--fs-15); line-height: 1.8; margin: 0 0 var(--space-16); } .seo-story__text strong, .seo-story__text b { color: var(--renk-metin); font-weight: var(--fw-semibold); } .seo-story__text em, .seo-story__text i { font-style: italic; } /* Prose linkleri (editor içeriği). CTA kartı hariç — o kendi stilinde. */ .seo-story__text a:not(.seo-story__cta) { color: var(--renk-marka); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); } .seo-story__text a:not(.seo-story__cta):hover { color: var(--renk-koyu); } /* Listeler — editorden gelen düz