/** * DijitalPiksel Tema 01 — Temel Stiller * --------------------------------------------------------------------- * Renk ve font değerleri burada SABİT yazılmaz — functions.php'deki * dpx_tema_dinamik_stil() fonksiyonu tarafından içine basılan * CSS değişkenlerini (--dpx-ana-renk vb.) kullanır. Müşteri Tema * Ayarları'ndan renk değiştirdiğinde bu dosyaya hiç dokunmadan tüm * site güncellenir. */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--dpx-metin-font); color: #1a1a1a; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--dpx-baslik-font); line-height: 1.25; margin: 0 0 0.5em; } .dpx-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--dpx-ana-renk); } /* ===== Buton ===== */ .dpx-buton { display: inline-block; padding: 12px 28px; background: var(--dpx-ana-renk); color: #fff; text-decoration: none; border: none; border-radius: var(--dpx-buton-radius); font-family: var(--dpx-baslik-font); font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; } .dpx-buton:hover { opacity: 0.88; color: #fff; } .dpx-buton--ikincil { background: var(--dpx-ikincil-renk); } /* ===== Header ===== */ #site-header { border-bottom: 1px solid #eee; } /* Header'ın slider'ın üzerine oturması (Tema Ayarları > Header) — sadece anasayfada, slider'ın üzerine mutlak konumla oturur. Body'nin normal akışından çıkar, bu sayede slider hemen sayfanın en üstünden başlar. Beyaz VE Şeffaf stillerinin İKİSİ İÇİN DE ortak konumlanma kuralı — aralarındaki fark sadece aşağıdaki "skin" (arka plan/yazı rengi) kurallarında. */ #site-header.dpx-header--anasayfa-uzeri { position: absolute; top: 0; left: 0; right: 0; z-index: 30; border-bottom: none; } /* Şeffaf / Buzlu Cam skin */ #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf { background: rgba(12, 12, 12, 0.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .dpx-logo-metin, #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .dpx-ana-menu > ul > li > a { color: #fff; } #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .dpx-ana-menu > ul > li > a:hover { color: var(--dpx-ikincil-renk); } /* Açılır alt menünün zemini her zaman beyaz kalır (şeffaf header'da bile) — o yüzden alt menü linkleri her zaman koyu renkte kalmalı. */ #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .dpx-ana-menu .sub-menu a { color: #1a1a1a; } #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .dpx-ana-menu .sub-menu a:hover { color: var(--dpx-ikincil-renk); } /* Beyaz skin — üstte oturuyor ama opak beyaz zemin, yazılar normal koyu renginde kalır (arka plan zaten yeterli kontrastı sağlıyor). */ #site-header.dpx-header--anasayfa-uzeri.dpx-header--beyaz { background: #fff; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08); } .dpx-header-ic { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; } .dpx-logo { text-decoration: none; } .dpx-logo-img { width: 100%; height: auto; /* max-width, Tema Ayarları > Logo Genişliği ile satır içi (inline) olarak kontrol edilir. */ } .dpx-logo-metin { font-family: var(--dpx-baslik-font); font-size: 22px; font-weight: 700; color: #1a1a1a; } .dpx-ana-menu > ul { display: flex; /* align-items: center olmazsa flex öğeleri varsayılan olarak 'stretch' olur. Normal menü linklerinde bu fark etmiyor çünkü hepsi aynı yükseklikte; ama menüye eklenen dil seçici gibi kendi iç boşluğu olan bir öğe geldiğinde o öğe uzuyor ve yazısı diğerlerinden aşağıda kalıyor. */ align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .dpx-ana-menu li { position: relative; } .dpx-ana-menu a { text-decoration: none; color: #1a1a1a; font-weight: 500; } .dpx-ana-menu a:hover { /* Vurgu rengi (kırmızı). Şeffaf header'da zaten böyleydi; beyaz header ve iç sayfalarda antrasit kalıyordu — normal metin rengiyle neredeyse aynı olduğu için hover hissedilmiyordu. İki skin arasında tek bir davranış. */ color: var(--dpx-ikincil-renk); } /* Alt menüsü olan öğelere küçük bir ok işareti */ .dpx-ana-menu li.menu-item-has-children > a::after { content: "\25BE"; font-size: 10px; margin-left: 5px; display: inline-block; } /* Açılır (dropdown) alt menü — masaüstünde üzerine gelince açılır */ .dpx-ana-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; display: flex; flex-direction: column; list-style: none; margin: 0; padding: 8px 0; background: #fff; border-radius: 6px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; } .dpx-ana-menu li:hover > .sub-menu, .dpx-ana-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dpx-ana-menu .sub-menu a { display: block; padding: 10px 20px; white-space: nowrap; color: #1a1a1a; font-weight: 400; } .dpx-ana-menu .sub-menu a:hover { background: #F4F2F2; color: var(--dpx-ikincil-renk); } .dpx-ana-menu .sub-menu li.menu-item-has-children > a::after { content: ""; margin-left: 0; } /* ===== KVKK Banner ===== */ .dpx-kvkk-banner { background: #1a1a1a; color: #fff; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; padding: 16px 0; } .dpx-kvkk-ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .dpx-kvkk-ic p { margin: 0; font-size: 14px; } #dpx-kvkk-kabul { background: var(--dpx-ana-renk); color: #fff; border: none; border-radius: var(--dpx-buton-radius); padding: 8px 20px; cursor: pointer; flex-shrink: 0; } /* ===== Footer ===== */ /* ===== Footer ===== */ #site-footer { background: var(--dpx-ana-renk); color: rgba(255, 255, 255, 0.75); margin-top: 60px; } .dpx-footer-ust { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; padding-top: 64px; padding-bottom: 40px; } .dpx-footer-sutun h3 { color: #fff; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 20px; } .dpx-footer-logo { display: block; max-width: 150px; height: auto; margin-bottom: 18px; } .dpx-footer-logo-metin { display: block; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 18px; } .dpx-footer-aciklama { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.65); } .dpx-footer-menu nav ul, .dpx-footer-iletisim ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .dpx-footer-menu nav a, .dpx-footer-iletisim li, .dpx-footer-iletisim li a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; line-height: 1.6; } .dpx-footer-menu nav a:hover, .dpx-footer-iletisim li a:hover { color: var(--dpx-ikincil-renk); } .dpx-footer-alt { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px 0; text-align: center; } .dpx-telif-hakki { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); } /* ===== WhatsApp Yüzen Buton ===== */ .dpx-whatsapp-buton { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 998; transition: transform 0.2s ease; } .dpx-whatsapp-buton:hover { transform: scale(1.06); color: #fff; } .dpx-whatsapp-buton svg { width: 28px; height: 28px; } /* ===== Mobil Uyum ===== */ #site-header { position: relative; } .dpx-menu-tetik { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .dpx-menu-tetik span { display: block; width: 100%; height: 2px; border-radius: 2px; background: #1a1a1a; transition: transform 0.2s ease, opacity 0.2s ease; } #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .dpx-menu-tetik span { background: #fff; } .dpx-menu-tetik.is-acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .dpx-menu-tetik.is-acik span:nth-child(2) { opacity: 0; } .dpx-menu-tetik.is-acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .dpx-ana-menu-mobil { display: none; } @media (max-width: 860px) { .dpx-ana-menu { display: none; } .dpx-menu-tetik { display: flex; } .dpx-ana-menu-mobil { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: #fff; padding: 8px 24px 16px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); z-index: 40; /* Menüye dil seçici gibi uzun listeli bir öğe eklendiğinde panel ekran boyunu aşıyor ve alt öğelere erişilemiyordu. Yükseklik sınırı + kendi içinde kaydırma, menüye ne eklenirse eklensin hepsine ulaşılmasını sağlıyor. */ /* 100vh mobil tarayıcılarda adres çubuğu GİZLİYKENKİ yüksekliği verir; adres çubuğu açıkken panel görünür alandan taşar ve alt öğelere ulaşılamaz. dvh (dynamic viewport height) gerçek görünür yüksekliği verir. vh satırı, dvh desteklemeyen eski tarayıcılar için yedek. */ max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Giriş yapmış kullanıcıda WordPress admin çubuğu üstte 46px yer kaplıyor; menü yüksekliğini ona göre kısıyoruz. */ body.admin-bar .dpx-ana-menu-mobil { max-height: calc(100vh - 136px); max-height: calc(100dvh - 136px); } .dpx-ana-menu-mobil.is-acik { display: flex; } .dpx-ana-menu-mobil ul { list-style: none; margin: 0; padding: 0; } .dpx-ana-menu-mobil a { display: block; padding: 14px 0; text-decoration: none; color: #1a1a1a; font-weight: 500; border-bottom: 1px solid #eee; } .dpx-ana-menu-mobil a:hover { color: var(--dpx-ikincil-renk); } /* Alt menü öğeleri girintili ve her zaman açık şekilde listelenir — mobilde ayrı bir tıkla-aç mantığına gerek kalmaz. */ .dpx-ana-menu-mobil .sub-menu { list-style: none; margin: 0; padding-left: 16px; } .dpx-ana-menu-mobil .sub-menu a { font-size: 14px; font-weight: 400; color: #555; } } @media (max-width: 782px) { .dpx-header-ic { gap: 12px; } } /* ===================================================================== * ANASAYFA BÖLÜMLERİ * ===================================================================== */ .dpx-bolum { padding: 72px 0; } .dpx-bolum-baslik { font-size: 32px; text-align: center; margin-bottom: 48px; position: relative; } .dpx-bolum-baslik::after { content: ''; display: block; width: 56px; height: 4px; background: var(--dpx-ikincil-renk); border-radius: 2px; margin: 16px auto 0; } /* ===== Slider ===== */ .dpx-slider { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: #111; } .dpx-slider-track { position: relative; width: 100%; height: 100%; } .dpx-slayt { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .dpx-slayt.is-aktif { opacity: 1; } .dpx-slayt-gorsel { width: 100%; height: 100%; object-fit: cover; } .dpx-slayt-baslik-kutu { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); } .dpx-slayt-baslik { color: var(--dpx-slayt-baslik-renk, #fff); font-size: var(--dpx-slayt-baslik-boyut, 28px); margin: 0; max-width: 700px; } .dpx-slayt-aciklama { color: var(--dpx-slayt-aciklama-renk, #fff); font-size: var(--dpx-slayt-aciklama-boyut, 16px); max-width: 600px; margin: 12px 0 0; line-height: 1.6; } .dpx-slayt-buton { margin-top: 20px; } .dpx-slider-noktalar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; } .dpx-slider-nokta { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; padding: 0; } .dpx-slider-nokta.is-aktif { background: #fff; } /* Tema Ayarları > Slider > Tam Ekran açıksa */ .dpx-slider--tam-ekran { aspect-ratio: auto; height: 100vh; } /* WordPress admin çubuğu (sadece giriş yapmış yöneticiye görünür, 32px masaüstü / 46px mobil) hesaba katılmazsa iki sorun oluşur: şeffaf header admin çubuğunun ÜSTÜNE biner, ve tam ekran slider gerçek görünür alandan 32px fazla uzar (scroll'da "bitmiyor" hissi verir). Bu kurallar sadece admin çubuğu görünürken devreye girer — ziyaretçi siteyi normal görür, bu tema-01'de de aynı desenle kullanılmalı. */ body.admin-bar #site-header.dpx-header--anasayfa-uzeri { top: 32px; } body.admin-bar .dpx-slider--tam-ekran { height: calc(100vh - 32px); } @media screen and (max-width: 782px) { body.admin-bar #site-header.dpx-header--anasayfa-uzeri { top: 46px; } body.admin-bar .dpx-slider--tam-ekran { height: calc(100vh - 46px); } } /* Ok Navigasyonu (Tema Ayarları'ndan aç/kapa) */ .dpx-slider-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.85); color: var(--dpx-ana-renk); font-size: 16px; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .dpx-slider-ok:hover { background: #fff; } .dpx-slider-ok--sol { left: 20px; } .dpx-slider-ok--sag { right: 20px; } /* Yazı Konumu (Tema Ayarları > Slider > Yazı Konumu) — 3x3 kombinasyon */ .dpx-slayt-baslik-kutu { position: absolute; inset: 0; display: flex; padding: 48px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%); pointer-events: none; } /* Başlık + buton bu kutu içinde alt alta durur (dış kutu pointer-events: none olduğu için burada tekrar "auto" ile buton tıklanabilir kılınır). */ .dpx-slayt-icerik { pointer-events: auto; max-width: 700px; } /* Yatay hizalama */ .dpx-yazi-yatay--sol { justify-content: flex-start; } .dpx-yazi-yatay--orta { justify-content: center; } .dpx-yazi-yatay--sag { justify-content: flex-end; } /* Dikey hizalama */ .dpx-yazi-dikey--ust { align-items: flex-start; } .dpx-yazi-dikey--orta { align-items: center; } .dpx-yazi-dikey--alt { align-items: flex-end; } .dpx-yazi-yatay--sol .dpx-slayt-icerik { text-align: left; } .dpx-yazi-yatay--orta .dpx-slayt-icerik { text-align: center; } .dpx-yazi-yatay--sag .dpx-slayt-icerik { text-align: right; } .dpx-yazi-dikey--ust.dpx-slayt-baslik-kutu { background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%); } .dpx-yazi-dikey--orta.dpx-slayt-baslik-kutu { background: rgba(0, 0, 0, 0.35); } /* ===== Tanıtım — 3 stil ===== */ /* --- Stil 1: Sade (ortalı, görselsiz) --- */ .dpx-tanitim--sade { padding: 88px 0; border-bottom: 1px solid #eee; } .dpx-tanitim-sade-ic { max-width: 760px; text-align: center; } .dpx-tanitim-etiket { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dpx-ikincil-renk); } .dpx-tanitim-etiket-cizgi { display: inline-block; width: 40px; height: 1px; background: var(--dpx-ikincil-renk); } .dpx-tanitim--sade h2 { font-size: 34px; margin: 0 0 24px; } .dpx-tanitim-sade-metin { color: #555; font-size: 17px; line-height: 1.8; } /* --- Stil 2: İstatistikli (görsel + yüzde halkaları) --- */ .dpx-tanitim--istatistikli { padding: 80px 0; } .dpx-tanitim-ist-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .dpx-tanitim-ist-ic--gorsel-sag .dpx-tanitim-ist-gorsel { order: 2; } .dpx-tanitim-ist-gorsel img { border-radius: 16px; } .dpx-tanitim-etiket-duz { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dpx-ikincil-renk); } .dpx-tanitim-ist-metin h2 { font-size: 32px; margin: 0 0 20px; } .dpx-tanitim-ist-metin p { color: #444; font-size: 17px; margin-bottom: 32px; } .dpx-tanitim-halkalar { display: flex; flex-wrap: wrap; gap: 32px; } .dpx-tanitim-halka-oge { display: flex; align-items: center; gap: 16px; } .dpx-tanitim-halka { --dpx-yuzde: 0; width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--dpx-ikincil-renk) calc(var(--dpx-yuzde) * 1%), #eceae5 0); display: flex; align-items: center; justify-content: center; position: relative; } .dpx-tanitim-halka::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; } .dpx-tanitim-halka span { position: relative; z-index: 1; font-weight: 700; font-size: 17px; color: var(--dpx-ana-renk); } .dpx-tanitim-halka-etiket { max-width: 160px; font-size: 14px; font-weight: 600; color: #333; line-height: 1.4; } /* --- Stil 3: Özellik Listeli (ikonlu liste + görsel) --- */ .dpx-tanitim--ozellikli { padding: 80px 0; } .dpx-tanitim-oz-ic { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .dpx-tanitim-oz-ic--gorsel-sol .dpx-tanitim-oz-gorsel { order: -1; } .dpx-tanitim-oz-gorsel img { border-radius: 16px; } .dpx-tanitim-oz-metin h2 { font-size: 32px; margin: 0 0 20px; } .dpx-tanitim-oz-metin p { color: #444; font-size: 17px; margin-bottom: 32px; } .dpx-tanitim-ozellik-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .dpx-tanitim-ozellik-oge { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .dpx-tanitim-ozellik-ikon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .dpx-tanitim-ozellik-ikon img { width: 100%; height: 100%; object-fit: contain; } .dpx-tanitim-ozellik-oge span { font-size: 14px; font-weight: 600; color: #222; line-height: 1.3; } /* ===== Kart Grid (Hizmetler / Referanslar ortak) ===== */ .dpx-kart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .dpx-kart { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .dpx-kart:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08); } .dpx-kart-gorsel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .dpx-kart-icerik { padding: 24px; text-align: center; } .dpx-kart-icerik--sola { text-align: left; } .dpx-kart-baslik { font-size: 19px; margin: 0 0 10px; } .dpx-kart-metin { color: #555; font-size: 15px; margin: 0; } .dpx-referans-kart .dpx-kart-icerik { border-top: 3px solid var(--dpx-ikincil-renk); } /* ===== İstatistik ===== */ .dpx-istatistik { background: var(--dpx-ana-renk); padding: 56px 0; } .dpx-istatistik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; } .dpx-istatistik-kutu { display: flex; flex-direction: column; gap: 8px; } .dpx-istatistik-rakam { font-family: var(--dpx-baslik-font); font-size: 44px; font-weight: 700; color: var(--dpx-ikincil-renk); line-height: 1; } .dpx-istatistik-etiket { color: #fff; font-size: 15px; opacity: 0.85; } /* ===== Galeri Önizleme ===== */ .dpx-galeri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .dpx-galeri-oge { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; } .dpx-galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .dpx-galeri-oge:hover img { transform: scale(1.06); } .dpx-galeri-baslik-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); color: #fff; font-weight: 600; font-size: 15px; } /* ===== Ekibimiz ===== */ .dpx-ekip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; } .dpx-ekip-foto img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; margin: 0 auto 16px; } .dpx-ekip-isim { font-size: 17px; margin: 0 0 4px; } .dpx-ekip-unvan { color: #666; font-size: 14px; margin: 0 0 10px; } .dpx-ekip-sosyal { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f0f0f0; color: var(--dpx-ana-renk); text-decoration: none; font-size: 15px; } .dpx-ekip-sosyal:hover { background: var(--dpx-ikincil-renk); color: #fff; } /* ===== Markalar Şeridi ===== */ .dpx-markalar { padding: 48px 0; } .dpx-markalar-serit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; } .dpx-marka-oge { display: inline-flex; } .dpx-marka-logo { max-height: 96px; width: auto; object-fit: contain; } /* ===== Albüm Detay Sayfası ===== */ .dpx-albuim-ust { padding-top: 56px; padding-bottom: 32px; text-align: center; } .dpx-albuim-geri { display: inline-block; margin-bottom: 24px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--dpx-ana-renk); opacity: 0.7; transition: opacity 0.2s ease; } .dpx-albuim-geri:hover { opacity: 1; } .dpx-albuim-baslik { font-size: 34px; margin-bottom: 12px; } .dpx-albuim-aciklama { max-width: 640px; margin: 0 auto; color: #555; } .dpx-albuim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 72px; } .dpx-albuim-oge { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; } .dpx-albuim-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .dpx-albuim-oge:hover img { transform: scale(1.05); } .dpx-albuim-bos { text-align: center; color: #777; padding-bottom: 72px; } /* ===== Lightbox ===== */ .dpx-lightbox { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; z-index: 9999; } .dpx-lightbox.is-acik { opacity: 1; visibility: visible; } .dpx-lightbox-img { max-width: 88vw; max-height: 86vh; width: auto; object-fit: contain; border-radius: 6px; } .dpx-lightbox-kapat { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; padding: 8px; } .dpx-lightbox-ok { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); border: none; color: #fff; font-size: 32px; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; line-height: 1; } .dpx-lightbox-ok:hover { background: rgba(255, 255, 255, 0.24); } .dpx-lightbox-onceki { left: 20px; } .dpx-lightbox-sonraki { right: 20px; } body.dpx-scroll-kilitli { overflow: hidden; } /* ===== SSS Sayfası ===== */ .dpx-sss-ust { padding-top: 56px; padding-bottom: 24px; text-align: center; } .dpx-sss-baslik { font-size: 34px; margin-bottom: 12px; } .dpx-sss-giris { max-width: 640px; margin: 0 auto; color: #555; } .dpx-sss-bos { text-align: center; color: #777; padding-bottom: 72px; } .dpx-akordiyon { max-width: 760px; margin: 0 auto; padding-bottom: 72px; } .dpx-akordiyon-oge { border-bottom: 1px solid #e5e5e5; } .dpx-akordiyon-baslik { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; text-align: left; padding: 22px 4px; font-family: var(--dpx-baslik-font); font-size: 18px; font-weight: 600; color: #1a1a1a; cursor: pointer; } .dpx-akordiyon-ikon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dpx-ikincil-renk); color: #fff; font-size: 18px; transition: transform 0.25s ease; } .dpx-akordiyon-oge.is-acik .dpx-akordiyon-ikon { transform: rotate(45deg); } .dpx-akordiyon-icerik { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .dpx-akordiyon-icerik-ic { padding: 0 4px 22px; color: #555; line-height: 1.7; } /* ===== Anasayfa Bölümleri — Mobil Uyum ===== */ @media (max-width: 900px) { .dpx-tanitim-ist-ic, .dpx-tanitim-oz-ic { grid-template-columns: 1fr; } .dpx-tanitim-ist-ic--gorsel-sag .dpx-tanitim-ist-gorsel, .dpx-tanitim-oz-ic--gorsel-sol .dpx-tanitim-oz-gorsel { order: 0; } .dpx-tanitim-ozellik-grid { grid-template-columns: repeat(2, 1fr); } .dpx-kart-grid { grid-template-columns: repeat(2, 1fr); } .dpx-galeri-grid { grid-template-columns: repeat(2, 1fr); } .dpx-ekip-grid { grid-template-columns: repeat(2, 1fr); } .dpx-slider { aspect-ratio: 4 / 3; } .dpx-albuim-grid { grid-template-columns: repeat(2, 1fr); } .dpx-footer-ust { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 32px; } .dpx-footer-aciklama { max-width: none; } } @media (max-width: 560px) { .dpx-kart-grid, .dpx-galeri-grid, .dpx-ekip-grid, .dpx-albuim-grid { grid-template-columns: 1fr; } .dpx-bolum { padding: 48px 0; } .dpx-bolum-baslik { font-size: 26px; } .dpx-albuim-baslik { font-size: 26px; } .dpx-sss-baslik { font-size: 26px; } .dpx-sss-ust { padding-top: 32px; } .dpx-akordiyon-baslik { font-size: 16px; padding: 18px 2px; } .dpx-albuim-ust { padding-top: 32px; } .dpx-lightbox-ok { width: 42px; height: 42px; font-size: 24px; } .dpx-lightbox-onceki { left: 8px; } .dpx-lightbox-sonraki { right: 8px; } } /* ===== Blog (Son Yazılar bölümü + arşiv + tekil yazı) ===== */ .dpx-blog-kart { display: block; text-decoration: none; color: inherit; } .dpx-blog-kart .dpx-kart-icerik { text-align: left; } .dpx-blog-kategori { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dpx-ikincil-renk); text-decoration: none; margin-bottom: 8px; } .dpx-blog-tarih { display: block; font-size: 13px; color: #888; margin-top: 8px; } .dpx-blog-tumu { text-align: center; margin-top: 40px; } /* --- Arşiv (archive.php) --- */ .dpx-blog-arsiv-ust { padding-top: 56px; padding-bottom: 32px; text-align: center; } .dpx-blog-arsiv .dpx-kart-grid { padding-bottom: 56px; } .dpx-blog-sayfalama { display: flex; justify-content: center; gap: 12px; padding-bottom: 72px; } .dpx-blog-sayfalama .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #eee; border-radius: var(--dpx-buton-radius); text-decoration: none; color: #1a1a1a; } .dpx-blog-sayfalama .page-numbers.current { background: var(--dpx-ana-renk); color: #fff; border-color: var(--dpx-ana-renk); } /* --- Tekil Yazı (single.php) --- */ .dpx-yazi-ust { padding-top: 56px; padding-bottom: 24px; max-width: 760px; text-align: left; } .dpx-yazi-baslik { font-size: 36px; margin: 12px 0 8px; } .dpx-yazi-kapak { max-width: 1000px; margin: 0 auto 40px; padding: 0 24px; } .dpx-yazi-kapak img { width: 100%; border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover; } .dpx-yazi-govde { max-width: 760px; font-size: 17px; line-height: 1.8; } .dpx-yazi-govde p { margin: 0 0 1.4em; } .dpx-yazi-govde h2, .dpx-yazi-govde h3 { margin-top: 1.6em; } .dpx-yazi-govde img { border-radius: 10px; } .dpx-yazi-alt { max-width: 760px; padding: 24px; border-top: 1px solid #eee; margin-top: 24px; margin-bottom: 72px; } .dpx-yazi-geri { text-decoration: none; font-weight: 600; color: var(--dpx-ana-renk); } /* ===== Uzmanlık Alanları — İkon Kartı ===== */ /* Fotoğraf yerine küçük bir ikon/görsel gösterir — Hizmetler CPT'sinde yüklenen görsel burada KIRPILMAZ (object-fit: contain), bu yüzden müşteriye "kare/basit bir ikon yükleyin, 200x200px yeterli" demek yeterli; fotoğraf kartlarındaki gibi 4:3 kırpma kaygısı yok. */ .dpx-hizmet-kart { display: block; text-decoration: none; color: inherit; text-align: center; padding-bottom: 8px; } .dpx-hizmet-ikon { /* 96px daire / 48px ikon: 72/36 oranında ikonlar kartın içinde fazla siliktı. Daire büyüdükçe ikonun kendisi de büyümeli, yoksa ortada küçük bir leke gibi durur — ikisi birlikte ölçeklendi. */ width: 96px; height: 96px; border-radius: 50%; /* Krem tonu hukuk temasından kalmıştı; antrasit/kırmızı paletle sarıya çalıyordu. Nötr griye çevrildi. */ background: #F4F2F2; border: 1px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; margin: 32px auto 0; overflow: hidden; } .dpx-hizmet-ikon img { width: 48px; height: 48px; object-fit: contain; } .dpx-hizmet-kart .dpx-kart-icerik { padding-top: 16px; } /* ===== Genel Sayfa Şablonu (page.php) ===== */ .dpx-sayfa-ust { padding-top: 56px; padding-bottom: 24px; text-align: center; } .dpx-sayfa-baslik { font-size: 38px; margin: 0; } .dpx-sayfa-kapak { max-width: 1000px; margin: 0 auto 40px; } .dpx-sayfa-kapak img { width: 100%; border-radius: 14px; aspect-ratio: 16 / 7; object-fit: cover; } .dpx-sayfa-govde { max-width: 920px; padding-bottom: 72px; } /* Blok editöründeki "Geniş" hizalama — görsel+yazı gibi blokların dar okuma sütununa sıkışmaması için, sayfa içeriğinde daha fazla nefes alanı verir. Sadece yeterli ekran genişliği varken devreye girer. */ @media (min-width: 900px) { .dpx-sayfa-govde .alignwide { width: 1100px; max-width: 1100px; margin-left: calc(50% - 550px); margin-right: calc(50% - 550px); } .dpx-sayfa-govde .alignfull { width: 1152px; max-width: 1152px; margin-left: calc(50% - 576px); margin-right: calc(50% - 576px); } } /* ===== İletişim Sayfası (template-iletisim.php) ===== */ .dpx-iletisim-ic { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; padding-bottom: 48px; } .dpx-iletisim-bilgi { display: flex; flex-direction: column; gap: 24px; } .dpx-iletisim-satir { padding-bottom: 20px; border-bottom: 1px solid #eee; } .dpx-iletisim-etiket { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dpx-ikincil-renk); margin-bottom: 6px; } .dpx-iletisim-satir p { margin: 0; font-size: 17px; color: #222; line-height: 1.6; } .dpx-iletisim-satir a { color: #222; text-decoration: none; } .dpx-iletisim-satir a:hover { color: var(--dpx-ana-renk); } /* --- Form --- */ .dpx-iletisim-form { display: flex; flex-direction: column; gap: 18px; } .dpx-form-satir { display: flex; flex-direction: column; gap: 6px; flex: 1; } .dpx-form-satir-grup { display: flex; gap: 18px; } .dpx-form-satir label { font-size: 13px; font-weight: 600; color: #333; } .dpx-form-satir input, .dpx-form-satir textarea { width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: var(--dpx-buton-radius); font-family: var(--dpx-metin-font); font-size: 15px; color: #1a1a1a; background: #fff; box-sizing: border-box; } .dpx-form-satir input:focus, .dpx-form-satir textarea:focus { outline: none; border-color: var(--dpx-ana-renk); } .dpx-iletisim-form textarea { resize: vertical; } .dpx-iletisim-form button { align-self: flex-start; border: none; } /* Honeypot — botlara "normal bir alan" gibi görünsün diye display:none kullanmıyoruz (bazı botlar bunu farkedip atlıyor), ekran dışına taşıyoruz. İnsan gözüne ve klavye ile gezinmeye hiç görünmez. */ .dpx-form-honeypot { position: absolute; left: -9999px; top: -9999px; } .dpx-form-mesaj { margin: 0 0 20px; padding: 14px 18px; border-radius: 8px; font-size: 14px; } .dpx-form-mesaj--basarili { background: #eaf7ee; color: #1e7a35; border: 1px solid #bfe6c9; } .dpx-form-mesaj--hata { background: #fbeaea; color: #a32020; border: 1px solid #f0c4c4; } /* --- Harita (tam genişlik, form/bilgi bloğunun altında) --- */ .dpx-iletisim-harita { position: relative; min-height: 420px; border-radius: 14px; overflow: hidden; margin-bottom: 72px; } .dpx-iletisim-harita-buton { position: absolute; bottom: 16px; left: 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } @media (max-width: 900px) { .dpx-iletisim-ic { grid-template-columns: 1fr; } .dpx-form-satir-grup { flex-direction: column; } .dpx-iletisim-harita { /* Mobilde ayardan bağımsız üst sınır: masaüstünde iyi duran 700px'lik bir harita, dar ekranda tüm sayfayı kaplıyor. */ height: min(var(--dpx-harita-yukseklik, 520px), 380px); min-height: 0; } } /* ===== Tekil Uzmanlık Alanı Sayfası (single-dpx_hizmet.php) ===== */ .dpx-hizmet-tekil-ikon { width: 96px; height: 96px; margin: 0 auto 20px; } .dpx-hizmet-tekil-ikon img { width: 46px; height: 46px; object-fit: contain; } .dpx-hizmet-tekil-alt { max-width: 920px; padding: 24px 24px 72px; border-top: 1px solid #eee; margin-top: 24px; } /* ===================================================================== * TEMA-03 (ÜRETİM) — ÜRÜN KATALOĞU VE YENİ BÖLÜMLER * ===================================================================== * RENK STRATEJİSİ (önemli, sonraki temalarda da geçerli): * --dpx-ana-renk = TAŞIYICI koyu renk (antrasit). Koyu yüzeylerin * tamamı bu: koleksiyon bölümü, bento kutusu, * footer. Büyük alanları bu kaplar. * --dpx-ikincil-renk = VURGU rengi (Esey kırmızısı). Sadece butonlar, * üst etiketler, hover ve ince aksanlar. * * Neden böyle: ürün fotoğrafları (banyo mobilyası) zaten gri/beyaz/ * ahşap tonlarında. Vurgu rengini büyük alanlara yayarsak arayüz * ürünle yarışır ve sonuç "indirim afişi" gibi görünür. Koyu nötr * taşıyıcı + küçük dozda canlı vurgu, ürünü öne çıkarır. * ===================================================================== */ /* Bu temada birincil çağrı butonu VURGU rengindedir — taşıyıcı koyu renk değil. Temel .dpx-buton kuralını burada bilinçli olarak eziyoruz ki slider CTA'sı, tanıtım butonu ve ürün butonları tek hamlede aynı rengi alsın. */ .dpx-buton { background: var(--dpx-ikincil-renk); font-weight: 600; letter-spacing: 0.01em; } .dpx-buton--ikincil { background: var(--dpx-ana-renk); } /* Koyu zemin üstünde duran buton (bento kutusu içi). */ .dpx-buton--acik { background: #fff; color: var(--dpx-ana-renk); } .dpx-buton--acik:hover { color: var(--dpx-ana-renk); } /* Çerçeveli buton — ürün detayında telefon için. */ .dpx-buton--cizgili { background: transparent; color: var(--dpx-ana-renk); border: 1.5px solid var(--dpx-ana-renk); } .dpx-buton--cizgili:hover { background: var(--dpx-ana-renk); color: #fff; opacity: 1; } .dpx-buton--whatsapp { background: #25D366; } /* --- Bölüm alt başlığı ve alt butonu (yeni ortak öğeler) --- */ .dpx-bolum-alt-baslik { max-width: 620px; margin: -12px auto 40px; text-align: center; color: #6c6a6b; line-height: 1.7; } .dpx-bolum-alt-buton { margin-top: 40px; text-align: center; } .dpx-bos-uyari { padding: 60px 0; text-align: center; color: #6c6a6b; } /* ===================================================================== * ÜRÜN IZGARASI VE KARTI * ===================================================================== */ .dpx-urun-bolum--acik { background: #F4F2F2; } .dpx-urun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 24px; } .dpx-urun-kart { display: block; text-decoration: none; color: inherit; } .dpx-urun-kart-gorsel { position: relative; /* Kare oran: ürün fotoğrafları farklı boyutlarda gelse bile ızgara asla zıplamaz. Eklentideki dpx_urun_kart görsel boyutu da zaten 700x700 kırpılmış üretir. */ aspect-ratio: 1 / 1; overflow: hidden; border-radius: 16px; background: #ECEAEA; } .dpx-urun-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .dpx-urun-kart:hover .dpx-urun-kart-gorsel img { transform: scale(1.05); } .dpx-urun-kart-rozet { position: absolute; top: 12px; left: 12px; padding: 6px 12px; background: rgba(255, 255, 255, 0.94); color: var(--dpx-ana-renk); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .dpx-urun-kart-icerik { padding: 14px 4px 0; text-align: center; } .dpx-urun-kart-baslik { margin: 0; font-family: var(--dpx-baslik-font); font-size: 17px; font-weight: 600; color: var(--dpx-ana-renk); transition: color 0.2s ease; } .dpx-urun-kart:hover .dpx-urun-kart-baslik { color: var(--dpx-ikincil-renk); } .dpx-urun-kart-meta { margin: 6px 0 0; font-size: 13px; color: #858384; } /* ===================================================================== * KOLEKSİYON MOZAİĞİ * ===================================================================== */ .dpx-koleksiyon-kutu { padding: 56px 48px; background: var(--dpx-ana-renk); border-radius: 24px; color: #fff; } .dpx-koleksiyon-ust { max-width: 620px; margin-bottom: 36px; } .dpx-koleksiyon-ust h2 { margin: 0 0 12px; color: #fff; font-size: 30px; } .dpx-koleksiyon-ust p { margin: 0; color: rgba(255, 255, 255, 0.78); line-height: 1.7; } /* Mozaik: solda tam yükseklikte büyük kart, sağda üstte geniş bir kart ve altta iki dar kart. Üç sütunluk bir ızgarayla kuruluyor. */ .dpx-koleksiyon-mozaik { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 200px); gap: 16px; } .dpx-koleksiyon-kart { position: relative; display: block; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, 0.06); } .dpx-koleksiyon-kart--buyuk { grid-row: span 2; } /* İlk küçük kart üstte iki sütun kaplar, sonraki ikisi altta birer sütun. :nth-of-type kullanmıyoruz çünkü büyük kart da aynı sınıfı taşıyor — sırayı doğrudan belirtiyoruz. */ .dpx-koleksiyon-kart--buyuk + .dpx-koleksiyon-kart { grid-column: span 2; } .dpx-koleksiyon-kart img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .dpx-koleksiyon-kart:hover img { transform: scale(1.06); } .dpx-koleksiyon-etiket { position: absolute; left: 16px; bottom: 16px; padding: 8px 18px; background: #fff; color: var(--dpx-ana-renk); border-radius: 999px; font-family: var(--dpx-baslik-font); font-weight: 600; font-size: 14px; letter-spacing: 0.03em; } /* Koleksiyon sayfasının üst kapak görseli. */ .dpx-koleksiyon-kapak { position: relative; min-height: 320px; display: flex; align-items: flex-end; background-size: cover; background-position: center; } .dpx-koleksiyon-kapak::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(35, 32, 33, 0.82), rgba(35, 32, 33, 0.15)); } .dpx-koleksiyon-kapak .dpx-container { position: relative; padding-bottom: 40px; } .dpx-koleksiyon-kapak h1 { margin: 0; color: #fff; font-size: 40px; } .dpx-koleksiyon-aciklama { max-width: 780px; margin-top: 32px; color: #6c6a6b; line-height: 1.8; } /* ===================================================================== * TANITIM — BENTO STİLİ * ===================================================================== */ .dpx-tanitim--bento { padding: 80px 0; } .dpx-bento-kutu { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; padding: 48px; background: #F1F3F2; border-radius: 24px; } .dpx-bento-metin h2 { margin: 0 0 20px; font-size: 36px; line-height: 1.25; } .dpx-bento-metin p { margin: 0 0 28px; color: #5f5d5e; line-height: 1.8; } .dpx-bento-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 180px); gap: 16px; } .dpx-bento-kart { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #E4E6E5; } .dpx-bento-kart--uzun { grid-row: span 2; } .dpx-bento-kart img { width: 100%; height: 100%; object-fit: cover; display: block; } .dpx-bento-etiket { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; padding: 8px 14px; background: #fff; border-radius: 10px; line-height: 1.3; } .dpx-bento-etiket small { font-size: 11px; letter-spacing: 0.08em; color: #858384; text-transform: uppercase; } .dpx-bento-etiket strong { font-family: var(--dpx-baslik-font); font-size: 14px; color: var(--dpx-ana-renk); } .dpx-bento-renkli { display: flex; flex-direction: column; justify-content: center; padding: 24px; background: var(--dpx-ana-renk); border-radius: 16px; color: #fff; text-align: center; } .dpx-bento-renkli h3 { margin: 0 0 8px; color: #fff; font-size: 19px; } .dpx-bento-renkli p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); } .dpx-bento-renkli .dpx-buton { align-self: center; padding: 10px 20px; font-size: 14px; } .dpx-tanitim-buton { margin-top: 24px; } /* ===================================================================== * BAYİLİK ŞERİDİ * ===================================================================== */ .dpx-bayilik-ic { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } .dpx-bayilik--gorselsiz .dpx-bayilik-ic { grid-template-columns: 1fr; max-width: 720px; text-align: center; } .dpx-bayilik-metin h2 { margin: 0 0 20px; font-size: 34px; line-height: 1.25; } .dpx-bayilik-metin p { margin: 0 0 28px; color: #5f5d5e; line-height: 1.8; } .dpx-bayilik-kolaj { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 12px; height: 420px; } .dpx-bayilik-kolaj-oge { overflow: hidden; border-radius: 16px; background: #ECEAEA; } .dpx-bayilik-kolaj-oge img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===================================================================== * KATALOG (ARŞİV + KOLEKSİYON SAYFASI) * ===================================================================== */ .dpx-katalog-sarmal { /* DİKKAT — padding KISAYOLU KULLANMA. Bu sınıf aynı elemente .dpx-container ile birlikte veriliyor ve .dpx-container yan boşluğu 'padding: 0 24px' ile tanımlıyor. Burada 'padding: 48px 0 80px' yazmak o yan boşluğu SIFIRLIYOR; katalog ürünleri ekranın sağ ve sol kenarına yapışıyordu. Tekil özellik kullanınca iki kural birbirini ezmiyor. */ padding-top: 48px; padding-bottom: 80px; } .dpx-katalog { display: grid; grid-template-columns: 230px 1fr; gap: 48px; align-items: start; } .dpx-katalog-yan-baslik { margin: 0 0 16px; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: #858384; } .dpx-katalog-filtre, .dpx-katalog-filtre-alt { margin: 0; padding: 0; list-style: none; } .dpx-katalog-filtre > li { border-bottom: 1px solid #EAE8E8; } .dpx-katalog-filtre a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0; color: var(--dpx-ana-renk); text-decoration: none; font-size: 15px; transition: color 0.2s ease; } .dpx-katalog-filtre a:hover, .dpx-katalog-filtre a.aktif { color: var(--dpx-ikincil-renk); font-weight: 600; } .dpx-katalog-sayi { font-size: 12px; color: #A5A3A3; } .dpx-katalog-filtre-alt { padding: 0 0 8px 14px; border-left: 2px solid #EAE8E8; margin-bottom: 8px; } .dpx-katalog-filtre-alt li { border: none; } .dpx-katalog-filtre-alt a { padding: 7px 0; font-size: 14px; color: #6c6a6b; } .dpx-urun-grid--katalog { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } /* ===================================================================== * ÜRÜN DETAY SAYFASI * ===================================================================== */ .dpx-urun-detay { padding: 40px 0 80px; } .dpx-urun-geri { margin-bottom: 24px; } .dpx-urun-geri a { color: #858384; text-decoration: none; font-size: 14px; } .dpx-urun-geri a:hover { color: var(--dpx-ikincil-renk); } .dpx-urun-ust { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; } .dpx-urun-galeri-buyuk { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px; background: #ECEAEA; } .dpx-urun-galeri-buyuk img { width: 100%; height: 100%; object-fit: cover; display: block; } .dpx-urun-galeri-serit { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .dpx-urun-kucuk { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 1 / 1; transition: border-color 0.2s ease; } .dpx-urun-kucuk img { width: 100%; height: 100%; object-fit: cover; display: block; } .dpx-urun-kucuk.aktif, .dpx-urun-kucuk:hover { border-color: var(--dpx-ikincil-renk); } .dpx-urun-koleksiyon { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .dpx-urun-koleksiyon a { color: var(--dpx-ikincil-renk); text-decoration: none; font-weight: 600; } .dpx-urun-baslik { margin: 0 0 24px; font-size: 34px; line-height: 1.2; } .dpx-urun-hizli-bilgi { margin: 0 0 28px; padding: 20px 24px; background: #F4F2F2; border-radius: 14px; } .dpx-urun-hizli-bilgi > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; } .dpx-urun-hizli-bilgi dt { color: #858384; font-size: 14px; } .dpx-urun-hizli-bilgi dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; color: var(--dpx-ana-renk); } .dpx-urun-renkler { margin-bottom: 28px; } .dpx-urun-renkler h2 { margin: 0 0 12px; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: #858384; } .dpx-urun-renkler ul { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 0; padding: 0; list-style: none; } .dpx-urun-renkler li { display: flex; align-items: center; gap: 8px; font-size: 14px; } /* Görseli olmayan renk seçeneği, kutu yerine ince çerçeveli bir etiket olarak gösterilir — boş gri kare göstermekten daha temiz. */ .dpx-renk--metin { padding: 6px 14px; border: 1px solid #DEDCDC; border-radius: 999px; color: #5f5d5e; } .dpx-renk-kutu { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid #DEDCDC; display: block; } .dpx-urun-aciklama { margin-bottom: 28px; color: #5f5d5e; line-height: 1.8; } .dpx-urun-cta { display: flex; flex-wrap: wrap; gap: 12px; } .dpx-urun-katalog { margin: 18px 0 0; } .dpx-urun-katalog a { color: var(--dpx-ana-renk); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .dpx-urun-ozellik-tablo { margin-top: 72px; } .dpx-urun-ozellik-tablo h2 { margin: 0 0 20px; font-size: 24px; } .dpx-urun-ozellik-tablo table { width: 100%; border-collapse: collapse; } .dpx-urun-ozellik-tablo th, .dpx-urun-ozellik-tablo td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #EAE8E8; font-size: 15px; } .dpx-urun-ozellik-tablo th { width: 38%; color: #858384; font-weight: 500; } .dpx-urun-ozellik-tablo tr:nth-child(odd) { background: #FAF9F9; } .dpx-urun-benzer { margin-top: 72px; } .dpx-urun-benzer h2 { margin: 0 0 28px; font-size: 24px; } /* ===================================================================== * FOOTER İLETİŞİM ŞERİDİ * ===================================================================== */ .dpx-footer-serit { background: #F4F2F2; color: var(--dpx-ana-renk); } .dpx-footer-serit-ic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 32px; padding-bottom: 32px; } .dpx-footer-serit-oge { display: flex; flex-direction: column; gap: 6px; } .dpx-footer-serit-etiket { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #858384; } .dpx-footer-serit-deger { font-size: 15px; line-height: 1.6; } .dpx-footer-serit-deger a { color: var(--dpx-ana-renk); text-decoration: none; } .dpx-footer-serit-deger a:hover { color: var(--dpx-ikincil-renk); } /* ===================================================================== * MOBİL UYUM * ===================================================================== */ @media (max-width: 980px) { .dpx-bento-kutu, .dpx-bayilik-ic, .dpx-urun-ust { grid-template-columns: 1fr; gap: 32px; } .dpx-katalog { grid-template-columns: 1fr; gap: 32px; } /* Mobilde kategori filtresi yatay kaydırılabilir bir şeride dönüşür — dikey liste ürünleri ekranın çok altına iterdi. */ .dpx-katalog-filtre { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; } .dpx-katalog-filtre > li { flex: 0 0 auto; border-bottom: none; } .dpx-katalog-filtre > li > a { padding: 9px 16px; border: 1px solid #EAE8E8; border-radius: 999px; white-space: nowrap; } /* Alt kategoriler yatay şeritte yer kaplamasın — üst kategoriye tıklayınca kendi sayfasında görünecekler. */ .dpx-katalog-filtre-alt { display: none; } .dpx-bayilik-kolaj { height: 300px; } } @media (max-width: 860px) { .dpx-koleksiyon-kutu { padding: 36px 24px; } .dpx-koleksiyon-mozaik { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 160px); } .dpx-koleksiyon-kart--buyuk { grid-column: span 2; grid-row: span 1; } .dpx-koleksiyon-kart--buyuk + .dpx-koleksiyon-kart { grid-column: span 2; } .dpx-bento-kutu { padding: 28px 20px; } .dpx-footer-serit-ic { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 640px) { .dpx-urun-grid, .dpx-urun-grid--katalog { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } .dpx-urun-kart-baslik { font-size: 15px; } .dpx-urun-baslik, .dpx-bento-metin h2, .dpx-bayilik-metin h2 { font-size: 26px; } .dpx-bento-grid { grid-template-rows: repeat(2, 140px); } .dpx-bayilik-kolaj { grid-template-columns: 1fr 1fr; height: 220px; } /* Üçüncü kolaj görseli mobilde gizlenir — iki dar sütun zaten dolu görünüyor, üçüncüsü sıkışıp okunmaz hale geliyordu. */ .dpx-bayilik-kolaj-oge:nth-child(3) { display: none; } .dpx-urun-galeri-serit { grid-template-columns: repeat(4, 1fr); } .dpx-urun-cta .dpx-buton { flex: 1 1 100%; text-align: center; } .dpx-koleksiyon-kapak h1 { font-size: 28px; } } /* ===================================================================== * KATALOG — FİLTRE ÇUBUĞU VE TEK SÜTUN DÜZELTMESİ (v1.0.3) * ===================================================================== */ /* Yan kategori menüsü çizilmediğinde (henüz kategori girilmemişse) içerik dar sütuna sıkışıp ürünleri alt alta diziyordu. */ .dpx-katalog--tam { grid-template-columns: 1fr; } .dpx-katalog-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #EAE8E8; } .dpx-katalog-arama { display: flex; gap: 8px; flex: 1 1 320px; } .dpx-katalog-arama input[type="search"] { flex: 1; min-width: 0; padding: 11px 16px; border: 1px solid #DEDCDC; border-radius: var(--dpx-buton-radius); font-size: 15px; font-family: inherit; background: #fff; color: var(--dpx-ana-renk); } .dpx-katalog-arama input[type="search"]:focus { outline: none; border-color: var(--dpx-ikincil-renk); } .dpx-katalog-arama .dpx-buton { padding: 11px 22px; flex: 0 0 auto; } .dpx-katalog-sirala { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .dpx-katalog-sirala label { font-size: 14px; color: #858384; } .dpx-katalog-sirala select { padding: 10px 14px; border: 1px solid #DEDCDC; border-radius: var(--dpx-buton-radius); background: #fff; font-size: 14px; font-family: inherit; color: var(--dpx-ana-renk); cursor: pointer; } .dpx-katalog-aktif-filtre { margin: -8px 0 24px; font-size: 14px; color: #6c6a6b; } .dpx-katalog-aktif-filtre a { margin-left: 8px; color: var(--dpx-ikincil-renk); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 640px) { .dpx-katalog-arac { flex-direction: column; align-items: stretch; } .dpx-katalog-sirala { justify-content: space-between; } .dpx-katalog-sirala select { flex: 1; margin-left: 8px; } } /* ===================================================================== * DÜZELTMELER (v1.0.6) * ===================================================================== */ /* --- 1) Slayt yazısı ile okların çakışması --- Oklar sol/sağda 20px'te, 44px genişliğinde; yani 20-64px bandını kaplıyor. Slayt metninin yatay boşluğu ise 48px'ti, sola hizalı başlık okun tam üstüne biniyordu. Çözüm: metnin yatay boşluğunu site konteynerine hizalıyoruz. Geniş ekranda başlık, sayfanın geri kalanındaki içerikle aynı dikeyden başlar; dar ekranda 88px'e düşerek okların bandını temizler. */ .dpx-slayt-baslik-kutu { padding-left: max(88px, calc((100% - 1200px) / 2 + 24px)); padding-right: max(88px, calc((100% - 1200px) / 2 + 24px)); } /* --- 2) Slayt butonunun tıklanamaması --- Slaytların hepsi inset:0 ile üst üste duruyor ve geçiş yalnızca opacity ile yapılıyordu. Görünmez slaytlar DOM'da SONRA geldiği için aktif slaydın ÜSTÜNDE kalıyor ve tıklamayı yutuyordu — buton görünüyor ama tıklanmıyordu. opacity tek başına tıklamayı engellemez; pointer-events gerekir. visibility ise ekran okuyucuların gizli slaytları okumasını da engelliyor. */ .dpx-slayt { pointer-events: none; visibility: hidden; z-index: 1; /* visibility anlık değişen bir özellik: doğrudan uygularsak kaybolan slayt yumuşakça sönmek yerine birden yok oluyor. 0s'lik ama 0.8s GECİKMELİ bir geçişle, görünürlük ancak fade bittikten sonra kapanıyor. */ transition: opacity 0.8s ease, visibility 0s linear 0.8s; } .dpx-slayt.is-aktif { pointer-events: auto; visibility: visible; z-index: 2; transition: opacity 0.8s ease, visibility 0s linear 0s; } /* --- 3) Footer iletişim şeridi --- */ /* Footer'ın 60px üst boşluğu, üstteki bej bölümle bej şerit arasında beyaz bir bant bırakıyordu: bej > beyaz > bej. Şerit zaten kendi iç boşluğuna sahip, dış boşluğa gerek yok. */ #site-footer { margin-top: 0; } .dpx-footer-serit-ic { align-items: start; } .dpx-footer-serit-oge { flex-direction: row; align-items: flex-start; gap: 14px; } .dpx-footer-serit-ikon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid #E6E3E3; display: flex; align-items: center; justify-content: center; color: var(--dpx-ikincil-renk); } .dpx-footer-serit-ikon svg { width: 21px; height: 21px; } .dpx-footer-serit-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .dpx-footer-serit-etiket { font-family: var(--dpx-baslik-font); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8A8788; } @media (max-width: 860px) { .dpx-slayt-baslik-kutu { padding-left: 76px; padding-right: 76px; } } @media (max-width: 640px) { /* Mobilde oklar gizleniyor: 44px'lik iki daire, dar ekranda metnin okunur alanının üçte birini yiyor. Slaytlar arasında geçiş için alttaki noktalar yeterli. */ .dpx-slider-ok { display: none; } .dpx-slayt-baslik-kutu { padding-left: 24px; padding-right: 24px; } } /* ===================================================================== * SAYFA AFİŞİ (page hero) — v1.0.7 * --------------------------------------------------------------------- * Anasayfa dışındaki tüm sayfaların ortak açılışı: arka planda * görsel, üzerinde koyu perde, ortada breadcrumb + başlık + * açıklama. Site geneline tek bir dil veriyor. * ===================================================================== */ .dpx-sayfa-afis { position: relative; display: flex; align-items: center; justify-content: center; /* Yükseklik Tema Ayarları > Genel Davranış'tan geliyor. min-height olarak veriliyor: uzun bir başlık girildiğinde afiş kendiliğinden büyür, metin asla kırpılmaz. Dolgu değeri de bilinçli olarak düşük — dolgu büyük olursa ayardan girilen değerin bir anlamı kalmaz, afiş her zaman ondan yüksek çıkar. */ min-height: var(--dpx-afis-yukseklik, 240px); padding: 40px 0; background-color: var(--dpx-ana-renk); background-size: cover; background-position: center; text-align: center; overflow: hidden; } /* Koyu perde: fotoğraf ne olursa olsun beyaz yazı okunabilir kalmalı. Düz siyah yerine markanın antrasitini kullanıyoruz ki fotoğraf griye değil sıcak koyuya dönsün. */ .dpx-sayfa-afis::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 32, 33, 0.72) 0%, rgba(35, 32, 33, 0.82) 100%); } /* Görsel seçilmemişse perdeye gerek yok; düz antrasit zaten yeterli kontrastta ve üstüne perde koymak sahneyi çamurlaştırıyor. */ .dpx-sayfa-afis--gorselsiz::before { background: none; } .dpx-sayfa-afis-ic { position: relative; max-width: 820px; } .dpx-sayfa-afis-baslik { margin: 0; color: #fff; font-size: 44px; line-height: 1.15; letter-spacing: -0.01em; } .dpx-sayfa-afis-aciklama { margin: 16px auto 0; max-width: 640px; color: rgba(255, 255, 255, 0.82); font-size: 17px; line-height: 1.7; } /* --- Breadcrumb --- */ .dpx-breadcrumb { margin-bottom: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.7); } .dpx-breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s ease; } .dpx-breadcrumb a:hover { color: #fff; } .dpx-breadcrumb span[aria-current] { color: #fff; } .dpx-breadcrumb-ayrac { margin: 0 8px; color: rgba(255, 255, 255, 0.35); } /* Ürün detayında afiş yok, breadcrumb açık zemin üstünde duruyor. */ .dpx-urun-breadcrumb { margin-bottom: 24px; } .dpx-urun-breadcrumb .dpx-breadcrumb, .dpx-urun-breadcrumb .dpx-breadcrumb a { color: #858384; } .dpx-urun-breadcrumb .dpx-breadcrumb a:hover { color: var(--dpx-ikincil-renk); } .dpx-urun-breadcrumb .dpx-breadcrumb span[aria-current] { color: var(--dpx-ana-renk); } .dpx-urun-breadcrumb .dpx-breadcrumb-ayrac { color: #C9C6C6; } /* Afişten sonra gelen ilk içerik bloğu, afişe yapışmasın. */ .dpx-sayfa-afis + .dpx-container, .dpx-sayfa-afis + .dpx-katalog-sarmal { margin-top: 48px; } @media (max-width: 860px) { .dpx-sayfa-afis { /* Mobilde ayardan bağımsız olarak kısaltıyoruz: masaüstünde iyi duran 400px'lik bir afiş, dar ekranda ilk ekranın tamamını yiyor. */ min-height: min(var(--dpx-afis-yukseklik, 240px), 220px); padding: 32px 0; } .dpx-sayfa-afis-baslik { font-size: 32px; } .dpx-sayfa-afis-aciklama { font-size: 15px; } } @media (max-width: 640px) { .dpx-sayfa-afis-baslik { font-size: 27px; } /* Uzun yollar mobilde iki satıra taşıp afişi şişiriyor; ayraç boşluklarını daraltıyoruz. */ .dpx-breadcrumb { font-size: 13px; } .dpx-breadcrumb-ayrac { margin: 0 5px; } } /* ===================================================================== * HAKKIMIZDA SAYFA ŞABLONU — v1.0.9 * ===================================================================== */ .dpx-hk-giris { padding-top: 64px; padding-bottom: 8px; } .dpx-hk-giris .dpx-yazi-govde { max-width: 780px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.85; color: #5f5d5e; } /* --- Üretim tesisi: solda metin, sağda fotoğraf kolajı --- */ .dpx-hk-uretim-ic { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } .dpx-hk-uretim--gorselsiz .dpx-hk-uretim-ic { grid-template-columns: 1fr; max-width: 760px; text-align: center; } .dpx-hk-etiket { display: inline-block; margin-bottom: 14px; padding: 6px 14px; background: rgba(219, 29, 44, 0.08); color: var(--dpx-ikincil-renk); border-radius: 999px; font-family: var(--dpx-baslik-font); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .dpx-hk-uretim-metin h2 { margin: 0 0 20px; font-size: 34px; line-height: 1.25; } .dpx-hk-uretim-metin p { margin: 0; color: #5f5d5e; line-height: 1.85; } /* Kolaj, fotoğraf SAYISINA göre farklı diziliyor. Müşteri iki ya da tek fotoğraf koyduğunda üçlü ızgarada boş hücre kalmasın diye. */ .dpx-hk-kolaj { display: grid; gap: 14px; } .dpx-hk-kolaj--1 { grid-template-columns: 1fr; grid-template-rows: 420px; } .dpx-hk-kolaj--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 380px; } .dpx-hk-kolaj--3 { grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, 200px); } /* Üçlüde ilk fotoğraf iki satır boyunca uzanır; hepsi eşit olursa kolaj ızgara gibi durup fotoğraf albümü hissi veriyor. */ .dpx-hk-kolaj--3 .dpx-hk-kolaj-oge:first-child { grid-row: span 2; } .dpx-hk-kolaj-oge { overflow: hidden; border-radius: 16px; background: #ECEAEA; } .dpx-hk-kolaj-oge img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Neden Biz --- */ .dpx-hk-neden { background: #F4F2F2; } .dpx-hk-neden-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .dpx-hk-neden-kart { position: relative; padding: 32px 28px; background: #fff; border-radius: 18px; } .dpx-hk-neden-no { display: block; margin-bottom: 14px; font-family: var(--dpx-baslik-font); font-size: 32px; font-weight: 800; line-height: 1; /* Numara bir süs, okunacak bir bilgi değil — soluk bırakıyoruz ki başlıkla dikkat için yarışmasın. */ color: rgba(219, 29, 44, 0.22); } .dpx-hk-neden-kart h3 { margin: 0 0 10px; font-size: 19px; color: var(--dpx-ana-renk); } .dpx-hk-neden-kart p { margin: 0; color: #6c6a6b; line-height: 1.75; font-size: 15px; } /* --- Kapanış çağrısı --- */ .dpx-hk-cta { padding: 72px 0; background: var(--dpx-ana-renk); color: #fff; text-align: center; } .dpx-hk-cta h2 { margin: 0 0 14px; color: #fff; font-size: 32px; } .dpx-hk-cta p { max-width: 620px; margin: 0 auto 28px; color: rgba(255, 255, 255, 0.78); line-height: 1.8; } @media (max-width: 980px) { .dpx-hk-uretim-ic { grid-template-columns: 1fr; gap: 32px; } .dpx-hk-kolaj--3 { grid-template-rows: repeat(2, 170px); } } @media (max-width: 640px) { .dpx-hk-giris .dpx-yazi-govde { font-size: 16px; } .dpx-hk-uretim-metin h2, .dpx-hk-cta h2 { font-size: 26px; } /* Mobilde kolajı tek sütuna indiriyoruz: iki dar sütun, fabrika fotoğrafında hiçbir şeyin seçilmediği kadar küçülüyor. */ .dpx-hk-kolaj--2, .dpx-hk-kolaj--3 { grid-template-columns: 1fr; grid-template-rows: none; } .dpx-hk-kolaj--3 .dpx-hk-kolaj-oge:first-child { grid-row: auto; } .dpx-hk-kolaj-oge { aspect-ratio: 4 / 3; } } /* Sayaç ile kapanış çağrısı alt alta ve ikisi de antrasit zeminli. Araya ince bir ayırıcı koymazsak tek bir uzun koyu blok gibi görünüp nerede bittiği anlaşılmıyor. Ayrıca sayaç en sonda olduğu için alt boşluğunu kısıyoruz. */ .dpx-istatistik + .dpx-hk-cta { padding-top: 56px; border-top: 1px solid rgba(255, 255, 255, 0.13); } .dpx-hakkimizda .dpx-istatistik:last-of-type { padding-bottom: 48px; } /* ===================================================================== * MOBİL DÜZELTMELERİ — v1.1.2 * ===================================================================== */ @media (max-width: 980px) { /* --- 1) Tanıtım bento kutusu --- 980px'de dış kapsayıcı tek sütuna iniyordu ama İÇERİDEKİ ızgara hâlâ iki sütun ve SABİT 180px satır yüksekliğindeydi. Renkli metin kutusunun başlığı, metni ve butonu 180px'e sığmayıp kutunun dışına taşıyordu. Yeni düzen: iki görsel kartı üstte yan yana (sabit yükseklik, çünkü onlar fotoğraf), renkli kutu altta tam genişlik ve İÇERİĞE GÖRE yükseklik. Metin ne kadar uzun olursa olsun taşmaz. */ .dpx-bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 190px auto; } .dpx-bento-kart--uzun { grid-row: auto; } .dpx-bento-renkli { grid-column: 1 / -1; padding: 28px 24px; } } @media (max-width: 640px) { /* --- 2) Ürün ızgarası: mobilde tek sütun --- İki sütunda kart genişliği ~160px'e düşüyor; banyo dolabı fotoğrafında dolabın kendisi seçilemez hale geliyordu. Ürün fotoğrafı bu sitenin asıl satış aracı, yer kazanmak için küçültmek doğru değil. */ .dpx-urun-grid, .dpx-urun-grid--katalog { grid-template-columns: 1fr; gap: 28px; } .dpx-urun-kart-baslik { font-size: 17px; } /* Bento kartları da tek sütuna insin. */ .dpx-bento-grid { grid-template-columns: 1fr; grid-template-rows: none; } .dpx-bento-kart { aspect-ratio: 16 / 10; } /* --- 3) Arama kutusunun daireye dönüşmesi --- Araç çubuğu mobilde 'flex-direction: column'a geçiyor. Arama sarmalayıcısındaki 'flex: 1 1 320px' kuralında 320px, YATAY düzende genişlik anlamına gelirken DİKEY düzende YÜKSEKLİK anlamına geliyor. Yani arama satırı 320px yüksekliğe zorlanıyor, input de onu dolduruyordu; üstüne hap biçimli köşe yarıçapı binince kocaman bir daire çıkıyordu. flex-basis'i sıfırlamak yetiyor. */ .dpx-katalog-arama { flex: 0 0 auto; width: 100%; } .dpx-katalog-arama input[type="search"] { height: 48px; } .dpx-katalog-arama .dpx-buton { height: 48px; padding: 0 22px; display: flex; align-items: center; } .dpx-katalog-sirala { flex: 0 0 auto; } } /* ===================================================================== * GTRANSLATE UYUMU — v1.1.8 * --------------------------------------------------------------------- * NEDEN TEMADA: Bu kuralların eklentinin "Custom CSS" alanında * durması yeterli değil. O alan önbelleğe alınıyor ve güncellendiği * halde siteye ulaşmayabiliyor; teşhisi de zor oluyor. Temanın stil * dosyası ise DPX_TEMA_VERSION ile sürümlendiği için her güncellemede * tarayıcı ve sunucu önbelleği kendiliğinden kırılıyor. * * GERÇEK MARKUP (siteden alındı): *
  • *
    *
    *
    Turkish
    *
    Arabic…
    * * ASIL SORUN: Sarmalayıcıdaki INLINE 'position:absolute'. Widget * normal akıştan kopuyor, taşıyıcı
  • sıfır yükseklikte kalıyor. * Masaüstünde bu "dil seçici menünün altında duruyor" olarak * görünüyordu; mobil menüye kaydırma (overflow-y:auto) eklendikten * sonra ise absolute öğe kaydırma kabı tarafından KIRPILIP tamamen * görünmez oldu. Çözüm ikisinde de aynı: öğeyi akışa geri sokmak. * ===================================================================== */ li.menu-item-gtranslate { display: flex; align-items: center; position: relative; } /* Inline stili ezmek için !important şart. */ li.menu-item-gtranslate > div[id^="gtranslate_menu_wrapper"], li.menu-item-gtranslate [class*="gt_container--"] { position: static !important; top: auto !important; left: auto !important; display: inline-flex; align-items: center; white-space: nowrap; } /* Google'ın gizli gadget kutusu. Menüde iki kez basıldığı için ikincisi zaten boş kalıyor; ikisini de gizliyoruz. */ li.menu-item-gtranslate #google_translate_element2 { display: none; } .gt_switcher { position: relative; font-family: var(--dpx-metin-font, inherit); font-size: 15px; line-height: 1; width: auto; overflow: visible; text-align: left; } .gt_switcher .gt_selected { background: none; border: 0; position: static; width: auto; } .gt_switcher .gt_selected a { display: inline-flex; align-items: center; padding: 0; margin: 0; border: 0; background: none; background-image: none; color: #1a1a1a; font-weight: 500; font-size: 15px; line-height: 1; transition: color 0.2s ease; } .gt_switcher .gt_selected a:hover, .gt_switcher .gt_selected a.open { background: none; color: var(--dpx-ikincil-renk); } /* Bayraklar gizli: tasarıma yabancı duruyorlardı ve 24px yükseklikleri satırı menü linklerinden büyük yapıp hizayı bozuyordu. */ .gt_switcher img { display: none !important; } .gt_switcher .gt_option { position: absolute; top: calc(100% + 14px); /* Sağa hizalı: dil seçici menünün en sağındaki öğe, sola hizalı açılan panel ekranın dışına taşıyor. */ left: auto; right: 0; z-index: 60; width: auto; min-width: 170px; background: #fff; border: 0; border-radius: 6px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); padding: 8px 0; margin: 0; } .gt_switcher .gt_option a { display: block; padding: 9px 18px; background: #fff; color: #1a1a1a; font-weight: 500; font-size: 14px; line-height: 1.3; white-space: nowrap; border: 0; transition: background 0.15s ease, color 0.15s ease; } .gt_switcher .gt_option a:hover, .gt_switcher .gt_option a.gt_current { background: #F4F2F2; color: var(--dpx-ikincil-renk); } /* Şeffaf header — SADECE masaüstü. Anasayfada header mobilde de 'şeffaf' sınıfını taşıyor ama mobil menü paneli beyaz; kural mobile sızarsa yazı beyaz zemine beyaz yazılıyor. */ @media (min-width: 861px) { #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .gt_switcher .gt_selected a { color: #fff; } #site-header.dpx-header--anasayfa-uzeri.dpx-header--seffaf .gt_switcher .gt_selected a:hover { color: var(--dpx-ikincil-renk); } } @media (max-width: 860px) { li.menu-item-gtranslate { display: block; position: static; width: 100%; } li.menu-item-gtranslate > div[id^="gtranslate_menu_wrapper"], li.menu-item-gtranslate [class*="gt_container--"], .gt_switcher, .gt_switcher .gt_selected { position: static !important; display: block; width: 100%; white-space: normal; } /* Seçili dil, üstte başlık gibi durur. Liste zaten açık olduğu için tıklanabilir olmasına gerek yok; dokununca bir şey olmaması kullanıcıya hata gibi geliyordu. */ .gt_switcher .gt_selected { pointer-events: none; } .gt_switcher .gt_selected a { display: block; padding: 14px 0 8px; font-size: 15px; line-height: 1.4; color: #1a1a1a; } /* MOBİLDE LİSTE HER ZAMAN AÇIK. GTranslate listeyi kendi JavaScript'iyle açıp kapatıyor ve bu tıklama mobil menünün kendi işleyicisiyle çakışıyor. Temanın mobil alt menüleri de zaten her zaman açık; bu davranış menünün geri kalanıyla tutarlı. !important, jQuery'nin bastığı inline 'display:none' değerini de ezer. */ .gt_switcher .gt_option { display: block !important; position: static; right: auto; width: 100%; min-width: 0; height: auto !important; opacity: 1 !important; visibility: visible !important; background: none; box-shadow: none; border-radius: 0; padding: 0 0 8px; } .gt_switcher .gt_option a { padding: 11px 0 11px 16px; background: none; font-size: 14px; font-weight: 400; color: #555; } .gt_switcher .gt_option a:hover, .gt_switcher .gt_option a.gt_current { background: none; color: var(--dpx-ikincil-renk); } } /* Google'ın çeviri sonrası eklediği üst çubuk, sabit header'ı aşağı itip slider ile üst üste bindiriyor. */ .goog-te-banner-frame, iframe.skiptranslate { display: none !important; } body { top: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* ===================================================================== * DÜZELTMELER — v1.1.9 * ===================================================================== */ /* --- 1) Google Haritası yüksekliği --- ASIL SORUN yükseklik değeri değildi: iframe'e height="100%" veriliyor ama kapsayıcının yalnızca 'min-height'ı vardı. Yüzde yükseklik, ebeveynin KESİN bir yüksekliği olmasını ister; min-height bunu sağlamaz. Dolayısıyla iframe yüzdeyi yok sayıp kendi varsayılan yüksekliğine (~150px) düşüyordu — harita bu yüzden kısa görünüyordu. Çözüm: kapsayıcıya kesin yükseklik ver, iframe'i de mutlak konumlandırıp kapsayıcıyı tamamen doldur. Yükseklik artık Tema Ayarları > Genel Davranış > Harita Yüksekliği'nden geliyor. */ .dpx-iletisim-harita { height: var(--dpx-harita-yukseklik, 520px); min-height: 0; } .dpx-iletisim-harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* --- 2) Mobilde katalog sayfasının yatay kayması --- Izgara ve flex öğelerinin varsayılan 'min-width' değeri 'auto'dur: yani öğe, içeriğinin doğal genişliğinin altına İNEMEZ. Kategori filtresi mobilde yatay kaydırılan bir çip şeridine dönüşüyor ve o şeridin doğal genişliği ekrandan geniş olduğu için, kaydırma kutusu daralacağına ızgara hücresi büyüyor ve tüm sayfa sağa kayıyordu. 'min-width: 0' öğelerin küçülmesine izin veriyor; kaydırma artık sayfanın değil, şeridin kendi içinde oluyor. */ .dpx-katalog-yan, .dpx-katalog-icerik { min-width: 0; } .dpx-katalog-arac, .dpx-katalog-arama { min-width: 0; } .dpx-katalog-filtre { max-width: 100%; }