/* ========================================================================= Vidoport — Kategori sayfası redesign (2026-06-15) Scope: body.page-kategori-yeni · !important YOK (scope + ID ile cascade) Sadece kategori sayfasında yüklenir (kategori.php içinde link). Mevcut .trainings/.item-card kurallarına dokunmaz; yeni .ec- sınıfları kullanır. İkonlar: FontAwesome 5.6.3 (ic sayfalarda zaten yüklü). ========================================================================= */ /* ---- Kompakt başlık (hero yerine — breadcrumb_title.php) ---- */ .page-kategori-yeni .ec-cat-head { padding: 22px 0 4px; } .page-kategori-yeni .ec-cat-title { font-size: 28px; font-weight: 700; margin: 0; color: #29303b; letter-spacing: -.01em; line-height: 1.2; } .page-kategori-yeni .ec-cat-meta { margin: 8px 0 0; color: #5b6473; font-size: 15px; } .page-kategori-yeni .ec-cat-meta b { color: #29303b; font-weight: 700; } .page-kategori-yeni .ec-cat-incl { color: #956b0e; font-weight: 600; } /* ---- Sonuç sütunu toolbar (arama + sırala + görünüm anahtarı) ---- */ .page-kategori-yeni .right-cat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .page-kategori-yeni .ec-seg { display: inline-flex; border: 1px solid #d5deec; border-radius: 8px; overflow: hidden; vertical-align: middle; } .page-kategori-yeni .ec-seg-btn { border: 0; background: #fff; color: #5b6473; width: 42px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; } .page-kategori-yeni .ec-seg-btn + .ec-seg-btn { border-left: 1px solid #d5deec; } .page-kategori-yeni .ec-seg-btn.is-active { background: #eef3fd; color: #0056d2; } /* ---- #trainings: liste / ızgara konteyneri ---- */ .page-kategori-yeni #trainings { padding: 4px 0; } .page-kategori-yeni #trainings.ec-list { display: flex; flex-direction: column; gap: 10px; } .page-kategori-yeni #trainings.ec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* ---- Kart (tek , span çocuklar) ---- */ .page-kategori-yeni .ec-card { display: flex; text-decoration: none; color: #29303b; background: #fff; border: 1px solid #e4e9f2; border-radius: 10px; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .08s; } .page-kategori-yeni .ec-card:hover { border-color: #bcd3f6; box-shadow: 0 8px 22px rgba(16, 32, 64, .09); transform: translateY(-2px); } .page-kategori-yeni .ec-ph { position: relative; display: block; flex: none; background: #f6f9fe; overflow: hidden; } .page-kategori-yeni .ec-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); } .page-kategori-yeni .ec-card:hover .ec-ph img { transform: scale(1.04); } /* traning_popular() çıktısı (.badge most-watched / best-seller / yeni) -> görsel üstü rozet */ .page-kategori-yeni .ec-ph .badge { position: absolute; top: 9px; left: 9px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 4px 9px; border-radius: 6px; color: #fff; background: rgba(1, 14, 40, .82); } .page-kategori-yeni .ec-ph .badge.best-seller { background: #f4c150; color: #3a2c00; } .page-kategori-yeni .ec-ph .badge.most-watched { background: #0056d2; } .page-kategori-yeni .ec-body { display: flex; min-width: 0; } .page-kategori-yeni .ec-main { display: flex; flex-direction: column; min-width: 0; } .page-kategori-yeni .ec-h { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; color: #29303b; letter-spacing: -.005em; } .page-kategori-yeni .ec-card:hover .ec-h { color: #0056d2; } .page-kategori-yeni .ec-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13px; color: #5b6473; } .page-kategori-yeni .ec-info > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; position: relative; white-space: nowrap; } .page-kategori-yeni .ec-info > span:first-child { padding-left: 0; } .page-kategori-yeni .ec-info > span:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #d5deec; transform: translateY(-50%); } .page-kategori-yeni .ec-info i { color: #8a94a6; } .page-kategori-yeni .ec-lv { font-weight: 600; color: #29303b; } .page-kategori-yeni .ec-lv::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0056d2; display: inline-block; margin-right: 7px; vertical-align: middle; } .page-kategori-yeni .ec-lv.lv-orta::before { background: #1f9d57; } .page-kategori-yeni .ec-lv.lv-ileri::before { background: #0056d2; } .page-kategori-yeni .ec-lv.lv-uzman::before { background: #c4881a; } .page-kategori-yeni .ec-foot { display: flex; align-items: center; gap: 8px; } .page-kategori-yeni .ec-incl { font-size: 12.5px; font-weight: 600; color: #956b0e; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .page-kategori-yeni .ec-incl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f4c150; display: inline-block; } .page-kategori-yeni .ec-watch { font-size: 14px; font-weight: 600; color: #0056d2; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .page-kategori-yeni .ec-watch i { font-size: 12px; } .page-kategori-yeni .ec-card:hover .ec-watch { color: #0047ab; } /* ---- LİSTE görünümü (varsayılan) ---- */ .page-kategori-yeni #trainings.ec-list .ec-card { flex-direction: row; align-items: stretch; } .page-kategori-yeni #trainings.ec-list .ec-ph { width: 184px; min-height: 104px; } .page-kategori-yeni #trainings.ec-list .ec-body { flex: 1; flex-direction: row; align-items: center; gap: 18px; padding: 12px 16px; } .page-kategori-yeni #trainings.ec-list .ec-main { flex: 1; } .page-kategori-yeni #trainings.ec-list .ec-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; } .page-kategori-yeni #trainings.ec-list .ec-foot { flex: none; flex-direction: column; align-items: flex-end; gap: 7px; } /* ---- IZGARA görünümü ---- */ .page-kategori-yeni #trainings.ec-grid .ec-card { flex-direction: column; } .page-kategori-yeni #trainings.ec-grid .ec-ph { width: 100%; aspect-ratio: 16 / 9; } .page-kategori-yeni #trainings.ec-grid .ec-body { flex-direction: column; flex: 1; padding: 13px 15px 15px; } .page-kategori-yeni #trainings.ec-grid .ec-main { flex: 1; } .page-kategori-yeni #trainings.ec-grid .ec-h { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; margin-bottom: 9px; } .page-kategori-yeni #trainings.ec-grid .ec-info { margin-bottom: 12px; } .page-kategori-yeni #trainings.ec-grid .ec-foot { margin-top: auto; justify-content: space-between; border-top: 1px solid #eef2f9; padding-top: 12px; } /* ---- Responsive (3 ana breakpoint) ---- */ @media (max-width: 1024px) { .page-kategori-yeni #trainings.ec-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .page-kategori-yeni #trainings.ec-grid { grid-template-columns: 1fr; } .page-kategori-yeni #trainings.ec-list .ec-ph { width: 120px; min-height: 74px; } .page-kategori-yeni #trainings.ec-list .ec-body { flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 13px; } .page-kategori-yeni #trainings.ec-list .ec-h { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .page-kategori-yeni #trainings.ec-list .ec-foot { flex-direction: row; align-self: stretch; justify-content: space-between; align-items: center; } .page-kategori-yeni .ec-cat-title { font-size: 23px; } } @media (max-width: 480px) { /* cok dar telefonlarda liste kart footer'i dikey yigilsin (review onerisi) */ .page-kategori-yeni #trainings.ec-list .ec-foot { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ========================================================================= SOL FILTRE PANELI (filter.php) — 2026-06-17 Dropdown ETKILESIM modeli KORUNUR (.Filter / data-id / data-toggle="dropdown"). Sadece gorsel: mevcut .category-search markup'ini scoped olarak yeniden stiller. Kart diliyle ayni: hairline #e4e9f2, #0056d2, #f6f9fe hover, Jost (inherit). ========================================================================= */ .page-kategori-yeni .category-search { margin: 0 0 24px; } /* panel govdesi — .main.content.in-k'nin global float/padding'i notrlenir */ .page-kategori-yeni .category-search .main.content.in-k { float: none; width: auto; padding: 0; background: #fff; border: 1px solid #e4e9f2; border-radius: 10px; overflow: hidden; } /* baslik: "FILTRELE" eyebrow + "47 Egitim" sayaci (tek markup, ::before ile etiket) */ .page-kategori-yeni #egitimSayisi { margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid #eef2f9; font-size: 17px; font-weight: 700; color: #29303b; letter-spacing: -.01em; line-height: 1.2; } .page-kategori-yeni #egitimSayisi::before { content: "FİLTRELE"; display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8a94a6; } /* mobil "Filtrele" butonu (d-lg-none) */ .page-kategori-yeni #filter-button { width: 100%; margin: 0; border: 0; border-radius: 0; background: #0056d2; color: #fff; font-weight: 600; font-size: 15px; padding: 12px; } .page-kategori-yeni #filter-button:hover { background: #0047ab; } /* filtre satirlari — her .btn-group tam genislikte bir satir */ .page-kategori-yeni .category-search .btn-group { display: block; width: 100%; } .page-kategori-yeni .category-search .btn-group > .dropdown-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; margin: 0; cursor: pointer; box-shadow: none; background: #fff; border: 0; border-top: 1px solid #eef2f9; border-radius: 0; padding: 12px 16px; font-size: 14.5px; font-weight: 500; color: #29303b; } .page-kategori-yeni .category-search #filter-content .btn-group:first-child > .dropdown-toggle { border-top: 0; } .page-kategori-yeni .category-search .btn-group > .dropdown-toggle:hover, .page-kategori-yeni .category-search .btn-group > .dropdown-toggle:focus, .page-kategori-yeni .category-search .dropdown-toggle[aria-expanded="true"] { background: #f6f9fe; color: #0056d2; outline: none; } .page-kategori-yeni .category-search .dropdown-toggle i { color: #8a94a6; font-size: 13px; transition: transform .15s, color .15s; } .page-kategori-yeni .category-search .btn-group > .dropdown-toggle:hover i, .page-kategori-yeni .category-search .dropdown-toggle[aria-expanded="true"] i { color: #0056d2; } .page-kategori-yeni .category-search .dropdown-toggle[aria-expanded="true"] i { transform: rotate(180deg); } /* bootstrap'in kendi caret ucgenini gizle (markup'ta zaten fa-angle-down var) */ .page-kategori-yeni .category-search .dropdown-toggle::after { display: none; } /* acilir menu — panel ICINDE, satirin HEMEN ALTINDA acilir (accordion). Floating overlay DEGIL: filter.php toggle'larina data-display="static" eklendi (Bootstrap 4.1+ Popper'i devre disi birakir) -> position:static akista calisir. */ .page-kategori-yeni .category-search .dropdown-menu { position: static; float: none; width: auto; min-width: 0; margin: 0; padding: 4px 12px 12px; border: 0; border-radius: 0; box-shadow: none; background: #f7fafd; border-top: 1px dashed #e4e9f2; } .page-kategori-yeni .category-search .dropdown-item { border-radius: 7px; padding: 8px 12px; font-size: 13.5px; font-weight: 500; color: #4a5462; white-space: normal; } .page-kategori-yeni .category-search .dropdown-item:hover, .page-kategori-yeni .category-search .dropdown-item:focus { background: #e7eefb; color: #0056d2; } .page-kategori-yeni .category-search .dropdown-item:active { background: #0056d2; color: #fff; } /* aktif filtre chip'leri (#filterCont <- sunucu .remove-search-filter basar). "AKTIF" etiketi KALDIRILDI (bos #filterCont'a yanlislikla basiliyordu). */ .page-kategori-yeni #filterCont { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .page-kategori-yeni #filterCont:empty { display: none; margin: 0; } .page-kategori-yeni .remove-search-filter { display: inline-flex; text-decoration: none; } .page-kategori-yeni .remove-search-filter > span { display: inline-flex; align-items: center; gap: 7px; background: #eef3fd; color: #0056d2; border: 1px solid #d5e3fb; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.4; } .page-kategori-yeni .remove-search-filter:hover > span { background: #0056d2; color: #fff; border-color: #0056d2; } .page-kategori-yeni .remove-search-filter i { font-size: 10px; }