/* ============================================================ 3D Model Arama - Tema Sistemi 4 tema: aurora (koyu glass), studio (acik minimal), industrial (maker), brutalist (cesur) Tema secimi ile uygulanir. ============================================================ */ :root { --radius: 16px; --radius-sm: 10px; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --maxw: 1180px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; } a { color: inherit; text-decoration: none; } img { display: block; } /* ---------------- TEMA: AURORA DARK ---------------- */ [data-theme="aurora"] { --bg: #0a0e1a; --bg-grad: radial-gradient(1200px 600px at 15% -10%, rgba(99,102,241,.25), transparent 60%), radial-gradient(1000px 500px at 100% 0%, rgba(168,85,247,.20), transparent 55%), radial-gradient(900px 600px at 50% 120%, rgba(56,189,248,.15), transparent 60%); --text: #e8ecf5; --text-dim: #94a3b8; --accent: #6366f1; --accent-2: #a855f7; --card-bg: rgba(255,255,255,.04); --card-border: rgba(255,255,255,.09); --card-hover: rgba(255,255,255,.07); --header-bg: rgba(10,14,26,.72); --header-border: rgba(255,255,255,.08); --input-bg: rgba(255,255,255,.05); --input-border: rgba(255,255,255,.12); --shadow: 0 20px 50px -12px rgba(0,0,0,.6); --glass: blur(20px); } /* ---------------- TEMA: STUDIO LIGHT ---------------- */ [data-theme="studio"] { --bg: #f7f8fb; --bg-grad: radial-gradient(900px 500px at 90% -5%, rgba(99,102,241,.06), transparent 60%); --text: #0f172a; --text-dim: #64748b; --accent: #4f46e5; --accent-2: #6366f1; --card-bg: #ffffff; --card-border: #e9edf3; --card-hover: #ffffff; --header-bg: rgba(247,248,251,.82); --header-border: #e9edf3; --input-bg: #ffffff; --input-border: #d8dee8; --shadow: 0 10px 30px -8px rgba(15,23,42,.10); --glass: blur(16px); } /* ---------------- TEMA: MAKER INDUSTRIAL ---------------- */ [data-theme="industrial"] { --bg: #16181d; --bg-grad: linear-gradient(180deg, #16181d 0%, #1b1e24 100%), repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 22px); --text: #ececec; --text-dim: #8a8f99; --accent: #ff6b1a; --accent-2: #ffa500; --card-bg: #1f232b; --card-border: #2c313b; --card-hover: #242a33; --header-bg: rgba(22,24,29,.85); --header-border: #2c313b; --input-bg: #1a1d23; --input-border: #353b46; --shadow: 0 14px 36px -10px rgba(0,0,0,.7); --glass: blur(10px); --font: 'Inter', system-ui, sans-serif; } /* ---------------- TEMA: NEO BRUTALIST ---------------- */ [data-theme="brutalist"] { --bg: #fdf6e3; --bg-grad: none; --text: #1a1a1a; --text-dim: #555; --accent: #ff4757; --accent-2: #2e86de; --card-bg: #ffffff; --card-border: #1a1a1a; --card-hover: #fffceb; --header-bg: #ffe66d; --header-border: #1a1a1a; --input-bg: #ffffff; --input-border: #1a1a1a; --shadow: 6px 6px 0 #1a1a1a; --glass: none; --radius: 4px; --radius-sm: 3px; } /* ================= ORTAK YAPISAL ================= */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--bg-grad); pointer-events: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; } /* HEADER (sticky) */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-bottom: 1px solid var(--header-border); } [data-theme="brutalist"] .site-header { border-bottom-width: 3px; } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 18px; display: flex; flex-direction: column; gap: 12px; } .header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand img { height: 38px; width: auto; max-width: 160px; object-fit: contain; } .brand .title { font-weight: 700; font-size: 15px; line-height: 1.2; } .brand .title small { display: block; font-weight: 400; font-size: 11px; color: var(--text-dim); } .header-link { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); white-space: nowrap; } .header-link:hover { color: var(--text); } /* ARAMA CUBUGU */ .search-row { display: flex; gap: 10px; align-items: stretch; } .search-box { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0 16px; min-height: 50px; } [data-theme="brutalist"] .search-box { border-width: 2px; box-shadow: 3px 3px 0 #1a1a1a; } .search-box i { color: var(--text-dim); font-size: 16px; } .search-box input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; font-family: var(--font); } .search-box input::placeholder { color: var(--text-dim); } .btn-search { border: none; cursor: pointer; padding: 0 22px; min-height: 50px; border-radius: var(--radius); font-weight: 600; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: transform .15s, filter .15s; } .btn-search:hover { filter: brightness(1.08); transform: translateY(-1px); } [data-theme="brutalist"] .btn-search { background: var(--accent); border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; color: #fff; } [data-theme="brutalist"] .btn-search:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #1a1a1a; } /* FILTRE / PLATFORM CIPLERI */ .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chip { font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; transition: all .15s; } .chip:hover { color: var(--text); } .chip.active { color: #fff; border-color: transparent; background: var(--accent); } [data-theme="brutalist"] .chip { border-width: 2px; border-color: #1a1a1a; border-radius: 4px; } [data-theme="brutalist"] .chip.active { background: var(--accent-2); color: #fff; } /* ANA ALAN */ main { padding: 26px 0 60px; } .status { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-dim); } .status.err { color: #f87171; border-color: rgba(248,113,113,.3); } .summary { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; } .summary b { color: var(--text); } /* KART GRID - kolon sayisi admin'den ayarlanir (--cols) */ .grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 4), 1fr); } @media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; backdrop-filter: var(--glass); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); background: var(--card-hover); } [data-theme="brutalist"] .card { border-width: 2px; } [data-theme="brutalist"] .card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow); } .card-img { position: relative; aspect-ratio: 4/3; background: rgba(125,125,125,.12); overflow: hidden; } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .card:hover .card-img img { transform: scale(1.06); } .card-img .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); } .badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; color: #fff; padding: 3px 8px; border-radius: 6px; text-transform: capitalize; letter-spacing: .2px; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .price { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; color: #fff; background: #059669; padding: 3px 8px; border-radius: 6px; } .card-body { padding: 12px 13px; display: flex; flex-direction: column; flex: 1; } .card-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .card-author { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-stats { margin-top: auto; padding-top: 10px; display: flex; gap: 12px; font-size: 11.5px; color: var(--text-dim); } .card-stats i { margin-right: 3px; } .card-stats .heart { color: #fb7185; } .card-stats .star { color: #fbbf24; } /* PAGINATION */ .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; } .pg-btn { cursor: pointer; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); display: inline-flex; align-items: center; gap: 8px; transition: all .15s; } .pg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .pg-btn:disabled { opacity: .4; cursor: not-allowed; } [data-theme="brutalist"] .pg-btn { border-width: 2px; border-color: #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; } .pg-label { font-size: 14px; font-weight: 600; color: var(--text-dim); } /* SKELETON yukleniyor */ .skeleton { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; } .skeleton .sk-img { aspect-ratio: 4/3; background: linear-gradient(90deg, rgba(125,125,125,.08), rgba(125,125,125,.16), rgba(125,125,125,.08)); background-size: 200% 100%; animation: shimmer 1.3s infinite; } .skeleton .sk-line { height: 11px; margin: 12px 13px 0; border-radius: 4px; background: rgba(125,125,125,.14); } .skeleton .sk-line.short { width: 55%; } @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* BOS DURUM */ .empty { text-align: center; padding: 70px 20px; color: var(--text-dim); } .empty i { font-size: 46px; opacity: .4; margin-bottom: 16px; } .empty h3 { color: var(--text); font-size: 18px; margin-bottom: 6px; } /* FOOTER */ .site-footer { border-top: 1px solid var(--card-border); padding: 24px 0; margin-top: 40px; font-size: 12.5px; color: var(--text-dim); text-align: center; } .site-footer a { color: var(--accent); } /* FILTRE BUTONU */ .btn-filter { border: 1px solid var(--input-border); cursor: pointer; padding: 0 18px; min-height: 50px; border-radius: var(--radius); font-weight: 600; font-size: 14px; background: var(--input-bg); color: var(--text); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: all .15s; } .btn-filter:hover { border-color: var(--accent); color: var(--accent); } .btn-filter.has-filter { border-color: var(--accent); color: var(--accent); } [data-theme="brutalist"] .btn-filter { border-width: 2px; box-shadow: 3px 3px 0 #1a1a1a; } /* YAN FILTRE PANELI */ .filter-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .filter-overlay.open { opacity: 1; visibility: visible; } .filter-panel { position: fixed; top: 0; left: 0; z-index: 95; height: 100vh; width: 320px; max-width: 85vw; background: var(--card-bg); border-right: 1px solid var(--card-border); backdrop-filter: var(--glass); transform: translateX(-100%); transition: transform .25s cubic-bezier(.2,.8,.3,1); display: flex; flex-direction: column; box-shadow: var(--shadow); } .filter-panel.open { transform: translateX(0); } [data-theme="brutalist"] .filter-panel { border-right-width: 3px; } .fp-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--card-border); } .fp-head h3 { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 9px; } .fp-head h3 i { color: var(--accent); } .fp-close { width: 34px; height: 34px; border: none; cursor: pointer; border-radius: 8px; background: var(--input-bg); color: var(--text); font-size: 15px; } .fp-close:hover { color: var(--accent); } .fp-body { flex: 1; overflow-y: auto; padding: 20px; } .fp-group { margin-bottom: 26px; } .fp-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; } .fp-options { display: flex; flex-wrap: wrap; gap: 8px; } .fp-opt { border: 1px solid var(--card-border); cursor: pointer; padding: 9px 15px; border-radius: 999px; font-size: 13px; background: var(--input-bg); color: var(--text-dim); transition: all .15s; font-family: var(--font); } .fp-opt:hover { color: var(--text); border-color: var(--accent); } .fp-opt.active { background: var(--accent); color: #fff; border-color: transparent; } [data-theme="brutalist"] .fp-opt { border-width: 2px; border-radius: 4px; } [data-theme="brutalist"] .fp-opt.active { background: var(--accent-2); } .fp-select { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 10px 13px; color: var(--text); font-size: 13.5px; font-family: var(--font); outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } .fp-select:focus { border-color: var(--accent); } [data-theme="brutalist"] .fp-select { border-width: 2px; } .fp-note { font-size: 11.5px; color: var(--text-dim); margin-top: 9px; line-height: 1.45; } /* Platform secimi */ .fp-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .fp-platform-actions { display: flex; gap: 6px; } .fp-mini-btn { font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer; border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-dim); font-family: var(--font); } .fp-mini-btn:hover { color: var(--accent); border-color: var(--accent); } .fp-platforms { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; } .fp-pf { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; transition: background .12s; font-size: 13px; color: var(--text); } .fp-pf:hover { background: var(--card-hover); } .fp-pf input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } .fp-pf-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .fp-pf-name { text-transform: capitalize; } .fp-foot { padding: 16px 20px; border-top: 1px solid var(--card-border); } .fp-apply { width: 100%; border: none; cursor: pointer; padding: 13px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; gap: 8px; } [data-theme="brutalist"] .fp-apply { background: var(--accent); border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; } /* ============ MODAL ============ */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); } .modal-overlay.open { display: flex; animation: fadeIn .18s ease; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .modal { width: 100%; max-width: 640px; max-height: 90vh; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: var(--glass); display: flex; flex-direction: column; animation: modalUp .22s cubic-bezier(.2,.8,.3,1); } [data-theme="brutalist"] .modal { border-width: 3px; } @keyframes modalUp { from { transform: translateY(16px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } } .modal-img { position: relative; width: 100%; aspect-ratio: 16/10; background: rgba(125,125,125,.12); overflow: hidden; } .modal-img img { width: 100%; height: 100%; object-fit: contain; } .modal-img .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); } .modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .15s; } .modal-close:hover { background: rgba(0,0,0,.8); } .modal-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 11px; border-radius: 6px; text-transform: capitalize; } .modal-body { padding: 22px 24px; overflow-y: auto; } .modal-title { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 8px; } .modal-author { font-size: 13.5px; color: var(--text-dim); margin-bottom: 18px; display: flex; align-items: center; gap: 7px; } .modal-stats { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } .modal-stat { display: flex; flex-direction: column; gap: 2px; } .modal-stat .n { font-size: 19px; font-weight: 700; color: var(--text); } .modal-stat .l { font-size: 11.5px; color: var(--text-dim); } .modal-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; } .modal-tag { font-size: 11.5px; color: var(--text-dim); background: var(--input-bg); border: 1px solid var(--card-border); padding: 4px 10px; border-radius: 999px; } [data-theme="brutalist"] .modal-tag { border-radius: 4px; } .modal-open-btn { width: 100%; border: none; cursor: pointer; padding: 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; gap: 9px; transition: filter .15s, transform .15s; } .modal-open-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } [data-theme="brutalist"] .modal-open-btn { background: var(--accent); border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; } .card { cursor: pointer; } /* MOBIL */ @media (max-width: 640px) { .brand .title { font-size: 13px; } .brand img { height: 32px; max-width: 120px; } .search-box { min-height: 46px; } .btn-search { padding: 0 16px; min-height: 46px; } .btn-search span { display: none; } .btn-filter span { display: none; } .btn-filter { padding: 0 14px; min-height: 46px; } .header-link span { display: none; } }