/** * HK Cat Litter — ana sayfa tasarim stilleri. * Sifir JS. Yalnizca on sayfada yuklenir (hk-seo.php). * Header ve footer temaya aittir; burada onlara dokunulmaz. */ .hk-h { --turuncu: rgb(242, 109, 31); --turuncu-koyu: #d4541a; --turuncu-acik: #fff3ec; --zeytin: #5c6b47; --koyu: #1d1d1b; --gri: #5c5c5c; --acik: #faf8f5; --cizgi: #e8e2db; --radius: 16px; font-size: 16px; color: var(--koyu); line-height: 1.65; } .hk-h * { box-sizing: border-box; } .hk-h { max-width: 100%; } .hk-h img { max-width: 100%; height: auto; } /* Tema icerigi kutulu (max-width'li) bir kapta veriyor. Arka plani olan bolumler bu kaptan tasip ekranin tamamini kaplasin diye tam-genislik (full-bleed) teknigi kullaniliyor. Icerik yine .hk-wrap ile ortalanir. */ .hk-h .hk-tam { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* DIKKAT: Ara kaplara overflow-x verilmemeli — tam-genislik bolumleri kirpar. Yatay kayma olusursa yalnizca kilitlenir. */ body.home { overflow-x: clip; } /* DIKKAT: Temanin UST boslugu KALDIRILMAMALI. Woodmart basligi overlay (yukseklik=0, uzerine cizilen) oldugu icin ust bosluk sifirlanirsa H1 menu bandinin altina girer. Ust bosluk oldugu gibi birakilir; hero'nun arka planindaki bosluk .hk-hero::before ile doldurulur. Yalnizca ALT bosluk sifirlanir ki kapanis CTA'si footer'a yapissin. */ body.home .wd-page-content.main-page-wrapper, body.home main.content-layout-wrapper, body.home .wd-content-area.site-content, body.home article.entry-content { padding-bottom: 0; margin-bottom: 0; } .hk-h .hk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; width: 100%; } /* Grid/flex ogeleri icerigi tarafindan sisirilmesin */ .hk-h .hk-grid > *, .hk-h .hk-ikili > *, .hk-h .hk-hero-ic > * { min-width: 0; } .hk-h section { padding: 68px 0; } .hk-h section.hk-tight { padding: 48px 0; } /* --------------------------------------------------- tipografi */ .hk-h h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.2; margin: 0 0 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--koyu); } .hk-h h3 { font-size: 1.12rem; margin: 0 0 8px; font-weight: 700; color: var(--koyu); } .hk-h .hk-ust { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--turuncu); margin-bottom: 10px; } .hk-h .hk-alt { font-size: 1.03rem; color: var(--gri); max-width: 720px; margin: 0 0 34px; } .hk-h .hk-orta { text-align: center; } .hk-h .hk-orta .hk-alt { margin-left: auto; margin-right: auto; } /* --------------------------------------------------- butonlar */ .hk-h .hk-btn, .hk-h .hk-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: 999px; font-weight: 700; font-size: 0.97rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; border: 2px solid transparent; } .hk-h .hk-btn { background: var(--turuncu); color: #fff; box-shadow: 0 8px 20px rgba(242, 109, 31, .28); } .hk-h .hk-btn:hover { background: var(--turuncu-koyu); color: #fff; transform: translateY(-2px); } .hk-h .hk-btn2 { background: transparent; color: var(--koyu); border-color: var(--cizgi); } .hk-h .hk-btn2:hover { border-color: var(--turuncu); color: var(--turuncu); } /* --------------------------------------------------- hero */ /* Woodmart basligi masaustunde OVERLAY (hero'nun uzerine cizilir, yer kaplamaz). Bu yuzden ust ic bosluk baslik yuksekligini (~120px) asmali, yoksa H1 menu bandinin altina girer. Mobilde baslik akista yer kapladigi icin bu deger media query ile kucultulur. */ .hk-h .hk-hero { background: linear-gradient(160deg, #fffaf6 0%, #fff3ec 55%, #ffe9dc 100%); padding: 165px 0 70px; position: relative; } /* Temanin icerik kabi ile sayfanin tepesi arasinda kalan bosluk, hero'nun arka planiyla doldurulur. Yukseklikten bagimsiz calisir: sozde ogeyi yukari dogru uzatiriz, tasan kisim govde disinda kalir ve gorunmez. */ .hk-h .hk-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 300px; background: #fffaf6; pointer-events: none; } .hk-h .hk-hero-ic { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; } .hk-h .hk-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.02em; } .hk-h .hk-hero h1 em { font-style: normal; color: var(--turuncu); } .hk-h .hk-hero p.hk-lede { font-size: 1.1rem; color: #444; margin: 0 0 26px; max-width: 560px; } .hk-h .hk-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; } .hk-h .hk-rozet { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.9rem; color: #3c3c3c; font-weight: 600; } .hk-h .hk-rozet span::before { content: "✓"; color: var(--turuncu); font-weight: 800; margin-right: 6px; } .hk-h .hk-hero-gorsel img { width: 100%; height: auto; border-radius: 22px; display: block; box-shadow: 0 24px 50px rgba(0, 0, 0, .13); } /* --------------------------------------------- kayan guven seridi */ .hk-h .hk-marka { position: relative; background: linear-gradient(100deg, var(--turuncu-koyu) 0%, var(--turuncu) 48%, #f5813f 100%); padding: 0; overflow: hidden; /* ust ve altta ince parlaklik: seride derinlik verir */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(0, 0, 0, .14); } /* Kenarlarda yumusak silinme — ogeler aniden kesilmez */ .hk-h .hk-marka-pencere { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); overflow: hidden; } .hk-h .hk-marka-yol { display: flex; width: max-content; animation: hk-kay 46s linear infinite; will-change: transform; } /* Fare uzerindeyken dur — kullanici okumak isteyebilir */ .hk-h .hk-marka:hover .hk-marka-yol, .hk-h .hk-marka:focus-within .hk-marka-yol { animation-play-state: paused; } @keyframes hk-kay { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .hk-h .hk-marka-sira { display: flex; align-items: center; flex: 0 0 auto; padding: 20px 0; } .hk-h .hk-marka-oge { display: inline-flex; align-items: center; gap: 10px; padding: 0 30px; color: #fff; font-size: 0.95rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; line-height: 1; } /* Ilk oge marka vurgusu: biraz daha buyuk ve dolu */ .hk-h .hk-marka-oge.hk-one { font-size: 1.02rem; font-weight: 800; letter-spacing: .03em; } /* Ayirac: 45 derece dondurulmus kucuk kare */ .hk-h .hk-marka-oge::after { content: ""; width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .55); transform: rotate(45deg); margin-left: 30px; flex: 0 0 auto; } /* Sayisal degerler icin hafif rozet */ .hk-h .hk-marka-oge i { font-style: normal; font-weight: 800; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34); padding: 5px 10px; border-radius: 999px; font-size: 0.86rem; letter-spacing: .02em; } /* Hareket hassasiyeti olan kullanicilar: animasyon yok, elle kaydirilir */ @media (prefers-reduced-motion: reduce) { .hk-h .hk-marka-yol { animation: none; } .hk-h .hk-marka-pencere { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .hk-h .hk-marka-sira:last-child { display: none; } } /* --------------------------------------------------- kartlar */ .hk-h .hk-grid { display: grid; gap: 22px; } .hk-h .hk-g2 { grid-template-columns: repeat(2, 1fr); } .hk-h .hk-g3 { grid-template-columns: repeat(3, 1fr); } .hk-h .hk-g4 { grid-template-columns: repeat(4, 1fr); } .hk-h .hk-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hk-h .hk-kart:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .07); border-color: #ded5cb; } .hk-h .hk-kart p { margin: 0; color: var(--gri); font-size: 0.95rem; } .hk-h .hk-ikon { width: 46px; height: 46px; border-radius: 12px; background: var(--turuncu-acik); color: var(--turuncu); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 14px; } /* --------------------------------------------------- urunler */ .hk-h .hk-urunler { background: var(--acik); } .hk-h .hk-urun { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } .hk-h .hk-urun:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .09); } .hk-h .hk-urun img { width: 100%; height: auto; display: block; background: #f4f1ec; } .hk-h .hk-urun-ic { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; } .hk-h .hk-urun h3 { font-size: 1rem; margin-bottom: 4px; } /* Urun adi artik baglanti (anchor metni SEO icin degerli). Gorsel olarak basliktan ayrilmamali: renk ve alti cizili olmayan hali devralir. */ .hk-h .hk-urun h3 a { color: inherit; text-decoration: none; } .hk-h .hk-urun h3 a:hover, .hk-h .hk-urun h3 a:focus-visible { color: var(--turuncu-koyu, #c4551a); text-decoration: underline; text-underline-offset: 2px; } .hk-h .hk-urun .hk-birim { font-size: 0.83rem; color: #8a8a8a; margin: 0 0 12px; } .hk-h .hk-fiyat { font-size: 1.32rem; font-weight: 800; color: var(--turuncu); margin: auto 0 12px; } .hk-h .hk-urun .hk-btn { padding: 11px 20px; font-size: 0.9rem; width: 100%; } .hk-h .hk-etiket { position: absolute; margin: 12px; background: var(--turuncu); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; letter-spacing: .03em; } /* --------------------------------------------------- iki sutun anlatim */ .hk-h .hk-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } .hk-h .hk-ikili img { width: 100%; height: auto; border-radius: 20px; display: block; box-shadow: 0 18px 40px rgba(0, 0, 0, .11); } .hk-h .hk-ikili.hk-ters .hk-metin { order: 2; } .hk-h .hk-liste { list-style: none; padding: 0; margin: 22px 0 0; } .hk-h .hk-liste li { position: relative; padding-left: 32px; margin-bottom: 14px; color: var(--gri); font-size: 0.97rem; } .hk-h .hk-liste li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--turuncu-acik); border: 2px solid var(--turuncu); } .hk-h .hk-liste li b { color: var(--koyu); } /* --------------------------------------------------- karsilastirma */ .hk-h .hk-tablo-sar { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--cizgi); background: #fff; } .hk-h table.hk-kars { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.93rem; } .hk-h table.hk-kars th, .hk-h table.hk-kars td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--cizgi); } .hk-h table.hk-kars thead th { background: var(--koyu); color: #fff; font-weight: 700; font-size: 0.86rem; letter-spacing: .02em; } .hk-h table.hk-kars thead th:first-child { border-radius: 0; } .hk-h table.hk-kars tbody tr:nth-child(even) { background: #fcfaf8; } .hk-h table.hk-kars td:first-child { font-weight: 600; } .hk-h table.hk-kars .hk-vurgu { background: var(--turuncu-acik) !important; font-weight: 700; color: var(--turuncu-koyu); } .hk-h table.hk-kars tbody tr:last-child td { border-bottom: 0; } /* --------------------------------------------------- adimlar */ .hk-h .hk-adimlar { counter-reset: adim; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .hk-h .hk-adim { position: relative; padding-top: 54px; } .hk-h .hk-adim::before { counter-increment: adim; content: counter(adim); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--turuncu); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; } .hk-h .hk-adim p { margin: 0; color: var(--gri); font-size: 0.94rem; } /* --------------------------------------------------- bilgi merkezi */ .hk-h .hk-bilgi { background: var(--acik); } .hk-h .hk-silo { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 24px 22px; } .hk-h .hk-silo h3 { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--cizgi); } /* Emoji yerine cihaz bagimsiz isaret: her siloya kendi rengi */ .hk-h .hk-silo h3::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--turuncu); transform: rotate(45deg); } .hk-h .hk-silo:nth-child(2) h3::before { background: #7a8f5a; } .hk-h .hk-silo:nth-child(3) h3::before { background: #4a90a4; } .hk-h .hk-silo:nth-child(4) h3::before { background: #b06a9e; } .hk-h .hk-silo:nth-child(5) h3::before { background: #c0553f; } .hk-h .hk-silo:nth-child(6) h3::before { background: #d99a2b; } .hk-h .hk-silo:nth-child(7) h3::before { background: #5c8a58; } .hk-h .hk-silo:nth-child(8) h3::before { background: #6b6f8c; } .hk-h .hk-silo ul { list-style: none; padding: 0; margin: 0; } .hk-h .hk-silo li { margin-bottom: 9px; } .hk-h .hk-silo a { color: #3d3d3d; text-decoration: none; font-size: 0.93rem; transition: color .15s ease, padding-left .15s ease; display: inline-block; } .hk-h .hk-silo a:hover { color: var(--turuncu); padding-left: 4px; } /* --------------------------------------------------- SSS */ .hk-h .hk-sss details { background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .hk-h .hk-sss summary { cursor: pointer; padding: 17px 52px 17px 20px; font-weight: 650; font-size: 1rem; list-style: none; position: relative; color: var(--koyu); } .hk-h .hk-sss summary::-webkit-details-marker { display: none; } .hk-h .hk-sss summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--turuncu); font-weight: 400; line-height: 1; } .hk-h .hk-sss details[open] summary::after { content: "−"; } .hk-h .hk-sss details[open] summary { color: var(--turuncu); } .hk-h .hk-sss .hk-cevap { padding: 0 20px 18px; color: var(--gri); font-size: 0.95rem; } .hk-h .hk-sss .hk-cevap p { margin: 0 0 10px; } .hk-h .hk-sss .hk-cevap a { color: var(--turuncu-koyu); } /* --------------------------------------------- SSS + yorumlar ikili */ .hk-h .hk-sss-ikili { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 44px; align-items: start; } .hk-h .hk-sss-sol h2, .hk-h .hk-sss-sol .hk-alt { text-align: left; } /* Yorum paneli masaustunde kaydirmada yapisik kalir */ .hk-h .hk-yorum-panel { position: sticky; top: 24px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 28px 26px; } .hk-h .hk-yorum-panel h2 { font-size: 1.32rem; margin-bottom: 18px; } .hk-h .hk-yorum-giris { color: var(--gri); font-size: 0.94rem; margin: 0 0 20px; } /* --- gercek yorumlar --- */ .hk-h .hk-yorum-liste { display: grid; gap: 14px; } .hk-h .hk-yorum { background: var(--acik); border: 1px solid var(--cizgi); border-radius: 12px; padding: 18px 18px 15px; display: flex; flex-direction: column; /* Kartlar esit yukseklikte dursun */ min-height: 168px; } .hk-h .hk-yildiz { color: var(--turuncu); font-size: 0.95rem; letter-spacing: .12em; margin-bottom: 8px; } .hk-h .hk-yorum-metin { margin: 0 0 12px; color: #3f3f3f; font-size: 0.94rem; flex: 1; /* Uzun yorumlar kartin dengesini bozmasin */ display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .hk-h .hk-yorum footer { border-top: 1px solid var(--cizgi); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; } .hk-h .hk-yorum footer b { font-size: 0.9rem; } .hk-h .hk-yorum footer span { font-size: 0.8rem; color: #8d8d8d; } .hk-h .hk-yorum-davet { margin-top: 22px; background: var(--turuncu-acik); border-radius: 12px; padding: 18px 20px; } .hk-h .hk-yorum-davet b { display: block; margin-bottom: 5px; font-size: 0.96rem; } .hk-h .hk-yorum-davet p { margin: 0 0 14px; font-size: 0.9rem; color: var(--gri); } .hk-h .hk-yorum-davet .hk-btn2 { padding: 10px 20px; font-size: 0.88rem; background: #fff; } @media (max-width: 991px) { .hk-h .hk-sss-ikili { grid-template-columns: 1fr; gap: 34px; } .hk-h .hk-yorum-panel { position: static; } } /* --------------------------------------------------- kapanis CTA */ .hk-h .hk-kapanis { background: linear-gradient(135deg, var(--turuncu) 0%, #e0651f 100%); color: #fff; text-align: center; } .hk-h .hk-kapanis h2 { color: #fff; } .hk-h .hk-kapanis .hk-alt { color: rgba(255, 255, 255, .92); /* 720px kutu bolumun ortasinda dursun */ margin: 0 auto 28px; } .hk-h .hk-kapanis .hk-btn { background: #fff; color: var(--turuncu-koyu); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); } .hk-h .hk-kapanis .hk-btn:hover { background: #fff8f4; color: var(--turuncu-koyu); } .hk-h .hk-kapanis .hk-btn2 { color: #fff; border-color: rgba(255, 255, 255, .55); } .hk-h .hk-kapanis .hk-btn2:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .12); } /* --------------------------------------------------- bilgi kutusu */ .hk-h .hk-not { background: var(--turuncu-acik); border-left: 4px solid var(--turuncu); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 26px 0 0; font-size: 0.95rem; color: #4a4a4a; } .hk-h .hk-not b { color: var(--koyu); } /* --------------------------------------------------- duyarli */ @media (max-width: 991px) { .hk-h .hk-hero-ic, .hk-h .hk-ikili { grid-template-columns: 1fr; gap: 34px; } .hk-h .hk-ikili.hk-ters .hk-metin { order: 0; } .hk-h .hk-g4 { grid-template-columns: repeat(2, 1fr); } .hk-h .hk-adimlar { grid-template-columns: repeat(2, 1fr); } .hk-h .hk-serit-ic { grid-template-columns: repeat(2, 1fr); gap: 22px; } .hk-h section { padding: 52px 0; } /* Bu genislikten itibaren tema 60px'lik mobil basligi kullaniyor — ama o da OVERLAY (yer kaplamiyor). Ust bosluk 60px'i asmali, yoksa ust yazi menu bandina degiyor. 100px = 60 baslik + 40 nefes payi. */ .hk-h .hk-hero { padding: 100px 0 50px; } } @media (max-width: 640px) { .hk-h .hk-g2, .hk-h .hk-g3, .hk-h .hk-g4, .hk-h .hk-adimlar { grid-template-columns: 1fr; } /* Baslik burada da 60px overlay; ust bosluk korunur. */ .hk-h .hk-hero { padding: 96px 0 44px; } .hk-h section { padding: 44px 0; } .hk-h .hk-hero-btns .hk-btn, .hk-h .hk-hero-btns .hk-btn2 { width: 100%; } } /* --------------------------- deneyim kartlari (yorum paneli) */ .hk-h .hk-deneyim h3 { font-size: 0.98rem; margin: 0 0 8px; color: var(--turuncu-koyu, #c4551a); } .hk-h .hk-deneyim .hk-yorum-metin { -webkit-line-clamp: 6; } .hk-h .hk-deneyim footer a { color: var(--koyu); font-size: 0.84rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--turuncu); align-self: flex-start; padding-bottom: 1px; } .hk-h .hk-deneyim footer a:hover { color: var(--turuncu-koyu, #c4551a); }