@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ============================================================ LIQUID GLASS DESIGN SYSTEM - BTB Mobil ============================================================ */ :root { /* Glass surfaces */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-heavy: rgba(255, 255, 255, 0.88); --glass-bg-light: rgba(255, 255, 255, 0.45); --glass-border: rgba(255, 255, 255, 0.5); --glass-blur: 20px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12); --glass-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06); --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Colors - gri tonlar, glass temaya uyumlu */ --color-primary: #5C6370; --color-primary-rgb: 92, 99, 112; --color-primary-hover: #4A5160; --color-primary-light: rgba(92, 99, 112, 0.12); --color-accent: #E84D3D; --color-accent-rgb: 232, 77, 61; --color-success: #34A853; --color-warning: #F5A623; --color-bg: #EEF1F5; --color-bg-gradient: linear-gradient(135deg, #E8EDF5 0%, #E0E7F1 50%, #EEF1F5 100%); --color-surface: #FFFFFF; --color-text: #1A1A2E; --color-text-secondary: #5A5A72; --color-text-tertiary: #8E8EA0; --color-border: rgba(0, 0, 0, 0.08); --color-border-strong: rgba(0, 0, 0, 0.15); --color-divider: rgba(0, 0, 0, 0.06); --theme-toggle-glow-peak: rgba(var(--color-primary-rgb), 0.22); /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.7rem; --font-size-sm: 0.8rem; --font-size-base: 0.938rem; --font-size-md: 1.05rem; --font-size-lg: 1.2rem; --font-size-xl: 1.4rem; --font-size-2xl: 1.7rem; --font-size-3xl: 2rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height: 1.6; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* Z-index scale */ --z-header: 100; --z-loader: 2000; --z-overlay: 9999; } /* ============================================================ DARK MODE (Dark Dim / Dark Gray) Applied via [data-theme="dark"] on for toggle support Also auto-applies via prefers-color-scheme as fallback ============================================================ */ [data-theme="dark"] { --glass-bg: rgba(43, 47, 54, 0.82); --glass-bg-heavy: rgba(36, 40, 47, 0.94); --glass-bg-light: rgba(55, 60, 70, 0.55); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: 20px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.28); --glass-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.14); --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); --color-primary: #8B95A5; --color-primary-rgb: 139, 149, 165; --color-primary-hover: #A3AEBE; --color-primary-light: rgba(139, 149, 165, 0.18); --color-accent: #F06855; --color-accent-rgb: 240, 104, 85; --color-success: #4ADE80; --color-warning: #F7C948; --color-bg: #1C1F26; --color-bg-gradient: linear-gradient(135deg, #1C1F26 0%, #22262E 50%, #1E2128 100%); --color-surface: #282C35; --color-text: #E4E6EB; --color-text-secondary: #A8ABB5; --color-text-tertiary: #737680; --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.18); --color-divider: rgba(255, 255, 255, 0.08); --theme-toggle-glow-peak: rgba(255, 255, 255, 0.12); } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --glass-bg: rgba(43, 47, 54, 0.82); --glass-bg-heavy: rgba(36, 40, 47, 0.94); --glass-bg-light: rgba(55, 60, 70, 0.55); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: 20px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.28); --glass-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.14); --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); --color-primary: #8B95A5; --color-primary-rgb: 139, 149, 165; --color-primary-hover: #A3AEBE; --color-primary-light: rgba(139, 149, 165, 0.18); --color-accent: #F06855; --color-accent-rgb: 240, 104, 85; --color-success: #4ADE80; --color-warning: #F7C948; --color-bg: #1C1F26; --color-bg-gradient: linear-gradient(135deg, #1C1F26 0%, #22262E 50%, #1E2128 100%); --color-surface: #282C35; --color-text: #E4E6EB; --color-text-secondary: #A8ABB5; --color-text-tertiary: #737680; --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.18); --color-divider: rgba(255, 255, 255, 0.08); --theme-toggle-glow-peak: rgba(255, 255, 255, 0.12); } } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; scroll-behavior: auto; background: var(--color-bg); } html, button, input, select, textarea { font-family: var(--font-family); } body { font-family: var(--font-family); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: var(--line-height); color: var(--color-text); background: var(--color-bg); background-image: var(--color-bg-gradient); background-attachment: scroll; margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } audio, video { max-width: 100%; } [hidden] { display: none; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); font-weight: var(--font-weight-semibold); color: var(--color-text); line-height: 1.3; margin: 0 0 0.4em 0; } h1, h2, h3, h4, h5, h6, figcaption { text-transform: capitalize; } h1 { font-size: var(--font-size-3xl); } h1 a { color: var(--color-primary); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); margin-bottom: 0.5em; } h4 { font-size: var(--font-size-lg); margin-bottom: 0.6em; } h5 { font-size: var(--font-size-md); margin-bottom: 0.7em; } h6 { font-size: var(--font-size-base); margin-bottom: 1em; } p, pre { margin: 0 0 1em 0; line-height: var(--line-height); color: var(--color-text-secondary); } p { font-size: var(--font-size-base); } a { text-decoration: none; color: var(--color-primary); transition: color var(--transition-fast); } a:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } a:hover, a:active { color: var(--color-primary-hover); outline: 0; } b, strong { font-weight: var(--font-weight-semibold); } abbr[title] { border-bottom: 1px dotted; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } mark { background: #ff0; color: #000; border-radius: 2px; padding: 0 2px; } small { font-size: 75%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } address { margin-bottom: 10px; } pre, code, kbd, samp { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9em; } pre { white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ''; } ol, ul, dl { padding: 0 0 0 24px; margin: 0 0 10px; } nav ul, nav ol { list-style: none; margin: 0; padding: 0; } nav.vertical ul li { display: block; } nav.horizontal ul li { display: inline-block; } .pos-rel { position: relative; } .clearfix { clear: both; } /* ============================================================ IMAGES & MEDIA ============================================================ */ img { border: 0; max-width: 100%; height: auto; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } /* ============================================================ FORMS & INPUTS ============================================================ */ form { margin: 0; } fieldset { width: auto; border: none; padding: var(--space-sm) 0; margin: 0; } fieldset > text, fieldset > b { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-sm) var(--space-md); } legend { border: 0; padding: 0; white-space: normal; } label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: 0.4em; } form label span.red { color: var(--color-accent); } button, input, select, textarea { font-family: var(--font-family); font-size: var(--font-size-base); margin: 0; vertical-align: baseline; transition: all var(--transition-fast); } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: none; appearance: none; } button[disabled], input[disabled] { cursor: default; opacity: 0.5; } /* Login sayfasi haric - checkbox/radio gri tonlar */ html:not(.login-page) input[type="checkbox"], html:not(.login-page) input[type="radio"] { box-sizing: border-box; padding: 0; accent-color: var(--color-primary); } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } form input[type=text], form input[type=password], form input[type=tel], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } form input[type="radio"] { position: relative; top: 1px; } form div { margin: 0 0 0.8em 0; } form textarea { height: 80px; } form.contact-form { margin-bottom: 20px; } .inline input, .inline label { display: inline-block !important; } form input[type=submit], form input[type=text], form input[type=password], form input[type=tel], form textarea { padding: 10px var(--space-md); } form input[type=text], form input[type=password], form input[type=tel], form textarea, form input[type=submit] { background: var(--glass-bg-heavy); border: 1px solid var(--color-border); border-radius: var(--radius-sm); width: 100%; box-sizing: border-box; color: var(--color-text); font-size: var(--font-size-base); } form input:focus, form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } form input[type=submit] { width: 100%; background: var(--color-primary); color: #fff; font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); padding: 12px var(--space-md); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; } form input[type=submit]:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--glass-shadow-sm); } form input[type=submit]:active { transform: translateY(0); background: var(--color-primary-hover); } select { background: var(--glass-bg-heavy); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px var(--space-md); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-base); width: 100%; cursor: pointer; transition: border-color var(--transition-fast); } select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); } /* ============================================================ TABLES ============================================================ */ table { border-collapse: collapse; border-spacing: 0; } /* ============================================================ LAYOUT ============================================================ */ .wrap { width: auto; max-width: 600px; margin: 0 auto; padding: 0 var(--space-md); } /* ============================================================ FIXED HEADER ============================================================ */ .fixedheader { position: fixed; width: 100%; top: 0; padding-top: env(safe-area-inset-top); z-index: var(--z-header); background: var(--glass-bg-heavy); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--color-border); box-shadow: var(--glass-shadow-sm); } /* Tek header: toolbar + container aynı blokta, aralarındaki ayırıcı gizlenir */ .fixedheader > hr.separator { display: none; } /* ============================================================ HEADER BUTTONS TABLE ============================================================ */ .ustbutontable { width: 100%; background: transparent; height: 44px; } .ustbutontable tr td { padding-top: 0; padding-bottom: 0; } .ustbuton { width: 100%; margin-top: 4px; background: transparent; color: var(--color-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); max-height: 36px; height: 32px; border: none; background-image: none; cursor: pointer; transition: opacity var(--transition-fast); -webkit-tap-highlight-color: transparent; } .ustbuton:hover { opacity: 0.7; } .ustbuton:active { opacity: 0.5; } .ustbutonless { position: absolute; top: 4px; left: 0; width: 100%; background: transparent; color: var(--color-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); max-height: 36px; height: 32px; border: none; text-align: left; cursor: pointer; transition: opacity var(--transition-fast); -webkit-tap-highlight-color: transparent; } .ustbutonless:hover { opacity: 0.7; } .ustbutonless:active { opacity: 0.5; } /* ============================================================ NAV BUTTONS (back, theme) - tema uyumlu yuvarlak butonlar ============================================================ */ .nav-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--glass-bg-heavy); color: var(--color-text); cursor: pointer; transition: all var(--transition-base); -webkit-tap-highlight-color: transparent; padding: 0; flex-shrink: 0; } .nav-btn:hover { background: var(--color-primary-light); } .nav-btn:active { transform: scale(0.95); } .nav-btn svg { width: 20px; height: 20px; color: currentColor; } /* ============================================================ HEADER BAR (back left, theme right) ============================================================ */ .header-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 2px var(--space-sm) 2px var(--space-xs); gap: var(--space-sm); } .header-bar-left, .header-bar-right { display: flex; align-items: center; flex-shrink: 0; } .header-bar-center { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--space-sm); } .header-bar-spacer { width: 36px; height: 36px; display: block; } .theme-toggle-spacer { width: 36px; height: 36px; display: block; flex-shrink: 0; } /* ============================================================ THEME TOGGLE - Rapor sayfalarinda: header-bar icinde, geri butonu ile ayni hizada - Anasayfada: fixed konum (theme-toggle-fixed) ============================================================ */ .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--glass-bg-heavy); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-base); -webkit-tap-highlight-color: transparent; padding: 0; } /* Anasayfa: rapor sayfasindaki toggle ile ayni gorunur konumda */ .theme-toggle-fixed { position: fixed; top: 12px; right: 12px; z-index: calc(var(--z-header) + 10); } .theme-toggle:hover { background: var(--color-primary-light); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle svg { width: 18px; height: 18px; color: var(--color-text); transition: transform var(--transition-base); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-toggle .icon-sun { display: block; } html:not([data-theme]) .theme-toggle .icon-moon { display: none; } } /* ============================================================ ANASAYFA HEADER (modern filter form) ============================================================ */ /* Anasayfa: container tam genislik (viewport - toggle), ekrani verimli kullan */ .fixedheader.is-anasayfa { padding-right: 52px !important; } .fixedheader.is-anasayfa .container { padding: var(--space-sm) var(--space-md) var(--space-xs) !important; background: transparent !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } .theme-toggle-anasayfa { position: absolute !important; top: calc(var(--space-sm) + 1.4em + 2px) !important; right: var(--space-sm) !important; margin: 0 !important; } .home-filters-row { display: flex; align-items: center; width: 100%; } .home-filters-row select { flex: 1 !important; min-width: 0; max-width: 100% !important; } .fixedheader.is-anasayfa .home-filters-row select { font-size: 0.95rem !important; padding: 6px var(--space-xs) !important; height: auto !important; min-height: 0 !important; } .fixedheader.is-anasayfa .container form { width: 100% !important; } .fixedheader.is-anasayfa .container table { display: block !important; width: 100% !important; max-width: none !important; background: transparent !important; } .fixedheader.is-anasayfa .container table tr { display: flex !important; flex-direction: column !important; align-items: stretch !important; border: none !important; } .fixedheader.is-anasayfa .container table tr td { display: block !important; padding: 0 !important; border: none !important; text-align: left !important; } /* Etiket-component mesafesi: Sube ve tarih bloklarinda ayni (4px) */ .fixedheader.is-anasayfa .container table tr:nth-child(1) td { margin-bottom: 4px; } .fixedheader.is-anasayfa .container table tr:nth-child(2) td { margin-bottom: 8px; } .fixedheader.is-anasayfa .container table tr:nth-child(3) td { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 40px !important; margin-bottom: 0 !important; width: 100% !important; } .fixedheader.is-anasayfa .container table tr:nth-child(3) td > div { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; float: none !important; width: auto !important; } .fixedheader.is-anasayfa .container table tr:nth-child(3) td > div table { width: 100% !important; } .fixedheader.is-anasayfa .container table tr:nth-child(3) td > div table tr { flex-direction: column !important; } .fixedheader.is-anasayfa .container table tr:nth-child(3) td > div table tr:first-child td { margin-bottom: 4px; min-height: 1.5em !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; overflow: hidden !important; text-align: left !important; } .fixedheader.is-anasayfa .container table tr:nth-child(3) td > div table tr:first-child td text { font-size: 1rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .fixedheader.is-anasayfa .container table tr:nth-child(3) td > div table tr:last-child td { position: relative !important; padding-top: 0 !important; text-align: left !important; } .fixedheader.is-anasayfa .container text, .fixedheader.is-anasayfa .container td text { font-size: 1rem !important; font-weight: var(--font-weight-medium) !important; color: var(--color-text-secondary) !important; } /* Takvim ikonu: img overlap ettigi icin input arka planina tasindi, metin serbest */ .fixedheader.is-anasayfa .container img[src*="calendar"] { display: none !important; } .fixedheader.is-anasayfa .container br { display: none !important; } /* Anasayfa header: sabit yukseklik kaldirildi, icerige gore otomatik */ .fixedheader.is-anasayfa .container[style*="height"] { height: auto !important; min-height: auto !important; } /* ============================================================ CONTAINER / TITLE SECTION ============================================================ */ .container { background: var(--glass-bg-heavy); padding: var(--space-md); } .container text, .container center text { color: var(--color-text); font-weight: var(--font-weight-medium); } /* ============================================================ SEPARATOR ============================================================ */ .separator { margin: 0; border: none; border-top: 1px solid var(--color-divider); } .header + .separator { margin-top: 0; } /* ============================================================ ACTION BUTTONS (MENU) ============================================================ */ .gonderbuton { width: 95%; margin-top: var(--space-sm); padding: 14px var(--space-lg); background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--color-text); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); cursor: pointer; transition: all var(--transition-base); box-shadow: var(--glass-shadow-sm); text-align: left; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .gonderbuton::after { content: '\203A'; position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); font-size: 1.4em; color: var(--color-text-tertiary); transition: transform var(--transition-fast); } .gonderbuton:hover { background: var(--glass-bg-heavy); box-shadow: var(--glass-shadow); transform: translateY(-1px); border-color: rgba(var(--color-primary-rgb), 0.3); } .gonderbuton:hover::after { transform: translateY(-50%) translateX(3px); } .gonderbuton:active { transform: translateY(0); box-shadow: var(--glass-shadow-sm); background: var(--glass-bg-heavy); border-color: rgba(var(--color-primary-rgb), 0.25); } .gonderbuton text { color: var(--color-text); font-weight: var(--font-weight-medium); } /* ============================================================ LIST ITEM FRAME (BUTTON FRAME TABLE) ============================================================ */ .buttonframetable { width: 100%; margin-top: -1px; border-collapse: separate; border: 1px solid var(--color-border); background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0; border-radius: 0; transition: background var(--transition-fast); } .buttonframetable:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .buttonframetable:last-of-type { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } fieldset > .buttonframetable:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } fieldset > .buttonframetable:last-of-type { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); margin-bottom: var(--space-md); } .buttoninnertable { width: 100%; height: 42px; background-color: transparent; } .buttoninnertable td { padding: var(--space-sm) var(--space-md); color: var(--color-text); font-size: var(--font-size-base); line-height: 1.4; } /* ============================================================ FRAME BUTTON (CLICKABLE LIST ITEMS) ============================================================ */ .framebutton { width: 100%; border: none; padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md); outline: 0; background-color: transparent; cursor: pointer; transition: background-color var(--transition-fast); text-align: left; color: var(--color-text); position: relative; -webkit-tap-highlight-color: transparent; box-sizing: border-box; } /* Liste konumuna gore border-radius - tiklanma geri bildirimi oval olsun */ .buttonframetable:first-of-type .framebutton, .buttonframetable:first-of-type .framebuttonarrowless, .buttonframetable:first-of-type .framebuttonchk, .buttonframetable:first-of-type .framebuttonchkd { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .buttonframetable:last-of-type .framebutton, .buttonframetable:last-of-type .framebuttonarrowless, .buttonframetable:last-of-type .framebuttonchk, .buttonframetable:last-of-type .framebuttonchkd { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .framebutton::after { content: '\203A'; position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); font-size: 1.2em; color: var(--color-text-tertiary); transition: transform var(--transition-fast); } .framebutton:hover { background-color: var(--color-primary-light); } .framebutton:hover::after { transform: translateY(-50%) translateX(3px); color: var(--color-text-secondary); } .framebutton:active { background-color: var(--color-primary-light); } .framebuttonarrowless { width: 100%; border: none; padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md); outline: 0; background: transparent; cursor: pointer; color: var(--color-text); -webkit-tap-highlight-color: transparent; } .framebuttonarrowless:active { background-color: var(--color-primary-light); } .framebuttonwt { width: 100%; border: none; padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md); outline: 0; background: transparent; cursor: default; color: var(--color-text); } .framebuttonchk { width: 100%; border: none; padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md); outline: 0; background: transparent; cursor: pointer; color: var(--color-text); -webkit-tap-highlight-color: transparent; } .framebuttonchk:active { background-color: var(--color-primary-light); } .framebuttonchkd { width: 100%; border: none; padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-md); outline: 0; background-image: url('../images/checked.png'); background-repeat: no-repeat; background-position: right var(--space-md) center; background-color: transparent; cursor: pointer; color: var(--color-text); -webkit-tap-highlight-color: transparent; } .framebuttonchkd:active { background-color: var(--color-primary-light); } /* ============================================================ CHECKBOX BUTTONS ============================================================ */ .uchk { border: none; padding: 0; outline: 0; background-image: url('../images/unchecked.png'); background-repeat: no-repeat; background-position: left; background-color: transparent; } .chkd { border: none; padding: 0; outline: 0; background-image: url('../images/checked.png'); background-repeat: no-repeat; background-position: left; background-color: transparent; } .chkdiv { display: none; height: 40px; } .innerchkbx { position: relative; top: 50%; right: 5px; } /* ============================================================ STANDARD TABLE (DATA DISPLAY) ============================================================ */ .standarttable { width: 100%; min-height: 40px; margin-top: -1px; border-collapse: separate; border: 1px solid var(--color-border); padding: var(--space-sm) var(--space-md); background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--color-text); font-size: var(--font-size-base); } /* Butonlu ve butonsuz satirlarin metni ayni hizada baslasin - framebutton padding-left = standarttable padding */ .buttoninnertable td { padding-left: 0 !important; } .standarttable:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .standarttable:last-of-type { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .stndrttable { width: 100%; min-height: 40px; margin-top: -1px; border-collapse: separate; border: 1px solid var(--color-border); padding: var(--space-sm) var(--space-md); background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--color-text); font-size: var(--font-size-base); } .frametable { width: 100%; } fieldset > table:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } fieldset > table:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } /* ============================================================ SEARCH INPUT ============================================================ */ .sorguinput { text-align: right; margin-right: 0; background: var(--glass-bg-heavy); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px var(--space-md); color: var(--color-text); font-size: var(--font-size-base); } .sorguinput:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); outline: none; } /* ============================================================ REFRESH BUTTON ============================================================ */ .refreshbutton { position: fixed; top: 52.5px; right: 12px; height: 27px; width: 27px; border: none; background-image: url(../images/refresh.png); background-size: 27px 27px; background-repeat: no-repeat; background-position: center; background-color: transparent; cursor: pointer; z-index: var(--z-overlay); display: none; opacity: 0.7; transition: opacity var(--transition-fast); -webkit-tap-highlight-color: transparent; } .refreshbutton:hover { opacity: 1; } .refreshbutton:active { opacity: 0.5; } /* Header icindeki yenileme butonu - toggle'in solunda, ayni hizada, her iki temaya uyumlu */ .header-bar-right { gap: var(--space-xs); } .header-refresh-btn { position: relative !important; top: auto !important; right: auto !important; width: 36px !important; height: 36px !important; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background-color: var(--glass-bg-heavy); flex-shrink: 0; opacity: 0.9; transition: all var(--transition-base); background-image: none !important; -webkit-tap-highlight-color: transparent; } /* Ikon: mask ile PNG, renk var(--color-text) ile temaya uyumlu */ .header-refresh-btn::before { content: ''; position: absolute; inset: 0; background: var(--color-text); -webkit-mask-image: url(../images/refresh.png); mask-image: url(../images/refresh.png); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; } .header-refresh-btn:hover { background-color: var(--color-primary-light); opacity: 1; } .header-refresh-btn:hover::before { background: var(--color-primary); } .header-refresh-btn:active { transform: scale(0.95); } /* ============================================================ LOADERS & SPINNERS ============================================================ */ .loader { position: fixed; left: 0; top: 115px; width: 100%; height: 100%; z-index: var(--z-loader) - 1; background: var(--color-bg); } .loader font, .loader b { color: var(--color-text-tertiary) !important; font-family: var(--font-family); } .loader2 { position: fixed; display: table; left: 0; top: 0; width: 100%; height: 100%; z-index: var(--z-loader) - 1; background: var(--color-bg); } .loader2_sub { display: table-cell; vertical-align: middle; width: 100%; text-align: center; } .pace { position: fixed; z-index: var(--z-loader); top: 135px; left: 50%; margin-left: -20px; width: 20px; height: 20px; background: transparent; border: 3px solid transparent; border-top-color: var(--color-primary); border-left-color: var(--color-primary); border-right-color: rgba(var(--color-primary-rgb), 0.3); border-radius: var(--radius-full); animation: pace-spinner 600ms linear infinite; } .pace2 { z-index: var(--z-loader); margin-top: 23px; width: 36px; height: 36px; background: transparent; border: 3px solid transparent; border-top-color: var(--color-primary); border-left-color: var(--color-primary); border-right-color: rgba(var(--color-primary-rgb), 0.3); border-radius: var(--radius-full); animation: pace-spinner 600ms linear infinite; } @keyframes pace-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================ HEADER / FOOTER ============================================================ */ .header, .footer { font-size: var(--font-size-sm); } .header p, .footer p { color: var(--color-text-secondary); } footer { text-align: center; padding: var(--space-lg) var(--space-md); } .footer p:last-of-type { margin-bottom: 0; } .copy { font-size: var(--font-size-xs); margin: 10px 0; color: var(--color-text-tertiary); text-align: center; } .copy a { color: var(--color-primary); } .logo { float: left; padding: 15px 0; } .menu-but { float: right; padding: 19px 0 0 0; } /* ============================================================ MENU ============================================================ */ .content {} .menu { list-style: none; margin: 0; padding: 0; font-size: var(--font-size-lg); } .menu li { display: block; margin-bottom: 0; margin-left: 15%; } .menu a { padding: 8px; color: var(--color-text); font-weight: var(--font-weight-semibold); transition: color var(--transition-fast); } .menu a:hover { color: var(--color-primary); } .icon .span, .icon a, .icon span { padding: 5px 5px 5px 40px; } .icon .span, .menu a, .icon span { display: block; position: relative; } .icon .span:before, .icon a:before, .icon span:before { width: 32px; height: 32px; content: ""; position: absolute; top: 0; left: 0; } .info a:before, .info span:before, .info .span:before { background: url('../images/info.png') no-repeat; } .home a:before, .home span:before, .home .span:before { background: url('../images/home.png') no-repeat; } .gear a:before, .gear span:before, .gear .span:before { background: url('../images/gear.png') no-repeat; } .bubble a:before, .bubble span:before, .bubble .span:before { background: url('../images/bubble.png') no-repeat; } .add a:before, .add span:before, .add .span:before { background: url('../images/add.png') no-repeat; } .call a:before, .call span:before, .call .span:before { background: url('../images/call.png') no-repeat; } .navigation a:before, .navigation span:before, .navigation .span:before { background: url('../images/navigation.png') no-repeat; } .mail a:before, .mail span:before, .mail .span:before { background: url('../images/mail.png') no-repeat; } ul.small { font-size: var(--font-size-sm); } ul.small a { font-weight: var(--font-weight-normal); } /* ============================================================ ARTICLE ============================================================ */ article figure { width: 100%; margin: 0 auto 20px auto; max-width: 480px; position: relative; box-shadow: var(--glass-shadow); border-radius: var(--radius-md); overflow: hidden; } article { padding-bottom: 30px; } article:first-of-type { padding-top: 20px; } article:last-of-type { padding-bottom: 0; } article figure a { display: block; } article figure img { padding: 10px; display: block; border: none; background: var(--color-surface); text-align: center; max-width: 100%; box-sizing: border-box; } article figure figcaption { font-size: var(--font-size-base); padding: 0 10px 10px 10px; color: var(--color-text); background: var(--color-surface); font-weight: var(--font-weight-semibold); } article pre { padding: 10px; background: var(--glass-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: none; font-size: var(--font-size-sm); } article ul ul, article ol ul, article dl ul, article ul ol, article ol ol, article dl ol { margin: 0; } article nav ul li, article nav ol li, article ol li, article ul li, article dl li, article nav ul dt, article nav ol dt, article ol dt, article ul dt, article dl dt, article nav ul dd, article nav ol dd, article ol dd, article ul dd, article dl dd { line-height: var(--line-height); } article dt { font-weight: var(--font-weight-semibold); } article dd { margin: 0 0 5px 40px; } a.more { font-size: var(--font-size-sm); text-decoration: underline; color: var(--color-primary); } /* ============================================================ SOCIAL ============================================================ */ .social { margin: 10px 0 20px 0; } .social a { opacity: 0.5; transition: opacity var(--transition-base); } .social a:hover { opacity: 1; } /* ============================================================ POST PREVIEW ============================================================ */ .post-preview { float: left; width: 58px; height: 58px; padding: 0 10px 0 0; border-right: 1px solid var(--color-border); } .post-preview a, .post-preview img { display: block; } .post-preview img { margin: 0; padding: 5px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); } .post-content { float: left; width: 72%; padding: 0 0 0 10px; } .comments li { padding-bottom: 30px; } .comments li p { margin-bottom: 5px; } /* ============================================================ PAGINATION ============================================================ */ .paginate { margin: 20px 0 0 0; } .paginate ul { margin: 0; padding: 0; } .paginate ul li { display: inline-block; margin: 0 5px 0 0; line-height: normal; font-size: 0; } .paginate ul li:first-child { padding: 0; } .paginate ul li a, .paginate ul li span.current { border-radius: var(--radius-sm); font-size: var(--font-size-sm); position: relative; padding: 8px 12px; display: block; background: var(--glass-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); box-shadow: var(--glass-shadow-sm); transition: all var(--transition-fast); } .paginate ul li a:hover, .paginate ul li span.current { color: #fff; background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3); } /* ============================================================ SLIDER ============================================================ */ .slider { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0 auto; box-sizing: border-box; } .slider li { position: absolute; display: none; width: 100%; left: 0; top: 0; } .slider li:first-child { position: relative; display: block; float: left; } .slider img { display: block; height: auto; float: left; width: 100%; max-width: 100%; border: 0; } /* ============================================================ CUSTOM TEXT ELEMENT ============================================================ */ text { font-family: var(--font-family); color: var(--color-text); } /* ============================================================ UTILITY: CENTER TAG ============================================================ */ center { color: var(--color-text); } /* ============================================================ GLOBAL FONT COLOR FOR TABLE CELLS ============================================================ */ td, th { color: var(--color-text); font-family: var(--font-family); } td font, th font { color: inherit; } /* ============================================================ SCROLLBAR STYLING ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-text-tertiary); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); } /* ============================================================ RESPONSIVE ADJUSTMENTS ============================================================ */ @media screen and (max-width: 480px) { .wrap { padding: 0 var(--space-sm); } .gonderbuton { width: 97%; } } @media screen and (min-width: 768px) { .wrap { max-width: 700px; } }