/* =================================================================== ENA MODERN — MAĞAZA KATMANI ------------------------------------------------------------------- YALNIZCA /client/store sayfasında yüklenir. Yükleyen yer: ena/views/client/cart/store.blade.php içindeki "styles" bölümü, iskelet yerleşiminin bloğundaki yield noktasına basılır. Ortak marka katmanı (yazı tipi, üst bar, alt bilgi) burada DEĞİL: o her panel sayfasında gerekli olduğu için panel.css'e taşındı ve yerleşim tarafından bu dosyadan önce yükleniyor. Buradaki kurallar onu ezebilir. --ena-* jetonları da panel.css'te tanımlı. Burada yalnızca mağazaya özel olan var: ekmek kırıntısı, kategori şeridi, ürün kartları, boş kategori durumu. =================================================================== */ /* ── EKMEK KIRINTISI ────────────────────────────────────────────── Panelde tanıtım sitesine dönüş yolu yoktu: marka logosu /client'a gidiyor, üst barda ana sayfa bağlantısı görünmüyordu. Müşteri mağazaya girince siteye geri dönemiyordu. (Logonun kendisi de yerleşimde düzeltildi: misafir → site, girişli → panel.) */ .ena-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 4px 0 18px; } .ena-crumb a { color: var(--ena-blue); text-decoration: none; font-weight: 500; } .ena-crumb a:hover { text-decoration: underline; } .ena-crumb .ayrac { opacity: .45; } .ena-crumb .simdiki { color: var(--text); font-weight: 600; } /* ── KATEGORİ ŞERİDİ ────────────────────────────────────────────── Sekiz kategori de HER ZAMAN görünür. Boş olanlar gizlenmiyor — kullanıcı kararı: hepsi dolacak, atlanmasın. */ .ena-katlar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0 0 4px; } .ena-kat { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--card); border: 1.5px solid var(--border); border-radius: 999px; transition: all .16s; white-space: nowrap; } .ena-kat i { font-size: 15px; color: var(--ena-blue); transition: color .16s; } .ena-kat:hover { border-color: var(--ena-blue); color: var(--ena-blue); box-shadow: var(--ena-ring); transform: translateY(-1px); } .ena-kat--etkin { background: var(--ena-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(30,136,255,.65); } .ena-kat--etkin i { color: #fff; } .ena-kat--etkin:hover { color: #fff; transform: none; } /* Seçili ama henüz boş kategoride nokta gri kalıyordu; gradyan üstünde okunmuyordu. */ .ena-kat--etkin .ena-kat-nokta { background: #fff; opacity: .85; } /* Henüz paketi olmayan kategori: gizlenmiyor, işaretleniyor. */ .ena-kat--bos { opacity: .72; } .ena-kat--bos .ena-kat-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .55; display: inline-block; } /* ── KATEGORİ AÇILIR MENÜSÜ ─────────────────────────────────────── Birden çok modeli olan kategori (Hosting, Geliştirici) sekmenin kendisinde açılır menü taşıyor. Modeller ikinci bir satıra yayılmıyor — şerit tek satır kalıyor. Fareyle üstüne gelince ve tıklayınca açılır; dışarı tıklayınca ve Esc ile kapanır. */ .ena-kat-sarmal { position: relative; display: inline-flex; } .ena-kat--acilir { cursor: pointer; font-family: inherit; } .ena-kat-ok { font-size: 14px !important; transition: transform .18s; } .ena-kat-sarmal:hover .ena-kat-ok, .ena-kat-sarmal.acik .ena-kat-ok { transform: rotate(180deg); } .ena-kat-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 236px; padding: 8px; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; box-shadow: var(--ena-sh-3); z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; } /* Menü ile sekme arasındaki boşlukta fare kaybolmasın */ .ena-kat-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .ena-kat-sarmal:hover .ena-kat-menu, .ena-kat-sarmal.acik .ena-kat-menu { opacity: 1; visibility: visible; transform: translateY(0); } .ena-kat-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; border-radius: 9px; transition: background .13s, color .13s; white-space: nowrap; } .ena-kat-menu a i { font-size: 15px; color: var(--ena-blue); flex: 0 0 auto; } .ena-kat-menu a:hover { background: #eef4ff; color: var(--ena-blue-deep); } .ena-kat-menu a.secili { background: var(--ena-grad); color: #fff; font-weight: 600; } .ena-kat-menu a.secili i { color: #fff; } .ena-kat-menu-ayrac { height: 1px; background: var(--border); margin: 6px 4px; } /* ── SAYFA BAŞLIĞI ──────────────────────────────────────────────── Türkçe tuzağı: sayfa dili tr olduğu için text-transform:uppercase "i" harfini "İ" yapar. Bu blokta uppercase KULLANILMIYOR. */ .pn-page-title { font-size: 27px !important; letter-spacing: -.6px; background: linear-gradient(135deg, var(--ena-ink) 0%, var(--ena-navy) 55%, var(--ena-blue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pn-page-subtitle { font-size: 13.5px !important; } /* Grup başlığı (h2) — iskelet satır içi stil yazdığı için !important */ .ena-grup-baslik { font-size: 17px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 18px !important; padding-bottom: 11px !important; border-bottom: none !important; position: relative; letter-spacing: -.2px; } .ena-grup-baslik::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 2px; background: var(--ena-grad); } .ena-grup-tanim { font-size: 13px; color: var(--muted); margin: -8px 0 18px; line-height: 1.6; } /* ── ÜRÜN KARTLARI ──────────────────────────────────────────────── Dört paket var; üçlü ızgarada dördüncüsü tek başına alt satıra düşüyordu. 4'lü ızgara paketleri tek sırada tutuyor. */ .pn-product-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)) !important; gap: 18px !important; } @media (min-width: 1180px) { .pn-product-grid { grid-template-columns: repeat(4, 1fr) !important; } } .pn-product-card { border: 1.5px solid var(--border) !important; border-radius: 16px !important; box-shadow: var(--ena-sh-1) !important; transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; overflow: hidden; } .pn-product-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ena-grad); opacity: 0; transition: opacity .18s; } .pn-product-card:hover { transform: translateY(-4px); box-shadow: var(--ena-sh-2) !important; border-color: rgba(30,136,255,.42) !important; } .pn-product-card:hover::before { opacity: 1; } .pn-product-card.featured { border-color: rgba(30,136,255,.55) !important; box-shadow: var(--ena-sh-2) !important; } .pn-product-card.featured::before { opacity: 1; } .pn-popular { background: var(--ena-grad) !important; color: #fff !important; letter-spacing: .2px; box-shadow: 0 6px 14px -6px rgba(30,136,255,.7); } /* Paket adı. İskelette satır içi "color:var(--primary)" idi; ENA paletinde bu koyu lacivert olduğu için karanlık modda koyu kart üstünde kayboluyordu. Artık iki mod için de ayrı tanımlı. */ .ena-urun-adi { font-size: 15px; font-weight: 700; color: var(--ena-navy); margin-bottom: 8px; letter-spacing: -.1px; } .pn-product-price { color: var(--ena-ink) !important; letter-spacing: -.8px; } .pn-product-price .cycle { color: var(--muted) !important; font-weight: 500; } .pn-res i { color: var(--ena-blue) !important; } /* Sipariş butonları — tanıtım sitesindeki gradyan butonun aynısı */ .pn-product-card .btn-primary, .pn-product-card .btn-accent { background: var(--ena-grad) !important; border: none !important; color: #fff !important; border-radius: 10px !important; padding: 11px 18px !important; box-shadow: 0 8px 18px -8px rgba(30,136,255,.62); transition: background .18s, box-shadow .18s, transform .18s; } .pn-product-card .btn-primary:hover, .pn-product-card .btn-accent:hover { background: var(--ena-grad-deep) !important; box-shadow: 0 12px 24px -10px rgba(30,136,255,.75); transform: translateY(-1px); } /* ── KARŞILAŞTIRMA TABLOSU ──────────────────────────────────────── Kartlar yalnızca 6 kaynak gösterebiliyor; seçim yapan müşterinin ihtiyaç duyduğu alanların çoğu (alt alan adı, FTP, cron, PHP sınırları, SSH) kartta yok. Tablo hepsini yan yana koyuyor. */ .ena-kiyas { margin-top: 34px; } .ena-kiyas-ust { margin-bottom: 14px; } .ena-kiyas-ust h3 { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.2px; margin-bottom: 4px; } .ena-kiyas-ust p { font-size: 12.5px; color: var(--muted); } /* Dar ekranda tablo kendi içinde yatay kayar — sayfa gövdesi asla yatay kaymaz. */ .ena-kiyas-kaydir { overflow-x: auto; border: 1.5px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--ena-sh-1); -webkit-overflow-scrolling: touch; } .ena-kiyas-kaydir:focus-visible { outline: 2px solid var(--ena-blue); outline-offset: 2px; } .ena-tablo { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; } /* Başlık satırı */ .ena-tablo thead th { padding: 16px 14px 14px; text-align: center; vertical-align: bottom; background: var(--bg); border-bottom: 2px solid var(--border); position: relative; } .ena-tablo thead th.ena-ozellik-basligi { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .4px; } .ena-tablo-ad { display: block; font-size: 14.5px; font-weight: 700; color: var(--ena-navy); letter-spacing: -.2px; } .ena-tablo-fiyat { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.4px; } .ena-tablo-fiyat small { font-size: 11px; font-weight: 500; color: var(--muted); } .ena-tablo-rozet { display: inline-block; margin-bottom: 7px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #fff; background: var(--ena-grad); letter-spacing: .2px; } /* Bölüm ayırıcı satırı. Seçici bilerek "tbody tr.ena-tablo-bolum td": daha kısa yazılınca ".ena-tablo tbody td" kuralı özgüllükte öne geçiyor ve hem rengi hem hizayı eziyordu — başlıklar mavi yerine metin renginde ve ortalanmış çıkıyordu. */ .ena-tablo tbody tr.ena-tablo-bolum td { padding: 11px 14px 9px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--ena-blue); background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); letter-spacing: .3px; white-space: normal; } /* Gövde */ .ena-tablo tbody th[scope="row"] { padding: 11px 14px; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--border); /* Yatay kaydırırken özellik adı görünür kalsın */ position: sticky; left: 0; background: var(--card); z-index: 1; } .ena-tablo tbody td { padding: 11px 14px; text-align: center; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap; } .ena-tablo tbody tr:hover th[scope="row"], .ena-tablo tbody tr:hover td { background: var(--bg); } .ena-tablo tbody tr:hover .ena-tablo-bolum td { background: var(--bg); } .ena-evet { color: #10b981; font-size: 17px; } .ena-hayir { color: var(--muted); opacity: .6; } /* Öne çıkan paketin sütunu boydan boya vurgulu */ .ena-tablo .one-cikan { background: rgba(30,136,255,.05); box-shadow: inset 1px 0 0 rgba(30,136,255,.18), inset -1px 0 0 rgba(30,136,255,.18); } .ena-tablo thead th.one-cikan { background: rgba(30,136,255,.09); } .ena-tablo tbody tr:hover td.one-cikan { background: rgba(30,136,255,.09); } /* Alt satır: sipariş butonları */ .ena-tablo tfoot th[scope="row"] { position: sticky; left: 0; background: var(--card); border-top: 2px solid var(--border); } .ena-tablo tfoot td { padding: 16px 14px; text-align: center; border-top: 2px solid var(--border); } .ena-tablo-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; font-size: 12.5px; font-weight: 600; color: #fff; text-decoration: none; background: var(--ena-grad); border-radius: 9px; box-shadow: 0 8px 18px -8px rgba(30,136,255,.62); transition: background .18s, transform .18s, box-shadow .18s; white-space: nowrap; } .ena-tablo-btn:hover { background: var(--ena-grad-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(30,136,255,.75); } /* Ekran okuyucu için; görsel olarak gizli */ .ena-gizli-baslik { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── BOŞ KATEGORİ ───────────────────────────────────────────────── Jenerik "ürün yok" yerine dürüst ve yönlendirici bir durum. Kategoriler dolduğunda bu blok kendiliğinden görünmez olur. */ .ena-bos { text-align: center; padding: 54px 26px; border: 1.5px dashed var(--border); border-radius: 18px; background: radial-gradient(120% 100% at 50% 0%, rgba(30,136,255,.06) 0%, transparent 62%), var(--card); } .ena-bos-ikon { width: 62px; height: 62px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 18px; background: var(--ena-grad); box-shadow: 0 14px 30px -12px rgba(30,136,255,.6); } .ena-bos-ikon i { font-size: 27px; color: #fff; } .ena-bos h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -.2px; } .ena-bos p { font-size: 13.5px; color: var(--muted); max-width: 460px; margin: 0 auto 20px; line-height: 1.7; } .ena-bos-eylemler { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .ena-bos-eylemler .btn-primary { background: var(--ena-grad) !important; border: none !important; color: #fff !important; } .ena-bos-eylemler .btn-primary:hover { background: var(--ena-grad-deep) !important; } /* ── KARANLIK MOD ───────────────────────────────────────────────── Panel karanlık modu data-theme="dark" ile çalışıyor (pnlcs_theme çerezi). Kartların okunaklı kalması için tonlar yeniden veriliyor. */ :root[data-theme="dark"] .pn-page-title { background: linear-gradient(135deg, #e8eefc 0%, #7db4ff 60%, #00c2ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-theme="dark"] .pn-product-card { border-color: rgba(255,255,255,.09) !important; } :root[data-theme="dark"] .pn-product-card:hover { border-color: rgba(30,136,255,.5) !important; } :root[data-theme="dark"] .ena-urun-adi { color: #7fc4ff; } :root[data-theme="dark"] .pn-product-price { color: #eef3ff !important; } :root[data-theme="dark"] .ena-kat { border-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .ena-kat-menu { border-color: rgba(255,255,255,.12); } :root[data-theme="dark"] .ena-kat-menu a:hover { background: rgba(30,136,255,.16); color: #7fc4ff; } :root[data-theme="dark"] .ena-kat-menu-ayrac { background: rgba(255,255,255,.1); } :root[data-theme="dark"] .ena-bos { border-color: rgba(255,255,255,.14); } /* Karşılaştırma tablosu — koyu kart zemininde okunaklı tonlar */ :root[data-theme="dark"] .ena-kiyas-kaydir { border-color: rgba(255,255,255,.1); } :root[data-theme="dark"] .ena-tablo-ad { color: #7fc4ff; } :root[data-theme="dark"] .ena-tablo thead th { background: #0f172a; } :root[data-theme="dark"] .ena-tablo tbody tr.ena-tablo-bolum td { background: #0f172a; color: #7fc4ff; } :root[data-theme="dark"] .ena-tablo tbody th[scope="row"], :root[data-theme="dark"] .ena-tablo tfoot th[scope="row"] { background: var(--card); } :root[data-theme="dark"] .ena-tablo thead th.one-cikan { background: rgba(30,136,255,.16); } :root[data-theme="dark"] .ena-tablo .one-cikan { background: rgba(30,136,255,.1); } :root[data-theme="dark"] .ena-tablo tbody tr:hover th[scope="row"], :root[data-theme="dark"] .ena-tablo tbody tr:hover td { background: rgba(255,255,255,.04); } /* ── HAREKET AZALTMA ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .pn-product-card, .ena-kat, .pn-product-card .btn-primary, .pn-product-card .btn-accent, .ena-tablo-btn { transition: none !important; } .pn-product-card:hover, .ena-kat:hover, .ena-tablo-btn:hover { transform: none !important; } } /* ── DAR EKRAN ────────────────────────────────────────────────── */ @media (max-width: 640px) { .pn-page-title { font-size: 22px !important; } .ena-katlar { gap: 7px; } .ena-kat { padding: 8px 13px; font-size: 12.5px; } .ena-bos { padding: 38px 18px; } .ena-tablo { font-size: 12.5px; min-width: 540px; } .ena-tablo thead th { padding: 13px 11px 11px; } .ena-tablo tbody th[scope="row"], .ena-tablo tbody td { padding: 10px 11px; } .ena-tablo-ad { font-size: 13.5px; } .ena-tablo-fiyat { font-size: 13.5px; } .ena-tablo-btn { padding: 8px 13px; font-size: 12px; } } /* Uygulama logolari (public/branding/apps/{slug}) */ .ena-urun-logo { height: 38px; width: auto; max-width: 130px; object-fit: contain; display: block; margin: 0 auto 10px; border-radius: 8px; } .ena-tablo-logo { height: 20px; width: auto; vertical-align: -4px; margin-right: 6px; border-radius: 5px; }