/* ============================================================================ 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; } .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){ .hs-nav-toggle{ display:inline-flex; order:-1; } .hs-header-inner{ position:relative; } .hs-nav{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--hs-bg); border-bottom:1px solid var(--hs-border); padding:var(--hs-sp-2); box-shadow:0 14px 26px var(--hs-shadow); display:none; max-height:70vh; overflow:auto; } .hs-nav.hs-open{ display:flex; } .hs-nav a{ padding:var(--hs-sp-3); border-radius:var(--hs-radius-sm); } } /* ---- 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); } .hs-search{ display:flex; align-items:stretch; } .hs-search-input{ width:170px; max-width:42vw; 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-search-input::placeholder{ color:var(--hs-muted); } .hs-search-input:focus{ outline:none; border-color:var(--hs-accent); } .hs-search-btn{ border:1px solid var(--hs-border-strong); border-left:0; background:var(--hs-surface); color:var(--hs-muted); cursor:pointer; padding:0 13px; font-size:15px; border-radius:0 var(--hs-radius-pill) var(--hs-radius-pill) 0; } .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; } } @media(max-width:600px){ .hs-search-input{ width:120px; } .hs-auth .uyeol_but{ display:none; } } @media(max-width:430px){ .hs-search{ display:none; } } /* ---- 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); } /* 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); } @media(prefers-reduced-motion:reduce){ .hs-body *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }