/* ========================================================================== EĞİN TURİZM — ORTAK TASARIM SİSTEMİ (theme.css) Hem kurumsal web sitesi hem de yönetim paneli bu dosyayı kullanır. Marka renkleri logodan örneklenmiştir: sarı #FDEB1D · kömür #2F2F2E ========================================================================== */ /* ----- 1. TASARIM TOKEN'LARI ---------------------------------------------- */ /* Eylül 2026 düzenlemesi: durum renkleri metin olarak da okunur olsun diye koyulaştırıldı (beyaz ve kendi açık zemininde WCAG AA ≥ 4.5:1). Çubuk, nokta, ilerleme gibi DOLGULAR için canlı tonlar ayrı: --ok-fill / --warn-fill … Kural: yazı ve ikon → --ok · dolgu → --ok-fill · zemin → --ok-soft. Sayfalarda sabit #hex yazma; buradaki adları kullan. */ :root { /* Marka (logodan) */ --brand: #FCE01E; /* ana sarı */ --brand-strong: #F5D400; /* hover / odak halkası */ --brand-soft: #FEF7C3; /* açık sarı zemin */ --brand-tint: #FFFDEB; /* neredeyse beyaz sarı */ --brand-ink: #8A6D00; /* sarı zemin üstünde okunur koyu sarı yazı */ --ink: #1B1B19; /* ana metin / koyu yüzey */ --ink-2: #2F2F2E; /* logo siyahı */ --ink-3: #4A4A47; /* ikincil metin */ --muted: #6E6E68; /* soluk metin (beyazda 5.1:1) */ --placeholder: #8A8A82; --line: #E7E5DE; /* ince ayraç */ --line-2: #F0EEE8; /* Yüzeyler */ --bg: #FBFAF7; /* sıcak beyaz sayfa zemini */ --surface: #FFFFFF; /* kart */ --surface-2: #F5F4EF; /* ikincil yüzey */ --surface-ink: #1B1B19; /* koyu bölüm zemini (kenar çubuğu) */ --surface-ink-2: #242422; /* Durum — yazı/ikon (AA) · dolgu (canlı) · zemin */ --ok: #1A7A54; --ok-fill: #1F9D57; --ok-soft: #E5F6EC; --warn: #8A5D00; --warn-fill: #E0A100; --warn-soft: #FBF0D2; --danger: #C62F2F; --danger-fill: #D23A3A; --danger-soft: #FBE7E7; --info: #1D4ED8; --info-fill: #2563EB; --info-soft: #E6EEFE; /* Tipografi */ --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --plate-blue: #1D4FB7; /* plaka rozetindeki TR şeridi */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; /* Boşluk ölçeği (4px tabanlı) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* Köşe yarıçapı */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Gölge */ --sh-sm: 0 1px 2px rgba(27,27,25,.06), 0 1px 3px rgba(27,27,25,.05); --sh-md: 0 4px 20px rgba(27,27,25,.07); --sh-lg: 0 18px 50px rgba(27,27,25,.12); --sh-brand: 0 8px 26px rgba(245,212,0,.35); --ring: 0 0 0 3px var(--brand-soft); --container: 1200px; --ease: cubic-bezier(.16,1,.3,1); } /* ----- 2. TEMEL ----------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* Kaydırma çubuğu gizli durur; kaydırırken (mobil.js o öğeye .kaydir verir) ya da imleç çubuğun üstüne gelince belirir. scrollbar-color / scrollbar-width YAZMA: Chrome'da ::-webkit-scrollbar kurallarını devre dışı bırakır. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .kaydir::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--ink) 28%, transparent); } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: color-mix(in srgb, var(--ink) 42%, transparent); } ::-webkit-scrollbar-corner { background: transparent; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); } ::selection { background: var(--brand); color: var(--ink); } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ----- 3. TİPOGRAFİ YARDIMCILARI ----------------------------------------- */ .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .eyebrow::before { content: ""; width: 20px; height: 3px; background: var(--brand); border-radius: 2px; } .text-muted { color: var(--muted); } .hl { color: var(--ink); background: linear-gradient(transparent 62%, var(--brand) 62%); padding: 0 2px; } /* ----- 4. BUTONLAR -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 650; font-size: var(--text-sm); padding: 12px 22px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s; white-space: nowrap; } .btn svg, .btn i { font-size: 14px; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: var(--ink); box-shadow: var(--sh-brand); } .btn-primary:hover { background: var(--brand-strong); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,212,0,.45); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #000; transform: translateY(-2px); box-shadow: var(--sh-lg); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); background: var(--surface); } .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); } .btn-ghost-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); } .btn-sm { padding: 8px 16px; font-size: var(--text-xs); } .btn-lg { padding: 15px 30px; font-size: var(--text-base); } /* ----- 5. KARTLAR & ROZETLER --------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; } .card-hover:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 650; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-3); } .badge-brand { background: var(--brand-soft); color: var(--brand-ink); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-danger { background: var(--danger-soft); color: var(--danger); } /* İkon kutusu */ .icon-box { width: 52px; height: 52px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--ink); font-size: 22px; flex-shrink: 0; transition: background .3s, color .3s; } .icon-box-dark { background: var(--ink); color: var(--brand); } /* ----- 6. FORM ELEMANLARI (site + panel ortak) --------------------------- */ .field { display: flex; flex-direction: column; gap: 7px; } .label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); } .input, .select, .textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; outline: none; transition: border-color .2s, box-shadow .2s; } .input::placeholder, .textarea::placeholder { color: var(--placeholder); } .input:focus, .select:focus, .textarea:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-soft); } .textarea { resize: vertical; min-height: 120px; } /* ----- 7. TABLO (panel) --------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; border-bottom: 1px solid var(--line); } .table td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background .15s; } .table tbody tr:hover { background: var(--surface-2); } /* ----- 8. ANİMASYON YARDIMCILARI ----------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .d1 { transition-delay: .08s } .d2 { transition-delay: .16s } .d3 { transition-delay: .24s } .d4 { transition-delay: .32s } .d5 { transition-delay: .40s } .d6 { transition-delay: .48s } /* yetki/filtre ile gizlenen düğmeler: kendi display kuralları [hidden]'ı ezmesin */ [hidden] { display: none !important; } /* ----- 9. ERİŞİLEBİLİRLİK ------------------------------------------------- */ :focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ------ rapor biçim seçici (rapor-bicim.js) ------ */ .rb-seg i{margin-right:6px} .rb-seg button{white-space:nowrap} /* Sayfa kendi .seg stilini tanımlamadıysa bu yedek görünür (:where → özgüllük 0, sayfanınki kazanır) */ :where(.rb-seg){display:inline-flex;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:2px} :where(.rb-seg) :where(button){padding:7px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:650;color:var(--ink-3);background:none;border:0;cursor:pointer} :where(.rb-seg) :where(button.on){background:var(--ink);color:#fff} /* ----- 10. PENCERELER: ARKA SAYFA KİLİDİ (28.09.2026) --------------------- */ /* Açık bir pencere, çekmece ya da tam ekran tabaka varken sayfanın kendisi kaymaz: pencerenin içinde kaydırma sona gelince ya da karartılmış zeminde tekerlek/parmak kullanılınca arkadaki sayfa yerinde durur. Kaydırma çubuğu kaybolunca içerik yana kaymasın diye yeri korunur (scrollbar-gutter). Yeni bir pencere türü eklersen seçiciyi buraya ekle ya da pencerenin köküne data-kilit ver. :has() bilmeyen eski tarayıcı yalnız kilidi kaçırır. .ov.kalkan bu kilitten muaftır (filo.html): sayfayı kendi kaydırma kalkanı tutar. */ html:has(.ov:not(.kalkan), .modal-bg.open, .rov, .modal-scrim.on, .scrim.on, .drawer.on, .ck-ov, .ara-ov:not([hidden]), [data-kilit]) { overflow: hidden; scrollbar-gutter: stable; } html:has(dialog:modal) { overflow: hidden; scrollbar-gutter: stable; } @media (max-width: 900px) { html:has(.side.open) { overflow: hidden; } } @media (max-width: 760px) { html:has(.pop) { overflow: hidden; } } /* Pencere içindeki kaydırma dibe vurunca sayfaya geçmesin (kaydırma zinciri) */ .ov .modal, .modal-bg .modal, .rmd-b, .modal-scrim .modal-body, .drawer .dr-body, .ck-b, .ara-l, .zil-l, .pop, dialog { overscroll-behavior: contain; } /* ----- 11. ERİŞİLEBİLİRLİK EKLERİ (06.10.2026; davranış ekran.js + mobil.js) -- */ /* Modül başlığındaki küçük kategori etiketi ("MUHASEBE"): sarı yazı beyazda okunmuyordu (1,46:1) → koyu sarı (--brand-ink, AA). Sayfalar aynı kuralı kendi