/* ========================================================= Elit Galeri — Main Stylesheet Fonts: Bodoni Moda (headings) + Jost (body) + Cinzel (stat nums + labels) Font yükleme: HTML içindeki ile yapılır — @import kaldırıldı ========================================================= */ /* ── CSS Variables ─────────────────────────────────────── */ :root { --bg: #090C10; --bg2: #0F1419; --bg3: #161D26; --surface: #1A2233; --border: rgba(255,255,255,0.08); --text: #F0F4F8; --text2: rgba(240,244,248,0.72); --gold: #C9A84C; --gold-dim: rgba(201,168,76,0.12); --radius: 10px; --radius-lg:16px; --shadow: 0 2px 8px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.28); --trans: 0.22s ease; --navbar-h: 68px; /* Expertise */ --orijinal: #22C55E; --boyali: #3B82F6; --lokal: #EAB308; --degisen: #EF4444; --belirtilmedi: #6B7280; /* Status */ --active: #22C55E; --sold: #EF4444; --reserved: #EAB308; } [data-theme="light"] { --bg: #F8FAFC; --bg2: #F1F5F9; --bg3: #E2E8F0; --surface: #FFFFFF; --border: rgba(0,0,0,0.08); --text: #0F172A; --text2: rgba(15,23,42,0.72); --gold: #96720A; --gold-dim: rgba(150,114,10,0.10); --shadow: 0 2px 8px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08); } /* ── Reset & Base ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Jost', sans-serif; font-weight: 400; background: var(--bg); color: var(--text); line-height: 1.65; min-height: 100vh; transition: background var(--trans), color var(--trans); } h1,h2,h3,h4,h5 { font-family: 'Bodoni Moda', serif; line-height: 1.2; font-weight: 700; } a { color: var(--gold); text-decoration: none; transition: opacity var(--trans); } a:hover { opacity: 0.8; } img { max-width: 100%; display: block; } ul { list-style: none; } button, input, select, textarea { font-family: 'Jost', sans-serif; font-size: 1rem; } /* ── Utilities ─────────────────────────────────────────── */ .container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .text-gold { color: var(--gold); } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .badge-active { background: rgba(34,197,94,.18); color: var(--active); } .badge-sold { background: rgba(239,68,68,.18); color: var(--sold); } .badge-reserved { background: rgba(234,179,8,.18); color: var(--reserved); } /* ── Navbar ────────────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 68px; background: rgba(9,12,16,0.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); display: flex; align-items: center; } [data-theme="light"] .navbar { background: rgba(248,250,252,0.88); } .navbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .navbar-logo { display: flex; align-items: center; gap: 10px; font-family: 'Bodoni Moda', serif; font-size: 1.35rem; font-weight: 700; color: var(--text); } .navbar-logo span { color: var(--gold); } .navbar-nav { display: flex; align-items: center; gap: 2rem; } .navbar-nav a { color: var(--text2); font-size: .9rem; font-weight: 500; transition: color var(--trans); } .navbar-nav a:hover, .navbar-nav a.active { color: var(--gold); opacity: 1; } .navbar-actions { display: flex; align-items: center; gap: .75rem; } /* Theme Toggle */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--trans), border-color var(--trans); } .theme-toggle:hover { border-color: var(--gold); color: var(--gold); } .theme-toggle svg { width: 18px; height: 18px; } .icon-moon { display: block; } .icon-sun { display: none; } [data-theme="light"] .icon-moon { display: none; } [data-theme="light"] .icon-sun { display: block; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; padding: 0; } .hamburger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--trans), opacity var(--trans); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile Nav Drawer */ .mobile-nav { display: none; position: fixed; top: var(--navbar-h); left: 0; right: 0; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; flex-direction: column; gap: .75rem; z-index: 899; } .mobile-nav.open { display: flex; } .mobile-nav a { color: var(--text); font-size: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); } .mobile-nav a:last-child { border-bottom: none; } /* ── Hero ──────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 18% 55%, rgba(201,168,76,.08) 0%, transparent 55%), radial-gradient(ellipse at 82% 20%, rgba(201,168,76,.05) 0%, transparent 45%), linear-gradient(160deg, var(--bg) 0%, var(--bg3) 100%); } .hero-bg { position: absolute; inset: 0; opacity: .18; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--bg) 100%); } .hero-content { position: relative; z-index: 1; text-align: center; padding: 2rem 1.5rem; } .hero-eyebrow { font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 1rem; } .hero-title { font-size: clamp(2.5rem, 6vw, 5rem); color: var(--text); line-height: 1.1; margin-bottom: 1.25rem; } .hero-title em { color: var(--gold); font-style: italic; } .hero-subtitle { font-size: 1.1rem; color: var(--text2); max-width: 520px; margin: 0 auto 2.5rem; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: .75rem 2rem; border-radius: var(--radius); font-weight: 600; font-size: .95rem; cursor: pointer; border: none; transition: all var(--trans); } .btn-gold { background: var(--gold); color: #000; } .btn-gold:hover { opacity: .88; transform: translateY(-1px); color: #000; } .btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold); } .btn-outline:hover { background: var(--gold-dim); } .btn-sm { padding: .45rem 1.1rem; font-size: .85rem; } .btn-danger { background: var(--sold); color: #fff; } .btn-danger:hover { opacity: .85; } /* ── Filter Bar ────────────────────────────────────────── */ .filter-section { padding: 2rem 0 1rem; background: var(--bg2); border-bottom: 1px solid var(--border); } .filter-scroll { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; /* Fade hint: shows there's more content to scroll */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 2.5rem), transparent 100%); padding-left: 1rem; padding-right: 2.5rem; } .filter-scroll::-webkit-scrollbar { display: none; } .filter-pill { flex-shrink: 0; padding: .4rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 500; background: var(--surface); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: all var(--trans); } .filter-pill:hover, .filter-pill.active { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); } .filter-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-top: 1rem; } .filter-group { display: flex; flex-direction: column; gap: .3rem; min-width: 140px; } .filter-group label { font-size: .78rem; color: var(--text2); font-weight: 500; } .filter-input, .filter-select { padding: .45rem .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .88rem; transition: border-color var(--trans); } .filter-input:focus, .filter-select:focus { outline: none; border-color: var(--gold); } .filter-select option { background: var(--bg2); } /* ── Car Grid ──────────────────────────────────────────── */ .cars-section { padding: 3rem 0; } .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: .5rem; } .section-title { font-size: 1.9rem; } .cars-count { font-size: .9rem; color: var(--text2); } .cars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } /* Car Card */ .car-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); display: flex; flex-direction: column; } .car-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(201,168,76,0.45); border-left-color: var(--gold); } .car-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg3); } .car-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .car-card:hover .car-card-img img { transform: scale(1.04); } .car-card-status { position: absolute; top: 10px; left: 10px; } .car-card-ilan { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: .7rem; padding: 2px 8px; border-radius: 999px; font-weight: 500; letter-spacing: .04em; } .car-card-body { padding: 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; } .car-card-brand { font-size: .78rem; color: var(--text2); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; } .car-card-model { font-family: 'Bodoni Moda', serif; font-size: 1.15rem; font-weight: 700; color: var(--text); } .car-card-meta { display: flex; gap: 1rem; flex-wrap: wrap; } .car-card-meta-item { display: flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--text2); } .car-card-meta-item svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; } .car-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border); } .car-price-block { display: flex; flex-direction: column; } .car-price-old { font-size: .78rem; color: var(--text2); text-decoration: line-through; } .car-price-current { font-family: 'Bodoni Moda', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold); letter-spacing: -.02em; } .car-discount { font-size: .72rem; color: #fff; background: var(--sold); padding: 2px 7px; border-radius: 999px; margin-left: 6px; font-weight: 600; } /* ── Car Detail ────────────────────────────────────────── */ .detail-page { padding-top: calc(var(--navbar-h) + 20px); } .detail-gallery { display: grid; gap: 8px; grid-template-columns: 1fr; } .detail-main-img { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg3); cursor: zoom-in; } .detail-main-img img { width: 100%; height: 100%; object-fit: cover; } .detail-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .detail-thumbs::-webkit-scrollbar { height: 4px; } .detail-thumbs::-webkit-scrollbar-track { background: var(--bg3); } .detail-thumbs::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; } .detail-thumb { flex-shrink: 0; width: 90px; height: 62px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color var(--trans); } .detail-thumb.active, .detail-thumb:hover { border-color: var(--gold); } .detail-thumb img { width: 100%; height: 100%; object-fit: cover; } .detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; margin-top: 2.5rem; } .detail-info h1 { font-size: 2.2rem; margin-bottom: .5rem; } .detail-ilan { font-size: .8rem; color: var(--text2); margin-bottom: 1.25rem; } .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .5rem; margin: 1.5rem 0; } .spec-item { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .85rem; } .spec-label { font-size: .75rem; color: var(--text2); font-weight: 500; margin-bottom: 2px; } .spec-value { font-size: .92rem; font-weight: 600; color: var(--text); } .detail-section-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 1.75rem 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); } .detail-description { font-size: .92rem; color: var(--text2); line-height: 1.8; white-space: pre-wrap; } /* Expertise Display */ .expertise-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .expertise-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--border); } .expertise-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* Detail Sidebar */ .detail-sidebar { position: sticky; top: calc(var(--navbar-h) + 20px); align-self: flex-start; } .detail-price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; } .detail-price-main { font-family: 'Bodoni Moda', serif; font-size: 2rem; font-weight: 700; color: var(--gold); } .detail-cta-group { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.25rem; } .btn-whatsapp { background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; padding: .75rem; border-radius: var(--radius); font-weight: 600; font-size: .95rem; transition: opacity var(--trans); } .btn-whatsapp:hover { opacity: .88; color: #fff; } .btn-call { background: var(--gold-dim); color: var(--gold); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; gap: 8px; padding: .75rem; border-radius: var(--radius); font-weight: 600; font-size: .95rem; transition: background var(--trans); } .btn-call:hover { background: rgba(201,168,76,0.2); color: var(--gold); } /* ── Lightbox ──────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; } .lightbox.open { display: flex; } .lightbox-img { max-width: 90vw; max-height: 88vh; border-radius: var(--radius); } .lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-prev { left: 1.25rem; } .lightbox-next { right: 1.25rem; } /* ── Footer ────────────────────────────────────────────── */ footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 3rem 0 1.5rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-logo { font-family: 'Bodoni Moda', serif; font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: .75rem; } .footer-logo span { color: var(--gold); } .footer-desc { font-size: .88rem; color: var(--text2); line-height: 1.7; } .footer-heading { font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text2); margin-bottom: 1rem; } .footer-links { display: flex; flex-direction: column; gap: .5rem; } .footer-links a { font-size: .88rem; color: var(--text2); transition: color var(--trans); } .footer-links a:hover { color: var(--gold); opacity: 1; } .footer-bottom { border-top: 1px solid var(--border); padding-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--text2); flex-wrap: wrap; gap: .5rem; } /* ── Animations ────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .anim-fade { animation: fadeIn .5s ease both; } .anim-slide-up { animation: slideUp .55s ease both; } /* ── Admin Panel ───────────────────────────────────────── */ .admin-body { background: var(--bg); min-height: 100vh; padding-top: 0; display: flex; flex-direction: column; } .admin-layout { display: flex; min-height: 100vh; } .admin-sidebar { width: 240px; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.5rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; } .admin-sidebar-logo { font-family: 'Bodoni Moda', serif; font-size: 1.2rem; font-weight: 700; color: var(--text); padding: 0 1.5rem 1.5rem; border-bottom: 1px solid var(--border); } .admin-sidebar-logo span { color: var(--gold); } .admin-nav { padding: 1rem 0; flex: 1; } .admin-nav a { display: flex; align-items: center; gap: 10px; padding: .7rem 1.5rem; color: var(--text2); font-size: .9rem; font-weight: 500; transition: background var(--trans), color var(--trans); } .admin-nav a svg { width: 18px; height: 18px; flex-shrink: 0; } .admin-nav a:hover, .admin-nav a.active { background: var(--gold-dim); color: var(--gold); opacity: 1; } .admin-sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text2); } .admin-main { flex: 1; padding: 2rem; overflow-x: auto; } .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .admin-title { font-size: 1.75rem; } /* Admin Table */ .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .admin-table th, .admin-table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); } .admin-table th { background: var(--bg2); color: var(--text2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .admin-table tbody tr:hover { background: var(--bg2); } .admin-table td { color: var(--text); vertical-align: middle; } /* Admin Form */ .admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.5rem; } .admin-card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; } .form-group { display: flex; flex-direction: column; gap: .35rem; } .form-group.full { grid-column: 1 / -1; } .form-label { font-size: .82rem; color: var(--text2); font-weight: 500; } .form-input, .form-select, .form-textarea { padding: .6rem .85rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .9rem; transition: border-color var(--trans); width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); } .form-select option { background: var(--bg2); } .form-textarea { resize: vertical; min-height: 100px; } /* Expertise SVG Map */ .expertise-wrap { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; } .expertise-svg-container { flex-shrink: 0; width: 100%; max-width: 260px; } .expertise-svg-container svg { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg2); color: var(--text); } .car-part { cursor: pointer; transition: filter .15s; } .car-part:hover { filter: brightness(1.18); } .expertise-controls { flex: 1; min-width: 200px; } .expertise-legend-title { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: .75rem; } .expertise-legend-items { display: flex; flex-direction: column; gap: .5rem; } .expertise-legend-item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--text2); } .expertise-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .expertise-selected-part { font-size: .82rem; color: var(--gold); margin-top: 1rem; font-weight: 500; min-height: 1.2em; } .svg-co { fill: none; stroke: currentColor; opacity: .18; } .svg-cd { stroke: currentColor; opacity: .15; } /* Image Upload Zone */ .upload-zone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; cursor: pointer; transition: border-color var(--trans), background var(--trans); } .upload-zone:hover, .upload-zone.dragover { border-color: var(--gold); background: var(--gold-dim); } .upload-zone svg { width: 36px; height: 36px; color: var(--text2); margin: 0 auto .75rem; } .upload-zone p { font-size: .88rem; color: var(--text2); } .upload-zone span { color: var(--gold); font-weight: 500; } .img-preview-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; } .img-preview-item { position: relative; width: 100px; height: 75px; border-radius: 6px; overflow: hidden; border: 2px solid var(--border); cursor: grab; } .img-preview-item.is-main { border-color: var(--gold); } .img-preview-item img { width: 100%; height: 100%; object-fit: cover; } .img-preview-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(239,68,68,.85); color: #fff; border: none; cursor: pointer; font-size: .75rem; display: flex; align-items: center; justify-content: center; } .img-preview-main-btn { position: absolute; bottom: 3px; left: 3px; font-size: .65rem; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; border: none; cursor: pointer; } .img-preview-item.is-main .img-preview-main-btn { background: var(--gold); color: #000; } /* Alert messages */ .alert { padding: .85rem 1.1rem; border-radius: var(--radius); font-size: .9rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; } .alert-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #22C55E; } .alert-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #EF4444; } /* Login Page */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; } .login-logo { text-align: center; font-family: 'Bodoni Moda', serif; font-size: 1.6rem; font-weight: 700; margin-bottom: 1.75rem; } .login-logo span { color: var(--gold); } /* ── Empty State ───────────────────────────────────────── */ .empty-state { text-align: center; padding: 4rem 1.5rem; color: var(--text2); } .empty-state svg { width: 56px; height: 56px; margin: 0 auto 1rem; opacity: .4; } .empty-state h3 { font-size: 1.2rem; color: var(--text); margin-bottom: .5rem; } /* ── Admin Mobile Nav Bar ──────────────────────────────── */ .admin-mobile-nav { display: none; overflow-x: auto; scrollbar-width: none; background: var(--bg2); border-bottom: 1px solid var(--border); padding: .6rem 1rem; gap: .5rem; position: sticky; top: 0; z-index: 100; } .admin-mobile-nav::-webkit-scrollbar { display: none; } .admin-mobile-nav a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: .38rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 500; border: 1px solid var(--border); color: var(--text2); white-space: nowrap; transition: all var(--trans); } .admin-mobile-nav a svg { width: 14px; height: 14px; } .admin-mobile-nav a:hover, .admin-mobile-nav a.active { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); opacity: 1; } /* ── Responsive ────────────────────────────────────────── */ @media (max-width: 1024px) { .detail-layout { grid-template-columns: 1fr; } .detail-sidebar { position: static; } .footer-grid { grid-template-columns: 1fr 1fr; } .admin-sidebar { width: 200px; } } @media (max-width: 768px) { .navbar-nav { display: none; } .hamburger { display: flex; } .hero-title { font-size: 2.4rem; } .hero-subtitle { font-size: 1rem; } .cars-grid { grid-template-columns: 1fr 1fr; } .filter-row { gap: .5rem; } .filter-group { min-width: 120px; flex: 1; } .footer-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .form-grid-3 { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-mobile-nav { display: flex; } .admin-main { padding: 1.25rem 1rem; } .admin-layout { flex-direction: column; } .specs-grid { grid-template-columns: 1fr 1fr; } .detail-main-img { border-radius: var(--radius); } .detail-page { padding-top: calc(var(--navbar-h) + 8px); } .expertise-wrap { flex-direction: column; gap: 1.25rem; } .expertise-svg-container { max-width: 220px; margin: 0 auto; } .cars-section { padding: 2rem 0; } .section-header { margin-bottom: 1.25rem; } .detail-info h1 { font-size: 1.7rem; } .btn-whatsapp, .btn-call { padding: .65rem; font-size: .9rem; } .admin-card { padding: 1.25rem; } .admin-header { flex-direction: column; align-items: flex-start; gap: .75rem; } } @media (max-width: 480px) { .cars-grid { grid-template-columns: 1fr; } .hero-title { font-size: 2rem; } .hero-subtitle { font-size: .95rem; } .admin-main { padding: 1rem .75rem; } .specs-grid { grid-template-columns: 1fr 1fr; } .car-card-footer { flex-direction: column; align-items: flex-start; gap: .6rem; } .container { padding: 0 1rem; } .filter-section { padding: 1.25rem 0 .75rem; } .detail-thumbs .detail-thumb { width: 72px; height: 50px; } .expertise-svg-container { max-width: 190px; } .admin-table th, .admin-table td { padding: .55rem .65rem; font-size: .8rem; } } @media (max-width: 375px) { .cars-grid { grid-template-columns: 1fr; } .hero-title { font-size: 1.85rem; } .admin-main { padding: .875rem .625rem; } .specs-grid { grid-template-columns: 1fr; } .btn { padding: .65rem 1.5rem; } .detail-price-main { font-size: 1.65rem; } } /* ── Homepage Search Bar ────────────────────────── */ .hero-search { display: flex; gap: 0; max-width: 520px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; border: 1.5px solid var(--gold); background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); } .hero-search-input { flex: 1; padding: .9rem 1.25rem; background: transparent; border: none; color: var(--text); font-size: .95rem; font-family: 'Jost', sans-serif; } .hero-search-input::placeholder { color: rgba(240,244,248,0.45); } .hero-search-input:focus { outline: none; } .hero-search-btn { padding: .9rem 1.5rem; background: var(--gold); border: none; color: #000; font-size: .9rem; font-weight: 600; font-family: 'Jost', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: opacity var(--trans); white-space: nowrap; } .hero-search-btn:hover { opacity: .88; } .hero-cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; } /* Homepage brand pills (now links) */ .brand-pills-section { padding: 1.5rem 0 .75rem; background: var(--bg2); border-bottom: 1px solid var(--border); } /* See All CTA */ .see-all-cta { text-align: center; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .see-all-cta p { color: var(--text2); font-size: .9rem; margin-bottom: 1.25rem; } /* ── Listing Page ────────────────────────────────── */ .listing-body { padding-top: 0; } .listing-page { padding-top: var(--navbar-h); } .listing-hero { background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%); border-bottom: 1px solid var(--border); padding: 2rem 0 1.75rem; } .listing-hero-title { font-size: 2rem; margin-top: .6rem; } .breadcrumb { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text2); } .breadcrumb a { color: var(--text2); transition: color var(--trans); } .breadcrumb a:hover { color: var(--gold); opacity: 1; } .breadcrumb-sep { opacity: .4; } .listing-section { padding: 2rem 0 4rem; } /* Topbar */ .listing-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .listing-count { font-size: .9rem; color: var(--text2); } .listing-count strong { color: var(--text); font-size: 1rem; } .listing-controls { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } /* Active filter chips */ .active-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } .active-filter-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(201,168,76,.28); font-size: .77rem; font-weight: 600; padding: .28rem .7rem; border-radius: 999px; text-decoration: none; cursor: pointer; transition: background var(--trans); } .active-filter-chip:hover { background: rgba(201,168,76,.22); opacity: 1; color: var(--gold); } .active-filter-chip svg { flex-shrink: 0; width: 12px; height: 12px; } .active-filter-chip.clear-all { background: rgba(239,68,68,.10); color: #EF4444; border-color: rgba(239,68,68,.22); } .active-filter-chip.clear-all:hover { background: rgba(239,68,68,.18); color: #EF4444; } /* Layout */ .listing-layout { display: grid; grid-template-columns: 256px 1fr; gap: 2rem; align-items: flex-start; } .listing-content { min-width: 0; } /* Filter Sidebar */ .filter-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; position: sticky; top: calc(var(--navbar-h) + 12px); } .filter-sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--border); gap: .5rem; } .filter-sidebar-title { font-size: .95rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; } .filter-sidebar-reset { font-size: .76rem; color: var(--text2); display: flex; align-items: center; gap: 3px; transition: color var(--trans); } .filter-sidebar-reset:hover { color: var(--gold); opacity: 1; } .filter-sidebar-close { display: none; background: none; border: none; cursor: pointer; color: var(--text2); padding: 2px; } .filter-sidebar-close:hover { color: var(--text); } .filter-group-box { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .filter-group-box:last-of-type { border-bottom: none; margin-bottom: .75rem; } .filter-group-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text2); margin-bottom: .6rem; } .filter-check-list { display: flex; flex-direction: column; gap: .36rem; } .filter-check-item { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--text2); cursor: pointer; padding: .15rem 0; user-select: none; } .filter-check-item:hover { color: var(--text); } .filter-check-item input[type="radio"], .filter-check-item input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; } .filter-sidebar-select { width: 100%; padding: .45rem .7rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .86rem; cursor: pointer; transition: border-color var(--trans); font-family: 'Jost', sans-serif; } .filter-sidebar-select:focus { outline: none; border-color: var(--gold); } .filter-sidebar-select option { background: var(--bg2); } .filter-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .filter-range-row input { padding: .42rem .6rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .84rem; width: 100%; font-family: 'Jost', sans-serif; transition: border-color var(--trans); } .filter-range-row input:focus { outline: none; border-color: var(--gold); } .filter-search-box { position: relative; } .filter-search-box input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .87rem; font-family: 'Jost', sans-serif; transition: border-color var(--trans); } .filter-search-box input:focus { outline: none; border-color: var(--gold); } .filter-search-box svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--text2); pointer-events: none; width: 15px; height: 15px; } .filter-apply-btn { width: 100%; padding: .62rem 1rem; border-radius: var(--radius); background: var(--gold); color: #000; font-weight: 600; font-size: .9rem; border: none; cursor: pointer; font-family: 'Jost', sans-serif; display: flex; align-items: center; justify-content: center; gap: 6px; transition: opacity var(--trans); } .filter-apply-btn:hover { opacity: .88; } /* Sort select (in topbar) */ .sort-select { padding: .42rem .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .87rem; cursor: pointer; font-family: 'Jost', sans-serif; transition: border-color var(--trans); } .sort-select:focus { outline: none; border-color: var(--gold); } .sort-select option { background: var(--bg2); } /* Mobile filter toggle */ .filter-mobile-toggle { display: none; align-items: center; gap: .45rem; padding: .44rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .87rem; font-weight: 500; cursor: pointer; font-family: 'Jost', sans-serif; transition: border-color var(--trans), color var(--trans); } .filter-mobile-toggle:hover { border-color: var(--gold); color: var(--gold); } .filter-mobile-toggle svg { flex-shrink: 0; } .filter-badge { background: var(--gold); color: #000; font-size: .68rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; } .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .5rem; border-radius: var(--radius); border: 1px solid var(--border); font-size: .875rem; color: var(--text2); text-decoration: none; transition: all var(--trans); background: var(--surface); font-family: 'Jost', sans-serif; } .page-btn:hover { border-color: var(--gold); color: var(--gold); opacity: 1; } .page-btn.active { background: var(--gold); color: #000; font-weight: 700; border-color: var(--gold); } .page-btn.disabled { opacity: .32; pointer-events: none; } .page-dots { display: inline-flex; align-items: center; justify-content: center; width: 28px; color: var(--text2); font-size: .85rem; } /* ─── Filter backdrop overlay ───────────────────────── */ .filter-backdrop { position: fixed; inset: 0; z-index: 840; background: rgba(0,0,0,0.58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; cursor: pointer; } .filter-backdrop.visible { opacity: 1; visibility: visible; pointer-events: auto; } /* ─── Bottom-sheet drag handle ───────────────────── */ .filter-drag-handle { display: none; width: 44px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto .85rem; flex-shrink: 0; } /* Listing responsive */ @media (max-width: 1024px) { .listing-layout { grid-template-columns: 220px 1fr; gap: 1.5rem; } } @media (max-width: 768px) { .listing-layout { grid-template-columns: 1fr; } .filter-mobile-toggle { display: flex; } /* Show drag handle */ .filter-drag-handle { display: block; } /* Mobile topbar: 2-row layout */ .listing-topbar { flex-direction: column; align-items: stretch; gap: .6rem; margin-bottom: 1.1rem; } .listing-count-block { width: 100%; } .listing-controls { display: grid; grid-template-columns: 1fr auto; gap: .5rem; width: 100%; } .sort-select { font-size: .86rem; padding: .55rem .7rem; width: 100%; } .filter-mobile-toggle { font-size: .86rem; padding: .55rem 1.1rem; white-space: nowrap; min-height: 0; } /* Bottom sheet filter sidebar */ .filter-sidebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 850; max-height: 88dvh; overflow-y: auto; overflow-x: hidden; border-radius: 20px 20px 0 0; padding: .55rem 1.25rem 3rem; border: none; border-top: 1px solid var(--border); transform: translateY(105%); transition: transform 0.33s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; -webkit-overflow-scrolling: touch; box-shadow: 0 -8px 40px rgba(0,0,0,0.45); } .filter-sidebar.mobile-open { transform: translateY(0); pointer-events: auto; } .filter-sidebar-header { padding-top: .25rem; } .filter-sidebar-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg3); min-height: 0; } /* Filtrele butonu her zaman görünür — bottom-sheet içinde yapışık */ .filter-apply-btn { position: sticky; bottom: 0; margin: .75rem -1.25rem -3rem; width: calc(100% + 2.5rem); border-radius: 0; padding: .88rem 1.25rem; box-shadow: 0 -6px 20px rgba(0,0,0,0.4); z-index: 1; } .listing-hero { padding: 1.5rem 0 1rem; } .listing-hero-title { font-size: 1.6rem; } .listing-hero-search { max-width: 100%; } } @media (max-width: 480px) { .hero-search { flex-direction: column; border-radius: var(--radius); } .hero-search-btn { border-radius: 0 0 var(--radius) var(--radius); justify-content: center; } .hero-search-input { border-radius: var(--radius) var(--radius) 0 0; } .listing-hero-search { flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; } .listing-hero-search-input { padding: .72rem 1rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .listing-hero-search-btn { border-radius: 0 0 var(--radius-lg) var(--radius-lg); justify-content: center; padding: .72rem 1rem; } } /* ══════════════════════════════════════════════════════ Expertise v2 — Vanilla JS Component ══════════════════════════════════════════════════════ */ .expertise-v2 { font-family: 'Jost', sans-serif; } .ev2-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: flex-start; } /* Cards */ .ev2-svg-card, .ev2-summary-card, .ev2-accordion { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; } .ev2-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .ev2-card-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text2); } .ev2-hint { font-size: .73rem; color: var(--text2); opacity: .65; } /* SVG Stage */ .ev2-stage { position: relative; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border); overflow: hidden; } .ev2-svg { display: block; width: 100%; height: auto; color: var(--text); user-select: none; } .ev2-part { transition: fill-opacity .14s ease, stroke .14s ease; outline: none; } .ev2-part:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Tooltip */ .ev2-tooltip { position: absolute; z-index: 20; width: 196px; background: rgba(9,12,16,0.97); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: .7rem .85rem; color: #f0f4f8; pointer-events: none; box-shadow: 0 12px 32px rgba(0,0,0,.55); } [data-theme="light"] .ev2-tooltip { background: rgba(15,23,42,0.96); } .ev2-tt-name { font-weight: 700; font-size: .85rem; margin-bottom: .35rem; } .ev2-tt-status { font-size: .78rem; font-weight: 600; margin-bottom: .3rem; } .ev2-tt-desc { font-size: .73rem; color: rgba(240,244,248,.55); line-height: 1.45; } /* Legend */ .ev2-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; } .ev2-legend-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 500; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: all .15s; font-family: 'Jost', sans-serif; } .ev2-legend-btn:hover { border-color: var(--gold); color: var(--text); } .ev2-legend-btn.active { background: #0f172a; color: #fff; border-color: transparent; } [data-theme="light"] .ev2-legend-btn.active { background: #0f172a; } .ev2-legend-count { opacity: .55; font-size: .71rem; font-variant-numeric: tabular-nums; } .ev2-legend-clear { padding: .3rem .6rem; font-size: .75rem; color: var(--text2); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: 'Jost', sans-serif; display: inline-flex; align-items: center; } .ev2-legend-clear:hover { color: var(--text); } .ev2-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* Right panel */ .ev2-right-panel { display: flex; flex-direction: column; gap: 1rem; } /* Summary card */ .ev2-summary-card { padding: 1.25rem; } .ev2-summary-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .ev2-summary-total { text-align: right; } .ev2-summary-num { font-family: 'Bodoni Moda', serif; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--text); } .ev2-summary-sub { font-size: .7rem; color: var(--text2); display: block; } .ev2-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; } .ev2-summary-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .7rem; font-size: .81rem; } .ev2-summary-label { display: flex; align-items: center; gap: .4rem; color: var(--text2); } .ev2-summary-count { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* Accordion */ .ev2-accordion { padding: .75rem; } .ev2-accordion-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text2); padding: .3rem .5rem .75rem; } .ev2-accordion-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); } .ev2-accordion-list li { border-bottom: 1px solid var(--border); } .ev2-accordion-list li.ev2-selected { background: var(--gold-dim); border-radius: var(--radius); } .ev2-accordion-btn { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .5rem; text-align: left; background: none; border: none; cursor: pointer; border-radius: var(--radius); transition: background .14s; font-family: 'Jost', sans-serif; } .ev2-accordion-btn:hover { background: var(--bg2); } .ev2-accordion-btn:focus-visible { outline: 2px solid var(--gold); } .ev2-accordion-info { flex: 1; min-width: 0; } .ev2-accordion-name { display: block; font-size: .83rem; font-weight: 600; color: var(--text); } .ev2-accordion-status { font-size: .73rem; font-weight: 500; } .ev2-chevron { flex-shrink: 0; width: 16px; height: 16px; color: var(--text2); transition: transform .2s; } .ev2-accordion-btn.open .ev2-chevron { transform: rotate(180deg); } .ev2-accordion-panel { padding: 0 .5rem .6rem 1.8rem; } .ev2-panel-dl { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem; } .ev2-panel-row { display: flex; justify-content: space-between; font-size: .77rem; margin-bottom: .35rem; } .ev2-panel-row dt { color: var(--text2); } .ev2-panel-row dd { font-weight: 600; } .ev2-panel-desc { font-size: .74rem; color: var(--text2); line-height: 1.5; } /* Expertise v2 responsive */ @media (max-width: 1024px) { .ev2-layout { grid-template-columns: 1fr 260px; } } @media (max-width: 900px) { .ev2-layout { grid-template-columns: 1fr; } .ev2-right-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ev2-svg { max-width: 280px; margin: 0 auto; } } @media (max-width: 600px) { .ev2-right-panel { grid-template-columns: 1fr; } .ev2-summary-grid { grid-template-columns: 1fr 1fr; } .ev2-svg { max-width: 220px; } } /* ══════════════════════════════════════════════════════ Hero stats strip ══════════════════════════════════════════════════════ */ .hero-stats-strip { display: flex; align-items: stretch; margin: 2.5rem auto 0; max-width: 520px; background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.22); border-radius: var(--radius-lg); overflow: hidden; } .hero-stat-item { flex: 1; text-align: center; padding: 1.1rem .75rem; position: relative; } .hero-stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(201,168,76,.22); } .hero-stat-num { display: block; font-family: 'Cinzel', serif; font-size: 1.65rem; font-weight: 700; color: var(--gold); line-height: 1; } .hero-stat-lbl { display: block; font-family: 'Cinzel', serif; font-size: .62rem; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin-top: .36rem; } @media (max-width: 480px) { .hero-stats-strip { max-width: 100%; } .hero-stat-num { font-size: 1.35rem; } .hero-stat-lbl { font-size: .62rem; letter-spacing: .05em; } } /* ══════════════════════════════════════════════════════ Filter Accordion ══════════════════════════════════════════════════════ */ .acc-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text2); font-family: 'Jost', sans-serif; padding: .62rem 0; transition: color var(--trans); text-align: left; } .acc-trigger:hover { color: var(--gold); } .acc-chevron { flex-shrink: 0; transition: transform .22s ease; } .acc-trigger.open .acc-chevron { transform: rotate(180deg); } .acc-body { overflow: hidden; max-height: 0; transition: max-height .3s cubic-bezier(.4,0,.2,1); } .acc-body.open { max-height: 1600px; } .acc-inner { padding-bottom: .85rem; } /* Listing hero search bar */ .listing-hero-search { display: flex; max-width: 520px; margin-top: 1.1rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); } .listing-hero-search-input { flex: 1; padding: .68rem 1.1rem; background: transparent; border: none; color: var(--text); font-size: .9rem; font-family: 'Jost', sans-serif; } .listing-hero-search-input::placeholder { color: var(--text2); opacity: .6; } .listing-hero-search-input:focus { outline: none; } .listing-hero-search-btn { padding: .68rem 1.2rem; background: var(--gold); border: none; color: #000; font-size: .88rem; font-weight: 600; font-family: 'Jost', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: opacity var(--trans); white-space: nowrap; } .listing-hero-search-btn:hover { opacity: .88; } @media (max-width: 768px) { .listing-hero-search { max-width: 100%; } } /* ══════════════════════════════════════════════════════ Gallery Slider — Detail Page ══════════════════════════════════════════════════════ */ .detail-main-img { position: relative; } .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.54); color: #fff; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: background var(--trans); backdrop-filter: blur(4px); } .gallery-nav-btn:hover { background: rgba(0,0,0,.78); } .gallery-nav-btn svg { width: 20px; height: 20px; } .gallery-nav-prev { left: .7rem; } .gallery-nav-next { right: .7rem; } .gallery-counter { position: absolute; bottom: .7rem; right: .7rem; z-index: 5; background: rgba(0,0,0,.62); color: rgba(255,255,255,.9); font-size: .73rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; font-family: 'Jost', sans-serif; } @media (max-width: 480px) { .gallery-nav-btn { width: 34px; height: 34px; } .gallery-nav-btn svg { width: 16px; height: 16px; } } /* ══════════════════════════════════════════════════════ Contact Page ══════════════════════════════════════════════════════ */ .contact-page { padding-top: var(--navbar-h); } .contact-hero { background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%); border-bottom: 1px solid var(--border); padding: 2.5rem 0 2rem; } .contact-hero-title { font-size: 2.1rem; margin-top: .65rem; } .contact-hero-sub { font-size: .95rem; color: var(--text2); margin-top: .5rem; } .contact-section { padding: 2.5rem 0 5rem; } .contact-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: flex-start; } .contact-form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; } .contact-form-title { font-family: 'Bodoni Moda', serif; font-size: 1.35rem; color: var(--text); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .contact-form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; } .contact-form-label { font-size: .8rem; color: var(--text2); font-weight: 500; } .contact-input, .contact-textarea { width: 100%; padding: .72rem 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .92rem; font-family: 'Jost', sans-serif; transition: border-color var(--trans); } .contact-input:focus, .contact-textarea:focus { outline: none; border-color: var(--gold); } .contact-input::placeholder, .contact-textarea::placeholder { color: var(--text2); opacity: .5; } .contact-textarea { resize: vertical; min-height: 145px; } .contact-submit { width: 100%; padding: .88rem; border-radius: var(--radius); background: var(--gold); color: #000; font-weight: 700; font-size: .97rem; border: none; cursor: pointer; font-family: 'Jost', sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity var(--trans), transform var(--trans); margin-top: 1.25rem; } .contact-submit:hover { opacity: .88; transform: translateY(-1px); } .contact-alert { display: flex; align-items: flex-start; gap: .6rem; padding: .95rem 1.1rem; border-radius: var(--radius); font-size: .88rem; margin-bottom: 1.25rem; line-height: 1.5; } .contact-alert svg { flex-shrink: 0; margin-top: 1px; } .contact-alert.success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: #22C55E; } .contact-alert.error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); color: #EF4444; } .contact-right { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 80px; } .contact-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .contact-map-frame { width: 100%; height: 200px; display: block; border: none; border-bottom: 1px solid var(--border); background: var(--bg3); } .contact-map-placeholder { width: 100%; height: 200px; background: var(--bg3); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .5rem; color: var(--text2); } .contact-map-placeholder svg { width: 36px; height: 36px; opacity: .4; } .contact-map-placeholder span { font-size: .82rem; } .contact-info-body { padding: 1.5rem; } .contact-info-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; } .contact-info-item { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); } .contact-info-item:last-child { border-bottom: none; padding-bottom: 0; } .contact-info-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius); background: var(--gold-dim); display: flex; align-items: center; justify-content: center; } .contact-info-icon svg { width: 18px; height: 18px; color: var(--gold); } .contact-info-text { flex: 1; } .contact-info-lbl { font-size: .71rem; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 2px; } .contact-info-val { font-size: .9rem; color: var(--text); font-weight: 500; line-height: 1.45; } .contact-info-val a { color: var(--text); transition: color var(--trans); } .contact-info-val a:hover { color: var(--gold); opacity: 1; } .contact-cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .5rem; } .contact-cta-btn { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.1rem .75rem; border-radius: var(--radius-lg); text-decoration: none; text-align: center; border: 1px solid var(--border); transition: all var(--trans); } .contact-cta-btn.wa { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.25); } .contact-cta-btn.wa:hover { background: rgba(37,211,102,.18); opacity: 1; } .contact-cta-btn.wa svg, .contact-cta-btn.wa .contact-cta-lbl, .contact-cta-btn.wa .contact-cta-val { color: #25D366; } .contact-cta-btn.ph { background: var(--gold-dim); border-color: rgba(201,168,76,.25); } .contact-cta-btn.ph:hover { background: rgba(201,168,76,.2); opacity: 1; } .contact-cta-btn.ph svg, .contact-cta-btn.ph .contact-cta-lbl, .contact-cta-btn.ph .contact-cta-val { color: var(--gold); } .contact-cta-btn svg { width: 26px; height: 26px; } .contact-cta-lbl { font-size: .8rem; font-weight: 700; } .contact-cta-val { font-size: .71rem; opacity: .72; word-break: break-all; } /* Sticky Mobile CTA */ .sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; padding: .72rem 1rem; background: rgba(9,12,16,0.88); border-top: 1px solid rgba(201,168,76,.18); backdrop-filter: blur(14px); display: none; gap: .75rem; } [data-theme="light"] .sticky-cta-bar { background: rgba(241,245,249,0.92); border-top-color: rgba(150,114,10,.2); } @media (max-width: 768px) { .sticky-cta-bar { display: flex; } .sticky-cta-bar .btn-whatsapp, .sticky-cta-bar .btn-call { flex: 1; justify-content: center; font-size: .9rem; padding: .72rem .5rem; } .has-sticky-cta { padding-bottom: 90px; } body.has-sticky-cta footer { padding-bottom: 90px; } } /* Contact responsive */ @media (max-width: 960px) { .contact-layout { grid-template-columns: 1fr; } .contact-right { position: static; flex-direction: row; } .contact-right > * { flex: 1; } } @media (max-width: 640px) { .contact-right { flex-direction: column; } .contact-form-grid { grid-template-columns: 1fr; } .contact-section { padding: 1.75rem 0 4rem; } .contact-hero-title { font-size: 1.65rem; } .contact-form-card { padding: 1.35rem; } } /* Homepage contact teaser */ .contact-teaser { padding: 4rem 0; background: var(--bg2); border-top: 1px solid var(--border); } .contact-teaser-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } .contact-teaser-title { font-size: 1.6rem; margin-bottom: .5rem; } .contact-teaser-sub { color: var(--text2); font-size: .95rem; line-height: 1.7; } .contact-teaser-btns { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 640px) { .contact-teaser-inner { grid-template-columns: 1fr; } .contact-teaser-btns { width: 100%; } .contact-teaser-btns .btn { flex: 1; justify-content: center; } } /* ── Range Slider ────────────────────────────────────────────────── */ .filter-slider-wrap { margin-top: .55rem; } .filter-slider-lbl { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text2); margin-bottom: .3rem; } .filter-slider-lbl span { color: var(--gold); font-weight: 500; } .filter-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--border); outline: none; cursor: pointer; } .filter-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); cursor: pointer; box-shadow: 0 0 0 3px rgba(201,168,76,.18); } .filter-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); cursor: pointer; border: none; } /* ── İletişim Sayfası ────────────────────────────────────────────── */ /* Hızlı iletişim kartları (telefon, WA, email) */ .ci-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; } .ci-card { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.5rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans); cursor: pointer; } .ci-card:hover { border-color: rgba(201,168,76,.4); box-shadow: 0 6px 28px rgba(0,0,0,.28); transform: translateY(-2px); opacity: 1; } .ci-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-dim); display: flex; align-items: center; justify-content: center; } .ci-icon svg { width: 21px; height: 21px; color: var(--gold); } .ci-wa .ci-icon { background: rgba(37,211,102,.12); } .ci-wa .ci-icon svg { color: #25D366; } .ci-wa:hover { border-color: rgba(37,211,102,.35); } .ci-body { flex: 1; min-width: 0; } .ci-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); margin-bottom: .3rem; } .ci-value { font-size: 1rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ci-action { font-size: .78rem; color: var(--gold); margin-top: .4rem; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; } .ci-card:hover .ci-action { opacity: 1; transform: translateX(0); } /* Adres + Saat detay satırı */ .ci-detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; } .ci-detail-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .ci-detail-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-dim); display: flex; align-items: center; justify-content: center; } .ci-detail-icon svg { width: 19px; height: 19px; color: var(--gold); } .ci-detail-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); margin-bottom: .45rem; } .ci-detail-val { font-size: .92rem; color: var(--text); line-height: 1.6; } .ci-hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--border); } .ci-hours-row:last-child { border-bottom: none; padding-bottom: 0; } .ci-hours-row span { color: var(--text2); font-size: .88rem; } .ci-hours-row strong { font-size: .88rem; } .ci-closed span, .ci-closed strong { color: var(--text2); opacity: .65; } /* Harita bölümü */ .ci-map-section { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); margin-bottom: 2rem; } .ci-map-frame { width: 100%; height: 480px; border: none; display: block; } .ci-map-placeholder { height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: var(--surface); color: var(--text2); } .ci-map-placeholder svg { width: 40px; height: 40px; opacity: .35; } .ci-map-placeholder span { font-size: .85rem; } @media (max-width: 960px) { .ci-cards { grid-template-columns: 1fr 1fr; } .ci-map-frame { height: 360px; } } @media (max-width: 640px) { .ci-cards { grid-template-columns: 1fr; } .ci-detail-row { grid-template-columns: 1fr; } .ci-map-frame { height: 280px; } .ci-value { font-size: .92rem; } } /* ── Hakkımızda Sayfası ─────────────────────────────────────────── */ .about-page { padding-top: var(--navbar-h); } .about-hero { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 3rem 0 2.5rem; } .about-hero-title { font-family: 'Bodoni Moda', serif; font-size: clamp(2rem, 5vw, 3rem); color: var(--text); margin: .75rem 0 .5rem; letter-spacing: -.5px; } .about-hero-sub { color: var(--text2); font-size: 1.05rem; } .about-stats-section { padding: 3rem 0; background: var(--bg); } .about-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .about-stat-card { background: var(--bg2); border: 1px solid rgba(201,168,76,.15); border-radius: var(--radius-lg); padding: 1.5rem 1rem; text-align: center; transition: border-color var(--trans), box-shadow var(--trans); } .about-stat-card:hover { border-color: rgba(201,168,76,.35); box-shadow: 0 4px 20px rgba(201,168,76,.08); } .about-stat-num { font-family: 'Cinzel', serif; font-size: 2.2rem; color: var(--gold); font-weight: 700; line-height: 1; } .about-stat-lbl { font-family: 'Cinzel', serif; font-size: .72rem; color: var(--text2); margin-top: .5rem; letter-spacing: .04em; } .about-section { padding: 4rem 0; } .about-intro-grid { display: grid; grid-template-columns: 1fr 260px; gap: 3rem; align-items: center; } .about-section-tag { display: inline-block; padding: .25rem .75rem; background: rgba(201,168,76,.1); color: var(--gold); border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; } .about-section-title { font-family: 'Bodoni Moda', serif; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--text); margin-bottom: 1.25rem; letter-spacing: -.3px; } .about-section-body { color: var(--text2); line-height: 1.8; font-size: .97rem; } .about-section-body p { margin-bottom: .85rem; } .about-visual-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .about-visual-label { color: var(--text2); font-size: .88rem; } .about-mv-section { padding: 3rem 0 4rem; background: var(--bg2); } .about-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .about-mv-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; } .about-mv-card--gold { border-color: rgba(201,168,76,.25); } .about-mv-icon { width: 54px; height: 54px; border-radius: var(--radius-lg); background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .about-mv-tag { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin-bottom: .5rem; } .about-mv-tag--gold { color: var(--gold); } .about-mv-title { font-family: 'Bodoni Moda', serif; font-size: 1.35rem; color: var(--text); margin-bottom: .85rem; } .about-mv-body { color: var(--text2); line-height: 1.8; font-size: .92rem; } .about-cta-section { padding: 3rem 0 4rem; } .about-cta-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; } .about-cta-card.visible { opacity: 1; transform: none; } .about-cta-title { font-family: 'Bodoni Moda', serif; font-size: 1.5rem; color: var(--text); margin-bottom: .5rem; } .about-cta-sub { color: var(--text2); font-size: .9rem; } .about-cta-btns { display: flex; gap: .75rem; flex-wrap: wrap; } @media (max-width: 900px) { .about-stats-grid { grid-template-columns: repeat(2, 1fr); } .about-intro-grid { grid-template-columns: 1fr; } .about-intro-visual { display: none; } .about-mv-grid { grid-template-columns: 1fr; } .about-cta-card { grid-template-columns: 1fr; } .about-cta-btns { flex-direction: column; } .about-cta-btns .btn { justify-content: center; } } @media (max-width: 480px) { .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } .about-stat-num { font-size: 1.7rem; } } /* ── Ekspertiz Legend ───────────────────────────────────────────── */ .expertise-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .75rem 0 1rem; padding: .75rem 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); font-size: .78rem; color: var(--text2); } .expertise-legend-item { display: flex; align-items: center; gap: .4rem; } .expertise-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ── Typography Scale — Sayfa başlıkları standartlaştırma ─────── */ .listing-hero-title, .contact-hero-title, .about-hero-title { font-family: 'Bodoni Moda', serif; font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.3px; }