/* ========================================================================== Indri Ethnics — Duyuru şeridi (header'ın en üstü) Koyu bant + accent vurgular, yavaş akan ticker. Markup: templates/parts/ announce.php, davranış: assets/js/announce.js, metin/mantık: inc/announce.php. Yükseklik sözleşmesi (header.css ile ortak): --sc-bar-h = header çubuğunun kendi yüksekliği (logo/menü satırı) --sc-announce-h= duyuru şeridinin yüksekliği --sc-header-h = header bloğunun TOPLAM yüksekliği (şerit dahil) Sayfa içerikleri (product.css, shop.css, mobil menü, toast, header.js) boşluklarını --sc-header-h üzerinden hesapladığı için şerit açılınca/kapanınca hepsi kendiliğinden doğru yere oturur; başka dosyaya dokunmak gerekmez. ========================================================================== */ :root { --sc-announce-h: 2.75rem; /* Akış süresi: JS içerik genişliğine göre (~60px/sn) yeniden hesaplar. Buradaki değer JS çalışmazsa geçerli olan makul yedektir. */ --sc-announce-dur: 45s; } /* Şerit açıkken header toplamı büyür (5rem + 2.75rem). Düz bir değer olarak yazılır (calc() değil): token birden çok dosyada okunuyor, tek bakışta "header altı burada başlar" demesi için. Durum sınıfıyla DEĞİL `:has()` ile okunuyor — bilinçli karar: sayfada bir script çalışma anında `document.documentElement.className`'i tamamen "js" olarak eziyor (2026-08-10'da CDP ile ölçüldü), yani köke eklenen her sınıf sessizce kayboluyor. Şeridin kendi sınıfı (`is-closed`) kimsenin ezmediği tek güvenli yer. Özgüllük (0,2,0) > product.css'teki `:root` (0,1,0): kaynak sırasından bağımsız kazanır. */ html:has(.sc-announce:not(.is-closed)) { --sc-header-h: 7.75rem; } /* :has() desteklemeyen (çok eski) tarayıcıda yükseklik sözleşmesi kurulamaz → şerit içeriğin üstünü örtmesin diye hiç gösterilmez. Sayfa bozulmaz. */ @supports not selector(:has(*)) { .sc-announce { display: none; } } .sc-announce { position: relative; z-index: 1; display: flex; align-items: center; height: var(--sc-announce-h); /* Şeridin kendi zemini: header'ın siyahından bir tık açık → ince bir katman hissi verir, çizgiye ihtiyaç kalmaz. */ background: var(--sc-surface); overflow: hidden; transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } /* Şerit ile header çubuğunu ayıran, kenarlara doğru sönümlenen accent çizgi (header'ın kendi ::after çizgisiyle aynı dil). */ .sc-announce::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(200, 240, 74, 0.45), transparent); pointer-events: none; } /* Ghost header (anasayfa + takeover + sepet/ödeme): bar tamamen şeffaf olduğu için şerit de cam olur — altındaki hero/görsel hafifçe geçer. */ .sc-site-header.sc-header--ghost .sc-announce { background: rgba(17, 17, 17, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* --- Kapalı hâller -------------------------------------------------------- 1) Ziyaretçi × ile kapattı (şeride is-closed eklenir; ilk yüklemede bunu şeridin hemen ardındaki satır içi script boyamadan önce yapar) 2) Sayfa kaydırıldı → header daralırken şerit de toplanır; en üste dönünce geri gelir. "Rahatsız etmeme" tarafı büyük ölçüde bu davranıştan gelir. */ .sc-announce.is-closed, .sc-site-header.is-shrunk .sc-announce { height: 0; opacity: 0; pointer-events: none; } /* --- Akan şerit ----------------------------------------------------------- */ .sc-announce__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; /* Metin kenarlarda kesilmek yerine sönümlenerek girer/çıkar. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%); } .sc-announce__track { display: flex; width: max-content; animation: sc-announce-scroll var(--sc-announce-dur) linear infinite; } /* `transform` DEĞİL bağımsız `translate`: style.css'teki `a, a *, … { transform: none !important }` kuralı bu ağaca değmiyor olsa da proje geneli kural bağımsız özellikleri tercih ediyor (DESIGN-SYSTEM §7). -50%: iki set birebir eşit, ikincisi tam birincinin yerine oturur → dikişsiz. */ @keyframes sc-announce-scroll { from { translate: 0 0; } to { translate: -50% 0; } } /* Okumak isteyen için: üzerine gelince akış durur. Header daralmışken şerit görünmüyor → animasyon da boşuna dönmesin. */ .sc-announce:hover .sc-announce__track, .sc-site-header.is-shrunk .sc-announce__track { animation-play-state: paused; } .sc-announce__set { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; white-space: nowrap; color: var(--sc-text); font-family: var(--sc-header-font); font-size: 0.8rem; font-weight: 700; /* `1` DEĞİL: satır kutusu glyph boyuna eşitlenince, viewport'un overflow:hidden'ı Türkçe harflerin üst/alt işaretlerini (İ'nin noktası, Ş/Ç'nin çengeli) kırpıyordu. Şerit yüksekliği sabit ve içerik dikeyde ortalı olduğundan bu değer düzeni bozmaz. */ line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; } /* Kampanyanın rakamları: accent + hafif ışıma. Metnin geri kalanı sakin kalır. */ .sc-announce__hi, .sc-announce__hi * { color: var(--sc-accent); } .sc-announce__hi { text-shadow: 0 0 14px rgba(200, 240, 74, 0.35); } /* Ayraç: yavaşça dönen accent kare — 45°'de elmasa dönüşür. Unicode yıldız (✳) denendi ve bırakıldı: tarayıcı onu renkli emoji olarak çizip accent rengini yok sayıyordu. CSS kutusu her cihazda aynı. */ .sc-announce__sep { flex: 0 0 auto; width: 0.4rem; height: 0.4rem; background: var(--sc-accent); opacity: 0.7; animation: sc-announce-spin 9s linear infinite; } @keyframes sc-announce-spin { to { rotate: 360deg; } } /* --- Kapatma -------------------------------------------------------------- */ .sc-announce__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-right: 0.5rem; padding: 0; color: var(--sc-muted); font-family: var(--sc-header-font); font-size: 1.05rem; line-height: 1; background: none; border: 1px solid transparent; cursor: pointer; /* Native buton görünümünü kapat (bazı Android/Chrome sürümlerinde köşeli sistem kutusu basıyor) — header ikonlarıyla aynı önlem. */ appearance: none; -webkit-appearance: none; /* !important burada zorunlu ve bilinçli istisna: Salient'in "Button Style" ayarı (Nectar Options) site genelinde her