/* ============================================================================ hab_theme.css — Haberself birleşik tasarım sistemi (YÖN: C — Marka/Renk-odaklı) ---------------------------------------------------------------------------- Tek tema mantığı + 8 accent renk × gündüz/gece = 16 şema. - Gündüz/gece: - Site rengi: Rengi bir MARKA yüzeyi olarak öne çıkarır (renkli şerit, overlay manşet, accent vurguları) → her subdomain kendi özgün yayını gibi görünür. Eski ~20 CSS dosyası kademeli olarak bununla değiştirilecek. Sınıf öneki: .hs- (olustur landing ile aynı dil) ========================================================================== */ /* ---------------------------------------------------------------------------- 1) TOKEN'LAR -------------------------------------------------------------------------- */ :root { --hs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PT Sans", sans-serif; --hs-serif: Georgia, "PT Serif", "Times New Roman", serif; --hs-fs-xs: 12px; --hs-fs-sm: 13.5px; --hs-fs-base: 16px; --hs-fs-lg: 18px; --hs-fs-xl: 22px; --hs-fs-2xl: 28px; --hs-fs-3xl: 34px; --hs-fs-4xl: 42px; --hs-lh: 1.6; --hs-lh-tight: 1.2; --hs-sp-1:4px; --hs-sp-2:8px; --hs-sp-3:12px; --hs-sp-4:16px; --hs-sp-5:24px; --hs-sp-6:32px; --hs-sp-7:48px; --hs-sp-8:64px; --hs-radius-sm: 8px; --hs-radius: 12px; --hs-radius-lg: 16px; --hs-radius-pill: 999px; --hs-container: 1200px; --hs-container-narrow: 740px; --hs-header-h: 60px; --hs-transition: 160ms ease; --hs-read-scale: 1; /* makale "Aa" okuma modu */ color-scheme: light; } /* ---- NÖTR PALET: GÜNDÜZ ---- */ :root, [data-theme="light"] { --hs-bg:#ffffff; --hs-bg-soft:#f6f7f9; --hs-surface:#ffffff; --hs-surface-2:#eef1f4; --hs-surface-3:#e4e8ee; --hs-text:#11151c; --hs-text-soft:#49515e; --hs-muted:#8b95a3; --hs-border:#e6e9ee; --hs-border-strong:#d4d9e0; --hs-shadow:rgba(17,21,28,.08); --hs-shadow-lg:rgba(17,21,28,.16); --hs-overlay:rgba(10,14,20,.5); color-scheme: light; } /* ---- NÖTR PALET: GECE ---- */ [data-theme="dark"] { --hs-bg:#0e1116; --hs-bg-soft:#141921; --hs-surface:#171d26; --hs-surface-2:#222a35; --hs-surface-3:#2c3643; --hs-text:#e8ecf2; --hs-text-soft:#aab4c2; --hs-muted:#697383; --hs-border:#252e3a; --hs-border-strong:#333d4b; --hs-shadow:rgba(0,0,0,.45); --hs-shadow-lg:rgba(0,0,0,.6); --hs-overlay:rgba(0,0,0,.62); /* color-scheme global olarak DEĞİL, sadece .hs-body sayfalarında (aşağıda) ayarlanır ki eski sayfalar gece modundan etkilenmesin (kademeli geçiş). */ } /* ---------------------------------------------------------------------------- 2) 8 ACCENT × GÜNDÜZ/GECE accent | accent-hover | accent-soft (zemin) | on-accent (üzeri yazı) -------------------------------------------------------------------------- */ :root, [data-accent="1"]{--hs-accent:#2563eb;--hs-accent-hover:#1d4ed8;--hs-accent-soft:#eaf0fe;--hs-on-accent:#fff;} /* mavi */ [data-accent="2"]{--hs-accent:#dc2626;--hs-accent-hover:#b91c1c;--hs-accent-soft:#fdeaea;--hs-on-accent:#fff;} /* kırmızı */ [data-accent="3"]{--hs-accent:#16a34a;--hs-accent-hover:#15803d;--hs-accent-soft:#e7f6ec;--hs-on-accent:#fff;} /* yeşil */ [data-accent="4"]{--hs-accent:#7c3aed;--hs-accent-hover:#6d28d9;--hs-accent-soft:#f1ebfd;--hs-on-accent:#fff;} /* mor */ [data-accent="5"]{--hs-accent:#ea580c;--hs-accent-hover:#c2410c;--hs-accent-soft:#fdeee3;--hs-on-accent:#fff;} /* turuncu */ [data-accent="6"]{--hs-accent:#0891b2;--hs-accent-hover:#0e7490;--hs-accent-soft:#e3f5fa;--hs-on-accent:#fff;} /* camgöb. */ [data-accent="7"]{--hs-accent:#db2777;--hs-accent-hover:#be185d;--hs-accent-soft:#fce9f1;--hs-on-accent:#fff;} /* pembe */ [data-accent="8"]{--hs-accent:#475569;--hs-accent-hover:#334155;--hs-accent-soft:#eef1f4;--hs-on-accent:#fff;} /* arduvaz */ [data-theme="dark"], [data-theme="dark"][data-accent="1"]{--hs-accent:#60a5fa;--hs-accent-hover:#93c5fd;--hs-accent-soft:#16243b;--hs-on-accent:#0b1220;} [data-theme="dark"][data-accent="2"]{--hs-accent:#f87171;--hs-accent-hover:#fca5a5;--hs-accent-soft:#3a1d1d;--hs-on-accent:#1b0b0b;} [data-theme="dark"][data-accent="3"]{--hs-accent:#4ade80;--hs-accent-hover:#86efac;--hs-accent-soft:#14301f;--hs-on-accent:#06160d;} [data-theme="dark"][data-accent="4"]{--hs-accent:#a78bfa;--hs-accent-hover:#c4b5fd;--hs-accent-soft:#251a3d;--hs-on-accent:#100a1f;} [data-theme="dark"][data-accent="5"]{--hs-accent:#fb923c;--hs-accent-hover:#fdba74;--hs-accent-soft:#371f10;--hs-on-accent:#1a0d03;} [data-theme="dark"][data-accent="6"]{--hs-accent:#22d3ee;--hs-accent-hover:#67e8f9;--hs-accent-soft:#103039;--hs-on-accent:#04161b;} [data-theme="dark"][data-accent="7"]{--hs-accent:#f472b6;--hs-accent-hover:#f9a8d4;--hs-accent-soft:#3a1a2a;--hs-on-accent:#1c0911;} [data-theme="dark"][data-accent="8"]{--hs-accent:#94a3b8;--hs-accent-hover:#cbd5e1;--hs-accent-soft:#222a35;--hs-on-accent:#0c1118;} /* ---------------------------------------------------------------------------- 3) RESET / TEMEL (yalnız .hs-body altında çalışır → eski CSS ile çakışmaz) -------------------------------------------------------------------------- */ .hs-body *, .hs-body *::before, .hs-body *::after { box-sizing: border-box; } .hs-body { margin:0; background:var(--hs-bg); color:var(--hs-text); font-family:var(--hs-font); font-size:var(--hs-fs-base); line-height:var(--hs-lh); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color-scheme:light; transition:background var(--hs-transition), color var(--hs-transition); } [data-theme="dark"] .hs-body{ color-scheme:dark; } .hs-body img, .hs-body svg, .hs-body video { max-width:100%; height:auto; } .hs-body a { color:var(--hs-accent); text-decoration:none; transition:color var(--hs-transition); } .hs-body a:hover { color:var(--hs-accent-hover); } .hs-body h1,.hs-body h2,.hs-body h3,.hs-body h4 { line-height:var(--hs-lh-tight); color:var(--hs-text); margin:0 0 var(--hs-sp-3); font-weight:800; letter-spacing:-.015em; } .hs-body h1{font-size:var(--hs-fs-3xl);} .hs-body h2{font-size:var(--hs-fs-2xl);} .hs-body h3{font-size:var(--hs-fs-xl);} .hs-body p{margin:0 0 var(--hs-sp-4);} .hs-body ::selection{ background:var(--hs-accent); color:var(--hs-on-accent); } .hs-body :focus-visible{ outline:2px solid var(--hs-accent); outline-offset:2px; border-radius:6px; } /* ---------------------------------------------------------------------------- 4) DÜZEN -------------------------------------------------------------------------- */ .hs-container{ width:100%; max-width:var(--hs-container); margin:0 auto; padding-inline:var(--hs-sp-4); } .hs-container--narrow{ max-width:var(--hs-container-narrow); } .hs-section{ padding-block:var(--hs-sp-6); } .hs-section--soft{ background:var(--hs-bg-soft); } .hs-layout{ display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:var(--hs-sp-6); align-items:start; } @media(max-width:900px){ .hs-layout{ grid-template-columns:minmax(0,1fr); } } .hs-grid{ display:grid; gap:var(--hs-sp-5); } .hs-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .hs-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .hs-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } @media(max-width:980px){ .hs-grid--4,.hs-grid--3{ grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .hs-grid--2,.hs-grid--3,.hs-grid--4{ grid-template-columns:1fr; } } /* ---------------------------------------------------------------------------- 5) SON DAKİKA TICKER -------------------------------------------------------------------------- */ .hs-ticker{ display:flex; align-items:center; background:var(--hs-accent); color:var(--hs-on-accent); overflow:hidden; } .hs-ticker-lbl{ display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:var(--hs-fs-xs); font-weight:900; text-transform:uppercase; letter-spacing:.08em; padding:9px 14px; background:rgba(0,0,0,.18); } .hs-ticker-lbl .pulse{ width:8px; height:8px; border-radius:50%; background:currentColor; animation:hs-pulse 1.6s infinite; } @keyframes hs-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 70%{box-shadow:0 0 0 7px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} } .hs-ticker-track{ flex:1; overflow:hidden; white-space:nowrap; } .hs-ticker-track > span{ display:inline-block; padding:9px 0; animation:hs-scroll 26s linear infinite; } .hs-ticker-track a{ color:var(--hs-on-accent); font-weight:600; font-size:var(--hs-fs-sm); margin:0 26px; opacity:.95; } @keyframes hs-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ---------------------------------------------------------------------------- 6) HEADER / MARKA ŞERİDİ -------------------------------------------------------------------------- */ .hs-header{ position:sticky; top:0; z-index:60; background:var(--hs-bg); border-bottom:1px solid var(--hs-border); -webkit-backdrop-filter:saturate(150%) blur(8px); backdrop-filter:saturate(150%) blur(8px); } .hs-header-inner{ display:flex; align-items:center; gap:var(--hs-sp-4); min-height:var(--hs-header-h); } .hs-brand{ display:flex; align-items:center; gap:var(--hs-sp-3); margin-right:auto; } .hs-brand-logo{ height:34px; width:auto; display:block; } .hs-brand-mark{ width:38px; height:38px; border-radius:11px; background:var(--hs-accent); color:var(--hs-on-accent); display:grid; place-items:center; font-weight:900; font-size:20px; } .hs-brand-name{ font-weight:900; font-size:21px; letter-spacing:-.02em; color:var(--hs-text); } .hs-brand-tag{ font-size:var(--hs-fs-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hs-muted); border-left:1px solid var(--hs-border); padding-left:var(--hs-sp-3); } .hs-nav{ display:flex; align-items:center; gap:var(--hs-sp-1); flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; } .hs-nav::-webkit-scrollbar{ display:none; } .hs-nav a{ white-space:nowrap; } /* uzun kategori listesi taşarsa sağ kenarda temiz solma (kelime ortadan kesilmesin) */ @media(min-width:1025px){ .hs-nav{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); } .hs-nav a{ padding-inline:11px; } } .hs-nav a{ color:var(--hs-text-soft); font-weight:600; font-size:var(--hs-fs-sm); padding:8px 13px; border-radius:var(--hs-radius-pill); } .hs-nav a:hover{ color:var(--hs-text); background:var(--hs-surface-2); } .hs-nav a.is-active{ color:var(--hs-on-accent); background:var(--hs-accent); } .hs-nav-toggle, .hs-theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--hs-border); background:var(--hs-surface); color:var(--hs-text); border-radius:var(--hs-radius-sm); cursor:pointer; font-size:17px; transition:background var(--hs-transition), border-color var(--hs-transition); } .hs-nav-toggle:hover, .hs-theme-toggle:hover{ background:var(--hs-surface-2); border-color:var(--hs-border-strong); } .hs-nav-toggle{ display:none; } .hs-theme-toggle .hs-ico-moon{ display:none; } [data-theme="dark"] .hs-theme-toggle .hs-ico-moon{ display:inline; } [data-theme="dark"] .hs-theme-toggle .hs-ico-sun{ display:none; } .hs-header .hs-btn{ padding:8px 16px; } @media(max-width:1024px){ /* sol ☰ ve inline kategoriler kaldırıldı — kategoriler sağdaki "Menü" dropdown'unda */ .hs-nav-toggle{ display:none !important; } .hs-nav{ display:none !important; } } /* ---- Header actions (arama, giriş, ikonlar, tema) ---- */ .hs-header *, .hs-footer *{ box-sizing:border-box; } .hs-header-actions{ display:flex; align-items:center; gap:var(--hs-sp-2); } /* Arama: eski #hbarama / .icon-search ID kurallarını ezmek için .hs-header öneki + sıfırlamalar */ .hs-header #arama_form.hs-search{ display:flex; align-items:stretch; flex-wrap:nowrap; width:auto; margin:0; padding:0; } .hs-header #hbarama.hs-search-input{ width:170px; max-width:42vw; height:auto; margin:0; float:none; display:block; box-shadow:none; font:inherit; color:var(--hs-text); background:var(--hs-surface); border:1px solid var(--hs-border-strong); border-right:0; border-radius:var(--hs-radius-pill) 0 0 var(--hs-radius-pill); padding:8px 14px; } .hs-header #hbarama.hs-search-input::placeholder{ color:var(--hs-muted); } .hs-header #hbarama.hs-search-input:focus{ outline:none; border-color:var(--hs-accent); } .hs-header .hs-search-btn{ flex:0 0 auto; width:auto; height:auto; min-width:0; margin:0; float:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0 13px; font-size:15px; line-height:1; border:1px solid var(--hs-border-strong); border-left:0; background:var(--hs-surface); color:var(--hs-muted); border-radius:0 var(--hs-radius-pill) var(--hs-radius-pill) 0; } .hs-header .hs-search-btn:hover{ color:var(--hs-accent); } .hs-icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--hs-radius-sm); color:var(--hs-text-soft); cursor:pointer; font-size:18px; text-decoration:none; transition:background var(--hs-transition), color var(--hs-transition); } .hs-icon-btn:hover{ background:var(--hs-surface-2); color:var(--hs-text); } .hs-badge{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--hs-accent); color:var(--hs-on-accent); font-size:10px; font-weight:800; display:grid; place-items:center; } .hs-avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; border:1px solid var(--hs-border); display:block; } .hs-avatar img{ width:100%; height:100%; object-fit:cover; } .hs-auth{ display:flex; align-items:center; gap:var(--hs-sp-2); } .hs-auth .hs-btn{ padding:7px 14px; } /* ---- Header dropdown menü (Giriş/Üye/linkler) ---- */ .hs-menu{ position:relative; } .hs-menu-btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:700; font-size:var(--hs-fs-sm); padding:8px 15px; cursor:pointer; border:1px solid var(--hs-border-strong); background:var(--hs-surface); color:var(--hs-text); border-radius:var(--hs-radius-pill); transition:background var(--hs-transition), border-color var(--hs-transition); } .hs-menu-btn:hover{ background:var(--hs-surface-2); border-color:var(--hs-border-strong); } .hs-menu-btn .icon-menu{ font-size:15px; } .hs-menu-pop{ position:absolute; right:0; top:calc(100% + 8px); min-width:210px; max-height:75vh; overflow:auto; background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); box-shadow:0 18px 44px var(--hs-shadow-lg); padding:6px; display:none; z-index:80; } .hs-menu.hs-open .hs-menu-pop{ display:block; } .hs-menu-pop a{ display:block; padding:10px 12px; border-radius:var(--hs-radius-sm); color:var(--hs-text); font-weight:600; font-size:var(--hs-fs-sm); } .hs-menu-pop a:hover{ background:var(--hs-accent-soft); color:var(--hs-accent); } .hs-menu-pop a.hs-menu-primary{ background:var(--hs-accent); color:var(--hs-on-accent); margin-bottom:2px; } .hs-menu-pop a.hs-menu-primary:hover{ background:var(--hs-accent-hover); color:var(--hs-on-accent); } .hs-menu-sep{ height:1px; background:var(--hs-border); margin:6px 4px; } @media(max-width:600px){ .hs-menu-btn-txt{ display:none; } .hs-menu-btn{ padding:9px 11px; } } /* mobilde arama gizli (kullanıcı isteği — açıkta yer kaplamasın) */ @media(max-width:820px){ .hs-search{ display:none !important; } } /* ---- Footer üst satır + sosyal ---- */ .hs-footer-top{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--hs-sp-4); } .hs-footer-top .hs-footer-nav{ flex:1; } .hs-footer .hs-brand-name{ font-size:var(--hs-fs-lg); } .hs-footer-social{ display:flex; gap:6px; } .hs-footer-social a{ color:var(--hs-text-soft); font-size:18px; } .hs-footer-social a:hover{ color:var(--hs-accent); } /* ---------------------------------------------------------------------------- 7) BUTON / ETİKET (chip) -------------------------------------------------------------------------- */ .hs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--hs-sp-2); font:inherit; font-weight:700; font-size:var(--hs-fs-sm); padding:10px 18px; border-radius:var(--hs-radius-pill); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition); } .hs-btn--primary{ background:var(--hs-accent); color:var(--hs-on-accent); } .hs-btn--primary:hover{ background:var(--hs-accent-hover); color:var(--hs-on-accent); } .hs-btn--soft{ background:var(--hs-accent-soft); color:var(--hs-accent); } .hs-btn--ghost{ background:transparent; color:var(--hs-text); border-color:var(--hs-border-strong); } .hs-btn--ghost:hover{ background:var(--hs-surface-2); } .hs-btn--block{ display:flex; width:100%; } .hs-chip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--hs-fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.06em; line-height:1; padding:5px 11px; border-radius:var(--hs-radius-pill); background:var(--hs-accent); color:var(--hs-on-accent); } .hs-chip--soft{ background:var(--hs-accent-soft); color:var(--hs-accent); } .hs-chip--outline{ background:transparent; border:1px solid var(--hs-border-strong); color:var(--hs-text-soft); } /* ---------------------------------------------------------------------------- 8) KART / HABER KARTI -------------------------------------------------------------------------- */ .hs-card{ background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); overflow:hidden; transition:border-color var(--hs-transition), box-shadow var(--hs-transition), transform var(--hs-transition); } .hs-card:hover{ border-color:var(--hs-border-strong); box-shadow:0 12px 30px var(--hs-shadow); } .hs-card-body{ padding:var(--hs-sp-4); } .hs-news{ display:flex; flex-direction:column; height:100%; background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); overflow:hidden; transition:border-color var(--hs-transition), box-shadow var(--hs-transition), transform var(--hs-transition); } .hs-news:hover{ border-color:var(--hs-border-strong); box-shadow:0 12px 30px var(--hs-shadow); transform:translateY(-2px); } .hs-news-media{ aspect-ratio:16/9; overflow:hidden; background:var(--hs-surface-2); } .hs-news-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .hs-news:hover .hs-news-media img{ transform:scale(1.05); } .hs-news-body{ padding:var(--hs-sp-4); display:flex; flex-direction:column; gap:var(--hs-sp-2); flex:1; } .hs-news-title{ font-size:var(--hs-fs-lg); font-weight:800; line-height:var(--hs-lh-tight); margin:0; } .hs-news-title a{ color:var(--hs-text); } .hs-news-title a:hover{ color:var(--hs-accent); } .hs-news-excerpt{ color:var(--hs-text-soft); font-size:var(--hs-fs-sm); margin:0; } .hs-news-meta{ display:flex; align-items:center; gap:var(--hs-sp-2); color:var(--hs-muted); font-size:var(--hs-fs-xs); margin-top:auto; } .hs-news-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; } /* ---------------------------------------------------------------------------- 9) OVERLAY MANŞET (hero) -------------------------------------------------------------------------- */ .hs-hero{ position:relative; border-radius:var(--hs-radius); overflow:hidden; aspect-ratio:21/9; background:var(--hs-surface-2); } @media(max-width:600px){ .hs-hero{ aspect-ratio:4/3; } } .hs-hero img{ width:100%; height:100%; object-fit:cover; } .hs-hero-veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.15) 55%, transparent); } .hs-hero-cap{ position:absolute; left:0; right:0; bottom:0; padding:var(--hs-sp-6); color:#fff; max-width:780px; } .hs-hero-cap h1{ color:#fff; font-size:var(--hs-fs-4xl); } @media(max-width:600px){ .hs-hero-cap{ padding:var(--hs-sp-4); } .hs-hero-cap h1{ font-size:var(--hs-fs-xl); } } .hs-hero-cap .hs-dek{ color:rgba(255,255,255,.9); font-size:var(--hs-fs-base); margin:0; } /* ---------------------------------------------------------------------------- 10) YATAY RAY (öne çıkanlar) -------------------------------------------------------------------------- */ .hs-railhead{ display:flex; align-items:center; justify-content:space-between; margin:var(--hs-sp-6) 0 var(--hs-sp-4); } .hs-rail{ display:flex; gap:var(--hs-sp-4); overflow-x:auto; padding-bottom:var(--hs-sp-2); scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .hs-rail::-webkit-scrollbar{ height:8px; } .hs-rail::-webkit-scrollbar-thumb{ background:var(--hs-border-strong); border-radius:99px; } .hs-rail > *{ flex:0 0 270px; scroll-snap-align:start; } /* ---------------------------------------------------------------------------- 11) BÖLÜM / BLOK BAŞLIĞI -------------------------------------------------------------------------- */ .hs-sec-title{ display:flex; align-items:center; gap:var(--hs-sp-3); margin:var(--hs-sp-6) 0 var(--hs-sp-4); font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--hs-text); } .hs-sec-title::before{ content:""; width:4px; height:18px; border-radius:3px; background:var(--hs-accent); } .hs-sec-title .hs-more{ margin-left:auto; font-size:var(--hs-fs-sm); font-weight:700; } .hs-block{ margin-bottom:var(--hs-sp-6); } .hs-block-title{ font-size:var(--hs-fs-sm); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--hs-text); margin:0 0 var(--hs-sp-4); padding-bottom:var(--hs-sp-3); border-bottom:2px solid var(--hs-accent); } /* ---------------------------------------------------------------------------- 12) HABER DETAY (makale) + OKUMA MODU -------------------------------------------------------------------------- */ .hs-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--hs-accent); z-index:90; } .hs-article{ max-width:var(--hs-container-narrow); margin:0 auto; } .hs-article-header{ margin-bottom:var(--hs-sp-5); } .hs-article-title{ font-size:var(--hs-fs-4xl); margin:var(--hs-sp-3) 0; } @media(max-width:600px){ .hs-article-title{ font-size:var(--hs-fs-2xl); } } .hs-article-lead{ font-size:var(--hs-fs-lg); color:var(--hs-text-soft); line-height:1.5; } .hs-article-byline{ display:flex; align-items:center; gap:var(--hs-sp-3); color:var(--hs-muted); font-size:var(--hs-fs-sm); padding:var(--hs-sp-3) 0; border-block:1px solid var(--hs-border); margin:var(--hs-sp-4) 0; } .hs-article-byline .hs-av{ width:34px; height:34px; border-radius:50%; background:var(--hs-accent-soft); color:var(--hs-accent); display:grid; place-items:center; font-weight:800; } .hs-read-tools{ display:flex; align-items:center; gap:var(--hs-sp-2); margin:var(--hs-sp-4) 0; } .hs-read-tools .lab{ font-size:var(--hs-fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--hs-muted); } .hs-read-tools .aa{ border:1px solid var(--hs-border-strong); background:var(--hs-surface); color:var(--hs-text); border-radius:var(--hs-radius-sm); cursor:pointer; padding:6px 11px; font-weight:700; } .hs-read-tools .aa.s{ font-size:13px; } .hs-read-tools .aa.l{ font-size:18px; } .hs-read-tools .aa.is-on{ background:var(--hs-accent); color:var(--hs-on-accent); border-color:var(--hs-accent); } .hs-article-cover{ border-radius:var(--hs-radius); overflow:hidden; margin-bottom:var(--hs-sp-5); } .hs-article-body{ font-size:calc(var(--hs-fs-lg) * var(--hs-read-scale)); line-height:1.8; color:var(--hs-text); } .hs-article-body.serif{ font-family:var(--hs-serif); } .hs-article-body > *{ margin-bottom:var(--hs-sp-4); } .hs-article-body img{ border-radius:var(--hs-radius); margin:var(--hs-sp-5) auto; } .hs-article-body h2, .hs-article-body h3{ margin-top:var(--hs-sp-6); } .hs-article-body blockquote{ margin:var(--hs-sp-5) 0; padding:6px 0 6px var(--hs-sp-5); border-left:3px solid var(--hs-accent); color:var(--hs-text); font-style:italic; font-size:1.1em; } .hs-article-body a{ text-decoration:underline; text-underline-offset:2px; } /* ---------------------------------------------------------------------------- 13) FORMLAR -------------------------------------------------------------------------- */ .hs-field{ margin-bottom:var(--hs-sp-4); } .hs-field label{ display:block; font-size:var(--hs-fs-sm); font-weight:600; color:var(--hs-text-soft); margin-bottom:var(--hs-sp-2); } .hs-input,.hs-textarea,.hs-select{ width:100%; font:inherit; color:var(--hs-text); background:var(--hs-surface); border:1px solid var(--hs-border-strong); border-radius:var(--hs-radius-sm); padding:11px 13px; transition:border-color var(--hs-transition), box-shadow var(--hs-transition); } .hs-input:focus,.hs-textarea:focus,.hs-select:focus{ outline:none; border-color:var(--hs-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--hs-accent) 22%, transparent); } .hs-input::placeholder,.hs-textarea::placeholder{ color:var(--hs-muted); } .hs-input-wrap{ display:flex; align-items:stretch; } .hs-input-wrap .hs-input{ border-top-right-radius:0; border-bottom-right-radius:0; } .hs-input-suffix{ display:inline-flex; align-items:center; padding:0 var(--hs-sp-3); background:var(--hs-surface-2); border:1px solid var(--hs-border-strong); border-left:0; border-radius:0 var(--hs-radius-sm) var(--hs-radius-sm) 0; color:var(--hs-muted); font-size:var(--hs-fs-sm); } /* ---------------------------------------------------------------------------- 14) FOOTER -------------------------------------------------------------------------- */ .hs-footer{ border-top:1px solid var(--hs-border); background:var(--hs-bg-soft); margin-top:var(--hs-sp-8); } .hs-footer-inner{ padding-block:var(--hs-sp-6); display:flex; flex-direction:column; gap:var(--hs-sp-4); } .hs-footer-nav{ display:flex; flex-wrap:wrap; gap:var(--hs-sp-4); } .hs-footer-nav a{ color:var(--hs-text-soft); font-size:var(--hs-fs-sm); font-weight:600; } .hs-footer-nav a:hover{ color:var(--hs-accent); } .hs-copy{ color:var(--hs-muted); font-size:var(--hs-fs-xs); } /* ---------------------------------------------------------------------------- 15) YARDIMCILAR -------------------------------------------------------------------------- */ .hs-muted{ color:var(--hs-muted); } .hs-soft{ color:var(--hs-text-soft); } .hs-center{ text-align:center; } .hs-stack > * + *{ margin-top:var(--hs-sp-4); } .hs-hide{ display:none !important; } @media(max-width:600px){ .hs-hide-mobile{ display:none !important; } } .hs-divider{ height:1px; background:var(--hs-border); border:0; margin:var(--hs-sp-5) 0; } .hs-dek{ color:var(--hs-text-soft); } /* ---------------------------------------------------------------------------- 16) HABER DETAY — mevcut markup adaptörü (yalnız .hs-body sayfalarında) Layout/float'lara dokunulmaz; sadece görünüm + gece modu uyumu. -------------------------------------------------------------------------- */ .hs-body #orta-kapsa{ background:transparent; } .hs-body #haber_ic_sayfa_kutu{ padding-block:var(--hs-sp-5); } /* ana makale kartı */ .hs-body #dis_haber_kapsa{ background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); padding:var(--hs-sp-5); } .hs-body .goster, .hs-body .goster-haber, .hs-body #haber_kismi{ background:transparent; color:var(--hs-text); } @media(max-width:600px){ .hs-body #dis_haber_kapsa{ padding:var(--hs-sp-4); } } /* başlık + spot + künye */ .hs-body .haber_baslik_kutu{ font-size:var(--hs-fs-3xl); font-weight:800; line-height:1.2; letter-spacing:-.015em; color:var(--hs-text); margin:0 0 var(--hs-sp-3); } @media(max-width:600px){ .hs-body .haber_baslik_kutu{ font-size:var(--hs-fs-2xl); } } .hs-body .haber_spot{ font-size:var(--hs-fs-lg); color:var(--hs-text-soft); line-height:1.5; margin:0 0 var(--hs-sp-4); } .hs-body .creator-area{ display:flex; align-items:center; gap:var(--hs-sp-3); flex-wrap:wrap; padding:var(--hs-sp-3) 0; border-block:1px solid var(--hs-border); margin:0 0 var(--hs-sp-5); font-size:var(--hs-fs-sm); } .hs-body .crt-name{ font-weight:700; color:var(--hs-text); } .hs-body .crt-tarih{ color:var(--hs-muted); } /* başlıküstü istatistik (gösterim / viral puan) */ .hs-body .baslikustu_stat span{ color:var(--hs-accent); font-weight:800; } .hs-body .baslikustu_stat small{ color:var(--hs-muted); } /* paylaşım kutusu */ .hs-body .share-box-new{ display:flex; gap:var(--hs-sp-2); margin:0 0 var(--hs-sp-4); flex-wrap:wrap; } .hs-body .share-box-new a{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; cursor:pointer; border-radius:var(--hs-radius-pill); background:var(--hs-surface-2); color:var(--hs-text-soft); font-weight:700; font-size:var(--hs-fs-sm); } .hs-body .share-box-new a:hover{ background:var(--hs-accent-soft); color:var(--hs-accent); } /* listicle maddeler */ .hs-body .hekle-gos{ list-style:none; margin:0; padding:0; } .hs-body .hekle-gos-madde{ margin:0 0 var(--hs-sp-6); } .hs-body .hekle-gbas{ font-size:var(--hs-fs-xl); font-weight:800; line-height:1.3; color:var(--hs-text); margin:0 0 var(--hs-sp-3); } .hs-body .hekle-gres{ margin:0 0 var(--hs-sp-3); } .hs-body .hekle-gres img, .hs-body .haber_ic_resim{ width:100%; height:auto; border-radius:var(--hs-radius); } .hs-body .hekle-gmet{ font-size:var(--hs-fs-lg); line-height:1.8; color:var(--hs-text); } .hs-body .hekle-gmet a{ color:var(--hs-accent); text-decoration:underline; text-underline-offset:2px; } /* tek metinli makale */ .hs-body .haber_metin{ font-size:var(--hs-fs-lg); line-height:1.8; color:var(--hs-text); } .hs-body .haber_metin img{ border-radius:var(--hs-radius); height:auto; } .hs-body .haber_resim{ margin:0 var(--hs-sp-4) var(--hs-sp-3) 0; } /* kategoriler */ .hs-body #haber_kategorileri{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--hs-sp-2); margin:var(--hs-sp-5) 0; } .hs-body #haber_kategorileri > span{ color:var(--hs-muted); font-size:var(--hs-fs-sm); font-weight:700; } .hs-body #haber_kategorileri ul{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--hs-sp-2); margin:0; padding:0; } .hs-body #haber_kategorileri a{ display:inline-block; padding:5px 11px; border-radius:var(--hs-radius-pill); background:var(--hs-accent-soft); color:var(--hs-accent); font-size:var(--hs-fs-xs); font-weight:700; } /* ilgili haberler */ .hs-body #haber_alakali, .hs-body .alakali_kutu{ background:var(--hs-surface); } .hs-body .alakali_kutu{ display:flex; gap:var(--hs-sp-3); align-items:center; padding:var(--hs-sp-3); border:1px solid var(--hs-border); border-radius:var(--hs-radius-sm); margin-bottom:var(--hs-sp-2); } .hs-body .alakali_kutu img{ border-radius:var(--hs-radius-sm) !important; } /* yorumlar */ .hs-body #yorumlar_dis_kutu{ background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius); padding:var(--hs-sp-5); margin-top:var(--hs-sp-6); } .hs-body #yorumlar_dis_kutu h3{ color:var(--hs-text); } /* sağ kolon */ .hs-body .yeni_sag_kolon_ic > *{ margin-bottom:var(--hs-sp-5); } .hs-body .yeni_sag_kolon_ic .block-title h4, .hs-body .yeni_sag_kolon_ic .alert-heading{ color:var(--hs-text); } /* sistem mesajları */ .hs-body .well{ background:var(--hs-surface-2); border:1px solid var(--hs-border); border-radius:var(--hs-radius); padding:var(--hs-sp-5); color:var(--hs-text); } /* ---------------------------------------------------------------------------- 17) ANA SAYFA MODÜLLERİ — token override (yalnız .hs-body) Modül CSS'i body'de sonra yüklendiği için renk/zemin/kenarlıkta !important. Layout (genişlik/float/grid) modüllerin kendi CSS'inde KALIR — dokunulmaz. Ortak sınıflar: bigPic / rows / table / dikeySurmanset. -------------------------------------------------------------------------- */ /* blok başlığı: "Bu hafta", "Neler oluyor?" */ .hs-body .block-title h4{ color:var(--hs-text) !important; font-weight:800; } .hs-body .block-title .line{ background:var(--hs-border) !important; border-color:var(--hs-border) !important; } /* kart gövdesi + içerik */ .hs-body .haber-item{ background-color:var(--hs-surface) !important; } .hs-body .item-content{ background-color:var(--hs-surface) !important; box-shadow:0 0 0 1px var(--hs-border) !important; } .hs-body .style-row .haber-item{ background-color:var(--hs-surface-2) !important; } .hs-body .item-image-box{ border-color:var(--hs-border) !important; box-shadow:none !important; } /* başlık / spot / yazar / tarih */ .hs-body .item-text h3, .hs-body .item-content .item-text h3{ color:var(--hs-text) !important; } .hs-body .item-content h3:hover{ color:var(--hs-accent) !important; } .hs-body .item-text span, .hs-body .item-content .item-text span{ color:var(--hs-text-soft) !important; } .hs-body .item-yazar, .hs-body .item-date, .hs-body .item-content .item-yazar, .hs-body .item-content .item-date{ color:var(--hs-muted) !important; } /* kategori rozeti (yeşil hardcode → accent) */ .hs-body .item-image-box span{ background-color:var(--hs-accent) !important; color:var(--hs-on-accent) !important; } /* bigSlide — büyük manşet slider (1-15) */ .hs-body .style-bigSlide .content-capsul, .hs-body .style-bigSlide .content-capsul-in{ background-color:var(--hs-surface) !important; } .hs-body .style-bigSlide .slide-box{ border-color:var(--hs-border-strong) !important; } .hs-body .style-bigSlide .haber-item{ background-color:var(--hs-surface-2) !important; box-shadow:inset 0 -1px 0 1px var(--hs-border-strong) !important; } .hs-body .style-bigSlide .haber-item h3 .kats{ background-color:var(--hs-accent) !important; color:var(--hs-on-accent) !important; border-color:var(--hs-accent) !important; } .hs-body .slide-rigt-but{ background-color:var(--hs-accent) !important; box-shadow:0 1px 6px var(--hs-shadow) !important; } .hs-body .slide-rigt-but i{ color:var(--hs-on-accent) !important; } /* üst kayan haber şeridi (#top-slide-manset) */ .hs-body #top-slide-manset-out, .hs-body .hab_home_top_manset{ background:transparent !important; } .hs-body #top-slide-manset .haber-item .item-content h6, .hs-body .hab_home_top_manset .item-content h6{ color:var(--hs-text) !important; } .hs-body #top-slide-manset .item-image{ border:1px solid var(--hs-border) !important; } /* döviz / istatistik kutuları (yeşil değerler → accent) */ .hs-body .style-table .haber-item{ border-bottom:1px solid var(--hs-border) !important; } /* "Çok Okunanlar" / genel blok başlıkları */ .hs-body .seckinler .block-title h4{ color:var(--hs-text) !important; } /* ---------------------------------------------------------------------------- 18) LİSTE SAYFALARI (kategori / etiket / arama / yeniler) -------------------------------------------------------------------------- */ .hs-body .page-header{ border-bottom:1px solid var(--hs-border) !important; } .hs-body .page-header h1, .hs-body .page-header h2, .hs-body .page-header h3{ color:var(--hs-text); } .hs-body .page-header small{ color:var(--hs-muted); } /* tekil görünüm (goster well) */ .hs-body .haber_kismi{ color:var(--hs-text); } .hs-body .haber_spot{ color:var(--hs-text-soft); } .hs-body .haber_tarih, .hs-body .haber_link{ color:var(--hs-muted); } .hs-body .haber_tarih a, .hs-body .haber_link a{ color:var(--hs-accent); } .hs-body .haber_metin{ color:var(--hs-text); } /* liste kartları (butunlist) */ .hs-body .butunlist-li{ border-bottom:1px solid var(--hs-border); padding-bottom:var(--hs-sp-4); margin-bottom:var(--hs-sp-4); } .hs-body .butunlist-baslik a{ color:var(--hs-text) !important; font-weight:800; } .hs-body .butunlist-baslik a:hover{ color:var(--hs-accent) !important; } .hs-body .butunlist-spot{ color:var(--hs-text-soft); } .hs-body .butunlist-tarih{ color:var(--hs-muted); font-size:var(--hs-fs-xs); } .hs-body .butunlist-tarih a{ color:var(--hs-muted); } /* arama sonuçları */ .hs-body .haber-arasonuc{ color:var(--hs-text); border-bottom:1px solid var(--hs-border); padding-bottom:var(--hs-sp-3); } .hs-body .secili_sayfa, .hs-body .sel{ color:var(--hs-accent); } /* genel Bootstrap parçaları */ .hs-body .img-polaroid{ border:1px solid var(--hs-border) !important; background:var(--hs-surface) !important; border-radius:var(--hs-radius-sm); box-shadow:none !important; } .hs-body .well-warning, .hs-body .well-error{ background:var(--hs-surface-2) !important; border:1px solid var(--hs-border) !important; color:var(--hs-text) !important; } .hs-body .btn-link{ color:var(--hs-accent) !important; } /* ---------------------------------------------------------------------------- 19) HABER DETAY — gece modu düzeltmeleri (eski ID/yüksek-specificity kurallarını ez) -------------------------------------------------------------------------- */ /* başlık / spot / künye okunaklılığı */ .hs-body .haber_baslik_kutu{ color:var(--hs-text) !important; } .hs-body .haber_spot{ color:var(--hs-text-soft) !important; } .hs-body .creator-area{ background:transparent !important; border:0 !important; padding:0 !important; margin-bottom:var(--hs-sp-4) !important; } .hs-body .crt-name{ color:var(--hs-text) !important; } .hs-body .crt-tarih{ color:var(--hs-muted) !important; } .hs-body .hekle-gbas{ color:var(--hs-text) !important; } .hs-body .hekle-gmet{ color:var(--hs-text) !important; } /* sağ kolon "Öne Çıkanlar / şu an popüler" widget'ı — beyaz kutuları surface yap */ .hs-body .yeni_sag_kolon_ic .alan_baslik{ color:var(--hs-text) !important; } .hs-body .yeni_sag_kolon_ic li, .hs-body .yeni_sag_kolon_ic .haber_bilgiler, .hs-body .yeni_sag_kolon_ic .haber-manset-alertlist > *{ background:var(--hs-surface) !important; border-color:var(--hs-border) !important; } .hs-body .yeni_sag_kolon_ic .haber_bilgiler a, .hs-body .yeni_sag_kolon_ic .haber_bilgiler span a{ color:var(--hs-text) !important; } .hs-body .yeni_sag_kolon_ic .butunlist-tarih, .hs-body .yeni_sag_kolon_ic .butunlist-tarih a{ color:var(--hs-muted) !important; } /* sağ kolonda tekrarlanan footer'ı gizle (ana footer sayfa altında zaten var) */ .hs-body .yeni_sag_kolon_ic #footer, .hs-body .yeni_sag_kolon_ic .hs-footer{ display:none !important; } /* footer dar alanda düzgün yığılsın */ @media(max-width:520px){ .hs-footer-top{ flex-direction:column; align-items:flex-start; } } /* ---------------------------------------------------------------------------- 20) GECE MODU — kalan açık-ada bloklar (homepage + makale) -------------------------------------------------------------------------- */ /* başlık barları (Şu an Popüler / Çok Okunanlar / Öne Çıkanlar / Günün En İyi …) */ .hs-body .alan_baslik{ background:transparent !important; color:var(--hs-text) !important; border-color:var(--hs-border) !important; } /* haber_bilgiler kartları (sağ kolon + homepage ızgara + ilgili) */ .hs-body .haber_bilgiler{ background:var(--hs-surface) !important; border-color:var(--hs-border) !important; } .hs-body .haber_bilgiler a, .hs-body .haber_bilgiler span a{ color:var(--hs-text) !important; } .hs-body .haber_bilgiler .butunlist-tarih, .hs-body .haber_bilgiler .butunlist-tarih a{ color:var(--hs-muted) !important; } /* footer (#footer ID'sini ez) */ .hs-body #footer{ background:var(--hs-bg-soft) !important; border-top:1px solid var(--hs-border) !important; } .hs-body #footer .footer-logo-yazi{ color:var(--hs-accent) !important; } /* İlgili Haberler (tavsiye) */ .hs-body .haber-gosteralt-tavsiye{ background:var(--hs-surface) !important; border-color:var(--hs-border) !important; } .hs-body .haber-gosteralt-tavsiye h3{ color:var(--hs-text) !important; } .hs-body .goster-sag-tavsiye{ background:transparent !important; } .hs-body .tavsiye_kapsa, .hs-body .ilgili_tavsiye_li{ background:var(--hs-surface) !important; border-color:var(--hs-border) !important; } .hs-body .ilgili_tavsiye_li a, .hs-body .tavsiye_kapsa a{ color:var(--hs-text) !important; } /* "Şu an haberi okuyan" (viral grafik) */ .hs-body .habergrafik, .hs-body .habergrafik-list, .hs-body .habergrafik-list-ul{ background:var(--hs-surface) !important; border-color:var(--hs-border) !important; } .hs-body .habergrafik li, .hs-body .habergrafik b, .hs-body .habergrafik span, .hs-body .habergrafik a{ color:var(--hs-text) !important; } /* manşet slider pagination (1-15) */ .hs-body .pagination{ background:var(--hs-surface) !important; } .hs-body .pagination > span, .hs-body .swiper-pagination-switch, .hs-body .pagination a{ background:var(--hs-surface-2) !important; color:var(--hs-text) !important; border-color:var(--hs-border-strong) !important; } .hs-body .swiper-active-switch, .hs-body .swiper-pagination-switch-active, .hs-body .pagination .active{ background:var(--hs-accent) !important; color:var(--hs-on-accent) !important; border-color:var(--hs-accent) !important; } /* genel beyaz kalanlar */ .hs-body .seckinler{ background:transparent !important; } .hs-body .seckin_haber{ background:var(--hs-surface) !important; box-shadow:0 0 0 1px var(--hs-border) !important; } .hs-body .seckin_haber span a{ color:var(--hs-text) !important; } .hs-body .seckin_haber:hover span a{ color:var(--hs-accent) !important; } /* ---------------------------------------------------------------------------- 21) ÜYELİK / GİRİŞ formları — temiz ortalı kart + gece/gündüz -------------------------------------------------------------------------- */ .hs-body .center-box, .hs-body .formbox{ max-width:440px; margin:48px auto !important; float:none !important; width:auto; background:var(--hs-surface) !important; border:1px solid var(--hs-border) !important; border-radius:var(--hs-radius-lg) !important; box-shadow:0 12px 40px var(--hs-shadow) !important; padding:32px !important; box-sizing:border-box; } .hs-body .center-box h1, .hs-body .center-box h2, .hs-body .center-box h3, .hs-body .formbox h1, .hs-body .formbox h2, .hs-body .formbox h3, .hs-body .formbox legend{ color:var(--hs-text) !important; text-align:center; margin:0 0 var(--hs-sp-5); font-weight:800; } .hs-body .control-label, .hs-body .control-group label, .hs-body .formbox label{ color:var(--hs-text-soft) !important; font-weight:600; display:block; margin-bottom:6px; text-align:left; } .hs-body .control-group, .hs-body .controls{ margin:0 0 16px !important; } .hs-body .uyelik_form input, .hs-body .login-form input, .hs-body .formbox input, .hs-body .center-box input, .hs-body .inp_class, .hs-body .text_uye{ width:100% !important; box-sizing:border-box; font:inherit; color:var(--hs-text) !important; background:var(--hs-surface) !important; border:1px solid var(--hs-border-strong) !important; border-radius:var(--hs-radius-sm) !important; padding:12px 14px !important; margin-bottom:14px !important; height:auto !important; box-shadow:none !important; } .hs-body .formbox input:focus, .hs-body .center-box input:focus{ outline:none; border-color:var(--hs-accent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--hs-accent) 22%, transparent) !important; } .hs-body .formbox input::placeholder, .hs-body .center-box input::placeholder{ color:var(--hs-muted); } .hs-body .hb-red-but, .hs-body .formbox .submit, .hs-body .center-box .submit, .hs-body .formbox button[type="submit"], .hs-body .center-box button[type="submit"], .hs-body .form-actions .submit{ display:block; width:100% !important; box-sizing:border-box; cursor:pointer; background:var(--hs-accent) !important; color:var(--hs-on-accent) !important; border:0 !important; border-radius:var(--hs-radius-pill) !important; padding:13px !important; font-weight:800; font-size:15px; margin-top:6px; text-align:center; } .hs-body .hb-red-but:hover, .hs-body .submit:hover{ background:var(--hs-accent-hover) !important; } .hs-body .form-actions{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; } .hs-body .control-helper, .hs-body .diger_text, .hs-body .text_uye + *{ color:var(--hs-muted) !important; } .hs-body .diger_text a{ color:var(--hs-accent) !important; } /* facebook ile giriş butonu */ .hs-body .fb-button-mini{ display:flex; align-items:center; justify-content:center; gap:8px; background:#1877f2 !important; color:#fff !important; border-radius:var(--hs-radius-sm) !important; padding:11px !important; margin-bottom:16px; font-weight:700; text-decoration:none; } .hs-body .fb-button-mini .fb-label, .hs-body .fb-button-mini span{ color:#fff !important; } /* ---------------------------------------------------------------------------- 22) ÜYE GİRİŞ / İŞLEM MODALI (#loginModal2 vb.) — her sayfada görünebilir .hs-body'ye bağlı DEĞİL; token'lar data-theme'e göre zaten doğru çözülür. -------------------------------------------------------------------------- */ #loginModal2, #loginModal, #hab_modal{ background:var(--hs-surface) !important; color:var(--hs-text) !important; border:1px solid var(--hs-border) !important; border-radius:var(--hs-radius-lg) !important; box-shadow:0 24px 70px rgba(0,0,0,.45) !important; overflow:hidden; } #loginModal2 .modal-header, #loginModal .modal-header, #hab_modal .modal-header{ background:var(--hs-surface) !important; border-bottom:1px solid var(--hs-border) !important; padding:18px 22px !important; } #loginModal2 .modal-header h3, #loginModal2 .modal-header h4, #loginModal .modal-header h3, #loginModal .modal-header h4, #hab_modal .modal-header h3, #hab_modal .modal-header h4{ color:var(--hs-text) !important; font-weight:800; margin:0; } #loginModal2 .modal-body, #hab_modal .modal-body, #giris_modal_alt_kapsa{ background:var(--hs-surface) !important; color:var(--hs-text) !important; padding:22px !important; } #loginModal2 .close, #loginModal .close, #hab_modal .close{ color:var(--hs-muted) !important; opacity:1 !important; text-shadow:none !important; font-weight:700; } #loginModal2 .close:hover, #hab_modal .close:hover{ color:var(--hs-text) !important; } /* modal input'ları */ .uye_input{ width:100% !important; box-sizing:border-box; font:inherit; color:var(--hs-text) !important; background:var(--hs-surface) !important; border:1px solid var(--hs-border-strong) !important; border-radius:var(--hs-radius-sm) !important; padding:12px 14px !important; margin-bottom:12px !important; height:auto !important; box-shadow:none !important; } .uye_input:focus{ outline:none; border-color:var(--hs-accent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--hs-accent) 22%, transparent) !important; } .uye_input::placeholder{ color:var(--hs-muted); } /* "Giriş Yap" butonu — gri yerine accent */ #gonder, .but_uyelik, .submit.but_uyelik{ background:var(--hs-accent) !important; color:var(--hs-on-accent) !important; border:0 !important; border-radius:var(--hs-radius-pill) !important; padding:12px 24px !important; font-weight:800 !important; box-shadow:none !important; text-shadow:none !important; cursor:pointer; } #gonder:hover, .but_uyelik:hover{ background:var(--hs-accent-hover) !important; } /* "Üye Ol" / "Şifremi unuttum" — ikincil buton */ #loginModal2 .but_login, #giris_modal_alt_kapsa .but_login{ background:var(--hs-surface-2) !important; color:var(--hs-text) !important; border:1px solid var(--hs-border-strong) !important; border-radius:var(--hs-radius-pill) !important; padding:8px 14px !important; font-weight:700; text-decoration:none; } #loginModal2 .but_login:hover, #giris_modal_alt_kapsa .but_login:hover{ background:var(--hs-surface-3) !important; } /* Facebook ile giriş (global) */ .fb-button-mini, .fb-button{ display:flex !important; align-items:center; justify-content:center; gap:8px; background:#1877f2 !important; border-radius:var(--hs-radius-sm) !important; padding:12px !important; margin-bottom:16px !important; font-weight:700; text-decoration:none; } .fb-button-mini, .fb-button-mini *, .fb-button, .fb-button *{ color:#fff !important; } /* #loginModal — "Üye Ol / Giriş" birleşik popup ek stilleri */ #loginModal .modal-body{ background:var(--hs-surface) !important; color:var(--hs-text) !important; padding:22px !important; } #loginModal .modal-footer{ background:var(--hs-bg-soft) !important; border-top:1px solid var(--hs-border) !important; padding:14px 22px !important; } #loginModal .modal-footer p{ color:var(--hs-muted) !important; margin:0; font-size:13px; } #loginModal .uyelik_alt{ margin-top:16px; text-align:center; } #loginModal .uyelik_alt p{ color:var(--hs-text-soft) !important; margin:5px 0; } #loginModal a{ color:var(--hs-accent) !important; } #loginModal .control-helper{ color:var(--hs-muted) !important; font-size:12px; } #loginModal .btn-primary, #facebook_signup_form .btn-primary{ background:var(--hs-accent) !important; color:var(--hs-on-accent) !important; border:0 !important; border-radius:var(--hs-radius-pill) !important; padding:12px 24px !important; font-weight:800 !important; box-shadow:none !important; text-shadow:none !important; cursor:pointer; width:100%; } #loginModal .btn-primary:hover{ background:var(--hs-accent-hover) !important; } #uyelik_tur_giris input[type="text"], #uyelik_tur_giris input[type="password"]{ width:100% !important; box-sizing:border-box; color:var(--hs-text) !important; background:var(--hs-surface) !important; border:1px solid var(--hs-border-strong) !important; border-radius:var(--hs-radius-sm) !important; padding:12px 14px !important; margin-bottom:12px !important; } #uyelik_tur_giris label{ color:var(--hs-text-soft) !important; font-weight:600; display:block; margin-bottom:4px; } #uyelik_tur_giris #gonder{ width:100%; } /* ---------------------------------------------------------------------------- 23) KÜNYE / İLETİŞİM / GİZLİLİK (c=kunye) -------------------------------------------------------------------------- */ /* künye kartı */ .hs-body .kunye{ max-width:720px; margin:32px auto; } .hs-body .kunye-ic{ background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius-lg); padding:32px; box-shadow:0 8px 30px var(--hs-shadow); } @media(max-width:600px){ .hs-body .kunye-ic{ padding:22px; } } .hs-body .kunye-adi{ text-align:center; padding-bottom:20px; margin-bottom:6px; border-bottom:1px solid var(--hs-border); } .hs-body .kunye-logo .head-logo-yazi{ font-size:28px; font-weight:900; color:var(--hs-accent); } .hs-body .kunye-logo img{ display:inline-block; } /* özel etiketler → tanım listesi görünümü */ .hs-body .ek-kunye satir{ display:flex; gap:18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--hs-border); } .hs-body .ek-kunye satir:last-child{ border-bottom:0; } .hs-body .ek-kunye unvan{ flex:0 0 190px; color:var(--hs-muted); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; } .hs-body .ek-kunye isimlistesi{ display:flex; flex-wrap:wrap; gap:6px 10px; } .hs-body .ek-kunye isim{ color:var(--hs-text); font-weight:600; } .hs-body .ek-kunye a{ color:var(--hs-accent); } @media(max-width:600px){ .hs-body .ek-kunye satir{ flex-direction:column; gap:4px; } .hs-body .ek-kunye unvan{ flex-basis:auto; } } /* iletişim sayfası */ .hs-body .iletisim, .hs-body #home_man{ max-width:580px; margin:24px auto; } .hs-body .beyaz{ background:transparent !important; } .hs-body #iletisimFormu{ background:var(--hs-surface); border:1px solid var(--hs-border); border-radius:var(--hs-radius-lg); padding:28px; box-shadow:0 8px 30px var(--hs-shadow); } .hs-body .iletisim-form label{ display:block; color:var(--hs-text-soft); font-weight:600; margin-bottom:6px; } .hs-body .iletisim-form p{ margin:0 0 16px; } .hs-body .iletisim-form input, .hs-body .iletisim-form textarea{ width:100% !important; box-sizing:border-box; font:inherit; color:var(--hs-text) !important; background:var(--hs-surface) !important; border:1px solid var(--hs-border-strong) !important; border-radius:var(--hs-radius-sm) !important; padding:12px 14px !important; } .hs-body .iletisim-form textarea{ min-height:120px; resize:vertical; } .hs-body .iletisim-form input:focus, .hs-body .iletisim-form textarea:focus{ outline:none; border-color:var(--hs-accent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--hs-accent) 22%, transparent) !important; } .hs-body .buttun{ background:var(--hs-accent) !important; color:var(--hs-on-accent) !important; border:0 !important; border-radius:var(--hs-radius-pill) !important; padding:12px 28px !important; font-weight:800; cursor:pointer; } .hs-body .buttun:hover{ background:var(--hs-accent-hover) !important; } /* resmi bilgiler listesi */ .hs-body .iletisim li{ list-style:none; color:var(--hs-text-soft); padding:3px 0; font-size:var(--hs-fs-sm); } /* ---------------------------------------------------------------------------- 24) KALAN BEYAZ ÇUBUK/KART DÜZELTMELERİ + #singupModal -------------------------------------------------------------------------- */ /* page-header başlığı (eski .page-header h1{background:#EAEAEA}) */ .hs-body .page-header h1, .hs-body .page-header h2, .hs-body .page-header h3, .hs-body .kategoris-page .page-header h1{ background-color:transparent !important; border:0 !important; color:var(--hs-text) !important; text-indent:0 !important; line-height:1.2 !important; font-weight:800; padding:0 0 var(--hs-sp-3) !important; } /* künye parent + gizlilik/goster kartları beyaz kalmasın */ .hs-body .kunye{ background:transparent !important; } .hs-body .goster{ background:transparent !important; } .hs-body .goster.well{ background:var(--hs-surface) !important; border:1px solid var(--hs-border) !important; border-radius:var(--hs-radius) !important; } .hs-body .goster.well h4, .hs-body .goster.well h3{ color:var(--hs-text) !important; } .hs-body .goster.well .haber_kismi{ color:var(--hs-text) !important; } /* #singupModal ("Kayıt Ol") — diğer modallarla aynı tema */ #singupModal{ background:var(--hs-surface) !important; color:var(--hs-text) !important; border:1px solid var(--hs-border) !important; border-radius:var(--hs-radius-lg) !important; box-shadow:0 24px 70px rgba(0,0,0,.45) !important; overflow:hidden; } #singupModal .modal-header{ background:var(--hs-surface) !important; border-bottom:1px solid var(--hs-border) !important; padding:18px 22px !important; } #singupModal .modal-header h3, #singupModal .modal-header h4, #singupModal h5{ color:var(--hs-text) !important; font-weight:800; margin:0; } #singupModal .modal-body, #singupModal .uyelik_tur, #singupModal .uyelik_formu{ background:var(--hs-surface) !important; color:var(--hs-text) !important; padding:22px !important; } #singupModal .close{ color:var(--hs-muted) !important; opacity:1 !important; text-shadow:none !important; } #singupModal a{ color:var(--hs-accent) !important; } #singupModal label, #singupModal .control-label{ color:var(--hs-text-soft) !important; } #singupModal .control-helper{ color:var(--hs-muted) !important; } /* ───────── ana sayfa: manşet sayfalama (1-15), Çok Okunanlar, Popüler Haberler ───────── */ /* 1-2-3-4-5 … manşet numara şeridi */ .hs-body #main-manset-buts-capsul{ background:var(--hs-surface) !important; } .hs-body .main_buts{ border-color:var(--hs-border-strong) !important; } .hs-body .main_buts a{ color:var(--hs-text-soft) !important; } .hs-body .main_buts a:hover{ background:var(--hs-accent) !important; color:var(--hs-on-accent) !important; } /* Çok Okunanlar kartları */ .hs-body .gn-item{ background:var(--hs-surface) !important; } .hs-body .gundemdeki{ color:var(--hs-text) !important; } .hs-body .gn-item h6{ color:var(--hs-text) !important; } .hs-body .gn-item h6 a{ color:var(--hs-text) !important; } .hs-body span.gn-metin{ color:var(--hs-text-soft) !important; } .hs-body span.gn-tarih{ background:var(--hs-surface) !important; color:var(--hs-muted) !important; } /* Popüler Haberler kartları */ .hs-body .popi-target{ background:var(--hs-surface) !important; } .hs-body span.popi-content{ color:var(--hs-text) !important; } .hs-body .popi-target:hover span.popi-content{ color:var(--hs-accent) !important; } @media(prefers-reduced-motion:reduce){ .hs-body *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }