/* Theme Name: Mobilya Sözlüğü Theme URI: https://mobilyatr.com Author: MobilyaTR Author URI: https://mobilyatr.com Description: Türkçe mobilya ve dekorasyon terimleri için özel sözlük teması. Her terimin kendi URL'i vardır. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.4 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: mobilya-sozluk Tags: dictionary, furniture, turkish, custom-post-type, responsive */ /* ========================================== CSS CUSTOM PROPERTIES ========================================== */ :root { --primary: #2b8cee; --primary-dark: #1a6fc4; --primary-light: rgba(43, 140, 238, 0.1); --bg-light: #f6f7f8; --bg-dark: #101922; --text-dark: #1e293b; --text-medium: #475569; --text-light: #94a3b8; --border-light: #e2e8f0; --border-dark: #1e293b; --white: #ffffff; --card-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); --radius: 0.5rem; --radius-lg: 0.75rem; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --header-height: 72px; --transition: 0.2s ease; } /* ========================================== DARK MODE — [data-theme="dark"] on ========================================== */ [data-theme="dark"] { --bg-light: #0f172a; --bg-dark: #020617; --text-dark: #f1f5f9; --text-medium: #94a3b8; --text-light: #64748b; --border-light: #1e293b; --border-dark: #334155; --white: #1e293b; --card-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25); --primary-light: rgba(43, 140, 238, 0.15); } [data-theme="dark"] body { background-color: var(--bg-light); color: var(--text-dark); } [data-theme="dark"] .site-header { background: rgba(15, 23, 42, 0.97); border-bottom-color: var(--border-light); } [data-theme="dark"] .alphabet-bar { background: rgba(15, 23, 42, 0.97); border-bottom-color: var(--border-light); } [data-theme="dark"] .alpha-btn { background: #1e293b; color: var(--text-medium); } [data-theme="dark"] .alpha-btn:hover, [data-theme="dark"] .alpha-btn.active { background: var(--primary); color: #fff; } [data-theme="dark"] .term-card { background: #1e293b; border-color: var(--border-light); } [data-theme="dark"] .term-card:hover { border-color: var(--primary); } [data-theme="dark"] .page-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } [data-theme="dark"] .cta-section { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); } [data-theme="dark"] .site-footer { background: #020617; border-top-color: var(--border-light); } [data-theme="dark"] .sort-bar { background: #1e293b; border-color: var(--border-light); } [data-theme="dark"] .sort-select { background: #0f172a; color: var(--text-dark); border-color: var(--border-light); } [data-theme="dark"] .pagination { background: #1e293b; border-color: var(--border-light); } [data-theme="dark"] .pagination .page-numbers:hover, [data-theme="dark"] .page-num:hover, [data-theme="dark"] .pagination .page-numbers.prev:hover, [data-theme="dark"] .pagination .page-numbers.next:hover { background: #334155; color: var(--text-dark); } [data-theme="dark"] #search-dropdown { background: #1e293b !important; border-color: var(--border-light) !important; } [data-theme="dark"] .letter-badge { background: var(--primary); color: #fff; } [data-theme="dark"] .single-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } [data-theme="dark"] .definition-card, [data-theme="dark"] .related-card { background: #1e293b; border-color: var(--border-light); } [data-theme="dark"] .header-search-input { background: #1e293b; color: var(--text-dark); border-color: var(--border-light); } /* Dark mode toggle button */ .dark-mode-toggle { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: transparent; border: 1px solid var(--border-light); color: var(--text-medium); cursor: pointer; transition: all var(--transition); flex-shrink: 0; } .dark-mode-toggle:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } .dark-mode-toggle svg { width: 1rem; height: 1rem; pointer-events: none; } .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: block; } [data-theme="dark"] .dark-mode-toggle .icon-sun { display: block; } [data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; } /* ========================================== RESET & BASE ========================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); background-color: var(--bg-light); color: var(--text-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, select, textarea { font-family: inherit; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* No scrollbar utility */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ========================================== LAYOUT ========================================== */ .site-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1; } .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } .container-narrow { max-width: 900px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container-narrow { padding: 0 1.5rem; } } /* ========================================== HEADER ========================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 1rem; } /* Logo */ .site-logo { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; text-decoration: none; } .logo-icon { width: 2rem; height: 2rem; background: var(--primary); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .logo-text { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); letter-spacing: -0.02em; white-space: nowrap; } .logo-text span { color: var(--primary); } /* Search */ .header-search { flex: 1; max-width: 520px; position: relative; } .search-input-wrap { position: relative; } .search-input-wrap .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; display: flex; align-items: center; } .search-input-wrap .search-icon svg { width: 1.1rem; height: 1.1rem; } .header-search-input { width: 100%; padding: 0.625rem 0.75rem 0.625rem 2.5rem; border: 1px solid var(--border-light); border-radius: var(--radius); background: #f8fafc; font-size: 0.875rem; color: var(--text-dark); transition: all var(--transition); outline: none; } .header-search-input::placeholder { color: var(--text-light); } .header-search-input:focus { background: white; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* Header Nav */ .header-nav { display: none; align-items: center; gap: 1rem; } @media (min-width: 768px) { .header-nav { display: flex; } } .header-nav-link { font-size: 0.875rem; font-weight: 500; color: var(--text-medium); transition: color var(--transition); white-space: nowrap; } .header-nav-link:hover { color: var(--primary); } .header-icon-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-medium); transition: all var(--transition); } .header-icon-btn:hover { color: var(--primary); background: var(--primary-light); } .header-icon-btn svg { width: 1.25rem; height: 1.25rem; } /* ========================================== ALPHABET FILTER BAR ========================================== */ .alphabet-bar { background: rgba(246, 247, 248, 0.98); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-light); position: sticky; top: var(--header-height); z-index: 90; } .alphabet-bar-inner { padding: 0.75rem 0; overflow-x: auto; display: flex; align-items: center; gap: 0.25rem; justify-content: flex-start; -webkit-overflow-scrolling: touch; } /* Center on larger screens where all letters fit */ @media (min-width: 900px) { .alphabet-bar-inner { justify-content: center; } } .alphabet-bar-inner::-webkit-scrollbar { display: none; } .alphabet-bar-inner { scrollbar-width: none; } .alpha-btn { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 500; color: var(--text-medium); background: #f1f5f9; transition: all var(--transition); cursor: pointer; border: none; font-family: inherit; text-decoration: none; } .alpha-btn:hover, .alpha-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 6px rgba(43, 140, 238, 0.35); transform: scale(1.08); } .alpha-btn:disabled { color: var(--text-light); background: transparent; cursor: default; pointer-events: none; } /* ========================================== HERO / INTRO ========================================== */ .page-hero { text-align: center; padding: 3rem 1rem 2rem; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: -4rem; right: -4rem; width: 20rem; height: 20rem; border-radius: 50%; background: rgba(43, 140, 238, 0.05); filter: blur(3rem); pointer-events: none; } .page-hero::after { content: ''; position: absolute; bottom: -2rem; left: -3rem; width: 15rem; height: 15rem; border-radius: 50%; background: rgba(96, 165, 250, 0.07); filter: blur(3rem); pointer-events: none; } .hero-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; background: var(--primary-light); color: var(--primary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; } .hero-title { font-size: 2.25rem; font-weight: 700; color: var(--text-dark); letter-spacing: -0.03em; margin-bottom: 0.875rem; line-height: 1.2; } @media (min-width: 640px) { .hero-title { font-size: 2.75rem; } .page-hero { padding: 4rem 1.5rem 2.5rem; } } .hero-desc { font-size: 1rem; color: var(--text-medium); max-width: 560px; margin: 0 auto; line-height: 1.7; } @media (min-width: 640px) { .hero-desc { font-size: 1.0625rem; } } /* ========================================== DICTIONARY LISTING (ARCHIVE) ========================================== */ .dictionary-main { padding: 2rem 0 4rem; } /* Section letter heading */ .letter-section { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--header-height) + 3rem); } .letter-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; position: sticky; top: calc(var(--header-height) + 3.5rem); z-index: 10; background: var(--bg-light); padding: 0.5rem 0; } .letter-badge { width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--primary-light); color: var(--primary); font-size: 1.375rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(43, 140, 238, 0.15); } .letter-divider { flex: 1; height: 1px; background: var(--border-light); } /* Term cards grid */ .terms-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .terms-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .terms-grid { grid-template-columns: repeat(3, 1fr); } } /* Term Card */ .term-card { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--card-shadow); transition: all var(--transition); display: flex; flex-direction: column; height: 100%; position: relative; text-decoration: none; color: inherit; } .term-card:hover { border-color: rgba(43, 140, 238, 0.4); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } .term-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .term-card-title { font-size: 1.125rem; font-weight: 700; color: var(--text-dark); transition: color var(--transition); line-height: 1.3; } .term-card:hover .term-card-title { color: var(--primary); } .term-type-badge { font-size: 0.6875rem; font-family: 'Courier New', monospace; color: var(--text-light); background: #f1f5f9; padding: 0.2rem 0.5rem; border-radius: 0.25rem; white-space: nowrap; flex-shrink: 0; margin-top: 0.15rem; } .term-card-excerpt { font-size: 0.875rem; color: var(--text-medium); line-height: 1.65; flex: 1; } .term-card-footer { display: flex; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; } .term-read-more { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--primary); transition: all var(--transition); } .term-read-more svg { width: 0.875rem; height: 0.875rem; transition: transform var(--transition); } .term-card:hover .term-read-more svg { transform: translateX(3px); } /* ========================================== SINGLE TERM PAGE ========================================== */ .single-term-wrapper { padding: 2rem 0 4rem; } .breadcrumb { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; font-size: 0.8125rem; color: var(--text-light); flex-wrap: wrap; } .breadcrumb a { color: var(--text-medium); transition: color var(--transition); } .breadcrumb a:hover { color: var(--primary); } .breadcrumb-sep { display: flex; align-items: center; } .breadcrumb-sep svg { width: 0.875rem; height: 0.875rem; } .breadcrumb-current { color: var(--text-dark); font-weight: 500; } /* Single Term Content */ .single-term-content { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--card-shadow); } .single-term-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); } .single-term-title { font-size: 2rem; font-weight: 700; color: var(--text-dark); letter-spacing: -0.02em; line-height: 1.2; } @media (min-width: 640px) { .single-term-title { font-size: 2.5rem; } } .single-term-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex-shrink: 0; } .term-type-badge-lg { font-size: 0.8125rem; font-family: 'Courier New', monospace; color: var(--text-medium); background: #f1f5f9; padding: 0.3rem 0.75rem; border-radius: 0.375rem; } .single-term-body { font-size: 1.0625rem; color: var(--text-medium); line-height: 1.8; } .single-term-body p { margin-bottom: 1rem; } .single-term-body p:last-child { margin-bottom: 0; } /* Term meta info */ .term-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-light); } .term-info-item { display: flex; flex-direction: column; gap: 0.25rem; } .term-info-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); } .term-info-value { font-size: 0.9375rem; color: var(--text-dark); font-weight: 500; } .term-info-value a { color: var(--primary); transition: color var(--transition); } .term-info-value a:hover { color: var(--primary-dark); } /* Taxonomy tag */ .term-tag { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; background: var(--primary-light); color: var(--primary); border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; transition: all var(--transition); text-decoration: none; } .term-tag:hover { background: var(--primary); color: white; } /* Related terms */ .related-terms { margin-top: 2rem; } .related-terms-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .related-terms-title::before { content: ''; display: block; width: 0.25rem; height: 1.25rem; background: var(--primary); border-radius: 9999px; } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; } .related-card { background: white; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--card-shadow); transition: all var(--transition); text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: inherit; } .related-card:hover { border-color: rgba(43, 140, 238, 0.4); box-shadow: var(--card-shadow-hover); } .related-card-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-dark); transition: color var(--transition); } .related-card:hover .related-card-title { color: var(--primary); } .related-card-arrow { color: var(--text-light); transition: all var(--transition); display: flex; align-items: center; } .related-card-arrow svg { width: 1rem; height: 1rem; } .related-card:hover .related-card-arrow { color: var(--primary); transform: translateX(3px); } /* Navigation between terms */ .term-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; } .term-nav-btn { background: white; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--card-shadow); transition: all var(--transition); text-decoration: none; display: flex; align-items: center; gap: 0.75rem; color: inherit; } .term-nav-btn:hover { border-color: rgba(43, 140, 238, 0.4); box-shadow: var(--card-shadow-hover); } .term-nav-btn.prev { flex-direction: row; } .term-nav-btn.next { flex-direction: row-reverse; text-align: right; justify-content: flex-start; } .term-nav-label { font-size: 0.75rem; color: var(--text-light); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; display: block; } .term-nav-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-dark); transition: color var(--transition); display: block; margin-top: 0.125rem; } .term-nav-btn:hover .term-nav-title { color: var(--primary); } .term-nav-icon { color: var(--text-light); display: flex; align-items: center; transition: all var(--transition); flex-shrink: 0; } .term-nav-icon svg { width: 1.25rem; height: 1.25rem; } .term-nav-btn.prev:hover .term-nav-icon { transform: translateX(-3px); color: var(--primary); } .term-nav-btn.next:hover .term-nav-icon { transform: translateX(3px); color: var(--primary); } /* ========================================== SORT BAR ========================================== */ .sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .sort-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 0.5rem; } .sort-title::before { content: ''; display: block; width: 0.25rem; height: 1.375rem; background: var(--primary); border-radius: 9999px; } .sort-controls { display: flex; align-items: center; gap: 0.5rem; } .sort-label { font-size: 0.875rem; color: var(--text-light); } .sort-select { font-size: 0.875rem; font-weight: 500; color: var(--text-dark); border: none; background: transparent; cursor: pointer; outline: none; padding: 0; } /* ========================================== SEARCH RESULTS ========================================== */ .search-results-header { padding: 2rem 0 1rem; } .search-results-title { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; } .search-results-title span { color: var(--primary); } .search-results-count { font-size: 0.9375rem; color: var(--text-medium); } .no-results { text-align: center; padding: 4rem 1rem; color: var(--text-medium); } .no-results-icon { width: 4rem; height: 4rem; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--text-light); } .no-results-icon svg { width: 2rem; height: 2rem; } .no-results h3 { font-size: 1.25rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; } .no-results p { font-size: 0.9375rem; margin-bottom: 1.5rem; } /* ========================================== CTA SECTION ========================================== */ .cta-section { background: #f8fafc; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 4rem 1rem; text-align: center; } .cta-title { font-size: 1.75rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; } @media (min-width: 640px) { .cta-title { font-size: 2rem; } } .cta-subtitle { font-size: 1.125rem; color: var(--primary); font-weight: 500; margin-bottom: 1.75rem; } .cta-actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } /* ========================================== BUTTONS ========================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--transition); border: none; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--primary); color: white; box-shadow: 0 2px 6px rgba(43, 140, 238, 0.3); } .btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(43, 140, 238, 0.4); transform: translateY(-1px); } .btn-secondary { background: var(--primary-light); color: var(--primary); } .btn-secondary:hover { background: rgba(43, 140, 238, 0.18); } .btn-outline { background: white; color: var(--text-medium); border: 1px solid var(--border-light); box-shadow: var(--card-shadow); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } /* ========================================== PAGINATION ========================================== */ .pagination-wrap { display: flex; justify-content: center; margin-top: 3rem; margin-bottom: 1rem; } .pagination { display: flex; align-items: center; gap: 0.25rem; background: white; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 0.25rem; box-shadow: var(--card-shadow); list-style: none; margin: 0; } /* paginate_links() outputs a