/* ===== TERMINAL WARGAMING — TERMINAL TEMASI ===== */ /* ★★★ KOYU PALET — TEK KONTROL NOKTASI ★★★ Tüm koyu yüzeyler tek bir kadrana bağlı: --slate. Siteyi koyulaştırmak/açmak ya da tonu değiştirmek için SADECE --slate'i değiştir; kart / footer / ayraç tonları color-mix ile otomatik türetilir (uyumlu kalır). (İnce ayar isteyen olursa türetme oranlarını da burada değiştirebilirsin.) */ :root { --slate: #1e262a; /* ★ TEK KADRAN: koyu taban */ --slate-card: color-mix(in srgb, var(--slate) 94.5%, #fff); /* kartlar — otomatik bir ton açık */ --slate-foot: color-mix(in srgb, var(--slate) 87%, #000); /* footer — otomatik bir ton koyu */ --slate-line: color-mix(in srgb, var(--slate) 87%, #fff); /* ayraç çizgileri */ --slate-line2: color-mix(in srgb, var(--slate) 83%, #fff); /* parlak ayraç */ } :root { --tw-carbon: var(--slate); --tw-carbon2: var(--slate-card); --tw-yellow: #d4c757; --tw-yellow-bright: #e8d94a; --tw-bone: #ebe5d4; --tw-bone-dim: #948a76; --tw-parchment: #e8dcc0; --tw-rust: #8b3a2b; --tw-line: var(--slate-line); } /* ★★★ RENK YÖNETİMİ — GENİŞLETİLMİŞ MARKA TOKEN KAYIT DEFTERİ ★★★ Admin → Yapılandır → Terminal Wargaming → Renk Yönetimi panelinden yönetilir. ColorManager bu token'ların admin değerlerini her 'e (head.after) :root olarak enjekte eder → bu blok FALLBACK (varsayılan) olarak kalır. Sitedeki tüm renkler buradaki token'lara bağlıdır; selector'larda artık ham hex yoktur. "-base" token'lar krem-bant/komponent kapsam RESET'leri içindir (asla bant içinde yeniden eşlenmez; dial = base, eşzamanlı güncellenir → kartlar dial'i izler). */ :root { /* Değişmez temeller (scope reset / komponent paleti; dial ile birebir) */ --tw-yellow-base: #d4c757; --tw-yellow-bright-base: #e8d94a; --tw-bone-base: #ebe5d4; --tw-bone-dim-base: #948a76; --tw-parchment-base: #e8dcc0; --tw-rust-base: #8b3a2b; --tw-rust2-base: #a8543d; --tw-rust-bright-base: #cf7a5c; --tw-bone-muted-base: #b8b0a0; --tw-bone-soft-base: #cfc8b6; /* Sarı / altın ailesi */ --tw-yellow-light: #e6da7e; --tw-amber: #e0a64d; --tw-gold-dim: #8a7f3a; /* Pas ailesi */ --tw-rust2: #a8543d; --tw-rust-bright: #cf7a5c; --tw-rust-mid: #c0563a; --tw-coral: #e2725b; --tw-rust-pale: #e7b3a6; /* Kemik / metin ölçeği (açıktan koyuya) */ --tw-bone-bright: #f1eadf; --tw-bone-soft: #cfc8b6; --tw-bone-muted: #b8b0a0; --tw-bone-sec: #a9a290; --tw-bone-label: #8f8878; /* #8a8372 idi → koyu zeminde 4.41 (AA altı); 4.72'ye çekildi */ --tw-bone-faint: #6a6453; /* Semantik */ --tw-success: #6b9e5f; --tw-success-light: #9fd8a0; --tw-success-dark: #2e5a30; --tw-danger: #c0392b; /* Rozet / kategori (dekoratif) */ --tw-info: #7fb8d8; --tw-info-dark: #333355; --tw-violet: #c59bd8; --tw-violet-dark: #443355; --tw-wine: #7a2230; --tw-wine-light: #ffd9df; --tw-wine-rose: #c2697a; --tw-wine-dark: #5a2630; /* Koyu/sıcak ayraç çizgileri */ --tw-line-warm: #4a463d; --tw-line-wine: #3a2a2e; --tw-line-olive: #4a431f; --tw-line-amber: #5a4a2e; --tw-line-cool: #25333b; } /* ── "TAKİP EDEN" token'lar (Ana Menü + h1/h2/h3/h4/p/link) ── Varsayılan olarak ana renkleri TAKİP EDERLER (var(...) referansı) → admin bunlara dokunmadığında ana metin/koyu-taban/sarı ile birlikte kayarlar VE krem bantlarda otomatik koyulaşırlar (var(--tw-bone) krem kapsamda ink olur). Admin Renk Yönetimi'nden birine ÖZEL renk verirse, ColorManager o token'ı düz hex olarak head.after'a basıp bu referansı ezer. */ :root { /* Ana Menü (header) — varsayılan: site renklerini takip eder */ --tw-header-bg: var(--tw-carbon); --tw-header-text: var(--tw-bone); --tw-header-hover: var(--tw-yellow); --tw-header-border: var(--tw-line); /* Metin etiketleri — varsayılan: ana metin (bone) / link hover sarıyı takip eder */ --tw-h1: var(--tw-bone); --tw-h2: var(--tw-bone); --tw-h3: var(--tw-bone); --tw-h4: var(--tw-bone); --tw-p: var(--tw-bone); --tw-link: var(--tw-bone); --tw-link-hover: var(--tw-yellow); /* Stok (Tailwind) renkleri — stok Bagisto mavisi marka rengine bağlanır. stock-blue varsayılan = asker sarısını (accent) takip eder; stock-remove = pas. */ --tw-stock-blue: var(--tw-yellow); --tw-stock-remove: var(--tw-rust-bright); } /* --- Genel zemin + tipografi --- */ html, body { background-color: var(--tw-carbon) !important; color: var(--tw-p) !important; } body { font-family: var(--tw-font-body) !important; } /* Başlık fontu ortak; RENK her etiket için ayrı token (Renk Yönetimi → Metin Etiketleri). */ h1, h2, h3, h4, .text-2xl, .text-3xl, .text-4xl, .text-5xl { font-family: var(--tw-font-display) !important; letter-spacing: 0.02em; } h1 { color: var(--tw-h1) !important; } h2, .text-2xl, .text-3xl, .text-4xl, .text-5xl { color: var(--tw-h2) !important; } h3 { color: var(--tw-h3) !important; } h4 { color: var(--tw-h4) !important; } /* ICON-FONT'LARI KORU — genel font-family bunları ezmesin (yoksa glyph'ler kaybolur) */ [class^="icon-"], [class*=" icon-"], [class^="icon-"]::before, [class*=" icon-"]::before { font-family: "bagisto-shop" !important; } /* Tema stok font class'ları → marka token'larına bağlı (Poppins/DM Serif yükü kaldırıldı) */ .font-poppins { font-family: var(--tw-font-body) !important; } .font-dmserif { font-family: var(--tw-font-display) !important; } .glow-404, .glow-shadow-404 { font-family: var(--tw-font-display) !important; } /* Header ikonları header metin rengini takip eder, servis/öne çıkan ikonlar asker sarısı */ #app > header [class*="icon-"] { color: var(--tw-header-text) !important; } .text-2xl[class*="icon-"], section [class*="icon-"], .rounded-full [class*="icon-"] { color: var(--tw-yellow) !important; } /* --- Beyaz/açik zeminleri karbona çevir --- */ .bg-white, main, .bg-gray-50, .bg-gray-100, .bg-zinc-50, .bg-zinc-100, .bg-gray-200 { background-color: var(--tw-carbon) !important; } /* --- Header (Ana Menü) — Renk Yönetimi → Ana Menü --- Görünür çubuk =

etiketinin kendisi. header.bg-white (0,1,1) ile .bg-white→carbon (0,1,0) kuralını specificity ile ezeriz; yoksa header zemini --tw-header-bg yerine koyu tabanda kalır. (İç açılır menü/çekmeceler koyu tabanda kalsın diye descendant .bg-white'a DOKUNULMAZ.) ★★★ KURAL: BU BLOKTAKİ HER SEÇİCİ `#app > header` İLE KAPSAMLANIR ★★★ Çıplak `header { ... !important }` yazmak YASAK. Ana menü çubuğu layout'ta (components/layouts/index.blade.php) `#app`in DOĞRUDAN çocuğudur; sayfa içeriğindeki semantik

'lar ise `main#main` içinde yaşar. Çıplak tip seçici ikisini de yakalar ve içerik başlıklarını ana menü rengiyle boyar (2026-08-05: kategori .tw-cat-head + /ozel-siparisler .tw-ozs-hero + blog .tw-article-head siyaha boyanıyor, padding'i sıfırlanıyor, eyebrow sarısı kayboluyordu — `!important` + tip seçici, class kurallarını ezdiği için sessiz). */ #app > header, #app > header.bg-white { background-color: var(--tw-header-bg) !important; } #app > header { border-bottom: 1px solid var(--tw-header-border) !important; box-shadow: none !important; } #app > header .text-navyBlue, #app > header a, #app > header span, #app > header p { color: var(--tw-header-text) !important; } #app > header a:hover, #app > header .text-navyBlue:hover { color: var(--tw-header-hover) !important; } /* --- Üst duyuru şeridi --- */ .bg-navyBlue { background-color: var(--tw-carbon2) !important; } /* --- Footer --- */ .bg-lightOrange, footer { background-color: var(--tw-carbon2) !important; color: var(--tw-bone) !important; border-top: 1px solid var(--tw-line); } footer a, .bg-lightOrange a, footer p, footer span, footer h3 { color: var(--tw-bone) !important; } footer a:hover { color: var(--tw-yellow) !important; } /* --- Metin renkleri (gövde/paragraf) → --tw-p --- */ /* zinc-700/600/500/400 ve gray-400 de listede OLMALI: bunlar açık tema için seçilmiş orta gri tonlar, koyu zeminde 1.59-3.44 kontrast veriyorlardı (/sss gövde metni, kargo notu, breadcrumb). Ölçüm sonrası eklendi. */ .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-black, .text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-600, .text-zinc-500, .text-zinc-400, .text-neutral-700, .text-neutral-600, .text-neutral-500 { color: var(--tw-p) !important; } /* --- Linkler --- */ a { color: var(--tw-link); transition: color .15s; } a:hover { color: var(--tw-link-hover) !important; } /* --- Ana renk (navyBlue) -> asker sarisi: butonlar --- */ .bg-navyBlue.text-white, button.bg-navyBlue, .primary-button, .bg-navyBlue.rounded, [class*="bg-navyBlue"][class*="text-white"] { background-color: var(--tw-yellow) !important; color: var(--tw-carbon) !important; border-color: var(--tw-yellow) !important; font-weight: 600; } .text-navyBlue { color: var(--tw-yellow) !important; } .border-navyBlue { border-color: var(--tw-yellow) !important; } /* primary-button bir olabildiğinden (ör. profil menüsü "Giriş Yap") global a:hover (link hover = sarı) yazıyı sarı zemin üstünde sarı yapıp görünmez kılıyordu. Hover'da yazı karbon (koyu) kalsın → okunaklı. (specificity a:hover'ı ezer) */ a.primary-button:hover, .primary-button:hover, button.bg-navyBlue:hover { color: var(--tw-carbon) !important; } /* ===== STOK (Tailwind) MAVI - SKY - INDIGO -> MARKA (Renk Yönetimi -> Stok Renkleri) ===== Storefront yalnız "navyBlue"yu çeviriyordu; stok Bagisto Tailwind mavileri (blue, sky, indigo) mavi kalıyordu (sepet "Kaldır", karşılaştırma, çerez bandı, RMA...). Hepsi marka token'larına bağlandı. stock-blue varsayılan = asker sarısı, stock-remove = pas. NOT: yorumda yıldız-eğik-çizgi dizisi YAZMA (yorumu erken kapatır). */ /* Aksiyon/silme linkleri (stok text-blue-700 = Kaldır/Taşı/Sil) -> pas/danger. .text-blue-700.text-blue-700 = specificity 0,2,0 ile stok kuralı garanti kazanır. */ .text-blue-700.text-blue-700 { color: var(--tw-stock-remove) !important; } /* Genel mavi metin/ikon/link -> aksan (asker sarısı) */ [class*="text-blue-"]:not(.text-blue-700), .text-blue, [class*="text-sky-"], [class*="text-indigo-"] { color: var(--tw-stock-blue) !important; } /* Mavi linklerin hover'ı da aksanda kalsın */ a[class*="text-blue-"]:hover, a[class*="text-sky-"]:hover, a[class*="text-indigo-"]:hover { color: var(--tw-stock-blue) !important; } a.text-blue-700:hover { color: var(--tw-stock-remove) !important; } /* Dolu mavi zeminler -> aksan + üstünde karbon (koyu) yazı (kontrast; ör. çerez bandı butonları). ~= (tam token) kullanılır → "bg-blue-50" artık "bg-blue-500"i yanlışlıkla yakalamaz. */ [class*="bg-blue-"]:not([class~="bg-blue-50"]):not([class~="bg-blue-100"]):not([class~="bg-blue-200"]):not([class~="bg-blue-300"]), [class*="bg-sky-"]:not([class~="bg-sky-50"]):not([class~="bg-sky-100"]):not([class~="bg-sky-200"]):not([class~="bg-sky-300"]), [class*="bg-indigo-"]:not([class~="bg-indigo-50"]):not([class~="bg-indigo-100"]):not([class~="bg-indigo-200"]):not([class~="bg-indigo-300"]) { background-color: var(--tw-stock-blue) !important; color: var(--tw-carbon) !important; } /* Açık mavi zeminler (50-300) -> hafif aksan tint'i (info kutuları) */ [class~="bg-blue-50"], [class~="bg-blue-100"], [class~="bg-blue-200"], [class~="bg-blue-300"], [class~="bg-sky-50"], [class~="bg-sky-100"], [class~="bg-sky-200"], [class~="bg-sky-300"], [class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-indigo-200"], [class~="bg-indigo-300"] { background-color: color-mix(in srgb, var(--tw-stock-blue) 14%, transparent) !important; } /* Mavi kenarlık / ring / fill -> aksan */ [class*="border-blue-"], [class*="border-sky-"], [class*="border-indigo-"] { border-color: var(--tw-stock-blue) !important; } [class*="ring-blue-"], [class*="ring-sky-"], [class*="ring-indigo-"] { --tw-ring-color: var(--tw-stock-blue) !important; } [class*="fill-blue-"], [class*="fill-sky-"], [class*="fill-indigo-"] { fill: var(--tw-stock-blue) !important; } /* --- Inputlar --- */ input, textarea, select { background-color: var(--tw-carbon2) !important; color: var(--tw-bone) !important; border-color: var(--tw-line) !important; } input::placeholder { color: var(--tw-bone-dim) !important; } /* --- Border / ayraçlar --- */ .border, .border-b, .border-t, [class*="border-gray"], [class*="border-zinc"] { border-color: var(--tw-line) !important; } /* --- Logo görünür kalsin (zaten beyaz) --- */ #app > header img[src*="logo"] { height: 84px !important; width: auto; max-height: 84px; } /* logo nefes alsın: header'a üst-alt boşluk (yalnız ana menü çubuğu — bkz. #app > header kuralı) */ #app > header { padding-top: 0 !important; padding-bottom: 10px !important; } /* ===== TW-FOOTER-CREAM-FIX: footer'da kalan açık krem (#F1EADF) zeminleri markaya çek (light-on-light düzeltmesi) ===== */ footer .bg-\[\#F1EADF\] { background-color: var(--tw-carbon2) !important; } /* Alt telif şeridi: en dipte daha koyu bant + ince ayraç çizgisi, kemik yazı */ footer .bg-\[\#F1EADF\].justify-between { background-color: var(--tw-carbon) !important; border-top: 1px solid var(--tw-line) !important; } footer .bg-\[\#F1EADF\].justify-between p { color: var(--tw-bone) !important; letter-spacing: 0.01em; } /* ===== TERMINAL-MENU-SCROLL: menu anchor'larina yumusak kaydirma + sticky header payi ===== */ html { scroll-behavior: smooth; } [id^="tw-"] { scroll-margin-top: 110px; } /* ===== TERMINAL-MENU-LAYOUT: ust menu duzeni (Tailwind build'de olmayan utility'ler) ===== */ #app > header a.tw-logo { flex-shrink: 0; } .tw-terminal-nav { flex-shrink: 0; } .tw-terminal-nav a { white-space: nowrap; cursor: pointer; } @media (max-width: 1536px) { .tw-terminal-nav a { padding-left: .6rem; padding-right: .6rem; font-size: .8125rem; } } @media (max-width: 1366px) { .tw-terminal-nav a { padding-left: .45rem; padding-right: .45rem; font-size: .75rem; } } @media (max-width: 1180px) { .tw-terminal-nav a { padding-left: .35rem; padding-right: .35rem; font-size: .6875rem; } } /* ===== TERMINAL-MENU-FIT: arama kutusu daralabilsin, menu ile cakismasin ===== */ .tw-rightnav { min-width: 0; } .tw-search, .tw-search form, .tw-search input { min-width: 0; } /* ===== TERMINAL-MENU-LEFTNAV: sol-nav tam genisligini korusun (icindeki menu tasmasin) ===== */ .tw-leftnav { flex-shrink: 0; } /* === A11y baseline (focus + reduced-motion) — erisilebilirlik denetimi === */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible,.tw-blog-card:focus-visible,.tw-blog-tab:focus-visible{outline:2px solid var(--tw-yellow) !important;outline-offset:2px !important;border-radius:2px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}} /* ===== TERMINAL-HEADER-FIX: hover cizgisi asker sarisi + cift cizgi/bosluk temizligi ===== */ .hover\:border-navyBlue:hover, .focus\:border-navyBlue:focus { border-color: var(--tw-yellow) !important; } #app > header .min-h-\[78px\] { border-bottom: 0 !important; } #app > header { padding-bottom: 0 !important; } /* @@TWDOC-CSS-START@@ */ /* =================================================================== TERMINAL WARGAMING · TERMINAL CMS DOC SİSTEMİ (.tw-doc) — BEGIN Tüm Terminal CMS sayfaları bu paylaşılan bileşenleri kullanır. Sarıcı: